![Page 1: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/1.jpg)
Η γλώσσα HTML
Επιμέλεια:
Δέγγλερη Σοφία
![Page 2: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/2.jpg)
Υπερκείμενο
Το δομικό χαρακτηριστικό του Παγκόσμιου
Ιστού
Ένα αρχείο
Απλό κείμενο και υπερσύνδεσμοι
![Page 3: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/3.jpg)
Υπερσύνδεσμος
Μετάβαση σε διάφορα άλλα έγγραφα
Αποτελείται από
Ορατό τμήμα κειμένου
Συνήθως υπογραμμισμένο
Μη ορατό μέρος
Πληροφορία για το πού θα βρεθεί η πληροφορία που
αντιστοιχεί στο υπογραμμισμένο κείμενο
![Page 4: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/4.jpg)
HTML
HyperText Markup Language
Γλώσσα Σήμανσης Υπερκειμένου
Απλή γλώσσα για τη δημιουργία
εγγράφων υπερκειμένου
![Page 5: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/5.jpg)
EasyHTML
Λογισμικό για δημιουργία ιστοσελίδων
EHtml2_4
Download
http://personal.inet.fi/business/toniarts/ehtmle.ht
m#download
![Page 6: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/6.jpg)
Δομή HTML εγγράφου
Δύο βασικές ενότητες
HEAD
BODY
![Page 7: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/7.jpg)
Τίτλος
<TITLE> τίτλος ιστοσελίδας </TITLE>
Παρουσιάζεται στο επάνω μέρος του
browser
![Page 8: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/8.jpg)
1ο - Τίτλος
![Page 9: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/9.jpg)
1ο - Τίτλος
Στον browser
Όλη τη διαδρομή του αρχείου
file///D:/ΣΗΜΕΙΩΣΕΙΣ/ΚΕΕ/HTML/1_Title.htm
![Page 10: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/10.jpg)
<!-- σχόλια -->
Διευκόλυνση των προγραμματιστών για να
εισάγουν σημειώσεις
Τα σχόλια δεν εμφανίζονται στον browser
αλλά μόνο στον πηγαίο (source) κώδικα
Σχόλια
![Page 11: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/11.jpg)
2ο παράδειγμα - Σχόλια
![Page 12: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/12.jpg)
Επικεφαλίδες
<h1> επικεφαλίδα </h1>
Έξι επίπεδα επικεφαλίδων
Με το «1» δηλώνεται η μεγαλύτερη
επικεφαλίδα
Με το «6» δηλώνεται η μικρότερη
επικεφαλίδα
![Page 13: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/13.jpg)
3ο παράδειγμα - Επικεφαλίδες
![Page 14: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/14.jpg)
Παράγραφος
<p> κείμενο </p>
Μια ετικέτα παραγράφου ισοδυναμεί με
δύο αλλαγές γραμμής
Δεν έχει νόημα η σύνταξη <p>...<p>...</p>... σε
μια γραμμή
Το </P> είναι προαιρετικό αλλά συνιστάται
η χρήση του
![Page 15: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/15.jpg)
4o παράδειγμα - Παράγραφος
![Page 16: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/16.jpg)
Αλλαγή γραμμής
<br>
Δεν κλείνει με </br>
Τοποθετείται Είτε στο τέλος μιας γραμμής
Είτε σε καινούρια γραμμή
Αν στον πηγαίο κώδικα αλλάξω γραμμή με Enter Το κείμενο εμφανίζεται σε μία γραμμή στον
browser
![Page 17: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/17.jpg)
5o παράδειγμα – Χωρίς <br>
![Page 18: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/18.jpg)
5o παράδειγμα – Με <br>
![Page 19: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/19.jpg)
Απλές μορφοποιήσεις
Πλάγια
<i> κείμενο </i>
Έντονα
<b> κείμενο </b>
<strong> κείμενο </strong>
Υπογραμμισμένα
<u> κείμενο </u>
Διαγραμμένα
<s> κείμενο </s>
Πολλές μορφοποιήσεις μαζί
<b> <i> <u> κείμενο </b> </i> </u>
![Page 20: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/20.jpg)
6ο παράδειγμα – Απλές μορφοποιήσεις
![Page 21: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/21.jpg)
Άλλες μορφοποιήσεις (1/3)
Μέγεθος χαρακτήρων
Εξ ορισμού
<basefont> κείμενο <basefont>
Μεγάλου μεγέθους
<big> κείμενο </big>
Μικρού μεγέθους
<small> κείμενο </small>
![Page 22: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/22.jpg)
Άλλες μορφοποιήσεις (2/3)
Δείκτης
<sub> κείμενο </sub>
Εκθέτης
<sup> κείμενο </sup>
![Page 23: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/23.jpg)
Άλλες μορφοποιήσεις (3/3)
Γραμματοσειρά γραφομηχανής
<tt> κείμενο </tt>
Μία κενή γραμμή πριν και μετά το κείμενο
με γραμματοσειρά Courier
<pre> κείμενο </pre>
Οριζόντια γραμμή και αλλαγή γραμμής
<hr>
![Page 24: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/24.jpg)
7o παράδειγμα – Άλλες μορφοποιήσεις
![Page 25: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/25.jpg)
Κενά
Περισσότερα του ενός κενού θεωρούνται
ένα
Εισαγωγή περισσότερων του ενός κενού
Εισαγωγή 3 κενών
……  ……
![Page 26: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/26.jpg)
8o παράδειγμα – Κενά
![Page 27: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/27.jpg)
Στοίχιση
Κείμενο στο κέντρο <center> κείμενο </center>
Παράγραφος αριστερά <p align = "left"> κείμενο </p>
Παράγραφος στο κέντρο <p align = "center"> κείμενο </p>
Παράγραφος δεξιά <p align = "right"> κείμενο </p>
Πλήρης στοίχιση παραγράφου <p align= "justify"> κείμενο </p>
![Page 28: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/28.jpg)
9o παράδειγμα - Στοίχιση
![Page 29: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/29.jpg)
Περιθώρια και Κενά
Τμήμα κειμένου ξεχωρίζει σαν
παράγραφος
Εμφανίζεται πιο μέσα από το υπόλοιπο
κείμενο
<blockquote> κείμενο </blockquote>
![Page 30: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/30.jpg)
10o παράδειγμα – Περιθώρια και Κενά
![Page 31: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/31.jpg)
Περισσότερα Περιθώρια και Κενά
Πολλά blockquote
Περισσότερα από 3 είναι υπερβολικά
Κείμενο
<blockquote>
Κείμενο
<blockquote>
Κείμενο
</blockquote>
![Page 32: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/32.jpg)
11o παράδειγμα – Περιθώρια και Κενά
![Page 33: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/33.jpg)
Ακρώνυμα
Επεξήγηση του ακρώνυμου αφήνοντας τον
δείκτη του ποντικιού πάνω του
<acronym title = "επεξήγηση"> ακρώνυμο </a>
Παράδειγμα
<acronym title = "Εκπαιδευτικά Περιβάλλοντα
Διαδικτύου"> Ε.Π.Δ </a>
![Page 34: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/34.jpg)
12ο Παράδειγμα - Ακρώνυμα
![Page 35: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/35.jpg)
Χρώμα γραμματοσειράς
Συγκεκριμένο τμήμα κειμένου
<font color = "#κωδικός χρώματος"> κείμενο </font>
Το κουτάκι να μην είναι τσεκαρισμένο
![Page 36: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/36.jpg)
13ο Παράδειγμα – Χρώμα γραμματοσειράς
![Page 37: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/37.jpg)
Προεπιλεγμένο χρώμα κειμένου
<BODY text = "#κωδικός χρώματος">
Προσοχή!!!!
Ορίζεται μέσα στην ετικέτα BODY
![Page 38: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/38.jpg)
14ο Παράδειγμα - Προεπιλεγμένο
χρώμα κειμένου
![Page 39: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/39.jpg)
Τύπος γραμματοσειράς
Συγκεκριμένο τμήμα κειμένου
<font face = "όνομα γραμματοσειράς"> κείμενο </font>
Το κουτάκι να μην είναι τσεκαρισμένο
![Page 40: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/40.jpg)
15ο Παράδειγμα – Τύπος γραμματοσειράς
![Page 41: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/41.jpg)
Μέγεθος γραμματοσειράς
Συγκεκριμένο κείμενο
<font size = "αριθμός μεγέθους"> κείμενο </font>
Το κουτάκι να μην είναι τσεκαρισμένο
![Page 42: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/42.jpg)
16ο Παράδειγμα - Μέγεθος γραμματοσειράς
![Page 43: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/43.jpg)
Χρώμα υπόβαθρου
<BODY BGcolor = "#κωδικός χρώματος">
Προσοχή!!!!
Ορίζεται μέσα στην ετικέτα BODY
![Page 44: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/44.jpg)
17ο Παράδειγμα – Χρώμα υπόβαθρου
![Page 45: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/45.jpg)
Λίστα με κουκίδες
Χωρίς στυλ κουκίδων
<ul> <li> κείμενο </li>
<li> κείμενο </li>
</ul>
Με στυλ κουκίδων
<ul TYPE = "square"> <li> κείμενο </li>
<li> κείμενο </li>
</ul>
![Page 46: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/46.jpg)
18ο Παράδειγμα – Λίστα με κουκίδες
![Page 47: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/47.jpg)
Αριθμημένη λίστα
Χωρίς στυλ αρίθμησης
<ol> <li> κείμενο </li>
<li> κείμενο </li>
</ol>
Με στυλ αρίθμησης
<ol TYPE= "τύπος αρίθμησης" START = "αριθμός εκκίνησης"> <li> κείμενο </li>
<li> κείμενο </li>
</ol>
![Page 48: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/48.jpg)
19ο Παράδειγμα - Αριθμημένη λίστα
![Page 49: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/49.jpg)
Απλή λίστα
<dl>
<dd> κείμενο </dd>
<dd> κείμενο </dd>
</dl>
![Page 50: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/50.jpg)
20ο Παράδειγμα - Απλή λίστα
![Page 51: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/51.jpg)
Λίστα ορισμών
<dl>
<dt> κείμενο </dt>
<dd> κείμενο </dd>
<dt> κείμενο </dt>
<dd> κείμενο </dd>
</dl>
![Page 52: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/52.jpg)
21ο Παράδειγμα – Λίστα ορισμών
![Page 53: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/53.jpg)
Υπερσύνδεσμος σε άλλη ιστοσελίδα
<a href = "διεύθυνση ιστοσελίδας"> λέξη σύνδεσμος </a>
Url διεύθυνση
Λέξη,-εις που θα γίνει σύνδεσμος
Προσοχή κατά την εισαγωγή της url Αν είναι επιλεγμένο το θα εισαχθεί δύο
φορές
![Page 54: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/54.jpg)
Παράδειγμα 22ο – Υπερσύνδεσμος σε
άλλη ιστοσελίδα
![Page 55: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/55.jpg)
Υπερσύνδεσμος μέσα στην ιστοσελίδα
Στη λέξη σύνδεσμος
<a href = "#λέξη στην οποία θα οδηγήσει ο
σύνδεσμος"> λέξη σύνδεσμος </a>
Στη λέξη που θα οδηγήσει ο σύνδεσμος
<a href = "#" name = "λέξη στην οποία θα
οδηγήσει ο σύνδεσμος"></a>
Λέξη σύνδεσμος
Λέξη στην οποία θα
οδηγήσει ο σύνδεσμος
![Page 56: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/56.jpg)
Η λέξη «Περικλής» είναι σύνδεσμος που
οδηγεί στη λέξη «Ετυμολογία»
23ο Παράδειγμα – Υπερσύνδεσμος μέσα
στην ιστοσελίδα
![Page 57: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/57.jpg)
Υπερσύνδεσμος σε αρχείο
<a href = "διαδρομή αρχείου"> λέξη
σύνδεσμος </a>
![Page 58: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/58.jpg)
24ο Παράδειγμα - Υπερσύνδεσμος σε
αρχείο
![Page 59: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/59.jpg)
Χρώμα υπερσυνδέσμου
Πριν την επίσκεψη <BODY link = "#κωδικός χρώματος">
Τη στιγμή της επίσκεψης <BODY alink= "#κωδικός χρώματος">
Μετά την επίσκεψη <BODY vlink= "#κωδικός χρώματος">
Προσοχή!!!! Ορίζεται μέσα στην ετικέτα BODY
![Page 60: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/60.jpg)
25ο Παράδειγμα – Χρώμα
υπερσυνδέσμου
![Page 61: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/61.jpg)
Εισαγωγή εικόνας στο φόντο
<BODY background = "διαδρομή αρχείου">
Ορίζεται μέσα στο body
![Page 62: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/62.jpg)
Απλή εισαγωγή εικόνας
Απλή εισαγωγή
<IMG src="file:///..." alt="…" align="…"
border="…" hspace="…" vspace="…"
width="…" height="…"
src: Διαδρομή αρχείου
alt: Περιγραφή
align: Στοίχιση (left, right, center)
border: Πάχος περιγράμματος
hspace: Οριζόντιο περιθώριο
vspace: Κάθετο περιθώριο
width: Πλάτος
height: Ύψος
![Page 63: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/63.jpg)
26ο Παράδειγμα – Εισαγωγή εικόνας
![Page 64: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/64.jpg)
Επίπλευση εικόνας
Τοποθετώ την εικόνα πάνω από το
κείμενο
Στοιχίζω την εικόνα δεξιά ή αριστερά
align = "right"
align = "left"
Στη συνέχεια εισάγω το κείμενο
![Page 65: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/65.jpg)
27ο Παράδειγμα – Επίπλευση εικόνας
![Page 66: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/66.jpg)
Κείμενο κάτω από εικόνα
Τοποθετώ την εικόνα πάνω από το
κείμενο
Στοιχίζω την εικόνα στο κέντρο
align = "center"
Στη συνέχεια εισάγω το κείμενο
![Page 67: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/67.jpg)
28ο – Κείμενο κάτω από εικόνα
![Page 68: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/68.jpg)
Αποστολή email
<a href = mailto: "διεύθυνση ηλεκτρονικού
ταχυδρομείου"> λέξη σύνδεσμος </a>
![Page 69: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/69.jpg)
29ο – Αποστολή email
![Page 70: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/70.jpg)
Ήχος στο background
<bgsound src = "μονοπάτι αρχείου" loop =
"αριθμός επανάληψης">
Αριθμός
επαναλήψεων
Συνεχής
αναπαραγωγή
![Page 71: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/71.jpg)
30ο - Ήχος στο background
![Page 72: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/72.jpg)
Ενσωμάτωση video
<img dynsrc = "διαδρομή αρχείου" loop =
"αριθμός επαναλήψεων">
![Page 73: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/73.jpg)
31ο – Ενσωμάτωση video
![Page 74: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/74.jpg)
Δημιουργία πίνακα
<table>
<caption> λεζάντα </caption>
<tr>
<td> κελί 1.1 </td>
<td> κελί 1.2 </td>
</tr>
<tr>
<td> κελί 2.1 </td>
<td> κελί 2.2 </td>
</tr>
</table>
![Page 75: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/75.jpg)
Δημιουργία πίνακα
Εισαγωγή
λεζάντας Χρώμα κελιού
Χρώμα πίνακα
Χρώμα κειμένου
Στοίχιση πίνακα
Κάθετη
στοίχιση
πίνακα
Διάστημα μεταξύ
κελιών και μεταξύ
δεδομένων και
περιθωρίων
Πλάτος –
ύψος πίνακα
Αριθμός στηλών
- γραμμών
Πλάτος – ύψος
κελιού
Μορφή
κειμένου
Περίγραμμα
πίνακα
![Page 76: Η γλώσσα HTML · HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία](https://reader030.vdocuments.site/reader030/viewer/2022040201/5e5ac936f0748f14ee56ba35/html5/thumbnails/76.jpg)
32ο – Δημιουργία πίνακα