Learn HTML in Y Minutes

Το ακρώνυμο HTML σημαίνει HyperText Markup Language.

Είναι μια γλώσσα που μας επιτρέπει να δημιουργήσουμε σελίδες για το διαδίκτυο. Είναι μια γλώσσα σήμανσης (markup), και μας επιτρέπει να γράψουμε ιστοσελίδες χρησιμοποιώντας κώδικα για να υποδείξουμε πώς πρέπει να εμφανίζεται το κείμενο και τα δεδομένα στη σελίδα. Στην πραγματικότητα, τα αρχεία HTML είναι απλά αρχεία κειμένου.

Τι σημαίνει όμως «γλώσσα σήμανσης»; Είναι μια μέθοδος οργάνωσης των δεδομένων της σελίδας, που λειτουργεί μέσω ετικετών (tags) που «ανοίγουν» ή «κλείνουν». Αυτή η σήμανση έχει ως σκοπό να δώσει κάποια συγκεκριμένη σημασία στο κείμενο που περιβάλλει. Όπως και οι περισσότερες γλώσσες υπολογιστών, η HTML έχει πολλές διαφορετικές εκδοχές. Εδώ θα μιλήσουμε για την HTML5.

ΣΗΜΕΙΩΣΗ : Μπορείτε να δοκιμάσετε τις ετικέτες και τα στοιχεία που παρουσιάζονται εδώ σε ένα σάιτ όπως το codepen, ούτως ώστε να δείτε τα αποτελέσματα που παράγουν, να καταλάβετε πώς δουλεύουν και να εξοικιωθείτε με την γλώσσα. Αυτό το άρθρο ασχολείται κυρίως με την σύνταξη της 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 ΔΕΝ είναι γλώσσα προγραμματισμού.

Μάθετε περισσότερα

Έχετε κάποια πρόταση; Κάποια διόρθωση, ίσως; Δημιουργήστε ένα Issue στο GitHub Repo μας, ή ανοίξτε ένα pull request!

Αρχική συμβολή: Dimitri Kokkonis, ενημερώσεις/επεξεργασία: 2 contributor(s).

Μάθετε Χ σε Υ λεπτά

Όπου X=HTML

Χρήση

Μάθετε περισσότερα