HTML struktura : HTML Structure of web page

HTML struktura web stranice

HTML Structure of web page

Web stranica se sastoji od html elemenata i teksta. Unosimo ih u tekst editor kao što je notepad. Za naprednije kôdiranje dobro je koristiti neki od besplatnih html i css editora koji imaju mnoštvo naprednih funkcija, najčešće korišteni su editori Visual Code ili Brackets.

Svaka web stranice uobičajeno počinje i završava s početnom i završnom oznakom elementa <html>. Početna i završna oznaka elementa sadrže naziv oznake, a završna oznaka elementa mora imati kosu crtu prije naziva. Postoje i prazni elementi koji imaju samo početnu oznaku.

Slijedeći primjer je web stranica koja ispisuje tekst glavnog naslova, zatim odlomak teksta te dva puta podnaslov i odlomak teksta. Sav sadržaj web stranice mora se nalaziti unutar <body> elementa.

HTML primjer web stranice:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Ovo je glavni naslov</h1>
    <p>Ovo je odlomak teksta.</p>
    <h2>Ovo je podnaslov razine 2</h2>
    <p>Naslov razine 2 koristi manja slova nego glavni naslov.</p>
    <h2>Još jedan podnaslov</h2>
    <p>Novi odlomak testa na web stranici.</p>
  </body>
</html>

Struktura i web dizajn!

Kôdovi elemenata <body>, <head> i <title>

Web stranica počinje i završava <html> elementom. Unutar njega nalaze se dvije cjeline. Označene su oznakama elementa <head> i <body>.

<head> dio služi za zadavanje osobina web stranice. U slijedećem primjeru u njemu se nalazi <title> element koji sadrži tekst koji će biti ispisan na kartici web preglednika. Ovaj tekst je važan dio SEO optimizacije web stranice. On biva ispisan u tražilici (Google, Bing, Yahoo) kao naziv web stranice.

<body> dio sadrži html kôdove koji određuju sadržaj koji će biti prikazan na web stranici. To mogu biti tekst, slike, popisi, poveznice, tablice, strukturni elementi i elementi za video i audio zapise.

<!doctype html>                        
<html>
  <head>
    <meta charset="utf-8" />
    <title>Ovo je naslov stranice koji ispisuje web preglednik</title>
  </head>
  <body>
    <h1>Glavni naslov u tekstu</h1>
    <p>Sve unutar body elementa se prikazuje u prozoru preglednika.</p>
  </body>
</html>

Moja prva web stranica

Slijedeći primjer html stranice ispisuje na kartici web preglednika tekst "Moja prva web stranica" (nalazi se između početne i završne oznake <title> elementa).

Unutar <body> dijela zadano je prikazivanje glavnog naslova odnosno <h1> elementa "Dobrodošli na moju prvu web stranicu". Nakon njega web preglednik automatski prelazi u novi redak. Zatim se pomoću elementa <p> određuje ispis odlomka teksta "Ova HTML stranica je napravljena u Brackets editoru"

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Moja prva web stranica</title>
  </head>
  <body>
    <h1>Dobrodošli na moju prvu web stranicu</h1>
    <p>Ova HTML stranica je napravljena u Brackets editoru.</p>
  </body>
</html>