web programiranje i primjene - · pdf fileopis web stranice, ključne riječi pomoću kojih...

Web programiranje i primjene

XHTML

1/3/2012 1Odjel za matematiku, Sveučilište

J.J. Strossmayera, Osijek

HTMLHTML –

Hyper Text Markup Language

•

HTML je jezik za opisivanje i formatiranje sadržaja web stranica•

sastoji se od konačno mnogo oznaka (eng. tagova) definiranih/propisanih

od strane W3C‐a•

HTML

tagovi sastoje se od imena taga zatvorenog u šiljaste zagrade, npr.

<html>•

HTML

tagovi obično

dolaze u parovima – svaki početni tag (npr. <html>)

ima odgovarajući završni tag (</html>)•

HTML dokumenti sastoje se od HTML tagova i običnog teksta i kao takvi

čine web stranicePrimjer: struktura jednostavnog html dokumenta

(DOCTYPE deklaracija, zaglavlje i tijelo html dokumenta)•

HTML dokument ima ekstenziju .html ili .htm

1/3/2012 2Odjel za matematiku, Sveučilište

J.J. Strossmayera, Osijek

XML ‐ ukratko

XML

‐

eXtesible Markup Language

•

XML je jezik čija je primarna zadaća pohrana, organizacija i prijenos podataka

•

XML tagove korisnik definira sam – svi tagovi dolaze u parovima (početni i završni tag), pravila za imenovanje tagova su propisana, tagovi moraju biti pravilno ugnježdeni (po principu LIFO):

<tag1><tag2> ... </tag1></tag2>

‐

nepravilno<tag1><tag2> ... </tag2></tag1> ‐

pravilno

HTML vs. XML

“HTML is about displaying information, while XML is about carrying information.”

1/3/2012 Odjel za matematiku, Sveučilište

J.J. Strossmayera, Osijek 3

XHTML

XHTML

‐

eXtensible

Hyper

Text Markup Language

•

XHTML je gotovo identičan verziji HTML 4.01

•

XHTML je stroža i čišća verzija HTML‐a

•

XHTML se sastoji od svih oznaka HTML‐a 4.1.

na koje su primjenjena stroga sintaktička pravila XML‐a

•

XHTML je

W3C preporuka od 26.1.2000.

•

W3C ‐

normativna definicija XHTML‐a 1.0.

Neke razlike između HTML‐a i XHTML‐a



http://www.w3.org/TR/xhtml1/normative.html

http://www.w3schools.com/xhtml/xhtml_html.asp

XHTML – elementi•

XHTML element

–

<tag> sadržaj </tag>

–

XHTML element počinje početnim tagom (npr. <tag>)–

XHTML element završava završnim tagom (</tag> je završni tag taga

<tag>)–

u XHTML‐u ime taga mora biti napisano malim slovima

–

sadržaj XHTML elementa je sve što se nalazi između početnog i završnog taga (to mogu biti drugi tagovi postavljeni u skladu s LIFO

principom i običan tekst)–

neki XHTML elementi nemaju sadržaj – prazni XHTML elementi

–

prazne XHTML elemente zatvarmo u sklopu početnog taga na sljedeći način:

<tagpraznogelementa/>–

većina XHTML elemenata može imati atribute



XHTML ‐ atributi•

XHTML atributi

–

snabdjevaju XHTML elemente dodatnim informacijama koje najčešće služe za formatiranje prikaza elementa

–

atributi se dodaju početnom tagu

–

atributi dolaze u paru ime‐vrijednost, tj. imenu atributa se pridružuje dozvoljena vrijednost pod navodnim znakovima

<tag imeatributa=“vrijednost”> ... </tag>

–

ime i vrijednost atributa moraju biti napisani malim slovima

–

primjer –

dodavanje linka u html dokumentu

–

lista HTML atributa



http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_link

http://www.w3schools.com/tags/ref_standardattributes.asp

XHTML –

naslovi, paragrafi i komentari•

XHTML naslovi (zaglavlja) definirani su tagovima <h1> do <h6>–

<h1>Najveći naslov</h1>

–

<h6>Najmanje naslov</h6>–

w3schools primjer

•

XHTML paragraf

definiran je tagom <p>–

<p>Tekst paragrafa</p>

–

w3schools primjer

•

XHTML komentari–

čine html dokument razumljivijim i čitljivijim, ali nisu prikazani u web

pregledniku–

sintaksa: <!‐‐

This is a comment ‐‐>

–

w3schools primjer



http://www.w3schools.com/html/tryit.asp?filename=tryhtml_headers

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs1

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_comment

XHTML – važni prazni elementi•

XHTML prijelom

(prelazak u novi red)

–

definiran tagom <br> koji ne nosi nikakav sadržaj

–

tekst u prvom redu... <br/>

... tekst u drugom redu

–

w3schools primjer

•

XHTML horizontalna linija

–

definirana tagom <hr> koji ne nosi nikakav sadržaj

–

u sljedećem primjeru dva dijela teksta odvojena su horizontalnom linijom:

tekst u prvom redu... <br/><hr/><br/>

... tekst u drugom redu

–

w3schools primjer



http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_hr

XHTML – formatiranje sadržaja

•

Samo nekoliko primjera formatiranja sadržaja html dokumenta:

<b>Podebljani tekst</b>

<i>Ukošeni tekst</i>

<u>Podcrtani tekst</u>

<code>Stil outputa računala</code>

<big>Povećani tekst</big>

<sub>Indeks</sub>

<sup>Eksponent</sup>

•

w3schools primjer



http://www.w3schools.com/html/html_formatting.asp

XHTML – atribut style (CSS)•

atribut style ‐

nepraktičan i vremenski zahtjevan način stiliziranja html

dokumenta ‐

preporučuje se stiliziranje html dokumenta korištenjem vanjske stilske stranice (CSS)

•

definiranje pozadinske boje html elementa

–

<tag

style="background‐color:yellow">tekst</tag>

–

w3schools primjer

HTML boje – imena i heksadecimalni kodovi

•

definiranje vrste, boje i veličine fonta

–

<tag style="font‐family:arial;color:red;font‐size:20px;">tekst</tag>

–

w3schools primjer

•

poravnanje teksta

–

<tag

style="text‐align:center">tekst</tag>

–

w3schools primjer



http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgstyle

http://www.w3schools.com/html/html_colornames.asp

http://www.w3schools.com/html/html_colornames.asp

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_newfont

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_headeralign

XHTML ‐ linkovi•

tag <a> ‐

služi za postavljanje linka (poveznice) u html dokumentu

–

na drugi dokument, pomoću atributa href

npr. <a href=“www.mathos.hr”>Odjel za matematiku</a>

w3schools primjer

–

na “sidro”

(eng. anchor) u istom html dokumentu, pomoću atributa name

npr. <a name=“vrh”>

<a name=“imedokumenta.html#vrh”>Na vrh stranice</a>

primjer

•

atribut target

– vrijednost “new”

ili “_blank”

omogućava otvaranje dokumenta u novom prozoru web preglednika

–

w3schools primjer



http://www.w3schools.com/html/tryit.asp?filename=tryhtml_links

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_target

XHTML ‐ slike•

<img> tag

–

služi za uključivanje slike u html dokument

–

vrijednosti atributa border, width

i height određuju debljinu okvira te dimenzije slike; vrijednost atributa alt

je opis slike

–

sintaksa: <img border="0" src=“slika.jpg"

alt=“opis slike" width="304" height="228"/>

–

w3schools primjer

•

uključivanje slike koja se nalazi na drugoj web lokaciji

–

sintaksa: <img border="0" src=“Direktorij/slika.jpg"

alt=“opis slike" width="304" height="228"/>

–

w3schools primjer



http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images2

XHTML ‐ tablice•

tagovi <table>, <tr>, <td> i <th>–

tag <table> služi za definiranje tablice

–

pomoću taga <tr> (table row) tablica se dijeli na redove, a svaki se red pomoću taga <td> (table data) dijeli na polja tablice

–

Za definiranje zaglavlja tablice umjesto taga <td> korist se tag

<th> (table header)

–

sadržaj elementa omeđenog tagovima <td> i </td> je sadržaj jednog polja tablice – običan tekst, link, slika, druga tablica, lista, forma...

–

sintaksa:<table border="1">

<tr>

<th>zaglavlje 1, red 1</th>

<th>zaglavlje 2, red 1</th>

</tr>

<tr>

<td>polje 1, red 2</td>


</tr>

<tr>



</tr>

</table>



XHTML ‐ tablice•

atributi caption, colspan i rowspan, cellpadding i cellspacing

–

caption

–

definira naslov tablice

w3schools primjer

–

colspan i rowspan

–

spajaju polja tablice u istom redu (colspan) i polja tablice u istom stupcu (rowspan)

w3schools primjer

–

cellpadding

– određuje veličinu razmaka između ruba i sadržaja polja tablice

w3schools primjer

–

cellspacing

– služi za povećavanje razmaka među susjednim poljima tablice

w3schools primjer



http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables2

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellpadding

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing

XHTML ‐ liste•

neuređena lista–

lista se kreira pomoću taga <ul> (unordered list), a svaki element liste

kreira se pomoću taga <li> (list item)–

sintaksa:

<ul>

<li>prvi element liste</li> <li>drugi element liste</li>

</ul>

•

uređena lista–

lista se kreira pomoću taga <ol> (ordered list), a svaki element liste

kreira se pomoću taga <li> (list item)–

sintaksa:

<ol>

<li>prvi element liste</li> <li>drugi element liste</li>

</ol>



XHTML ‐ liste•

opisna ili definicijska lista

–

lista elemenata koja sadrži opis/definiciju svakog elementa

–

lista se kreira pomoću taga <dl> (definition list), svaki element liste kreira se pomoću taga <dt>, a opis/definicija svakog elementa liste kreira se pomoću taga <dd>

–

sintaksa: <dl>

<dt>prvi element liste</dt> <dd>‐

opis prvog elementa liste</dd>

<dt>drugi element liste</dt> <dd>‐

opis drugog elementa liste</dd>

</dl>

•

w3schools primjer – različiti primjeri neuređenih lista, uređenih lista i ugnježdenih lista



http://www.w3schools.com/html/html_lists.asp

XHTML ‐ forme•

HTML forme koriste se za slanje podataka poslužitelju (serveru)

•

forma može sadržavati polja za unos teksta, kućice višestrukog izbora (checkbox), kućice jedinstvenog izbora (radio‐buttons), gumbe za brisanje

sadržaja forme ili slanje sadržaja forme

•

za definiranje forme korsiti se tag

<form>

•

polje za unos teksta – sintaksa:

<form> Ime:

<input type="text" name=“ime" /><br

/>

Prezime: <input type="text" name="prezime" /> </form>

•

kućice jedinstvenog izbora

– sintaksa:

<form> <input type="radio" name="spol" value="m" /> M <br/>

<input type="radio" name= "spol" value= "ž" /> Ž </form>



XHTML ‐ forme•

kućice višestrukog izbora – sintaksa

<form>

<input type="checkbox" name= "vozilo" value= "bicikl" />

vozim bicikl <br

/>

<input type="checkbox" name="vozilo" value= "auto" />

vozim auto

</form>

•

gumb za slanje unesenog sadržaja poslužitelju ‐

sintaksa

<form name="input" action="html_form_action.asp" method="get">

Korisničko ime: <input type="text" name="user" />

<input type="submit" value="Submit" />

</form>

•

w3schools primjeri



http://www.w3schools.com/html/html_forms.asp

XHTML ‐ iframe•

<iframe> tag

–

služi za prikazivanje jedne web stranice unutar druge web stranice

–

sintaksa:

<iframe

src="url">...</iframe>

–

vrijednosti atributa width

i height određuju dimenzije prikaza

w3schools primjer

–

vrijednost atributa frameborder određuje debljinu okvira oko prikaza

w3schools primjer

–

prikaz jedne web stranice unutar druge (primarne) web stranice može se realizirati i klikom na link postavljen na primarnoj web stranici

w3schools primjer



http://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_height_width

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_frameborder

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_target

XHTML – meta tagovi•

<meta> tag služi za opskrbu html dokumenta (web stranice) dodatnim

informacijama

–

opis web stranice, ključne riječi pomoću kojih je web stranicu moguće naći korištenjem pretraživača, ime autora stranice, datum zadnje

promjene stranice...

•

sadržaj <meta> taga nije vidljiv u prikazu html dokumenta u web pregledniku

•

<meta> tag smješta se između početnog i završnog <head> taga, tj. u zaglavlje html dokumenta

•

primjer:

<meta name="description" content="Free Web tutorials on XHTML" />

<meta name="keywords" content=“XHTML, HTML, CSS, XML" />

<meta http‐equiv="Content‐Type"content="text/html; charset=windows‐1250" />

http://www.mathos.hr/wp1/3/2012 Odjel za matematiku, Sveučilište


http://www.charset.org/charactersets.php?charset=windows-1250

http://www.mathos.hr/wp/

XHTML ‐ validacija•

sintaktička ispravnost XHTML dokumenta može biti provjerena pomoću

W3C validatora

•

prije postupka validacije u prvu liniju html dokumenta treba dodati točnu DTD (Document Type Definition) deklaraciju (koja sadrži definicije svih

XHTML elemenata, njihovog sadržaja i atributa):

–

stroga DTD deklaracija – uključuje samo definicije tagova i atributa koji nisu zastarjeli

–

prijelazna DTD dekalracija –

proširenje stroge DTD deklaracije definicijama zastarjelih tagova i atributa

–

frameset DTD dekalaracija –

proširenje prijelazne DTD deklaracije tagovima i atributima potrebnima za definiranje frame‐ova u html dokumentu

–

XHTML validator



http://www.w3.org/TR/xhtml1/dtds.html#dtds

http://www.w3schools.com/web/web_validate.asp

XHTML ‐

kratko ponavljanje

Daljnji razvoj HTML‐a –

HTML5



http://www.w3schools.com/html/html_quick.asp

http://www.w3schools.com/html5/default.asp

web programiranje i primjene - · pdf fileopis web stranice, ključne riječi pomoću kojih...

Documents