Programiranje za Internet

Programiranje Programiranje za Internetza Internet

predavanjapredavanja

v.as.mr. Samir Lemešv.as.mr. Samir Lemeš

[email protected]@mf.unze.ba

5. HTML5. HTML

Osnovni elementi jezikaOsnovni elementi jezika NasloviNaslovi Uobičajeni argumentiUobičajeni argumenti OdlomciOdlomci Novi redNovi red Vodoravne linijeVodoravne linije Citati, adrese, fusnote, bilješkeCitati, adrese, fusnote, bilješke

Osnovni elementi Osnovni elementi jezikajezika PPostoje ostoje HTML HTML naredbe koje utječu na strukturu naredbe koje utječu na strukturu

stranice, te naredbe koje su namijenjene stranice, te naredbe koje su namijenjene promjeni tekstualnih stilova. promjeni tekstualnih stilova.

UU prve prve spadajuspadaju naredbe za definiranje naslova, naredbe za definiranje naslova, listi, tabela, okvira i drugih sličnih elemenata, listi, tabela, okvira i drugih sličnih elemenata, a zajedničko svojstvo im je da prilikom svake a zajedničko svojstvo im je da prilikom svake upotrebe automatski stvaraju kraj odlomka. upotrebe automatski stvaraju kraj odlomka.

Stilske HTML naredbe definiraju tipografiju Stilske HTML naredbe definiraju tipografiju tekstateksta:: promjen promjenaa veličine pisma, podebljavanje veličine pisma, podebljavanje ili nagibanje slova, druge radnje koje ne utječu ili nagibanje slova, druge radnje koje ne utječu na opći raspored elemenata na stranici.na opći raspored elemenata na stranici.

Naredba za kreiranje hipertekstualne veze, Naredba za kreiranje hipertekstualne veze, spada u spada u drugu drugu grupu, budući da vizuelno grupu, budući da vizuelno mijenja samo dio neke rečenice unutar mijenja samo dio neke rečenice unutar tekstualnog odlomka. tekstualnog odlomka.

NasloviNaslovi

Različite tematske cjeline svakog Različite tematske cjeline svakog dokumenta predstavljaju se i dokumenta predstavljaju se i razdvajaju naslovima.razdvajaju naslovima.

HTML podržava šest razina naslova HTML podržava šest razina naslova koji se definiraju parovima naredbi koji se definiraju parovima naredbi <H1><H1><</H1>/H1> <H2></H2<H2></H2>> <H3></H3><H3></H3> <H4></H4> <H4></H4> <H5></H5><H5></H5> <H6></H6><H6></H6>

NasloviNaslovi

<BODY><BODY>

<H1<H1>>Naslov prve razine – najveća slova </H1>Naslov prve razine – najveća slova </H1>Ovo je prvi odlomak teksta koji se mora Ovo je prvi odlomak teksta koji se mora odvajati odvajati posebnom naredbom.posebnom naredbom.

<H2>Naslov druge razine – velika slova</H2><H2>Naslov druge razine – velika slova</H2>Ovo je drugi odlomak teksta.Ovo je drugi odlomak teksta.

<H3>Naslov treće razine – mala slova </H3><H3>Naslov treće razine – mala slova </H3>Ovo je drugi odlomak teksta.Ovo je drugi odlomak teksta.

<H4>Naslov četvrte razine – mala slova </H4><H4>Naslov četvrte razine – mala slova </H4>Četvrti odlomak teksta ispisan je slovima Četvrti odlomak teksta ispisan je slovima gotovo iste veličine kao i naslov četvrte gotovo iste veličine kao i naslov četvrte razine.razine.

<H5>Naslov pete razine – mala slova </H5><H5>Naslov pete razine – mala slova </H5>Peti odlomak teksta vidi se bolje od naslova Peti odlomak teksta vidi se bolje od naslova pete razine.pete razine. Kakve su ovo buhice gore?Kakve su ovo buhice gore?

</BODY></BODY>

NasloviNaslovi

Upotrebom argumenta ALIGN uz naredbe za Upotrebom argumenta ALIGN uz naredbe za kreiranje naslova, oni se mogu centrirati uz kreiranje naslova, oni se mogu centrirati uz sredinu stranice čime se postižu bolji vizualni sredinu stranice čime se postižu bolji vizualni efekti. efekti.

Da bismo to postigli, argumentu ALIGN Da bismo to postigli, argumentu ALIGN moramo dodijeliti vrijednost CENTER. moramo dodijeliti vrijednost CENTER. <H3 ALIGN=CENTER>Ova knjiga </H3><H3 ALIGN=CENTER>Ova knjiga </H3><H5 ALIGN=CENTER>predstavlja</H5><H5 ALIGN=CENTER>predstavlja</H5><H1 ALIGN=CENTER>Centrirani naslov<H1 ALIGN=CENTER>Centrirani naslov 11</H1></H1><H5 ALIGN=CENTER>Slika: 11-3</H5><H5 ALIGN=CENTER>Slika: 11-3</H5>

Uobičajeni argumentiUobičajeni argumenti

ALIGN je jedan od argumenata koji se ALIGN je jedan od argumenata koji se mogu dopisivati uz naslove i većinu mogu dopisivati uz naslove i većinu drugih strukturalnih HTML naredbidrugih strukturalnih HTML naredbi..

Argumentu ALIGN mogu se dodijeliti Argumentu ALIGN mogu se dodijeliti vrijednosti LEFT, RIGHT, JUSTIFY i CENTERvrijednosti LEFT, RIGHT, JUSTIFY i CENTER

Većina pretraživačkih programa Većina pretraživačkih programa prepoznaju i naredbu <CENTER> prepoznaju i naredbu <CENTER> ((u paru u paru s </CENTER>s </CENTER>)) kojom se također mogu kojom se također mogu centrirati različiti elementi.centrirati različiti elementi.


Argument NOWRAP može se dodijeliti Argument NOWRAP može se dodijeliti većini naredbi da bi se isključilo normalno većini naredbi da bi se isključilo normalno prelamanje rečenica u retke. prelamanje rečenica u retke.

Ovom argumentu ne mora se pridružiti Ovom argumentu ne mora se pridružiti nikakva vrijednost, što je isto kao da ste nikakva vrijednost, što je isto kao da ste mu pridružili vrijednost "YES". mu pridružili vrijednost "YES".

Ako unutar teksta na koji se odnosi Ako unutar teksta na koji se odnosi naredba koja sadrži argument NOWRAP naredba koja sadrži argument NOWRAP želite ostvariti prelazak teksta u novi želite ostvariti prelazak teksta u novi redak, mora redak, mora sse upotrijebiti naredbe upotrijebiti naredbaa <BR>. <BR>.


Argumentom LANG može se odrediti Argumentom LANG može se odrediti alternativni jezik na kojem je napisan alternativni jezik na kojem je napisan sadržaj teksta obuhvaćenog naredbom sadržaj teksta obuhvaćenog naredbom koja ga sadrži. koja ga sadrži.

AArgument CLASSrgument CLASS je je namijenjen namijenjen pridruživanju stilske klase pridruživanju stilske klase obuhvaćenom tekstu. obuhvaćenom tekstu.

Stilska klasa može se definirati u Stilska klasa može se definirati u zaglavlju dokumenta, a radi se o zaglavlju dokumenta, a radi se o skupini stilskih naredbi obuhvaćenih skupini stilskih naredbi obuhvaćenih jednim imenom koje se dodjeljuje jednim imenom koje se dodjeljuje ovom argumentu kao vrijednost. ovom argumentu kao vrijednost.


Argument CLEAR koji može poprimiti vrijednosti Argument CLEAR koji može poprimiti vrijednosti LEFT, RIGHT i ALL, namijenjen je poravnavanju LEFT, RIGHT i ALL, namijenjen je poravnavanju teksta koji pluta okolo lika unutar Web stranice.teksta koji pluta okolo lika unutar Web stranice.

Ukoliko ste neki tekst ispisivali s lijeve strane Ukoliko ste neki tekst ispisivali s lijeve strane slike, a želite da se novi odlomak nalazi ispod slike, a želite da se novi odlomak nalazi ispod nje, ispisan odmah uz lijevi rub stranice, nje, ispisan odmah uz lijevi rub stranice, upotrijebit ćete, naprimjer, naredbu <P upotrijebit ćete, naprimjer, naredbu <P CLEAR="LEFT">. CLEAR="LEFT">.

AAko ko sste tekst ispisivali s desne strane slike, te tekst ispisivali s desne strane slike, argumentu CLEAR argumentu CLEAR treba treba doddodiijeljelitiiti vrijednost vrijednost RIGHTRIGHT

Za tekst iZa tekst između dviju slika zmeđu dviju slika koristi sekoristi se vrijednost vrijednost ALL.ALL.

Odlomci (Paragraphs)Odlomci (Paragraphs)

Odlomci se u HTML dokumentima Odlomci se u HTML dokumentima razdvajaju naredbom <P>razdvajaju naredbom <P>

SStandardom HTML 3 predloženo tandardom HTML 3 predloženo je je dodavanje završne oznake </P> za dodavanje završne oznake </P> za naredbu <P> kako bi se omogućilo naredbu <P> kako bi se omogućilo korištenje argumenata koji bi se korištenje argumenata koji bi se odnosili samo na jedan odlomak teksta. odnosili samo na jedan odlomak teksta.

UmjestoUmjesto naredbe <CENTER>, naredbe <CENTER>, treba treba odlomak odlomak obuhvatitobuhvatitii oznakama <P oznakama <P ALIGN=CENTER> i </P>.ALIGN=CENTER> i </P>.

Novi redNovi red

Kada samo želite da se tekst prebaci u Kada samo želite da se tekst prebaci u novi redak, bez dodatnog razmaka koji bi novi redak, bez dodatnog razmaka koji bi korisniku nagovještavao novi odlomak, korisniku nagovještavao novi odlomak, upotrijebite naredbu <BR>. upotrijebite naredbu <BR>.

Koristi seKoristi se svugdje gdje biste kod pisanja svugdje gdje biste kod pisanja teksta u teksta u WorduWordu inače pritisnuli Enter. inače pritisnuli Enter.

Ova se naredba najčešće upotrebljava kod Ova se naredba najčešće upotrebljava kod dugačkih naslova koji se moraju prelomiti dugačkih naslova koji se moraju prelomiti u više redakau više redaka

U programima za izradu Web stranica ta U programima za izradu Web stranica ta se oznaka dobija i kombinacijom se oznaka dobija i kombinacijom Shift+Enter.Shift+Enter.

Vodoravne linijeVodoravne linije

Između većih tematskih cjelina na jednoj Između većih tematskih cjelina na jednoj stranici koje se sastoje od nekoliko stranici koje se sastoje od nekoliko odlomaka teksta, moodlomaka teksta, može sže se ubaciti e ubaciti vodoravnvodoravnaa linij linijaa naredb naredbomom <HR>. <HR>.

Time ćeTime će s se automatski stvoriti e automatski stvoriti i i razmak razmak između dva odlomka, pa ispred i iza ove između dva odlomka, pa ispred i iza ove naredbe ne naredbe ne trebatreba upotrebljavati <P>. upotrebljavati <P>.

Argumenti: SIZE, WIDTH, ALIGN, NOSHADEArgumenti: SIZE, WIDTH, ALIGN, NOSHADE

<HR SIZE=5 WIDTH=75% ALIGN=CENTER><HR SIZE=5 WIDTH=75% ALIGN=CENTER>

Citati, adrese, fusnote, Citati, adrese, fusnote, bilješkebilješke Citati se označavaju Citati se označavaju oznakama oznakama

<BLOCKQUOTE> i </BLOCKQUOTE>.<BLOCKQUOTE> i </BLOCKQUOTE>. Tekst na koji se odnosi ova naredba Tekst na koji se odnosi ova naredba

većina će pretraživačkih programa većina će pretraživačkih programa prikazati uvećano od lijeve margine, a prikazati uvećano od lijeve margine, a katkada i kosim slovima.katkada i kosim slovima.

OOznakznakee <ADDRESS> i </ADDRESS> <ADDRESS> i </ADDRESS> koristkoristee se kod isticanja potpisa, adresa se kod isticanja potpisa, adresa i drugih informacija koje se odnose na i drugih informacija koje se odnose na autora dokumenta, a najčešće se autora dokumenta, a najčešće se pojavljuju pri dnu stranice. pojavljuju pri dnu stranice.

Citati, adrese, fusnote, Citati, adrese, fusnote, bilješkebilješke Napomene, savjeti, upozorenja i drugi Napomene, savjeti, upozorenja i drugi

slični dodaci tekstu označavaju se slični dodaci tekstu označavaju se naredbama <NOTE> i </NOTE>. naredbama <NOTE> i </NOTE>.

Tekst unutar ovih oznaka Tekst unutar ovih oznaka browseri browseri prikazuju:prikazuju:– uokvirenuokviren– ispisan manjim slovimaispisan manjim slovima– sa sa dodatdodatkomkom odgovarajuć odgovarajućee ikonu koja ikonu koja

vizualno ukazuje na ulogu tog teksta. vizualno ukazuje na ulogu tog teksta. Uloge se određuju pomoću argumenta Uloge se određuju pomoću argumenta

ROLE kojemu ćete u slučaju savjeta ROLE kojemu ćete u slučaju savjeta pridružiti vrijednost TIP, a u slučaju pridružiti vrijednost TIP, a u slučaju upozorenja vrijednost WARNING.upozorenja vrijednost WARNING.

Citati, adrese, fusnote, Citati, adrese, fusnote, bilješkebilješke Fusnote Fusnote se se označavaju naredbama <FN> i označavaju naredbama <FN> i

</FN>. </FN>. Početna oznaka mora sadržavati argument Početna oznaka mora sadržavati argument

ID kojemu ćete dodijeliti naziv fusnote, ID kojemu ćete dodijeliti naziv fusnote, kako biste je razlikovali od drugih fusnota. kako biste je razlikovali od drugih fusnota.

Riječ koja je opisana tom fusnotomRiječ koja je opisana tom fusnotom treba treba obuhvatitobuhvatitii oznakom <A> i </A>, gdje ćete oznakom <A> i </A>, gdje ćete uz početnu oznaku nadopisati i argument uz početnu oznaku nadopisati i argument HREF kojem se dodjeljuje ime HREF kojem se dodjeljuje ime odgovarajuće fusnote, prethodno oznakom odgovarajuće fusnote, prethodno oznakom #.#.

Citati, adrese, fusnote, Citati, adrese, fusnote, bilješkebilješke

<A HREF= <A HREF= #pokloni">pokloni</A>#pokloni">pokloni</A>

......

<FN ID="pokloni"><FN ID="pokloni">

Ručni satovi, walkmani, CD-Ručni satovi, walkmani, CD-ROMovi, foto-aparati, SIMM ROMovi, foto-aparati, SIMM moduli, te ostala sitna tehnika.moduli, te ostala sitna tehnika.

</FN></FN>

Documents

Programiranje za Internet