Φύλλο εργασίας
Αποθηκεύστε τα αρχείου εικόνας picture1.jpg , ήχου bark.mp3 και βίντεο googlevideo στον φάκελό σας.
Αντιγράψτε το παρακάτω στο σημειωματάριο και αποθηκεύστε το σαν πρότυπο.html
<!DOCTYPE html>
<html>
<head>
<title>Μία απλή Ιστοσελίδα</title>
</head>
<body>
<h1> Η Πρώτη μας Ιστοσελίδα! </h1>
<p> Αυτή η ιστοσελίδα είναι εξαιρετικά απλή.
</p>
<img src="picture1.jpg">
<br> <br> <!-- βάζω τις ετικέτες αυτές για αλλαγή γραμμής -->
<a href="https://www.msk.gr/"> Μουσικό σχολείο Κατερίνη</a> <br>
<br> <br>
<video src="googlevideo.mp4" width="320" height="240" controls> </video>
<br> <br>
<audio controls>
<source src="Bark.mp3" type="audio/mpeg" />
<source src="ixos.ogg" type="audio/ogg" />
Δυστυχώς δεν υποστηρίζεται η ετικέτα audio!
</audio>
<br> <br>
</body>
</html>
Στην συνέχεια κάντε δεξί κλικ στο αρχείο πρότυπο.html –> άνοιγμα με –> Σημειωματάριο έτσι ώστε να το επεξεργαστείτε
Για ενσωμάτωση βίντεο αντιγράψτε το παρακάτω κώδικα. Για να βρούμε τον κώδικα της ενσωμάτωσης πηγαίνουμε σε ένα βίντεο στο youtube κάνουμε κλικ στο “κοινοποίηση”, μετά κλικ στο “ενσωμάτωση” και μετά κλικ στο “αντιγραφή” .
<iframe width="560" height="315" src="https://www.youtube.com/embed/2BPu-PwKNi4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Ενσωματώστε ένα βίντεο της αρεσκείας σας
Στην συνέχεια θα προσθέσουμε και ένα link που θα οδηγεί σε ένα άλλο αρχείο html το οποίο θα το δημιουργήσουμε εμείς . Θα ανοίξουμε το Σημειωματάριο και θα γράψουμε (αντιγράψτε το παρακάτω κώδικα) και θα το αποθηκεύσουμε ως second.html
<!DOCTYPE html>
<html>
<head>
<title>2η ιστοσελίδα</title>
</head>
<body>
Αυτή είναι η δεύτερη ιστοσελίδα στην οποία κατευθυνόμαστε από έναν σύνδεσμο στην σελίδα πρότυπο.html
</body>
</html>
Ακολούθως ανοίγουμε το πρότυπο.html με το Σημειωματάριο και προσθέτουμε το παρακάτω
Κάντε κλικ εδώ <A HREF="second.html"> εδώ </A> για να πάτε στην άλλη σελίδα
Φτιάξτε μια τρίτη ιστοσελίδα με όνομα third.html και δημιουργήστε έναν σύνδεσμο από την ιστοσελίδα πρότυπο.html που θα οδηγεί στην ιστοσελίδα third.html
Δομή εγγράφου HTML
Θα δημιουργήσουμε μια κεφαλίδα (header) όπου θα υπάρχει περιοχή πλοήγησης με συνδέσεις
Αντιγράψτε το παρακάτω
<header>
<nav>
<a href="#page1">Πρώτη σελίδα </a> <a href="#page2">Δεύτερη σελίδα </a>...
</nav>
<h1> Η επικεφαλίδα (header) του κειμένου </h1>
</header>
Το κομμάτι του κειμένου page1 ορίζεται το παρακάτω
<section id="page1">
<article>
<header><h3>Τίτλος σελίδας 1</h3></header>
<p>Κείμενο σελίδας 1</p>
</article>
</section>.
Το κομμάτι του κειμένου page2 ορίζεται παρακάτω
<section id="page2">
<article>
<header><h3>Τίτλος σελίδας 2</h3></header>
<p>Κείμενο σελίδας 2</p>
</article>
</section>.
Στο υποσέλιδο (footer) θα βάλουμε διαφορετική περιοχή πλοήγησης (nav). Θα προσθέσουμε τα παρακάτω στο τέλος του κειμένου (πριν την ετικέτα </body> )
<footer>
<p>Τέλος εγγράφου</p>
<nav>
<a href="#">Επικοινωνία</a> | <a href="#">Όροι χρήσης</a>
</nav>
</footer>