close

Uvod u HTML strukturu: osnovni elementi i sintaksa

HTML struktura igra ključnu ulogu u izradi web stranica. Definira kako je sadržaj organiziran i prikazan na web stranici. Ovdje je uvod u osnovnu HTML strukturu:

1. Doctype

Doctype(Deklaracija o vrsti dokumenta) definira HTML verziju koju web stranica koristi. Treba ga staviti na početak HTML datoteke.

2. html oznaka

HTML oznaka je korijenski element svake HTML datoteke. Sažima cijeli sadržaj web stranice.

3. head oznaka

Oznaka head sadrži informacije o web stranici koje nisu izravno prikazane u pregledniku. Ovdje se definira naslov stranice, meta oznake, veze na CSS i JavaScript datoteke i razni drugi elementi.

4. body oznaka

Oznaka body sadrži sav sadržaj koji se prikazuje na web stranici. Ovdje se definiraju elementi kao što su tekst, slike, videozapisi, poveznice i druge komponente korisničkog sučelja.

5. Ugniježđene oznake

HTML koristi hijerarhijsku strukturu s otvarajućim i zatvarajućim oznakama. Podređene oznake smještene su unutar nadređenih oznaka. Na primjer, oznaka p(odlomak) može sadržavati oznake raspona(umetnuti tekst), jake oznake(podebljani tekst) i mnoge druge oznake.

6. Uobičajene oznake

HTML nudi niz oznaka za oblikovanje i prikaz sadržaja. Na primjer, oznake h1-h6(naslovi), oznaka p(odlomak), oznaka img(slika), oznaka(veza) i mnogi drugi.

 

Ovdje je primjer potpune strukture HTML stranice:

<!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>

U gornjem primjeru imamo kompletnu HTML stranicu s glavnim elementima kao što su doctype, html oznaka, head oznaka i body oznaka. U odjeljku head definiramo naslov stranice, CSS i JavaScript datoteke koje će se koristiti. Odjeljak tijela sadrži elemente kao što su zaglavlje, glavno i podnožje za prikaz sadržaja web stranice.

 

Korištenjem ispravne HTML strukture možete izraditi dobro organizirane, čitljive i interaktivne web stranice.