Scribd Logo
Upload

Welcome to Scribd!

  • HTML Tutorial

    Uploaded by

    Dejan Vasilijevic
    28 views7 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    28 views7 pages

    HTML Tutorial

    Uploaded by

    Dejan Vasilijevic

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Hipertekst

    ... ili web-dokument je, pojednostavljeno, tekst koji sadre veze ili uputnice (engl. link) ka drugim dokumentima ili na samog sebe. Preciznije, hipertekst je skup stranica (engl. page), u obliku datoteka, meusobno povezanih uputnicama koje su umetnute u stranice. Ove uputnice se obino vide kao veze (hiperveze) na koje se moe kliknuti (od engl. to click). Za razliku od obinog teksta, koji se ita linearno (sleva na desno, odozgo nanie), hipertekst se ita pratei hiper-veze u tekstu, dakle, ne nuno na linearan nain.

    Jezici za opisivanje hiperteksta


    ... su jezici koji omoguavaju da se precizno opie hipertekstuelna struktura jednog teksta (uputnice na druge tekstove, itd). Ovi jezici doputaju da se eksplicitno opie logika struktura teksta i razliiti tipovi veza u tekstu. Veze mogu biti unutranje (kada veza upuuje na drugi deo istog teksta), spoljanje (kada veza upuuje na neki drugi teksta) i izvrne (kada se unutar teksta aktivira veza na neku izvrnu proceduru). Jezik ove vrste je HTML (skr. od HyperText Markup Language).

    Jezik HTML se zasniva na eksplicitnom obeleavanju logike strukture dokumenta. Obeleavanje se vri pomou etiketa (engl. tag) koje opisuju elemente logike strukture teksta. Tekst dobija svoj grafiki izgled u zavisnosti od navigatora koji je upotrebljen za njegovu vizuelizaciju. U zavisnosti od svojstava navigatora i njegove konfiguracije, jedan dokument obeleen u HTML-u moe imati razliite grafike izglede. Tagovi ... se navode izmeu uglastih zagrada < i >. U ovim zagradama se navode opisi pojedinih elemenata strukture teksta. Tagovi se u HTML-u mogu razvrstati na

    proste tagove ili markere za opisivanje jednostavnih elemenata logike strukture. Oblika su: <X> sloene tagov ili ograivai su zagrade oblika <X> y </X> kojima je opisan izgled dela teksta y. atributi sloenih obeleja oblika: <X A1=a A2=b ...> y </X> koji pruaju dodatne informacije, obino o grafikom izgledu, dela teksta y;

    Tagovi su neosteljive na razliku izmeu malih i velikih slova (engl. case-insensitive).

    HTML elementi
    HTML element poinje tagom <...> i zavrava se tagom </...>. Sadraj elementa je sve izmedju ovih tagova. Neki HTML elementi imaju prazan sadrzaj. <br> (novi red) je prazan element i nema odgovarajucu zatvorenu etiketu. U XHTML-u i XML-u i buducim verzijama HTML-a svi elementi moraju biti zatvoreni. Nacin za zatvaranje praznih elemenata prihvacen u XHTML-u, XML-u i HTML-u, jeste dodavanje '/' otvorenoj etiketi, npr. <br/>.
    Napomene! HTML etikete nisu case sensitive: <P> znaci isto sto i <p>. World Wide Web Consortium (W3C) preporucuje upotrebu malih slova za predstavljanje etiketa u HTML 4, dok ce se u buducim verzijama to zahtevati.

    HTML atributi
    HTML elementi mogu imati atribute koji daju dodatne informacije o elementu. Atributi se uvek zadaju u otvorenom tagu u obliku ime="vrednost" Vrednosti atributa uvek treba da budu izmedju navodnika (jednostrukih ili dvostrukih). ee se koriste dvostruki navodnici, mada u nekim situacijama, kao to je sluaj kada vrednost atributa sadri dvostruke navodnike, moraju se koristiti jednostruki navodnici. Napomena! W3C preporuka je da se koriste mala slova u nazivima atributa i njihovim vrednostima.

    HTML komentari
    Komentari se mogu dodati u HTML kod da bi bio itljiviji i razumljiviji. Prikaziva ih ignorie i ne prikazuje. HTML komentar ima oblik: <!-- ... -->
    Napomena!Prikaziva ne uzima u obzir postojanje viestrukih praznih redova i viestrukih belina - blanko, tabulator. Efekat je samo jedan blanko karakter.

    Osnovna struktura html dokumenta: <HTML> - poetak html dokumenta <HEAD> - zagrade zaglavlja, sadri meta-definicije HTML-dokumenta; <TITLE></TITLE>- zagrade za naziv HTML-dokumenta i </HEAD> <BODY>- zagrade teksta obeleenog dokumenta. </BODY> </HTML> - kraj html dokumenta

    Struktuiranje teksta
    prazno mesto-> &nbsp;

    Odeljak (engl. division) se opsuje zagradama <DIV> ... </DIV>. Ovaj tag moe imati atribut za pozicioniranje ALIGN sa vrednostima CENTER, RIGHT ili LEFT. <DIV ALIGN=LEFT>metafiziko-</DIV> Pasus (engl. paragraph) se obeleava zagradama <P> ... </P>. Ukoliko u ravnom tekstu sledi pasus za pasusom, etiketa </P> se moe izostaviti. I ova etiketa moe imati atribut za pozicioniranje ALIGN sa istim vrednostima kao etiketa <DIV>. Novi red (engl. break) se obeleava etiketom <BR>. Ovo je prosto obeleje: ne postoji etiketa </BR>. Podvlaka (engl. rule) se obeleava etiketom <HR> sa opcionim atributima NOSHADE, ALIGNE, SIZE (debljina linije u pikselima), i WIDTH (duina linije u pikselima ili procentualno). <HR SIZE=8
    NOSHADE>

    Unapred formatiran tekst (engl. preformatted) se obeleava etiketom <PRE>...</PRE>, a na izlazu se dobija tekst u fontu fiksne irine. Unutar ovog elementa karakteri za blanko, novi red i tabulator postaju znaajni, vie se ne ignoriu. Ovaj element korist atribut WIDTH (maksimalan broj karaktera u redu). U okviru ovog elementa mogu se koristiti hipertekstualne veze, ostale elemente treba izbegavati. Dui navodi se obeleavaju etiketom <BLOCKQUOTE>...</BLOCKQUOTE>, a na izlazu se se prikazuju u zasebnom bloku na ekranu.

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

    Ili

    charset=windows-1250

    Za naa latinina slova, za irilina iso-8859-5, ili windows-1251 <B> i </B> :bold <I> i </I> : kurziv <U> i </U> : podcrtano <STRIKE> i </STRIKE> : precrtano <BLINK> i </BLINK> : treperavo <BIG> i </BIG> : Veliko <SMALL> i </SMALL> : Malo ore <SUP> i </SUP> : G <SUB> i </SUB> : Dole

    Karakteristike fonta
    Karakteristike fonta se mogu birati pomou etikete <FONT>...</FONT> koja ima tri atributa:
    SIZE kojim se zadaje veliina fonta, relativno na skali od 1 do 7 FACE kojim se zadaje familija fonta COLOR kojom se zadaje boja font. Boja fonta se moe zadati u RGB

    formatu (engl. Red-Green-Blue) kao heksadecimalni broj ili imenom jedne od osnovnih boja. Imena osnovnih 16 boja i njihove RGB vrednosti su:

    boja
    black (crna) silver (srebrna) gray (siva) white (bela) red (crvena) purple (purpurna) fuchsia (ljubiasta)

    vrednost boja
    #000000 green (zelena) #C0C0C0 lime (utozelena) #FFFFFF yellow (uta) #FF0000 blue (plava) #800080 teal (tamnozelena) #FF00FF aqua (zelenoplava)

    vrednost
    #008000 #00FF00 #FFFF00 #000080 #0000FF #008080 #00FFFF

    #808080 olive (maslinastozelena) #808000

    maroon (kestenjasta) #800000 navy (marinskoplava)

    <FONT COLOR=LIME>tekst</FONT> ili <FONT COLOR=#800080>tekst</FONT> <FONT SIZE=2>tekst</FONT> <FONT FACE="Comic Sans MS">Volim</FACE><BR> Promena boje pozadine: <BODY BGCOLOR="#FFFFFF"> nnjkmkl</body> Postavljanje slike za pozadinu: <BODY BACKGROUND="swirlies.gif">neki kratak tekst</BODY> Da bi se slika prikazala, browser mora da bude u mogunosti da je nae. Za gornji primer slika treba da bude u istom folderu u kome se nalazi i Va HTML dokument

    Browser ima podrazumevana podeavanja za boju teksta, linkova, aktivnih linkova, poseenih linkova, kao i za boju pozadine. Te podrazumevane vrednosti su: Tekst je crn Linkovi su plavi Aktivni linkovi su crveni Poseeni linkovi su ljubiasti Ukoliko elite, ove podrazumevane vrednosti mogu se lako menjati. Kao prvo, mogue je uneti promenu za ceo HTML dokument. Evo kako... <BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">neki kratak tekst</BODY> Boja linka (link), aktivnog linka (alink), poseenog linka (vlink)

    Hiperlinkovi
    Hiper-veza (engl. hyperlink) uspostavlja hipertekstuelnu strukturu dokumenta zapisanog u HTML-u tako to omoguava da se povee neki fragment tekueg teksta sa nekim drugim delom tog ili, pak, nekog drugog teksta. Tekstovi koji se povezuju hipertekstuelnim vezma se mogu nalaziti na istom ili na razliitim raunarima. Hiper-veza se moe zamisliti kao luk koji povezuje neka dva vora obeleena, na primer, sa 1 i 2 u jednom grafu:

    Hiper-veza predstavlja mogunost da se itanje teksta iz vora 1 nastavi u voru 2. Ovakva hiper-veza se enkodira pomou sidra (engl. anchor) koje povezuje fragment teksta u voru 1 sa adresom vora 2. Opta etiketa za sidro je oblika <A atribut> ... </A>. Enkodiranje ovakve informacije podrazumeva da se u voru 1 opiu:

    fizika pozicija u tom voru sa koje se prelazi na tekst u voru 2 i fizika lokacija na kojoj se nalazi tekst u voru 2.

    Ove dve pozicije se nazivaju, redom, polazno i dolazno sidro. Polazno sidro oznaava u tekstu onu poziciju sa koje se prelazi na neki drugi tekst i kodira se pomou atributa HREF:
    <A HREF= adresa vora 2>

    pozicija u voru 1 sa koje se prelazi na vor 2 </A>

    Navigator obino interpretira polazno sidro u HTML-dokumentu kao fragment teksta na koji se moe "kliknuti", grafiki istaknut podvlaenjem i drugom bojom slova od boje slova samog teksta. Dolazno sidro je ili adresa neke datoteke ili etiketa koja obeleava deo teksta. Enkodira se pomou atributa NAME:
    <A NAME= pozicija u voru 2>

    tekst u voru 2 na koji se prelazi iz vora 1 </A>

    Atribut NAME nije obavezan. Ukoliko se on izostavi, navigator se pozicionira na poetak dokumenta u voru 2, a inae na naznaenu poziciju.

    Adresiranje
    4

    Adresiranje se temelji na pojmu uniformnog lokatora resursa (skr. URL, od engl. Uniform Resource Locator), koji omoguava da se precizno imenuje adresa vora 2, ma gde on bio fiziki lociran. U opisivanju adrese koja upuuje na vor 2 razlikujemo vie sluajeva u zavisnosti od toga koliki je deo URL-a poznat u tom trenutku.

    1.

    Ako se pozicija vora 2 nalazi u okviru istog dokumenta kao i vor 1 (tj. ako se vor 1 i vor 2 nalaze u istoj datoteci), tada se adresiranje vri na sledei nain: u polaznom tekstu se navodi tag (polazno sidro): <A HREF="#adresa"> tekst na koji se moe "kliknuti" </A> u dolaznom tekstu se navodi tag (dolazno sidro): <A NAME= "adresa"> dolazni tekst </A>

    2. Ako je pozicija vora 2 u nekom dokumentu (datoteci) izvan onog dokumenta koji sadri vor 1, ali se obe nalaze na istom serveru, onda se adresiranje vri navoenjem relevantnog dela puta koji je potreban da bi se iz vora 1 definisao put do vora 2. u polaznom tekstu se navodi tag (polazno sidro): <A HREF= "URL dolazne datoteke"> tekst na koji se moe "kliknuti" </A> (ili samo naziv fajla) 3. Ako je pozicija vora 2 dokument (datoteka) koja se nalazi na drugom serveru (raunaru), tada se kao vrednost atributa HREF navodi puni izraz URL-a datoteke koja predstavlja vor 2. U optem

    sluaju tada:

    u polaznom tekstu se navodi tag (polazno sidro): <A HREF= "URL"> tekst na koji se moe "kliknuti" </A>
    <a href="http://www.w3.org/hypertext/WWW/Addressing/Addressing.html">Adresiranje</a>

    4. Sadraj atributa HREF moe da bude i elektronska adresa koja se specifikuje na sledei nain: HREF="mailto:ime@domain". Izborom ove veze polaska otvara se prozor za pisanje poruke elektronske pote u kome je destinaciona adresa ve postavljena na ime@domain. Da bi ovo funkcionisalo, potrebno je da budu postavljeni odgovarajui parametri navigatora (prelistaa). <a href="mailto:nenad@matf.bg.ac.yu">prodekanu za nastavu</a>

    Slike
    <IMG SRC="URL datoteke u kojoj je slika"> Primer ako je slika u istom direktorijumu: <IMG SRC="kralj_ibi.gif"> <IMG SRC="kralj_ibi.gif" alt=slika kralja Ibija> (ako se slika iz bilo kog razloga ne vidi na browseru prikazuje se tekst iza ALT) SRC="chef.gif" znai da se slika nalazi u istom folderu u kome je i HTML dokument, koji je poziva.

    SRC="../chef.gif" znai da je slika u folderu iznad HTML dokumenta koji je poziva.

    SRC="images/chef.gif" znai da se slika nalazi u folderu ispod HTML dokumenta koji je poziva. Pitanje je: koliko nivoa ispod? Onoliko koliko je potrebno (a u naem sluaju - jedan)!

    SRC="../images/chef.gif" znai da je slika jedan folder gore, pa jedan dole u odnosu na HTML dokument.

    Atributi slike

    Atribut za poravnavanje slike u odnosu na margine ALIGN ... moe imati vrednosti o za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM o za horizontalno poravnjavanje: LEFT, CENTER, RIGHT
    <IMG SRC="kralj_ibi.gif" ALIGN=MIDDLE>

    Atributi za dimenzionisanje slike su WIDTH (irina) i HEIGHT (visina). Atributi koji opisuju poloaj slike su HSPACE i VSPACE Atribut koji opisuje irinu okvira slike BORDER Atribut koji umesto slike daje naziv slike ALT
    <IMG SRC="kralj_ibi.gif" ALIGN=RIGHT HSPACE=20 VSPACE=0 WIDTH=80 HEIGHT=90 BORDER=10 ALT="Kralj Ibi">

    Slike-veze
    Slika u dokumentu moe predstavljati i polazno sidro u hiper-vezi. Kaemo da je takva slika slika-veza. Dolazna adresa se tada navodi kao kod hiper-veze, a umesto teksta na koji se moe "kliknuti" navodi se tag IMG.
    <A HREF= URL dolazne datoteke > tag IMG slike na <DIV ALIGN=CENTER> Zar nije ovo <a href="Kremenko.jpg"> <img src="FredK.jpg"></a> nas omiljeni junak? </DIV>

    koju se moe "kliknuti" </A>

    <H4> Crte kralja Ibija se moe dobiti bilo <a href="pereubu.gif">"klikom" ovde</a>,<BR><BR><BR> bilo ovde "klikom" na ovu sliicu ---> <a href="pereubu.gif"> <IMG SRC="kralj_ibi.gif" ALIGN=CENTER HSPACE=20 VSPACE=0 WIDTH=80 HEIGHT=90 BORDER=10> </a> </H4>

    Tabele
    6

    Tabela je i u HTML-u dvodimenziona matrica iji se elementi nazivaju elije (engl. cell). elija moe sadravati raznovrsne informacije: brojeve, tekst, boje, liste, hiper-veze, slike, itd. Tabela se sastavlja tako to se opisuju redom njene vrste (redovi, engl. row) i sadraj svake elije u redu. Tabela se opisuje uz pomo sloene etikete TABLE koja moe sadravati vie atributa:
    BORDER (ili okvir, ram) koji opisuje irinu spolanjeg okvira tabele; CELLSPACING koji opisuje irinu linije koja razdvaja dve delije; CELLPADDING koji opisuje prostor oko sadraja delije; WIDTH koji opisuje ukupnu irinu tabele.

    Nadnaslov tabele se moe zadati etiketom CAPTION koja se ispisuje iznad tabele i moe imati atribut ALIGN:

    za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM za horizontalno poravnavanje: LEFT, CENTER, RIGHT

    Svaka vrsta u tabeli se opisuje izmeu zagrada <TR> i </TR> (engl. table row). I etiketa TR moe imati atribute:

    za horizontalno poravnjavanje, atribut ALIGN sa vrednostima: LEFT, CENTER, RIGHT za vertikalno poravnavanje, atribut VALIGN sa vrednostima: TOP, MIDDLE, BOTTOM

    Pojedinana elija se opisuje izmeu zagrada <TD> i </TD>. Etiketa TD, pored atributa ALIGN i VALIGN moe imati i atribute:

    za promenu boje pozadine delije: BGCOLOR; za horizontalno spajanje delija: ROWSPAN (spaja delije iste vrste) i za vertikalno spajanje delija: COLSPAN (spaja delije iste kolone); za spreavanje automatskog prelamanja teksta u deliji: NOWRAP. Prelamanje teksta moe eksplicitno da se sahteva etiketom <BR> ().

    Etiketa <TH> ima ista svojstva kao etiketa <TD> s tom razlikom to obezbeuje da sadraj elije bude automatski centriran i u crnom slogu (bold)

    You might also like