mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-25 18:28:51 +00:00
194 lines
8.7 KiB
HTML
194 lines
8.7 KiB
HTML
---
|
||
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)
|