Analiza HTML-a

U prijašnjem postu smo napravili jednostavnu Hello World stranicu. No što je tamo što? To ću pokušati objasniti red po red u ovom postu.

U prijašnjem postu smo napisali idući kod.

<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Naziv stranice</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Idemo to sada objasniti liniju po liniju koda, da nam bude jasno.

<!DOCTYPE html>

Prva linija koda koju smo uopće napisali je bila upravo <!DOCTYPE html>. Ona se uvijek stavlja u prvi red koda. Zašto? Zato jer web preglednik kada dobije HTML datoteku za pročitati, on ju uvijek čita od gore prema dolje. A ova linija pokazuje web pregledniku da treba očitati HTML dokument. Ako to stavimo negdje kada smo već napisali neki dio koda ili na kraju, preglednik neće prepoznati na vrijeme da je to HTML dokument. Iako preglednik radi bez te linije, najbolja praksa je uvijek stavljati tu deklaraciju u prvu liniju koda. Također, nije "case sensitive", tj. nije bitno dali je napisano velikim ili malim slovima.

<html lang="hr">

Druga linija koda označava početak HTML koda. <html> se još naziva i tag. U HTML-u svaki tag se mora otvarati i zatvarati. Na kraju koda smo zatvorili html tag sa </html>. Svaki tag može imati svoje atribute. Atributi su oznake koje se stavljaju u tagove prije zatvaranja uglaste zagrade. U ovom slučaju imamo atribut lang="hr"a koji ima vrijednost hr. U većini slučajeva ćemo skoro pa uvijek imati nekakvu vrijednost, koja se piše unutar duplih zagrada, osim nekih atributa koje ćemo upoznati kasnije. Lang atribut služi da upiti web preglednik na kojem je jeziku napisana web stranica. Preko toga Chrome preglednik prepoznaje dali je stranica na engleskom i pita nas želimo li prevesti stranicu na naš jezik. 

<head>

Head tag služi kao okvir koji u sebi drži metadata podatke ili podatke o stranici kao što su naslov stranice, nekakav opis, javascript skripte, itd. Metadata podaci se ne vide u samoj stranici. 

<meta charset="UTF-8">

Kako smo već rekli, unutar head taga ide matadata. Ovo je jedan od primjera koje koristimo. Tag meta ima atribut charset koji u sebi ima vrijednost UTF-8. Ovaj tag nam služi za prikazivanje UTF8 znakova, odnosno govori pregledniku koje znakove da prikaže. Bez njega nam nebi radila slova kao što su š,đ,č,ć,ž, itd.  

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Ovaj tag služi pregledniku da mu "kaže" da je sadržaj može prikazat na prijašnjim vezijama Internet Explorera od verzije 11, pa niže. Kako je novi Microsoft Edge baziran na Chromium engine-u, nije više potrebno stavljati ovaj tag, osim ako ćemo podržavati starije verzije, koje se koriste sve manje i manje. U ovom tečaju nećemo koristiti ovaj tag, jer jako mali broj korisnika koristi Microsoft-ov preglednik općenito, a još manje koriste nekakve starije verzije. 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Služi nam za responzivan dizajn. Što to znači? Kada otvaramo stranicu preko mobilnog web preglednika, stranice koje nemaju postavljen ovaj dio, otvaraju se kao da su veće, i udaljenije, te se tekst slabo vidi. Primjer je slika ispod. Sa lijeve strane je bez ovog taga, a sa desne strane je sa ovim tagom. 

Stranica sa viewport tagom i bez viewport taga

U atributu content imamo dvije vrijednosti, a to su width=device-width i initial-scale=1.0. U atribut možemo staviti više vrijednosti, ali o tome ćemo kasnije detaljnije pričati. Prva vrijednost stavlja širinu stranice jednako širini uređaja. Druga postavlja početni "zoom" da odgovara ekranu i da nemamo umanjenu stranicu.

<title>Naziv stranice</title>

Title tag predstavlja naslov stranice koji je vidljiv u kartici ili tabu preglednika. Bez njega nebi znali razlikovati koja je koja stranica, ako imamo više tabova. Nego bismo vidjeli ili link od te stranice ili naziv HTML dokumenta kao što je index.html. Kao većina tagova otvara se sa <title>, a zatvara se sa </title>. Između toga je nekakva vrijednost koja govori web pregledniku što da pokaže, odnosno kako da nazove stranicu. Možemo staviti bilo koju vrijednost koju želimo da nam piše u tabu. Radi lakšeg snalaženja korisnika, najčešće stavljamo nešto kao NekaStranica - Naziv Članka.

</head>

Ovime zatvaramo head tag koji smo otvorili iznad kao <head> i tako stavljamo sve meta tagove u head tag. On se uvijek mora zatvoriti, inače se preglednik može "zeznuti" i ne prikazati pravilno stranicu. 

<body>

Otvaramo body tag i u njega stavljamo sve što želimo prikazati na stranici od teksta, slika i ostalih elemenata na stranici. On se također mora zatvoriti kao i head, ali zatvara se sa </body>. 

<h1>Hello World!</h1>

Nakon što smo do postavili sav prijašnji kod i napokon otvorili body tag, u njega smo stavili element koji u sebi ima "Hello World!" vrijednost. Tag <h1> označava Header ili naslov. Kao što vidimo on u sebi nema nikakve posebne atribute, iako ih može sadržavati u sebi. Kao i svaki tag otvaramo ga sa < ime taga >, upisujemo nekakvu vrijednost koju želim da nam prikaže. Zatvaramo ga sa </ ime taga >.

</body>

Kada smo gotovi sa svim elementima koje želimo prikazati, zatvaramo body tag i tako "govorimo" web pregledniku da smo gotovi sa svim elementima za prikaz.

</html>

Nakon zatvaranja body taga, zatvaramo i html tag, te tako govorimo pregledniku da smo gotovi sa našim HTML dokumentom i da je spreman dalje primijeniti stil na stranicu.

Ukratko

  • Svaki tag otvaramo sa < ime taga > i zatvaramo sa </ ime taga> - <h1></h1>
  • Tagovi u sebi mogu imati nekakvu vrijednost - <h1>Vrijednost</h1>
  • Tag može imati ali i ne mora imati u sebi atribut - <h1 atribut>Vrijednost</h1>
  • Atrubut može ali i ne mora imati vrijednost u sebi - atribut="vrijednost"
  • Vrijednost atributa uvijek ide u duple navodnike - "vrijednost"
  • Kao vrijednost taga možemo staviti još jedan tag - </h1></h2>Hello</h2></h1>
  • Prilikom dodavanja svakog taga unutar drugog taga, uvlačimo liniju
  • Za starije verzije Internet Explorer-a koristimo - <meta http-equiv="X-UA-Compatible" content="IE=edge">

Zadatak

Pokušaj napraviti stranicu koja ima naziv "Moja prva stranica" i ima naslov "Ovo je moja prva stranica.

Hint:
  1. "Moja prva stranica" mora biti u title tagu.
  2. "Ovo je moja prva stranica" mora biti u h1 tagu.
U idućem postu, dodati ćemo malo CSS stila da uredimo stranicu.

Primjedbe

Objavi komentar