UNIVERZITET U SARAJEVU

FAKULTET ZA SAOBRAAJ I KOMUNIKACIJE

SEMINARSKI RAD IZ PREDMETA:

RAUNARSTVO I INFORMATIKA
Tema rada:

HTML i CSS
Predmetni nastavnik:
Asistent:

Doc.dr. Sabina Barakovi

Mr.sc. Ermin Muharemovi

Student:
Broj indeksa:
Usmjerenje:
Godina studija:

Elvedin Sulji
7542
Cestovni saobraaj
I godina

Rezultat rada:

10

Datum:______________

Sadraj
1. Uvod ....................................................................................................................................... 1
2. HTML.................................................................................................................................... 2
2.1 Hajpertekst (Hypertext) ................................................................................................... 2
2.2 Pisanje programa pomou tekst editora Notepad ............................................................ 3
2.3 Dijelovi HTML stranice .................................................................................................. 4
2.4. Sekcija HEAD ................................................................................................................ 5
2.5 Sekcija BODY ................................................................................................................. 5
2.5.1 Komentar.................................................................................................................. 5
2.5.2 Naslov ...................................................................................................................... 5
2.5.3 Odjeljak .................................................................................................................... 6
2.5.4 Paragraf .................................................................................................................... 6
2.5.5 Novi red ................................................................................................................... 6
2.5.6 Razdvojna linija ....................................................................................................... 6
2.6 Liste ................................................................................................................................. 7
2.6.1 Numerisane i nenumerisane liste ............................................................................. 7
2.6.2 Neureene liste ......................................................................................................... 7
2.7 Formatiranje teksta .......................................................................................................... 7
2.8 Boje u HTML-u ............................................................................................................... 8
2.9 Tabele u HTML-u ............................................................................................................ 9
2.9 Linkovi, slike i forme u HTML-u .................................................................................. 10
3. CSS ....................................................................................................................................... 11
3.1 Web fontovi ................................................................................................................... 12
3.2 Eksperimentalna obiljeja CSS3 ................................................................................... 12
3.3 Nedostaci CSS3 ............................................................................................................. 13
4. Zakljuak .............................................................................................................................. 14
5. Literatura .............................................................................................................................. 15

1. Uvod
HTML (Hyper Text Markup Language) je jezik iz porodice jezika za
oznaavanje (markup language) tehnikih dokumenata koji se distribuiraju
1

Internetom. Taj jezik se razvio kao pojednostavljena primjena SGML-a.

Nazvan je HTML, i postao standardni oblik prikaza informacija za WEB. Skup

oznaka (tags) HTML-a prilagoen je strukturi hipertekstualnih dokumenata. Sa
razvojem Interneta dolo je do pojave nove vrste dokumenata hiperteksta. To
je tekst koji sadri veze ili linkove koji vode ka drugim dokumentima,
preciznije, to je skup stranica, u obliku datoteka, meusobno povezanih
linkovima koje su umetnute u stranice.HTML je jednostavan za upotrebu i lako
se ui to je jedan od razloga njegove ope prihvaenosti i popularnosti.
CSS (Cascading Style Sheets) je jezik formatiranja namijenjen da uprosti
proces izrade Web stranica. CSS je takoer postojao u odreenoj formi jo u
ranim zaecima SGML-a 1970-tih godina. CSS je uveden kako bi se definisao
konkretan izgled, dok je HTML ostao u funkciji definisanja strukture i sadraja.

Slika 1. Primjer koda u HTML-u

Standard Generalized Markup Language

2. HTML
2.1 Hajpertekst (Hypertext)
HTML stranice imaju ekstenziju .html ili .htm, a nalaze se u odreenom
direktorijumu servera vezanog na Internet, to ih ini dostupnima na web-u.
Hipertekst je tekst koji sadri veze ili linkove ka drugim dokumentima ili na
samog sebe. Hipertekst je skup stranica, u obliku datoteka koji su meusobno
povezani linkovima umetnutim u stranice. Na ove linkove se moe kliknuti. Za
razliku od obinog teksta, koji se ita linearno (s lijeva na desno, odozgo nanie)
hipertekst se ita pratei hiper-veze u tekstu, dakle, ne nuno na linearni nain.
Postoji vei broj jezika koji omoguavaju da se precizno opie izgled i sadraj
jednog teksta.

Najznaajniji jezici za opis hiperteksta su:

SGML,
HTML (skr. od HyperText Markup Language), pojednostavljena verzija
SGML-a,
XHTML (skr. od Expandable HTML) i
XML (skr. od Extensible Markup Language, "kompromis" izmeu preterane
sloenosti SGML-a i jednostavnosti HTML-a; njegova standardizacija je u toku
Za generisanje HTML stranice potreban je najobiniji tekst editor, na primjer
Notepad.

2.2 Pisanje programa pomou tekst editora Notepad

U okviru Windows OS, na statusnoj liniji treba pronai dugme Start i pritisnuti
ga. Na bijeloj povrini pie se kod za HTML stranicu. Kod snimanja stranice
treba obratiti panju da dokumenat koji u ovom sluaju treba da predstavlja
HTML stranicu mora imati ekstenziju .html ili .htm. Nakon snimanja, klikom na
fajl u kojem se nalazi kod HTML-a, fajl se ne otvara po default-u u Notepadu,
ve u odabranom browseru.
Za pisanje HTML programa mogu se koristiti i specijalni alati , na primjer
Front Page. Stranica se moe vidjeti u okviru Web browsera, Netscape
Navigator-a ili Internet Explorer-a.

Slika 2. Aktiviran prozor tekst editore Notepad

2.3 Dijelovi HTML stranice

Svaki HTML dokument se sastoji iz dva dijela: zaglavlja (engl. head) i tijela
(engl. body). Zaglavlje se odvaja tagovima <head> i </head>, a tijelo
dokumenta tagovima <body> i </body>. Sve to se napie u zaglavlju
dokumenta nee se prikazati u prozoru browsera, ve obino slui za pruanje
nekih informacija o samoj stranici. U okviru zaglavlja se stavljaju tagovi <title>
i </title> izmeu kojih se stavlja naslov stranice, i to nije naslov koji se
pojavljuje u tijelu stranice ve onaj naslov koji se pojavljuje u naslovnoj liniji
odgovarajueg browsera. S druge strane, sve to se napie izmeu tagova
<body> i </body> predstavlja tijelo dokumenta i pojavie se kao sadraj
stranice u prozoru browsera. Primjer "kostura" koda izgleda ovako:
HTML
HEAD zaglavlje i opis
strane
BODY

Tekst i sadraj
<HTML>
<HEAD>
<TITLE> Naslov u browseru </TITLE>
</HEAD>

<BODY

Tekst koji se prikazuje na Web stranici

</BODY>
</HTML>

2.4. Sekcija HEAD

Naziv dokumenta se pie unutar taga <TITLE>. Naziv HTML dokumenta se
prikazuje u vrhu ekrana (u naslovnoj liniji odgovarajueg programa za pregled
HTML dokumenta). Naziv (TITLE) se uvodi u HEAD sekciji i moe da se
razlikuje od imena datoteke u kojoj se nalazi dokument.
META informacije o dokumentu piu se unutar taga <META>.
Tag META posjeduje atribute kojima mogu da se definiu meta-informacije
(tip dokumenta, kodni raspored, jezik, kljune rijei,..) znaajne za sam
dokument. Te meta informacije se ne definiu od strane ostalih HTML elementa.
Meta informacije koriste serveri ili WWW klijenti.
2.5 Sekcija BODY
Sve to se nalazi unutar sekcije predstavlja tijelo dokumenta i pojavljuje se kao
sadraj prezentacije u browseru. Neki od tagova unutar ove sekcije su:
2.5.1 Komentar
Dodatna opcija koja omoguava da se obiljei komentar u HTML-u koji se nee
vidjeti u vizuelizaciji dokumenta.
Npr. <!-----komentar----->
2.5.2 Naslov
Naslovi (engl. headers) se kodiraju prema relativnoj dubini, ciframa od 1 do 6.
Tag za naslov ima opti oblik:
<Hn> Naslov nivoa n </Hn>,
gdje n predstavlja cifru od 1-6.
Npr. <H5> Naslov nivoa 5 </H5>.

2.5.3 Odjeljak
Odjeljak (engl. division) se opisuje tagovima <DIV> ... </DIV>.
Ovaj tag moe imati atribut za pozicioniranje align sa vrijednostima center,
right ili left.

2.5.4 Paragraf
Paragraf (engl. paragraph) se obiljeava tagovima <P> ... </P>.
Ukoliko u ravnom tekstu slijedi paragraf za paragrafom, tag </P> se moe
izostaviti.
Ovaj tag moe imati atribut za pozicioniranje align sa istim vrijednostima kao
tag <DIV>.

2.5.5 Novi red

Novi red (engl. break) se obiljeava tagom <BR>. Ovo je prosti tag tj. ne postoji
kraj taga - </BR>.

2.5.6 Razdvojna linija

Razdvojna linija (engl. rule) se obiljeava tagom <HR> sa opcionim atributom
noshad. Ovo je takoer jedan prosti tag koji nema tag </HR>.
Npr. <HR SIZE=4 WIDTH="50%">,
gdje size predstavlja debljinu linije.

2.6 Liste
Liste u HTML jeziku predstavlju navoenje, popisivanje onih dijelova teksta,
koji se ne mogu svesti na elemente logike strukture (pasuse, odjeljke..).
Razlikujemo tri vrste lista:
numerisane
nenumerisane
neureene
2.6.1 Numerisane i nenumerisane liste
Numerisane liste se ubacuju pomou <ol> taga, a nenumerisane liste pomou
<ul> taga. Osnovna razlika izmeu ove dvije vrste listi je ta to e u
numerisanim listama ispred pojedinih stavki liste stajati redni brojevi, a u
numerisanoj listi e stajati dugmad.
2.6.2 Neureene liste
Ovaj oblik liste dobijamo pomou taga <dl>. Svaka neureena lista se sastoji iz
dva dijela: termina koji hoemo da definiemo i njegove definicije. Termini
zapoinju <dl> tagom, a njihove definicije <dd> tagom. Termini se
poravnavaju uz lijevu marginu, a njihove definicije se pojavljuju u novom redu i
uvuene za odreen broj mjesta.

2.7 Formatiranje teksta

Ako se drugaije ne naglasi, tekst unutar HTML stranice je poravnat uz lijevu
stranu. Ako se eli da naslov, ili bilo koji drugi element stranice, bude centriran,
treba ga staviti izmeu tagova <center> i </center>. Ukoliko se posebno ne
naglasi kojim fontom se eli da tekst bude ispisan na stranici, browser e
koristiti osnovni (engl. default) font, a to je obino Times New Roman font.
Rad sa fontovima u okviru HTML stranice se obavlja pomou <font> taga.

Ovaj tag moe imati sljedee atribute: face, size, i color. Atributom face
definiemo kojim fontom elimo da tekst bude ispisan. Treba voditi rauna da
font koji se koristi u HTML stranici bude prethodno instaliran na raunaru
korisnika, u suprotnom e browser dodijeliti default font.
Pored naina ispisivanja teksta, u okviru stranice se moe upravljati i veliinom
slova. Za ove potrebe se koristi atribut size unutar font taga. HTML razlikuje 7
veliina slova koje nose vrijednosti od 1 do 7.

Slika 3. Primjer veliine fontova u programu Netscape

U HTML-u postoji i mogunost pisanja podebljanim (bold) slovima i kurzivom
italic, kao i mogunost podvlaenja (underline).
2.8 Boje u HTML-u
Na HTML stranicama se pozadina i tekst mogu pojaviti u itavom spektru boja.
To se postie pomou atributa u okviru <body> taga. Atributi se ubacuju u
poetni tag i slue da detaljnije opiu dati tag. Boja pozadine se odreuje
atributom bgcolor koji je dio <body> taga. Boje se mogu definisati na dva
naina: preko predefinisanog engleskog naziva boje (npr. "blue" za plavu boju),
ili preko heksadecimalne RGB vrijednosti ispred koje se obavezno stavlja
simbol # (npr. #ffff00).

2.9 Tabele u HTML-u

Tabela je i u HTML-u dvodimenzionalna matrica iji se elementi nazivaju elije
(engl. cells). elija moe sadravati raznovrsne informacije: brojeve, tekst, boje,
slike, itd. Tabela se sastavlja tako to se opisuju redom njene vrste i sadraj
svake elije u redu. Tabela se opisuje pomou taga <table> koji moe sadravati
vie atributa: border, cellspacing, cellpadding, width.
Svaki red u tabeli se opisuje izmeu tagova <TR> i </TR>, dok se pojedinana
elija opisuje izmeu tagova <TD> i </TD>.
Tag <TH> ima ista svojstva kao i tag <TD> s tim to omoguava da sadraj
elije bude automatski centriran i boldiran. Tabela ne mora da sadri <TH> tag,
ali mora imati barem jedan tag <TD> u koji se smjeta sadraj tabele.
Da bi tabela imala odgovarajue dimenzije koriste se atributi height i width.
Vrijednost ovih atributa se moe zadati u pikselima ili u procentima veliine
prozora HTML browsera.
HTML doputa mogunost da se pojedine elije prostiru du vie redova ili
kolona, ovakav efekat se postie pomou atributa colspan i rowspan, koji se
ubacuju u <td> ili <th> tag one elije koja se eli posebno da formatira.
Vrijednost ovih atributa se zadaje brojem kolona ili redova tabele du kojih
treba da se prostire data elija.
HTML dozoljava da cijela tabela kao i svaka elija posebno moe da ima
razliitu boju pozadine od ostatka stranice. Ovakav efekat se postie umetanjem
atributa bgcolor u tagove <td> ili <th>. Vrijednost boje se zadaje
heksadecimalnim kodom boje ili njenim imenom, isto kao i kod boje pozadine
unutar taga <body>.

2.9 Linkovi, slike i forme u HTML-u

Pojam linka povezan je sa pojmom hiperlinka (hyperlink). Hyperlink
omoguava da se itanje teksta iz vora 1 nastavi u voru 2. Ovakva hyperveza
se enkodira pomou posebnog taga anchor koji povezuje fragment teksta u
voru 1 sa adresom vora 2. Opti izgled taga anchor je oblika:
<A atribut> ... </A>.
Slika koja se prikazuje u okviru HTML stranice moe da se prikae pomou
proizvoljnog grafikog formata. Ipak, najee se koriste formati JPG ili GIF.
Razlog je veliina slike kao dokumenta. Ova dva formata koriste efikasne
metode kompresije. U JPEG formatu se uvaju kvalitetnije slike, jer ovaj format
podrava 16 miliona boja, a slike se relativno brzo uitavaju. U okviru HTML
stranice slika se prikazuje pomou <img> taga. Ovaj tag mora imati bar jedan
atribut, i to src atribut koji definie naziv i eventualno lokaciju grafikog fajla.
Forma se implementira preko taga <form>. Forma doputa da se ostvari
komunikacija izmeu korisnika i servera: korisnik popunjava formu i alje je ka
serveru. Preko formi se mogu realizovati aplikacije kao to su upiti nad bazama,
elektronska trgovina, identifikacija pristupa odreenom servisu servera. Tag
<form> sadri dva atributa: action i method

Slika 4. Primjer obrasca (forme) u HTML-u

10

3. CSS
CSS je stilski jezik kojim se opisuje izgled i formatiranje dokumenta napisanog
markup jezikom. Najea primjena mu je u oblikovanju web stranice napisane
HTML-om. CSS je primarno dizajniran kako bi omoguio odvajanje sadraja
dokumenta od njegove prezentacije, ukljuujui elemente poput formata, boja i
fontova. Ovakva odvojenost moe poboljati dostupnost sadraja, fleksibilnost i
kontrolu nad specifikacijom prezentacijskih karakteristika, omoguiti dijeljenje
istog formata na vie dokumenata, itd. CSS posjeduje jednostavnu i izravnu
sintaksu. Koristi se skup engleskih rijei za specifikaciju imena raznih stilskih
sredstava. CSS specifikacije su kroz historiju imale problem sa prihvaenou.
CSS1 specifikacija dovrena je 1996. godine, no podrka u Web preglednicima
bila je slaba. Internet Explorer izdan 2000. godine, bio je prvi preglednik koji je
u potpunosti podravao CSS1. Ostali preglednici su pratili trend, a mnogi su
dodatno implementirali dijelove specifikacije CSS2.
Najnovija trea generacija CSS, uvodi mogunosti koje prate trend dinamikog
Web-a. Web-preglednici mogu implementirati dijelove specifikacije koji su
dovoljno napredovali bez ekanja da specifikacija CSS3 u cjelini bude zavrena.
CSS3 mogue je koristiti ve danas. Bitno je razluiti gdje ga se moe koristiti, a
gdje jo ne. Za elemente poput oznaavanja identiteta, uporabivosti, dostupnosti
i rasporeda web-stranica, CSS3 jo nije dovoljno pouzdan alat. No, za
interakciju, vizualne detalje, povratnu vezu i kretanje, svojstva CSS3 ve se
mogu koristiti, jer to nisu elementi presudni za funkcionalnost web-stranice.
Veliki dijelovi specifikacije CSS3 jo uvijek nisu implementirani niti u jednom
pregledniku. No, koliina implementiranog obiljeja dovoljna je kako bi se
CSS3 ve mogao koristiti.
CSS3 uvodi mogunost definiranja vie pozadinskih slika elementu, za razliku
od CSS-a 2.1 koji dozvoljava samo jednu.
11

3.1 Web fontovi

Mogunost prikaza vlastitih fontova na web-stranicama, odnosno ne samo
fontova inslitarnih na korisnikovom raunalu. Ovo svojstvo nije novo u
specifikaciji CSS3, a prvi put je predlagano u CSS-u 2. Ve je Internet Explorer
5 imao implementirano ovo svojstvo, no s vlasnikim formatom, pa nijedan
drugi preglednik nije pratio implementacijom. Tek odnedavno razvijatelji mogu
koristiti bilo koji licencirani font TrueType (.ttf) ili OpenType (.otf) na svojim
web stranicama
3.2 Eksperimentalna obiljeja CSS3
CSS3 specifikacija serija je modula koje isporuitelji preglednika neovisno
implementiraju . Dok na specifikaciji jo nije dovren, razviljatelji preglednika u
nekim se sluajevima mogu odluiti za eksperimentalnu implementaciju.
Eksperimentalnom podrkom CSS svojstva rukuje sa posebnim prefiksima, ti su
prefiksi na dodani na poetak imena svojstva i oznaavaju da je razvoj u toku,
specifian za preglednikovu implementaciju i intepretaciju razvoja

Tablica 1 Prefiksi za eksperimentalna CSS3 obiljeja

12

3.3 Nedostaci CSS3

Glavni je nedostatak CSS-a tree inaice podranost web preglednika . Svi
preglednici ne podravaju sva CSS3 svojstva niti ih jednako implementiraju.
Ovaj problem nije svojstven samo CSS3, ve i CSS1 i CSS2 su imali jednake
probleme.Razviljatelji su se tome prilagodili piui dodatni kod namijenjen
odreenim preglednicima u kojima stranica ima problema. CSS je jezik bez
varijabla, a CSS3 to nije promijenio. Potreban je veliki trud da bi se unijele i
najmanje promjene. Npr, neka web stranica ima temu plave boje koja se oituje
u boji teksta i pozadini odreenih elemenata, ukoliko se eli uvesti promjena na
zelenu temu, bit e potrebno promijeniti vrijednosti svih CSS obiljeja. CSS3 se
moe smatrati vrlo efikasnim jezikom za stiliziranje, no jo uvije se ne moe
zvati jezikom za raspored, a to je podruje koje se eljno iekuje. Preglednici
su do neke mjere implementirali

samo mogunost rasporeda teksta u vie

stupaca.

13

4. Zakljuak
I HTML i CSS imaju svoje prednosti i mane. Prednost CSS-a ogleda se u tome
da CSS oitava stranice bre. Razlog tome je to to se za svaku web stranicu ne
mora da ispisuje isti kod iz CSS fajla. Prednosti HTML-a ogledaju se u
dostupnosti na svim OS, te je www usluga zasnovana na HTML dokumentima, a
ne Word ili PDF dokumentima koji karakteriu Windows OS. Jedan od razlog
zbog kojeg HTML radi na tekstualnom (a ne binarnom kodu) jeste upravo zbog
toga to svi raunari porepoznavaju tekst na isti nain. HTML-u nije bitan
precizan ispir na papiru, ve je dokument bitno prikazati ispravno u prozoru
pretraivaa. Za pravljenje HTML i CSS stranice, najpogodniji program je
Multimedia DreamWeaver, koji je jako jednostavan za upotrebu, i omoguava
lake koritenje i kreiranje kodova u odnosu na kreiranje kodova u Notepadu.

14

5. Literatura
Marki, Brano, 2008.g, Informatika, Ekonomski fakultet, Mostar.
Grubor G., Milosavljevi M., Veinovi M., 2009.g., Informatika, Univerzitet
Singidunum, Beograd.
Bambir, Kristijan, 2011.g., Tehnologije interneta i World Wide Web-a, CSS3,
Fakultet Elektrotehnike i raunarstva, Zagreb.
Nikoli, Boko, 2004.g., HTML programiranje, Via eleznika kola, Beograd
https://en.wikipedia.org/wiki/Cascading_Style_Sheets
https://hr.wikipedia.org/wiki/HTML

15