2019-08-03 18:25:27 +00:00
|
|
|
|
---
|
2024-11-13 15:04:47 +00:00
|
|
|
|
filename: learnhtml-gr.txt
|
2019-08-03 18:25:27 +00:00
|
|
|
|
contributors:
|
|
|
|
|
|
- ["Dimitri Kokkonis", "https://github.com/kokkonisd"]
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
Το ακρώνυμο 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)
|
