diff options
Diffstat (limited to 'el-gr/html-gr.html.markdown')
| -rw-r--r-- | el-gr/html-gr.html.markdown | 193 |
1 files changed, 193 insertions, 0 deletions
diff --git a/el-gr/html-gr.html.markdown b/el-gr/html-gr.html.markdown new file mode 100644 index 00000000..0ca6e326 --- /dev/null +++ b/el-gr/html-gr.html.markdown @@ -0,0 +1,193 @@ +--- +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) |