Ας ξεκινήσουμε με το πρώτο μας παράδειγμα στη γλώσσα 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 περιγράφονται από τις ετικέτες <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 περιγράφονται από τις ετικέτες <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.
Εδώ να τονίσουμε οτι είναι απαραίτητο να γράψουμε το “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 περιέχουν το πλάτος και το ύψος της εικόνας αντίστοιχα.
[…] μας. Μία καλή περίπτωση είναι να ξεκινήσετε από την εισαγωγή στη γλώσσα html. Μπορείτε να διαβάσετε περισσότερα επίσης για τη […]
[…] Για παράδειγμα, βασικές γνώσεις της γλώσσας html είναι απαραίτητες για την προώθηση ιστοσελίδων. Η γλώσσα HTML υπάρχει κάτω από κάθειστοσελίδα. Μέσα από ένα καλό σεμινάριο προώθησης ιστοσελίδων ο εκπαιδευτής θα σας καθοδηγήσει ώστε κάνετε μια καλή εισαγωγή στη γλώσσα html. […]