HTML

Webprogramiranjeiprimjene
XHTML
1/3/2012
Odjelzamatematiku,Sveuilite J.J.Strossmayera,Osijek
HTML
HTML HyperTextMarkupLanguage
HTMLjejezikzaopisivanjeiformatiranjesadrajawebstranica
sastojiseodkonanomnogooznaka(eng.tagova)definiranih/propisanih
odstraneW3Ca
HTML tagovisastojeseodimenatagazatvorenoguiljastezagrade,npr.
<html>
HTML tagoviobino dolazeuparovima svakipoetnitag(npr.<html>)
imaodgovarajuizavrnitag(</html>)
HTMLdokumentisastojeseodHTMLtagovaiobinogtekstaikaotakvi
inewebstranice
Primjer:strukturajednostavnoghtmldokumenta
(DOCTYPEdeklaracija,zaglavljeitijelohtmldokumenta)
HTMLdokumentimaekstenziju.htmlili.htm
1/3/2012
XML ukratko
XML eXtesibleMarkupLanguage
XMLjejezikijajeprimarnazadaapohrana,organizacijaiprijenos
podataka
XMLtagovekorisnikdefinirasam svi tagovidolazeuparovima(poetnii
zavrnitag),pravilazaimenovanjetagovasupropisana,tagovimorajubiti
pravilnougnjedeni(poprincipuLIFO):
<tag1><tag2>...</tag1></tag2> nepravilno
<tag1><tag2>...</tag2></tag1> pravilno
HTMLvs.XML
HTMLisaboutdisplayinginformation,whileXMLisaboutcarrying
information.
1/3/2012
XHTML
XHTML eXtensible Hyper TextMarkupLanguage
XHTMLjegotovoidentianverzijiHTML4.01
XHTMLjestroaiiaverzijaHTMLa
XHTMLsesastojiodsvihoznakaHTMLa4.1. nakojesuprimjenjena
strogasintaktikapravilaXMLa
XHTMLje W3Cpreporukaod26.1.2000.
W3C normativnadefinicijaXHTMLa1.0.
NekerazlikeizmeuHTMLaiXHTMLa
1/3/2012
XHTML elementi
XHTMLelement <tag>sadraj</tag>
XHTMLelementpoinjepoetnimtagom(npr.<tag>)
XHTMLelementzavravazavrnimtagom(</tag>jezavrnitagtaga
<tag>)
uXHTMLuimetagamorabitinapisanomalimslovima
sadrajXHTMLelementajesvetosenalaziizmeupoetnogi
zavrnogtaga(tomogubitidrugitagovipostavljeniuskladusLIFO
principomiobiantekst)
nekiXHTMLelementinemajusadraj prazniXHTMLelementi
prazneXHTMLelementezatvarmousklopupoetnogtaganasljedei
nain:
<tagpraznogelementa/>
veinaXHTMLelemenatamoeimatiatribute
1/3/2012
XHTML atributi
XHTMLatributi
snabdjevajuXHTMLelementedodatniminformacijamakojenajee
sluezaformatiranjeprikazaelementa
atributisedodajupoetnomtagu
atributidolazeuparuimevrijednost,tj.imenuatributasepridruuje
dozvoljenavrijednostpodnavodnimznakovima
<tagimeatributa=vrijednost>...</tag>
imeivrijednostatributamorajubitinapisanimalimslovima
primjer dodavanjelinkauhtmldokumentu
listaHTMLatributa
1/3/2012
XHTML naslovi,paragrafiikomentari
XHTMLnaslovi(zaglavlja)definiranisutagovima<h1>do<h6>
<h1>Najveinaslov</h1>
<h6>Najmanjenaslov</h6>
w3schoolsprimjer
XHTMLparagraf definiranjetagom<p>
<p>Tekstparagrafa</p>
w3schoolsprimjer
XHTMLkomentari
inehtmldokumentrazumljivijimiitljivijim,alinisuprikazaniuweb
pregledniku
sintaksa:<! Thisisacomment>
w3schoolsprimjer
1/3/2012
XHTML vanipraznielementi
XHTMLprijelom (prelazakunovired)
definirantagom<br>kojinenosinikakavsadraj
tekstuprvomredu...<br/>
...tekstudrugomredu
w3schoolsprimjer
XHTMLhorizontalnalinija
definiranatagom<hr>kojinenosinikakavsadraj
usljedeemprimjerudvadijelatekstaodvojenasuhorizontalnom
linijom:
tekstuprvomredu...<br/><hr/><br/>
...tekstudrugomredu
w3schoolsprimjer
1/3/2012
XHTML formatiranjesadraja
Samonekolikoprimjeraformatiranjasadrajahtmldokumenta:
<b>Podebljanitekst</b>
<i>Ukoenitekst</i>
<u>Podcrtanitekst</u>
<code>Stiloutputaraunala</code>
<big>Poveanitekst</big>
<sub>Indeks</sub>
<sup>Eksponent</sup>
w3schoolsprimjer
1/3/2012
XHTML atributstyle(CSS)
atributstyle nepraktianivremenskizahtjevannainstiliziranjahtml
dokumenta preporuujesestiliziranjehtmldokumentakoritenjem
vanjskestilskestranice(CSS)
definiranjepozadinskebojehtmlelementa
<tag style="backgroundcolor:yellow">tekst</tag>
w3schoolsprimjer
HTMLboje imenaiheksadecimalnikodovi
definiranjevrste,bojeiveliinefonta
<tagstyle="fontfamily:arial;color:red;fontsize:20px;">tekst</tag>
w3schoolsprimjer
poravnanjeteksta
<tag style="textalign:center">tekst</tag>
w3schoolsprimjer
1/3/2012
10
XHTML linkovi
tag<a> sluizapostavljanjelinka(poveznice)uhtmldokumentu
nadrugidokument,pomouatributahref
npr.<ahref=www.mathos.hr>Odjelzamatematiku</a>
w3schoolsprimjer
nasidro (eng.anchor)uistomhtmldokumentu,pomouatributa
name
npr.<aname=vrh>
<aname=imedokumenta.html#vrh>Navrhstranice</a>
primjer
atributtarget vrijednostnew ili_blank omoguavaotvaranje

dokumentaunovomprozoruwebpreglednika
w3schoolsprimjer
1/3/2012
11
XHTML slike
<img>tag
sluizaukljuivanjeslikeuhtmldokument
vrijednostiatributaborder,width iheightodreujudebljinuokvirate
dimenzijeslike;vrijednostatributaalt jeopisslike
sintaksa:<imgborder="0"src=slika.jpg"
alt=opisslike"width="304"height="228"/>
w3schoolsprimjer
ukljuivanjeslikekojasenalazinadrugojweblokaciji
sintaksa:<imgborder="0"src=Direktorij/slika.jpg"
alt=opisslike"width="304"height="228"/>
w3schoolsprimjer
1/3/2012
12
XHTML tablice
tagovi<table>,<tr>,<td>i<th>
tag<table>sluizadefiniranjetablice
pomoutaga<tr>(tablerow)tablicasedijelinaredove,asvakisered
pomoutaga<td>(tabledata)dijelinapoljatablice
Zadefiniranjezaglavljatabliceumjestotaga<td>koristsetag <th>
(tableheader)
sadrajelementaomeenogtagovima<td>i</td>jesadrajjednog
poljatablice obiantekst,link,slika,drugatablica,lista,forma...
sintaksa:
<tableborder="1">
<tr> <th>zaglavlje1,red1</th>
<th>zaglavlje2,red1</th> </tr>
<tr> <td>polje1,red2</td>
<td>polje2,red2</td> </tr>
<tr> <td>polje1,red3</td>
<td>polje2,red3</td> </tr>
</table>
1/3/2012
13
XHTML tablice
atributicaption,colspanirowspan,cellpaddingicellspacing
caption definiranaslovtablice
w3schoolsprimjer
colspanirowspan spajajupoljatabliceuistomredu(colspan)ipolja
tabliceuistomstupcu(rowspan)
w3schoolsprimjer
cellpadding odreujeveliinurazmakaizmeurubaisadrajapolja
tablice
w3schoolsprimjer
cellspacing sluizapoveavanjerazmakameususjednimpoljima
tablice
w3schoolsprimjer
1/3/2012
14
XHTML liste
neureenalista
listasekreirapomoutaga<ul>(unorderedlist),asvakielementliste
kreirasepomoutaga<li>(listitem)
sintaksa:
<ul>
<li>prvielementliste</li>
<li>drugielementliste</li>
</ul>
ureenalista
listasekreirapomoutaga<ol>(orderedlist),asvakielementliste
kreirasepomoutaga<li>(listitem)
sintaksa:
<ol>
<li>prvielementliste</li>
<li>drugielementliste</li>
</ol>
1/3/2012
15
XHTML liste
opisnailidefinicijskalista
listaelemenatakojasadriopis/definicijusvakogelementa
listasekreirapomoutaga<dl>(definitionlist),svakielementliste
kreirasepomoutaga<dt>,aopis/definicijasvakogelementaliste
kreirasepomoutaga<dd>
sintaksa:
<dl>
<dt>prvielementliste</dt>
<dd> opisprvogelementaliste</dd>
<dt>drugielementliste</dt>
<dd> opisdrugogelementaliste</dd>
</dl>
w3schoolsprimjer razliitiprimjerineureenihlista,ureenihlistai
ugnjedenihlista
1/3/2012
16
XHTML forme
HTMLformekoristesezaslanjepodatakaposluitelju(serveru)
formamoesadravatipoljazaunosteksta,kuiceviestrukogizbora
(checkbox),kuicejedinstvenogizbora(radiobuttons),gumbezabrisanje
sadrajaformeilislanjesadrajaforme
zadefiniranjeformekorsitisetag <form>
poljezaunosteksta sintaksa:
<form>
Ime:
<inputtype="text"name=ime"/><br />
Prezime:<inputtype="text"name="prezime"/>
</form>
kuicejedinstvenogizbora sintaksa:
<form>
<inputtype="radio"name="spol"value="m"/>M<br/>
<inputtype="radio"name="spol"value=""/>
</form>
1/3/2012
17
XHTML forme
kuiceviestrukogizbora sintaksa
<form>
<inputtype="checkbox"name="vozilo"value="bicikl"/> vozimbicikl<br />
<inputtype="checkbox"name="vozilo"value="auto"/> vozimauto
</form>
gumbzaslanjeunesenogsadrajaposluitelju sintaksa
<formname="input"action="html_form_action.asp"method="get">
Korisnikoime:<inputtype="text"name="user"/>
<inputtype="submit"value="Submit"/>
</form>
w3schoolsprimjeri
1/3/2012
18
XHTML iframe
<iframe>tag
sluizaprikazivanjejednewebstraniceunutardrugewebstranice
sintaksa:
<iframe src="url">...</iframe>
vrijednostiatributawidth iheightodreujudimenzijeprikaza
w3schoolsprimjer
vrijednostatributaframeborderodreujedebljinuokviraokoprikaza
w3schoolsprimjer
prikazjednewebstraniceunutardruge(primarne)webstranicemoe
serealiziratiiklikomnalinkpostavljennaprimarnojwebstranici
w3schoolsprimjer
1/3/2012
19
XHTML metatagovi
<meta>tagsluizaopskrbuhtmldokumenta(webstranice)dodatnim
informacijama
opiswebstranice,kljunerijeipomoukojihjewebstranicumogue
naikoritenjempretraivaa,imeautorastranice,datumzadnje
promjenestranice...
sadraj<meta>taganijevidljivuprikazuhtmldokumentauweb
pregledniku
<meta>tagsmjetaseizmeupoetnogizavrnog<head>taga,tj.u
zaglavljehtmldokumenta
primjer:
<metaname="description"content="FreeWebtutorialsonXHTML"/>
<metaname="keywords"content=XHTML,HTML,CSS,XML"/>
<metahttpequiv="ContentType"content="text/html;
charset=windows1250"/>
http://www.mathos.hr/wp
1/3/2012
20
XHTML validacija
sintaktikaispravnostXHTMLdokumentamoebitiprovjerenapomou
W3Cvalidatora
prijepostupkavalidacijeuprvulinijuhtmldokumentatrebadodatitonu
DTD(DocumentTypeDefinition)deklaraciju(kojasadridefinicijesvih
XHTMLelemenata,njihovogsadrajaiatributa):
strogaDTDdeklaracija ukljuujesamodefinicijetagovaiatributakoji
nisuzastarjeli
prijelaznaDTDdekalracija proirenjestrogeDTDdeklaracije
definicijamazastarjelihtagovaiatributa
framesetDTDdekalaracija proirenjeprijelazneDTDdeklaracije
tagovimaiatributimapotrebnimazadefiniranjeframeovauhtml
dokumentu
XHTMLvalidator
1/3/2012
21
XHTML kratkoponavljanje
DaljnjirazvojHTMLa HTML5
1/3/2012
22

HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

Webprogramiranjeiprimjene

atributtarget vrijednostnew ili_blank omoguavaotvaranje

You might also like