1. uvod u html
TRANSCRIPT
HTML 1
1. Uvod u HTML
1.1. Šta je HTML fajl?
HTML je skraćenica za Hyper Text Markup Language (Hipertekstualni markerski jezik) HTML fajl je tekstualni fajl koji sadrži tagove za markiranje Tagovi za markiranje kažu Web browser-u kako da prikaže stranicu HTML fajl mora da ima .htm ili .html ekstenziju HTML fajl može da se kreira pomoću jednostavnog tekst editora (npr. Notepad)
1.2. Jednostavan primer
Pokrenite Notepad. Otkucajte sledeći tekst: Primer 1.1 <html> <head> <title>Naslov stranice</title> </head> <body> Ovo je moja prva stranica. <b>Ovaj tekst je bold</b> </body> </html>
Sačuvajte tekst kao "mypage.htm". Pokrenite Internet Explorer. U File meniju izaberite komandu Open. U dijalogu koji se pojavio izaberite Browse i pronađite fajl koji ste upravo kreirali. Selektujte ga i kliknite na dugme Open. Kliknite dugme Open. Stranica je otvorena.
1.3. Objašnjenje primera
Prvi tag u vašem HTML dokumentu je <html>. Ovaj tag govori vašem browser-u da je ovo početak HTML dokumenta. Poslednji tag u vašem dokumentu je </html>. Ovaj tag govori vašem browser-u da je ovo kraj HTML dokumenta. Tekst između taga <head> i taga </head> je informacija o zaglavlju. Informacija o zaglavlju se ne prikazuje u prozoru browser-a. Tekst između tagova <title> i </title> je naslov vašeg dokumenta. Naslov se prikazuje u liniji naslova browser-a. Tekst između tagova <body> i </body> je tekst koji će se prikazati u vašem browser-u. Tekst između tagova <b> i </b> će biti prikazan podebljanim slovima (bold).
1.4. Ekstenzija HTM ili HTML?
Kad sačuvate HTML fajl, možete da koristite .htm ili .html ekstenziju. U našem primeru smo koristili .htm. Ovo je loša navika iz prošlosti kada je softver dozvoljavao samo korišćenje ekstenzija od tri slova. Sa savremenim softverom je bezbedno korišćenje ekstenzije .html.
HTML 2
1.5. Primedba o HTML editorima:
Vi možete da jednostavno pišete HTML fajlove korišćenje WYSIWYG (what you see is what you get – ono što vidiš je ono što dobijaš) editora kao što je FrontPage, Claris Home Page ili Adobe PageMill umesto pisanja tagova u jednostavnom tekst editoru. Ali, ako želite da zaista naučite Web dizajn, strogo preporučujemo da za početak učenja HTML-a koristite jednostavni tekst editor.
2. HTML elementi HTML dokumenti su tekstualni fajlovi koji su sastavljeni od HTML elemenata. HTML elementi se definisu koristeći HTML tagove.
2.1. HTML tagovi
HTML tagovi se koriste da se obeleže HTML elementi. HTML tagovi su oivičeni karakterima < i > (angle brackets). HTML tagovi se obično pojavljuju u parovima (npr. <b> i </b>). Prvi tag je početni tag, drugi je završni tag. Tekst između početnog i završnog taga je sadržaj elementa. HTML tagovi nisu case sensitive, <b> ima isto značenje kao <B>
2.2. HTML Elementi
Posmatramo prethodni primer (Error! Reference source not found.. Ovo je jedan HTML element: <b>Ovaj tekst je bold</b>
HTML element počinje početnim tagom: <b>. Sadržaj HTML elementa je: Ovaj tekst je bold. HTML element se završava završnim tagom: </b>. Svrha taga <b> je da definiše HTML element koji treba da se prikaže bold. Ovo je takođe HTML element: <body> Ovo je moja prva stranica. <b>Ovaj tekst je bold</b> </body>
Ovaj HTML element počinje početnim tagom <body>, i završava se završnim tagom </body>. Svrha taga <body> je da definiše HTML element koji sadrži telo HTML dokumenta.
2.3. Atributi tagova
Tagovi mogu da imaju atribute. Atributi mogu da obezbede dodatne informacije o HTML elementima. Element body se definiše pomoću taga <body>. Pomoću atributa bgcolor može se definisati da boja pozadine bude crvena, na sledeći način: <body bgcolor="red">. Element table (tabela) se definiše pomoću taga <table>. Pomoću atributa border, može se zadati da tabela nema ivice, na sledeći način: <table border="0"> Atributi uvek dolaze u parovima ime/vrednost, na sledeći način: ime="vrednost". Atributi se uvek dodaju početnom tagu HTML elementa.
HTML 3
2.4. Stil navodnika, "red" or 'red'?
Vrednosti atributa uvek moraju da se javljaju pod navodnicima. Obično su to “ “ navodnici, ali je i ’ ’ dozvoljeno. U nekim retkim situacijama, kao što je kad vrednost atributa već sadrži navodnike “ “ , Neophodno je da se koriste navodnici ’ ’: name='John "ShotGun" Nelson'
3. Osnovni HTML tagovi Najvažniji tagovu u HTML-u su tagovi koji definišu naslove, paragrafe i novi red.
3.1. Naslovi
Naslovi se definisu pomoću tagova <h1> do <h6>. <h1> definiše najkrupniji naslov. <h6> definiše najsitniji naslov. <h1> Ovo je naslov </h1> <h2> Ovo je naslov </h2> <h3> Ovo je naslov </h3> <h4> Ovo je naslov </h4> <h5> Ovo je naslov </h5> <h6> Ovo je naslov </h6>
HTML automatski dodaje dodatni prazan red pre i posle naslova.
3.2. Paragrafi
Paragrafi se definišu pomoću taga <p>. <p>Ovo je paragraf.</p> <p>Ovo je jos jedan paragraf</p>
HTML automatski dodaje dodatan prazan red pre i posle paragrafa.
3.3. Novi red
Tag <br> se koristi kad želimo novi red, ali ne i novi paragraf. <p>Ovo <br> je pare<br>graf sa novim redovima</p>
Tag <br> je prazan tag. On nema završni tag.
3.4. Komentari u HTML-u
Tag za komentare se koristi da bi se umetnuli komentari u HTML kod. Browser ignoriše komentare. Komentari se koriste da bi se objasnio kod, da bi kasnije mogao da se edituje. <!—- Ovo je komentar -->
3.5. Korisni saveti
HTML 4
Kad pišete HTML tekst, nikad niste sigurni kako će da bude prikazan u nekom drugom Browser-u. Neki ljudi imaju male displeje, a neki velike. Tekst se reformatira i svaki put kad korisnik promeni veličinu prozora. Nikada ne formatirajte tekst dodavanjem razmaka i praznih linija. HTML uvek odseca razmake u vašem tekstu. Uvek ignoriše sve razmake, osim prvog. U HTML-u se novi red računa kao jedno prazno mesto, tako da će i veći broj praznih linija da bude ignorisan. Korišćenje praznih paragrafa <p> da se umetne prazna linija i loša navika. Umesto toga, koristite tag <br>. (Ali, nemojte da koristite tag <br> za kreiranje lista, jer za te potrebe postoji poseban tag). Možda ste primetili da paregrafi mogu da se pišu bez završnog taga. Ne oslanjajte se na to. Naredna verzija HTML-a neće da dozvoljava elemente bez završnih tagova. HTML automatski dodaje prazne linije pre i posle nekih elemenata, kao što su paragrafi i naslovi. Za razdvajanje delova teksta mogu da se koriste i horizontalne linije (<hr> tag).
3.6. Primeri
Primer 3.1 Osnovno ponašanje elemenata paragrafa. <html> <body> <p> Ovaj paragraf sadrzi puno linija u izvornom kodu, Ali ih browser ignorise. </p> <p> Ovaj paragraf sadrzi puno razmaka u izvornom kodu, ali ih browser ignorise. </p> <p> Broj linija u paragrafu zavisi od velicine prozora vaseg browser/a. Ako promenite velicinu prozora browser-a, broj linija ovog paragrafa ce se promeniti. </p> </body> </html>
Primer 3.2 Koriščenje taga <br>, <html> <body> <p> Da bi ubacili<br>novi red<br>u<br>paragraf,<br>koristite br tag. </p>
HTML 5
</body> </html>
Primer 3.3 Problemi kod formatiranja HTML-a <html> <body> <p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p> <p>Primetite da browser jednostavno ignorise vase formatiranje!</p> </body> </html>
Primer 3.4 Naslovi <html> <body> <h1>Ovo je naslov 1</h1> <h2>Ovo je naslov 2</h2> <h3>Ovo je naslov 3</h3> <h4>Ovo je naslov 4</h4> <h5>Ovo je naslov 5</h5> <h6>Ovo je naslov 6</h6> <p>Koristite h tagove samo za naslove. Ne koristite ih za podebljavanje teksta. Za to postoji drugi tag.</p> </body> </html>
Primer 3.5 centriranje naslova <html> <body> <h1 align="center">Ovo je naslov 1</h1> <p>Naslov je centriran. Naslov je centriran. Naslov je centriran. Naslov je centriran. Naslov je centriran.</p> </body> </html>
Primer 3.6 Ubacivanje horizontalne linije <html> <body>
HTML 6
<p>hr tag definise horizontalnu liniju:</p> <hr> <p>ovo je paragraf</p> <hr> <p>ovo je paragraf</p> <hr> <p>ovo je paragraf</p> </body> </html>
Primer 3.7 Sakriveni komentari <html> <body> <!--Ovaj komentar se ne prikazuje--> <p>Ovo je regularan paragraf</p> </body> </html>
Primer 3.8 Dodavanje boje pozadini <html> <body bgcolor="yellow"> <h2>Vidite: Zuta pozadina!</h2> </body> </html>
4. HTML formatiranje teksta
4.1. Tagovi za formatiranje teksta
Tag Opis <b> Definiše bold (podebljan) tekst <big> Definiše big (krupan) tekst <em> Definiše emphasized (naglašen) tekst <i> Definiše italic (iskošen) tekst <small> Definiše small (sitan) tekst <strong> Definiše strong tekst <sub> Definiše subscripted tekst (indekse) <sup> Definiše superscripted tekst (eksponente) <ins> Definiše inserted (umetnut) tekst <del> Definiše deleted (obrisan) tekst
HTML 7
4.2. "Computer Output" tagovi
Tag Opis <code> Definiše definise kompjuterski kod <kbd> Definiše tekst sa tastature <samp> Definiše primer compjuterskog koda <tt> Definiše teletype tekst <var> Definiše promenljivu <pre> Definiše preformatiran tekst
4.3. Tagovi za citate, navođenje i definicije
Tag Opis <abbr> Definiše skraćenicu <acronym> Definiše acronym (mnemoničku skraćenicu) <address> Definiše element adrese <bdo> Definiše smer teksta (za arapsko pismo) <blockquote> Definiše dugo navođenje <q> Definiše kratko navođenje <cite> Definiše citat <dfn> Definiše definiciju
4.4. Primeri
Primer 4.1 Formatiranje teksta <html> <body> <b>Ovaj tekst je bold</b> <br> <strong> Ovaj tekst je strong </strong> <br> <big> Ovaj tekst je big </big> <br> <em> Ovaj tekst je emphasized </em> <br> <i> Ovaj tekst je italic </i>
HTML 8
<br> <small> This text is small </small> <br> Ovaj tekst sadrzi <sub> subscript </sub> <br> Ovaj tekst sadrzi <sup> superscript </sup> </body> </html>
Primer 4.2 Kontrolisanje formatiranja paragrafa pomoću pre taga <html> <body> <pre> Ovo je preformatiran tekst. Na ovaj nacin se cuvaju razmaci i prelazak u novi red. </pre> <p>tag pre je dobar za prikazivanje kompjuterskog koda:</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html>
Primer 4.3 Computer output <html> <body> <code>Computer code</code> <br> <kbd>Ulaz sa tastature</kbd> <br> <tt>Teletype text</tt> <br>
HTML 9
<samp>Primer</samp> <br> <var>Compjuterska promenljiva</var> <br> <p> <b>Note:</b> Ovi tagovi se cesto koriste za prikazivanje kompjuterskog koda. </p> </body> </html>
Primer 4.4 Skraćenice i mnemonici <html> <body> <abbr title="United Nations">UN</abbr> <br> <acronym title="World Wide Web">WWW</acronym> <p>Atribut title se koristi da bi se prikazao pun naziv kad se strelica postavi preko skracenice ili mnemonika.</p> <p>U IE 5. ovo radi samo za mnemonik.</p> <p>U Netscape 6.2 ovo radi za oba elementa.</p> </body> </html>
Primer 4.5 Navodjenje <html> <body> Ovo je dugo navodjenje: <blockquote> Ovo je dugo navodjenje.Ovo je dugo navodjenje.Ovo je dugo navodjenje.Ovo je dugo navodjenje.Ovo je dugo navodjenje. </blockquote> Ovo je kratko navodjenje:<q> Ovo je kratko navodjenje </q> <p> Kad se koristi dugo navodjenje, browser umece novi red i margine. Kratko navodjenje se ne formatira posebno. </p> </body> </html>
HTML 10
5. HTML znakovni entiteti 5.1. Znakovni entiteti
Neki znakovi, kao što je znak <, imaju posebno značenje u HTML-u, i zbog toga ne mogu da se koriste u tekstu. Da bi prikazali znak < u HTML-u, moramo da koristimo znakovni entitet. Znakovni entitet ima tri dela: znak &, ime entiteta ili znak # i broj entiteta, i konačno znak ; . Da bi u HTML-u prikazali znak < pišemo: < ili < Prednost korišćenja imena umesto broja je u tome što se ime lakše pamti. Mana je da svi browser-i ne podržavaju najnovija imena za entitete, dok skoro svi podržavaju brojeve. Svi entiteti su case sensitive.
5.2. Razmak koji se ne ignoriše
Najčešći znakovni entitet u HTML-u je razmak koji se ne ignoriše (non-breaking space). Normalno, HTML izbacuje višak razmaka iz vašeg dokumenta. Ako napišete 10 razmaka, izbaciće 9. Da bi dodali dodatni razmak, koristite znakovni entitet .
5.3. Najčešći znakovni entiteti:
Rezultat Opis Ime entiteta Broj entiteta razmak  
< manje < < > veće > > & ampersand & & " navodnik " " ' apostrof ' (ne radi u IE) '
6. HTML linkovi HTML koristi hyperlink-ove da bi se dokument povezao sa drugim dokumentima na Web-u.
6.1. Početni primeri
Primer 6.1 Kreiranje linka u HTML dokumentu <html> <body> <p> <a href="lastpage.htm"> Ovaj tekst</a> je link na stranu koja se nalazi na istoj Web lokaciji. </p> <p> <a href="http://www.microsoft.com/"> Ovaj tekst</a> je link na stranu na World Wide Web-u.
HTML 11
</p> </body> </html>
Primer 6.2 Korišćenje slike kao linka <html> <body> <p> Mozete da koristite i sliku kao link<a href="lastpage.htm"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> </p> </body> </html>
6.2. Tag anchor i atribut href
HTML koristi tag <a> (anchor, veza) da bi kreirao link ka drugom dokumentu. Veza može da ukazuje na bilo koji resurs na Web-u: HTML stranu, sliku, zvučni fajl, film.... Sintaksa za kreiranje veze: <a href="url">Tekst koji se prikazuje</a>
Tag <a> se koristi za kreiranje veze, pomoću atributa href se zadaje adresa dokumenta sa kojim treba da se poveže a reči između otvorenog i zatvorenog taga se prikazuju kao hyperlink. Veza koja definiše link sa našom stranicom: <a href="http://es.elfak.ni.ac.yu/iw/">IW stranica!</a>
Prethodna linija izgleda ovako u browser-u:
IW stranica!
6.3. Atribut target
Pomoću atributa target možete da definišete gde će linkovani dokument da bude otvoren.Sledeća linija će otvoriti dokument u novom prozoru browser-a: <a href=" http://es.elfak.ni.ac.yu/iw/" target="_blank"> IW stranica!</a>
6.4. Tag anchor i atribut name
Atribut name se koristi za kreiranje imenovane veze. Korišćenjem imenovanog atributa možemo da kreiramo linkove koji skaču direktno na označeni deo strane, umesto da skrolujemo do njega. Sledeća sintaksa se koristi za imenovanu vezu: <a name="labela">Tekst koji se prikazuje</a>
HTML 12
Atribut name se koristi za kreiranje imenovane veze. Ime veze može da bude bilo koji tekst. Sledeća linija definiše imenovanu vezu: <a name="saveti">Sekcija sa korisnim savetima</a>
Primetite da se imenovana veza ne prikazuje na specijalan način. Da bi se linkovali direktno na sekciju saveti, na kraj URL-a dodajeme znak # i ime veze, na sledeći način: <a href=" http://es.elfak.ni.ac.yu/iw/#saveti"> Skoči na sekciju korisni saveti</a>
Hiperlink na sekciju korisni saveti koja se nalazi u istom html dokumentu bi izgledao ovako: <a href="#saveti">Skoči na sekciju sa pametnim savetima</a>
6.5. Korisni saveti
Uvek dodajte kosu crtu na kraju reference. Ako vaš link izgleda ovako: href="http://www.w3schools.com/html", generisaćete dva HTTP zahteva serveru, zbog toga što će server da doda kosu crtu i da kreira novi zahtev koji izgleda ovako: href="http://www.w3schools.com/html/" Imenovane veze (named anchors) se često koristi za kreiranja sadržaja na početku velikog dokumenta. Svakom poglavlju u dokumentu se zada imenovana veza, a linkovi na te veze se stave na početak dokumenta. Ako browser ne može da nađe imenovanu vezu koji ste naveli, vraća se na vrh stranice. Pri tom ne nastaje greška.
6.6. Još primera
Primer 6.3 Otvaranje stranice u novom prozoru <html> <body> <a href="lastpage.htm" target="_blank">Last Page</a> <p> Ako atribut target postavite na vrednost "_blank", link ce se otvoriti u novom prozoru. </p> </body> </html>
Primer 6.4 Korišćenje linka da bi se skočilo na neki deo dokumenta <html> <body> <p> <a href="#C4">Takodje pogledajte Chapter 4.</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p>
HTML 13
<h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> </body> </html>
Primer 6.5 Izlazak iz frejma <html> <body> <p>Zaglavljeni u frejmu?</p> <a href="http://es.elfak.ni.ac.yu/iw/iw.htm" target="_top">Klikni ovde!</a> </body> </html>
Primer 6.6 Povezivanje mail poruke (radi samo ako je mail instaliran) <html> <body> <p> Ovo je mail link: <a href="mailto:[email protected]?subject=Zdravo%20ponovo"> Posalji Mail</a> </p> <p> <b>Primedba:</b> Razmaci medju recima se zamenjuju sa %20 da bi <b>bili sigurni</b> da ce browser da vas tekst prikaze ispravno</p> </body> </html>
Primer 6.7 Primer komplikovanijeg povezivanja mail poruke <html> <body>
HTML 14
<p> Ovo je drugi mail link: <a href="mailto:[email protected][email protected]&[email protected]&subject=Letnja%20zurka&body=Vi%20ste%20pozvani%20na%20veliku%20letnju%20zurku!">Posalji postu!</a> </p> <p> <b>Primedba:</b> Razmaci izmedju reci treba da budu zamenjeni sa %20 da bi <b>bili sigurni</b> da ce browser da pravilno prikaze tekst. </p> </body> </html>
7. HTML okviri Uz pomoć okvira moguć je prikaz više Web stranica u jednom prozoru.
7.1. Primeri
Primer 7.1 vertikalna podela sa tri razlicita dokumenta <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>
Primer 7.2 Horizontalna podela sa tri različita dokumenta <html> <frameset rows="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>
Primer 7.3 Korišćenje <noframes> taga. <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm">
HTML 15
<frame src="frame_c.htm"> <noframes> <body>Vas browser ne podrzava rad sa okvirima</body> </noframes> </frameset> </html>
7.2. Okviri
Uz pomoć okvira moguć je prikaz više Web stranica u jednom prozoru. Svaki HTML document se zove okvir i nezavisan je od drugih okvira. Mane korišćenja okvira su:
• potrebno je voditi računa o više HTML documenata • teško je otštampati celu Web stranicu
7.3. Tag frameset
Tag <frameset> definiše kako se prozor deli u okvire. Svaki frameset definiše skup vrsta ili kolona. Vrednosti atributa rows/columns zadaju deo prozora koji vrsta/kolona zauzima.
7.4. Tag frame
Tag <frame> definiše koji HTML dokument treba da se stavi u okvir. U narednom primeru imamo okvire u dve kolone. Prva kolona je podešena na 25% od širine prozora browser-a. Druga kolona je podešena na 75% od širine prozora browser-a. HTML dokument "frame_a.htm" je stavljen u prvu kolonu, a HTML dokument "frame_b.htm" je stavljen u drugu kolonu: <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
7.5. Korisni saveti
Ako okvir ima vidljive ivice, korisnik može da mu promeni dimenzije prevlačenjem ivice. Da bi ovo sprečili, možete da dodate atribut noresize="noresize" tagu <frame> . Dodajte tag <noframes> za browser-e koji ne podržavaju okvire.
7.6. Još primera
Primer 7.4 Dokument sa tri okvira, sa definisanim vrstama i kolonama <html> <frameset rows="50%,50%"> <frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm">
HTML 16
<frame src="frame_c.htm"> </frameset> </frameset> </html>
Primer 7.5 Korišćenje atributa noresize <html> <frameset rows="50%,50%"> <frame noresize="noresize" src="frame_a.htm"> <frameset cols="25%,75%"> <frame noresize="noresize" src="frame_b.htm"> <frame noresize="noresize" src="frame_c.htm"> </frameset> </frameset> </html>
Primer 7.6 kreiranje okvira za navigaciju. (Okvir za navigaciju sadrži listu linkova čiji je cilj drugi okvir. Fajl koji se zove "tryhtml_contents.htm" sadrži tri linka. Odgovarajući kod za ovo je: <a href ="frame_a.htm" target ="showframe">Frame a</a><br> <a href ="frame_b.htm" target ="showframe">Frame b</a><br> <a href ="frame_c.htm" target ="showframe">Frame c</a> Drugi okvir će pokazati izabran dokument). <html> <frameset cols="120,*"> <frame src="tryhtml_contents.htm"> <frame src="frame_a.htm" name="showframe"> </frameset> </html>
Primer 7.7 Kreiranje inline okvira <html> <body> <iframe src="http://es.elfak.ni.ac.yu/iw/iw.htm"></iframe> <p>Neki stariji browser-i ne podrzavaju iframe.</p> <p>Ako ne podrzavaju, iframe nece da bude vidljiv.</p> </body> </html>
Primer 7.8 Skok na specificiranu sekciju. Jedan od njih za izvor ima specificiranu sekciju u fajlu. Specificirana sekcija se kreira pomoću <a name="C10"> u fajlu "link.htm". <html>
HTML 17
<frameset cols="20%,80%"> <frame src="frame_a.htm"> <frame src="link.htm#C10"> </frameset> </html>
Primer 7.9 Skok na specificiranu sekciju sa navigacijom. Okvir za navigaciju (content.htm) sadrži listu linkova na sekcije unutar drugog okvira (link.htm). HTML kod fajla content.htm izgleda ovako: <a href ="link.htm" target ="showframe">Link without Anchor</a><br><a href ="link.htm#C10" target ="showframe">Link with Anchor</a>. <html> <frameset cols="180,*"> <frame src="content.htm"> <frame src="link.htm" name="showframe"> </frameset> </html>
8. HTML tabele 8.1. Primeri
Primer 8.1 Kreiranje tabele <html> <body> <p> Svaka tabela pocinje tagom table. Svaka vrsta pocinje tagom tr. Svaki podatak pocinje tagom td. </p> <h4>Jedna kolona:</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>Jedna vrsta i tri kolone:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr>
HTML 18
</table> <h4>Dve vrste i tri kolone:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
Primer 8.2 Različiti okviri tabela <html> <body> <h4>Sa normalnim okvirom:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Sa debelim okvirom:</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr>
HTML 19
</table> <h4>Sa veoma debelim okvirom:</h4> <table border="15"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
8.2. Tabele
Tabele se definišu pomoću taga <table>. Tabela je podeljena u vrste (sa tagom <tr>), a svaka vrsta je podeljena na ćelije sa podacima (sa tagom <td>). Ćelija sa podacima može da sadrži tekst, slike, liste, paragrafe, okvire, horizontalne linije, tabele... Primer: <table border="1"> <tr> <td>vrsta 1, celija 1</td> <td>vrsta 1, celija 2</td> </tr> <tr> <td>vrsta 2, celija 1</td> <td>wrsta 2, celija 2</td> </tr> </table>
Izgleda ovako u browser-u: vrsta 1, celija 1 vrsta 1, celija 2
vrsta 2, celija 1 vrsta 2, celija 2
8.3. Atributi tabela i okvira
Ako ne navedete atribut border tabela će biti prikazana bez okvira. Ovo može da bude korisno, ali najčešće je potrebno da se vide okviri. Da bi se tabela prikazala sa okvirim, potrebno je koristiti atribut border: <table border="1"> <tr> <td>Vrsta 1, celija 1</td>
HTML 20
<td>Vrsta 1, celija 2</td> </tr> </table>
8.4. Naslovi u tabeli
Naslov tabele de definiše pomoću taga <th>. <table border="1"> <tr> <th>Naslov</th> <th>Jos jedan naslov</th> </tr> <tr> <td>vrsta 1, celija 1</td> <td>vrsta 1, celija 2</td> </tr> <tr> <td>vrsta 2, celija 1</td> <td>vrsta 2, celija 2</td> </tr> </table>
Kako to izgleda u browser-u: Naslov Jos jedan naslov
vrsta 1, celija 1 vrsta 1, celija 2
vrsta 2, celija 1 vrsta 2, celija 2
8.5. Prazna ćelija u tabeli
Ćelije bez sadržaja se u većini browser-a ne prikazuju dobro. <table border="1"> <tr> <td> vrsta 1, celija 1</td> <td> vrsta 1, celija 2</td> </tr> <tr> <td> vrsta 2, celija 1</td> <td></td> </tr> </table>
U browser-u se okvir oko prazne ćelije ne prikazuje. Da bi ovo izbegli, dodajte razmak u praznu ćeliju ( ). Tada će okvir ćelije biti vidljiv.
HTML 21
<table border="1"> <tr> <td> vrsta 1, celija 1</td> <td> vrsta 1, celija 2</td> </tr> <tr> <td> vrsta 2, celija 1</td> <td> </td> </tr> </table>
Kako to izgleda u browser-u: vrsta 1, celija 1 vrsta 1, celija 2
vrsta 2, celija 1
8.6. Primeri
Primer 8.3 Tabela bez okvira <html> <body> <h4>Ova tabela nema okvire:</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h4>Jos jedna tabela bez okvira:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td>
HTML 22
<td>600</td> </tr> </table> </body> </html>
Primer 8.4 Prikaz okvira tabele <html> <body> <h4>Naslovi tabele:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Vertikalni naslovi:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> </body> </html>
Primer 8.5 Korišćenje ( )
HTML 23
<html> <body> <table border="1"> <tr> <td>Some text</td> <td>Some text</td> </tr> <tr> <td></td> <td>Some text</td> </tr> </table> <p> Kao sto mozete da vidite, jedna od celija nema okvir. Ovo je zbog toga sto je prazna. Ako jednostavno umetnete razmak, nista se nece promeniti. Trik je u umetanju ( ). </p> </body> </html>
Primer 8.6 Tabela sa naslovima <html> <body> <h4> Ova tabela ima naslov i debele okvire: </h4> <table border="6"> <caption>Moj naslov</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
HTML 24
Primer 8.7 Ćelija koja se proteže na više od jedne vrste/kolone <html> <body> <h4>Celija koja se proteze na dve kolone:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Celija koja se proteze na dve vrste:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>
Primer 8.8 tagovi unutar tabele <html> <body> <table border="1"> <tr> <td> <p>Ovo je paragraf</p> <p>Ovo je jos jedan paragraf</p> </td> <td>Ova celija sadrzi tabelu:
HTML 25
<table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>Ova celija sadrzi listu <ul> <li>jabuka</li> <li>banana</li> <li>ananas</li> </ul> </td> <td>ZDRAVO</td> </tr> </table> </body> </html>
Primer 8.9 Popunjavanje tabele <html> <body> <h4>Bez popunjavanja celije:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Sa popunjavanjem celije:</h4> <table border="1"
HTML 26
cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
Primer 8.10 Razmak između ćelija <html> <body> <h4>Bez razmaka izmedju celija:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Sa razmakom izmedju celija:</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
Primer 8.11 Dodavanje pozadine tabeli
HTML 27
<html> <body> <h4>Boja u pozadini:</h4> <table border="1" bgcolor="red"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Slika u pozadini:</h4> <table border="1" background="bgdesert.jpg"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
Primer 8.12 Dodavanje pozadine ćeliji <html> <body> <h4>Pozadina celije:</h4> <table border="1"> <tr> <td bgcolor="red">First</td> <td>Row</td> </tr> <tr> <td background="bgdesert.jpg"> Second</td>
HTML 28
<td>Row</td> </tr> </table> </body> </html>
Primer 8.13 Poravnanje sadržaja u ćeliji <html> <body> <table width="400" border="1"> <tr> <th align="left">Money spent on....</th> <th align="right">January</th> <th align="right">February</th> </tr> <tr> <td align="left">Clothes</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">Make-Up</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">Food</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">Sum</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr> </table> </body> </html>
Primer 8.14 Atributi okvira <html> <body>
HTML 29
<p> Ako ne vidite okvire oko tabele u ovom primeru, to znaci da je vas browser star i da ih ne podrzava</p> <h4>Sa frame="border":</h4> <table frame="border"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Sa frame="box":</h4> <table frame="box"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Sa frame="void":</h4> <table frame="void"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Sa frame="above":</h4> <table frame="above"> <tr> <td>First</td> <td>Row</td> </tr>
HTML 30
<tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Sa frame="below":</h4> <table frame="below"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Sa frame="hsides":</h4> <table frame="hsides"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Sa frame="vsides":</h4> <table frame="vsides"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Sa frame="lhs":</h4> <table frame="lhs"> <tr>
HTML 31
<td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Sa frame="rhs":</h4> <table frame="rhs"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
9. HTML liste HTML podržava numerisane, nenumerisane i liste definicija.
9.1. Primeri
Primer 9.1 Nenumerisana lista lista <html> <body> <h4>Nenumerisana lista:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
Primer 9.2 Numerisana lista <html>
HTML 32
<body> <h4>Numerisana lista:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
9.2. Nenumerisane liste
Nenumerisane liste su liste stavki. Lista stavki se obeležava znacima za nabrajanje(bullets) (obično tačkama). Nenumerisana lista počinje tagom <ul>. Svaka stavka počinje tagom <li>. <ul> <li>Coffee</li> <li>Milk</li> </ul>
Primer izgleda ovako u browser-u:
• Coffee • Milk
U stavku možete da stavite paragrafe, novi red, slike, linkove, druge liste...
9.3. Numerisane liste
Numerisana lista je takođe lista stavki. Stavke su obeležene brojevima. Numerisana lista počinje tagom <ol>. Svaka stavka počinje tagom <li>. <ol> <li>Coffee</li> <li>Milk</li> </ol>
Primer izgleda ovako u browser-u:
1. Coffee 2. Milk
U stavku možete da stavite paragrafe, novi red, slike, linkove, druge liste...
9.4. Lista definicija
Lista definicija ne sadrži stavke. Ovo je lista termina i objašnjenja termina. Lista definicija počinje tagom <dl>. Svaki termin počinje tagomEach <dt>. Svako objašnjenje počinje tagom <dd>.
HTML 33
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
Primer izgleda ovako u browser-u: Coffee
Black hot drink Milk
White cold drink U objašnjenje možete da stavite paragrafe, novi red, slike, linkove, druge liste...
9.5. Još primera
Primer 9.3 Različite vrste numerisanih lista <html> <body> <h4>Numerisana lista:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lista sa slovima:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lista sa malim slovima:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lista sa rimskim brojevima:</h4> <ol type="I">
HTML 34
<li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lista sa malim rimskim brojevima:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html>
Primer 9.4 Različite vrste nenumerisanih lista lista <html> <body> <h4>Nenumerisana lista sa diskovima:</h4> <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Nenumerisana lista sa krugovima:</h4> <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Nenumerisana lista sa kvadratima:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html>
Primer 9.5 Ugnježdene liste
HTML 35
<html> <body> <h4>Ugnjezdena lista:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html>
Primer 9.6 Ugnježdene liste 2 <html> <body> <h4>Ugnjezdena lista:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> </body> </html>
Primer 9.7 Liste definicija <html> <body> <h4>Lista definicija:</h4> <dl> <dt>Coffee</dt>
HTML 36
<dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> </body> </html>
10. HTML forme i ulazi HTML forme se koriste da bi se izabrale različite vrste ulaza.
10.1. Primeri
Primer 10.1 Tekst polje <html> <body> <form> Ime: <input type="text" name="ime"> <br> Prezime: <input type="text" name="prezime"> </form> </body> </html>
Primer 10.2 Polje za šifru <html> <body> <form> Korisnicko ime: <input type="text" name="korisnik"> <br> Sifra: <input type="password" name="sifra"> </form> <p> Primetite: karakteri se u polju za sifru prikzuju kao zvezdice. </p> </body> </html>
HTML 37
10.2. Forme
Forma je oblast koja može da sadrži elemente forme. Elementi forme su elementi koji dozvoljavaju korisniku da unese informaciju (tekst polja, tekst oblasti, padajući meniji, radio dugmad, checkbox...) u formu. Forma se definiše pomoću taga <form>. <form> <input> <input> </form>
10.3. Ulazi (input)
Najčešće korišćeni tag za forme je tag <input>. Tip ulaza je definisan pomoću atributa type. Najčešće korišćeni tipovi ulaza su prikazani u sledećem tesktu.
Tekst polja Tekst polje se koristi kad želite da korisnik u formu unese slova, brojeve... <form> Ime: <input type="text" name="ime"> <br> prezime: <input type="text" name="prezime"> </form>
Kako to izgleda u browser-u:
First name:
Last name: Primetite da forma nije vidljiva. Takođe primetite da je u većini browser-a širina tekst polja po difoltu 20 znakova.
Radio dugmad Radio dugmad se koriste kad želite da korisnik izabere jednu od ograničenog broja opcija. <form> <input type="radio" name="pol" value="muski"> Muski <br> <input type="radio" name="pol" value="zenski"> Zenski </form>
Kako to izgleda u browser-u:
Male
Female Primetite da može da se izabere samo jedna opcija.
HTML 38
Checkboxes Checkbox-ovi se koriste kad želite da korisnik izabere jednu, ili više od ograničenog broja opcija. <form> <input type="checkbox" name="motor"> Ja imam motor <br> <input type="checkbox" name="automobil"> Ja imam automobil </form>
Kako to izgleda u browser-u:
I have a bike
I have a car
1.6. Atribut action i dugme Submit
Kad korisnik pritisne dugme Submit, sadržaj forme se šalje drugom fajlu. Atribut forme action definiše ime fajla kome se taj sadržaj šalje. Fajl definisan u atributu action obično radi nešto sa primljenim ulazom. <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
Kako to izgleda u browser-u:
Username: Submit
Ako ukucate neke karaktere u tekst polje i pritisnete dugome Submit, poslaćete ulaz na stranicu koja se zove "html_form_action.asp". Ta strana može da prikaže primljeni ulaz.
10.4. Još primera
Primer 10.3 Checkboxes <html> <body> <form> I have a bike: <input type="checkbox" name="Bike"> <br> I have a car: <input type="checkbox" name="Car"> </form> </body> </html>
HTML 39
Primer 10.4 Radio dugmad <html> <body> <form> Male: <input type="radio" checked="checked" name="Sex" value="male"> <br> Female: <input type="radio" name="Sex" value="female"> </form> <p> When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked </p> </body> </html>
Primer 10.5 Padajuće liste <html> <body> <form> <select name="cars"> <option value="volvo">Volvo <option value="saab">Saab <option value="fiat">Fiat <option value="audi">Audi </select> </form> </body> </html>
Primer 10.6 Padajuće liste 2 <html> <body> <form> <select name="cars"> <option value="volvo">Volvo <option value="saab">Saab <option value="fiat" selected="selected">Fiat <option value="audi">Audi </select>
HTML 40
</form> </body> </html>
Primer 10.7 Tekst polje <html> <body> <textarea rows=“10“ cols=“30“> Macka se igra u basti. </textarea> </body> </html>
Primer 10.8 Kreiranje dugmeta <html> <body> <form> <input type="button" value="Hello world!"> </form> </body> </html>
Primer 10.9 Skupovi polja (fieldset) oko podataka <html> <body> <fieldset> <legend> Health information: </legend> <form> Height <input type="text" size="3"> Weight <input type="text" size="3"> </form> </fieldset> <p> If there is no border around the input form, your browser is too old. </p> </body> </html>
10.5. Primeri formi
Primer 10.10 Forma sa ulaznim poljima i Submit dugmetom <html>
HTML 41
<body> <form name="input" action="html_form_action.asp" method="get"> Type your first name: <input type="text" name="FirstName" value="Mickey" size="20"> <br>Type your last name: <input type="text" name="LastName" value="Mouse" size="20"> <br> <input type="submit" value="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called html_form_action.asp. </p> </body> </html>
Primer 10.11 Forma sa checkbox-ovima <html> <body> <form name="input" action="html_form_action.asp" method="get"> I have a bike: <input type="checkbox" name="Bike" checked="checked"><br> I have a car: <input type="checkbox" name="Car"> <br> <input type="submit" value="Submit"> </form> <p> If you click the "Submit" button, you send your input to a new page called html_form_action.asp. </p> </body> </html>
Primer 10.12 Forma koja sadrži radio dugmad <html> <body> <form name="input" action="html_form_action.asp" method="get"> Male: <input type="radio" name="Sex" value="Male" checked="checked"> <br> Female: <input type="radio" name="Sex" value="Female">
HTML 42
<br> <input type ="submit" value ="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called html_form_action.asp. </p> </body> </html>
Primer 10.13 Slanje e-mail –a iz forme <html> <body> <form action="MAILTO:[email protected]" method="post" enctype="text/plain"> <h3>This form sends an e-mail to W3Schools.</h3> Name:<br> <input type="text" name="name" value="yourname" size="20"> <br> Mail:<br> <input type="text" name="mail" value="yourmail" size="20"> <br> Comment:<br> <input type="text" name="comment" value="yourcomment" size="40"> <br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form> </body> </html>
10.6. Tagovi za forme
Tag Opis <form> Definiše formu za korisnički ulaz <input> Definiše ulazno polje <textarea> Definiše tekst polje (ulaznhu kontrolu sa više linija testa) <label> Definiše labelu kontrole <fieldset> Definiše fieldset <legend> Definiše naslov za fieldset <select> Definiše listu koja može da se selektuje (padajuću listu) <optgroup> Definiše grupu opcija
HTML 43
<option> Definiše opciju u padajućoj listi <button> Definiše dugme a push button
11. HTML Images Pomoću HTML-a možete da prikažete slike u dokumentu.
1.7. Primeri
Primer 11.1 Ubacivanje slike <html> <body> <p> An image: <img src="constr4.gif" width="144" height="50"> </p> <p> A moving image: <img src="hackanm.gif" width="48" height="48"> </p> <p> Note that the syntax of inserting a moving image is no different from that of a non-moving image. </p> </body> </html>
Primer 11.2 Ubacivanje slike sa druge lokacije <html> <body> <p> An image from another folder: <img src="/images/netscape.gif" width="33" height="32"> </p> <p> An image from W3Schools: <img src="http://www.w3schools.com/images/ie.gif" width="73" height="68"> </p> </body> </html>
HTML 44
1.8. Tag image i atribut src
Slike se u HTML-u definišu pomoću taga <img>. Tag <img> je prazan, što znači samo sadrži atribute i nema završni tag. Da bi sliku prikazali na strani, potrebno je da koristite atribut src. Vrednost atributa src je URL slike koju želite da prikažete na strani. Sintaksa za definisanje slike: <img src="url">
URL ukazuje na lokaciju gde se nalazi slika. Slika "boat.gif" koja se nalazi u direktorijumu images na"www.w3schools.com" ima URL: http://www.w3schools.com/images/boat.gif. Browser stavlja sliku na mesto gde se u dokumentu pojavio tag img. Ako ste sliku stavili između dva paragrafa, browser prikazuje prvi paragraf, pa sliku, pa drugi paragraf.
1.9. Atribut alt
Atribut alt se koristi za definisanje alternativnog teksta za sliku.Vrednost atributa je tekst koji definiše autor: <img src="boat.gif" alt="Big Boat">
Ukoliko browser ne može da prikaže ili učita sliku, tekst kaže korisniku sta je trebalo da se nađe na tom mestu. Dobra praksa je da za svaku sliku definišete alt atribut, da bi omogućili korišćenje vaše stranice i korisnicima čiji browser-i ne mogu da prikažu slike.
1.10. Korisni saveti
Ako vaš HTML fajl sadrži 10 slika, 11 za prikazivanje stranice je potrebno da se skine 11 fajlova. To zahteva vreme, tako da je savet: koristite slike pažljivo
1.11. Još primera
Primer 11.3 Slika za pozadinu <html> <body background="background.jpg"> <h3>Look: A background image!</h3> <p>Both gif and jpg files can be used as HTML backgrounds.</p> <p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html>
Primer 11.4 Poravnanje slika <html> <body> <p> An image <img src="hackanm.gif" align="bottom" width="48" height="48"> in the text
HTML 45
</p> <p> An image <img src ="hackanm.gif" align="middle" width="48" height="48"> in the text </p> <p> An image <img src ="hackanm.gif" align="top" width="48" height="48"> in the text </p> <p>Note that bottom alignment is the default alignment</p> <p> An image <img src ="hackanm.gif" width="48" height="48"> in the text </p> <p> <img src ="hackanm.gif" width="48" height="48"> An image before the text </p> <p> An image after the text <img src ="hackanm.gif" width="48" height="48"> </p> </body> </html>
Primer 11.5 Plivajuća slika <html> <body> <p> <img src ="hackanm.gif" align ="left" width="48" height="48"> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p>
HTML 46
<p> <img src ="hackanm.gif" align ="right" width="48" height="48"> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. </p> </body> </html>
Primer 11.6 Promena veličine slike <html> <body> <p> <img src="hackanm.gif" width="20" height="20"> </p> <p> <img src="hackanm.gif" width="45" height="45"> </p> <p> <img src="hackanm.gif" width="70" height="70"> </p> <p> You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the img tag. </p> </body> </html>
Primer 11.7 Prikazivanje alternativnog teksta za sliku <html> <body> <img src="goleft.gif" alt="Go Left" width="32" height="32"> <p> Text-only browsers cannot display images and will only display the text that is specified in the "alt" attribute for the image. Here, the "alt"-text is "Go Left".</p> <p> Note that if you hold the mouse pointer over the image, most browsers will display the "alt"-text. </p> </body>
HTML 47
</html>
Primer 11.8 Korišćenje slike kao linka <html> <body> <p> You can also use an image as a link: <a href="lastpage.htm"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> </p> </body> </html>
Primer 11.9 Slika kao mapa <html> <body> <p> Click on one of the planets to watch it closer: </p> <img src="planets.gif" width="145" height="126" usemap="#planetmap"> <map id="planetmap" name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> <p> <b>Note:</b> We use both an <b>id</b> and a <b>name</b> attribute in the map tag because some versions of Netscape don't understand the id attribute.</p> </body> </html>
HTML 48
Primer 11.10 Kako da pretvorite sliku u mapu <html> <body> <p> Move the mouse over the image, and look at the status bar to see how the coordinates change. </p> <p> <a href="tryhtml_ismap.htm"> <img src="planets.gif" ismap width="146" height="126"> </a> </p> </body> </html>
1.12. Tagovi za slike
Tag Opis <img> Definiše sliku <map> Definiše mapu <area> Definiše oblast u okviru mape na koju možete da kliknete
12. HTML pozadine Dobra pozadina može da učini da vaša strana izgleda sjajno..
1.13. Primeri
Primer 12.1 Dobar izbor boje teksta i pozadine <html> <body bgcolor="#d0d0d0"> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. </p> </body> </html>
Primer 12.2 Loš izbor boja teksta i pozadine
HTML 49
<html> <body bgcolor="#ffffff" text="yellow"> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. </p> </body> </html>
1.14. Pozadine
Tag <body> ima dva atributa pomoću kojih možete da definišete pozadinu. Pozadina može da bude boja ili slika.
Bgcolor Atribut bgcolor definiše boju pozadine za HTML stranu. Vrednost ovog atributa može da bude heksadecimalni broj, RGB vrednost ili ime boje: <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> Sve tri linije postavljaju boju pozadine na crnu.
Background Atribut background definiše sliku za pozadinu HTML strane. Vrednost ovog atributa je URL slike koju želimo da koristimo. Ako je slika manja od prozora browser-a, slika se ponavlja dok ne ispuni ceo prozor. <body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
URL može da bude relativan (kao u prvoj liniji) ili apsolutan (kao u drugoj liniji). Primedba: Ako želite da koristite sliku za pozadinu, trebalo bi da razmislite o sledećem:
• Da li će slika da previše poveća vreme učitavanja strane? • Da li će slika za pozadinu da se uklopi sa drugim slikama na strani? • Da li će slika da se uklopi sa bojom teksta? • Da li će slika da izgleda dobro kad se bude ponavljala na strani? • Da li će slika da odvuče pažnju sa teksta?
1.15. Još primera
Primer 12.3 Dobra slika za pozadinu <html> <body background="background.jpg"> <h3>Image Background</h3>
HTML 50
<p>Both gif and jpg files can be used as HTML backgrounds.</p> <p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html>
Primer 12.4 Dobra slika za pozadinu 2 <html> <body background="paper.gif"> <h3>Image Background</h3> <p>Both gif and jpg files can be used as HTML backgrounds.</p> <p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html>
Primer 12.5 Loša slika za pozadinu <html> <body background="rock.jpg"> <h3>Image Background</h3> <p>Both gif and jpg files can be used as HTML backgrounds.</p> <p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html>
13. HTML slike Slike se prikazuju kombinujući crvene (RED), zelene (GREEN) i plave (BLUE) svetlosne izvore.
1.16. Vrednosti boja
Boje se definišu heksadecimalnom notacijom, koristeći kombinaciju crvene, zelene i plave boje (RGB). Najniža vrednost koja može da se da boji je 0 (hex #00). Najviša vrednost je (hex #FF).
1.17. Imena boja
Većina browsera podržava imena boja. Primedba: Only W3C HTML 4.0 standard podržava samo 16 imena boja(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white i yellow). Za ostale boje morate da koristite Color HEX vrednost.
1.18. Web bezbedne boje
Do pre nekoliko godina, kada je većina računara mogla da prikaže samo 256 različitih boja, Web standard je predložio listu od 216 Web bezbednih boja (Web Safe Colors) Razlog je bio taj što su Windows i Mac operativni sistemi koristili 40 različitih rezervisanih sistemskih boja (svaki po oko 20 boja). Ovo više nije tako važno, pošto je većina računara sposobna da prikaže milione različitih boja, ali vi odlučite.