FSR - Programiranje za Internet Laboratorijske vjebe 2010/11

PROGRAMIRANJE ZA INTERNET I
Laboratorijska vjeba 1: Osnove HTML-a i CSS-a

Cilj vjebe:
Upoznavanje sa osnovama HTML jezika, nainom pisanja/izraivanje
jednostavnih HTML dokumenata, izrada HTML obrazaca te primjena stilova pomou
CSS-a.

Pripreme za vjebu

Prouiti priloeni tekst o osnovama HTML jezika, strukturu HTML dokumenta

(zaglavlje, tijelo...) te koritenje kodnih stranica.
Prouiti i osnovne elemente HTML dokumenta, naine koritenja tih
elemenata i njihovo oblikovanje putem njihovih atributa.
Prouiti i osnovne primjene CSS stilova, naine koritenja tih stilova i njihovu
primjenu u HTML dokumentima.

Zadaci

Zadatak 1.1.
Kreirajte HTML dokument (stranicu) index.html koja e predstavljati vlastitu
'web stranicu' studenta. Dokument se sastoji od sljedeih elemenata:
Pozadina (proizvoljno, <body.> element)
Meta tagova koji se odnose na Vas i na Vae podatke, te na predmet
Programiranje za Internet
Naslov stranice te nekoliko podnaslova razliite veliine koristei heading
formatiranje (<h1> ...<h6> elementi)
Nekoliko tekstualnih cjelina oznaenim nekih od podnaslova (proizvoljno)
koristei poravnjavanje teksta i razdvajanja teksta (<center|left|right>,
<p><br>)
Slike (proizvoljan izbor, koritenje <img> oznake)
Tablice sa vie redaka i stupaca sa proizvoljnim vrijednostima (<table>..)
Jedne ili vie listi, pobrojane i/ili nepobrojane, liste definicija, sve sa razliitim
atributima
Jednog ili vie linkova(veza) na neke druge stranice (npr. naslovna stranica
FSR-a ili neke druge ustanove)
Poveznica na dokument iz zadatka 3.2
Podataka o autoru dokumenta + veza na email adresu autora

Dokument moete kreirati pod nazivom index i odgovarajuom ekstenzijom (html ili
htm).

Redni broj vjebe: 1 Naziv vjebe: HTML i CSS 12.12.2010

FSR - Programiranje za Internet Laboratorijske vjebe 2010/11

Dokumenti moraju biti napisani u kodnoj shemi UTF-8. Dokument kreirati koritenjem
Notepad ili nekog drugog editora (ConTEX) editora.

Raspored podruja na stranici index.html organizirati prema sljedeoj strukturi

(koritenjem div elemenata):

Slika 1: Struktura stranica

Sadraj pojedinih dijelova stranice (odabir boja je proizvoljan, ali se boje pojedinih
dijelova moraju razlikovati):
Zaglavlje:
o Sadri sliku i naslov stranice/web sjedita
Navigacija:
o Sadri linkove na dokumente indeks.html i obrazac.html, kao i ostale
linkove sukladno gore opisanom sadraju stranice
Tijelo stranice:
o U sluaju index.html dokumenta ovaj dio sadri sve gore opisane
dijelove (podatke o studentu, svojevrsni ivotopis) . Ove podatke
prezentirati koritenjem gore navedenih HTML elemenata.
o U sluaju dokumenta obrazac.html ovaj dio sadri formu/obrazac za
pretraivanje
Podnoje:
o Sadri ime prezime autora stranice te link na njegov e-mail, te datum
izrade dokumenta.

Redni broj vjebe: 1 Naziv vjebe: HTML i CSS 12.12.2010

FSR - Programiranje za Internet Laboratorijske vjebe 2010/11

Zadatak 1.2.

Kreirajte drugi HTML dokument (proizvoljno ime) koji predstavlja obrazac za

unos podataka za jednostavne raunske operacije (zbrajanje, oduzimanje, mnoenje
i dijeljenje). Dokument se sastoji od sljedeih elemenata prema slici:

Redni broj vjebe: 1 Naziv vjebe: HTML i CSS 12.12.2010

FSR - Programiranje za Internet Laboratorijske vjebe 2010/11

Unesite ispravne vrijednosti i nazive elemenata, inae program nee ispravo raditi.
Formu uokviriti u tablicu kako je prikazano slikom.

U obrascu koristiti GET metodu a adresa je:

http://neretva.fsr.ba/cgi-bin/mnozenje1.cgi
Napomena: U ovoj vjebi jo ne postoji pozadinski proces obrade podataka s
obrasca, pa obrazac u ovoj fazi laboratorijskih vjebi nema funkcionalnost.

Dokument kreirati sukladno rasporedu strukture na Slici 1.

Dokument kreirati koritenjem Notepad ili nekog drugog editora (ConTEX) editora.

Predaja i kolokviranje vjebe

Vjeba se predaje prikazivanjem obje Web stranice u Web pregledniku na

lokalnom raunalu tijekom lab. vjebi. Web stranice moraju biti zapisane u HTML
dokumentima:
index.html i obrazac.html a CSS datoteka dizajna mora biti zapisana u datoteci
dizajn.css, dok slike i ostale datoteke mogu biti proizvoljnih naziva.

Ispitno gradivo vjebe

Ispitno gradivo ukljuuje sve navedeno u pripremi za vjebu i prezentirano na

predavanjima, te detaljno razumijevanje napisanog rjeenja i snalaenja u
prepravcima istog.

Primjeri pitanja:
Zato je bolje svojstva HTML elemenata definirati pomou CSS-a?
Koje su prednosti povezivanja s vanjskom datotekom CSS-a?
Definirati razliitu boju pozadine za pojedine dijelove u tablici koja sadri
obrazac?
Promijeniti boju i podcrtati naslov pri prelasku miem preko linkova u
navigaciji.
Promijeniti boju i podcrtati naslov pri prelasku miem preko pojedinih linkova u
navigaciji.

Redni broj vjebe: 1 Naziv vjebe: HTML i CSS 12.12.2010

FSR - Programiranje za Internet Laboratorijske vjebe 2010/11

Kako promijeniti boju pozadine pojedinih elemenata u obrascu?

Kako promijeniti vrstu i oblik slova u obrascu?
emu slui taj i taj element ili svojstvo?
Itd.

Linkovi i literatura

1) W3Schools HTML Tutorial - http://www.w3schools.com/html/

2) W3Schools CSS Tutorial - http://www.w3schools.com/css/
3) HTML 4.01 Specification - http://www.w3.org/TR/html401/
4) The W3C Markup Validation Service - http://validator.w3.org/
5) Predmetne stranice - http://www.fsr.ba/internet/pri
6) Predmetne stranice Otvoreno raunarstvo http://www.fer.hr/predmeti/or

Redni broj vjebe: 1 Naziv vjebe: HTML i CSS 12.12.2010