1. Uvod u HTML Šta je HTML fajl?

Size: px

Start display at page:

Download "1. Uvod u HTML Šta je HTML fajl?"

Dayna Park
5 years ago
Views:

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) Pokrenite Notepad. Otkucajte sledeći tekst: Primer 1.1 <head> <title>naslov stranice</title> </head> 1.2. Jednostavan primer Ovo je moja prva stranica. <b>ovaj tekst je bold</b> 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 Objašnjenje primera Prvi tag u vašem HTML dokumentu je. Ovaj tag govori vašem browser-u da je ovo početak HTML dokumenta. Poslednji tag u vašem dokumentu je. 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 i je tekst koji će se prikazati u vašem browser-u. Tekst između tagova <b> i </b> će biti prikazan podebljanim slovima (bold) 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 1

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 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: Ovo je moja prva stranica. <b>ovaj tekst je bold</b> Ovaj HTML element počinje početnim tagom, i završava se završnim tagom. Svrha taga je da definiše HTML element koji sadrži telo HTML dokumenta Atributi tagova Tagovi mogu da imaju atribute. Atributi mogu da obezbede dodatne informacije o HTML elementima. Element body se definiše pomoću taga. 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 2

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 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. Paragrafi se definišu pomoću taga. Ovo je paragraf. Ovo je jos jedan paragraf 3.2. Paragrafi HTML automatski dodaje dodatan prazan red pre i posle paragrafa Novi red Tag <br> se koristi kad želimo novi red, ali ne i novi paragraf. Ovo <br> je pare<br>graf sa novim redovima Tag <br> je prazan tag. On nema završni tag 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 3

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 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) Primeri Primer 3.1 Osnovno ponašanje elemenata paragrafa. Ovaj paragraf sadrzi puno linija u izvornom kodu, Ali ih browser ignorise. Ovaj paragraf sadrzi u izvornom ali ih ignorise. browser kodu, puno razmaka Broj linija u paragrafu zavisi od velicine prozora vaseg browser/a. Ako promenite velicinu prozora browser-a, broj linija ovog paragrafa ce se promeniti. Primer 3.2 Koriščenje taga <br>, Da bi ubacili<br>novi red<br>u<br>paragraf,<br>koristite br tag. HTML 4

5 Primer 3.3 Problemi kod formatiranja HTML-a 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. Primetite da browser jednostavno ignorise vase formatiranje! Primer 3.4 Naslovi <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> Koristite h tagove samo za naslove. Ne koristite ih za podebljavanje teksta. Za to postoji drugi tag. Primer 3.5 centriranje naslova <h1 align="center">ovo je naslov 1</h1> Naslov je centriran. Naslov je centriran. Naslov je centriran. Naslov je centriran. Naslov je centriran. Primer 3.6 Ubacivanje horizontalne linije HTML 5

6 hr tag definise horizontalnu liniju: <hr> ovo je paragraf <hr> ovo je paragraf <hr> ovo je paragraf Primer 3.7 Sakriveni komentari  Ovo je regularan paragraf Primer 3.8 Dodavanje boje pozadini <body bgcolor="yellow"> <h2>vidite: Zuta pozadina!</h2> 4. HTML formatiranje teksta 4.1. Tagovi za formatiranje teksta Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> Opis Definiše bold (podebljan) tekst Definiše big (krupan) tekst Definiše emphasized (naglašen) tekst Definiše italic (iskošen) tekst Definiše small (sitan) tekst Definiše strong tekst Definiše subscripted tekst (indekse) Definiše superscripted tekst (eksponente) Definiše inserted (umetnut) tekst Definiše deleted (obrisan) tekst HTML 6

7 4.2. "Computer Output" tagovi Tag <code> <kbd> <samp> <tt> <var> <pre> Opis Definiše definise kompjuterski kod Definiše tekst sa tastature Definiše primer compjuterskog koda Definiše teletype tekst Definiše promenljivu Definiše preformatiran tekst 4.3. Tagovi za citate, navođenje i definicije Tag <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> Opis Definiše skraćenicu Definiše acronym (mnemoničku skraćenicu) Definiše element adrese Definiše smer teksta (za arapsko pismo) Definiše dugo navođenje Definiše kratko navođenje Definiše citat Definiše definiciju 4.4. Primeri Primer 4.1 Formatiranje teksta <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 7

8 <br> <small> This text is small </small> <br> Ovaj tekst sadrzi <sub> subscript </sub> <br> Ovaj tekst sadrzi <sup> superscript </sup> Primer 4.2 Kontrolisanje formatiranja paragrafa pomoću pre taga <pre> Ovo je preformatiran tekst. Na ovaj nacin se cuvaju razmaci i prelazak u novi red. </pre> tag pre je dobar za prikazivanje kompjuterskog koda: <pre> for i = 1 to 10 print i next i </pre> Primer 4.3 Computer output <code>computer code</code> <br> <kbd>ulaz sa tastature</kbd> <br> <tt>teletype text</tt> <br> HTML 8

9 <samp>primer</samp> <br> <var>compjuterska promenljiva</var> <br> <b>note:</b> Ovi tagovi se cesto koriste za prikazivanje kompjuterskog koda. Primer 4.4 Skraćenice i mnemonici <abbr title="united Nations">UN</abbr> <br> <acronym title="world Wide Web">WWW</acronym> Atribut title se koristi da bi se prikazao pun naziv kad se strelica postavi preko skracenice ili mnemonika. U IE 5. ovo radi samo za mnemonik. U Netscape 6.2 ovo radi za oba elementa. Primer 4.5 Navodjenje 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> Kad se koristi dugo navodjenje, browser umece novi red i margine. Kratko navodjenje se ne formatira posebno. HTML 9

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 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 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. Primer 6.1 Kreiranje linka u HTML dokumentu 6.1. Početni primeri <a href="lastpage.htm"> Ovaj tekst</a> je link na stranu koja se nalazi na istoj Web lokaciji. <a href=" Ovaj tekst</a> je link na stranu na World Wide Web-u. HTML 10

11 Primer 6.2 Korišćenje slike kao linka Mozete da koristite i sliku kao link<a href="lastpage.htm"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> 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=" 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=" 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 11

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=" 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=" generisaćete dva HTTP zahteva serveru, zbog toga što će server da doda kosu crtu i da kreira novi zahtev koji izgleda ovako: href=" 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. Primer 6.3 Otvaranje stranice u novom prozoru 6.6. Još primera <a href="lastpage.htm" target="_blank">last Page</a> Ako atribut target postavite na vrednost "_blank", link ce se otvoriti u novom prozoru. Primer 6.4 Korišćenje linka da bi se skočilo na neki deo dokumenta <a href="#c4">takodje pogledajte Chapter 4.</a> <h2>chapter 1</h2> This chapter explains ba bla bla HTML 12

13 <h2>chapter 2</h2> This chapter explains ba bla bla <h2>chapter 3</h2> This chapter explains ba bla bla <h2><a name="c4">chapter 4</a></h2> This chapter explains ba bla bla <h2>chapter 5</h2> This chapter explains ba bla bla <h2>chapter 6</h2> This chapter explains ba bla bla <h2>chapter 7</h2> This chapter explains ba bla bla Primer 6.5 Izlazak iz frejma Zaglavljeni u frejmu? <a href=" target="_top">klikni ovde!</a> Primer 6.6 Povezivanje mail poruke (radi samo ako je mail instaliran) Ovo je mail link: <a href="mailto:neko@microsoft.com?subject=zdravo%20ponovo"> Posalji Mail</a> <b>primedba:</b> Razmaci medju recima se zamenjuju sa %20 da bi <b>bili sigurni</b> da ce browser da vas tekst prikaze ispravno Primer 6.7 Primer komplikovanijeg povezivanja mail poruke HTML 13

14 Ovo je drugi mail link: <a ject=letnja%20zurka&body=vi%20ste%20pozvani%20na%20veliku%20letnju%20zurku!">posalji postu!</a> <b>primedba:</b> Razmaci izmedju reci treba da budu zamenjeni sa %20 da bi sigurni</b> da ce browser da pravilno prikaze tekst. <b>bili 7. HTML okviri Uz pomoć okvira moguć je prikaz više Web stranica u jednom prozoru. Primer 7.1 vertikalna podela sa tri razlicita dokumenta <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> 7.1. Primeri Primer 7.2 Horizontalna podela sa tri različita dokumenta <frameset rows="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> Primer 7.3 Korišćenje <noframes> taga. <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> HTML 14

15 <frame src="frame_c.htm"> <noframes> Vas browser ne podrzava rad sa okvirima </noframes> </frameset> 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 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 Još primera Primer 7.4 Dokument sa tri okvira, sa definisanim vrstama i kolonama <frameset rows="50%,50%"> <frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm"> HTML 15

16 <frame src="frame_c.htm"> </frameset> </frameset> Primer 7.5 Korišćenje atributa noresize <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> 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). <frameset cols="120,*"> <frame src="tryhtml_contents.htm"> <frame src="frame_a.htm" name="showframe"> </frameset> Primer 7.7 Kreiranje inline okvira <iframe src=" Neki stariji browser-i ne podrzavaju iframe. Ako ne podrzavaju, iframe nece da bude vidljiv. 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 16

17 <frameset cols="20%,80%"> <frame src="frame_a.htm"> <frame src="link.htm#c10"> </frameset> 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>. <frameset cols="180,*"> <frame src="content.htm"> <frame src="link.htm" name="showframe"> </frameset> Primer 8.1 Kreiranje tabele 8. HTML tabele 8.1. Primeri Svaka tabela pocinje tagom table. Svaka vrsta pocinje tagom tr. Svaki podatak pocinje tagom td. <h4>jedna kolona:</h4> <table border="1"> <td>100</td> <h4>jedna vrsta i tri kolone:</h4> <table border="1"> <td>100</td> <td>200</td> <td>300</td> HTML 17

18 <h4>dve vrste i tri kolone:</h4> <table border="1"> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> Primer 8.2 Različiti okviri tabela <h4>sa normalnim okvirom:</h4> <table border="1"> <td>first</td> <td>second</td> <h4>sa debelim okvirom:</h4> <table border="8"> <td>first</td> <td>second</td> HTML 18

19 <h4>sa veoma debelim okvirom:</h4> <table border="15"> <td>first</td> <td>second</td> 8.2. Tabele Tabele se definišu pomoću taga <table>. Tabela je podeljena u vrste (sa tagom ), 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"> <td>vrsta 1, celija 1</td> <td>vrsta 1, celija 2</td> <td>vrsta 2, celija 1</td> <td>wrsta 2, celija 2</td> Izgleda ovako u browser-u: vrsta 1, celija 1 vrsta 1, celija 2 vrsta 2, celija 1 vrsta 2, celija 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"> <td>vrsta 1, celija 1</td> HTML 19

20 <td>vrsta 1, celija 2</td> Naslov tabele de definiše pomoću taga <th>. <table border="1"> <th>naslov</th> <th>jos jedan naslov</th> <td>vrsta 1, celija 1</td> <td>vrsta 1, celija 2</td> <td>vrsta 2, celija 1</td> <td>vrsta 2, celija 2</td> 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 Naslovi u tabeli 8.5. Prazna ćelija u tabeli Ćelije bez sadržaja se u većini browser-a ne prikazuju dobro. <table border="1"> <td> vrsta 1, celija 1</td> <td> vrsta 1, celija 2</td> <td> vrsta 2, celija 1</td> <td></td> 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 20

21 <table border="1"> <td> vrsta 1, celija 1</td> <td> vrsta 1, celija 2</td> <td> vrsta 2, celija 1</td> <td> </td> Kako to izgleda u browser-u: vrsta 1, celija 1 vrsta 1, celija 2 vrsta 2, celija Primeri Primer 8.3 Tabela bez okvira <h4>ova tabela nema okvire:</h4> <table> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> <h4>jos jedna tabela bez okvira:</h4> <table border="0"> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> HTML 21

22 <td>600</td> Primer 8.4 Prikaz okvira tabele <h4>naslovi tabele:</h4> <table border="1"> <th>name</th> <th>telephone</th> <th>telephone</th> <td>bill Gates</td> <td> </td> <td> </td> <h4>vertikalni naslovi:</h4> <table border="1"> <th>first Name:</th> <td>bill Gates</td> <th>telephone:</th> <td> </td> <th>telephone:</th> <td> </td> Primer 8.5 Korišćenje ( ) HTML 22

23 <table border="1"> <td>some text</td> <td>some text</td> <td></td> <td>some text</td> 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 ( ). Primer 8.6 Tabela sa naslovima <h4> Ova tabela ima naslov i debele okvire: </h4> <table border="6"> <caption>moj naslov</caption> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> HTML 23

24 Primer 8.7 Ćelija koja se proteže na više od jedne vrste/kolone <h4>celija koja se proteze na dve kolone:</h4> <table border="1"> <th>name</th> <th colspan="2">telephone</th> <td>bill Gates</td> <td> </td> <td> </td> <h4>celija koja se proteze na dve vrste:</h4> <table border="1"> <th>first Name:</th> <td>bill Gates</td> <th rowspan="2">telephone:</th> <td> </td> <td> </td> Primer 8.8 tagovi unutar tabele <table border="1"> <td> Ovo je paragraf Ovo je jos jedan paragraf </td> <td>ova celija sadrzi tabelu: HTML 24

25 <table border="1"> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </td> <td>ova celija sadrzi listu <ul> <li>jabuka</li> <li>banana</li> <li>ananas</li> </ul> </td> <td>zdravo</td> Primer 8.9 Popunjavanje tabele <h4>bez popunjavanja celije:</h4> <table border="1"> <td>first</td> <td>second</td> <h4>sa popunjavanjem celije:</h4> <table border="1" HTML 25

26 cellpadding="10"> <td>first</td> <td>second</td> Primer 8.10 Razmak između ćelija <h4>bez razmaka izmedju celija:</h4> <table border="1"> <td>first</td> <td>second</td> <h4>sa razmakom izmedju celija:</h4> <table border="1" cellspacing="10"> <td>first</td> <td>second</td> Primer 8.11 Dodavanje pozadine tabeli HTML 26

27 <h4>boja u pozadini:</h4> <table border="1" bgcolor="red"> <td>first</td> <td>second</td> <h4>slika u pozadini:</h4> <table border="1" background="bgdesert.jpg"> <td>first</td> <td>second</td> Primer 8.12 Dodavanje pozadine ćeliji <h4>pozadina celije:</h4> <table border="1"> <td bgcolor="red">first</td> <td background="bgdesert.jpg"> Second</td> HTML 27

28 Primer 8.13 Poravnanje sadržaja u ćeliji <table width="400" border="1"> <th align="left">money spent on...</th> <th align="right">january</th> <th align="right">february</th> <td align="left">clothes</td> <td align="right">$241.10</td> <td align="right">$50.20</td> <td align="left">make-up</td> <td align="right">$30.00</td> <td align="right">$44.45</td> <td align="left">food</td> <td align="right">$730.40</td> <td align="right">$650.00</td> <th align="left">sum</th> <th align="right">$ </th> <th align="right">$744.65</th> Primer 8.14 Atributi okvira HTML 28

29 Ako ne vidite okvire oko tabele u ovom primeru, to znaci da je vas browser star i da ih ne podrzava <h4>sa frame="border":</h4> <table frame="border"> <td>first</td> <td>second</td> <h4>sa frame="box":</h4> <table frame="box"> <td>first</td> <td>second</td> <h4>sa frame="void":</h4> <table frame="void"> <td>first</td> <td>second</td> <h4>sa frame="above":</h4> <table frame="above"> <td>first</td> HTML 29

30 <td>second</td> <h4>sa frame="below":</h4> <table frame="below"> <td>first</td> <td>second</td> <h4>sa frame="hsides":</h4> <table frame="hsides"> <td>first</td> <td>second</td> <h4>sa frame="vsides":</h4> <table frame="vsides"> <td>first</td> <td>second</td> <h4>sa frame="lhs":</h4> <table frame="lhs"> HTML 30

31 <td>first</td> <td>second</td> <h4>sa frame="rhs":</h4> <table frame="rhs"> <td>first</td> <td>second</td> 9. HTML liste HTML podržava numerisane, nenumerisane i liste definicija. Primer 9.1 Nenumerisana lista lista 9.1. Primeri <h4>nenumerisana lista:</h4> <ul> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> Primer 9.2 Numerisana lista HTML 31

32 <h4>numerisana lista:</h4> <ol> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> 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 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 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 32

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... Primer 9.3 Različite vrste numerisanih lista <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"> 9.5. Još primera HTML 33

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> Primer 9.4 Različite vrste nenumerisanih lista lista <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> Primer 9.5 Ugnježdene liste HTML 34

35 <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> Primer 9.6 Ugnježdene liste 2 <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> Primer 9.7 Liste definicija <h4>lista definicija:</h4> <dl> <dt>coffee</dt> HTML 35

36 <dd>black hot drink</dd> <dt>milk</dt> <dd>white cold drink</dd> </dl> 10. HTML forme i ulazi HTML forme se koriste da bi se izabrale različite vrste ulaza Primeri Primer 10.1 Tekst polje <form> Ime: <input type="text" name="ime"> <br> Prezime: <input type="text" name="prezime"> </form> Primer 10.2 Polje za šifru <form> Korisnicko ime: <input type="text" name="korisnik"> <br> Sifra: <input type="password" name="sifra"> </form> Primetite: karakteri se u polju za sifru prikzuju kao zvezdice. HTML 36

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> 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 37

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. Primer 10.3 Checkboxes Još primera <form> I have a bike: <input type="checkbox" name="bike"> <br> I have a car: <input type="checkbox" name="car"> </form> HTML 38

39 Primer 10.4 Radio dugmad <form> Male: <input type="radio" checked="checked" name="sex" value="male"> <br> Female: <input type="radio" name="sex" value="female"> </form> When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked Primer 10.5 Padajuće liste <form> <select name="cars"> <option value="volvo">volvo <option value="saab">saab <option value="fiat">fiat <option value="audi">audi </select> </form> Primer 10.6 Padajuće liste 2 <form> <select name="cars"> <option value="volvo">volvo <option value="saab">saab <option value="fiat" selected="selected">fiat <option value="audi">audi </select> HTML 39

40 </form> Primer 10.7 Tekst polje <textarea rows= 10 cols= 30 > Macka se igra u basti. </textarea> Primer 10.8 Kreiranje dugmeta <form> <input type="button" value="hello world!"> </form> Primer 10.9 Skupovi polja (fieldset) oko podataka <fieldset> <legend> Health information: </legend> <form> Height <input type="text" size="3"> Weight <input type="text" size="3"> </form> </fieldset> If there is no border around the input form, your browser is too old Primeri formi Primer Forma sa ulaznim poljima i Submit dugmetom HTML 40

41 <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> If you click the "Submit" button, you will send your input to a new page called html_form_action.asp. Primer Forma sa checkbox-ovima <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> If you click the "Submit" button, you send your input to a new page called html_form_action.asp. Primer Forma koja sadrži radio dugmad <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 41

42 <br> <input type ="submit" value ="Submit"> </form> If you click the "Submit" button, you will send your input to a new page called html_form_action.asp. Primer Slanje a iz forme <form action="mailto:someone@w3schools.com" method="post" enctype="text/plain"> <h3>this form sends an 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> Tagovi za forme Tag <form> <input> <textarea> <label> <fieldset> <legend> <select> <optgroup> Opis Definiše formu za korisnički ulaz Definiše ulazno polje Definiše tekst polje (ulaznhu kontrolu sa više linija testa) Definiše labelu kontrole Definiše fieldset Definiše naslov za fieldset Definiše listu koja može da se selektuje (padajuću listu) Definiše grupu opcija HTML 42

43 <option> <button> Definiše opciju u padajućoj listi Definiše dugme a push button 11. HTML Images Pomoću HTML-a možete da prikažete slike u dokumentu. Primer 11.1 Ubacivanje slike An image: <img src="constr4.gif" width="144" height="50"> A moving image: <img src="hackanm.gif" width="48" height="48"> 1.7. Primeri Note that the syntax of inserting a moving image is no different from that of a nonmoving image. Primer 11.2 Ubacivanje slike sa druge lokacije An image from another folder: <img src="/images/netscape.gif" width="33" height="32"> An image from W3Schools: <img src=" width="73" height="68"> HTML 43

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" ima URL: 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 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 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 Primer 11.3 Slika za pozadinu <body background="background.jpg"> <h3>look: A background image!</h3> Još primera Both gif and jpg files can be used as HTML backgrounds. If the image is smaller than the page, the image will repeat itself. Primer 11.4 Poravnanje slika An image <img src="hackanm.gif" align="bottom" width="48" height="48"> in the text HTML 44

45 An image <img src ="hackanm.gif" align="middle" width="48" height="48"> in the text An image <img src ="hackanm.gif" align="top" width="48" height="48"> in the text Note that bottom alignment is the default alignment An image <img src ="hackanm.gif" width="48" height="48"> in the text <img src ="hackanm.gif" width="48" height="48"> An image before the text An image after the text <img src ="hackanm.gif" width="48" height="48"> Primer 11.5 Plivajuća slika <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. HTML 45

46 <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. Primer 11.6 Promena veličine slike <img src="hackanm.gif" width="20" height="20"> <img src="hackanm.gif" width="45" height="45"> <img src="hackanm.gif" width="70" height="70"> You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the img tag. Primer 11.7 Prikazivanje alternativnog teksta za sliku <img src="goleft.gif" alt="go Left" width="32" height="32"> 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". Note that if you hold the mouse pointer over the image, most browsers will display the "alt"-text. HTML 46

47 Primer 11.8 Korišćenje slike kao linka You can also use an image as a link: <a href="lastpage.htm"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> Primer 11.9 Slika kao mapa Click on one of the planets to watch it closer: <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> <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. HTML 47

48 Primer Kako da pretvorite sliku u mapu Move the mouse over the image, and look at the status bar to see how the coordinates change. <a href="tryhtml_ismap.htm"> <img src="planets.gif" ismap width="146" height="126"> </a> Tagovi za slike Tag <img> <map> <area> Opis Definiše sliku Definiše mapu 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.. Primer 12.1 Dobar izbor boje teksta i pozadine <body bgcolor="#d0d0d0"> Primeri This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. Primer 12.2 Loš izbor boja teksta i pozadine HTML 48

49 <body bgcolor="#ffffff" text="yellow"> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph Pozadine Tag 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=" 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? Primer 12.3 Dobra slika za pozadinu <body background="background.jpg"> <h3>image Background</h3> Još primera HTML 49

50 Both gif and jpg files can be used as HTML backgrounds. If the image is smaller than the page, the image will repeat itself. Primer 12.4 Dobra slika za pozadinu 2 <body background="paper.gif"> <h3>image Background</h3> Both gif and jpg files can be used as HTML backgrounds. If the image is smaller than the page, the image will repeat itself. Primer 12.5 Loša slika za pozadinu <body background="rock.jpg"> <h3>image Background</h3> Both gif and jpg files can be used as HTML backgrounds. If the image is smaller than the page, the image will repeat itself. 13. HTML slike Slike se prikazuju kombinujući crvene (RED), zelene (GREEN) i plave (BLUE) svetlosne izvore 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) 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 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. HTML 50

What is an HTML File? HTML Tags

What is an HTML File? HTML Tags What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must