Osnovna Struktura HTML-dokumenta - HTML, Head, Title I Body

WEB DIZAJN - OSNOVE
RADA S HTML-OM
I DIO
Ponovimo...
• Prvi tag u HTML dokumentu je <html> koji govori internet
pregledniku da slijedi početak HTML dokumenta. Zadnji tag u
našem dokumentu je </html> i on ukazuje internet pregledniku da
je to kraj HTML dokumenta.
• Tekst između početnog taga <head> i završnog taga </head> je
informacija o zaglavlju dokumenta. Tekst između taga <title> i
</title> je naslov dokumenta. Tekst između ova dva taga će se
prikazati u zaglavlju preglednika.
Ako linija teksta dođe do kraja prozora internet preglednika, sljedeća riječ
automatski počinje u novoj liniji. No, ako želimo sami odrediti gdje će linija
biti prekinuta potrebno je koristiti break line, tag <br />. Prelazak u novi
odjeljak postiže se i <p> tagom. On ima isti učinak kao i prijašnji tag s
tom razlikom što će napraviti mali razmak između redova. Na kraju
odjeljka možemo staviti i njegov završni tag, ali većina browsera ga ne
zahtijeva, tako da ga slobodno možemo izostaviti.
Razlika između break line i paragrafa je u tome što break line ne korist
specijano formatiranje koje možemo dodati na početak ili kraj paragrafa,
poput:
 dodatnog vertikalnog prostora ili
 pomaka prve linije desno.
Još neki tagovi i atributi
Tekst se po defaultu poravnava uz lijevu marginu. Centriranje
paragrafa ili poravnanje paragrafa uz desnu marginu se postiže align
atributom.
Align atribut može imati tri vrijednosti:
Trebamo li dodati komentar na web
• lijevo poravnanje - <p align=“left“> stranicu koristimo oznaku komentara <!
—za početak komentara i --> za kraj
• desno poravnanje - <p align=“right“> komentara.
• centrirano - <p align=“center“>
Horizontalna linija označeva se tagom <hr />. Ovaj tag uključuje prikaz
horizontalnih linija na stranici. Internet preglednik stvara liniju na osnovu
<hr /> elementa, što je brže nego da se umeće grafika ili stvara linija s
obrubom. Horizontalna linija je dobra opcija ukoliko se želi:
• razdijeliti stranica po logičkim djelovima ili
• odvojiti zaglavlje i podnožje od ostatka stranice.
Četiri različita atributa kontrolišu izgled svake horizontalne linije:

 width: Specificira širinu linije u pikselima ili postocima
 height: Specificira visinu linije u pikselima (default vrijednost je 1 piksel)
 align: Specificira horizontalno poravnanje linije (lijevo, centrirano ili desno)
 nonshade: definiše solidnu liniju bez sjene.
Atributi omogućuju raznovrsnost u načinima na koji element opisuje
sadržaj. Atributi omogućuju da se elementi koriste drukčije ovisno o
okolnostima. Neki od atributa uključuju:
• Promjenu veličine slova u vrijednostima od 1 do 7 – atribut „font size“
(po defaultu veličina je 3);
• Promjena boje teksta – atribut „font color“ (po defaultu boja je crna). Za
ovaj atribut važi isto pravilo kao i kod definiranja boja <body> tagom.
Dakle, ako želimo npr. Promijeniti boju u crvenu pišemo: <font color
="#ff0000"> … </font>. Ovo nije jedini način, možemo i samo napisati
red (eng. crvena).
• Promjena načina ispisivanja teksta (podebljano, podvučeno, italic).
Paragrafi se poravnavaju sa lijevom stranom, ako drugačije niste definisali,
a možete koristiti align atribut kako bi poravnali tekst po želji.
<html>
<head>
<title>Poravnanje paragrafa</title>
</head>
<body>
<p align="center">Ovo je centrirani odlomak.</p>
<p align="right">Ovo je odlomak poravnat u desno.</p>
<p align="justify">Ovo je odlomak poravnat s lijeve i desne
strane.</p>
</body>
</html>
Naslovi i podnaslovi u HTML-u
Kada su nam potrebni naslovi u
tekstu koristimo oznake elementa
naslova.
Oznake elemenata naslova su
<h1>... <h6>, gdje <h1> koristimo
za ispis najvećim a <h6> za ispis
najmanjim slovima.
Oblikovanje teksta: Text formatting
Svi elementi za oblikovanje teksta su
linijskog tipa i zato ne uzrokuju prelazak
u novi red. Elemente <strong> i <em>
koristimo kada želimo naglasiti da je
tekst važan.
Svi preglednici prikazuju sadržaj
elementa <strong> podebljano kao i
sadržaj elementa <b>, a sadržaj
elementa <em> nakošeno kao i
elementa <i>.
HTML liste: Lists
Liste služe organizaciji sličnih elemenata. Omogućavaju korisniku lakši pregled
informacija. U liste možemo staviti od teksta do linkova. Razlikujemo tri vrste listi:
numerička, simbolička i lista definicija.
Primjer numeričke liste: Primjer simboličke liste:

<ol> <ul>
<li> linijska </li> <li> linijska </li>
<li> razgranata </li> <li> razgranata </li>
<li> ciklična </li> <li> ciklična </li>
</ol> </ul>
Lista definicija:
Elementi liste definicija:
<dl>
<dt> linijska </dt>
<dd> svi elementi izvršavaju samo jednom ...
Lista definicija (Definition list):
</dd> <dl> ... </dl>
<dt> razgranata </dt>
<dd>pojavljuje se kod algoritma koji ima blok
odlučivanja</dd>
Nazivi definicije (Definition
<dt> ciklična </dt> terms): <dt> ... </dt>
<dd> koristimo je kada je potrebno neku
naredbu,ili dio programa,ponoviti više
puta</dd>
Definicija definicije (Definition
</dl> definition): <dd> ... </dd>
<html>
Dva različita atributa <head>
kontrolišu prikaz liste <title>Liste</title>
</head>
s brojevima. Atribut <body>
start definiše početni <h1>Algoritamske strukture</h1>
broj u listi, a atribut <ol start="3" type="i">
type definiše stil liste s <li>Linijska</li>
<li>Razgranata</li>
brojevima.
<li>Ciklična</li>
</ol>
Ako niste definisali </body>
početni broj u listi i stil </html>
liste numerička lista
će početi od broja 1 i
koristit će se arapski
brojevi.
Isti atribut type možemo koristiti i za simboličke liste, kako bi odredili vrstu oznake
koju želimo da lista koristi.
• disc: ispunjeni kružići;

• square: ispunjeni kvdatići;
• circle: šuplji kružići.
Probati na prethodnom primjeru 

ZADACI ZA VJEŽBU
1. Otvorite tekstualni editor i napišite osnovne elemente internet stranice. Vaša početna internet stranica mora
imati zaglavlje, naslov i tijelo. Naslov stranice i tekst unutar tijela dokumenta stavite po vašem izboru.
Spremite dokument pod nazivom zad1.htm. Napravite pregled dokumenta u nekom od internet
preglednika.
2. Otvorite dokument zad1.htm i u tijelo dokumenta napišite tekst u dva odlomka. Napravite odvajanje
između odlomka sa horizontalnom linijom. Spremite dokument pod nazivom zad2.htm. Napravite pregled
dokumenta u nekom od internet preglednika.
3. Otvorite dokument zad2.htm i u tijelu dokumenta iznad prvog odlomka ubacite naslov i podnaslov. Iznad
drugog odlomka obrišite horizontalnu liniju i ubacite jos jedan podnalov. Spremite dokument pod nazivom
zad3.htm. Napravite pregled dokumenta u nekom od internet preglednika.
4. Otvorite dokument zad3.htm, te ispod drugog odlomka napišite svoje dnevne obaveze. Radite listu s
brojevima. Ispod liste stavite horizontalnu liniju. Ispod horizontalne linije napravite novu listu s oznakama
u koju ćete staviti sve stvari koje morate ponijeti sa sobom na čas računarstva i programiranja. Spremite
dokument pod nazivom zad4.htm. Napravite pregled dokumenta u nekom od internet preglednika.
Osnovna struktura
HTML-dokumenta
II DIO
Umetanje slike
Ranije smo govorili o umetanju slike pomoću taga <img />. Ovaj tag koristi “src”
atribut da odredi lokaciju slike koju želimo na svojoj stranici (src je skraćenica
engleske riječi source). Tagimg <img /> je poruka internet pregledniku da se radi o
slici, a src atribut mu govori detalje gdje se ta slika nalazi. Također imamo i druge
attribute kojima možemo definisati kako će se slika prikazati na stranici (height i
width). Atribut alt obavezno treba umetnuti. Služi dodjeljivanju vrijednosti
zamjenskog teksta za sliku ako slika ne može biti prikazana.
Pravila XML sintakse određuju da vrijednosti atributa moraju biti pod navodnim
znacima. Atribute i njihove vrijednosti možemo pisati bilo kojim redom unutar
početnog taga ili unutar jednog taga.
Slike se mogu kreirati i spremiti u mnogo različitih formata, ali samo nekoliko njih
je stvarno prikladno za slike koje namjeravamo staviti na Internet i koje su
kompatibilne sa svim operativnim sistemima i računarima:
• Graphics Interchange Format (GIF) – gif slike manje su od slika ostalih

formata, podržavaju samo do 256 boja i pogodne su za jednostavnije slike;
• Joint Photographic Experts Group (JPEG) – jpeg slike podržavaju 24 bitne

boje i kompleksne slike, poput fotografija;
• Portable Network Graphics (PNG) – je format razvijen da donese najbolje iz

gif- i jpeg-a.
• PNG ima iste kompresijske mogućnosti kao i gif, ali podržava 24 bitne i 32
bitne boje.
Postupak umetanja slike:
1. Pronađi sliku na internetu – desni klik Kopiraj URL slike

2. Zalijepi URL na mjesto stranice gdje želiš da se slika pojavi
3. npr. https://blogs.glowscotland.org.uk/glowblogs/public/ideas/uploads/sites/
9389/2021/04/06193542/noun_HTML_2125668-dk-blue.png
4. Da bi se slika vidjela na stranici potrebno je prije i na kraju URL-a dodati
<img src=https://blogs.glowscotland.org.uk/glowblogs/public/ideas/uploads/sites/
9389/2021/04/06193542/noun_HTML_2125668-dk-blue.png />
5. Ukoliko još želite dodati attribute onda to možemo uraditi na sljedeći način:
<img src=https://blogs.glowscotland.org.uk/glowblogs/public/ideas/uploads/sites/
9389/2021/04/06193542/noun_HTML_2125668-dk-blue.png width="640" height="640" />
Svaka slika ima okvir debljine 1 koji se najčešće ne vidi u web pregledniku sve
dok tu sliku ne pretvorimo u link. Možemo koristiti atribut borders s <img/>
elementom slike za bolju kontrolu nad okvirom koji internet preglednik prikazuje
oko slike.
Primjer: <img src=https://blogs.glowscotland.org.uk/glowblogs/public/ideas/uploads/sites/

9389/2021/04/06193542/noun_HTML_2125668-dk-blue.png width="640" height="640"
border=„3“/>
Atribut align se koristi za poravnanje slike u odnosu na tekst:
• top: tekst poravnat oko slike u ravni s vrhom slike;

• middle: tekst poravavat sa sredinom slike;
• bottom: tekst poravnavat s dnom slke;
• left: slika ostaje na lijevoj strani, a tekst se prebacuje na desnu stranu;
• right: slika ostaje na desnoj strani a tekst se prebacuje lijevu stranu
Većina internet preglednika ostavlja oko 1 piksel razmaka između slike i teksta.
Veći razmak ostvarit ćemo pomoću: vspace (vertical space) - razmak za vrh i dno
slike i hspace (horizonal space): razmak za lijevu i desnu stranu slike
<html>
<head>
<title>Razmak slike u odnosu na tekst</title>
</head>
<body>
<h1>Logo HTML-a</h1>
<img
src=https://blogs.glowscotland.org.uk/glowblogs/public/i
deas/uploads/sites/9389/2021/04/06193542/
noun_HTML_2125668-dk-blue.png width="150"
height="70" alt="logo" border="3" align="middle"
hspace="20" vspace="25" />
Razmak slike u odnosu na tekst
</body>
</html>
Umetanje video zapisa
Umetanje video zapisa sa YouTube-a:
1. Pronađi videozapis koji želiš umetnuti na mrežnu stranicu
2. Pokreni videozapis. Ispod njega nalazi se opcija Podijeli. Nakon otvaranja
opcija za dijeljenje, klikni na opciju Ugradi.
3. Kopiraj kod za ugradnju i zalijepi ga u svoju stranicu.
Pogledajte HTML dokument „Tagovi i atributi” (Google classroom)
– uočavate li neki drugačiji način prikaza nekog dijela teksta o
kojem nije bilo riječi u lekciji?
DOMAĆA ZADAĆA 
Na sljedećem času svaki učenik će imati zadatak da napravi vlastitu HTML „stranicu” koristeći ono
što je naučio tokom prethodnih časova na temu "Značaj web dizajna". Vježbajte, jer će sljedeći čas
neki od vas za ocjenu prezentovati svoju prvu „stranicu”. Sretno ...
Osnovna struktura
HTML-dokumenta
III DIO
HTML poveznice i sidra: Links and
Anchors
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.
• Element poveznice (linka) je <a> ... </a>. Kako bi načinili poveznicu na drugi
dokument, koristimo svojstvo href, a da bi načinili sidro s kojom se možemo
povezati unutar dokumenta, koristimo svojstvo id. Kako bi odredili u kojem
prozoru ili okviru (engl. frame) će se otvoriti prikaz web stranice koristimo
svojstvo target.
Primjer korištenja svojstva href:
<a href=„http://smsfojnica.com/”>
Link na stranicu škole SMSFojnica.com
</a>
Razlikujemo sljedeće linkove:
1. One koji povezuju trenutni html dokument s drugim stranicama unutar istog web
sjedišta i njima je dovoljno dodijeliti relativnu adresu.
2. One koji povezuju trenutnu web stranicu s drugim web sjedištima i njima
moramo dodijeliti punu adresu domene.
3. One koji omogućavaju povezivanje različitih dijelova unutar iste web stranice i
njima dodjeljujemo vrijednost sidra korištenjem atributa id.
Dakle, kada uključite link na stranici, omogućavate posjetitelju da prelazi sa
jedne na drugu stranicu unutar vaše internet stranice, na vanjske internet
stranice (izvan vaše Internet stranice) ili otvaranje multimedijskog sadržaja
(dokument, muzika, slika, film, animacija).
Svaki Internet resurs (bila to stranica ili slika) ima svoj URL. Ako je samo jedan
znak u URL-u pogrešan, to može rezultirati neispravnim linkom koji vodi na
stranicu pogreške (HTTP error 404 File or directory not found).
Ako vam URL ne radi, pokušajte sljedeće: provjerite velika i mala slova (neki web
serveri su case sensitive, što znači da razlikuju velika i mala slova), provjerite
ekstenziju (ako URL vašeg linka koristi bios.htm, a pravo ime datoteke je
bios.html, link neće raditi), provjerite ime datoteke, koristite copy-paste
(izbjegavajte ručni unos tj. tipkanje URL-a ako ga možete direktno kopirati).
Slika se također može koristiti kao link.
Primjer korištenja slike kao poveznice:
<a href=„http://smsfojnica.com/”>
<img src=„https://www.google.hr/url?sa=i&url=https%3A%2F
%2Fwww.facebook.com%2Fsmszijahdizdarevic%2F&psig=AOvVaw2D9-
gaYitDpC5qYUpvBhJF&ust=1695025919669000&source=images&cd=vfe&o
pi=89978449&ved=0CBAQjRxqFwoTCIjpqOKdsYEDFQAAAAAdAAAAABAE
” />
</a>
Klik mišem na sliku odvodi nas na naslovnicu stranice smsfojnica.com

URL radi slično kao vaša poštanska adresa. Svaka komponenta pomaže u
definisanju lokacije Internet stranice ili resursa:
• Protokol http:// - Specificira protokol pomoću kojeg Internet preglednik nalazi

datoteku Internet stranice.
• Domena www.smsfojnica.com - Pokazuje na Internet stranicu gdje se nalazi

datoteka koju želimo pročitati.
• Put www.smsfojnica.com/folder: Imenuje slijed foldera kroz koje morate

navigirati kako bi došli do željene datoteke.
• Ime datoteke www.smsfojnica.com/folder/index.html: definiše ime datoteke

kojoj internet preglednik treba pristupiti u stablu direktorija.
Sidro na dio dokumenta možemo kreirati dodjeljujući vrijednost atributu id unutar
poveznice (bez navođenja svojstva href). Sidro u dokumentu je nevidljivo za
korisnika.
Primjer dodjeljivanja sidra (svojstva id):
Kada se želimo povezati s postojećim sidrima, svojstvu href dodjeljujemo

vrijednost imena sidra (vrijednosti atributa id) ispred kojeg navodimo znak
hashtag (#).
<html>
<head>
Veze se mogu povezati na bilo kakvu <title>HTML resursi</title>
datoteku, poput: </head>
<body>
• <h1>HTML resursi</h1>
dokumenati tekstualnih procesora;
<p><a href=”arhiva.zip”>Arhiva
• proračunske tablice; podataka</a></p>
• PDF dokumenti; <p><a href=”dokument.pdf”>PDF
• kompresovane (ZIP) datoteke; dokument</a></p>
• multimedija. <p><a href=”dokument.doc”>DOC
dokument</a></p>
</body>
Ako želimo omogućiti korisnicima da </html>
preuzmu PDF, DOC, ZIP datoteku to
im možemo omogućiti na sljedeći
način:
Atribut target određuje prozor ili okvir (engl. frame) gdje će preglednik otvoriti
stranicu. Ako se ovom atributu dodijeli vrijednost „_blank” stranica će se otvoriti u
novoj stranici preglednika.
<a href=„http://smsfojnica.com/” target=„_blank”>

SMSFojnica.com
</a>
• Ako atributu target dodijelimo vrijednost „_self” stranica će se otvoriti u

trenutnom prostoru preglednika;
• Ako atributu target dodijelimo vrijednost „_parent" otvorit će stranicu u prozoru
nadređenom okviru u kojem se nalazi poveznica;
• Ako atributu target dodijelimo vrijednost „_top” otvorit će stranicu u trenutnom
prozoru zanemarujući okvire.
ZADATAK
1. Otvorite dokument zad3.htm, te ispod liste napravite novi odlomak i upišite tekst.
Unutar odlomka iskoristite barem dva puta prekid linije za pojedini dio teksta. Napravite
unutar odlomka vezu na internet stranicu po vašem izboru. Veza koja će gledati na
internet stranicu mora otvarati novi prozor u internet pregledniku. Spremite dokument
pod nazivom zad4.htm. Napravite pregled dokumenta u nekom od internet
preglednika.
2. Otvorite dokument zad4.htm i umetnite dvije slike po izboru u prvi i drugi odlomak.
Prva slika mora imati lokaciju na lokalnom računalu, dok druga slika mora biti pozvana
sa interneta. Odredite dodatne atribute, te odredite veličinu slike, opis slike (alternativni
tekst), okvir slike po izboru. Tekst morate proizvoljno urediti tako da se nalazi ispod,
desno ili lijevo od slike. Spremite dokument pod nazivom zad5.htm. Napravite pregled
dokumenta u nekom od internet preglednika.
Osnovna struktura
HTML-dokumenta
IV DIO
HTML tablice
Tablice se koriste za prikazivanje podataka u redovima i kolonama. Tablice
se više ne koriste za izradu strukture web stranice jer je tu zadaću
preuzeo CSS (o kojem ćemo detaljnije govoriti na nekim od narednih
časova).
HTML tablica je upisana između početne i završne oznake <table>
elementa. Tablica može imati željeni broj redova a svaki red upisujemo
između početne i završne oznake <tr> elementa.
Svaki red ima jednak broj ćelija koje ograničavamo oznakom elementa
<td>...</td>.
Označavanje početka i kraja tablice: <table> ... </table>
Početak i kraj dijela gdje se nalazi zaglavlje kolona: <thead> ...
</thead>
Početak i kraj zaglavlja kolone: <th> ... </th>
Početak i kraj tijela stranice unutar kojeg se nalazi podatci:
<tbody> ... </tbody>
Početak i kraj reda tablice: <tr> ... </tr>
Početak i kraj ćelije s podatcima: <td> ... </td>
<html>
<head>
<title> Primjer tabele u HTML-u </title> Definišemo kolone u tabeli
</head>
<body>
<h1> Predmet i profesor </h1>
<table border="5">
<thead>
<tr> Unosimo tekst koji će se ispisati u prvom
<th> Predmet </th>
<th> Profesor </th> redu po definisanim kolonama.
</tr>
</thead> Unosimo tekst koji će se ispisati u drugom
<tbody> redu po definisanim kolonama.
<tr>
<td> Računarstvo i programiranje </td>
<td> Alma Bešić </td>
</tr>
<tr>
<td>Engleski jezik</td>
<td> Emir Borić </td>
</tr>
</table>
</body>
</html>
Internet preglednik će tablicu koja nema definisan atribut border (za graničnu liniju tabele)
prikazati sa linijom debljine 1px. Ako želimo obrub tablice promijeniti moramo dodati atribut
border i definisati njegovu debljinu.
Za HTML tablicu - granična linija se odnosi na vanjsku liniju i linije između pojedinih ćelija.
Da bi uključili ili isključili granične linije tabele u HTML dokument dodajemo atribut border u
početni tag <table>.
Vrijednost border atributa definiše debljinu granične linije u pikselima, npr. border="5",
postavlja liniju debljine 5 px, a boder="0" isključuje graničnu liniju. Također, ukoliko ne
definišete graničnu liniju unutar navedenog taga <table> preglednik će podrazumijevati da
granične linije nema odnosno da je border=„0”.
Širinu i visinu ćelije internet preglednik određuje sam na osnovu onoga što se u njima
nalazi. Da bi sami odredili visinu i širinu moramo koristiti atribute width i height. Ako ćelija
sadrži puno teksta, ona se proširuje koliko može do prvog prekida linije ili do kraja teksta i
zbog toga tabela može izgledati vrlo nepregledno – PAZITI NA TO!
Za prazan prostor između ćelija možemo koristiti atribute "cellpadding" i "cellspacing". Ovi
atributi koriste različite tehnike kako bi stavili prostor između ćelija:
• Cellspacing dodaje prostor između ćelija;

• Cellpadding dodaje prostor unutar ćelije.
Vrijednost oba navedena atributa definiše se u pikselima, a kao i drugi atributi dodaju se u
početni tag <table>.
Primjer:
<table border="2" width="580" cellpading="5" cellspacing="5">
Poravnavanje tablice u prozoru Internet preglednika možemo kontrolisati pomoću atributa

za horizontalno poravnavanje align i vertikalno poravavanje valign. Moguće vrijednosti
align atribut su: left, right, center, justify i char, a valign atributa: top, bottom, middle i
baseline. Atribut bgcolor određuje boju pozadine u tabeli.
Tipografija na web stranicama
Tipografija na web stranicama često je zanemaren vizuelni element iako
ona, kao i boja, igra ključnu ulogu u uspješnom prenosu ideja i kreativnosti.
U svijetu web dizajna traži se dinamičnost kada je u pitanju tipografija, kako
bi se postigao svjetliji i uspješniji dizajn, ali i bolja čitljivost.
Nasumično odabran font bez prethodne analize njegove uloge rezultira
statičnim objektom koji korisnicima otežava čitanje, posebno kada su u
pitanju dugi tekstovi.
Na web stranicama razlikujemo 2 glavne vrste fontova: serifni (ukrasni) i
neserifni.
Serifni fontovi posjeduju male ukrasne poteze, zadebljanja, na rubovima slovnih znakova.
Zbog te karakteristike najčešće se upotrebljavaju za naslove (odnosno povećane dijelove
teksta), jer kod manjih veličina fonta serifi (ukrasi) smanjuju čitljivost zbog oduzimanja
bijelog prostora između slovnih znakova.
Neserifni fontovi su oni koji ne posjeduju serife (rubne

ukrase), što povećava bjelinu između slovnih znakova
pri čemu se povećava čitljivost. Ovi fontovi su idealni za
ispisivanje sadržaja stranice te stoga i najčešći na webu.
ZADATAK:
Za domaću zadaću ste trebali napraviti svoju web stranicu na temu „Značaj web dizajna” koristeći ono što
ste naučili na prethodnim časovima. U postojećoj stranici vaš današnji zadatak je da ubacite (na
odgovarajuće mjesto po svom izboru) link na stranicu https://web-dizajn.ba/ pri čemu ćete kao poveznicu
koristiti neku odgovarajuću sliku. Nakon toga, u postojeću stranicu ćete umetnuti poglavlje pod nazivom
„Tipografija” u okviru kojeg ćete dodati sljedeći tekst:
„ Tipografija na web stranicama često je zanemaren vizuelni element iako ona, kao i boja, igra ključnu
ulogu u uspješnom prenosu ideja i kreativnosti. U svijetu web dizajna traži se dinamičnost kada je u pitanju
tipografija, kako bi se postigao svjetliji i uspješniji dizajn, ali i bolja čitljivost. Nasumično odabran font bez
prethodne analize njegove uloge rezultira statičnim objektom koji korisnicima otežava čitanje, posebno kada
su u pitanju dugi tekstovi. Ekrani brzo zamaraju oči zbog svog zračenja i kontrasta, a ako dodate previše
teksta i neadekvatan font, koncentracija korisnika će se brzo smanjiti. Zato je ključno odabrati font koji će
doprinijeti boljoj čitljivosti i cjelokupnom dojmu dizajna web stranice. Tekstualni sadržaji obuhvaćaju
najčešće 80% sadržaja web stranice, a ovi sadržaji se prikazani u sljedećoj tabeli:”
Nakon toga ćete umetnuti sljedeću tabelu:

Najčešći sadržaji na web Opis
stranici tekstualnog tipa
Logotip Prvi element čiji sadržaj može biti tekstualnog tipa je logotip. Logotip ne mora
nužno sadržavati tekst, ali u većini slučajeva ga sadrži. On je svojevrsni orijentir u
izgradnji dizajna stranice kao i odabira fonta koji će se protezati kroz cijelu
stranicu
Navigacija (izbornik) Font koji se koristi u navigaciji treba da bude čitljiv i funkcionalan, jer je
navigacija sistem kojim se korisnik kreće po web stranici. Najčešće se koriste
neserifni fontovi.
Naslovi Naslovi su tekstualni elementi koji se ističu u glavnom sadržaju. Oni su veći od
ostatka teksta na stranici, a njihov font je mnogo jednostavniji. Za naslove, serifni
fontovi ne smanjuju čitljivost.
Podnaslovi Podnaslovi su tekstualna objašnjenja (dodaci) glavnog naslova. Oni se štampaju u
novom redu, manji su od glavnog naslova i obično im se dodeljuje isti tip fonta
kao i glavni naslov.
Sadržaj Sadržaj je element na stranici koji zauzima najviše prostora, a ujedno sadrži i
najviše teksta, pa mora biti čitko ispisan. Font nikada ne smije biti premali, boja
treba biti umirujuće nijanse, kao i pozadina na kojoj se nalazi, kako bi se povećala
čitljivost.
Osnovna struktura
HTML-dokumenta
V DIO
Meta podaci
Pojam meta podaci odnosi se na podatke o podacima. To su podaci koji pružaju
kontekst, opis i karakteristike drugih podataka, omogućavajući bolje razumijevanje,
organizaciju i upravljanje tim podacima Na internetu su to podaci koji opisuju internet
stranicu. Svaki dio meta podataka u HTML-u definiše se <meta />elementom i pomoću
„name“ i „contents“ atributa.
U kontekstu digitalnih fotografija, meta podaci mogu uključivati informacije o datumu i
vremenu snimanja, lokaciji snimanja, postavkama fotoaparata (npr. ekspozicija, fokus),
autoru fotografije, komentarima i drugim relevantnim informacijama. Meta podaci u
HTML dokumentima mogu sadržavati opise stranica, ključne riječi, karakteristike prikaza
(viewport), autorstvo i druge informacije koje su korisne za indeksiranje i pretraživanje
web stranica.
Evo kako bi izgledao primjer koda sa uključenim meta podacima u HTML
dokumentu:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Ovo je web
stranica SMŠ Zijah Dizdarević Fojnica">
<meta name="keywords" content=„obrazovanje,
smjerovi, HTML">
<meta name="author" content=„Alma Bešić">
<title>Stranica SMŠ Zijah Dizdarević
Fojnica</title>
</head>
<body>
<p> Ovdje su meta podaci koje internet preglednik
ne prikazuje korisniku na ekranu </p>
</body>
</html>
Kreirajte vlastitu stranicu...
Prije nego što počnete, razmislite o sadržaju vaše web stranice.
Suština svake web stranice je njen sadržaj. Važno je da stranica bude
sadržajna, te da informacije dostavlja direktno, lako i efikasno.
IPAK, sve te stvari nisu bitne ako stranica nema koristan sadržaj koji
će korisnicima dati razlog da ga posjete.
Obnavljajte sadržaj stranice kako ne bi postao statičan i dosadan, te
kako ne biste izgubili posjetitelje.
Neka dizajn i sadržaj stranice određuju kako će izgledati kod stranice,
grafika i interakcija. Dakle prvo što vam treba su ideja za stranicu i vizija
kako bi ona trebala izgledati, te koja je njena stvarna svrha – tek tada
počinjete sa pisanjem koda. Samo takva stranica će raditi svoj posao bez
zbunjivanja posjetitelja.
Pokušajte dizajnirati i izraditi svoju stranicu s minimalnim ukrasima i

jednostavnim izgledom. To znači da ne trebate pretrpavati stranice
nepotrebnom grafikom i uvjerite se da su linkovi koje stavite na svoju
stranicu vrijedni toga jer svaki nepotreban grafički dodatak na stranici
odvlači posjetitelje od sadržaja.
Pripazite da sve tagove koje ste otvorili na kraju i zatvorite. Neki
preglednici mogu kompenzirati greške u tagovima, što će vas ostaviti s
lažnim osjećajem sigurnosti.
• Pratite pozicije tagova tokom pisanja ili editovanja HTML-a.

• Koristite ispitivač tačnosti sintakse da bi provjerili svoj posao tokom
procesa testiranja.
• Nabavite i koristite što je više moguće različitih preglednika prilikom
testiranja stranice.
• Uvijek slijedite sintaksu HTML-a i pravila za raspored stranice.
• Pripazite na to da vaša stranica dobro radi u svim preglednicima.
Korisni alati za pisanje HTML koda
HTML dokumenti mogu se napisati koristeći jednostavni tekstualni editor

poput notepada – što smo i radili tokom nastave, ali danas postoji puno
programa za pisanje HTML-a.
Editori se dijele na: pomoćne editore koji imaju manje mogućnosti i
WYSIWYG (what you se is what you get) editore koji su puno napredniji.
Pomoćni editori nam pomažu u pisanju koda jer su tagovi u drugoj boji u
odnosu na ostale dijelove koda, a posjeduju i spell checker.
Neki od pomoćnih editora su:
Visual Studio Code (open-source editor, kompatibilan za Windows, Mac i Linux).

Jednostavan je za korištenje, a u njemu možete kreirati HTML, CSS, JavaScript,
Python i mnoge druge projekte…
Atom se smatra jednim od kvalitetnijih HTML editora i dosta je popularan. Jedan

od razloga njegove popularnosti je postojanje open-source paketa koji su vođeni
od strane GitHub zajednice. GitHub zajednica predstavlja zajednicu programera,
razvojnih timova i ostalih korisnika koji koriste platformu GitHub za deljenje,
saradnju, učenje i doprinošenje različitim projektima i kodovima.
Sublime Editor je sličan Notepad-u, ali su njegov dizajn i performanse u boljem

izdanju. Sublime je besplatan kao i prethodni editori, iako postoji i premium verzija
koja se plaća.
Validacija HTML koda
Validatori služe da bi provjerili drži li se kod pravila i pri tome označavaju sva
odstupanja koje u njemu pronađu. Upotreba DTD-a (Document Type Definition)
omogućava validaciju HTML i XHTML dokumenata. Validacija se odnosi na
provjeru da li je dokument u skladu sa definisanim pravilima i strukturom.
Dokumenti koji se poklapaju sa DTD-om smatraju se konformnim (validnim).
Što se tiče dostupnosti DTD-ova, oni su obično javno dostupni i mogu se pronaći
na različitim veb lokacijama i resursima posvećenim HTML, XHTML ili XML
standardima. Tako na zvaničnoj W3C web stranici možete pronaći specifikacije i
DTD-ove za različite verzije HTML-a i XHTML-a (https://www.w3.org/).
DTD igra ključnu ulogu u obezbjeđivanju konzistentnosti, interoperabilnosti i
konformnosti dokumenata koji se kreiraju u HTML-u i XHTML-u, a omogućava i
razvoj alata koji olakšavaju rad sa tim jezicima. Međutim, treba napomenuti da su
standardi (kao što je HTML5) prešli na druge mehanizme za definisanje strukture
dokumenata, kao što su "HTML living standard" i „XML-based sheme”.
Provjeru vršite na sljedeći način:
• Kreirate HTML dokument u editoru;

• Kopirate taj kod na stranicu za validaciju HTML-a;
• Ako validator pronađe neke probleme, ispravite ih, te dokument ponovno vratite
na validaciju
Pokretanje stranice na Internet mreži
Da bi vaša web stranica bila javno dostupna na Internet mreži trebate poduzeti
sljedeće korake:
1. Izbor i registracija domena - Prvi korak je odabir i registracija internet domena. Domen
je adresa koju ljudi koriste za pristupanje vašoj web stranici (npr. „mojastranica.com"). Potrebno
je izabrati slobodan, relevantan i jedinstven domen, a zatim ga registrovati kod registrovanog
registrara domena.
2. Odabir i angažovanje hosting provajdera - Trebate izabrati hosting provajdera koji

će obezbjediti prostor za vašu web stranicu na internetu. Hosting provajder čuva fajlove i resurse
vaše web stranice i omogućava pristup istima putem interneta. Možete izabrati dijeljeni hosting,
VPS (Virtual Private Server) ili dedikovani server u zavisnosti od vaših potreba.
3. Razvoj web stranice - Kreirajte i razvijte svoju web stranicu koristeći odgovarajuće tehnologije
kao što su HTML, CSS, JavaScript, i druge tehnologije po potrebi. Dizajnirajte strukturu, dodajte
sadržaj, slike, forme i druge elemente kako biste je učinili funkcionalnom i privlačnom .
4. Postavljanje web stranice na server -. Postavite fajlove vaše web stranice na hosting server
korištenjem FTP (File Transfer Protocol) ili drugih alata za prenos fajlova koje pruža vaš hosting
provajder.
5. Konfiguracija domaćina (DNS) - Konfigurišite DNS (Domain Name System) postavke na

registrarskom portalu tako da domen usmjerava na IP adresu vašeg hosting servera. To omogućava
da se domen poveže sa vašim hosting serverom.
6. Testiranje funkcionalnosti i performansi - Provjerite da li sve funkcioniše ispravno na web

stranici, uključujući navigaciju, forme, linkove i druge interaktivne elemente. Također, provjerite brzinu
učitavanja i optimizujte stranicu ako je potrebno.
7. Održavanje i ažuriranje - Redovno ažurirajte i održavajte web stranicu dodavanjem novog

sadržaja, rešavanjem eventualnih problema i prateći najnovije tehnološke trendove i standarde.

Osnovna Struktura HTML-dokumenta - HTML, Head, Title I Body

Uploaded by

Copyright:

Available Formats

You might also like

Osnovna Struktura HTML-dokumenta - HTML, Head, Title I Body

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Osnovna Struktura HTML-dokumenta - HTML, Head, Title I Body

Uploaded by

Copyright:

Available Formats

WEB DIZAJN - OSNOVE

Četiri različita atributa kontrolišu izgled svake horizontalne linije:

Primjer numeričke liste: Primjer simboličke liste:

• disc: ispunjeni kružići;

Probati na prethodnom primjeru 

• Graphics Interchange Format (GIF) – gif slike manje su od slika ostalih

• Joint Photographic Experts Group (JPEG) – jpeg slike podržavaju 24 bitne

• Portable Network Graphics (PNG) – je format razvijen da donese najbolje iz

1. Pronađi sliku na internetu – desni klik Kopiraj URL slike

Primjer: <img src=https://blogs.glowscotland.org.uk/glowblogs/public/ideas/uploads/sites/

Atribut align se koristi za poravnanje slike u odnosu na tekst:

• top: tekst poravnat oko slike u ravni s vrhom slike;

Razlikujemo sljedeće linkove:

Primjer korištenja slike kao poveznice:

Klik mišem na sliku odvodi nas na naslovnicu stranice smsfojnica.com

• Protokol http:// - Specificira protokol pomoću kojeg Internet preglednik nalazi

• Domena www.smsfojnica.com - Pokazuje na Internet stranicu gdje se nalazi

• Put www.smsfojnica.com/folder: Imenuje slijed foldera kroz koje morate

• Ime datoteke www.smsfojnica.com/folder/index.html: definiše ime datoteke

Primjer dodjeljivanja sidra (svojstva id):

Kada se želimo povezati s postojećim sidrima, svojstvu href dodjeljujemo

<a href=„http://smsfojnica.com/” target=„_blank”>

• Ako atributu target dodijelimo vrijednost „_self” stranica će se otvoriti u

• Cellspacing dodaje prostor između ćelija;

<table border="2" width="580" cellpading="5" cellspacing="5">

Poravnavanje tablice u prozoru Internet preglednika možemo kontrolisati pomoću atributa

Neserifni fontovi su oni koji ne posjeduju serife (rubne

Nakon toga ćete umetnuti sljedeću tabelu:

Pokušajte dizajnirati i izraditi svoju stranicu s minimalnim ukrasima i

• Pratite pozicije tagova tokom pisanja ili editovanja HTML-a.

HTML dokumenti mogu se napisati koristeći jednostavni tekstualni editor

Visual Studio Code (open-source editor, kompatibilan za Windows, Mac i Linux).

Atom se smatra jednim od kvalitetnijih HTML editora i dosta je popularan. Jedan

Sublime Editor je sličan Notepad-u, ali su njegov dizajn i performanse u boljem

Provjeru vršite na sljedeći način:

• Kreirate HTML dokument u editoru;

2. Odabir i angažovanje hosting provajdera - Trebate izabrati hosting provajdera koji

5. Konfiguracija domaćina (DNS) - Konfigurišite DNS (Domain Name System) postavke na

6. Testiranje funkcionalnosti i performansi - Provjerite da li sve funkcioniše ispravno na web

7. Održavanje i ažuriranje - Redovno ažurirajte i održavajte web stranicu dodavanjem novog

You might also like