1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
|
---
language: html
filename: learnhtml-gr.html
contributors:
- ["Dimitri Kokkonis", "https://github.com/kokkonisd"]
lang: el-gr
---
Το ακρώνυμο HTML σημαίνει HyperText Markup Language.
Είναι μια γλώσσα που μας επιτρέπει να δημιουργήσουμε σελίδες για το διαδίκτυο.
Είναι μια γλώσσα σήμανσης (markup), και μας επιτρέπει να γράψουμε ιστοσελίδες
χρησιμοποιώντας κώδικα για να υποδείξουμε πώς πρέπει να εμφανίζεται το κείμενο
και τα δεδομένα στη σελίδα. Στην πραγματικότητα, τα αρχεία HTML είναι απλά
αρχεία κειμένου.
Τι σημαίνει όμως «γλώσσα σήμανσης»; Είναι μια μέθοδος οργάνωσης των δεδομένων
της σελίδας, που λειτουργεί μέσω ετικετών (tags) που «ανοίγουν» ή «κλείνουν».
Αυτή η σήμανση έχει ως σκοπό να δώσει κάποια συγκεκριμένη σημασία στο κείμενο
που περιβάλλει. Όπως και οι περισσότερες γλώσσες υπολογιστών, η HTML έχει
πολλές διαφορετικές εκδοχές. Εδώ θα μιλήσουμε για την HTML5.
**ΣΗΜΕΙΩΣΗ :** Μπορείτε να δοκιμάσετε τις ετικέτες και τα στοιχεία που
παρουσιάζονται εδώ σε ένα σάιτ όπως το [codepen](http://codepen.io/pen/), ούτως
ώστε να δείτε τα αποτελέσματα που παράγουν, να καταλάβετε πώς δουλεύουν και να
εξοικιωθείτε με την γλώσσα. Αυτό το άρθρο ασχολείται κυρίως με την σύνταξη της
HTML και κάποιες χρήσιμες συμβουλές σχετικά με αυτήν.
```html
<!-- Τα σχόλια είναι περικυκλωμένα όπως αυτή η γραμμή! -->
<!--
Τα
σχόλια
μπορούν
να
επεκταθούν
σε
πολλαπλές
γραμμές!
-->
<!-- #################### Οι ετικέτες #################### -->
<!--Ορίστε ένα παράδειγμα αρχείου HTML, το οποίο θα αναλύσουμε. -->
<!doctype html>
<html>
<head>
<title>Η σελίδα μου</title>
</head>
<body>
<h1>Καλημέρα, κόσμε!</h1>
<a href="http://codepen.io/anon/pen/xwjLbZ">
Δείτε τι κάνει αυτό
</a>
<p>Αυτή είναι μια παράγραφος.</p>
<p>Αυτή είναι μια άλλη παράγραφος.</p>
<ul>
<li>Αυτό είναι ένα αντικείμενο μέσα σε μια μη-αριθμημένη λίστα
(bullet list)</li>
<li>Αυτό είναι ένα άλλο αντικείμενο</li>
<li>Και αυτό είναι το τελευταίο αντικείμενο της λίστας</li>
</ul>
</body>
</html>
<!--
Ένα αρχείο HTML πάντα ξεκινά υποδεικνύοντας στον περιηγητή πως η σελίδα
είναι γραμμένη με HTML.
-->
<!doctype html>
<!-- Μετά από αυτό, ξεκινά ανοίγοντας μια ετικέτα <html>. -->
<html>
<!-- την οποία πρέπει να κλείσουμε στο τέλος της σελίδας γράφοντας </html>. -->
</html>
<!-- Τίποτα δεν πρέπει να βρίσκεται μετά από αυτη την τελευταία ετικέτα. -->
<!-- Ανάμεσα από τις ετικέτες <html> και </html>, βρίσκουμε: -->
<!-- Μια επικεφαλίδα ορισμένη από την ετικέτα <head> (πρέπει να την κλείσουμε
με την ετικέτα </head>) -->
<!--
Η επικεφαλίδα περιέχει κάποια περιγραφή και επιπρόσθετες πληροφορίες που δεν
εμφανίζονται· είναι τα λεγόμενα μεταδεδομένα (metadata).
-->
<head>
<!--
Η ετικέτα <title> υποδεικνύει στον περιηγητή τον τίτλο που πρέπει να
εμφανιστεί στην μπάρα τίτλου και στο όνομα της καρτέλας.
-->
<title>Η σελίδα μου</title>
</head>
<!-- Μετά την ενότητα <head>, βρίσκουμε την ετικέτα <body> -->
<!-- Μέχρι αυτό το σημείο, τίποτα απ' όσα έχουμε περιγράψει δεν θα εμφανιστούν
στο παράθυρο του περιηγητή. -->
<!-- Πρέπει να συμπληρώσουμε το «σώμα» της σελίδας με το περιεχόμενο που
θέλουμε να εμφανίζεται. -->
<body>
<!-- Η ετικέτα h1 δημιουργεί έναν τίτλο/επικεφαλίδα. -->
<h1>Καλημέρα, κόσμε!</h1>
<!--
Υπάρχουν επίσης υπότιτλοι/υποκεφαλίδες, από την πιο σημαντική (h2)
μέχρι την πιο μικρή και ειδική (h6).
-->
<!-- Ένας υπερσύνδεσμος προς την διεύθυνση που δίνεται από την παράμετρο
href="": -->
<a href="http://codepen.io/anon/pen/xwjLbZ">
Δείτε τι κάνει αυτό
</a>
<!-- Η ετικέτα <p> μας επιτρέπει να εισάγουμε κείμενο στην σελίδα μας. -->
<p>Αυτή είναι μια παράγραφος.</p>
<p>Αυτή είναι μια άλλη παράγραφος.</p>
<!-- Η ετικέτα <ul> δημιουργεί μια μη-αριθμημένη λίστα. -->
<!--
Για μια αριθμημένη λίστα χρησιμοποιούμε την ετικέτα <ol>, που θα μας
δώσει 1. για το πρώτο στοιχείο, 2. για το δεύτερο κτλ.
-->
<ul>
<li>Αυτό είναι ένα αντικείμενο μέσα σε μια μη-αριθμημένη λίστα (bullet
list)</li>
<li>Αυτό είναι ένα άλλο αντικείμενο</li>
<li>Και αυτό είναι το τελευταίο αντικείμενο της λίστας</li>
</ul>
</body>
<!-- Αυτό ήταν όλο, είναι εύκολο να δημιουργήσουμε αρχεία HTML. -->
<!-- Ωστόσο έχουμε την δυνατότητα να επιλέξουμε ανάμεσα σε πολλές ακόμη
ετικέτες HTML. -->
<!-- Η ετικέτα <img /> χρησιμοποιείται για να εισάγουμε μια εικόνα. -->
<!--
Η πηγή της εικόνας υποδεικνύεται μέσω της παραμέτρου src="".
Η πηγή μπορεί να είναι μια διεύθυνση (URL) ή ακόμα και μια τοπική διεύθυνση
ενός αρχείου που βρίσκεται στον υπολογιστή μας.
-->
<img src="http://i.imgur.com/XWG0O.gif"/>
<!-- Υπάρχει επίσης η δυνατότητα να δημιουργήσουμε πίνακες. -->
<!-- Ανοίγουμε μια ετικέτα <table>. -->
<table>
<!-- Η ετικέτα <tr> μας επιτρέπει να δημιουργήσουμε μια γραμμή
στον πίνακα. -->
<tr>
<!-- Η ετικέτα <th> μας επιτρέπει να δώσουμε έναν τίτλο σε μια στήλη
του πίνακα -->
<th>Πρώτος τίτλος</th>
<th>Δεύτερος τίτλος</th>
</tr>
<tr>
<!-- Η ετικέτα <td> μας επιτρέπει να δημιουργήσουμε ένα κελί μέσα στον
πίνακα. -->
<td>Πρώτη γραμμή, πρώτη στήλη</td>
<td>Πρώτη γραμμή, δεύτερη στήλη</td>
</tr>
<tr>
<td>Δεύτερη γραμμή, πρώτη στήλη</td>
<td>Δεύτερη γραμμή, δεύτερη στήλη</td>
</tr>
</table>
```
## Χρήση
Η HTML γράφεται σε αρχεία με την κατάληξη `.html` ή `.htm`. Ο τύπος MIME της
HTML είναι
`text/html`.
**H HTML ΔΕΝ είναι γλώσσα προγραμματισμού.**
## Μάθετε περισσότερα
* [βικιπαίδεια](https://el.wikipedia.org/wiki/HTML)
* [Μάθημα HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
* [W3School](http://www.w3schools.com/html/html_intro.asp)
|
