POŠTANSKA TELEKOMUNIKACIJSKA ŠKOLA

TRG J. F. KENNEDYA 9
10 000 Zagreb

ZAVRŠNI RAD

MENTOR: UČENIK: Leon Lisjak

Marko Vujnović, dipl. ing. ZANIMANJE: Tehničar za računalstvo

Zagreb, svibanj 2020. godine

IME I PREZIME: Leon Lisjak
ZANIMANJE: Tehničar za računalstvo
ŠKOLSKA GODINA: 2019./2020.
RAZRED: 4.B1

TEMA: HTML i CSS

MENTOR: _________________
OCJENA: ________________( )
POTPIS: __________________

Zagreb, svibanj 2020. godine

Sadržaj

1. Uvod ............................................................................................................................................................. 1
2. Osnove weba ................................................................................................................................................ 2
2.1 IP Adrese ................................................................................................................................................ 2
2.1.1 Klase IP adresa .................................................................................................................................... 2
2.2 FQDN ..................................................................................................................................................... 3
2.2.1. Domene .............................................................................................................................................. 3
2.2.2 Web serveri.......................................................................................................................................... 4
2.2.3 TCP/IP ................................................................................................................................................. 5
3. HTML........................................................................................................................................................... 6
3.1. Struktura HTML stranice ................................................................................................................... 6
3.2. HTML Elementi ................................................................................................................................. 7
3.2.1. Linijski elementi ................................................................................................................................ 7
3.2.2. Blok elementi ..................................................................................................................................... 8
3.2.3. Komentari........................................................................................................................................... 9
3.2.4. Oznake za prikaz i oblikovanje teksta ................................................................................................ 9
3.2.5. Slike .................................................................................................................................................. 11
3.2.6. Linkovi ............................................................................................................................................. 12
3.2.7. Liste .................................................................................................................................................. 14
3.2.8. Tablice .............................................................................................................................................. 15
4. CSS ............................................................................................................................................................. 16
4.1. CSS Sintaksa .................................................................................................................................... 17
4.1.1. Selektori ........................................................................................................................................... 17
4.2. Deklaracije u CSS ............................................................................................................................ 19
4.2.1. Boje .................................................................................................................................................. 19
4.2.2. Tekst ................................................................................................................................................. 20
4.2.3. Svojstva box elementa ..................................................................................................................... 22
5. ZAKLJUČAK ............................................................................................................................................ 23
6. Literatura .................................................................................................................................................... 24
1. Uvod

Web-stranica je specifična zbirka informacija koje pruža web mjesto i prikazuje se korisniku
pomoću internetskog preglednika. Temeljni element web-stranice je jedna ili više tekstualnih
datoteku napisanih HTML prezentacijskim jezikom čija je zadaća usmjeriti internetski preglednik
kako da prikaže hypertext dokument. Web-stranice često sadrže informacije u obojenom tekstu i
pozadinama i veoma često također sadrže linkove prema slikama i drugim tipovima medijskih
datoteka prilikom prikazivanja završnog prikaza. Izgled, tipografska i shematska u boji informacija
je omogućena preko Cascading Style Sheeta (CSS) instrukcija.

1
2. Osnove weba
2.1 IP Adrese

Kako bismo razumjeli način rada web stranica potrebno je razumjeti princip rada Interneta.
Internet je paketna podatkovna mreža koja povezuje računala i računalne mreže putem internetskog
protokola (eng. Internet Protocol, IP).

Kada se spojimo na Internet mi postajemo dio tog skupa umreženih računala. Svako računalo
spojeno na Internet ima svoju IP adresu. To su četiri broja odvojena točkama i jedinstvena su za svako
računalo spojeno u mrežu. U stvari se radi o jednom 32-bitnom broju te se za svaki od spomenuta
četiri broja koristi osam bitova. Svaki taj broj mora biti u intervalu 0 – 255 (odnosno 24). Internet je
u stanju podržati 4,228,250,625 računala.

2.1.1 Klase IP adresa

Da bi se pravilno raspodijelile IP adrese, uvedene su klase, postoje tri klase mrežnih adresa. Svaka
IP adresa može se podijeliti na dva dijela:

 adresu mreže i
 adresu nekog računala u toj mreži.

Klasa A su sve adrese kojima prvi broj označava adresu mreže, a ostali su brojevi računala u toj
mreži. Radi se o ogromnim mrežama jer korištenjem tri broja iz intervala 0-255 dobiva se ukupni broj
od 16,777.216 računala koja se mogu nalaziti u takvoj mreži. Takvih mreža nema puno, a za njih su
rezervirani brojevi od 1 – 126, a koriste ih velike tvrtke i organizacije poput američkog sveučilišta
MIT.

Klasa B su sve adrese čija prva dva broja označavaju adresu mreže, a ostala dva broja računalo iz
mreže. Prvi broj u klasi B može biti od 128 do 191 pa se njima može označiti 16.384 mreža. One
mogu sadržavati 2552 mreža, a jedna takva mreža je i hrvatski CARNet, čije adrese započinju sa
161.53.

Klasa C su sve adrese kojima prva tri broja označavaju adresu mreže, a četvrti broj, broj računala
u toj mreži. Prvi broj može biti u rasponu od 192 do 223. Ovakva klasa ima 2.097.152 mogućih mreža
od kojih svaka mreža može imati 254 računala.

2
 IP adrese koje započinju brojem 127 su posebne jer se radi o loopback adresama. To je posebna
adresa jer svi podatci i poruke koji se pošalju na tu adresu neće se zaputiti preko interneta na neko
udaljeno računalo, već će se vratiti natrag.

Slika 1. Klase IPv4 adresa

2.2 FQDN

IP adresa se sastoji od četiri broja koja i nisu baš lako pamtljiva (npr. 193.198.184.132) te je
mnogo lakše zapamtiti riječi i simboličke nazive adresa nego pisati niz brojeva (npr. www.ss-pts-
zg.skole.hr). Takva adresa naziva se Fully Qualified Domain Name (FQDN). Kada upišemo adresu
www.google.hr u našem pregledniku, on će dohvatiti web stranicu smještenu na računalu sa
određenom IP adresom (172.217.23.67). DNS serveri (od Domain Name Server) su zaduženi za
prevođenje IP adrese u FQDN i obratno. Na svakom od DNS servera nalazi se popis FQDN adresa
za vlastitu domenu.

2.2.1. Domene

Na većini hrvatskih web-stranica posljednja dva znaka su „hr“. Oni označavaju domenu, a ta
domena se naziva vršnom (eng. top-level) domenom. Svaka država ima svoju vršnu domenu, pa će
tako web-stranice u Njemačkoj imati završetak .de, one u Francuskoj .fr i sl. Za njihovu dodjelu brine
se registar svake države. Za HR domenu odgovorna je DNS služba CARNeta.

Uz domene država postoje i neke druge vršne domene. Najpoznatija je .com domena
osmišljena za komercijalne stranica, a od ostalih, važne su .edu (za obrazovne ustanove), .gov (za
vladine organizacije), .mil (vojne ustanove), .org (za organizacije) itd.

3
2.2.2 Web serveri

Računala koja su stalno spojena na Internet nazivaju se serverima (poslužiteljima). Web

serveri su računala na kojima su smještene web-stranice. Web-serveri su računala sa stalnim IP
adresama na koja se spremaju web-stranice i na koja se vežu FQDN nazivi.

Na serveru na Internetu ključni su portovi (ulazi) jer serveri mogu obavljati nekoliko različitih
usluga (npr. biti web server, mail server, FTP server itd.), a upotrebom samo IP adrese korisnik neće
imati mogućnosti odabira željene usluge. Zato su uvedeni portovi, odnosno ulazi na određene usluge
na računalu. Osnovne usluge na Internetu imaju portove brojeva do 1000, a taj broj može ići do 65.535
no takvi portovi se koriste za nestandardne usluge ili vezane uz operacijske sustave.

Tablica 1. Uloge osnovnih portova na serverima

Broj porta Usluga Opis

File transfer Protocol, za
21 ftp
razmjenu podataka
Terminalski pristup
23 telnet
udaljenom računalu
25 smtp Elektronička pošta

53 dns Domain Name serveri

80 http Web server

110 pop3 Elektronička pošta

119 nntp Newsgrupe

4
2.2.3 TCP/IP

TCP/IP je zapravo paket protokola za mrežnu komunikaciju. Svi podaci koji se šalju između
računala dijele se u pakete. Svaki od tih paketa koristi TCP/IP protokol - u njemu je sadržana adresa
ciljnog računala i ostali podaci bitni za prijenos podataka. Podjela podataka na pakete je vrlo korisna
- svaki se paket šalje posebno i može stići do cilja nekim drugim mrežnim putem preko drugih
računala. Isto tako, ukoliko se dogodi neka pogreška pri prijenosu podataka, ponovno se šalje samo
taj pogreškom neposlani paket, te tako smanjuje mrežni promet.

Slika 2. Način rada TCP/IP protokola

5
3. HTML

HTML (eng. hyper text markup language) je prezentacijski jezik koji služi za prikazivanje
informacija putem pretraživača. Ovaj jezik je temelj za prikazivanje informacija. HTML ne zahtjeva
podršku servera već je dovoljan samo pretraživač i datoteka u kojoj je spremljen kod od HTML−a.

3.1. Struktura HTML stranice

Svaki se HTML dokument sastoji od elemenata, a svaki se element sastoji od oznaka (tagova).
Oznaka je dio koda koji služi za razgraničavanje, a sastoji se od izlomljenih zagrada i alfanumeričkih
znakova. Većina elemenata se sastoji od početne i završne oznake (završna oznaka ispred svojeg
imena ima i kosu zagradu) unutar kojih se nalazi sadržaj elementa, iako se određeni elementi sastoje
samo od početne oznake. Osim toga element može imati i atribute kojima se definiraju svojstva tog
elementa, a atribut se sastoji od imena nakon kojeg slijedi znak jednako te vrijednost atributa unutar
navodnika. Dva najčešća atributa su id (jedinstveni identifikator) i class (klasa, kategorija).

Elementi najčešće sadrže tekst, iako mogu sadržavati i druge elemente. Element koji sadrži
neke druge elemente je roditelj (parent) svim elementima koje sadrži. Pri izradi web stranice potrebno
je započeti <html> oznakom koja u sebi sadržava <head> i <body> elemente. Sve unutar <html>
elementa jest HTML kod. Unutar <head> elementa nalazi se sve što nije direktan, ali je i dalje vrlo
bitan sadržaj internetske stranice (poput naslova stranice, CSS stilova ili ključnih riječi koje mogu
biti korisne kod pretraživanja), a unutar <body> elementa se nalazi sve što nam preglednik prikazuje
u svom prozoru.

Slika 3. Struktura HTML stranice

6
 3.2. HTML Elementi

Elementi daju strukturu HTML dokumentu i govore web pregledniku kako i što će vaša web
stranica sadržavati. Općeniti elementi se sastoje od početnog taga, nekog sadržaja i završnog taga.
Ponegdje se početni i završni tag nazivaju i početna odnosno završna oznaka elementa.

Tagovi su oznake web pregledniku za početak i kraj nekog elementa. Svi tagovi počinju sa
znakom manje od "<" a završavaju znakom veće od ">"

Općenito govoreći, postoje dvije vrste tagova: otvarajući tagovi npr. <html> i zatvarajući
tagovi </html> Jedina razlika između otvarajućeg taga i zatvarajućeg taga je kosa crta "/". Sadržaj
teksta se stavlja između otvarajuće i zatvarajuće oznake taga.

Sintaksna pravila za pisanje elemenata i tagova:

 Svi elementi i njihova svojstva pišu se malim slovima

 Sve vrijednosti svojstava elemenata moraju biti unutar dvostrukih navodnika
 Svi elementi moraju biti zatvoreni.
 Za parne elemente moraju se pisati početna i završna oznaka elementa.

Slika 4. Podjela HTML element

3.2.1. Linijski elementi

Razlikovanje linijskih i blok elemenata posebno je važno za vizualno oblikovanje web

stranice. Linijske elemente web preglednik smješta na prvo slobodno mjesto u roditeljskom elementu
(eng. parent). Primjeri HTML linijskih elemenata su: <a>, <em>, <strong>, <big>, <small>...

Strukturni linijski element je element <span> kojem dodajemo svojstva klase ili
identifikatora kako bi ga povezali s CSS ili JavaScript kodom.

7
Primjer:

<p>Lorem Ipsum is <b>simply</b> dummy text of the printing and <span style="backgro
und-color: yellow;">typesetting industry</span>.</p>

Izlaz:

Lorem Ipsum is simply text of the printing and typesetting industry.

3.2.2. Blok elementi

Sadržaj blok elementa uvijek se ispisuje u novom retku. Mogu unutar sebe sadržavati druge
blok ili linijske elemente. Primjer blok elemenata su html elementi <p>, <h1> ... <h6>, <table>…
Strukturni blok element je element <div> kojem dodajemo svojstva klase ili identifikatora kako bi
ga povezali s CSS ili JavaScript kodom

Primjer:

<div style="background-color: #121212;color:white;">

<h2>Poštanska i Telekomunikacijska Škola</h2>
<p>Početak rada seže u 1948. godinu. 17. rujna te godine osnovana je TT mehanič
arska škola u Zagrebu.</p>
<p>Do 1953. godine su se u njoj školovali samo TT mehaničari a u jesen te godin
e upisana je prva generacija TT montera.</p>
</div>

Izlaz:

Poštanska i Telekomunikacijska Škola

Početak rada seže u 1948. godinu. 17. rujna te godine osnovana je TT mehaničarska škola u Zagreb
u.

Do 1953. godine su se u njoj školovali samo TT mehaničari a u jesen te godine upisana je prva gene
racija TT montera.

8
 3.2.3. Komentari

Komentare možemo unositi bilo gdje unutar html dokumenta i taj dio teksta ne će biti prikazan
u web pregledniku. Web preglednik zanemaruje sadržaj komentara kod prikaza web stranice. No
komentar ćemo vidjet ako pristupimo izvornom html dokumentu. Korištenjem komentara možemo
dokumentirati zadaću koju ima pojedini dio html koda ili zabilježiti specifičnost koju smo koristili
pri kodiranju.

Sintaksa komentara:

<!-- Ovim nizom znakova počinjemo tekst koje će se nalaziti u komentaru

Slijedeći niz označava zatvaranje komentara: -->

3.2.4. Oznake za prikaz i oblikovanje teksta

Tekst u html dokument unosimo korištenjem elementa odlomka <p></p>. Element odlomka
je blok element i nakon završne oznake elementa automatski prelazi u novi redak.

Primjer:

<p>Velika slova u tekstu</p>

<p>Naglašen tekst</p>

Kada želimo dodati prelazak teksta u novi redak potrebno je koristiti element za novi redak
<br>. Ovaj element je prazan što znači da ima samo početnu oznaku elementa te na kraju obavezno
stavljamo oznaku.

Primjer:

<p>Poštanska i Telekomunikacijska <br>škola</p>

Izlaz:

Poštanska i Telekomunikacijska
škola

9
 U donjem primjeru navedeni su elementi oblikovanja teksta. Svi ovi elementi su linijskog tipa
i zato ne uzrokuju prelazak u novi redak.

Primjer:

<b>Podebljan tekst</b>
<big>Velika slova u tekstu</big>
<em>Naglašen tekst</em>
<i>Nakošen tekst</i>
<small>Mala slova u tekstu</small>
<strong>Deblja slova u tekstu</strong>
_{Slova u indeksu}
^{Slova u eksponentu}

Izgled u pregledniku:

Podebljan tekst

Velika slova u tekstu

Naglašen tekst

Nakošen tekst

Mala slova u tekstu

Deblja slova u tekstu

Slova u indeksu a ovo su slova u eksponentu

10
 3.2.5. Slike

Slike dodajemo pomoću praznog <img> elementa. <img> element mora sadržavati src atribut
koji će pregledniku reći gdje se slika nalazi. Ostali atributi koji se koriste su alt koji daje detaljan opis
slike u slučaju da se ona ne može učitati i title koji daje naslov slici te za vrijeme prelaska preko slike
mišem se isti taj naslov pojavljuje kao tooltip (oblačić). Visinu i širinu slike definiramo height i width
atributima čija je vrijednost broj u pikselima, iako se to danas sve češće radi pomoću CSS-a. Za
vektorsku grafiku koristimo <svg> element.

Primjer:

<img src="https://lh3.googleusercontent.com/p/AF1QipPUukRoRr9ogZ9bwjjbGyKH33PgxdOLt
1RkeXPZ=s0" title="Moja škola" alt="Škola">

Izlaz:

Slika 5. Prikaz rezultata primjera

11
 3.2.6. Linkovi

Linkovi su najjači adut web stranica i omogućavaju brzi prelazak s jedne web stranice na
drugu, unutar istog web sjedišta ili drugdje na internetu, i najviše doprinose njegovoj popularnosti.
Poveznica (link ili hiperlink) je riječ, skupina riječi ili slika na koju možemo kliknuti kako bi nas
povezala s novim dokumentom ili dijelom unutar postojećeg dokumenta. Kada se pokazivač miša
nalazi nad poveznicom mijenja izgled u ruku.

Element poveznice (linka) : <a>...</a> Kako bi načinili poveznicu na drugi dokument ili
web-stranicu, koristimo atribut href. Kako bi načinili poveznicu s kojom se možemo povezati unutar
dokumenta, koristimo atribut id. Kako bi odredili u kojem prozoru ili okviru (engl. frame) će se
otvoriti prikaz web stranice koristimo atribut target.

U prvu skupina spadaju linkovi koji povezuju trenutni html dokument s drugim stranicama
unutar istog web sjedišta.

Primjer:

<a href=" znanje.html"> Poveznica </a>

Linkanje stranice u sub-direktoriju. Za organiziranju stranicu možemo naše stranice stavljati

u neke sub-direktorije (npr. index.html i subfolder/znanje.html). Kako je index.html u direktoriju
iznad znanje.html potrebno je napisati sljedeću putanju

Primjer:

<a href="/subfolder/znanje.html"> Poveznica </a>

Putanja ../ označuje da smo u jednoj razini iznad željene stranice i to koristimo kada se
želimo vratiti u direktorij prije trenutnog.

Primjer:

<a href="../subfolder/znanje.html"> Poveznica </a>

12
 U drugu skupinu linkova su oni koji povezuju trenutnu web stranicu s drugim web sjedištima.
U ovoj skupini linkovima moramo dodijeliti punu adresu domene. U ovom primjeru, poveznica će
nas preusmjeriti na web-stranicu naše škole u istom prozoru.

Primjer:

<a href="http://www.ss-pts-zg.skole.hr/"> Poveznica </a>

U slijedećem primjeru budući da je atributu target dodijeljena vrijednost "_blank" otvorit će

stranicu u novom prozoru preglednika:

Primjer:

<a href="http://www.ss-pts-zg.skole.hr/" target="_blank"> Poveznica </a>

U treću skupinu linkova spadaju oni linkovi koji nas vode na neko mjesto na trenutnoj stranici.
Potrebno je prethodno dodijeliti elementu id atribut. Kada se želimo povezati s postojećim id,
svojstvu href dodjeljujemo vrijednosti svojstva id ispred kojeg navodimo znak ljestve (#). U
sljedećem primjeru klikom na poveznicu biti će nam prikazan element koji ima odgovarajući id.

Primjer:

<h1 id="naslov">Ovo je naslov</h1>

<a href="#naslov"> Poveznica </a>

13
 3.2.7. Liste

Postoji mnogo situacija kada se u HTML-u koriste liste, a poznajemo uređene i neuređene
liste te liste za definiranje. Uređene koristimo kada nešto ima određeni redoslijed, a neuređene
koristimo za nabrajanje bez redoslijeda. <ol> element označava uređene (ordered) liste, a <ul>
neuređene (unordered). Svaka stavka liste se označava <li> elementom (neovisno da li je lista
uređena ili neuređena). Treća vrsta listi je lista koja se koristi za definiranje. Kod njih je <dl> element
koji označava samu listu, <dt> označava pojam koji se definira, a <dd> sadrži definiciju pojma i
nalazi se neposredno nakon <dt> elementa.

Primjer uređene liste:

<ol>
<li>Luka</li>
<li>Marko</li>
<li>Ivan</li>
</ol>

Izgled u pregledniku:

1. Luka
2. Marko
3. Ivan

Primjer neuređene liste:

<ul>
<li>Luka</li>
<li>Marko</li>
<li>Ivan</li>
</ul>

Izgled u pregledniku:

• Luka
• Marko
• Ivan

14
 3.2.8. Tablice

Neki sadržaji internetskih stranica poput sportskih rezultata ili rasporeda tramvajskih stanica
se prikazuju u tablicama. Tablice se sastoje od stupaca i redova. U HTML-u tablice označavamo sa
oznakom <table> unutar kojeg se može sastojati bezbroj <tr> i <td> elemenata. <tr> elementi
predstavljaju redove, dakle ukoliko imamo samo jedan stupac ne trebamo koristiti <td> elemente
koji predstavljaju stupce. Naslov tablice definiran je oznakom <th>. Tablice su jedan od najvažnijih
elemenata HTML-a jer se njome stvara temeljni dizajn (kostur) svake web-stranice.

Atributi koji se koriste pri izradi tablice:

 Align (poravnanje) – left, right, center

 Background – naziv datoteke za pozadinu tablice ili ćelije
 Bgcolour – pozadinska boja tablice ili ćelije
 Border - širina ruba tablice ili ćelije u pikselima
 Cellpadding – udaljenost od ruba ćelije tablice ili ćelije do njenog sadržaja u pikselima
 Ctellspacing – razmak između ćelija u pikselima (ovaj atribut je primjenjiv na tablicu)
 Valign – vertikalno poravnanje tablice ili ćelije
 Height, width – visina i širina tablice ili ćelije u pikselima
 Rowspan – broj redaka kroz koji se ćelija proteže
 Colspan – broj stupaca kroz koji se ćelija proteže

Primjer:

<table width="50%">
<tr>
<th>Ime</th>
<th>Prezime</th>
</tr>
<tr>
<td>Marko</td>
<td>Marić</td>
</tr>
</table>

Slika 6. Prikaz tablice iz primjera

15
4. CSS

CSS (Cascading Style Sheets) je jezik kojim opisujemo izgled i oblikujemo dokumente
napisane pomoću markup jezika (npr. HTML, XML i SVG dokumenti). Osmišljen je primarno kako
bi se napravila razlika izgleda od sadržaja samog dokumenta te kako bi se omogućila bolja
fleksibilnost, snalaženje unutar dokumenta i kontrola izgleda dokumenta, a najveći je plus to što je
moguće formatirati više dokumenata na jednak način.

CSS ima dva načina integracije, prvi je pisanje direktno unutar HTML elementa pomoću style
atributa (tzv. inline način), a interno pomoću <style> oznake koja se nalazi unutar <head>
elementa.

Inline način:

<p style="color:blue;">Ovo je odlomak.</p>

Prikaz u pregledniku:

Ovo je odlomak

Najčešće korišteni način je eksterni način u kojemu se stvara zasebna .css datoteka koja se
povezuje sa HTML dokumentom na slijedeći način:

Eksterni način povezivanja .css datoteke:

<link href="css/style.css" type=“text/css“ rel="stylesheet">

<link> elementom govorimo HTML dokumentu gdje se nalazi .css datoteka pomoću href
atributa, type atributom označavamo tip datoteke u ovom slučaju .css datoteka, a atribut rel koji
specificira odnos između HTML dokumenta i dokumenta na koji link vodi.

16
 4.1. CSS Sintaksa

CSS dokument se sastoji od CSS pravila odnosno od selektora i liste deklaracija koje se nalaze
unutar vitičastih zagrada. Deklaracija započinje svojstvom kojem se kasnije pridodaje željena
vrijednost. Svaka deklaracija mora završavati sa točka zarezom (;).

Slika 7. Struktura CSS pravila

4.1.1. Selektori

Selektor je html element kojem želimo dodijeliti vrijednost svojstva. Svojstvo je točno
predefinirana oznaka koja govori koje svojstvo mijenjamo a vrijednost je stil koji dodjeljujemo
svojstvu. Postoji više vrsta selektora, oni koji se mogu odnositi direktno na specificirani element (npr.
na sve naslove prve razine h1) ili oni koji se odnose na elemente označene klasom ili id atributom.

Univerzalni selektor: /* Odnosi se na sve elemente u HTML dokumentu */

*{ }

Selektor elementa: /* Odnosi se na određeni element u HTML dokumentu */

element{ }

Selektor klase: /* Odnosi se na sve elemente sa odabranom klasom. Drugi primjer se

odnosi na sve određene elemente sa odabranom klasom*/
.nazivklase{ }
element.nazivklase{ }

ID Selektor: /* Odnosi se na element sa odabranim atributom id */

#nazivid{ }

Selektor djeteta: /* Odnosi se na sve p elemente unutar elementa div, ali ne i svi
ostali elementi p */
div>p{ }

Selektor nasljednika: /*Odnosi se na sve elemente p razgranate unutar div oznake*/

div p{ }

17
 4.1.1.1. Pseudo-klase

Pseudo-klasa koristi se za definiranje posebnog stanja elementa. Jedan od najčešćih primjera

pseudo-klase je :hover, koji se aktivira samo kada korisnik prijeđe mišem preko vidljivog elementa.
Drugi primjeri su :active koji se primjenjuje kada je element aktiviran od strane korisnika (npr.
neki radiogumb na stranici), :focus označava da je fokus na tom elementu, selektor fokusa dopušten
je za elemente koji prihvaćaju događaje na tipkovnici ili druge korisničke unose(često se koristi kod
formi), :link se koristi za još neposjećene linkove, a :visited za linkove na koje je korisnik kliknuo.

Primjer:

<head>
<style>
a:hover {
background-color: yellow;
}
</style>
</head>
<body>
<a href="http://www.ss-pts-zg.skole.hr/">Hiperlink</a>
</body>

Slika 8. Rezultat primjera za pseudo-klasu :hover

18
 4.2. Deklaracije u CSS
4.2.1. Boje

Boja je najčešće svojstvo koje se deklarira pomoću CSS-a. Boju možemo odrediti na više
načina: pomoću RGB vrijednosti (upisuje se koliki udio crvene, zelene i plave postoji u željenoj boji
gdje je četvrti broj opacity) heksadekadskog koda i naziva boje na engleskom jeziku. Prozirnost se
može definirati odvojeno pomoću opacity svojstva ili pomoću rgba vrijednosti boje. Prozirnost
može imati vrijednost od 0 do 1 (npr. 0.3, predstavlja 30% vidljivosti). Boja pozadine se definira
pomoću background (ili background-color) svojstva, a ne color svojstva.

<body>
<p class="odlomak">Odlomak</p>
</body>

Odabir boje pomoću naziva boje:

p.odlomak {
color: blue;
}

Prikaz u pregledniku:
Odlomak

Odabir boje pomoću heksadekadskog koda:

p.odlomak {
color: #03fc62;
}

Prikaz u pregledniku:
Odlomak

Odabir boje pomoću RGB vrijednosti:

p.odlomak {
color: rgb(255, 34, 126, 1);
}

Prikaz u pregledniku:
Odlomak

19
 4.2.2. Tekst

Tekst je moguće oblikovati preko sljedećih svojstva: font-family nam omogućava odabir
pisma, font-style svojstvo nam daje mogućnost da nakosimo tekst uz vrijednost italic. font-
weight nam omogućuje da definiramo debljinu teksta (npr. light, medium, bold, black ili
numeričke vrijednosti), a pomoću font-size određujemo veličinu teksta u raznim mjernim jedinicama.
Mjerne jedinice koje CSS prepoznaje su pikseli (px), točke (pt), centimetri (cm), inči (in), emovi
(em) i postotci (%).

Pomoću text-transform možemo tekst prebaciti u uppercase (velika slova),

lowercase (mala slova) ili capitalize (prvo slovo veliko). Možemo i dekorirati tekst pomoću
text-decoration svojstva. Vrijednost none označava da tekst nema nikakvu dekoraciju,
underline podcrtava tekst, overline dodaje liniju iznad teksta, a line-through precrtava tekst.
Prored se definira s line-height, razmak između slova s letter-spacing, a razmak između
riječi s word-spacing svojstvom. Pomoću text-align svojstva definiramo poravnavanje teksta,
a moguće vrijednosti su left (lijevo), right (desno), center (centrirano) i justify (obostrano).

Slika 9. Vrste centriranja teksta

20
Primjer:

<html>
<head>
<style>
p {
line-height: 1.5;
text-align: justify;
font-family: "Consolas", sans-serif;
border-left: 1px solid black;
padding-left: 20px;
}

.ptt {
color: red;
text-transform: uppercase;
}
</style>
</head>

<body>
<p>
U sastavu <span class="ptt">ptt</span> školskog centra je u razdoblju 1967. do 1973
. i Viša<spanclass="ptt">ptt</span> škola, koja se nakon izdvajanja i kraćeg samost
alnog djelovanja uklopila u današnji.
Fakultet prometnih znanosti. Usprkos tomu, obrazovna vertikala je sačuvana do današ
njih dana. 1973. godina je
značajna za jedno proširenje djelatnosti. Te godine počinju se obrazova ti tehničar
i <span class="ptt">ptt</span>
eksploatacije.
</p>
</body>
</html>

Slika 10. Prikaz rješenja primjera

21
 4.2.3. Svojstva box elementa

Pošto CSS elemente tretira kao da svaki postoji u zamišljenoj „kutiji“ (box elementi) moguće
je kontrolirati mnoga svojstva tih kutija. Visina i širina se definiraju pomoću width i height
svojstava čije su vrijednosti u postocima ili najčešće pikselima. Mnoge stranice formatiraju svoj
sadržaj ovisno o veličini ekrana ili preglednika i zbog toga postoje min-width i max-width
svojstva. Svaka „kutija“ ima tri svojstva koja mogu biti regulirana kako bi se promijenio izgled same
kutije.

Ta tri svojstva su border (rub), margina i padding (odmak). Svaki box-element ima rub
iako to nije vidljivo ili određeno. Border odvaja kutije jednu od druge. Postoje razni stilovi ruba
poput solid (ravna crta), dotted (točkasto), dashed (isprekidane linije),

Sintaksa za oblikovanje ruba:

element{
border-[top, left, right, bottom]: [debljina ruba] [stil ruba] [boja];
}

Margina je prostor s vanjske strane ruba koju koristimo kako bi povećali razmak između dva
elementa. Padding je s druge strane prostor koji se nalazi između ruba i sadržaja kutije. Kod ovih tri
svojstva moguće je dodatno personalizirati izbor oblikovanja, tako da uz svojstvo dodamo: left
(lijevo), right (desno), top (gore), bottom (dolje) i vrijednost u pikselima, a ako ostavimo svojstva
kakva jesu ta vrijednost će se primijeniti na sve strane box elementa.

Slika 11. Svojstva box elemenata

22
5. ZAKLJUČAK

Tehnologija neprestano napreduje, a zajedno s pozitivnim promjenama dolaze i negativne koje

se trebaju nadvladati. Do nedavno je prilagodba sadržaja internetskih stranica velikom broju različitih
zaslona bila mukotrpan posao koji je uključivao razne dodatne programske jezike (ponajviše
JavaScript) ili kreiranje zasebnih stranica za različite uređaje.

Cilj ovog rada bio je upoznati se sa osnovama web-dizajna i dobiti uvid u način rada i
korištenje ovih tehnologija. Iako postoji mnogo besplatnih alata i stranica koje nude već unaprijed
responzivne kosture ili teme za internetske stranice u ovom radu smo dokazali da je moguće napraviti
funkcionalnu web-stranicu korištenjem samo HTML5 i CSS3 tehnologija.

23
6. Literatura

1. Benić I., Web početnik - Nauči HTML, CSS i konverziju dizajna u HTML, Leanpub, Zagreb,
2014.
2. Duckett J. HTML & CSS - Design and Build Websites, John Wiley & Sons, Inc., Indianapolis,
2011.
3. Petric D., Naučite HTML i oblikujte sami efektne World Wide Web stranice, Znak, Zagreb,
1995
4. Prelec A., Završni rad - Izrada responzivne internetske stranice upotrebom HTML5 i CSS3
tehnologija, Sveučilište u Zagrebu – Grafički fakultet, Zagreb, 2015
5. https://www.mojwebdizajn.net/skriptni-jezici/html-za-pocetnike/html-kodovi.aspx - HTML
za početnike, Moj web dizajn, 2012
6. https://en.wikipedia.org/wiki/HTML – HTML, 18.7.2015.
7. https://www.w3schools.com/ - CSS Introduction, HTML Introduction

24