Εισαγωγή στη γλώσσα html

Ας ξεκινήσουμε με το πρώτο μας παράδειγμα στη γλώσσα HTML:


<!DOCTYPE html>
<html>
<head>
<title>Τίτλος της σελίδας</title>
</head>
<body>

<h1>Εδώ έχουμε επικεφαλίδα</h1>
<p>Εδώ έχουμε μια παράγραφο.</p>

</body>
</html>


Η δήλωση <!DOCTYPE html> ορίζει οτι πρόκειται για έγγραφο HTML5.
Το κείμενο ανάμεσα στις ετικέτες <html> και </html> αποτελεί το περιεχόμενο του εγγράφου HTML.
Το κείμενο ανάμεσα στις ετικέτες <head> και </head> παρέχει πληροφορίες σχετικά με το περιεχόμενο του εγγράφου HTML.
Το κείμενο ανάμεσα στις ετικέτες <title> και </title> αποτελεί τον τίτλο του εγγράφου.
Το κείμενο ανάμεσα στις ετικέτες <body> και </body> περιγράφει το ορατό περιεχόμενο της σελίδας, δηλαδή αυτό που θα εμφανιστεί στο φυλομετρητή.
Το κείμενο ανάμεσα στις ετικέτες <h1> και </h1> περιγράφει μια επικεφαλίδα.
Το κείμενο ανάμεσα στις ετικέτες <p> και </p> περιγράφει μια παράγραφο.

Σε προηγούμενο άρθρο με θέμα την εισαγωγή στην κατασκευή ιστοσελίδων είδαμε με ποιον τρόπο μπορούμε να εμφανίσουμε το αποτέλεσμα αυτού του κώδικα.
Οι ετικέτες HTML συνήθως βρίσκονται σε ζευγάρια, όπως για παράδειγμα <p> και </p>.
Η πρώτη ετικέτα ενός ζευγαριού είναι η ετικέτα ανοίγματος, ενώ η δεύτερη ετικέτα είναι η ετικέτα κλεισίματος.
Η ετικέτα κλεισίματος γράφεται με τρόπο ίδιο με την ετικέτα ανοίγματος, με τη διαφορά οτι περιέχει και το σύμβολο της πλαγιας γραμμής (slash)

Οι συνηθισμένοι τύποι δηλώσεων <!DOCTYPE> είναι τρεις:

Η δήλωση για τη γλώσσα HTML5:
<!DOCTYPE html>
Η δήλωση για τη γλώσσα HTML 4.01:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
Η δήλωση για τη γλώσσα XHTML 1.0:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

Εκδόσεις της html

Η γλώσσα HTML δημιουργήθηκε το έτος 1991.
Η έκδοση HTML 2.0 δημιουργήθηκε το έτος 1995.
Η έκδοση HTML 3.2 δημιουργήθηκε το έτος 1997.
Η έκδοση HTML 4.01 δημιουργήθηκε το έτος 1999.
Η έκδοση XHTML δημιουργήθηκε το έτος 2000.
Η έκδοση HTML5 δημιουργήθηκε το έτος 2014.

Επικεφαλίδες στη γλώσσα HTML

Οι επικεφαλίδες στη γλώσσα HTML ορίζονται από τις ετικέτες <h1> ως <h6>.
Ακολουθεί παράδειγμα με τις πιο συνηθισμένες επικεφαλίδες της html:


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
</html>


Στην επόμενη εικόνα βλέπουμε το αποτέλεσμα που εμφανίζει αυτός ο κώδικας HTML σε ένα φυλομετρητή:

html επικεφαλίδες
html επικεφαλίδες

Παράγραφοι στη γλώσσα html

Οι παράγραφοι στη γλώσσα html περιγράφονται από τις ετικέτες <p> και </p>.

Ακολουθεί παράδειγμα με τις πιο συνηθισμένες επικεφαλίδες της HTML:


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<p>This is the first paragraph of the document.</p>
<p>This is the second paragraph of the document.</p>

</body>
</html>


Στην επόμενη εικόνα βλέπουμε το αποτέλεσμα που εμφανίζει αυτός ο κώδικας HTML σε ένα φυλομετρητή:

html παράγραφοι
html παράγραφοι

Σύνδεσμοι στη γλώσσα html

Οι σύνδεσμοι στη γλώσσα HTML περιγράφονται από τις ετικέτες <a> και </a>, όπως στο παράδειγμα που ακολουθεί:


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<a href=»http://www.html.gr»>This is a link</a>

</body>
</html>


Η ιδιότητα href περιγράφει την ιστοσελίδα στην οποία οδηγεί ο σύνδεσμος. Στο συγκεκριμένο παράδειγμα οδηγεί στη σελίδα http://www.html.gr.

html σύνδεσμοι

Εδώ να τονίσουμε οτι είναι απαραίτητο να γράψουμε το «http://» εάν θέλουμε ο σύνδεσμος να οδηγεί σε μια ιστοσελίδα. Διότι εάν δεν βάλουμε το «http://» και γράψουμε href=»www.html.gr» τότε η γλώσσα html θα ψάψει για το αρχείο www.html.gr στον ίδιο φάκελο με τον οποίο βρισκόμαστε. Μπορούμε να παραλείψουμε το «http://» εάν θέλουμε ο σύνδεσμος να οδηγεί σε άλλη σελίδα στον ίδιο φάκελο. Εάν θέλουμε για παράδειγμα να ανοίξουμε τη σελίδα contact.html τότε θα πρέπει να γράψουμε href=»contact.html».

Εικόνες στη γλώσσα html

Οι εικόνες στη γλώσσα html περιγράφονται από την ετικέτα <img> η οποί αδεν περιλαμβάνει ετικέτα κλεισίματος


<!DOCTYPE html>
<html>
<head>
<title>Τίτλος της σελίδας</title>
</head>
<body>

<img src=»http://html.gr/wp-content/uploads/2016/09/eigagogi-stin-html.jpg» alt=»εισαγωγή στην html» width=»1000″ height=»883″>

</body>
</html>


Η ιδιότητα alt περιέχει ένα κείμενο το οποίο θα εμφανιστεί στη θέση της εικόνας εάν για οποιοδήποτε λόγο η εικόνα δεν καταφέρει να εμφανιστεί στο φυλλομετρητή. Οι ιδιότητες width και height περιέχουν το πλάτος και το ύψος της εικόνας αντίστοιχα.