close

Εισαγωγή στη Δομή HTML: Βασικά Στοιχεία και Σύνταξη

Η δομή HTML παίζει καθοριστικό ρόλο στη δημιουργία ιστοσελίδων. Καθορίζει πώς οργανώνεται και εμφανίζεται το περιεχόμενο σε μια ιστοσελίδα. Ακολουθεί μια εισαγωγή στη βασική δομή HTML:

1. Doctype

Το Doctype(Δήλωση τύπου εγγράφου) ορίζει την έκδοση HTML που χρησιμοποιεί η ιστοσελίδα. Θα πρέπει να τοποθετηθεί στην αρχή του αρχείου HTML.

2. ετικέτα html

Η ετικέτα html είναι το ριζικό στοιχείο κάθε αρχείου HTML. Περιλαμβάνει ολόκληρο το περιεχόμενο της ιστοσελίδας.

3. head ετικέτα

Η ετικέτα κεφαλιού περιέχει πληροφορίες σχετικά με την ιστοσελίδα που δεν εμφανίζονται απευθείας στο πρόγραμμα περιήγησης. Εδώ ορίζεται ο τίτλος της σελίδας, οι μετα-ετικέτες, οι σύνδεσμοι σε αρχεία CSS και JavaScript και διάφορα άλλα στοιχεία.

4. body ετικέτα

Η ετικέτα σώματος περιέχει όλο το περιεχόμενο που εμφανίζεται στην ιστοσελίδα. Εδώ ορίζονται στοιχεία όπως κείμενο, εικόνες, βίντεο, σύνδεσμοι και άλλα στοιχεία διεπαφής χρήστη.

5. Ένθετες ετικέτες

Η HTML χρησιμοποιεί μια ιεραρχική δομή με ετικέτες ανοίγματος και κλεισίματος. Οι θυγατρικές ετικέτες τοποθετούνται μέσα στις γονικές ετικέτες. Για παράδειγμα, η ετικέτα p(παράγραφος) μπορεί να περιέχει ετικέτες span(ενσωματωμένο κείμενο), ισχυρές ετικέτες(έντονο κείμενο) και πολλές άλλες ετικέτες.

6. Κοινές ετικέτες

Η HTML παρέχει μια σειρά από ετικέτες για τη μορφοποίηση και την εμφάνιση περιεχομένου. Για παράδειγμα, οι ετικέτες h1-h6(επικεφαλίδες), η ετικέτα p(παράγραφος), η ετικέτα img(εικόνα), μια ετικέτα(σύνδεσμος) και πολλές άλλες.

 

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

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

Στο παραπάνω παράδειγμα, έχουμε μια πλήρη σελίδα HTML με τα κύρια στοιχεία όπως doctype, html tag, head tag και body tag. Στην ενότητα head ορίζουμε τον τίτλο της σελίδας, τα αρχεία CSS και JavaScript που θα χρησιμοποιηθούν. Η ενότητα σώματος περιέχει στοιχεία όπως κεφαλίδα, κύρια και υποσέλιδο για την εμφάνιση του περιεχομένου της ιστοσελίδας.

 

Χρησιμοποιώντας τη σωστή δομή HTML, μπορείτε να δημιουργήσετε καλά οργανωμένες, ευανάγνωστες και διαδραστικές ιστοσελίδες.