1. Uvod U HTML - EFOS

Ekonomski fakultet u OsijekuKolegij: Elektroničko i mobilno poslovanjeNositelj: prof. dr. sc. Branimir DukićNastavni materijali za vježbe1. Uvod u HTML1. HTML - Hypertext Markup LanguageHTML je standardizirani jezik za označavanje (hypertext markup language) koji se koristi za izradu webstranica. Njegov primarni zadatak je definiranje elemenata web stranice.Rezultat rada s HTML-om su statičke web stranice, dok tekHTML se upotrebljava za definiranjeu kasnijim verzijama (npr. HTML 5) postoje elementi zasadržaja web stranica.označavanje koji unose multimediju, te naprednije grafičkeelemente. Sam HTML može egzistirati i pokazivatidefinirani web sadržaj i kada se lokalno prikazuje (bez Internet konekcije). No da bi stranica izvršilaneke naprednije funkcije i kako bi se promijenilo njezino ponašanje, dinamički elementi razvijaju sepomoću drugih jezika, koji se ugrađuju u HTML tj. kombiniraju sa HTML elementima. HTML se formirapomoću tzv. tagova, koji su najčešće dvostruki, te se pišu u zagrade „ “ i „ “.Mogu postojati i jednostruki tagovi, no najčešće se koriste dvostruki tagovi, od kojih je jedan početni„ . “, a drugi završni, koji se uz zagrade definira sa kosom crtom „ /. “. HTML dokumenti imajusvoju strukturu i neophodne tagove, da bi web preglednik mogao tekstualnu datoteku pomoću koje seoblikuje HTML dokument interpretirati kao HTML i prikazati („dešifrirati html kod“) korisniku.Prva web stranica ikad bila je napisana u HTML-u, te je publicirana 1991. godine.1 Stranica je izgledalaovako: text/WWW/TheProject.htmlAutor je bio Tim Berners-Lee (inače autor i prvog web preglednika i prvog web servera), koji je radio zaCERN (European Organization for Nuclear Research), a stranica je publicirana 6. kolovoza 1991. godine.2. Temeljna pravila sintakse HTML-aWeb stranica min(tekst HTML Tagovi) 1Tagovi su oznake kojima se oblikuje tekst i definiraju akcije (npr. poveznice)Tagovi se zapisuju između znakova i (npr. body ) i nisu osjetljivi na velika i mala slovaTagovi se većinom pišu u paru:o otvaranje taga body o zatvaranje taga /body Tagovi često imaju više parametara: BODY BGCOLOR “RED” TEXT “BLUE” . Tagovi nisu jedinstveno podržani u svim preglednicimaTagovima se označavaju početak i kraj skripti (skripta - ubačen dio drugog programskog 05/the-first-website-ever-made/1

3. Kreiranje prve web stranice Otvoriti NotepadDeklarirati dokument kao HTML (početni i završni tag)Unutar HTML oznaka napisati željeni kod - sadržaj prve web straniceSpremiti kao tip All files, sa ekstenzijom *.htmlUputa: Sve slike i druge html stranice koje se otvaraju iz neke stranice, moraju bitipohranjene u isti folder (tj. kasnije na isto mjesto na serveru)UređivanjeHTMLstranice uNotepad-u(lijevo) ipohranadatoteke shtmlekstenzijom(ispod)Izgled straniceotvorene u webpregledniku2

4. HTML TAGOVIOSNOVNI TAGOVI !DOCTYPE Nije tag, ali daje instrukciju pregledniku o verziji HTML-a HTML /HTML Kreiranje HTML dokumenta HEAD /HEAD Kreira zaglavlje u koje se upisuju dijelovi HTML-a koji se nepojavljuju na Web stranici BODY /BODY Kreira vidljivi dio HTML dokumentaTAGOVI ZAGLAVLJA TITLE /TITLE Kreira tekst u liniji naslova prozora HTML dokumenta SCRIPT /SCRIPT Umetanje koda skriptnog programskog jezikaTAGOVI OBLIKOVANJA TEKSTA PRE /PRE Kreira preformatid tekst (pisaći stroj) H /H Oblikovanje naslova (Head) B /B Podebljana slova (Bold) I /I Ukošena slova (Italic) SUB /SUB Subscript - indeks SUP /SUP Superscript - potencija P Pasus BR Novi red (Break Row) OL /OL Kreira numeričku listu (Oredred List) UL /UL Kreira Bulleted listu (Unordered List) LI Element liste (List Item)3

FONT /FONT Kreira vidljivi dio HTML dokumentaTAGOVI POVEZNICA A HREF /A Umeće poveznicu (Anchor Hypertext Reference) A NAME /A Kreira bookmark (Anchor Name)GRAFIČKI TAGOVI IMG SCR Kreira tekst u liniji naslova prozora HTML dokumenta(Image) HR Umetanje horizontalne linije (Horizontal Rule)TAGOVI ZA KOMENTARE !---- Umetanje komentaraTAGOVI ZA DEFINIRANJE TABLICE TABLE /TABLE Definira tablicu TR /TR Kreira redak tablice (Table Row) TD /TD Kreira ćeliju u retku (Table Data Cell) TBODY /TBODY Definira tijelo tablice THEAD /THEAD Definira zaglavlje tablice TH /TH Kreira ćeliju zaglavlje tablice(Table Heder)TAGOVI ZA OKVIR (FRAME) FRAMESET FRAME /FRAMESET Definira okvirKreira okvir4

NOFRAMES /NOFRAMSE Akcija ako preglednik nepodržava okvireTAGOVI ZA OBRASCE (FORME) FORM /FORM INPUT Definira formuKreira redak za unos SELECT /SELECT Kreira kućice za označavanje (Selection) OPTION /OPTION Kreira elemente listeBOJE - osnovnoPOSEBNI ZNAKOVI#FFFFFbijela&�Crna< (Less Then)#FFFFCCSvjetlo žuta> (Great Then)#FFFF00Tamno žuta Razmak (Non-breakable space)#FFCCFFRoza© #FFCC00Zlatno žuta® aBoje - detaljno: n opis tagova: http://www.w3schools.com/tags/tag img.aspHTML5 elementi: http://www.w3schools.com/html/html5 new elements.asp5

5. PRIMJERI HTML SINTAKSESINTAKSA ZA UREĐIVANJE TIJELA STRANICE - PAGE BODY BODY . /BODY Atributi:BACKGROUND “URL” – slika u pozadini dokumentaBGCOLOR “Color” – boja pozadineTEXT “Color” – boja tekstaLINK “Color” – boja linkaVLINK “Color” – boja posjećenog linkaALINK “Color” – boja označenog linkaONLOAD “Script” – skriptni program koji se startaONUNLOAD “Script“ – skriptni program koji se startaSINTAKSA ZA NASLOVE - headings Hn . /Hn gdje je n – broj:1- najveći naslov,6 – najmanji naslovAtribut:ALIGN “[ left center right justify ]” - horizontalno poravnanjeSINTAKSA ZA UREĐIVANJE TEKSTA - font FONT . /FONT Atributi:SIZE n – definira veličinu fonta (npr. font size 8 Tekst /font )COLOR “Color” – boja tekstaFACE “Naziv Fonta ” – naziv fonta koji se koristi(npr. font face “arial” Tekst /font )Primjer kombiniranja atributa: font size 12 color “#FFFFF” Tekst /font 6

UMETANJE VODORAVNE LINIJE HR Atributi:ALIGN “centar left right” - horizontalno poravnanjeWIDTH n – debljina linije (n - pixel)SIZE n – širina linije (n - pixel)NOSHADE – linija bez sjenePrimjer: hr size 100 width 10 align “left” 7

6. PRIMJERI RAZLIČITIH UPOTREBA TAGOVAPRIMJER 1.HTML KOD: !DOCTYPE html html head title Primjer 1. /title /head body b Ovo je jedna podebljana (bold) rečenica. /b br i Ovo je jedna ukošena (italic) rečenica. /i br u Ovo je jedna podvučena (underline) rečenica. /u br s Ovo je jedna precrtana rečenica. /s br Pisanje indeksa:a x sub 1 /sub x sub 2 /sub . x sub n /sub b br Pisanje eksponenata:x sup a sup b sup c /sup /sup /sup /body /html REZULTAT U PREGLEDNIKU:8

PRIMJER 2.HTML KOD: !DOCTYPE html html head title Primjer 2. /title /head body h1 Programiranje /h1 h2 font color "green" Što je programiranje? /font /h2 h3 font color "orange" Što je HTML? /font /h3 font color "red" size "6" face "Arial" Programiranje /font je pisanje uputa računalu što i kakoučiniti, a izvodi se u nekom od font color "green" size "4" face "Verdana" programskih jezika. /font br br Programiranje je umjetnost i umijeće u stvaranju programa za računala. Osoba koja stvara programzove se font color "magenta" size "5" face "comic" programer. /font br br HTML prema Riječniku komunikacijske tehnologije znači b i hipertekstualni /i /b (tekstčitljiv u više dimenzija) označeni jezik. br br Svejedno je pišete li HTML kod velikim ili malim slovima, font color "Blue" site "13" face "Arial" b U ali odlučite se za jedno i držite se toga. /b /U /font /body /html REZULTAT U PREGLEDNIKU:9

PRIMJER 3.HTML KOD: !DOCTYPE html html head title Primjer 3. /title /head body h2 Lista bez redoslijeda - temeljni oblik /h2 ul li Ekonomski fakultet u Osijeku /li li Gajev trg 7 /li li 31000 Osijek /li /ul br h2 Lista bez redoslijeda - stilizirani gumb /h2 ul style "list-style-type:square" li Ekonomski fakultet u Osijeku /li li Gajev trg 7 /li li 31000 Osijek /li /ul br h2 Redoslijed /h2 ol li Zagreb /li li Split /li li Rijeka /li li Osijek /li /ol br h2 Jednostavan primjer opisne liste /h2 dl dt Naslov /dt dd - opis neke teme /dd dt Naziv /dt dd - pojašnjenje nekog naziva /dd /dl /body /html 10

REZULTAT U PREGLEDNIKU:11

ZADAĆA 1.Osmisliti i oblikovati HTML stranicu koja će sadržavati uređen tekst o nekoj temi vezanoj uzprogramiranje ili općenito vezanoj uz informacijsko-komunikacijske tehnologije. S početnom stranicompovezati barem još dvije HTML stranice smislenog proizvoljnog sadržaja. Tekst na početnoj stranicitreba imati minimalno 4 odlomka, te sadržavati sve do sada isprobane HTML tagove s vježbe 1. - Uvodu HTML: naslove, podnaslove, liste, uređen font, prijelome unutar teksta, slike, poveznice i drugo.Izvore s kojih se koristio tekst za pripremu ove zadaće oblikovati pri kraju teksta uz odgovarajućepoveznice za svaki naveden izvor.Zadaća se izrađuje korištenjem isključivo jednostavnog tekst editora (Notepad).Studenti zadaće izrađuju i odgovaraju individualno.12

1 Ekonomski fakultet u Osijeku Kolegij: Elektroničko i mobilno poslovanje Nositelj: prof. dr. sc. ranimir Dukić Nastavni materijali za vježbe 1. Uvod u HTML 1. HTML - Hypertext Markup Language