Iako su moderne internetske stranice osmišljene na način da imaju korisnička sučelja koja su ”prijateljski nastrojena” prema korisniku, nije na odmet znati neke osnove HTML-a. Ako nastavite čitati ovaj članak i ako naučite sve ono o čemu ćemo govoriti u nastavku, moći ćete u vrlo kratkom vremenu kreirati svoje vlastite internetske stranice.
U nastavku ćete imati prilike vidjeti neke primjere HTML kodova. Ako ih želite sami ispitati, samo kopirajte HTML primjere u svoj vlastiti dokument.
<!DOCTYPE html>
Ova oznaka potrebna je svakom HTML dokumentu i nalazi se na početku HTML-a. Zahvaljujući ovoj oznaci internetski preglednik može očitavati HTML dokumente, odnosno HTML5.3, što je najnovija verzija HTML-a.
<html>… </html>
Još jedna oznaka koja govori vašem internetskom pregledniku da očitava HTML dokument. Sama <html> oznaka piše se nakon oznake DOCTYPE, a zatvara se na završetku dokumenta, sa </html>. Sve ostalo što se nalazi unutar dokumenta, kodovi koje ćete napisati, nalazi se između oznaka <html> i </html>.
<head>
Ova oznaka započinje odjeljak zaglavlja unutar dokumenta. Sadržaj koji se ovdje piše ne vidi se na internetskoj stranici. Sadržaj koji se ovdje nalazi zapravo se odnosi na meta-podatke koje koriste tražilice, kao i informacije za internetski preglednik.
<title>
Ova oznaka postavlja naslov internetske stranice. Sve što vam je potrebno ovdje jest postaviti naslov unutar oznake i zatvoriti je. Slijedite ovaj primjer:
<head>
<title>Moja internetska stranica</title>
</head>
<meta>
Poput oznake za naslov, oznaka meta stavlja se u zaglavlje internetske stranice. Meta-podatke najviše koriste tražilice. Osim toga, oni pokazuju kakve podatke prikazuje vaša internetska stranica. Postoji nekoliko različitih vrsta meta-podataka.
Evo primjera kako se ovo može primijeniti na internetskoj stranici:
<meta name=”description” content=”A basic HTML tutorial”>
<meta name=”keywords” content=”HTML,code,tags”>
<meta name=”author” content=”MUO”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
”Raspon gledišta” odnosno ”viewpoint” uvijek treba imati početno skaliranje postavljeno na 1.0, uz širinu koja će se prilagođavati dimenzijama zaslona uređaja na kojem se sadržaj gleda. Tako ćete osigurati da se svaka internetska stranica ispravno prikazuje, neovisno o rezoluciji zaslona uređaja.
<body>
Nakon što zatvorite odjeljak zaglavlja, dolazimo u tijelo internetske stranice. Odjeljak tijela otvaramo sa <body> i zatvaramo sa </body>. Cjelokupan sadržaj internetske stranice nalazi se između oznaka <body> i </body>.
<h1>
Ova oznaka označava zaglavlje prve razine na internetskoj stranici. Ovo će obično biti naslov, što znači da će postojati samo jedan <h1> na svakoj internetskoj stranici.
Dok <h1> označava naslov prve razine, <h2> definira naslov druge razine, kao što su zaglavlja, <h3> pod-zaglavlja i tako dalje, sve do <h6>. Svaka iduća razina naslova je dimenzijom manja od prethodne.
<p>
Oznaka ulomka započinje s novim ulomkom. Ovaj dio obično koristi prekid s dvije linije koda.
Na primjer, ako kod napišemo na sljedeći način:
<p>Vaš prvi ulomak.</p>
<p>Vaš drugi ulomak.</p>
To će rezultirati ovakvim razmještajem teksta:
Vaš prvi ulomak.
Vaš drugi ulomak.
<br>
Oznaka prijeloma retka umeće jedan prijelom retka:
<p>Prva linija koda.
Druga linija koda (koja se nalazi blizu prve).</p>
To bi na internetskoj stranici bili prikazano na idući način:
Prva linija koda.
Druga linija koda (koja se nalazi blizu prve).
Oznaka <hr> koristi se za sličnu svrhu. Ako napišete <hr> time ćete povući horizontalnu crtu na internetskoj stranici, što je dobro ako na primjer želite razdvojiti dijelove teksta.
<strong>
Ova oznaka označava dio teksta koji je važniji od drugih dijelova teksta. U biti ako napišemo kod <strong> to znači da će pojedini dio teksta biti podebljan. Evo kako to izgleda na primjeru:
<strong>Važne stvari koje želimo istaknuti.</strong>
To bi se na vašoj internetskoj stranici pokazalo na sljedeći način:
Važne stvari koje želimo istaknuti.
<em>
Oznake <em> i <i> su povezane. Oznaka <em> označava isto tako tekst koji je naglašen, no u ovome slučaju ako stavimo oznaku <em> tekst neće biti podebljan nego će biti u kurzivu.
Primjer koda:
<em>Naglašena linija koda.</em>
To bi na internetskoj stranici bilo prikazano na ovakav način:
Naglašena linija koda.
<a>
Oznaka <a> omogućit će vam umetanje poveznica na druge internetske stranice.
<img>
Ako unutar svoje internetske stranice želite umetnuti neku fotografiju, za to će vam biti potrebna oznaka za umetanje fotografija. Ona se obično koristi zajedno sa ”src” obilježjem. Na primjer:
<img src=”wp-content/uploads/2019/04/sunlit-birds.jpg”>
Ako ste ispravno umetnuli adresu fotografije, ona bi vam se trebala prikazati na vašoj internetskoj stranici.
Kao što možete očekivati, atributi “height” i “width” postavljaju visinu i širinu slike. Općenito, dobra je ideja postaviti samo jedan od njih kako bi se slika pravilno mjerila. Ako koristite oboje, mogli biste dobiti rastegnutu ili zgnječenu sliku.
Oznaka “alt” govori pregledniku koji tekst treba prikazati ako se slika ne može prikazati i dobra je ideja uključiti je uz bilo koju sliku. Ako netko ima posebno sporu vezu ili stari preglednik, još uvijek može dobiti ideju o tome što bi trebalo biti na vašoj stranici.
<ol>
Oznaka uređenog popisa omogućuje vam stvaranje uređenog popisa. Općenito, to znači da ćete dobiti numerirani popis. Svaka stavka na popisu treba oznaku stavke popisa (<li>), pa će vaš popis izgledati ovako:
<ol>
<li>Prva stvar</li>
<li>Druga stvar</li>
<li>Treća stvar</li>
</ol>
Na internetskoj stranici to će izgledati ovako:
- Prva stvar
- Druga stvar
- Treća stvar
<ul>
Neuređen popis daleko je jednostavniji od uređenog i numeriranog. U biti radi se o popisu koji koristi grafičke oznake. Na primjer:
<ul>
<li>Prvi predmet</li>
<li>Drugi predmet</li>
<li>Treći predmet</li>
</ul>
Što bi na vašoj internetskoj stranici trebalo izgledati ovako:
- Prvi predmet
- Drugi predmet
- Treći predmet
<table>
Tijekom kreiranja internetskih stranica postoji mnoštvo slučajeva kada ćete htjeti koristiti retke i stupce za segmentiranje informacija na stranici. Potrebno je nekoliko oznaka da bi tablica radila. Evo primjera HTML koda s tablicom:
<table>
<tbody>
<tr>
<th>1st column</th>
<th>2nd column</th>
</tr>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tbody>
</table>
Oznake <table> i </table> određuju početak i kraj tablice. Oznaka <tbody> sadrži sav sadržaj tablice.
Svaki redak tablice omeđen je oznakom <tr>. Svaka ćelija unutar svakog retka omotana je oznakama <th> za zaglavlja stupaca ili oznakama <td> za podatke stupaca. Trebate jedan takav za svaki stupac u svakom retku.
Piše: Ivan Hečimović
