Izgradnja Web aplikacija Prof. dr.sc. Dragutin Kermek Sveučilište u Zagrebu Fakultet organizacije i informatike Pavlinska 2, Varaždin 42000 dkermek@foi.hr 2. dio HTML jezik Uvod u jezik HTML. Osnovne HTML oznake. Formatiranje dokumenta. Formatiranje primjenom kaskadnih stilskih listova. Tablice. Okviri. Formulari/forme. Alati za sastavljanje sadržaja Web dokumenata i izradu Web aplikacija. 2
Povijest HTML jezika HTML - HyperText Markup Language HTML razvio Tim Berners-Lee na CERN-u, a popularnost dobija na pregledniku Mosaic koji je razvijen na NCSA (National Center for Supercomputer Applications) HTML+ (1993) HTML 2.0 u studenom 1995 pod okriljem Internet Engineering Task Force (IETF) HTML 3.0 (1995) HTML 3.2 (siječanj 1997) razvija World Wide Web Consortium s HTML Working Group HTML 4.0 (prosinac 1997) HTML 4.01 (prosinac 1999) XHTML 1.0 (siječanj 2000) XHTML 1.1 (srpanj 2007.) XHTML Basic 1.1 - Module-based XHTML XHTML 2 (formirana radna grupa ožujak 2007) 7. listopada 2007. zadnji poziv za XHTML Role Attribute Module HTML 5 3 HTML jezik HTML jezik je jezik oznaka (predstavljaju strukturne, prezentacijske i semantičke informacije) koji podržava SGML (Standard Generalized Markup Language), a sastoji se od hipertekst-hipermedija osobina (tekst, slika, zvuk, film i dr. koji se mogu međusobno povezati čime se dobije mreža informacija). SGML jezik temelji se na DTD (Document Type Definition) kojim se definira sintaksa konstrukata za oznake. HTML jezik sastoji se od elemenata koji mogu biti prepoznati unutar HTML grafičkih i znakovnih preglednika i kao takvi biti prikazani na specifičan način 4
Korištenje HTML jezika Korištenje HTML jezika temelji se na prisustvu: HTML dokumenata Web preglednika Web poslužitelja. HTML dokument je tekstualna datoteka (ASCII i sl. formati) koja sadrži podatke (sadržaj dokumenta) i oznake HTML jezika Web preglednik je program koji je instaliran na računalu korisnika i poznaje sintaksu HTML jezika i na temelju prepoznatih elemenata iz HTML dokumenta prikazuje na ekranu korisnika njima pripadajuće objekte Web poslužitelj je program koji je instaliran na poslužitelju i poznaje sintaksu HTTP protokola putem kojeg prima zahtjeve korisnika i vraća pripadajuće odgovore 5 Elementi HTML jezika Element HTML jezika sastavlja se upisom određenih atributa unutar njegovih prepoznatljivih oznaka: početak <element i kraj </element Kod nekih elemenata nije potrebna oznaka kraja jer oznake početka drugih elemenata pretpostavljaju kraj prethodnih. XHTML je stroži te zahjetva oznaku kraja i poštivanje redoslijeda otvaranja i zatvaranja po principu LIFO. XHTML razlikuje velika i mala slova. Vrijednosti atributi moraju biti unutar navodnika. 6
DTD <!ENTITY % html.content "HEAD, BODY" <!ELEMENT HTML O O (%html.content;) -- document root element -- <!ATTLIST HTML %i18n; -- lang, dir -- <!ENTITY % i18n "lang %LanguageCode; #IMPLIED -- language code dir (ltr rtl) #IMPLIED -- direction for weak/neutral text --" <!-- %head.misc; defined earlier on as "SCRIPT STYLE META LINK OBJECT" -- <!ENTITY % head.content "TITLE & BASE?" <!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -- <!ATTLIST HEAD %i18n; -- lang, Neobavezna oznaka dir -- profile %URI; #IMPLIED -- named dictionary of meta info -- početka i kraja. 7 DTD / 1. <!-- The TITLE element is not considered part of the flow of text. It should be displayed, for example as the page header or window title. Exactly one title is required per document. -- <!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- document title -- <!ATTLIST TITLE %i18n Obavezna oznaka početka i kraja. 8
DTD / 2. Obavezna oznaka početka i neobavezna oznaka kraja. <!ELEMENT META - O EMPTY -- generic metainformation -- <!ATTLIST META %i18n; -- lang, dir, for use with content http-equiv NAME #IMPLIED -- HTTP response header name name NAME #IMPLIED -- metainformation name content CDATA #REQUIRED -- associated information scheme CDATA #IMPLIED -- select form of content -- Obavezna oznaka početka i neobavezna oznaka kraja. 9 HTML dokument tip dokumenta: multimedijski/hipermedijski tip dokumenta prema formatu: text/html 10
HTML dokument u pregledniku Naslov Povijesno kretanje Adresne akcije Vertikalni klizač Adresa Sadržaj Statusna linija Tip veze 11 HTML dokument vrste sadržaja dokumenta prema vidljivosti: vidljivi (naslov, tekst i sl) nevidljivi (meta upute, upute dizajna, dinamički dijelovi programski kod i sl) vrste sadržaja dokumenta prema uključivanju: uključeni u dokumentu (naslov, tekst i sl) sadržani u vanjskim datotekama/dokumentima (slike, upute dizajna, dinamički dijelovi programski kod i sl) vrste sadržaja dokumenta: tekst slika veza obrasci 12
Elementi HTML dokumenta Padajući izbornik Veza na tekstu Gumb Slika Tekst Veza na slici 13 Struktura HTML dokumenta HTML dokument određen je svojom oznakom <html...</html Oznaka HTML dokumenta može sadržavati atribute: jezika lang= {en en-us fr he es ja, } smjera prikaza teksta dir= LTR RTL <html lang="en" dir="rtl" </html OsnovneOznake/Primjer00/primjer00 OsnovneOznake/Primjer00/primjer00_1 14
Struktura HTML dokumenta / 1. HTML dokument podijeljen je u 2 sekcije: sekcija zaglavlja <head...</head sekcija tijela <body...</body. <html <head...</head <body...</body </html 15 Sekcija zaglavlja Zaglavlje HTML dokumenta najviše ima ulogu kod pretraživača (search engine) koji mogu dobiti temeljne informacije o sadržaju dokumenta i dr. Ostali elementi zaglavlja sadrže podatke koje koristi preglednik kako bi što preciznije prikazao sadržaj i izvršio određene akcije. Zaglavlje HTML dokumenta može sadržavati elemente: naslov <title meta podaci <meta veza <link stil <style 16
Meta podaci Meta podaci mogi biti za: name= content= - opis atributa (autor, ključne riječi, i sl) http-equiv= content= direktive klijentu o sadržaju (obnavljanje, skup znakova) <html <head <titleovo je primjer</title <meta name="author" content= PzaWeb webmaster" <meta name="copyright" content=" 2002 FOI" <meta name="date" content="2002-10-25 22:03:17" <meta http-equiv="content-type" content="text/html; charset=windows-1250" <meta http-equiv= refresh" content= 5;url=http://www.foi.hr/" <meta http-equiv="expires" content="fri, 25 oct 2002 23:59:59 gmt" </head <body...</body </html Alternativna kodna stranica za hrvatske znakove <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" 17 Veza na vanjski dokument Vezom na vanjski dokument ostvaruje se njegovo uključivanje u način prikaza dokumenta. Stilskom uputom određuju se način prikaza cijelog dokumenta i/ili određenog dijela sadržaja dokumenta. Detaljnije se obrađuje kod kaskadnog formatiranja dokumenta. <html <head <titleovo je primjer</title <link rel= stylesheet" type= text/css href= format.css </head <body...</body </html 18
Sekcija tijela Tijelo HTML dokumenta sastoji se od elemenata kojima se opisuje (tekstom, zvukom, slikom) sadržaj dokumenta. Tijelo HTML dokumenta može sadržavati atribute: pozadina background=uri boja pozadine bgcolor=color boja teksta text=color boja veze link=color boja korištene veze vlink=color boja izabrane veze alink=color Između oznaka sekcije tijela mogu se nalaziti drugi elementi kojima se definira i prikazuje sadržaj dokumenta 19 Stilovi formatiranja HTML dokumenta Možemo razlikovati 3 stila formatiranja HTML dokumenta kada se radi o bojama: stari stil unaprijeđen stari stil kaskadni stil 20
Sekcija tijela / 1. Stari stil koristi brojčane pokazatelje boja (RGB crvena-zelena-plava). <html <head <titleovo je primjer</title <meta name="author" content="foi Webmaster" <meta name="copyright" content= 2000 FOI" <meta name="date" content="2000-11-10 22:03:17" </head <body bgcolor= #0000ff" text= #ffffff"...</body </html Npr: #0000ff - crvena 0x00 - zelena 0x00 - plava 0xff OsnovneOznake/Primjer00/primjer00_2 21 Sekcija tijela / 2. Unaprijeđen stari stil koristi nazive boja umjesto njihovih brojčanih pokazatelja. <html <head <titleovo je primjer</title <meta name="author" content="foi Webmaster" <meta name="copyright" content= 2000 FOI" <meta name="date" content="2000-11-10 22:03:17" </head <body bgcolor= blue text= white...</body </html OsnovneOznake/Primjer00/primjer00_3 22
Korištenja boja Za boje se primjenjuje RGB sustav, odnosno moguće je i korištenje naziva boja. 23 HTML elementi u sekciji tijela Glavni HTML elementi u sekciji tijela su: zaglavlja <h1, <h2, <h3,..., <h6 razlikuju se po veličini fonta paragraf <p prekid retka <br liste: nesređena <ul sređena <ol element liste <li linija <hr tablica <table redak tablice <tr ćelija tablice <td veza <a slika <img okvir <frame <iframe forma <form <input... applet, plug-in <applet, object 24
Zaglavlja <h1 align="left" "center" "right"...</h1 <h2 align="left" "center" "right"...</h2 <h3 align="left" "center" "right"...</h3 <h4 align="left" "center" "right"...</h4 <h5 align="left" "center" "right"...</h5 <h6 align="left" "center" "right"...</h6 <h1ovo je glavni naslov: h1</h1 <h2ovo je podnaslov naslov: h2</h2 <h3ovo je podpodnaslov naslov: h3</h3 <h1 align="center"ovo je glavni naslov - sredina: h1</h1 <h2 align="left"ovo je podnaslov naslov - lijevo: h2</h2 <h3 align="right"ovo je podpodnaslov naslov - desno: h3</h3 OsnovneOznake/Primjer01 Zaglavlja 25 Paragraf/odjeljak <p... </p align="left" "center" "right" class="styleclass" id="namedplaceorstyle" lang="iso" style="style" <povo je prvi paragraf</p <povo je drugi paragraf</p <povo je treci paragraf</p OsnovneOznake/Primjer01 Paragraf 26
Preformatirani tekst <pre... </pre cols="columns" wrap class="styleclass" id="namedplaceorstyle" lang="iso" style="style" <pre bio jednom jedan klaun koji je uvijek bio veseo pa cak i onda kada su mu se raspali windows </pre OsnovneOznake/Primjer01 Preformatirani tekst 27 Prikaz HTML teksta <xmp... </xmp class="styleclass" id="namedplaceorstyle" lang="iso" style="style" <pu nastavku je primjer html teksta</p <xmp <html <head ovdje je zaglavlje </head <body ovdje je tijelo </body </html </xmp OsnovneOznake/Primjer01 Prikaz HTML teksta 28
Osnovni oblici formatiranja teksta Centriranje <center...</center Naglašeno - bold <b...</b <strong...</strong Kurziv italic <i...</i <em...</em Prekid linije <br clear="all" "left" "right / Vodoravna crta <hr align="center" "left" "right" noshade size="thickness" width="width" / OsnovneOznake/Primjer01 Osnovni oblici formatiranja teksta 29 Drugi oblici formatiranja Font <font... </font color="color" face="fontlist" point-size="pointsize" size="number" weight="boldness" Odvajanje teksta <span class="styleclass" id="namedplaceorstyle" style="style"... </span <p<font face="arial, Helvetica, sans-serif" size="5" color="#0000cc"ovo je primjer velikog plavog teksta tipa Arial, Helvetica, sans-serif!</font <font face="courier New, Courier, mono"ovo je primjer courier teksta tipa Courier New, Courier, mono! </font Danas se ne preporučuje korištenje <font oznake nego <span uz kaskadni stil. OsnovneOznake/Primjer01 Drugi oblici formatiranja teksta 30
Blok oblik formatiranja Blok <div... </div class="styleclass" id="namedplaceorstyle" lang="iso" style="style" Blok oblikom pokriva se format većeg broja drugih oznaka koje zajedno formiraju određeni blok/pravokutnik. OsnovneOznake/Primjer01 Blok oblik formatiranja teksta 31 Liste Sređena lista <ol start="value" type="a" A" "i" I" "1" class="styleclass" id="namedplaceorstyle" lang="iso" style="style"... </ol Nesređena lista <ul type="circle" "disc" "square" class="styleclass" id="namedplaceorstyle" lang="iso" style="style"... </ul 32
Element liste Element liste <li type="disc" "circle" "square" "a" "a" "i" "i" "1" value="number" class="styleclass" id="namedplaceorstyle" lang="iso" style="style"... </li <ulovo je primjer elemenata <liprvi</li <lidrugi</li <litreci</li </ul OsnovneOznake/Primjer01 Liste 33 Veza <a... </a name= elementidentifier" href="location" onclick="clickjscode" onmouseout="outjscode" onmouseover="overjscode" target="windowname" Za ostale informacije potrebno je pogledati dokument <a href="../primjer03/primjer03.html"primjer03.html</a <hr/ Za informacije o poravnanju slika potrebno je pogledati dokument <a href="../primjer03/primjer03.html#poravnanje"primjer03.html#poravnanje</a <hr/ Dokumentacija se moze preuzeti sa adrese <a href="ftp://ftp.foi.hr/os/primjer02.zip"ftp://ftp.foi.hr/os/primjer02.zip</a <hr/ OsnovneOznake/Primjer02 Veza 34
Slika <img src="location" lowsrc="location" alt="alterntivetext" align="alignment" border="borderwidth" height="height" width="width" hspace="horizmargin" vspace="verticalmargin" ismap usemap="#mapname" name="imagename" onabort="imgloadjscode" onerror="errorjscode" onload="imgloadjscode" suppress="suppressornot" 35 Slika /1. Naslovna stranica FOI WWW sadrzli sliku <p<img src="foi-title-cro.gif" alt="foi www naslovnica"</p <hr/ <pvelicina iste slike ogranicena na 300*150 <p<img src="foi-title-cro.gif" height=150 width=300</p <hr/ mala slika s vezom na originalnu sliku <p<a href="foi-title-cro.gif"<img src="foi-title-cro.gif" height=50 width=100 alt="foi www naslovnica"</a</p <hr/ OsnovneOznake/Primjer03 Slika 36
Veza unutar slike Veza može biti temeljena na oblicima: Pravokutnik - određen sa koordinatama lx, ty, rx, by Krug - određen sa x, y, radius Poliedar - određen sa x1, y1, x2, y2,..., xn, yn Sliku prati mapa s popisom oblika i njihovih veza. 37 Veza unutar slike / 1. Mapa <map </map name="mapname" <area...... <area... područje <area coords="coords" shape="shape" href="location" nohref target="windowname" onmouseout="outjscode" onmouseover="overjscode" name="areaname" 38
Veza unutar slike / 2. <p<img src="slika.jpg" usemap="#mapa1"</p <map name="mapa1" <area href="pravokutnik.html" alt="pravokutnik" shape="rect" coords="123,66,270,133" <area href="krug.html" alt="krug" shape=circle coords="392,200,60" <area href="poliedar.html" alt="poliedar" shape="poly" coords="125,265,152,193,240,190,267,264,197,310" </map 39 Veza unutar slike / 3. Primjer11 Veza unutar slike 40
Prikaz znakova Preglednici uglavnom koriste skup znakova određen standardom ISO 8859-1 odnosno Latin-1. Problem uređivača teksta u pogledu prikaza manje korištenih tj. specijalnih znakova. <!ENTITY nbsp CDATA " " -- no-break space, U+00A0 -- <!ENTITY iexcl CDATA " " -- inverted exclamation mark, U+00A1 ISOnum -- <!ENTITY cent CDATA " " -- cent sign, U+00A2 ISOnum -- <!ENTITY pound CDATA " " -- pound sign, U+00A3 ISOnum -- <!ENTITY curren CDATA " " -- currency sign, U+00A4 ISOnum -- <!ENTITY yen CDATA " " -- yen sign = yuan sign, U+00A5 ISOnum -- <!ENTITY brvbar CDATA " " -- broken bar, U+00A6 -- <!ENTITY sect CDATA " " -- section sign, U+00A7 ISOnum -- <!ENTITY uml CDATA " " -- diaeresis = spacing diaeresis, U+00A8 -- <!ENTITY copy CDATA " " -- copyright sign, U+00A9 ISOnum -- <!ENTITY ordf CDATA "ª" -- feminine ordinal indicator, U+00AA -- 41 Prikaz znakova / 1. <!-- Latin Extended-B -- <!ENTITY Alpha CDATA "Α" -- greek capital letter alpha, U+0391 -- <!ENTITY Beta CDATA "Β" -- greek capital letter beta, U+0392 -- <!ENTITY Gamma CDATA "Γ" -- greek capital letter gamma, U+0393 -- <!ENTITY Delta CDATA "Δ" -- greek capital letter delta, U+0394 -- <!ENTITY Epsilon CDATA "Ε" -- greek capital letter epsilon, U+0395 -- <!ENTITY Zeta CDATA "Ζ" -- greek capital letter zeta, U+0396 -- <!ENTITY Eta CDATA "Η" -- greek capital letter eta, U+0397 -- <!ENTITY Theta CDATA "Θ" -- greek capital letter theta, U+0398 -- <!-- Mathematical Operators -- <!ENTITY ne CDATA " " -- not equal to, U+2260 ISOtech -- <!ENTITY equiv CDATA " " -- identical to, U+2261 ISOtech -- <!ENTITY le CDATA " " -- less-than or equal to, U+2264 ISOtech -- <!ENTITY ge CDATA " " -- greater-than or equal to, U+2265 -- <!ENTITY sub CDATA " " -- subset of, U+2282 ISOtech -- <!ENTITY sup CDATA " " -- superset of, U+2283 ISOtech -- 42
XHTML XHTML je stroži te zahjetva oznaku kraja i poštivanje redoslijeda otvaranja i zatvaranja po principu LIFO. XHTML razlikuje velika i mala slova. Vrijednosti atributi moraju biti unutar novodnika. Vrste: XHTML 1.0 Strict za čiste strukturne oznake, bez oznaka za izgled. CSS se koristi za font, boju i izgled. XHTML 1.0 Transitional kompromisno rješenje zbog starijih preglednika koji ne razumiju CSS te se kod oznaka koriste atributi za boju, tekst i veze. XHTML 1.0 Frameset kada se koriste okviri za podjelu prozora u dva ili više okvira. Na početku XHTML dokumenta treba biti: <?xml version="1.0" encoding="utf-8"? a zatim vrsta <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd" 43 HTML i XHTML - validacija Kontrola ispravnosti dokumenta može se ispitati pomoću alata s http://validator.w3.org/ 44
Korištena i dodatna literatura http://www.w3.org/tr/html4/ http://www.w3.org/tr/2000/rec-xhtml1-20000126/ http://dmoz.org/computers/data_formats/markup_languages/html/ http://tidy.sourceforge.net/ 45