emantzanas’s blog

Κατεβάστε τα δύο παρακάτω αρχεία ήχου.

Ήχος 1 (αρχείο ixos1.mp3)

Ήχος 2 (αρχείο ixos2.ogg)

Δημιουργήστε μια απλή ιστοσελίδα και εισάγετε τους παραπάνω ήχους χρησιμοποιώντας τις ετικέτες:

<audio controls>
     <source src=”ixos.mp3″ type=”audio/mpeg”>
     Δυστυχώς δεν υποστηρίζεται η ετικέτα audio!
</audio>
 και
<audio controls>
     <source src=”ixos2.ogg” type=”audio/ogg”>
     Δυστυχώς δεν υποστηρίζεται η ετικέτα audio!
</audio>

Κατεβάσετε το παρακάτω βίντεο στον υπολογιστή σας:

Βίντεο

Να δημιουργήσετε μια απλή ιστοσελίδα και να εισάγετε το παραπάνω βίντεο, χρησιμοποιώντας την ετικέτα:

<video src=”giorti.mp4″ width=”320″ height=”240″ controls></video>

Να δημιουργήσετε μια απλή ιστοσελίδα για την πόλη μας, όπου να φαίνονται 3 φωτογραφίες με τα αξιοθέατα: φρούριο, ποτάμι και μύλος.

Αποθηκεύστε τις παρακάτω 3 εικόνες (φρούριο, ποτάμι και μύλος) στον ίδιο φάκελο που θα φτιάξετε και το html αρχείο με την ιστοσελίδα σας.

Χρησιμοποιήστε την ετικέτα <img>, όπως στο παράδειγμα: <img src=”frourio.jpg”>

Δημιουργήστε στο notepad++ δύο απλές ιστοσελίδες (αρχεία HTML) με ονόματα page1.html και page2.html και προσθέστε σε αυτές κατάλληλους συνδέσμους, έτσι ώστε η μία να παραπέμπει στην άλλη.

page1.html

page2.html

Οι σύνδεσμοι δημιουργούνται με την ετικέτα <a>, όπως:

<a href=”https://www.sch.gr/”>Πανελλήνιο Σχολικό Δίκτυο</a>

Με το notepad++ δημιουργήστε μια σελίδα με όνομα Askisi3.html που να περιέχει 4 συνδέσμους, όπως η παρακάτω:

Οι σύνδεσμοι να οδηγούν στη wikipedia, στο youtube, στη google και σε ένα ειδησεογραφικό site αντίστοιχα.

Άνοιγμα σε νέα καρτέλα

Ορίστε να ανοίγουν οι σύνδεσμοι σε νέα καρτέλα, χρησιμοποιώντας την παράμετρο target=”_blank”, όπως φαίνεται στο παράδειγμα:

<a href=”https://www.sch.gr/” target=”_blank”>Παν.Σχολ.Δίκτυο</a>

1. Ετικέτες επικεφαλίδων

Στην HTML υπάρχουν 6 επίπεδα επικεφαλίδων, των οποίων οι ετικέτες έχουν την εξής μορφή:

<h1>Τίτλος επικεφαλίδας</h1>

Οι αριθμοί 1 έως 6 υποδεικνύουν το επίπεδο επικεφαλίδας (από h1 έως h6) και ορίζουν το μέγεθος αυτής, με μεγαλύτερο το h1.

Μπείτε στο notepad++, ανοίξτε το τελευταίο αρχείο html που φτιάξατε και κάντε τις απαιτούμενες αλλαγές, έτσι ώστε να δημιουργήσετε την παρακάτω ιστοσελίδα:

Αποθηκεύστε το αρχείο ως Askisi2.html

2. Τίτλος ιστοσελίδας

Αλλάξτε τον τίτλο της ιστοσελίδας σε “Η γειτονιά μας”.

3. Δημιουργία παραγράφων

Μπείτε στο BlindTextGenerator. Πρόκειται για μια σελίδα που παράγει κείμενα που δεν αντιστοιχούν σε κάποια γλώσσα και συνήθως δεν έχουν νόημα. Χρησιμοποιούνται από τους προγραμματιστές για να βρίσκουν γρήγορα περιεχόμενο, πχ για τις ιστοσελίδες στη φάση της δοκιμής.

Αντιγράψτε ένα μεγάλο κείμενο από το BlindTextGenerator στη σελίδας σας και δημιουργήστε 5 παραγράφους (ετικέτες <p>…</p>).

4. Αλλαγή γραμμής και οριζόντια γραμμή

Χρησιμοποιήστε τις ετικέτες <br> (αλλαγή γραμμής) και <hr> (εμφάνιση μιας οριζόντιας γραμμής) για να εμπλουτίσετε την ιστοσελίδα σας.

Εφαρμογή στο w3schools

1. Μπείτε στο w3schools.com και πατήστε το κουμπί “Try it yourself”.
2. Στον κώδικα της σελίδας που εμφανίζεται κάνετε τις παρακάτω τροποποιήσεις:
   1. Στον τίτλο της ιστοσελίδας να εμφανίζεται το κείμενο “Η πρώτη μου σελίδα”
      (ετικέτα <title>…</title>).
   2. Στην επικεφαλίδα να εμφανίζεται το όνομά σας (ετικέτα <h1>…</h1>).
   3. Στην παράγραφο γράψτε μια μικρή περιγραφή για το άτομό σας
      (ετικέτα <p>…</p>)
3. Πατήστε “Run” για να δείτε το αποτέλεσμα.

Εφαρμογή στο notepad++

1. Εκκινήστε τον συντάκτη notepad++
2. Πάρτε με Αντιγραφή-Επικόλληση τον κώδικα από το w3schools στο notepad++
3. Για να αναγνωριστεί ως κώδικας html, επιλέξτε “Αρχείο->Αποθήκευση ως…” και δώστε ως όνομα αρχείου το “ProtiSelida” και ως τύπο αρχείου επιλέξτε .html (Hyper Text Markup Language).
4. Για να δείτε την ιστοσελίδα που φτιάξατε, ανοίξτε το αρχείο ProtiSelida.html κάνοντας διπλό κλικ πάνω του.

Ερωτήσεις

1. Ποιες ετικέτες ορίζουν την αρχή και το τέλος μιας ιστοσελίδας (δηλ. ενός html εγγράφου);
2. Ποιες ετικέτες περιέχουν διαχειριστικής φύσεως πληροφορίες που δεν εμφανίζονται από τον φυλλομετρητή;
3. Ποιες ετικέτες ορίζουν το περιεχόμενο της ιστοσελίδας;