Προγραμματιστικά Εργαλεία για το Διαδίκτυο - Δραστηριότητα δημιουργίας ιστότοπου με HTML

Προγραμματιστικά Εργαλεία για το Διαδίκτυο - Δραστηριότητα δημιουργίας ιστότοπου με HTML

  Δεκεμβρίου 01, 2013    Philippos Koutsakas

---

Πριν ξεκινήσετε ρίξτε μια ματιά στην παρουσίαση:

Δημιουργία Ιστότοπου με θέμα: «Τα νησιά των Σποράδων»

Ο ιστότοπος που θα δημιουργήσουμε αφορά στα τέσσερα νησιά των Σποράδων:

1. Σκιάθος
2. Σκόπελος
3. Σκύρος
4. Αλόνησος

Συνεπώς πρέπει ο ιστότοπος μας θα αποτελείται από πέντε ιστοσελίδες: μία για κάθε νησί και μία κεντρική που θα συνδέει τις ιστοσελίδες μεταξύ τους.

Βήμα 1ο 
Ξεκινήστε την εφαρμογή κατεβάζοντας το κενό αρχείο HTML από εδώ

Βήμα 2ο 
Δημιουργήστε έναν φάκελο μέσα στον φάκελο σας με όνομα sporades.

Μέσα στον φάκελο σποράδες δημιουργήστε τους φακέλους: pics, sopunds, etc.

Αντιγράψτε το αρχείο που κατεβάσατε (index.html) στον φάκελο sporades.

Βήμα 3ο 

Δημιουργήστε τις εξής πέντε ιστοσελίδες:

1. sporades.html (η μορφή της ιστοσελίδας αυτής περιγράφεται στο αρχείο Πρώτη Ιστοσελίδα.pdf)
2. skiathos.html (η μορφή της ιστοσελίδας αυτής περιγράφεται στο αρχείο Δεύτερη Ιστοσελίδα.pdf) 
3. skopelos.html (η μορφή της ιστοσελίδας αυτής περιγράφεται στο αρχείο Τρίτη Ιστοσελίδα.pdf) 
4. alonisos.html (η μορφή της ιστοσελίδας αυτής περιγράφεται στο αρχείο Τέταρτη Ιστοσελίδα.pdf) 
5. skiros.html (η μορφή της ιστοσελίδας αυτής περιγράφεται στο αρχείο Πέμπτη Ιστοσελίδα.pdf) 

Εικόνες για τις ιστοσελίδες σας μπορείτε να βρείτε και να κατεβάσετε από το διαδίκτυο. Δεν είναι απαραίτητο να είναι ίδιες με αυτές τους παραδείγματος.

Αποθηκεύστε με προσοχή τις ιστοσελίδες.

Μικρή βοήθεια: η εντολή με την οποία εισάγουμε εικόνα:

• στην περίπτωση που η εικόνα είναι στον ίδιο φάκελο με το αρχείο html
• <IMG SRC = "όνομα_εικόνας.επέκταση"> 

• στην περίπτωση που η εικόνα είναι στον φάκελο που βρίσκεται στο τέλος της διαδρομής
• <IMG SRC = "διαδρομή/όνομα_εικόνας.επέκταση"> 

Βήμα 4ο
Αφού ολοκληρώσετε την δημιουργία των πέντε ξεχωριστών ιστοσελίδων ΣΥΝΔΕΣΤΕ τις μεταξύ τους.

• <A HREF = "διαδρομή/όνομα σελίδας"> Κείμενο συνδέσμου </A>
• <A HREF = "όνομα ιστοσελίδας"> Κείμενο συνδέσμου </A>

Παράδειγμα:

Κάντε κλικ <A HREF="mypage2.htm"> εδώ </A> για να πάτε στην άλλη σελίδα.

Κάντε κλικ <A HREF="/υποφάκελος/mypage2.htm"> εδώ <a> για να πάτε στην άλλη σελίδα.

Παράδειγμα:
<A HREF="http://www.google.com"> To Google </A> είναι το πιο δημοφιλές εργαλείο αναζήτησης.

Βήμα 5ο
Εισάγετε την διεύθυνση ηλεκτρονικού ταχυδρομείου σας στην πρώτη ιστοσελίδα, πίσω από τον σύνδεσμο «Επικοινωνήστε με τον δημιουργό της ιστοσελίδας»

Παράδειγμα:

<A HREF="mailto:gepiti@gepiti.com">Γράψτε μας</A>

Βήμα 6ο
Εισαγωγή ρολογιού στην αρχική σελίδα αντιγράφοντας κώδικα από την ιστοσελίδα clocklink

Βήμα 7ο
Εισαγωγή βίντεο από youtube στην σελίδα της Αλλονήσου αντιγράφοντας κώδικα από τη ιστοσελίδα του youtube.