13
NAPRAVITE SEBI SAJT Ovaj tutorijal je namenjen da Vas nauči kako da koristite HTML za kreiranje neke internet prezentacije ili sajta, a prvenstveno je namenjen meni kao potsetnik . Naravno iskoristio sam lose vreme da bi' sve ovo napravio . Pogledajte . Uvod ( #Uvod ) 1. HTML Elementi ( #HTML_Elementi ) 2. Osnovni HTML tagovi ( #Osnovni_HTML_tagovi ) 3. HTML atributi ( #HTML_atributi ) 4. Formatiranje teksta u HTML-u ( #Formatiranje_teksta_u_HTML ) 5. Kodovi karaktera u HTML-u ( #Smisao_karaktera_u_HTML ) 6. Linkovi u HTML-u ( #Linkovi_u_HTML ) 7. UVOD Kažu ljudi da je HTML veoma lak za učenje. To ćemo videti tokom ovog tutorijala, da li je tačno ili ne. Kao prvo da vidimo šta je to HTML fajl i šta predstavlja ta skraćenica. Skraćenica - Hyper Text Markup Language. Jedan HTML fajl je ustvari tekst fajl koji se od niza znakova koje ćemo u daljem tekstu zvati tagovi. Ti tagovi govore Web pretraživaču na koji način će prikazati tu stranicu. HTML fajl ima ekstenziju htm ili html. HTML fajl se može kreirati bilo kojim prostim tekst editorom. Možete komotno koristiti Notepad. Evo prostog primera. Otvorite Notepad i otkucajte sledeći tekst bas ovako : <html> <head> <title>Naslov stranice</title> </head> <body> Ovo je moja prva stranica. <b>Tekst izmedju ovih tagova ce biti zatamnjen</b> </body> </html> Snimite taj fajl na pr. mojastrana.htm. Ali obavezno nazovite taj dokument i obavezno stavite .htm posle naziva .Otvorite ga pomoću vašeg Web pretraživača (npr. Microsoft Internet Explorer) i trebalo bi da dobijete sledeći natpis: Ovo je moja prva stranica. Tekst izmedju ovih tagova ce biti zatamnjen NAPOMENA: U Notepad-u fajl morate snimiti opcijom Save As, i u polje Save as type da odaberete opciju All Files. Ako fajl snimite samo sa Save onda će Notepad automatski dodeliti tom fajlu ekstenziju txt, bez obzira što ste vi stavili tačku posle imena i htm. (mojastrana.htm.txt). Da li ste snimili fajl kao htm, bićete sigurni jer bi on tada trebalo da dobije ikonu vašeg instaliranog pretraživača. Objašnjenje primera: Prvi tag koji ste u ovom primeru upisali je <html>. To govori vašem internet pretraživaču da je to početak jednog HTML HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm 1 of 13 19/07/2013 21:44

HTML Za Pocetnike - Www.izradasajta.webs

  • Upload
    budzak2

  • View
    109

  • Download
    9

Embed Size (px)

DESCRIPTION

html

Citation preview

Page 1: HTML Za Pocetnike - Www.izradasajta.webs

NAPRAVITE SEBI SAJT

Ovaj tutorijal je namenjen da Vas nauči kako da koristite HTML za kreiranje neke internet prezentacije ili sajta, a

prvenstveno je namenjen meni kao potsetnik . Naravno iskoristio sam lose vreme da bi' sve ovo napravio . Pogledajte .

Uvod (#Uvod)1.

HTML Elementi (#HTML_Elementi)2.

Osnovni HTML tagovi (#Osnovni_HTML_tagovi)3.

HTML atributi (#HTML_atributi)4.

Formatiranje teksta u HTML-u (#Formatiranje_teksta_u_HTML)5.

Kodovi karaktera u HTML-u (#Smisao_karaktera_u_HTML)6.

Linkovi u HTML-u (#Linkovi_u_HTML)7.

UVOD

Kažu ljudi da je HTML veoma lak za učenje. To ćemo videti tokom ovog tutorijala, da li je tačno ili ne.

Kao prvo da vidimo šta je to HTML fajl i šta predstavlja ta skraćenica. Skraćenica - Hyper Text Markup Language.

Jedan HTML fajl je ustvari tekst fajl koji se od niza znakova koje ćemo u daljem tekstu zvati tagovi. Ti tagovi govore Web

pretraživaču na koji način će prikazati tu stranicu. HTML fajl ima ekstenziju htm ili html. HTML fajl se može kreirati bilo

kojim prostim tekst editorom. Možete komotno koristiti Notepad.

Evo prostog primera.

Otvorite Notepad i otkucajte sledeći tekst bas ovako :

<html>

<head>

<title>Naslov stranice</title>

</head>

<body>

Ovo je moja prva stranica. <b>Tekst izmedju ovih tagova ce biti zatamnjen</b>

</body>

</html>

Snimite taj fajl na pr. mojastrana.htm. Ali obavezno nazovite taj dokument i obavezno stavite .htm posle naziva .Otvorite ga

pomoću vašeg Web pretraživača (npr. Microsoft Internet Explorer) i trebalo bi da dobijete sledeći natpis:

Ovo je moja prva stranica. Tekst izmedju ovih tagova ce biti zatamnjen

NAPOMENA: U Notepad-u fajl morate snimiti opcijom Save As, i u polje Save as type da odaberete opciju All Files. Ako

fajl snimite samo sa Save onda će Notepad automatski dodeliti tom fajlu ekstenziju txt, bez obzira što ste vi stavili tačku posle

imena i htm. (mojastrana.htm.txt).

Da li ste snimili fajl kao htm, bićete sigurni jer bi on tada trebalo da dobije ikonu vašeg instaliranog pretraživača.

Objašnjenje primera:

Prvi tag koji ste u ovom primeru upisali je <html>. To govori vašem internet pretraživaču da je to početak jednog HTML

HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm

1 of 13 19/07/2013 21:44

Page 2: HTML Za Pocetnike - Www.izradasajta.webs

dokumenta.

Poslednji tag je </html>, koji govori pretraživaču da je to kraj HTML dokumenta.

Tekst između tagova <head> i </head> je zaglavlje. Zaglavlje se ne prikazuje u prozoru pretraživača.

Tekst između tagova <title> i </title> je naziv ili ime vašeg dokumenta. Taj tekst se ispisuje na vrhu prozora pretraživača kao

naslov ili ime otvorenog prozora.

Tekst između tagova <body> je tekst koji će se prikazati u prozoru vašeg pretraživača.

Tekst između tagova <b> i </b> će biti prikazan kao boldiran (zatamnjen).

HTM ILI HTML EKSTENZIJA

Nema nikakve razlike, možete koristiti koji god hoćete. U našem primeru smo uzeli HTM. To je loša navika zaostala iz

prošlosti kada su neki od često korišćenih programa dozvoljavali samo tri slova za tip fajla. Danas to nije slučaj tako da

komotno možete koristiti HTML.

Danas postoji mnogo programa koji olakšavaju posao pravljenja HTML dokumenata (sajtova). Oni se skoro svi trude da rade

na principu Ono što vidiš to ćeš i dobiti (WYSIWYG - What You See Is What You Get). Najpoznatiji su Dreamweaver

firme Macromedia koju je odskora kupio Adobe, što je dokaz da njihovi programi stvarno vrede i FronPage deo

Microsoft-ovog paketa Office.

Ipak ako želite da budete vešt Web autor, preporučuje se da koristite prost tekst editor za učenje osnova HTML-a, a kasnije

da to znanje iskoristite u ovim programima.

Ja nisam tako radio, nego sam prvo počeo da eksperimentišem sa Dreamweaver-om, pre jedno 3 godine čisto iz radoznalosti,

i tada mi mnogo toga nije bilo jasno. Tek ovih dana kada sam na netu pronašao neka uputstva (jedno upravo prevodim) su mi

neke stvari jasnije.

Povratak na početak (#Pocetak_strane)

HTML ELEMENTI

HTML dokumenti su tekst fajlovi koji se sastoje od HTML elemenata. HTML elementi su definisani pomoću HTML tagova.

HTML tagovi se koriste da označe HTML elemente. HTML tagovi su oivičeni znakovima manje "<" i veće ">". Te znakove

zovemo ugličaste zagrade. HTML tagovi uglavnom idu u paru npr. <b> i </b>. Prvi tag se zove početni ili startni, a drugi je

završni ili krajnji tag. Tekst između početnog i završnog taga je sadržaj elementa. HTML tagovi ne razlikuju velika i mala

slova, znači <b> je isto kao i <B>.

Setimo se HTML primera iz predhodnog poglavlja.

<html>

<head>

<title>Naslov stranice</title>

</head>

<body>

Ovo je moja prva stranica. <b>Tekst izmedju ovih tagova ce biti zatamnjen</b>

</body>

</html>

Ovo je jedan HTML elemenat:

<b>Tekst izmedju ovih tagova ce biti zatamnjen</b>

HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm

2 of 13 19/07/2013 21:44

Page 3: HTML Za Pocetnike - Www.izradasajta.webs

HTML elemenat počinje sa početnim tagom <b>, sadržaj HTML elementa je: "Tekst izmedju ovih tagova ce biti

zatamnjen" i HTML elemenat se završava krajnjim tagom </b>.

Svrha <b> taga je da definiše neki HTML elemenat koji će biti prikazan zatamnjen (bold).

Ovo je takođe jedan HTML elemenat:

<body>

Ovo je moja prva stranica. <b>Tekst izmedju ovih tagova ce biti zatamnjen</b>

</body>

Ovaj HTML elemenat počinje sa startnim tagom <body> i završava se krajnjim tagom </body>.

Svrha <body> taga je da definiše da taj HTML elemenat sadrži osnovni deo HTML dokumenta.

ZAŠTO KORISTIMO MALA SLOVA ZA TAGOVE?

Ranije smo naglasili da HTML tagovi ne razlikuju velika i mala slova. Ako potražite po internetu primetićete da mnogo

sajtova koriste velika slova za HTML tagove kada ih otvorite u Notepadu. Ipak, ukoliko želite da pratite poslednje Web

standarde, trebalo bi uvek da koristite mala slova za tagove. WWW konzorcijum preporučuje korišćenje malih slova za

tagove u njihovim HTML 4 preporukama, a i XHTML (novija generacija HTML-a) zahteva mala slova za tagove.

Povratak na početak (#Pocetak_strane)

OSNOVNI HTML TAGOVI

Najvažniji tagovi u HTML-u su tagovi koji definišu naslove, paragrafe i prekide linija.

Najbolji način za učenje HTML je rad sa primerima. Autori ovog tutorijala su napravili jedan veoma zgodan HTML editor

namenjen isključivo učenju HTML-a tako da ću i ja iskoristiti njega za te iste primere.

Sa tim editorom možete menjati HTML kod kako god želite i klikom na dugme Edit the text and click me i videćete

rezultat u desnom prozoru.

Primeri:

Veoma jednostavan HTML dokumenat (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic)

Ovaj primer prikazuje veoma jednostavan HTML dokument, sa minimumom HTML tagova. On demostrira kako se tekst

unutar elementa <body> prikazuje u pretraživaču.

Jednostavni paragrafi (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs1)

Ovaj primer pokazuje kako se tekst unutar elementa paragraf prikazuje u pretraživaču.

Biće još primera u nastavku teksta.

NASLOVI (HEADINGS)

Naslovi su definisani sa <h1> do <h6> tagovima. Tag <h1> definiše najveći naslov, a <h6> definiše najmanji 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>

HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm

3 of 13 19/07/2013 21:44

Page 4: HTML Za Pocetnike - Www.izradasajta.webs

<h6>Ovo je naslov</h6>

HTML automatski dodaje još jednu praznu liniju pre i posle naslova.

PARAGRAFI (PASUSI)

Paragrafi su definisani <p> tagom.

<p>Ovo je paragraf</p>

<p>Ovo je još jedan paragraf</p>

HTML automatski dodaje po jednu praznu liniju pre i posle paragrafa.

Nezaboravite da zatvorite tagove.Verovatno ste videli da se paragraf može napisati i bez završnog taga <p>:

<p>Ovo je paragraf

<p>Ovo je još jedan paragraf

Ovo u gornjem primeru će raditi u većini pretraživača, ali ne u svima. Buduće verzije HTML-a neće dozvoljavati

izostavljanje bilo kojeg taga. Zatvaranje HTML elemenata sa završnim tagovima je način pisanja HTML dokumenata u

budućnosti. To takođe olakšava čitanje i razumevanje koda, ako markirate gde neki element počinje i gde se završava.

Prekidi linija.

Za prekid linije se koristi tag <br>. Na taj način se ne počinje novi paragraf (pasus). Tag <br> prekida liniju gde god ga

postavite.

<p>This <br> is a para<br>graph with line breaks</p>

Probajte to u ovom primeru (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs)

Tag <br> je prazan tag. On nema krajnji tag kao što bi bio </br>, zato što zatvaranje takvog taga nema smisla.

Da li koristiti <br> ili <br />

Sve više i više ćete viđati da se <br> tag piše kao <br />. Zbog toga što <br> tag nema završetak (krajnji tag), on krši

jedno pravilo budućih HTML jezika (na XML osnovi XHTML), koji zahtevaju da svaki elemenat mora biti zatvoren. Ako

se naviknete da ga pišete kao <br />, nećete imati problema u budućim verzijama HTML-a.

Komentari u HTML-u

Tagovi za komentar se koriste kada želite da ubacite neki komentar u HTML izvorni kod. Komentar će biti ignorisan od

strane pregledača. Obično se komentari koriste da se objasni neki deo koda, koji će kasnije biti od pomoći kada se vrši

neka eventualna prepravka.

<!-- Ovo je komentar -->

Obratite pažnju da znak uzvika stoji posle otvorene zagrade, ali ga nema ispred zatvorene zagrade.

Da uradimo kratku rekapitulaciju HTML elemenata:

HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm

4 of 13 19/07/2013 21:44

Page 5: HTML Za Pocetnike - Www.izradasajta.webs

Svaki HTML elemenat ima svoje ime (body, h1, p, br)

Početni tag je ime u ugličastim zagradama <h1>

Krajnji tag je kosa crta i ime u ugličastim zagradama <h1/>

Sadržaj elementa se uvek nalazi između početnog i krajnjeg taga

Neki HTML elementi nemaju sadržaj

Neki HTML dokumenti nemaju krajnji tag

KORISNI SAVETI

Kada pišete HTML tekst, nikad nećete znati kako će tekst izgledati u nekom drugom pregledaču. Neki ljudi imaju

velike monitore, a neki male. Tekst će se preformatirati svaki put kada korisnik promeni veličinu prozora. Nikada ne

pokušavajte da formatirate tekst u svom editoru dodavanjem praznih linija i razmaka unutar teksta. HTML će

skratiti razmake u vašem tekstu. Bilo koji broj razmaka se broji kao jedan.

U HTML-u se nova linija broji kao jedan razmak.

Korišćenje praznih paragrafa <p>za ubacivanje praznih linija je loša navika. Umesto toga koristite tag <br>. (Ali

nemojte da koristite tag <br> za kreiranje listi. Sačekajte dok dođemo do toga i naučite HTML liste).

HTML automatski dodaje po jednu praznu liniju pre i posle nekih elemenata, kao pre i posle paragrafa ili pre i posle

naslova.

Za razdvajanje sekcija u tekstu se može iskoristiti i tag <hr> (horizontalna linija).

EVO JOŠ NEKOLIKO PRIMERA

Više paragrafa (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs2)

U ovom primeru su prikazana neko od standardnih stanja elemenata paragrafa. U prvom paragrafu imate nekoliko

novih redova unutar paragrafa koje pregledač ignoriše. U drugom paragrafu imate višak razmaka između reči koje

pregledač takođe ignoriše. Treći paragraf je malo duži i služi za demonstraciju kako broj linija jednog paragrafa

zavisi od veličine prozora pregledača. To možete da proverite menjajući veličinu prozora mišem. Kada ga smanjite

broj linija će se povećati i obrnuto.

Prekidi linija (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs)

U ovom primeru se vidi kako se koriste prekidi linija u HTML dokumentu. Ako želite nove redove, a ne nove

paragrafe.

Problemi sa pesmama (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_poem)

Ovaj primer objašnjava neke od problema formatiranja teksta, recimo kod pisanja stihova. Pregledač jednostavno

ignoriše vaše formatiranje i ceo tekst ispisuje redom.

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

Ovaj primer pokazuje sve vrste tagova za naslove u HTML dokumentu. Nemojte koristiti tagove za naslov da bi

zatamnili neki tekst, za to postoje drugi tagovi, ove koristite samo za naslove.

Horizontalna linija (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_hr)

Ovaj primer pokazuje kako se u tekst umeće horizontalna linija.

Sakriveni komentari (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_comment)

Ovaj primer pokazuje kako se u HTML kod ubacuje komentar koji opisuje neki deo koda, i koji se ne vidi u

pregledaču.

OSNOVNI HTML TAGOVI

HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm

5 of 13 19/07/2013 21:44

Page 6: HTML Za Pocetnike - Www.izradasajta.webs

Ako pogledate osnovne HTML tagove u tabeli ispod, videćete da su to u stvari početna slova i skraćenice onoga šta

definišu. Doduše na engleskom.

Tag Opis

<html> (/tags/tag_html.asp) Definiše neki HTML document

<body> (/tags/tag_body.asp) Definiše sadržaj (telo) dokumenta

<h1> to <h6> (/tags/tag_hn.asp) Definiše naslove od 1 do 6

<p> (/tags/tag_p.asp) Definiše a paragraf (pasus)

<br> (/tags/tag_br.asp) Umeće prekid linije (break)

<hr> (/tags/tag_hr.asp) Ubacuje horizontalnu liniju (horizontal rule)

<!--> (/tags/tag_comment.asp) Definiše komentar

Povratak na početak (#Pocetak_strane)

HTML ATRIBUTI

HTML tagovi mogu da imaju i atribute koji obezbeđuju neku dodatnu informaciju za neki HTML elemenat.

Atributi se uek idu u paru "ime/vrednost" kao na prl: ime="vrednost". Oni se uvek preciziraju u početnom tagu

HTML elementa.

1.Primer atributa (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_header)

<h1>definiše početak naslova.

<h1 align="center"> takođe definiše početak naslova ali ima i dodatne informacije da taj naslov treba da bude

centriran u pregledaču.

2.Primer atributa (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgcol)

<body> definiše telo jednog HTML dokumenta.

<body bgcolor="yellow"> ima i dodatnu informaciju o boji pozadine.

3.Primer atributa

<table> definiše neku HTML tabelu. (HTML tabele ćemo učiti kasnije)

<table border="1"> ima i dodatnu informaciju o debljini ivice oko tabele.

Koristite mala slova. Atributi i vrednosti atributa razlikuju velika i mala slova. Ipak WWW konzorcijum (W3C)

preporučuje da se koriste mala slova, a XHTML zahteva mala slova za atribute i njihove vrednosti.

Vrednosti atributa su uvek pod navodnicima. Uvek koristite navodnice za vrednosti atributa. Uobičejene

su duple navodnice, ali su dozvoljene i pojedinačne. U nekim retkim situacijama kada vrednost atributa i sama

sadrži navodnice onda je neophodno koristiti pojedinačne navodnice.

Na pr. name='John "ShotGun" Nelson'

FORMATIRANJE TEKSTA U HTML-U

HTML definiše mnogo elemenata kojima se može urediti i formatirati neki tekst. Kao na pr. boldiranje,

centriranje, italik tekst itd. U sledećih nekoliko primera možete videti i malo eksperimentisati sa formatiranjem

teksta u HTML-u.

Formatiranje teksta (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_formattingch)

U ovom primeru možete videti različite načine za formatiranje teksta.

Preformatirani tekst (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pre)

HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm

6 of 13 19/07/2013 21:44

Page 7: HTML Za Pocetnike - Www.izradasajta.webs

U ovom primeru vidite objašnjenje taga <pre>. Sa njim možete kontrolisati razmake i prekide linija koje se

inače ignorišu u pregledaču. Pomoću njega se mogu rešiti neki problemi u HTML-u koje smo ranije opisali.

Kompjuterski tagovi (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_computeroutput)

U ovom primeru je prikazano kako se neki tekst formatira za prikazivanje nekih kompjuterskih kodova. Na pr.

kada se objašnjava neki program on se obično ispisuje pomoću ovih tagova.

Adrese (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_address)

U ovom primeru vidite kako se obično ispisuju adrese u HTML-u.

Skraćenice i akronimi (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_abbr)

U ovom primeru možete videti kako da se snađete sa skraćenicama i akronimima. To se koristi da u neki tekst

unesete skraćenicu ili akronim koji će se u pregledaču tak i prikazati, ali kada pređete mišom preko te

skraćenice ispisaće se vrednost koju ste uneli pod navodnicama.

Pravac teksta (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bdo)

U ovom primeru je objašnjeno kako da u HTML-u promenite pravac teksta, odnostno da se slova ispisuju sa

desna na levo.

Navodnici (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_q)

U ovom primeru je obrađeno kako da naglasite neko citiranje dugo ili kratko i sl. Dugo prikazuje kao uvučen

pasus i odvojeno, a kratko u produžetku reda. Sa elementom <bloskquote>, pregledač ubacuje prekid linije i

marginu, a elemenat <q> u stvari ne radi ništa, samo kada se gleda izvorni kod onda znamo da je to neko

naglašavanje (a može i bez njega)

Obrisan i umetnut tekst (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_del)

Ovaj primer pokazuje kako da se naglasi neki tekst koji je na pr. obrisan i li umetnut u neki drugi. Stvarno ne

vidim neku praktičnu primenu ovoga.

KAKO DA VIDITE NEKI HTML IZVORNI KOD

Da li ste nekad videli neku internet stranicu i zapitali se kako li su to napravili? Ta bi to saznali kliknite na

padajući meni VIEW i iz padajućeg menija odaberite opciju SOURCE. Otvoriće se novi prozor u kom će biti

ispisan HTML izvorni kod te stranice.

TEXT FORMATTING TAGS

Tag Objašnjenje

<b> (/tags

/tag_font_style.asp)Zatmnjen tekst (bold)

<big> (/tags

/tag_font_style.asp)Veliki tekst

<em> (/tags

/tag_phrase_elements.asp)Istaknut naglašen tekst

<i> (/tags

/tag_font_style.asp)Italik (kosi) tekst

<small> (/tags

/tag_font_style.asp)Mali tekst

<strong> (/tags

/tag_phrase_elements.asp)Jak (podebljan) tekst

HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm

7 of 13 19/07/2013 21:44

Page 8: HTML Za Pocetnike - Www.izradasajta.webs

<sub> (/tags

/tag_sup.asp)Spušten tekst (subscript), potencijal

<sup> (/tags

/tag_sup.asp)Podignut tekst (superscript), eksponent

<ins> (/tags/tag_ins.asp) Umetnut tekst

<del> (/tags/tag_del.asp) Obrisan tekst

<s> (/tags/tag_strike.asp) Ovaj se više ne koristi. Umesto njega ide <del>

<strike> (/tags

/tag_strike.asp)Ovaj se više ne koristi. Umesto njega ide <del>

<u> (/tags/tag_u.asp) I ovo je nedozvoljeno. Za to se koriste stilovi.

"COMPUTER OUTPUT" TAGS

Tag Objašnjenje

<code> (/tags

/tag_phrase_elements.asp)Tekst kao kompjuterski kod

<kbd> (/tags

/tag_phrase_elements.asp)Tekst tastature

<samp> (/tags

/tag_phrase_elements.asp)Primer kompjuterskog koda

<tt> (/tags

/tag_font_style.asp)Teletip tekst

<var> (/tags

/tag_phrase_elements.asp)Definiše neku promneljivu

<pre> (/tags

/tag_pre.asp)Definiše preformatirani tekst

CITATIONS, QUOTATIONS, AND DEFINITION TAGS

Tag Objašnjenje

<abbr> (/tags

/tag_abbr.asp)Navodi ili citiranje

<acronym> (/tags

/tag_acronym.asp)Definiše skraćenice ili akronime

<address> (/tags

/tag_address.asp)Koristi se ispisivanje adrese

<bdo> (/tags

/tag_bdo.asp)Definiše pravac teksta

<blockquote> (/tags

/tag_blockquote.asp)Dugo navođenje, kao pasus

<q> (/tags/tag_q.asp) Kratki navodnici, (ništa)

<cite> (/tags

/tag_phrase_elements.asp)Definiše neki citat

<dfn> (/tags

/tag_phrase_elements.asp)Neki termin koji nešto definiše

HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm

8 of 13 19/07/2013 21:44

Page 9: HTML Za Pocetnike - Www.izradasajta.webs

Povratak na početak (#Pocetak_strane)

KODOVI KARAKTERA U HTML-U

Neki karakteri, kao na pr. "<" koji tefiniše početak taga, imaju posebno značenje u HTML-u i zbog toga se

ne mogu koristiti u tekstu. Ukoliko želimo da u tekst unesemo baš taj karakter i da ga pregledač prikaže

tako kako izgleda moramo da koristimo svojstva ili kod karaktera u izvornom kodu HTML-a.

KODOVI KARAKTERA

Suština ili kod nekog karaktera ima tri dela: početni znak &, ime koda ili # i broj koda, i na kraju ide tačka

zarez ";". Da bi smo u tekstu napisali znak manje, treba da otkucamo &lt; ili &#60; Prednost prilikom

korišćenja imena je u tome što se imena lakše pamte od brojeva. Nedostatak je taj što neki noviji

pregledači ne podržavaju najnovija imena kodova za neke karaktere, dok je brojčani opis nekog karaktera

podržan u skoro svim pregledačima. Kodovi karaktera razlikuju velika i mala slova.

U ovom priimeru možete da eksperimentišete za Kodovima karaktera (http://www.w3schools.com

/html/tryit.asp?filename=tryhtml_entities).

RAZMAK

Najčešće upotrebljavan kod u HTML-u je više razmaka zaredom. U normalnim okolnostima pregledač će

od deset unetih razmaka (što je ranije već objašnjeno), obrisati devet i prikazati samo jedan. Ta bi ste

dodali razmak u tekst koristite kod karaktera &nbsp;.

NAJČEŠĆE UPOTREBLJAVANI KODOVI KARAKTERA

Rezultal Opis Ime koda Broj koda

razmak &nbsp; &#160;

< znak manje &lt; &#60;

> znak veće &gt; &#62;

& ampersend &amp; &#38;

" navodnici &quot; &#34;

' apostrof &apos; (does not work in IE) &#39;

JOŠ NEKI OD ČESTO KORIŠĆENIH KODOVA

Rezultat Opis Ime koda Broj koda

c Cent &cent; &#162;

L Funta &pound; &#163;

Y Jen &yen; &#165;

€ Euro &euro; &#8364;

§ Paragraf &sect; &#167;

© Copyright (autorska prava) &copy; &#169;

® Registrovani prouzvog &reg; &#174;

× Množenje &times; &#215;

÷ Deljenje &divide; &#247;

HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm

9 of 13 19/07/2013 21:44

Page 10: HTML Za Pocetnike - Www.izradasajta.webs

Da bi videli kompletnu listu kodova u HTML-u idite ovde: (http://www.w3schools.com/tags/ref_entities.asp)

Povratak na početak (#Pocetak_strane)

LINKOVI U HTML-U

HTML koristi tzv. hiperlinkove kako bi povezao tu stranicu ili dokument sa nekom drugom stranicom

ili dokumentom na mreži.

PRIMERI:

Kreiranje Hiperlinka (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_links)

Ovaj primer pokazuje kako da kreirate neki link u HTML dokumentu. Prosto.

Slika kao link (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_imglink)

ovaj primer pokazuje kako da iskoristite neku sliku kao link

U nastavku ove teme naćićete još primera.

SIDRO TAG I HREF ATRIBUT

HTML koristi sidro tag za kreiranje linka ka nekom drugom dokumentu. Sidro tag usmerava ka bilo

kom sadržaju na internetu: HTML stranici, nekoj slici, audio zapisu, video klipu itd. Sintaksa za

kreiranje sidra je:

<a href="url">Text to be displayed</a>

Tag <a> se koristi za kreiranje sidra na početnoj tački linka, a href atribut se koristi za adresiranje

dokumenta na koji se linkuje (sa kojim se povezuje), a tekst između startnog i krajnjeg taga će se

prikazati u pretraživaču kao hiperlink.

Ovo sidro definiše link ka mom sajtu:

<a href="http://www.jasmin-salon.webs.com/">Posetite me!</a>

Pregledač bi to trebao da ispiše ovako:

Posetite me! (http://www.gasasoft.com/)

ATRIBUT CILJA

Sa atributom cilja možete da definišete gde će se otvoriti taj dokument na koji se povezujete. Ako

otkucate primer ispod, novi dokument će se otvoriti u novom prozoru pregledača:

<a href="http://www.w3schools.com/"

target="_blank">Visit W3Schools!</a>

SIDRO TAG I IME ATRIBUTA

Ime atributa se koristi za kreiranje imenovanog sidra. Kada koristimo imenovano sidro možemo da

HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm

10 of 13 19/07/2013 21:44

Page 11: HTML Za Pocetnike - Www.izradasajta.webs

kreiramo link koji će da preskoči u određeni deo teksta na istoj strani, umesto da skrolujemo preko

celog dokumenta u potrazi za nekim podatkom. To je korišćeno i u ovom uputu.

THE ANCHOR TAG AND THE NAME ATTRIBUTE

The name attribute is used to create a named anchor. When using named anchors we can create

links that can jump directly into a specific section on a page, instead of letting the user scroll around

to find what he/she is looking for.

Below is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you

care to use.

The line below defines a named anchor:

<a name="tips">Useful Tips Section</a>

You should notice that a named anchor is not displayed in a special way.

To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL,

like this:

<a href="http://www.w3schools.com/html_links.asp#tips">

Jump to the Useful Tips Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this:

<a href="#tips">Jump to the Useful Tips Section</a>

BASIC NOTES - USEFUL TIPS

Always add a trailing slash to subfolder references. If you link like this:

href="http://www.w3schools.com/html", you will generate two HTTP requests to the server,

because the server will add a slash to the address and create a new request like this:

href="http://www.w3schools.com/html/"

Named anchors are often used to create "table of contents" at the beginning of a large document.

Each chapter within the document is given a named anchor, and links to each of these anchors are

put at the top of the document.

If a browser cannot find a named anchor that has been specified, it goes to the top of the document.

No error occurs.

HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm

11 of 13 19/07/2013 21:44

Page 12: HTML Za Pocetnike - Www.izradasajta.webs

MORE EXAMPLES

Open a link in a new browser window (/MembersB/EditPage/tryit.asp?filename=tryhtml_link_target)

This example demonstrates how to link to another page by opening a new window, so that the

visitor does not have to leave your Web site.

Link to a location on the same page (/MembersB/EditPage/tryit.asp?filename=tryhtml_link_locations)

This example demonstrates how to use a link to jump to another part of a document.

Break out of a frame (/MembersB/EditPage/tryit.asp?filename=tryhtml_frame_getfree)

This example demonstrates how to break out of a frame, if your site is locked in a frame.

Create a mailto link (/MembersB/EditPage/tryit.asp?filename=tryhtml_mailto)

This example demonstrates how to link to a mail message (will only work if you have mail

installed).

Create a mailto link 2 (/MembersB/EditPage/tryit.asp?filename=tryhtml_mailto2)

This example demonstrates a more complicated mailto link.

LINK TAGS

Tag Description

<a> (/tags/tag_a.asp) Defines an anchor

Members Area

Sign In or Register

Tacno vreme

Prijatelji sajta

HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm

12 of 13 19/07/2013 21:44

Page 13: HTML Za Pocetnike - Www.izradasajta.webs

Recent Photos

Player

[Multimedia object]

[Multimedia object]Newest Members

CopyrightMisoT©2009

Create a Free Website

HTML za pocetnike - www.izradasajta.webs.com http://izradasajta.webs.com/htmlzapocetnike.htm

13 of 13 19/07/2013 21:44