mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-23 09:41:36 +00:00
[html/gr] Add greek translation for the HTML language (#3588)
* Add greek translation for the HTML language * Correct typo in source file name
This commit is contained in:
parent
41f2b7f168
commit
a5137a8286
193
el-gr/html-gr.html.markdown
Normal file
193
el-gr/html-gr.html.markdown
Normal file
@ -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)
|
@ -5,6 +5,7 @@ contributors:
|
||||
- ["Christophe THOMAS", "https://github.com/WinChris"]
|
||||
translators:
|
||||
- ["Robert Steed", "https://github.com/robochat"]
|
||||
- ["Dimitri Kokkonis", "https://github.com/kokkonisd"]
|
||||
---
|
||||
|
||||
HTML stands for HyperText Markup Language.
|
||||
|
Loading…
Reference in New Issue
Block a user