HTML5 - Head


HTML head elemet

Element <head> prvenstveno je kontejner za sve elemente, koji pružaju dodatne informacije o dokumentu (metapodaci) ili referencu na druge resurse koji su potrebni da bi se dokument ispravno prikazao ili ponašao u web pretraživaču. Elementi head zajednički opisuju svojstva dokumenta, poput naslova, pružaju meta informacije poput skupa znakova, upućuju pretraživaču gdje pronaći tabele stilova ili skripte koje vam omogućavaju da proširite HTML dokument na vrlo aktivne i interaktivne načine. HTML elementi koji se mogu koristiti unutar elementa <head> su: <title>, <base>, <link>, <style>, <meta>, <script> i <noscript> element.



HTML title element

Element <title> definiše naslov dokumenta. Element naslova potreban je u svim HTML/XHTML dokumentima kako bi se proizveo važeći dokument. U dokumentu je dopušten samo jedan naslovni element koji mora biti smješten unutar elementa <head>. Naslovni element sadrži običan tekst i entitete. Ne može da sadrži druge oznake za označavanje. Naslov dokumenta može se koristiti u različite svrhe. Na primjer:

  • Za prikaz naslova na naslovnoj traci pretraživača i na traci zadataka.
  • Da biste osigurali naslov stranice kada je dodana u favorite ili označena.
  • Za prikaz naslova stranice u rezultatima pretraživača.

Sljedeći primjer pokazuje kako smjestiti naslov u HTML dokument.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML stranica</title>
</head>
<body>
    <p>Volim da učim uz IT TUTORIJALE!</p>
</body>
</html>


HTML osnovni elementi

Element HTML <base> koristi se za definisanje osnovnog URL-a za sve relativne veze sadržane u dokumentu, npr. osnovni URL možete postaviti jednom na vrhu stranice, a zatim će sve naredne relativne veze koristiti taj URL kao početnu tačku. Evo primjera:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Definisanje baze URL</title>
    <base href="https://www.ittutorijali.net/">
</head>
<body>
    <p><a href="tekstualne-lekcije/html5/uvod.php">HTML5 kurs</a>.</p>
</body>
</html>

Hiperveza u gornjem primjeru zapravo će se riješiti na https://www.ittutorijali.com/tekstualne-lekcije/html5/uvod.php, bez obzira na URL trenutne stranice. To je zato što je relativni URL naveden u poveznici: tekstualne-lekcije/html5/uvod.php dodan na kraj osnovnog URL-a: https://www.ittutorijali.net/.



HTML link element

Element <link> definiše odnos između trenutnog dokumenta i vanjskih dokumenata ili resursa. Uobičajena upotreba elementa veze je povezivanje s vanjskim tabelama stilova.

<head>
    <title>Style Sheets link</title>
    <link rel="stylesheet" href="style.css">
</head>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Povezivanje tabela stilova</title>
    <link rel="stylesheet" href="/examples/css/style.css">
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Stilovi ovog HTML dokumenta definisani su u povezanom stilu.</p>
</body>
</html>

Pogledajte CSS3 tutorijala kako biste detaljno saznali o stilovima tabele.



HTML style element

Element <style> koristi se za definisanje ugrađenih informacija o stilu za HTML dokument. Pravila stila unutar elementa <style> određuju kako se HTML elementi prikazuju u pretraživaču.

<head>
    <title>Ugrađivanje Style Sheets</title>
    <style>
        body { background-color: YellowGreen; }
        h1 { color: red; }
        p { color: green; }
    </style>
</head>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ugrađivanje tabela stilova</title>
    <style>
        body { background-color: YellowGreen; }
        h1 { color: red; }
        p { color: green; }
    </style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Stilovi ovog HTML dokumenta definisani su unutar elementa style.</p>
</body>
</html>


HTML meta element

Element <meta> pruža metapodatke o HTML dokumentu. Metapodaci su skup podataka koji opisuju i daju informacije o drugim podacima. Evo primjera:

<head>
    <title>IT TUTORIJALI</title>
    <meta charset="utf-8">
    <meta name="author" content="Miloš Mihaljica">
</head>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Definisanje meta podataka</title>
    <meta charset="utf-8">
    <meta name="author" content="Miloš Mihaljica">
</head>
<body>
    <h1>Definisanje meta podataka</h1>
    <p>Meta tagovi sadrže informacije o web stranici. Nije vidljiv u pretraživaču.</p>
</body>
</html>


HTML script element

Element <script> koristi se za definisanje skripte na strani klijenta, kao što je JavaScript u HTML dokumentima. Sljedeći primjer će prikazati pozdravnu poruku u pretraživaču:

<head>
    <title>Dodavanje JavaScript</title>
    <script>
        document.write("<h1>Pozdrav od ekipe IT TUTORIJALI!</h1>") 
    </script>
</head>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dodavanje JavaScript</title>
    <script>
        document.write("<h1>Pozdrav od ekipe IT TUTORIJALI!</h1>") 
    </script>
</head>
<body>
  <p>Gornji naslov je u ovome dokument umetnuo je JavaScript.</p>
</body>
</html>