Τα έγγραφα HTML πρέπει όλα να ξεκινούν με μια δήλωση τύπου εγγράφου: .
Το ίδιο το έγγραφο HTML ξεκινά με και τελειώνει με .
Το ορατό μέρος του έγγραφου HTML βρίσκεται μεταξύ των και <body> και </body>.
Ένα παράδειγμα έγκυρου HTML έγγραφου θα μπορούσε να είναι το παρακάτω:
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου έγγραφο HTML</title>
</head>
<body>
<h1>Αυτό είναι ένας τίτλος</h1>
<p>Αυτό είναι ένα παράδειγμα κειμένου.</p>
</body>
</html>
Αυτό το έγγραφο περιέχει μια δήλωση τύπου εγγράφου (<!DOCTYPE html>), μια ετικέτα <html> που περιέχει μια ετικέτα <head> με μια ετικέτα <title> για τον τίτλο της σελίδας, καθώς και μια ετικέτα <body> που περιέχει ορατό περιεχόμενο στη σελίδα, όπως ένας τίτλος και ένα παράδειγμα κειμένου.
Η δήλωση <!DOCTYPE> αντιπροσωπεύει τον τύπο του εγγράφου και βοηθά τους περιηγητές να εμφανίσουν τις ιστοσελίδες σωστά.
Πρέπει να εμφανίζεται μόνο μία φορά, στην κορυφή της σελίδας (πριν από οποιεσδήποτε ετικέτες HTML).
Η δήλωση <!DOCTYPE> δεν είναι ευαίσθητη στην πεζή-κεφαλαία.
Η δήλωση <!DOCTYPE> για το HTML5 είναι:
<!DOCTYPE html>
Οι τίτλοι HTML ορίζονται με τις ετικέτες <h1> έως <h6>.
Η ετικέτα <h1> ορίζει τον πιο σημαντικό τίτλο. Η ετικέτα <h6> ορίζει τον λιγότερο σημαντικό τίτλο:
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου web page</title>
</head>
<body>
<h1>Αυτό είναι ο τίτλος h1</h1>
<h2>Αυτό είναι ο τίτλος h2</h2>
<h3>Αυτό είναι ο τίτλος h3</h3>
<h4>Αυτό είναι ο τίτλος h4</h4>
<h5>Αυτό είναι ο τίτλος h5</h5>
<h6>Αυτό είναι ο τίτλος h6</h6>
</body>
</html>
[adinserter block=”2″]
Οι τίτλοι χρησιμοποιούνται για να καθορίζουν τη σημασία του περιεχομένου τους και να βοηθούν στην ανάγνωση και την οργάνωση του κειμένου στη σελίδα.
Οι παράγραφοι HTML ορίζονται με την ετικέτα <p>:
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου web page</title>
</head>
<body>
<p>Αυτό είναι ένα παράδειγμα παραγράφου.</p>
<p>Αυτός είναι ένας άλλος παράδειγμα παραγράφου.</p>
</body>
</html>
Οι παράγραφοι χρησιμοποιούνται για να οργανώσουν το κείμενο σε λογικές μονάδες και να καθιστούν την ανάγνωση πιο εύκολη.
Οι σύνδεσμοι HTML ορίζονται με την ετικέτα <a>:
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου web page</title>
</head>
<body>
<a href="https://www.example.com"
>Αυτός είναι ένας σύνδεσμος στον ιστότοπο example.com</a
>
</body>
</html>
Η ετικέτα <a> δηλώνει έναν σύνδεσμο και περιλαμβάνει ένα href (Hypertext Reference) ως προς τον οποίον δείχνει ο σύνδεσμος. Όταν ο χρήστης κάνει κλικ στον σύνδεσμο, μεταβαίνει στη διεύθυνση URL που καθορίζεται στο href.
Οι εικόνες HTML ορίζονται με την ετικέτα <img>.
Το αρχείο προέλευσης (src), το εναλλακτικό κείμενο (alt), το πλάτος και το ύψος παρέχονται ως χαρακτηριστικά (attributes):
[adinserter block=”3″]
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου web page</title>
</head>
<body>
<img
src="https://pliroforiki-edu.gr/wp-content/uploads/2023/05/HTML.png"
alt="Περιγραφή εικόνας"
width="500"
height="300"
/>
</body>
</html>
Η ετικέτα <img> είναι μια ανεξάρτητη ετικέτα, δηλαδή δεν χρειάζεται να κλείσει με μια αντίστοιχη ετικέτα. Το χαρακτηριστικό src περιλαμβάνει το URL του αρχείου εικόνας, ενώ το χαρακτηριστικό alt παρέχει μια περιγραφή για την εικόνα. Τα χαρακτηριστικά width και height καθορίζουν το πλάτος και το ύψος της εικόνας σε εικονοστοιχεία (pixels).
