close

Uvod v strukturo HTML: osnovni elementi in sintaksa

Struktura HTML igra ključno vlogo pri izdelavi spletnih strani. Določa, kako je vsebina organizirana in prikazana na spletni strani. Tukaj je uvod v osnovno strukturo HTML:

1. Doctype

Doctype(izjava o vrsti dokumenta) določa različico HTML, ki jo uporablja spletna stran. Postaviti ga je treba na začetek datoteke HTML.

2. html oznaka

Oznaka html je korenski element vsake datoteke HTML. Zajema celotno vsebino spletne strani.

3. head oznaka

Oznaka head vsebuje informacije o spletni strani, ki niso neposredno prikazane v brskalniku. Tukaj so definirani naslov strani, meta oznake, povezave do datotek CSS in JavaScript ter razni drugi elementi.

4. body oznaka

Oznaka body vsebuje vso vsebino, ki je prikazana na spletni strani. Tukaj so definirani elementi, kot so besedilo, slike, videi, povezave in druge komponente uporabniškega vmesnika.

5. Ugnezdene oznake

HTML uporablja hierarhično strukturo z odpiralnimi in zapiralnimi oznakami. Podrejene oznake so nameščene znotraj nadrejenih oznak. Na primer, oznaka p(odstavek) lahko vsebuje oznake span(besedilo v vrstici), močne oznake(krepko besedilo) in številne druge oznake.

6. Skupne oznake

HTML ponuja vrsto oznak za oblikovanje in prikaz vsebine. Na primer oznake h1-h6(naslovi), oznaka p(odstavek), oznaka img(slika), oznaka(povezava) in številne druge.

 

Tukaj je primer celotne strukture strani 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>

V zgornjem primeru imamo celotno stran HTML z glavnimi elementi, kot so doctype, html oznaka, head oznaka in body oznaka. V razdelku head določimo naslov strani, datoteke CSS in JavaScript, ki jih bomo uporabili. Razdelek telesa vsebuje elemente, kot so glava, glavna in noga za prikaz vsebine spletne strani.

 

Z uporabo pravilne strukture HTML lahko ustvarite dobro organizirane, berljive in interaktivne spletne strani.