1

Ekonomski fakultet u Osijeku Kolegij: Elektroniko i mobilno poslovanje Nositelj: prof. dr. sc. Branimir Duki

Nastavni materijali za vjebe

1. Uvod u HTML

1. HTML - Hypertext Markup Language

HTML je standardizirani jezik za oznaavanje (hypertext markup language) koji se koristi za izradu web

stranica. Njegov primarni zadatak je definiranje elemenata web stranice.

Rezultat rada s HTML-om su statike web stranice, dok tek

u kasnijim verzijama (npr. HTML 5) postoje elementi za

oznaavanje koji unose multimediju, te naprednije grafike

elemente. Sam HTML moe egzistirati i pokazivati

definirani web sadraj i kada se lokalno prikazuje (bez Internet konekcije). No da bi stranica izvrila

neke naprednije funkcije i kako bi se promijenilo njezino ponaanje, dinamiki elementi razvijaju se

pomou drugih jezika, koji se ugrauju u HTML tj. kombiniraju sa HTML elementima. HTML se formira

pomou tzv. tagova, koji su najee dvostruki, te se piu u zagrade .

Mogu postojati i jednostruki tagovi, no najee se koriste dvostruki tagovi, od kojih je jedan poetni

< ... >, a drugi zavrni, koji se uz zagrade definira sa kosom crtom . HTML dokumenti imaju

svoju strukturu i neophodne tagove, da bi web preglednik mogao tekstualnu datoteku pomou koje se

oblikuje HTML dokument interpretirati kao HTML i prikazati (deifrirati html kod) korisniku.

Prva web stranica ikad bila je napisana u HTML-u, te je publicirana 1991. godine.1 Stranica je izgledala

ovako: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

Autor je bio Tim Berners-Lee (inae autor i prvog web preglednika i prvog web servera), koji je radio za

CERN (European Organization for Nuclear Research), a stranica je publicirana 6. kolovoza 1991. godine.

2. Temeljna pravila sintakse HTML-a

Web stranica = min(tekst + HTML Tagovi)

Tagovi su oznake kojima se oblikuje tekst i definiraju akcije (npr. poveznice)

Tagovi se zapisuju izmeu znakova < i > (npr. ) i nisu osjetljivi na velika i mala slova

Tagovi se veinom piu u paru:

o otvaranje taga

o zatvaranje taga

Tagovi esto imaju vie parametara:

Tagovi nisu jedinstveno podrani u svim preglednicima

Tagovima se oznaavaju poetak i kraj skripti (skripta - ubaen dio drugog programskog koda)

1 http://www.todayifoundout.com/index.php/2010/05/the-first-website-ever-made/

HTML se upotrebljava za definiranje sadraja web stranica.

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.htmlhttp://www.todayifoundout.com/index.php/2010/05/the-first-website-ever-made/

2

3. Kreiranje prve web stranice

Otvoriti Notepad

Deklarirati dokument kao HTML (poetni i zavrni tag)

Unutar HTML oznaka napisati eljeni kod - sadraj prve web stranice

Spremiti kao tip All files, sa ekstenzijom *.html

Uputa: Sve slike i druge html stranice koje se otvaraju iz neke stranice, moraju biti

pohranjene u isti folder (tj. kasnije na isto mjesto na serveru)

Ureivanje HTML

stranice u Notepad-u

(lijevo) i pohrana

datoteke s html

ekstenzijom (ispod)

Izgled stranice otvorene u web

pregledniku

3

4. HTML TAGOVI

OSNOVNI TAGOVI

TAGOVI ZAGLAVLJA

Kreira tekst u liniji naslova prozora HTML dokumenta

Umetanje koda skriptnog programskog jezika

TAGOVI OBLIKOVANJA TEKSTA

Nije tag, ali daje instrukciju pregledniku o verziji HTML-a

Kreiranje HTML dokumenta

Kreira zaglavlje u koje se upisuju dijelovi HTML-a koji se ne

pojavljuju na Web stranici

Kreira vidljivi dio HTML dokumenta

Kreira preformatid tekst (pisai stroj)

Oblikovanje naslova (Head)

Podebljana slova (Bold)

Ukoena slova (Italic)

Subscript - indeks

Superscript - potencija

Pasus

Novi red (Break Row)

Kreira numeriku listu (Oredred List)

Kreira Bulleted listu (Unordered List)

Element liste (List Item)

4

TAGOVI POVEZNICA

Umee poveznicu (Anchor Hypertext Reference)

Kreira bookmark (Anchor Name)

GRAFIKI TAGOVI

Kreira tekst u liniji naslova prozora HTML dokumenta

(Image)

Umetanje horizontalne linije (Horizontal Rule)

TAGOVI ZA KOMENTARE

Umetanje komentara

TAGOVI ZA DEFINIRANJE TABLICE

Definira tablicu

Kreira redak tablice (Table Row)

Kreira eliju u retku (Table Data Cell)

Definira tijelo tablice

Definira zaglavlje tablice

Kreira eliju zaglavlje tablice

(Table Heder)

TAGOVI ZA OKVIR (FRAME)

Definira okvir

Kreira okvir

Kreira vidljivi dio HTML dokumenta

5

Akcija ako preglednik ne

podrava okvire

TAGOVI ZA OBRASCE (FORME)

Definira formu

Kreira redak za unos

Kreira kuice za oznaavanje (Selection)

Kreira elemente liste

BOJE - osnovno

#FFFFF bijela

#000000 Crna

#FFFFCC Svjetlo uta

#FFFF00 Tamno uta

#FFCCFF Roza

#FFCC00 Zlatno uta

#99CC99 Zelena

#FF0066 Crvena

#0066FF Plava

#990000 Smea

POSEBNI ZNAKOVI

& &

< < (Less Then)

> > (Great Then)

Razmak (Non-breakable space)

Boje - detaljno: http://www.w3schools.com/colors/default.asp

Detaljan opis tagova: http://www.w3schools.com/tags/tag_img.asp

HTML5 elementi: http://www.w3schools.com/html/html5_new_elements.asp

http://www.w3schools.com/colors/default.asphttp://www.w3schools.com/tags/tag_img.asphttp://www.w3schools.com/html/html5_new_elements.asp

6

5. PRIMJERI HTML SINTAKSE

SINTAKSA ZA UREIVANJE TIJELA STRANICE - PAGE BODY

...

Atributi:

BACKGROUND=URL slika u pozadini dokumenta

BGCOLOR=Color boja pozadine

TEXT=Color boja teksta

LINK =Color boja linka

VLINK =Color boja posjeenog linka

ALINK =Color boja oznaenog linka

ONLOAD=Script skriptni program koji se starta

ONUNLOAD=Script skriptni program koji se starta

SINTAKSA ZA NASLOVE - headings

...

gdje je n broj: 1- najvei naslov,

6 najmanji naslov

Atribut:

ALIGN=[ left | center | right | justify ] - horizontalno poravnanje

SINTAKSA ZA UREIVANJE TEKSTA - font

...

Atributi:

SIZE=n definira veliinu fonta (npr. Tekst )

COLOR=Color boja teksta

FACE=Naziv Fonta naziv fonta koji se koristi

(npr. Tekst)

Primjer kombiniranja atributa: Tekst

http://www.htmlhelp.com/reference/html40/values.html

7

UMETANJE VODORAVNE LINIJE

Atributi:

ALIGN=centar|left|right - horizontalno poravnanje

WIDTH=n debljina linije (n - pixel)

SIZE=n irina linije (n - pixel)

NOSHADE linija bez sjene

Primjer:

8

6. PRIMJERI RAZLIITIH UPOTREBA TAGOVA

PRIMJER 1.

HTML KOD:

REZULTAT U PREGLEDNIKU:

Primjer 1. Ovo je jedna podebljana (bold) reenica. Ovo je jedna ukoena (italic) reenica. Ovo je jedna podvuena (underline) reenica. Ovo je jedna precrtana reenica. Pisanje indeksa: a < x1 < x2 < ... < xn < b Pisanje eksponenata: x a b c

9

PRIMJER 2.

HTML KOD:

REZULTAT U PREGLEDNIKU:

Primjer 2. Programiranje to je programiranje? to je HTML? Programiranje je pisanje uputa raunalu to i kako uiniti, a izvodi se u nekom od programskih jezika. Programiranje je umjetnost i umijee u stvaranju programa za raunala. Osoba koja stvara program zove se programer. HTML prema Rijeniku komunikacijske tehnologije znai hipertekstualni (tekst itljiv u vie dimenzija) oznaeni jezik. Svejedno je piete li HTML kod velikim ili malim slovima, ali odluite se za jedno i drite se toga.

10

PRIMJER 3.

HTML KOD:

Primjer 3. Lista bez redoslijeda - temeljni oblik Ekonomski fakultet u Osijeku Gajev trg 7 31000 Osijek Lista bez redoslijeda - stilizirani gumb Ekonomski fakultet u Osijeku Gajev trg 7 31000 Osijek Redoslijed Zagreb Split Rijeka Osijek Jednostavan primjer opisne liste Naslov - opis neke teme Naziv - pojanjenje nekog naziva

11

REZULTAT U PREGLEDNIKU:

12

ZADAA 1.

Osmisliti i oblikovati HTML stranicu koja e sadravati ureen tekst o nekoj temi vezanoj uz

programiranje ili openito vezanoj uz informacijsko-komunikacijske tehnologije. S poetnom stranicom

povezati barem jo dvije HTML stranice smislenog proizvoljnog sadraja. Tekst na poetnoj stranici

treba imati minimalno 4 odlomka, te sadravati sve do sada isprobane HTML tagove s vjebe 1. - Uvod

u HTML: naslove, podnaslove, liste, ureen font, prijelome unutar teksta, slike, poveznice i drugo.

Izvore s kojih se koristio tekst za pripremu ove zadae oblikovati pri kraju teksta uz odgovarajue

poveznice za svaki naveden izvor.

Zadaa se izrauje koritenjem iskljuivo jednostavnog tekst editora (Notepad).

Studenti zadae izrauju i odgovaraju individualno.