Osnovni Elementi Jezika HTML

Osnovni elementi jezika HTML ( HyperText Markup Language)

HTML dokument je datoteka u ASCII tekstualnom formatu, te za kreiranje HTML dokumenta se može koristiti bilo koji tekst-editor.

Datoteke sa dokumentom opisanim u HTML-u obično imaju u svom imenu sufiks (ili ekstenziju) .html ili .htm.Obeležja (oznake, tagovi) u HTML dokumentu su smešteni unutar simbola za relacijski znak manje/veće (npr. <HEAD>), a obično se završavaju sa </oznaka> (npr. </HEAD>). Postoje neki izuzeci koji nemaju završetak </...> (npr.<BR>). Obeležja mogu imati svoje atribute koji se pišu u okviru oznaka kojom se i otvara obeležje.Npr. <img src="slika.jpg" align="top">

Skelet HTML dokumenta izgleda ovako: <HTML><HEAD>Zadati opis osnovnih podataka o dokumentu</HEAD><BODY>Zadati sadržaj dokumenta</BODY></HTML>

U <HEAD> sekciji može da se navodi naziv (vidljiv u vrhu ekrana u naslovnoj liniji), tip dokumenta, kodniraspored, jezik, ključne reči,..

Tagovi se mogu pisati velikim ili malim slovima ili kombinovano. Program za pregled sadržaja HTML dokumenta (npr. lynx, Opera, Mozilla, NN, IE,...) ignoriše razliku malih i velikih slova u nazivima tagova. Takođe se ne uzima u obzir ni postojanje višestrukih praznih redova (za prelaz u novi red koristite tag <BR>, a ne taster Enter), višestrukih belina - blanko, tabulator,...(efekat jednog blanko).

Tri jednostavna primera

Primer 1

<html> <head> <title>nadjite me </title> </head> <body> <p>Jedan obican tekst. </p> </body> </html>

1. Unesite sadržaj ovog HTML dokumenta2. sačuvajte ga pod nazivom prvi.htm3. Upotrebite neki od browser-a za pregled datoteke prvi.htm4. Uočite osnovne elemente prozora: naslovnu liniju, liniju sa menijima, ikonice za podešavanje prozora, klizače5. Pregledajte izvorni kôd (source) dokumenta prvi.html

PRIKAZ HTML DOKUMENTA

Primer 2

<HTML> <HEAD> <TITLE> Jedan HTml primer </title> </HEAD>

http://poincare.matf.bg.ac.rs/~jelenagr/uwit/htmlskola/1.htm

<body> <H1> O HTML-u </H1> <p> U svetu HTML ovo je jedan paragraf. Neki ga nazivaju i pasus </p> <p>Ovo je drugi paragraf. Znak za zavrsetak paragrafa moze biti opcionalan. </p>  </body> </html>

1. Unesite sadržaj ovog HTML dokumenta2. Sačuvajte ga pod nazivom drugi.htm3. Upotrebite neki od browser-a za pregled datoteke drugi.htm4. Uočite natpis u naslovnoj liniji prozora, uočite ignorisanje višestrukih belina u prikazu prve i druge rečenice prvog paragrafa5. Uočite komentar u source-u dokumenta i potražite ga u prozoru browser-a


Primer 3

<html> <head> <title>STING </title> </head> <body>Seven Days <BR>Fields of Gold<BR>All Four Seasons <br> <BR>SevenDays<BR>Fields of Gold<BR>AllFourSeasons </body> </html>

1. Unesite sadržaj ovog HTML dokumenta2. Sačuvajte ga pod nazivom treci.htm3. Upotrebite neki od browser-a za pregled datoteke treci.htm4. Uočite da je prikaz naziva istovetan i u prvom i u drugom slučaju, ali uporedite kôd za oba slučaja u source-u dokumenta treci.htm


Seven Days Fields of GoldAll Four Seasons

Seven DaysFields of GoldAll Four Seasons

Sekcija HEAD

Naziv dokumenta <TITLE>

Naziv HTML dokumenta se prikazuje u vrhu ekrana (u naslovnoj liniji odgovarajućeg programa za pregled HTML dokumenta). Naziv (TITLE) se uvodi u HEAD sekciji i može da se razlikuje od imena datoteke u kojij se nalazi dokument.

META informacije o dokumentu <META>



Tag META poseduje dosta atributa kojima mogu da se definišu meta-informacije (tip dokumenta, kodni raspored, jezik, ključne reči,..) značajne za sam dokument. Te meta informacije se ne definišu od strane ostalih HTML elementa. Meta informacije koriste SERVERI ili WWW klijenti.

Na primer: Pauci, roboti za pretragu koriste metainformacije u dodaju ih u svoje baze podataka da bi rezultat pretrage povodom korisnikovog

upita bio što precizniji. Browser-i koriste metainformacije za promenu svojih prikaza.

HTTP serveri mogu da pročitaju sadržaj zaglavlja dokumenta da bi generisali zaglavlje-odgovor na osnovu vrednosti atributa HTTP-EQUIV.

ATRIBUTI elementa META

HTTP-EQUIV atribut koji povezuje element sa HTTP serverom (zapravo zaglavljem njegovog odgovora)

NAME

atribut koji imenuje meta informaciju, na primer: name="Keywords" za pružanje ključnih reči mašinama za pretragu kao dodatak terminima pronađenim unutar dokumenta

ili

name="generator" da bi se imenovao kao deo CONTENT vrednosti naziv dokumenta koji je predstavljao HTML generator ili editor.

Ako nije prisutan atribut name, pretostavlja se da je naziv identičan nazivu iz HTTP-EQUIV vrednosti.

CONTENT

sadržaj meta informacije

Na primer: <meta name="GENERATOR" content="Microsoft FrontPage 4.0">

PRIMER: Neka HTML dokument sadrži sledeći fragment u okviru sekcije HEAD:

< META HTTP-EQUIV="Expires" CONTENT="Mon, 03 Jan 2003 20:08:08 GMT">< META HTTP-EQUIV="Reply-to" CONTENT="[email protected]">

Tada će HTTP odgovoriti zaglavljem:

Expires: Mon, 03 Nov 2013 20:08:08 GMT Reply-to: [email protected]

Koristeći vrednost "Content-Type" za atribut http-equiv možete da definišete tip sadržaja dokumenta, kao i upotrebljeni kodni raspored. Vrednost "Content-Language" dozvoljava da definišite jezik kojim je kreiran dokument. Na primer:

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-5">

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<META http-equiv="Content-Language" content="en-usa">

Atribut name sa vrednošću "Keywords" omogućava definisanje ključnih reči koje se pojavljuju u Vašem dokumentu (konsultacije za pretraživače Internet-a).

<META name="Keywords" content="informatika, programski jezik, softver">

<META name="Keywords" content="kuvar, mediteranska kuhinja, recepti">

Izrada HTML dokument u kojima su vidljiva slova srpske azbuke i abecede kojih nema u engleskoj abecedi

U odeljku zaglavlja (<HEAD>) se definiše kodna strana koja se koristi za prikaz grafičkih karaktera (npr. ISO-8859-1 za zapadno-evropsku latinicu, ISO-8859-2 za istočno-evropske latinice, ISO 8859-5 za ćirilicu). Zadavanje kodne strane se vrši pomoću meta-zaglavlja META oblika:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">

Za dijakritičke karaktere u srpskoj latinici koriste se sledeći kodovi prema ISO-8859-2:

Veiko slovo kod 8859-2 Malo slovo kod 8859-2

Ć 262 ć 263

Č 268 č 269

Đ 272 đ 273

Š 352 š 353

Ž 381 ž 382

Primer 4

<html> <head> <title>Simbolisti </title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2"> </head> <body>Aleksa Šantić <BR>Milan Rakić<BR>Jovan Dučić </body> </html>


Aleksa Šantić Milan RakićJovan Dučić

Sekcija BODY

<BODY> atributi

Atributi taga BODY definišu izgled osnovnih karakteristika prikaza dokumenta: pozadina dokumenta se definiše atributima background ili bgcolor

Pozadina može biti:

o slika (npr. <body background="URL slike">)o boja (npr. <body bgcolor="#RRGGBB">, gde RRGGBB predstavlja heksadekadni triplet kôda boje: cifre RR (R=0..9A..F)

određuju količinu crvene boje, cifre GG (G=0..9A..F) određuju količinu zelene boje, cifre BB (B=0..9A..F) određuju količinu plave boje)

boja ispisa teksta se postavlja atributom text (npr. <body text="#RRGGBB">)


boja linkova se postavlja atributima link, alink, vlink (npr. <body link="#RRGGBB" alink="#RRGGBB" vlink="#RRGGBB">) gde je

alink boja aktivirajućih linkova

vlink boja posećenih linkova

link boja ostalih linkova (neposećenih i neaktivnih)

Primer 5

<HTML><HEAD><TiTLE>Atributi BGCOLOR,TEXT </TITLE> </HEAD><BODY BGCOLOR="#808080" TEXT="#0000FF"><H1 ALIGN="CENTER"> Fields of Gold </H1>Many years have passed since those summer days<BR>Among the fields of barley<BR><FONT COLOR="#EE82EE">See the children run as the sun goes down</FONT> <BR>Among the fields of gold  </BODY> </HTML>

1. Unesite sadržaj ovog HTML dokumenta2. Sačuvajte ga pod nazivom peti.htm3. Upotrebite neki od browser-a za pregled datoteke peti.htm4. Uočite doseg važenja definicije boje teksta i fragmenta teksta

Heksadekadni tripleti boja

izgled boje naziv boje heksadecimalni triplet izgled boje

white FFFFFF

ghostwhite F8F8FF

whitesmoke F5F5F5

snow FFFAFA

azure F0FFFF

honeydew F0FFF0

mintcream F5FFFA

lightyellow FFFFE0

floralwhite FFFAF0

ivory FFFFF0

linen FAF0E6

oldlace FDF5E6

seashell FFF5EE

lavenderblush FFF0F5

lavender E6E6FA

gainsboro DCDCDC

lightgrey D3D3D3

silver C0C0C0

darkgray A9A9A9

lightslategray 778899

slategray 708090

gray 808080

dimgray 696969

black 000000

bisque FFE4C4

wheat F5DEB3

moccasin FFE4B5

peachpuff FFDAB9

mistyrose FFE4E1

pink FFC0CB

lightpink FFB6C1

rosybrown BC8F8F

coral FF7F50

tomato FF6347

orangered FF3300

red FF0000

crimson DC143C

indianred CD5C5C

firebrick B22222

darkred 8B0000

maroon 800000

brown A52A2A

saddlebrown 8B4513

sienna A0522D

chocolate D2691E

darkorange FF8C00

orange FFA500

lightsalmon FFA07A

darksalmon E9967A

salmon FA8072

sandybrown F4A460

navajowhite FFDEAD

blanchedalmond FFEBCD

papayawhip FFEFD5

antiquewhite FAEBD7

beige F5F5DC

cornsilk FFF8DC

palegoldenrod EEE8AA

khaki F0E68C

yellow FFFF00

gold FFD700

darkgoldenrod B8860B

peru CD853F

goldenrod DAA520

tan D2B48C

burlywood DEB887

darkkhaki BDB76B

chartreuse 7FFF00

greenyellow ADFF2F

lawngreen 7CFC00

lime 00FF00

springgreen 00FF7F

palegreen 98FB98

mediumspringgreen 00FA9A

limegreen 32CD32

mediumseagreen 3CB371

yellowgreen 9ACD32

mediumaquamarine 66CDAA

darkseagreen 8FBC8F

forestgreen 228B22

green 008000

seagreen 2E8B57

olive 808000

olivedrab 6B8E23

darkgreen 006400

darkslategray 2F4F4F

darkolivegreen 556B2F

aquamarine 7FFFD4

aqua 00FFFF

cyan 00FFFF

paleturquoise AFEEEE

turquoise 40E0D0

mediumturquoise 48D1CC

darkturquoise 00CED1

lightseagreen 20B2AA

cadetblue 5F9EA0

teal 008080

darkcyan 008B8B

steelblue 4682B4

deepskyblue 00BFFF

lightskyblue 87CEFA

lightsteelblue B0C4DE

powderblue B0E0E6

skyblue 87CEEB

cornflowerblue 6495ED

dodgerblue 1E90FF

mediumslateblue 7B68EE

slateblue 6A5ACD

royalblue 4169E1

blue 0000FF

mediumblue 0000CD

darkslateblue 483D8B

navy 000080

darkblue 00008B

midnightblue 191970

indigo 4B0082

blueviolet 8A2BE2

darkorchid 9932CC

darkviolet 9400D3

mediumpurple 9370DB

orchid DA70D6

mediumorchid BA55D3

fuchsia FF00FF

magenta FF00FF

hotpink FF69B4

violet EE82EE

thistle D8BFD8

plum DDA0DD

palevioletred DB7093

deeppink FF1493

mediumvioletred C71585

purple 800080

darkmagenta 8B008B

Sekcija BODY- formatiranje blokova teksta i karakteristike izgleda teksta

NASLOVI U DOKUMENTU

Postoji šest nivoa naslova i podnaslova koji se mogu koristiti u HTML dokument unutar <BODY> sekcije. U odnosu na tekst dokumenta naslov se prikazuje većim i/ili podebljanim fontom uz pojavu praznih linija pre i/ili posle naslova. Naslov prvog nivoa je tzv. glavni naslov i obeležava se sa <H1>...</H1>, a ostali redom: <H2>...</H2> <H3>...</H3> <H4>...</H4> <H5>...</H5> <H6>...</H6>

KOMENTAR

Tekst koji predstavlja komentarisanje HTML kôda se neće prikazati od strane browser-a, ali će biti vidljiv u izvornom kodu (source-u) HTML datoteke. Komentarom se smatra ma koji tekst između oznaka 

Primer 6

<HTML> <HEAD> <TITLE>Biografija </TITLE> </HEAD> <BODY> <H1>Sva moja zaposlenja</H1>  <H1>Obrazovanja</H1> <H2>Srednja </h2> <H2>Fakultet </H2> <H1>Sposobnosti </H1> <H2>Strani jezici </H2> <H2>Informatika </H2> <H3>Hardware</H3> <h3>Software</h3> <H2>Sport</H2> <H1>Razno</H1> </Body> </HTML>



FORMATIRANJE BLOKOVA TEKSTA

<P> . . . Neki tekst . . . </P>

oznaka za pasus koji se prikazuje na ekranu sa odgovarajućim proredom.Atribut ALIGN sa vrednostima left, right, center vrši poravnanje pasusa u odnosu na stranu (levo, desno, centrirano).

<DIV> . . . Neki tekst . . . </DIV>

oznaka za odeljak čiji atribut align ima iste vrednosti kao kod obeležja pasusa

<BLOCKQUOTE> . . . Neki tekst . . . </BLOCKQUOTE>

oznaka za poseban blok unutar teksta koji obično predstavlja citirani pasus teksta iz drugog izvora;Tipičan prikaz je uvučen ulevo i/ili iskošenim slovima.

PRELOM REDA

U opštem slučaju, tekst se prilikom prikazivanja u browser-u popunjava linijski prema veličini prozora, pri čemu se višestruke beline u kôdu HTML datoteke svode na jednu belinu u prikazu dokumenta. Ako je potrebno forsirati prelaz u sledeći red, onda se koristi tag <BR>. Ali, ako određeni fragment teksta ne sme da bude prelomljen može se koristiti tag <NOBR>..</NOBR> Element <BR> nema zatvarajući komplement </BR>

PREFORMATIRAN TEKST

Tekst koji se nalazi između oznaka <PRE> . . .</PRE> prikazuje se kao blok teksta sa neproporcionalnim fontom i doslovno u smislu da se poštuje prethodno izvršeno formatiranje. Dakle, tekst će biti prikazan na ekranu bez ikakvih intervencija u smislu brisanja belina.

Primer 7



REZULTAT:<HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2"> <TITLE>Prikazi me </TITLE></HEAD> <BODY> <P align="center">Prva rečenica prvog pasusa <BR>koji se prikazuje <BR> kao centriran.<BR>Druga rečenica centriranog prvog pasusa. </P> <P align="right">Drugi pasus <BR> poravnat <BR>zdesna</P><PRE>A B V 1</PRE><DIV align="left">Prvi odeljak poravnat <BR>sleva i <P align="center"> novi pasus u tom odeljku i<BR> pasus je<BR> centriran</P> <P align="right">Drugi pasus u<BR>prvom odeljku, a pasus <BR>je <BR>poravnat zdesna.</P>Nastavak odeljka van pasusa</DIV></BODY></HTML>

Sekcija BODY- liste za nabrajanje elemenata

NENUMERISANE LISTE

Koriste se za predstavljanje nenumerisane (unorderd) liste članova odvojenih praznih redom i označenih specijalnim vodećim znakom (bullet: kružić, disk, kvadrat). Lista počinje obeležjem <UL>, a završava se obeležjem </UL>. Svaki član liste počinje obeležjem <LI> koje ne mora da ima zatvarajući komplement oblika </LI>

Primer 8

<!- -Opisati dve nenumerisane (unorderd) liste gde prva lista je spisak 3 logicke operacije, a druga lista sadrzi imena tri osobe znacajne za programiranje, pri cemu ime Ada Byron da se prikaze istaknuto ( tag EM sluzi za isticanje)--><html><head> <title>Unorderd liste</title></head><body> <UL> Lista1 <li>OR <li>AND <li>NOT </UL> <UL>Lista 2 <li>Blaise Pascal<li><em>Augusta Ada Byron </EM> <li>Brian Kernighan </UL> </BODY> </HTML>


NUMERISANE LISTE

Koriste se za predstavljanje listi (spiskova) čiji članovi su numerisani (oredered). Lista počinje obeležjem <OL>, a završava se obeležjem </OL>. Svaki član liste počinje obeležjem <LI> koje ne mora da ima zatvarajući komplement oblika </LI>

Primer 9

<HTML><HEAD><TITLE> Ordered liste</TITLE> </HEAD><BODY><OL> <LI>1024 MB ili 2<sup>10</sup>MB<LI>1024*1024 KB ili 2<sup>20</sup>KB<LI>2<sup>30</sup>B </ol> </body> </html>




Primer 10 - ilustracija redefinisanja azbuke numeracije i početka nabrajanja kod numerisanih lista

<HTML> <HEAD> <TITLE> Atributi TYPE,START,VALUE </TITLE> </HEAD> <BODY> <OL TYPE=a>Jezici <LI>Pascal <LI>C <LI>C++ </OL><OL TYPE=I>Jezici <LI>Pascal <LI>C <LI>C++ </OL> <OL start=3>Jezici <li>Pascal <li value=8> C <li>C++ </OL> <OL TYPE=A>Jezici <LI>Pascal <LI>C <LI> C++ </OL> </BODY> </HTML>


Drugi domaći zadatak

Kreirati u direktorijumu public_html datoteku domaci2.htm i u njoj HTML kôd koji opisuje stranicu prikazanu na slici. ROK ZA POSTAVKU: 3.11. 2003.


Primer 11 - ilustracija kombinovane primene nenumerisanih i numerisanih listi

<HTML><HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2"> <TITLE>PRVA GODINA</TITLE></HEAD><BODY> <UL>Predmeti <LI>Analitička geometrija <LI>Linearna algebra <LI>Analiza 1 <LI>Osnovi programiranja <OL type=i><LI>utorak <li>četvrtak <LI>petak</OL> </UL> </BODY> </HTML>

OPISNE LISTE

Koriste se za predstavljanje listi čiji članovi su neki termini za kojima slede njihovi opisi. Lista počinje obeležjem <DL>, a završava se obeležjem </DL>. Svaki član liste sadrži termin koji se definiše i odgovarajući opis. Termin počinje obeležjem <DT>, a opis počinje obeležjem <DD>.

Primer 12

<HTML> <HEAD> <title>Primer definicione liste ili spiska </TITLE> </HEAD><DL><DT>virus <DD>program koji ima destruktivno dejstvo<DT>deadlock <DD>zablokiranost<DT>runtime error <DD>greska za vreme izvrsavanja programa </DL> </BODY> </HTML>

Primer 12a

<HTML> <HEAD> <TITLE>Moje definicije </title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2"> </HEAD> <BODY> <DL> <DT><STRONG>Default</STRONG> <DD>podrazumevano <DT><STRONG>Daktilograf</STRONG> <DD>Osoba koja zna i kucanje <EM> na slepo </EM> <DT><STRONG>Programer</STRONG> <DD>Osoba koja zna da piše programe i otklanja greške</DL> </BODY> </HTML>

Sekcija BODY- uključivanje slika Slike: <IMG>

Slika kao hiperveza

Slika može biti veza ka nekom drugom odredištu. U HTML dokumentu uključivanje slike kao hiper veze ima oblik:

<A HREF="URL odredista"> <IMG SRC="URL slike kao hiperveze" ...> </A>

Ako slika predstavlja hipervezu, okvir oko slike će biti u bojama veze koje su postavljene kao vrednosti atributa LINK, ALINK, VLINK. Da bi se izbeglo postavljanje okvira oko slike koja je hiperveza, onda se ka vrednost atributa BORDER (atributa obeležja IMG) postavi vrednost 0.

PRIMERI SLIKA KAO HIPERVEZA

1. Primer slike kao hiper-veze je slika u vrhu moje polazne strane posvećene OP-u , gde je animacija pisma veza sa programom pomoću kog se može formirati poruka upućena na [email protected] i poslati elektronskom poštom.

2. <A HREF="mailto:[email protected]">3. <IMG alt="Komunikacija putem e-mail" src="ebox.gif" border=0 width="80" height="72">4. </A>5. Primer manje slike koja je veza ka većoj slici je na mojoj strani posvećenoj algoritmima gde su sve slike veze ka većim i

preglednijim slikama. Oko slika koje su hiperveze su su ukinuti okviri.6. <A href="prva.gif"> <--veza ka vecoj slici prva.gif-->7. 8. <img src="prva.gif" alt="zdravo, svete" width=150 height =100" border="0"> 9. 10. </A>

Mapiranje slike na strani klijenta

Jedna slika može biti podeljena na više područja, a svakom području može biti dodeljena adresa nekog odredišta. Efekat je da ako se na istoj slici "klikne" na različita područja, može se stići na različita odredišta.

Tako slika postaje mapa preko koje se na strani klijenta (tj. u HTML dokumentu) definišu koordinate pojedinih područja. Koordinatni početak mape se nalazi u gornjem levom uglu slike, a koordinate predstavljaju udaljenost u pikselima u odnosu na koordinatni početak. ).

Atribut USEMAP taga IMG ukazuje da se radi o mapiranju na strani klijenta, a vrednost koja se dodeljuje atributu USEMAP određuje koja će se mapa koristiti za mapiranje slike u formatu sličnom atributu HREF kod hipertekstualnih veza. Ako počinje sa #, podrazumeva se da se mapa nalazi u istom HTML dokumentu kao i tag IMG.

Oblik upotrebe: <IMG SRC="URL slike" USEMAP="#ime mape">

Na primer: <IMG SRC="slika.gif" USEMAP="#prvamapa"> <IMG SRC="../slike/slika2.gif" USEMAP="mapa.html#mapa2">

Mapa se opisuje pomoću taga <MAP> . . . </MAP> Opis mape se može nalaziti u istom HTML dokumentu kao i tag umetanja slike uz koju se nalazi poziv za mapu, ali i u potpuno odvojenoj datoteci. (videti gornji primer). Bitno je da naziv mape (tj. vrednost atributa NAME) MORA odgovarati nazivu za upotrebu mape unutar taga IMG.

Unutar elementa MAP, za opis svakog područja slike koristi se elemnt AREA (nema svoj zatavrajući komplement), čiji su atributi SHAPE, HREF iCOORDS.

OBLIK UPOTREBE:

<MAP NAME="ime_mape_iz_USEMAP"> <AREA SHAPE="oblik podrucja 1" HREF="URL koji se poziva" COORDS="x1,y1,x2,y2,..."> <AREA SHAPE="oblik podrucja 2" HREF="URL koji se poziva" COORDS="x1,y1,x2,y2,..."> .............................................................. <AREA SHAPE="oblik podrucja 2" NOHREF COORDS="x1,y1,x2,y2,..."> </MAP>

Atribut oblika područja slike (SHAPE) može imati vrednosti:1. RECT- pravougaono područje na slici (kao COORDS vrednosti se navode koordinate gornjeg levog i donjeg desnog ugla

pravougaonika u pikselima)2. CIRCLE-kružnog područje na slici (kao COORDS vrednosti se navode kordinate centra i poluprečnik u pikselima)3. POLY za područje mnogougaonog oblika (kao COORDS vrednosti se koordinate temena poligonalne linije u pikselima-

spisak koordinata koje se redom povezuju, a poslednji par koordinata se povezuje sa prvim). Koordinate zone se mogu odrediti pomocu nekog programa za obradu slike (npr. Paint).

4. DEFAULT- podrazumevano područje koje nema koordinate i koristi se samo jednom na slici za područje koje obuhvata koordinate koje ne pripadaju nijednom od već definisanih područja

Broj upotrebljenih AREA alemenata može biti proizvoljan, a ako se dva područja preklapaju, prednost se daje onom koje je prvo definisano. Atribut NOHREF ukazuje da izbor tog područja neće prouzrokovati neku akciju. Atribut HREF ima vrednost URL-a odredišta na koje će se stići izborom tog područja. Ako se koristi relativno adresiranje, ona je potrebno voditi računa da će se adresa odrediti na osnovu URL-a mape slike kao osnove, a ne HTML dokumenta iz kog je pozvana mapa.

PRIMER MAPIRANE SLIKE

http://poincare.matf.bg.ac.rs/~jelenagr/uwit/htmlskola/sk5.htm

http://www.matf.bg.ac.yu/~jelenagr/op/alg1.html

http://www.matf.bg.ac.yu/~jelenagr/op/index.html

PRIMER mapirane slike se nalazi na strani koja opisuje razvojni put jednog programa napisanog, na primer, na programskom jeziku C i prati se razvojni put od ideje za rešavanje formulisanog problema do dobijanje izvršive verzije koja će biti pokrenuta na računaru.

Sekcija BODY- kontrole za prikaz tekstaTekst<P>...</P> pasus<DIV>...</DIV> odeljak<PRE>...</PRE> preformatiran tekst, doslovce<EM>...</EM> istaknuto<STRONG>...</STRONG> naročito istaknuto<ABBR> ... </ABBR> skraćenica<BR> novi red<CITE>... </CITE> citat unutar pasusa<BLOCKQUOTE>... citirani pasus</BLOCKQUOTE> <CODE> ... </CODE> programski kôd<INS>...</INS> ubačen odeljak<KBD>...</KBD> tekst sa tastature<Q>...</Q> kratak citat<SAMP>...</SAMP> primer teksta<SUB>...</SUB> indeks<SUP>...</SUP> eksponent<VAR>...</VAR> ime promenljive u tekstu

Oznake stila<STYLE>...</STYLE> Ubačene informacije o stilu

Kontrole za prikazivanje<CENTER>...</CENTER> centriranje<HR> podvlaka<B>...</B> crni slog<I>...</I> kurziv<BASEFONT> osnovni font<FONT>... </FONT> izgled fonta<BIG>...</BIG> povećava tekst<SMALL>...</SMALL> mali tekst<STRIKE>...</STRIKE> precrtan tekst<TT>...</TT> tekst fiksne širine, teletajp<U>...</U> podvučen tekst

Ilustracija logičkog i fizičkog stila

http://poincare.matf.bg.ac.rs/~jelenagr/uwit/htmlskola/Htm/h16.htm

http://www.matf.bg.ac.rs/~jelenagr/op/mapaslike.htm

Fizički stil

Normalan slog: Jedan primerCrni slog: Jedan primerKurzivni slog: Iskošen primerPodcrtavanje: Jedan primerTeleprinterski slog: Jedan primer

Precrtavanje: Jedan primer

Logički stil

Naročito istaknuto Jedan primerIstaknuto Jedan primerSegment koda Jedan primer

Sekcija BODY- kreiranje tabela

<TABLE>... </TABLE>

Atributi za zadavanje veličine ivice tabele: border (broj) za zadavanje boje ivice tabele: bordercolor (boja) za zadavanje gde će se tabela nalaziti unutar prozora: align (left, right, center) za zadavanje širine i visine tabele width, height (broj piksela ili procenta u odnosu na prozor) za podešavanje boje pozadine tabele bgcolor (boja) za podešavanje prostora između zida ćelije i sadržaja cellpadding (broj) za rastojanje između ćelija cellspacing (broj)

<CAPTION>...</CAPTION> natpis tabele koji se pojavljuje iznad ili ispod tabele, a lokacija se podešava atributom ALIGN.

Atributi za poravnanje align (left, right, top, bottom)

<TD>...</TD> ćelija u tabeli

Atributi

za poravnanje teksta u ćeliji: ulevo, udesno, centrirano, i ulevo i udesno, prema znaku definisanom atributom CHAR ALIGN (left, right, center, justify, char)

definiše znak prema kom će se tekst poravnati kada se koristi align=char i kad je prisutan atribut CHAROFF CHAR ("tekst")

definiše za koliko tačaka će tekst u ostatku reda biti pomeren od prve pojave znaka za poravnanje specificiranog atributom CHAR CHAROFF (broj)

broj kolona preko kojih se prostire ćelija COLSPAN (broj) broj redova preko kojih se prostire ćelija ROWSPAN (broj) prikaz sadržaja ćelije bez prelamanja NOWRAP

za vertikalno poravnanje teksta u ćeliji: prema vrhu ćelije, sredini ćelije, dnu, težišnoj liniji zajedničkoj za sve ćelije u redu VALIGN (top, middle, bottom, baseline)

<TH>... </TH> kao TD, samo centrirano i bold

<TR>...</TR> red u tabeli

Atributi BORDERCOLOR, BGCOLOR imaju značenja već pomenuta kod elementa TABLE, samo se njihove vrednosti sada odnose na red. Atributi ALIGN, VALIGN imaju značenja već pomenuta kod elementa TD, samo se njihove vrednosti sada odnose na red.

U ćelije tabele se mogu ubacivati i slike i liste i druge tabele. Za sve atribute važi da im je domen definisan u odnosu na pripadajući element, a inače prioritet imaju hijerarhijski niži elementi.

Ilustracija gore navedenih elemenata i atributa pri kreiranju tabela u HTML-u

Tabela 0

Tabela plataZARADA IME100.45 Pera1 000.56 Mika500 Perica

Tabela 1

GODINE ZARADA IME

52 100.45 Pera

54 1 000.56 Mika

500 Perica

Tabela 1.1

GODINE ZARADA IME

52 100.45 Pera

1 000.56 Mika

500 Perica


Tabela 2

52 100.45 Pera

54 1 000.56 Mika

500 Perica

Tabela 2.1

52 100.45 Pera

54 1 000.56 Mika

500 Perica

Tabela 2.2

Godine Zarada Ime

52 100.45 Pera

54 1 000.56 Mika

500 Perica

Tabela 2.3

52 100.45 Pera54 1 000.56 Mika 500 Perica

Tabela 3

Godine Zarada Ime

52 100.45 Pera

54 10000.56 Mika

500 Perica

Tabela 4

Godine Zarada Ime

52 100.45 Pera

54 10000.56 Mika

500 Perica

Tabela 5

Godine Zarada Ime

52 100.45 Pera

54 10000.56 Mika

500 Perica

Tabela 6

Godine Zarada Ime52 100.45 Pera54 10000.56Mika 500 Perica

Tabela 7

Godine Zarada Ime52 100.45 Pera54 10000.56 Mika 500 Perica

Tabela 8

Godine Zarada Ime

52 100.45 Pera

54 10000.56 Mika

500 Perica

tabela 8

gODINE zARADA IME

5214 000 LAZA

100.45 Pera

54 10000.56 Mika

tabela 9

GODINE ZARADA IME

54 100.45 Pera

nepoznato Sima

tabela 10

52 100.45 Pera

54 10 000.56 Mika

Tabela 11

razno Zarada Ime

A. nezaposlenB. neozenjen

A. C kategorija

100.45 Pera

A. ozenjen

A. polozio strucni10000.56 Mika

Sa tabelama smo se sreli u datoteci h16.htm

Karakterski entitetiomogućavaju korišćenje karaktera kojih nema u karakterskom skupu koji se koristi, ili kojih nema na tastaturi.

Karakterski entiteti se ne deklarišu, oni se jednostavno koriste.

Iza znaka &# navodi se pozicija karaktera u karakterskom skupu koji se koristi.

Na primer, ako se koristi karakterski skup ISO 8859-1 Latin 1,

onda je < znak za relacijski znak manje (<),

jer je 60 pozicija znaka za manje u istom karakterskom skupu.

Radi lakšeg korišćenja, karakterski entiteti se mogu imenovati, u stvari, zameniti opštim entitetima, kako je to učinjeno u HTML-u:

<!ENTITY ocirc "ô">

Karakterski entiteti definisani u jednom DTD-u, mogu se koristiti u ML dokumentima koji koriste taj DTD pomoću reference entiteta &ImeEntiteta;

(na primer, ô ).

To bi bilo o sa cirkumfleksom (naglasak sa prevojem), tj. ô ili ô

Kodovi za naša slova za kodnu stranu iso-8859-2 (istočno-evropske latinice)

u head sekciji potrebno je navesti: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">

Veliko slovo kod Malo slovo kod

Ć Ć ć ć

Č Č č č

Đ Đ đ đ


Š Š š š

Ž Ž ž ž

Bora Đorđević je rođen u Čačku.

ili

Bora Đorđević je rođen u Ćaćku.

Lista karaktera 1 (ISO-Latin-1 gornji deo)

<!ENTITY nbsp CDATA " " -- no-break space = non-breaking space, U+00A0 ISOnum --><!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 = broken vertical bar, U+00A6 ISOnum --><!ENTITY sect CDATA "§" -- section sign, U+00A7 ISOnum --><!ENTITY uml CDATA "¨" -- diaeresis = spacing diaeresis, U+00A8 ISOdia --><!ENTITY copy CDATA "©" -- copyright sign, U+00A9 ISOnum --><!ENTITY ordf CDATA "ª" -- feminine ordinal indicator, U+00AA ISOnum --><!ENTITY laquo CDATA "«" -- left-pointing double angle quotation mark = left pointing guillemet, U+00AB ISOnum --><!ENTITY not CDATA "¬" -- not sign, U+00AC ISOnum --><!ENTITY shy CDATA "" -- soft hyphen = discretionary hyphen, U+00AD ISOnum --><!ENTITY reg CDATA "®" -- registered sign = registered trade mark sign, U+00AE ISOnum --><!ENTITY macr CDATA "¯" -- macron = spacing macron = overline = APL overbar, U+00AF ISOdia --><!ENTITY deg CDATA "°" -- degree sign, U+00B0 ISOnum --><!ENTITY plusmn CDATA "±" -- plus-minus sign = plus-or-minus sign, U+00B1 ISOnum --><!ENTITY sup2 CDATA "²" -- superscript two = superscript digit two = squared, U+00B2 ISOnum --><!ENTITY sup3 CDATA "³" -- superscript three = superscript digit three = cubed, U+00B3 ISOnum --><!ENTITY acute CDATA "´" -- acute accent = spacing acute, U+00B4 ISOdia --><!ENTITY micro CDATA "µ" -- micro sign, U+00B5 ISOnum --><!ENTITY para CDATA "¶" -- pilcrow sign = paragraph sign, U+00B6 ISOnum --><!ENTITY middot CDATA "·" -- middle dot = Georgian comma = Greek middle dot, U+00B7 ISOnum -->

<!ENTITY cedil CDATA "¸" -- cedilla = spacing cedilla, U+00B8 ISOdia --><!ENTITY sup1 CDATA "¹" -- superscript one = superscript digit one, U+00B9 ISOnum --><!ENTITY ordm CDATA "º" -- masculine ordinal indicator, U+00BA ISOnum --><!ENTITY raquo CDATA "»" -- right-pointing double angle quotation mark = right pointing guillemet, U+00BB ISOnum --><!ENTITY frac14 CDATA "¼" -- vulgar fraction one quarter = fraction one quarter, U+00BC ISOnum --><!ENTITY frac12 CDATA "½" -- vulgar fraction one half = fraction one half, U+00BD ISOnum --><!ENTITY frac34 CDATA "¾" -- vulgar fraction three quarters = fraction three quarters, U+00BE ISOnum --><!ENTITY iquest CDATA "¿" -- inverted question mark = turned question mark, U+00BF ISOnum --><!ENTITY Agrave CDATA "À" -- latin capital letter A with grave = latin capital letter A grave, U+00C0 ISOlat1 --><!ENTITY Aacute CDATA "Á" -- latin capital letter A with acute, U+00C1 ISOlat1 --><!ENTITY Acirc CDATA "Â" -- latin capital letter A with circumflex, U+00C2 ISOlat1 --><!ENTITY Atilde CDATA "Ã" -- latin capital letter A with tilde, U+00C3 ISOlat1 --><!ENTITY Auml CDATA "Ä" -- latin capital letter A with diaeresis, U+00C4 ISOlat1 --><!ENTITY Aring CDATA "Å" -- latin capital letter A with ring above = latin capital letter A ring, U+00C5 ISOlat1 --><!ENTITY AElig CDATA "Æ" -- latin capital letter AE = latin capital ligature AE, U+00C6 ISOlat1 --><!ENTITY Ccedil CDATA "Ç" -- latin capital letter C with cedilla, U+00C7 ISOlat1 --><!ENTITY Egrave CDATA "È" -- latin capital letter E with grave, U+00C8 ISOlat1 --><!ENTITY Eacute CDATA "É" -- latin capital letter E with acute, U+00C9 ISOlat1 --><!ENTITY Ecirc CDATA "Ê" -- latin capital letter E with circumflex, U+00CA ISOlat1 --><!ENTITY Euml CDATA "Ë" -- latin capital letter E with diaeresis, U+00CB ISOlat1 --><!ENTITY Igrave CDATA "Ì" -- latin capital letter I with grave, U+00CC ISOlat1 --><!ENTITY Iacute CDATA "Í" -- latin capital letter I with acute, U+00CD ISOlat1 --><!ENTITY Icirc CDATA "Î" -- latin capital letter I with circumflex, U+00CE ISOlat1 --><!ENTITY Iuml CDATA "Ï" -- latin capital letter I with diaeresis, U+00CF ISOlat1 --><!ENTITY ETH CDATA "Ð" -- latin capital letter ETH, U+00D0 ISOlat1 --><!ENTITY Ntilde CDATA "Ñ" -- latin capital letter N with tilde, U+00D1 ISOlat1 --><!ENTITY Ograve CDATA "Ò" -- latin capital letter O with grave, U+00D2 ISOlat1 --><!ENTITY Oacute CDATA "Ó" -- latin capital letter O with acute, U+00D3 ISOlat1 --><!ENTITY Ocirc CDATA "Ô" -- latin capital letter O with circumflex, U+00D4 ISOlat1 --><!ENTITY Otilde CDATA "Õ" -- latin capital letter O with tilde, U+00D5 ISOlat1 --><!ENTITY Ouml CDATA "Ö" -- latin capital letter O with diaeresis, U+00D6 ISOlat1 --><!ENTITY times CDATA "×" -- multiplication sign, U+00D7 ISOnum --><!ENTITY Oslash CDATA "Ø" -- latin capital letter O with stroke = latin capital letter O slash, U+00D8 ISOlat1 --><!ENTITY Ugrave CDATA "Ù" -- latin capital letter U with grave, U+00D9 ISOlat1 -->

<!ENTITY Uacute CDATA "Ú" -- latin capital letter U with acute, U+00DA ISOlat1 --><!ENTITY Ucirc CDATA "Û" -- latin capital letter U with circumflex, U+00DB ISOlat1 --><!ENTITY Uuml CDATA "Ü" -- latin capital letter U with diaeresis, U+00DC ISOlat1 --><!ENTITY Yacute CDATA "Ý" -- latin capital letter Y with acute, U+00DD ISOlat1 --><!ENTITY THORN CDATA "Þ" -- latin capital letter THORN, U+00DE ISOlat1 --><!ENTITY szlig CDATA "ß" -- latin small letter sharp s = ess-zed, U+00DF ISOlat1 --><!ENTITY agrave CDATA "à" -- latin small letter a with grave = latin small letter a grave, U+00E0 ISOlat1 --><!ENTITY aacute CDATA "á" -- latin small letter a with acute, U+00E1 ISOlat1 --><!ENTITY acirc CDATA "â" -- latin small letter a with circumflex, U+00E2 ISOlat1 --><!ENTITY atilde CDATA "ã" -- latin small letter a with tilde, U+00E3 ISOlat1 --><!ENTITY auml CDATA "ä" -- latin small letter a with diaeresis, U+00E4 ISOlat1 --><!ENTITY aring CDATA "å" -- latin small letter a with ring above = latin small letter a ring, U+00E5 ISOlat1 --><!ENTITY aelig CDATA "æ" -- latin small letter ae = latin small ligature ae, U+00E6 ISOlat1 --><!ENTITY ccedil CDATA "ç" -- latin small letter c with cedilla, U+00E7 ISOlat1 --><!ENTITY egrave CDATA "è" -- latin small letter e with grave, U+00E8 ISOlat1 --><!ENTITY eacute CDATA "é" -- latin small letter e with acute, U+00E9 ISOlat1 --><!ENTITY ecirc CDATA "ê" -- latin small letter e with circumflex, U+00EA ISOlat1 --><!ENTITY euml CDATA "ë" -- latin small letter e with diaeresis, U+00EB ISOlat1 --><!ENTITY igrave CDATA "ì" -- latin small letter i with grave, U+00EC ISOlat1 --><!ENTITY iacute CDATA "í" -- latin small letter i with acute, U+00ED ISOlat1 --><!ENTITY icirc CDATA "î" -- latin small letter i with circumflex, U+00EE ISOlat1 --><!ENTITY iuml CDATA "ï" -- latin small letter i with diaeresis, U+00EF ISOlat1 --><!ENTITY eth CDATA "ð" -- latin small letter eth, U+00F0 ISOlat1 --><!ENTITY ntilde CDATA "ñ" -- latin small letter n with tilde, U+00F1 ISOlat1 --><!ENTITY ograve CDATA "ò" -- latin small letter o with grave, U+00F2 ISOlat1 --><!ENTITY oacute CDATA "ó" -- latin small letter o with acute, U+00F3 ISOlat1 --><!ENTITY ocirc CDATA "ô" -- latin small letter o with circumflex, U+00F4 ISOlat1 --><!ENTITY otilde CDATA "õ" -- latin small letter o with tilde, U+00F5 ISOlat1 --><!ENTITY ouml CDATA "ö" -- latin small letter o with diaeresis, U+00F6 ISOlat1 --><!ENTITY divide CDATA "÷" -- division sign, U+00F7 ISOnum --><!ENTITY oslash CDATA "ø" -- latin small letter o with stroke, = latin small letter o slash, U+00F8 ISOlat1 --><!ENTITY ugrave CDATA "ù" -- latin small letter u with grave, U+00F9 ISOlat1 --><!ENTITY uacute CDATA "ú" -- latin small letter u with acute, U+00FA ISOlat1 --><!ENTITY ucirc CDATA "û" -- latin small letter u with circumflex, U+00FB ISOlat1 -->

<!ENTITY uuml CDATA "ü" -- latin small letter u with diaeresis, U+00FC ISOlat1 --><!ENTITY yacute CDATA "ý" -- latin small letter y with acute, U+00FD ISOlat1 --><!ENTITY thorn CDATA "þ" -- latin small letter thorn, U+00FE ISOlat1 --><!ENTITY yuml CDATA "ÿ" -- latin small letter y with diaeresis, U+00FF ISOlat1 -->

Skup znakova iz drugih latiničnih abeceda, opštih znakova za interpunkciju i simbola za euro

<!ENTITY quot CDATA """ -- quotation mark = APL quote, U+0022 ISOnum --><!ENTITY amp CDATA "&" -- ampersand, U+0026 ISOnum --><!ENTITY lt CDATA "<" -- less-than sign, U+003C ISOnum --><!ENTITY gt CDATA ">" -- greater-than sign, U+003E ISOnum --><!ENTITY OElig CDATA "Œ" -- latin capital ligature OE, U+0152 ISOlat2 --><!ENTITY oelig CDATA "œ" -- latin small ligature oe, U+0153 ISOlat2 --><!ENTITY Scaron CDATA "Š" -- latin capital letter S with caron, U+0160 ISOlat2 --><!ENTITY scaron CDATA "š" -- latin small letter s with caron, U+0161 ISOlat2 --><!ENTITY Yuml CDATA "Ÿ" -- latin capital letter Y with diaeresis, U+0178 ISOlat2 --><!ENTITY circ CDATA "ˆ" -- modifier letter circumflex accent, U+02C6 ISOpub --><!ENTITY tilde CDATA "˜" -- small tilde, U+02DC ISOdia --><!ENTITY ensp CDATA " " -- en space, U+2002 ISOpub --><!ENTITY emsp CDATA " " -- em space, U+2003 ISOpub --><!ENTITY thinsp CDATA " " -- thin space, U+2009 ISOpub --><!ENTITY zwnj CDATA "‌" -- zero width non-joiner, U+200C NEW RFC 2070 --><!ENTITY zwj CDATA "‍" -- zero width joiner, U+200D NEW RFC 2070 --><!ENTITY lrm CDATA "‎" -- left-to-right mark, U+200E NEW RFC 2070 --><!ENTITY rlm CDATA "‏" -- right-to-left mark, U+200F NEW RFC 2070 --><!ENTITY ndash CDATA "–" -- en dash, U+2013 ISOpub --><!ENTITY mdash CDATA "—" -- em dash, U+2014 ISOpub --><!ENTITY lsquo CDATA "‘" -- left single quotation mark, U+2018 ISOnum --><!ENTITY rsquo CDATA "’" -- right single quotation mark, U+2019 ISOnum --><!ENTITY sbquo CDATA "‚" -- single low-9 quotation mark, U+201A NEW --><!ENTITY ldquo CDATA "“" -- left double quotation mark, U+201C ISOnum --><!ENTITY rdquo CDATA "”" -- right double quotation mark,

U+201D ISOnum --><!ENTITY bdquo CDATA "„" -- double low-9 quotation mark, U+201E NEW --><!ENTITY dagger CDATA "†" -- dagger, U+2020 ISOpub --><!ENTITY Dagger CDATA "‡" -- double dagger, U+2021 ISOpub --><!ENTITY permil CDATA "‰" -- per mille sign, U+2030 ISOtech --><!ENTITY lsaquo CDATA "‹" -- single left-pointing angle quotation mark, U+2039 ISO proposed --><!ENTITY rsaquo CDATA "›" -- single right-pointing angle quotation mark, U+203A ISO proposed --><!ENTITY euro CDATA "€" -- euro sign, U+20AC NEW -->

Skup grčkih slova, strelica, matematičkih simbola, raznih tehničkih i simboličkih znakova

<!ENTITY fnof CDATA "ƒ" -- latin small f with hook = function = florin, U+0192 ISOtech --><!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 ISOgrk3 --><!ENTITY Delta CDATA "Δ" -- greek capital letter delta, U+0394 ISOgrk3 --><!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 ISOgrk3 --><!ENTITY Iota CDATA "Ι" -- greek capital letter iota, U+0399 --><!ENTITY Kappa CDATA "Κ" -- greek capital letter kappa, U+039A --><!ENTITY Lambda CDATA "Λ" -- greek capital letter lambda, U+039B ISOgrk3 --><!ENTITY Mu CDATA "Μ" -- greek capital letter mu, U+039C --><!ENTITY Nu CDATA "Ν" -- greek capital letter nu, U+039D --><!ENTITY Xi CDATA "Ξ" -- greek capital letter xi, U+039E ISOgrk3 --><!ENTITY Omicron CDATA "Ο" -- greek capital letter omicron, U+039F --><!ENTITY Pi CDATA "Π" -- greek capital letter pi, U+03A0 ISOgrk3 --><!ENTITY Rho CDATA "Ρ" -- greek capital letter rho, U+03A1 --><!ENTITY Sigma CDATA "Σ" -- greek capital letter sigma, U+03A3 ISOgrk3 --><!ENTITY Tau CDATA "Τ" -- greek capital letter tau, U+03A4 --><!ENTITY Upsilon CDATA "Υ" -- greek capital letter upsilon, U+03A5 ISOgrk3 --><!ENTITY Phi CDATA "Φ" -- greek capital letter phi, U+03A6 ISOgrk3 --><!ENTITY Chi CDATA "Χ" -- greek capital letter chi, U+03A7 --><!ENTITY Psi CDATA "Ψ" -- greek capital letter psi, U+03A8 ISOgrk3 -->

<!ENTITY Omega CDATA "Ω" -- greek capital letter omega, U+03A9 ISOgrk3 --><!ENTITY alpha CDATA "α" -- greek small letter alpha, U+03B1 ISOgrk3 --><!ENTITY beta CDATA "β" -- greek small letter beta, U+03B2 ISOgrk3 --><!ENTITY gamma CDATA "γ" -- greek small letter gamma, U+03B3 ISOgrk3 --><!ENTITY delta CDATA "δ" -- greek small letter delta, U+03B4 ISOgrk3 --><!ENTITY epsilon CDATA "ε" -- greek small letter epsilon, U+03B5 ISOgrk3 --><!ENTITY zeta CDATA "ζ" -- greek small letter zeta, U+03B6 ISOgrk3 --><!ENTITY eta CDATA "η" -- greek small letter eta, U+03B7 ISOgrk3 --><!ENTITY theta CDATA "θ" -- greek small letter theta, U+03B8 ISOgrk3 --><!ENTITY iota CDATA "ι" -- greek small letter iota, U+03B9 ISOgrk3 --><!ENTITY kappa CDATA "κ" -- greek small letter kappa, U+03BA ISOgrk3 --><!ENTITY lambda CDATA "λ" -- greek small letter lambda, U+03BB ISOgrk3 --><!ENTITY mu CDATA "μ" -- greek small letter mu, U+03BC ISOgrk3 --><!ENTITY nu CDATA "ν" -- greek small letter nu, U+03BD ISOgrk3 --><!ENTITY xi CDATA "ξ" -- greek small letter xi, U+03BE ISOgrk3 --><!ENTITY omicron CDATA "ο" -- greek small letter omicron, U+03BF NEW --><!ENTITY pi CDATA "π" -- greek small letter pi, U+03C0 ISOgrk3 --><!ENTITY rho CDATA "ρ" -- greek small letter rho, U+03C1 ISOgrk3 --><!ENTITY sigmaf CDATA "ς" -- greek small letter final sigma, U+03C2 ISOgrk3 --><!ENTITY sigma CDATA "σ" -- greek small letter sigma, U+03C3 ISOgrk3 --><!ENTITY tau CDATA "τ" -- greek small letter tau, U+03C4 ISOgrk3 --><!ENTITY upsilon CDATA "υ" -- greek small letter upsilon, U+03C5 ISOgrk3 --><!ENTITY phi CDATA "φ" -- greek small letter phi, U+03C6 ISOgrk3 --><!ENTITY chi CDATA "χ" -- greek small letter chi, U+03C7 ISOgrk3 --><!ENTITY psi CDATA "ψ" -- greek small letter psi, U+03C8 ISOgrk3 --><!ENTITY omega CDATA "ω" -- greek small letter omega, U+03C9 ISOgrk3 --><!ENTITY thetasym CDATA "ϑ" -- greek small letter theta symbol, U+03D1 NEW --><!ENTITY upsih CDATA "ϒ" -- greek upsilon with hook symbol, U+03D2 NEW --><!ENTITY piv CDATA "ϖ" -- greek pi symbol, U+03D6 ISOgrk3 --><!ENTITY Dj CDATA "Ђ" -- --><!ENTITY dj CDATA "ђ" -- --><!ENTITY J CDATA "Ј" -- --><!ENTITY j CDATA "ј" -- --><!ENTITY Lj CDATA "Љ" -- --><!ENTITY lJ CDATA "љ" -- --><!ENTITY Nj CDATA "Њ" -- --><!ENTITY nj CDATA "њ" -- --><!ENTITY Cx CDATA "Ћ" -- --><!ENTITY cx CDATA "ћ" -- --><!ENTITY Dz CDATA "Џ" -- --><!ENTITY dz CDATA "џ" -- --><!ENTITY B CDATA "Б" -- --><!ENTITY b CDATA "б" -- --><!ENTITY V CDATA "В" -- --><!ENTITY v CDATA "Җ" -- --><!ENTITY G CDATA "Г" -- --><!ENTITY g CDATA "г" -- --><!ENTITY D CDATA "Д" -- --><!ENTITY d CDATA "Ҙ" -- --><!ENTITY E CDATA "Е" -- --><!ENTITY e CDATA "е" -- --><!ENTITY Zx CDATA "Ж" -- --><!ENTITY zx CDATA "Қ" -- --><!ENTITY Z CDATA "З" -- -->

<!ENTITY z CDATA "з" -- --><!ENTITY I CDATA "И" -- --><!ENTITY i CDATA "Ҝ" -- --><!ENTITY K CDATA "К" -- --><!ENTITY k CDATA "к" -- --><!ENTITY L CDATA "Л" -- --><!ENTITY L CDATA "ҟ" -- --><!ENTITY M CDATA "М" -- --><!ENTITY m CDATA "м" -- --><!ENTITY N CDATA "Н" -- --><!ENTITY n CDATA "ҡ" -- --><!ENTITY O CDATA "О" -- --><!ENTITY o CDATA "Ң" -- -->...<!ENTITY C CDATA "Ц" -- --><!ENTITY c CDATA "Ҫ" -- --><!ENTITY Cy CDATA "Ч" -- --><!ENTITY cy CDATA "ҫ" -- --><!ENTITY Sx CDATA "Ш" -- --><!ENTITY sx CDATA "Ҭ" -- --><!ENTITY bull CDATA "•" -- bullet = black small circle, U+2022 ISOpub --><!ENTITY hellip CDATA "…" -- horizontal ellipsis = three dot leader, U+2026 ISOpub --><!ENTITY prime CDATA "′" -- prime = minutes = feet, U+2032 ISOtech --><!ENTITY Prime CDATA "″" -- double prime = seconds = inches, U+2033 ISOtech --><!ENTITY oline CDATA "‾" -- overline = spacing overscore, U+203E NEW --><!ENTITY frasl CDATA "⁄" -- fraction slash, U+2044 NEW --><!ENTITY weierp CDATA "℘" -- script capital P = power set = Weierstrass p, U+2118 ISOamso --><!ENTITY image CDATA "ℑ" -- blackletter capital I = imaginary part, U+2111 ISOamso --><!ENTITY real CDATA "ℜ" -- blackletter capital R = real part symbol, U+211C ISOamso --><!ENTITY trade CDATA "™" -- trade mark sign, U+2122 ISOnum --><!ENTITY alefsym CDATA "ℵ" -- alef symbol = first transfinite cardinal, U+2135 NEW --><!ENTITY larr CDATA "←" -- leftwards arrow, U+2190 ISOnum --><!ENTITY uarr CDATA "↑" -- upwards arrow, U+2191 ISOnum--><!ENTITY rarr CDATA "→" -- rightwards arrow, U+2192 ISOnum --><!ENTITY darr CDATA "↓" -- downwards arrow, U+2193 ISOnum --><!ENTITY harr CDATA "↔" -- left right arrow, U+2194 ISOamsa --><!ENTITY crarr CDATA "↵" -- downwards arrow with corner leftwards = carriage return, U+21B5 NEW --><!ENTITY lArr CDATA "⇐" -- leftwards double arrow, U+21D0 ISOtech --><!ENTITY uArr CDATA "⇑" -- upwards double arrow, U+21D1 ISOamsa --><!ENTITY rArr CDATA "⇒" -- rightwards double arrow, U+21D2 ISOtech --><!ENTITY dArr CDATA "⇓" -- downwards double arrow, U+21D3 ISOamsa --><!ENTITY hArr CDATA "⇔" -- left right double arrow, U+21D4 ISOamsa --><!ENTITY forall CDATA "∀" -- for all, U+2200 ISOtech --><!ENTITY part CDATA "∂" -- partial differential, U+2202 ISOtech --><!ENTITY exist CDATA "∃" -- there exists, U+2203 ISOtech -->

<!ENTITY empty CDATA "∅" -- empty set = null set = diameter, U+2205 ISOamso --><!ENTITY nabla CDATA "∇" -- nabla = backward difference, U+2207 ISOtech --><!ENTITY isin CDATA "∈" -- element of, U+2208 ISOtech --><!ENTITY notin CDATA "∉" -- not an element of, U+2209 ISOtech --><!ENTITY ni CDATA "∋" -- contains as member, U+220B ISOtech --><!ENTITY prod CDATA "∏" -- n-ary product = product sign, U+220F ISOamsb --><!ENTITY sum CDATA "∑" -- n-ary sumation, U+2211 ISOamsb --><!ENTITY minus CDATA "−" -- minus sign, U+2212 ISOtech --><!ENTITY lowast CDATA "∗" -- asterisk operator, U+2217 ISOtech --><!ENTITY radic CDATA "√" -- square root = radical sign, U+221A ISOtech --><!ENTITY prop CDATA "∝" -- proportional to, U+221D ISOtech --><!ENTITY infin CDATA "∞" -- infinity, U+221E ISOtech --><!ENTITY ang CDATA "∠" -- angle, U+2220 ISOamso --><!ENTITY and CDATA "∧" -- logical and = wedge, U+2227 ISOtech --><!ENTITY or CDATA "∨" -- logical or = vee, U+2228 ISOtech --><!ENTITY cap CDATA "∩" -- intersection = cap, U+2229 ISOtech --><!ENTITY cup CDATA "∪" -- union = cup, U+222A ISOtech --><!ENTITY int CDATA "∫" -- integral, U+222B ISOtech --><!ENTITY there4 CDATA "∴" -- therefore, U+2234 ISOtech --><!ENTITY sim CDATA "∼" -- tilde operator = varies with = similar to, U+223C ISOtech --><!ENTITY cong CDATA "≅" -- approximately equal to, U+2245 ISOtech --><!ENTITY asymp CDATA "≈" -- almost equal to = asymptotic to, U+2248 ISOamsr --><!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 ISOtech --><!ENTITY sub CDATA "⊂" -- subset of, U+2282 ISOtech --><!ENTITY sup CDATA "⊃" -- superset of, U+2283 ISOtech --> <!ENTITY nsub CDATA "⊄" -- not a subset of, U+2284 ISOamsn --><!ENTITY sube CDATA "⊆" -- subset of or equal to, U+2286 ISOtech --><!ENTITY supe CDATA "⊇" -- superset of or equal to, U+2287 ISOtech --><!ENTITY oplus CDATA "⊕" -- circled plus = direct sum, U+2295 ISOamsb --><!ENTITY otimes CDATA "⊗" -- circled times = vector product, U+2297 ISOamsb --><!ENTITY perp CDATA "⊥" -- up tack = orthogonal to = perpendicular, U+22A5 ISOtech --><!ENTITY sdot CDATA "⋅" -- dot operator, U+22C5 ISOamsb --><!ENTITY lceil CDATA "⌈" -- left ceiling = apl upstile, U+2308 ISOamsc --><!ENTITY rceil CDATA "⌉" -- right ceiling, U+2309 ISOamsc --><!ENTITY lfloor CDATA "⌊" -- left floor = apl downstile, U+230A ISOamsc --><!ENTITY rfloor CDATA "⌋" -- right floor, U+230B ISOamsc --><!ENTITY lang CDATA "〈" -- left-pointing angle bracket = bra, U+2329 ISOtech --><!ENTITY rang CDATA "〉" -- right-pointing angle bracket = ket,

U+232A ISOtech --><!ENTITY loz CDATA "◊" -- lozenge, U+25CA ISOpub --><!ENTITY spades CDATA "♠" -- black spade suit, U+2660 ISOpub --><!ENTITY clubs CDATA "♣" -- black club suit = shamrock, U+2663 ISOpub --><!ENTITY hearts CDATA "♥" -- black heart suit = valentine, U+2665 ISOpub --><!ENTITY diams CDATA "♦" -- black diamond suit, U+2666 ISOpub -->

Obelešavanje dijakritičkih karakera

Opis karaktera iz azbuke/abecede

U odeljku zaglavlja (<HEAD>) se definiše kodna strana koja se koristi za prikaz karaktera (npr. ISO-8859-1 za zapadno-evropsku latinicu, ISO-8859-2 za istočno-evropske latinice, ISO-8859-5 za ćirilicu). Zadavanje kodne strane se vrši pomoću meta-zaglavlja META oblika:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">

Za dijakritičke karaktere u srpskoj latinici koriste se kôdovi prema ISO-8859-2

Karakteri ćiriličnog pisma se mogu kodirati prema standardu ISO 8859-5. Postoje i drugi sistemi kodiranja od kojih je posebno značajan UNICODE u kome se koriste dva bajta za kodiranje jednog karaktera. Ovaj standard je restrikcija na dva bajta standarda ISO 10646 u kome se jedan karakter kodira sa četiri bajta.

UTF-8 za multi-lingual HTML dokument

OkviriUpotreba okvira (engl. frame) omogućava da postoji dokument koji se sastojati od sadržaja više od jednog dokumenta. Okviri su podržani u novijim verzijama WWW čitača

Frame-ovi se formiraju upotrebom <frameset> i <frame> tagova. Dokument koji sadrži <frameset> tag u principu ne mora imati <body> tag.

Osnovni atributi <frameset> taga su rows i cols koji određuju kako će biti raspoređeni redovi i kolone (FRAMESET može imati samo redove, samo kolone ili i redove i kolone) Veličina pojedinih redova ili kolona moče biti specificirana na tri načina i to:

1. procentualno u odnosu na velicinu prozora (npr. "70%,30%"),2. u pikselima (npr.150,600),3. relativno u odnosu na drugi red odn. kolonu (npr. "*,3*");

Apsolutne vrednosti su uvek u pikselima, procentualne veličine u odnosu na čitav prostor, a relativne vrednosti u odnosu na preostali prostor.

Unutar <frameset> taga mora postojati tačno onoliko <frame> tagova koliko je za dati frameset deklarisano da ima frame-ova. Osnovni atribut <frame> taga je SRC kojim se zadaje dokument koji će popuniti dati frame

Dodatni atributi <frameset> taga su BORDER (kojim se određuje debljina okvira), frameborder (koji može imati vrednosti yes ili no i kojim se odredjuje da li okvir ima 3D izgled), te bordercolor (kojim se određuje boja okvira)

Dodatni atributi <frame> taga su marginwidth i marginheight (kojima se određuju veličine margina u pikselima), zatim bordercolor (kojim se određuje boja okvira), scrolling (sa vrednostima auto, yes ili no kojim se određuje prisutnost scroll-bar-ova), te noresize (koji ako postoji onemogućava promenu veličine frame-a) Da bi se postavio link na drugi frame, potrebno je imenovati taj drugi frame pomoću atributa name, a potom u <a> tagu kojim se postavlja link navesti pod target atributom to ime. Postoji nekoliko predefinisanih target-a i to su "_blank" za novi prozor, "_self" za isti frame, "_parent" za roditeljskiframe i "_top" za tekuci prozor Frame-ovi se mogu ugnježdavati

Primer 18. Dokument sadrži adrese dokumenata iz odeljka o hipervezama i odeljka o tabelama.

<HTML> <HEAD> <TITLE> Okviri </TITLE> </HEAD> <FRAMESET COLS="30%,*"> <FRAME SRC="mapaslike.htm"> <FRAME SRC="h17.htm"> <NOFRAMES> Nemoguc prikaz sa ovim browser-om </NOFRAMES> </FRAMESET> </HTML>

Vizuelni prikaz HTML dokumenta.

Primer 19. Tri okvira: prozor podeljen u odnosu 40% za levi podprozor, od desnog podprozora, 20% je za gornji podprozor.

<HTML> <HEAD> <TITLE>Tri okvira</TITLE> </HEAD> <FRAMESET COLS="40%, *"> <FRAME SRC="mapaslike.htm"> <FRAMESET ROWS="20%,*"> <FRAME SRC="mapaslike.htm"> <FRAME SRC="mapaslike.htm">


</FRAMESET> </FRAMESET> </HTML>

Uvod u programiranje u programskom jeziku C - razvojni put jednog programa

Razvojni put jednog programaNaredna slika je mapa slike sa osteljivim područjima, tj. pojedini fragmenti slike su hiperveze ka HTML dokumentima koji šire objašnjavaju svaku od faza u razvojnom putu programa. Dakle, sa slike postoje veze ka više od jednog HTML dokumenta.

Formulari ili forme

Primer formulara sa obradom

Forme služe za prikupljanje informacija od posetilaca stranice. Forme se specificiraju unutar <FORM> taga čiji su atributi ACTION (sa vrednošću koja treba da bude e-mail adresa onoga ko prikuplja informacije) i method (čija vrednost može biti POST ili GET, ali se češće koristi POST)

Na formularu može postojati veći broj kontrola koje se zadaju odgovarajućim tagovima. Za unos veće količine teksta koristi se <textarea> tag čiji su atributi name (određuje naziv kontrole), te rows i cols (određuju broj redova, odnosno kolona teksta). Tag <textarea> je složen i tekst koji se stavi izmedju ulaznog i izlaznog taga se inicijalno pojavljuje u polju za unos.

Sledeći tip kontrole su liste za selekciju, a tag za listu je <select> . Pojedine stavke liste se navode pod <option> tagovima. Atributi <select> taga suname (kojim se zadaje ime kontrole), size (kojim se određuje veličina kontrole, ako nije naveden kontrola će biti u obliku padajuće liste) i multiple(koji ako postoji određuje da je moguće istovremeno selektovati više stavki iz liste).

http://alas.matf.bg.ac.yu/~grmusa/forma.html

Atributi taga <option> su value (vrednost koja će biti pridružena nazivu liste ako je ta opcija selektovana) i selected (koji određuje da li je opcija inicijalno selektovana)

Postoji grupa kontrola koje se navode <input> tagom, a međusobno se razlikuju na osnovu atribut type. Prva od njih je tekstualno polje koje omogućava unos jedne kolone teksta, ima vrednost jednaku text i ostale atribute: name (određuje ime kontrole), value (sadrzi tekst koji se inicijalno pojavljuje u kontroli), size (odredjuje velicinu kontrole) i maxlength (odredjuje maksimalan broj slova koja se mogu uneti u polje

Sledeca kontrola koja se navodi <input> tagom ima checkbox za vrednost type atributa i njome se ukljucuje ili iskljucuje odredjena stavka u izbor; atributi ovog taga su name (ime kontrole), value (vrednost koja ce biti prosledjena ako je data stavka izabrana) i checked (ako postoji, odredjuje da ta stavka inicijalno bude selektovana)

Slicna prethodnoj kontroli je kontrola sa radio tipom; parametri su isti ali je razlika u tome sto vise ovakvih dugmadi mogu imati isto ime i samo jedno od dugmadi unutar grupe dugmadi sa istim imenom moze biti selektovano

Poslednje dve kontole koja se zadaju <input> tagom imaju za atribut type vrednosti reset, odnosno submit i sluze za vracanje svih kontrola unutar forme na pocetne vrednosti, odnosno za odasiljanje unosa. Jedini dodatni parametar ovih kontrola je value cija vrednost odredjuje tekst koji ce se pojaviti na odgovarajucim dugmicima.

StiloviPrimer 1 <FONT face="Arial" size="5" color="#FF00FF" > Izdvojen tekst </FONT>

Primer 2 <strong style="color:black;background-color:#00CED1"> Izdvojen tekst </strong>

Stilovi su usvojeni od strane W3C u decembru 1996 i predstavljaju način za kontrolu prikaza Web strana. Nastao je sa ciljem proširivanja HTML-a bez dodavanja novih elemenata i atributa. Microsoft je najpre kreirao šeme stilove nalik na stilove u tekst editoru Word, i omogućio razdvajanje sadrzaja i prezentacije. Zatim je W3C je usvojio CSS (Cascading Style Sheets) kao deo HTML standarda i omogućio jednostavno unapređivanje Web dokumenata.

Dakle, i HTML (poput aplikacija za pripremu štampe) podržava koncept stila i šablona. Stil definiše dizajn i raspored informacija za dokumente: podešavanje margina, proreda, boja, fontova, poravnanja, precizna kontrola pojavljivanja elemenata u HTML dokumentu,...

Odvajanjem forme prikaza od sadržaja smanjuje se potreba za uvođenjem nestandardnih elemenata koji obezbeđuju precizniji

izgled ili kontrolišu raspored unutar sadržaja dokumenta oznake i kontrole ne moraju biti direktno umetnute u HTML, jer je to sada pitanje stila autori i korisnici mogu da utiču na predstavljanje dokumenata, jer je obezbeđena

zajednička definicija za dobijanje finalnog dokumenta, a pri tom se ne gubi nezavisnost od softvera i uređaja

Da li postoji razlika između HTML i CSS?

HTML se koristi da definiše strukturu Web dokumenta.CSS omogucava formatiranje definisane strukture Web dokumenta.

Zašto koristiti CSS?

Neki od razloga zašto biste koristili CSS kod izrade vaših Web strana su:

1. Lakoća korišcenja: jedan CSS dokument može kontrolisati izgled više HTML strana. Da bi se promenio njihov izgled, potrebno je promeniti samo CSS, a ne svaku pojedinačnu stranu.

2. Manja veličina: CSS omogućava da se potpuno uklone svi tagovi i svi atributi koji definišu izgled Web strana ( vrednosti za širinu, visinu, fontove, boje, slike pozadine), što smanjuje veličinu Web strana.

3. Veća kontrola: CSS dozvoljava kontrolu izgleda strana pomoću svojstava kao što su: capitalize, uppercase, lowercase, text-decoration, letter-spacing, word-spacing, text-indent, i line-height. CSS takođe može biti korišcen za dodavanje margina, okvira, razmaka izmedu elemenata, boja pozadine i slika u bilo koji HTML element.

4. Primena kod različitih medija: CSS može biti kreiran za različite medije (različiti Web čitači, štampaci, projektori), bez menjanja sadržaja ili strukture dokumenta.

Primeri formiranja spiska pravila stila za određeni HTML dokument

Osnovna CSS sintaksa

Ukoliko bismo hteli da pozadina naše Web stane bude sivo-srebrne boje, korišcenjem HTML jezika uradili bismo to na sledeći način: <body bgcolor="#c0c0c0"> Pomoću CSS jezika napisaćemo slično: body {background-color: #c0c0c0;}

Kao što možete videti, CSS kôd je sličan HTML kôdu. Na osnovu prethodnog primera, možemo definisati osnove CSS modela.

CSS je predstavljen kao skup pravila, koja se pišu na sledeći način:

selektor{atribut1: vrednost1;atribut2: vrednost2;}

Selektor može biti HTML element, stil klasa, kao i pseudo klasa ili pseudo element. U našem primeru, selektor je HTML element <body>, dok je atribut background-color sa vrednošcu #c0c0c0 (heksadecimalna oznaka za srebrnu boju).

Svako pravilo je izraz koji definiše šta će se stilizovati i kako će se stilovi prikazati. Stil strana se sastoji iz liste pravila koju browser konsultuje da bi odredio kako da izgleda ili zvuči strana.

Osnovni delovi jednog pravila su: SELEKTOR i DEKLARACIJE.

Deklaracija se sastoji od karakteristike i vrednosti karakteristike. Forma: selektor {karakteristika: vrednost ;}

Selektorski deo govori koji deo HTML dokumenta je pokriven pravilom stila.

Deklaracije pravila se smeštaju unutar vitičastih zagrada, a karakteristika i njena vrednost su razdvojene dvotačkom. Iza vrednosti se stavlja tačka-zarez.

<style>H1 { color: blue; }</style>

pravilo H1 { color: blue }

element selektor H1

deklaracija color: blue

karakteristika color

vrednost blue

Primer kombinovanih pravila

<style>p { color: blue; }p { font-size: large; }</style>

pravila p { color: blue }, p { font-size: large; }

element p

deklaracije color: blue, font-size: large

karakteristike color, font-size

vrednost blue, large

Ova pravila se mogu kôdirati i kao:

<style>p { color: blue; font-size: large }</style>

Primer kombinovanih pravila koji imaju iste deklaracije, a različite selektore

<style>p { color: blue; }address { color: blue; }</style>

Ova pravila se mogu kôdirati i kao:

<style>p, address { color: blue; }</style>

Ovo pravilo se interpretira kao: sadržaj unutar P i ADDRESS tagova prikazati kao plavi tekst.

Karakteristike fontova

<style> H1 { color: goldenrod; font-size: 36pt; font-family: Arial; font-style: italic; font-weight: bold }</style>

Karakteristike pozadine

<style> BODY { background: midnightblue; color: lime }</style>

Karakteristike margina

<style> BLOCKQUOTE { margin-top: 1em; margin-right: 0em; margin-bottom: 1em; margin-left: 0em; font-style: italic }</style>

em space ili em razmak je jedinica mere u tipografiji za razmak širine kao kod određenog slova mereno tipografskim tačkama. Za mnoge fontove radi se o širini velikog slova M i odatle potiče ime ovog znaka.

Korišćenje klasa elemenata

<P class=zaseban>Neki izdvojen tekstkao pasus dokumenta.

<style> p.zaseban { padding-left: 0.2em; border-left: solid; border-top: none; border-bottom: none; border-left-width: thin; border-color: #ff0099; }</style>

Dodavanje CSS u HTML stranu

CSS stil se može dodati u Web stranu korišcenjem sledecih nacina:

1. inline (definicija stila se vezuje za pojedinacni HTML element preko HTML atributa style)

<html><head><title>Primer za inline CSS stil</title></head><body style="background-color: #c0c0c0;"><p>Ova strana ima sivu pozadinu.</p></body></html>

2. ugrađivanjem (interni stil - definicije stilova su sastavni deo HTML dokumenta, dodaju se u <head> deo dokumenta pomocu taga <style>)

Složen tag <style> je deo HEAD sekcije.

<html><head><title>Primer za ugradjivanje CSS stila</title><style type="text/css">body {background-color: #c0c0c0;}</style></head><body><p>Strana sa sivom bojom pozadine.</p></body></html>

3. povezivanjem (eksterni stil - definicije stilova su u odvojenom CSS dokumentu)

<html><head><title>Primer povezivanja eksternog CSS-a</title><link rel="stylesheet" type="text/css"href="stil.css" /></head><body></body></html>

Uključivanje gotovih stilskih listova

<link rel="stylesheet" href="nekistil.css">

Element <LINK> je prost (nema zatvarajući komplement). Uključuje se unutar sekcije HEAD. Namena ovog taga je da uključi informacije o povezivanju tekućeg HTML dokumenta sa drugim dokumentima i resursima. Atributi: HREF, REL, MEDIA, REV, TYPE, TARGET. Atribut HREF ima vrednost URL-a odredišta veze. Atribut REL ukazuje na tip veze. Na primer rel="stylesheet" obaveštava browser da dokument na koji se odnozi veza jeste strana sa stilovima.

PRIMER UKLJUČIVANJA SPOLJNOG CSS-a:

<link type="text/css" href="http://WebPutanja/stylesheet.css">

Navedeni načini za kreiranje stila mogu biti istovremeno definisani za jednu Web stranu i (ili) njene pojedinačne elemente. U tom slucaju, kreira se novi "virtuelni" stil, koji se primenjuje sledecim redosledom:1. eksterni2. interni3. inline

Način primene je kaskadni: stil na nižem nivou prekrice stil na višem nivou, odnosno, inline stil ima najveci prioritet, što znaci da ce prekriti stil definisan unutar <head> taga, a stil, definisan unutar <head> taga, prekrice stil definisan u posebnom CSS dokumentu.

Zamena prezentacionog HTMLa CSS-om

http://poincare.matf.bg.ac.rs/~jelenagr/uwit/htmlskola/sk1.htm

Zastareli HTML CSS ekvivalent CSS primer

<basefont> body{font-family} body {font-family: Verdana, sans-serif; font-size: 12 pt;}

<body alink> a:active {color} a:active {color: #FFFF00;}

<body link> a:link {color} a:link {color: #00FFFF;}

<body text> body {color} body {color: #000000;}

<body vlink> a:visited {color} a:visited {color: #FF00FF;}

<center> text-align:center h1 {text-align: center;}

<u> text-decoration:underline#a {text-decoration:underline;} poziv npr. <p id=a>Podvucen tekst</p>

CSS atributi

Navešcemo najcešce korišcene CSS atribute:

Opis - primer

definisanje tipa slovafont-family: arial;

definisanje alternativnih slovafont-family: arial, verdana, "times new roman";

velicina slovafont-size: 10px;

iskošeni tekstfont-style: italic;

"obican" tekstfont-style: normal;

podebljani tekstfont-weight: bold;

boja tekstacolor: red;

boja pozadinebackground-color: pink;

slika kao pozadinabackground-image: slika.jpg;

ravnanje tekstatext-align: left;

nazubljivanje paragrafatext-indent: 18px;

ukrašavanje tekstatext-decoration: underline;

širina elementawidth: 100px;

visina elementa

height: 200px;

podešavanje prostora između okvira jednog elementa i drugog elementa - marginamargin: 5px;margin-left: 5;margin-right: 5px;margin-top:5px;margin-bottom:5px;

podešavanje praznine oko sadržaja elementa, ali unutar njegovog okvira - paddingpadding: 3px;padding-left: 3px;padding-right: 3px;padding-top: 3px;padding-bottom: 3px;

podešavanje okvira elementaborder-style: dotted;border-width: 2px;border-color: black;

pozicioniranje elemenata - apsolutnoposition: absolute;top: 50px; right : 100px; bottom : 300px; left : 100px;

pozicioniranje elemenata - relativnoposition: relative;top: 50px; right : 100px; bottom : 300px; left : 100px;

rešen primer:Naš zadatak je da tekst na strani bude crne boje, ispisan slovima tipa Verdana i da velicina slova bude 11 piksela. Zatim, da tekst u okviru <h1> taga bude crvene boje na plavoj pozadini, ispisan slovima tipa Arial, velicine 24 piksela. Tekst u pasusima treba da bude poravnat sa obe strane. Da bi tekst izlegao baš kako smo pozeleli, potrebno je da datoteka stil.css ima sledeci sadrtaj:

body {background-color: #c0c0c0;color: #000000;font-family: Verdana;font-size: 11px;}

h1 {color: #FF0000;font-family: Arial;font-size: 24px;background-color: #0000FF;}

p {text-align: justify;}

U našem primeru, CSS dokument se zove stil.css. Jedna, ili više HTML strana, može biti povezana sa istim CSS dokumentom. Time postižemo da promena, nacinjena u CSS dokumentu, bude vidljiva na svim stranama, koje za svoje formatiranje koriste taj CSS dokument. Ako je potrebno promeniti boju pozadine, na primer na 30 strana, CSS stil u kome je definisana boja pozadine i koji je povezan sa tim stranama, ce nas spasiti od menjanja svih 30 Web strana.

CSS dokument je tekstualna datoteka sa ekstenzijom .css koja sadrti niz CSS pravila. Dodavanje <link> taga u <head> sekciju Web strane, omogucava formatiranje te strane na nacin definisan u CSS dokumentu.

primer.html<html><head><title> Povezivanje HTML strane sa CSS dokumentom</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><link rel="stylesheet" type="text/css" href="stil.css" /></head><body><h1> Uvod u CSS</h1><p> CSS predstavlja veoma mocan jezik pomocu kojeg mozete dodati stil vašim Web stranama, odnosno definisati nacin na koji ce njihov sadrtaj biti prezentovan.</p> <p> CSS je doprineo izradi struktuiranih dokumenata u svetu Web dizajna. </p> </body></html>

SUMIRANJE:

Način umetanja CSS-a u HTML dokument

Postoje tri osnovna načina:

o Mogu da se nalaze u okviru samih HTML elemenata upotrebom STYLE atributa.

o Mogu da se navode blokovi CSS pravila u okviru STYLE elementa i da se referenciraju na same HTML elemente ili pomocu CLASS atributa kod HTML elemenata.

o Mogu da se kreiraju u odvojenim dokumentima stilova (datotekama sa ekstenzijom .css) i da se referenciraju u okviru strana sa LINK elementom.

ZADATAK za samostalni rad: U datoteci vezba12.html zameniti zastarele HTML elemente i atribute CSS ekvivalentom poštujući varijetet HTML Strict tako što ćete unutar Vašeg direktorijuma public_html kreirati datoteke: 1. vezba12a.html i zamene predvideti unutar taga STYLE (upotrebite i klase elemenata) 2. vezba12b.html i zamene predvideti unutar datoteke mojstil.css koju ćete uključiti unutar sekcije HEAD datoteke vezba12b.html. Datoteku mojstil.css čuvati u folderu stilovi koji je podirektorijum unotar public_html direktorijuma.

CSS komentari

Komentari u CSS-u su po konvenciji koja se koristi u programskom jeziku C:

/* Ovo je primer CSSkomentara u vise linija */

I naravno sa (//) je komentar u okviru jedne linije.

http://poincare.matf.bg.ac.rs/~jelenagr/uwit/htmlskola/vezba12.html

// CSS Komentar u okviru jedne linije

Documents

Osnovni Elementi Jezika HTML