summaryrefslogtreecommitdiffhomepage
path: root/el-gr/html-gr.html.markdown
diff options
context:
space:
mode:
Diffstat (limited to 'el-gr/html-gr.html.markdown')
-rw-r--r--el-gr/html-gr.html.markdown193
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)