HTML skripte se pišu uz pomoć tagova. Tag je ključna riječ okružena s "<" i ">" strelicama. Npr. tag za odlomak teksta (engl. paragraph) je:
<p>
Tagovi se zatvaraju sa slash-om "/", npr:
</p>
Tag bez slash-a "/" naziva se početni (start) tag, a tag sa slash-om završni (end) tag.
Sadržaj nekog elementa se nalazi između početnog i završnog tag-a:
<p>Dobar dan</p>
Tagove je potrebno zatvarati jer se mogu pisati jedan unutar drugog:
<p><b>Dobar</b> dan</p>
Tag <b> je podebljani tekst (engl. bold). Tako će rezultat gornjeg koda biti: Dobar dan
U ovom slučaju ako ne zatvorimo tag <b> ostatak stranice će biti u podebljanom tekstu.
Neki tagovi se mogu odmah zatvarati. U tom slučaju slash "/" ide na kraj tag-a. Npr. tag za prijelaz u novi red (engl. break line):
<br/>
Zadatak 1
Za pisanje HTML koda dovoljan je običan text editor.
Otvorite novu datoteku u nekom text editoru i upišite:
Dobar dan
Spremite datoteku s ekstenzijom .html ili .htm (.html i .htm su standardne ekstenzije HTML datoteka). Pronađite datoteku u vašem računalu i dvokliknite da biste ju pokrenuli. Vaš web preglednik bi se trebao otvoriti i prikazati web stranicu s tekstom: Dobar dan
Web preglednici nam omogućuju da pogledamo izvorni kod stranice. Dovoljno je kliknuti desnom tipkom miša na stranicu i odabrati "View page source". Web preglednik će nam otvoriti novi tab u kojem je prikazan izvorni kod stranice.
Ako otvorimo naš primjer "Dobar dan" preko opcije "View page source", vidjet ćemo da je izvorni kod stranice jednak tekstu "Dobar dan".
Web preglednici nam omogućuju i da istražujemo elemente web stranice. Desnim klikom na neki HTML element i odabirom "Inspect element" u Mozilla Firefox-u ili "Inspect" u Google Chrome-u, otvara se prozor Inspector.
Inspector nam omogućuje pregled koda elementa i prikazuje nam kako je element uređen (koji font je korišten, koje boje, ...)
Ako otvorimo naš primjer "Dobar dan" u Inspector, vidjet ćemo da je web preglednik generirao više koda nego samo naš tekst "Dobar dan".
Osnovna struktura HTML dokumenta izgleda ovako:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Dobar dan</p>
</body>
</html>
Zadatak 2
Napišite ponovno prvu web stranicu, ali koristeći HTML strukturu dokumenta.
Neki od HTML tagova su:
<p> (engl. paragraph) odlomak/prikazivanje teksta:
<p>Dobar dan</p>
Rezultat:
Dobar dan
<b> (engl. bold) podebljavanje teksta:
<b>Dobar dan</b>
Rezultat:
Dobar dan
<u> (engl. underline) pocrtavanje teksta:
<u>Dobar dan</u>
Rezultat:
Dobar dan
<i> (engl. italic) za ukošeni tekst:
<i>Dobar dan</i>
Rezultat:
Dobar dan
Ako kombiniramo par tagova možemo dobiti zanimljivi tekst:
<p><b><u>D</u>obar</b> <i>dan</i></p>
Rezultat:
Dobar dan
<h1> (engl. header) h1 je najveći naslov:
<h1>Dobar dan</h1>
Rezultat:
Dobar dan
<h2> (engl. header) h2 je malo manji naslov:
<h2>Dobar dan</h2>
Rezultat:
... postoje i h3, h4, h5 i h6
<h6> (engl. header) h6 je najmanji naslov:
<h6>Dobar dan</h6>
Rezultat:
Ako imamo odlomak s više redaka, <p> to neće sam shvatiti već će sve ispisati u isti redak:
<p> Dobar dan. Kakav lijep dan. </p>
Rezultat:
Dobar dan.
Kakav lijep dan.
U pomoć nam priskače <br/> (engl. line break):
<p> Dobar dan.<br/> Kakav lijep dan. </p>
Rezultat:
Dobar dan.
Kakav lijep dan.
Zadatak 3
Napišite vijest o održavanju web predavanja informatičke udruge Futura u HTML-u. Vijest mora sadržavati:
Komentar je dio koda koji web preglednik preskače i on se ne prikazuje. Komentar se piše unutar <!--KOMENTAR-->
<!--ovo je moj komentar--> <p>Dobar dan</p>
Rezultat:
Dobar dan
Komentar može obuhvaćati i više linija:
<!-- ovo je moj komentar koji ide u više linija jeeeeee :) --> <p>Dobar dan</p>
Rezultat:
Dobar dan
Da bi postavili ime stranice, potrebno je upisati <title> tag u <head> elementu.
<title>Naslov ove super stranice</title>
Ako pokušamo upisati hrvatske dijakritičke znakove (š, đ, č, ć, ž) na stranicu, HTML neće biti oduševljen i prikazati će neispravne podatke. Zbog toga moramo web pregledniku reći koji skup znakova da koristi. To radimo tako da unutar <head> tag-a postavimo charset (kodiranje znakova na stranici) na UTF-8.
<meta charset="UTF-8">
U <meta> tag-u možemo definirati i neke infomacije o stranici, poput autora:
<meta name="author" content="Futura">
Ili ključne riječi stranice:
<meta name="keywords" content="futura web programiranje">
U Mozilla Firefox-u moguće je vidjeti meta podatke stranice preko desni klik/View page info.
Postoje dvije liste u HTML-u, neuređena lista <ul> (engl. unordered list) i uređena <ol> (engl. ordered list). Jedina je razlika što neuređena lista ima redne brojeve ispred članova liste, a uređena ima kružiće. Članovi liste su označeni s <li>.
Neuređena lista:
<ul> <li>Prvi član</li> <li>Drugi član</li> <li>Treći član</li> </ul>
Rezultat:
Uređena lista:
<ol> <li>Prvi član</li> <li>Drugi član</li> <li>Treći član</li> </ol>
Rezultat:
Zadatak 4
Napišite neuređenu listu za kupnju s minimalno deset artikala. U listi navedite barem jedan artikl koji koristi barem jedan hrvatski dijakritički znak (š, đ, č, ć, ž).
Neki HTML elementi imaju atribute koji se mogu mijenjati. Atributi dolaze unutar tag-a elementa, uvijek u obliku atribut="vrijednost". Element može imati i više atributa.
Uređenoj listi se može postaviti atribut type da umjesto rednih brojeva budu slova:
<ol type="A"> <li>Prvi član</li> <li>Drugi član</li> <li>Treći član</li> </ol>
Rezultat:
Atribut type raspoznaje vrijednosti "A" velika slova, "a" mala slova, "I"(Rimski brojevi), "i"(mali Rimski brojevi) i "1" (brojeve - što je i početna vrijednost).
Element tablice započinje se s tag-om <table>. Unutar njega navodi se <tr> (engl. table row), unutar kojeg se navodi ćelija tablice <td> (engl. table data). Potrebno je navoditi <tr> za svaki redak. Postoji i element naslova stupca tablice <th> (engl. table header).
<table border="1">
<tr>
<th>Naslov</th>
<th>Naslov</th>
</tr>
<tr>
<td>Podatak 1</td>
<td>Podatak 2</td>
</tr>
<tr>
<td>Podatak 3</td>
<td>Podatak 4</td>
</tr>
</table>
Rezultat:
| Naslov | Naslov |
|---|---|
| Podatak 1 | Podatak 2 |
| Podatak 3 | Podatak 4 |
Atribut border označava debljinu crta oko tablice u pikselima. Ako postavite border na 0, neće ih imati.
HTML poveznice (engl. link) su hiperlinkovi, tj. tekst ili slika na koju, kada kliknete, odvede na drugi dokument ili stranicu. Tag za link je <a>, a dokument na koji upućuje upisuje se u atributu href. Dokument na koji se upućuje ne mora biti HTML dokument.
Poveznica na stranicu Future:
<a href="http://www.futura.com.hr/">Futura</a>
Rezultat:
FuturaAko se dokument ili stranica nalazi u istom folderu gdje i vaša stranica, da bi povezali dovoljno je unutar href atributa upisati ime dokumenta ili stranica, npr: href="ime.hmtl".
Ako se dokument ili stranica nalazi u podfolder-u vaše stranice, moguće joj je pristupiti tako da upišete imeFoldera/imeDokumenta, npr. href="eng/about.html".
Ako se dokument ili stranica nalazi negdje na web-u, potrebno je upisati punu lokaciju, npr. href="http://www.futura.com.hr/".
Moguće je link otvoriti i u novom tab-u tako da mu se doda atribut target s vrijednošću _blank:
<a href="http://www.futura.com.hr/" target="_blank">Futura</a>
Rezultat:
FuturaSlika se povezuje s pomoću tag-a <img>. Lokacija slike se upisuje unutar src atributa, a unutar alt atributa upisuje se tekst koji će se prikazati ako se slika ne može učitati.
Tag <img> nema tag za zatvaranje, tj. ne postoji </img>. Koristi se u obliku <img src="" alt=""> ili <img src="" alt="" />
Primjer za prikaz loga Future:
<img src="futura.jpg" alt="" />
Rezultat:
Kao kod poveznice, ovisno o lokaciji slike potrebno je upisati samo ime slike, podfolder ili lokaciju slike na web-u.
Zadatak 5
Uredite vijest iz zadatka 3 tako što dodate naslovnu sliku i još jednu sliku negdje u tekstu. Svaka slika mora biti poveznica na stranicu udruge "http://www.futura.com.hr/". Također, naziv udruge Futura mora biti poveznica na stranicu udruge.
Prilikom dodavanja stila nekom HTML elementu potrebno je dodijeliti mu neko svojstvo sa određenom vrijednošću:
element {
svojstvo: vrijednost;
}
Gore je naveden način koji ćete, jednom kad prođete osnove, najviše i koristiti. Do tada, bazirat ćemo se na "inline" zapis CSS-a:
<element style="svojstvo: vrijednost;">
Dva bitna, možda čak i najbitnija svojstva nekog elementa su visina i širina. Postoji nekoliko mjernih jedinica za određivanje dimenzija elementa kao što su px, %, em, pt, mm. U ovom slučaju, bazirat ćemo se samo na prve dvije spomenute.
Kako bi nekom elementu dodali visinu koristit ćemo svojstvo height i vrijednost sa mjernom jedinicom "px"" (pixel). Za primjer ćemo uzeti sliku koju smo spomenuli u HTML sekciji "Slika".
<img src="futura.jpg" alt="futura" style="height:100px;"/>
Rezultat:
Kako bi nekom elementu dodali širinu koristit ćemo svojstvo width sa mjernom jedinicom "%" (postotak).
<img src="futura.jpg" alt="futura" style="width:100%;"/>
Rezultat:
Ukoliko želimo dodati više svojstava za isti element, jednostavno ih redamo nakon znaka ";" (točka-zarez) prvog svojstva, npr:
<img src="futura.jpg" alt="futura" style="width:100%; height:100px"/>
Rezultat:
Zadatak 6
Uredite slike iz zadatka 5 tako što dodate širinu 100% za naslovnu sliku, a širinu 600px i visinu 200px za drugu sliku.
Osim dimenzija elemenata, ljudi brzo uočavaju i boje, pa tako će prvo uočiti pozadinsku boju, boju slova, boju okvira itd. Postoji više načina za obojati neki element pomoću CSS-a:
Prva tri prikazana načina sa prijerima u zagradama će dati isti rezultat, dok će posljednji dodati transparentnost. Preporučuje se korištenje srednja dva načina jer ga svi web preglednici podržavaju i jer ima puno veći spektar boja od prvoga. Postoje mnogi alati za pretvorbu i odabir nijansi boja, a jedan od njih je i na W3Schools.com
Kako bi obojali neki tekst u crvenu boju potrebno je dodati svojstvo "color" tom elementu i dati mu vrijednost na jedan od gore navedenih načina:
<p style="color:red;">Obojaj me u crveno!</p> <p style="color:#ff0000;">Obojaj me u crveno!</p> <p style="color:rgb(255,0,0);">Obojaj me u crveno!</p>
Rezultat:
Obojaj me u crveno!
Osim boje teksta, možemo mijenjati i pozadinsku boju nekog elementa svojstvom "background-color":
<canvas style="width:100%; height:50px; background-color:#0000ff;"/></canvas>
Rezultat:
Zadatak 7
Dodajte proizvoljnu pozadinsku boju vašem tijelu dokumenta HEX zapisom, te dodajte boju vašem paragrafu RGB zapisom. (Hint: koristite se W3C alatom za pronalazak boja)
Kako bi vaše stranice uvijek bile čitljive (što im je i svrha?), posebnu pažnju treba obratiti i na tipografiju, odnosno koje fontove koristite, koju veličinu slova, proreda itd. Postoje 3 grupe fontova:
Razlika između Serif i Sans-serif grupe je u rubovima slova, pa tako svi fontovi iz Serif grupe imaju oštre, odnosno produžene krajeve slova, a fontovi iz Sans-serif ne. Monospace grupa je grupa fontova koji imaju jednak razmak između svakog pojedinog slova.
Čitanje Sans-serif fontova je za većinu ljudi ugodnije, no to ne znači da Serif i Monospace fontove nije poželjno koristiti. Najpoznatiji Serif font je "Times New Roman", a Sans-serif "Arial".
Za sad su spomenuta samo 4 svojstva, a CSS ih nudi pregršt. Kako smo prethodno spominjali tipografiju, vrijedno je spomenuti svojstva koja se tiču fontova i teksta.
Kako bi nekom elementu, ili čak cijelom html dokumentu rekli da koristi određenu grupu fontova, koristi se "family-font" svojstvo koje kao vrijednost može imati jedan ili više naziva fontova:
font-family: "Times New Roman", Times, serif;
Ako web preglednik ne prepozna font koji je prvi naveden, provjerit će je li podržava drugi itd. Uvijek je poželjno nanizati više fontova ukoliko se koriste ne standardni fontovi. Primjer teksta sa različitim fontovima:
<p style="font-family: Georgia, serif;">Ovo je tekst sa Serif fontom!</p> <p style="font-family: Arial, Helvetica, sans-serif;">Ovo je tekst sa Sans-serif fontom!</p> <p style="font-family: 'Courier New', Courier, monospace;">Ovo je tekst sa Monospace fontom!</p>
Rezultat:
Ovo je tekst sa Serif fontom!
Ovo je tekst sa Sans-serif fontom!
Ovo je tekst sa Monospace fontom!
Svojstvom "font-size" možemo mijenjati veličinu slova, npr.:
font-size: 24px;
<p style="font-size: 24px;">Ovo je veliki tekst!</p> <p style="font-size: 10px;">Ovo je mali tekst!</p>
Rezultat:
Ovo je veliki tekst!
Ovo je mali tekst!
Svojstvom "font-style" možemo npr. nakositi tekst umjesto HTML tagom:
font-style: italic;
<p style="font-style: italic;">Ovo je nakošeni tekst!</p>
Rezultat:
Ovo je nakošeni tekst!
"font-weight" je svojstvo kojim možemo podebljavat ili stanjivat slova. Vrijednost je izražena brojevima bez mjerne jedinice ili riječima "bold", "normal", "lighter".
font-weight: 800;
<p style="font-weight: 300;">Ovo je normalni tekst!</p> <p style="font-weight: bold;">Ovo je debeli tekst!</p>
Rezultat:
Ovo je normalni tekst!
Ovo je debeli tekst!
Ukoliko ne želimo pisati sva svojstva odvojeno, sve vrijednosti se mogu strpati pod svojstvo "font", s tim da se mora poštivati redoslijed "font-style font-variant font-weight font-size/line-height font-family". Ukoliko neku vrijednost ne želite zadati, jednostavno je preskočite npr.:
font: bold 18px Georgia, serif;
<p style="font: 18px Georgia, serif;">Ovo je neki tekst!</p> <p style="font: italic bold 18px/30px Arial, serif;">Ovo je neki tekst!</p>
Rezultat:
Ovo je neki tekst!
Ovo je neki tekst!
Zadatak 8
Uredite tekstove na sljedeći način:
Jedno od korištenijih svojstava je također "text-align", a služi za poravnanje teksta lijevo (left), sredinu (center), desno (right) ili obje strane (justify):
text-align: left;
<p style="text-align: left;">Ovo je tekst poravnat lijevo!</p> <p style="text-align: center;">Ovo je centrirani tekst!</p> <p style="text-align: right;">Ovo je tekst poravnat desno!</p>
Rezultat:
Ovo je tekst poravnat lijevo!
Ovo je centrirani tekst!
Ovo je tekst poravnat desno!
"text-decoration" služi za dekoriranje teksta kao što je podcrtavanje (underline) i precrtavanje (line-through), a vrlo često se koristi kako bi se izbrisala predodređena dekoracija linkova, npr:
text-decoration: none;
<p style="text-decoration: underline;">Ovo je podcrtani tekst!</p> <p style="text-decoration: overline;">Ovo je tekst sa gornjom crtom!</p> <a href="#" style="text-decoration: none;">Ovo je link bez stila!</a>
Rezultat:
Ovo je podcrtani tekst!
Ovo je tekst sa gornjom crtom!
Nabrojana svojstva su samo neka od mnogobrojnih koje CSS podržava, a još nekih bitnih ćemo se dotaknuti na sljedećoj radionici.
Zadatak 9
Na dnu vaše stranice napravite novi paragraf sa vašim imenom i prezimenom, poravnajte ga desno i podcrtajte ga.
