1. uvod u html - efos.unios.hr · pdf fileprogramiranje je umjetnost i umijeće u stvaranju...
TRANSCRIPT
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.