Za
kvalitetnu i uspešnu izradu Internet stranica potrebno je znati HTML
(Hypertext Markup Language). Ovaj jezik nije pravi programski jezik u onom
smislu u kom su to C++, Java ili Visual Basic. HTML je više sintaksni
jezik koji se koristi za formatiranje dokumenata i on je relativno
jednostavan i lak za učenje. Ovde ću izostaviti podatke o istorijatu i
verzijama HTML-a, već ću odmah preći na praktičnu upotrebu ovog jezika
.
Za opšte uvodne napomene o web-dizajnu najpre pogledajte
stranicu Web-dizajn.
Da
bi krenuli sa izradom HTML dokumenta otvorite Notepad i unesite : <html><head>
<title>Neki naslov</title>
</head>
<body bgcolor="red">
Ovde unesite neki tekst
</body></html> Sada
idite na File
> Save As..., u polju Save
as filetype izaberite All
files, a u polju iznad unesite neko ime za fajl, stavite tačku i
dodajte htm ili html (npr: "nekoime.html" - bez
navodnika).
Svaki HTML dokument mora da ima tagove koji su
navedeni u primeru (osim ako je u pitanju dokument sa okvirima - tada se
umesto body koristi frameset). U prethodnom
primeru imate HTML dokument sa crvenom pozadinom (to je odredjeno
atributom "bgcolor") i tekstom koji ste uneli. Da bi promenili boju
pozadine treba promeniti vrednost atributa "bgcolor" (naziv boje na
engleskom - npr. green, azure, magenta itd. ili u heksadecimalnom obliku -
"#000000" za crnu, "#FFFFFF" za belu, "#FF0000" za crvenu itd.). Ako za
pozadinu želite da koristite neku sliku onda umesto atributa
bgcolor treba koristiti atribut background. Za promenu boje
ili veličine teksta na stranici koristi se <font> tag (mada
se preporučuje korišćenje kaskadnih stilova umesto ovog taga). Primer:
<body bgcolor="red"><font
color="white" size="4">Ovde ide sadržaj...</font>.
Veličina fonta ide od 1 do 7, a za boju fonta važi isto što i kod boja za
pozadinu.
Opšte
napomene : HTML ne prepoznaje više od jednog razmaka (space), tako
da za malo veći razmak morate koristiti oznaku
ili pak CSS.
Većina elemenata ima početni tag (npr. <b>),
sadržaj (ono što se nalazi izme�u početnog i završnog taga) i tag za
zatvaranje (npr.</b>).
Me�utim, neki elementi ne zahtevaju završni tag: kod nekih je završni tag
opcija (npr. <p>
ili <li>,
dok su drugi 'prazni' (npr. <br>)
jer nemaju nikakav sadržaj. Kod oznaka (tags) se mora paziti da se svi
ugnježdeni tagovi moraju pojavljivati u sekvencijalnom redosledu
ugnježdavanja, što znači da ako je, npr.<b> tag
najugnježdeniji, prvi tag za zatvaranje treba da bude
</b>.
HTML nije osetljiv na velika i mala slova, a
radiće i sa pomešanim velikim i malim slovima (mada je preporučljivo
koristiti velika slova za imena elemenata).
 Da bi videli
izvorni kod neke HTML, odn. web strane (kao što je uostalom i ova), možete
uraditi desni klik na stranicu (ne na sliku) i iz kontekstnog menija
odaberite View Source ili idite na meni i kliknite na
View pa zatim selektujte Source, ili to isto
preko tastature: ALT, zatim slovo V na
tastaturi i na kraju C (ima još nekoliko načina, ali je ovo
za sada dovoljno).
Dobar način za učenje HTML jeste da pogledate
izvorni kod neke stranice koja Vam se dopada i da vidite kako je autor
stranice to uradio.
Sve HTML stranice i slike (kao i eksterne
skript ili CSS datoteke) treba da se nalaze u istom folderu radi lakšeg
linkovanja, odn. povezivanja.
Zaglavlje
dokumenta : U <head> elementu se može naći 6 aktivnih
elemenata: <title>, <base>, <meta>, <script>,
<link> i <style>. Dva od ovih elemenata,
<link> i <style> su vezani sa datotekama sa
stilom (CSS), dok je
<script> vezan za skriptove.
Zato samo ukratko o ostala tri. <title> se koristi da bi se u
naslovnoj liniji pojavio naslov stranice, a <base>
uspostavlja na Internetu lokaciju stranice koju ste napravili.
<meta> element je, izmedju ostalog, koristan za mašine za
pretraživanje Interneta, kako bi našle neki sajt i onda ga indeksirali.
Dva primarna atributa ovog elementa su name (ime) i content
(sadržaj). Primer:
<meta
name="description" content="Kratak uvod u HTML">
<meta
name="keywords" content="html, hypertext markup language, tagovi,
zaglavlje, meta">
Keywords i Description su dve
name vrednosti koje bi trebalo koristiti da bi pomogli
pretraživačima da nadju i indeksiraju Vaše stranice.
U Internet
Explorer-u može se postići zanimljiv efekat korišćenjem Page-Enter
i Page-Exit vrednosti za http-equiv u META elementu (primer
ovog efekta vidite kad dolazite na ovu stranicu, odlazite sa nje ili
kliknete "Refresh"). Za taj efekat je potrebno:
<meta
http-equiv="Page-Enter"
content="RevealTrans(Duration=3,Transition=2)">
<meta
http-equiv="Page-Exit"
content="RevealTrans(Duration=3,Transition=21)">
Dužina
promene se kontroliše sa duration, a transition odredjuje
tip prelaznog efekta. Ako imate IE poigrajte se sa ovim vrednostima
(vrednosti za transition idu od 0 do 23).
Telo
dokumenta : Svi ostali elementi HTML-a idu u ovaj deo dokumenta, a
svakako najvažniji element ovde i uopšte celog HTML-a i njegova glavna
karakteristika jeste hiperveza (link). Zato najpre o tome. Link se pravi pomoću a (anchor) taga uz
korišćenje atributa href (hyper-reference) u koji se stavlja naziv
stranice prema kojoj se uspostavlja veza. Primer: <a
href="nekastranica.html">Link</a>. Na samoj stranici se
vidi samo reč Link
i kad se postavi miš na link pojavljuje se kažiprst kao kursor, a
standardno su svi linkovi podvučeni i imaju različitu boju u odnosu na
ostali tekst (mada se CSS-om podvlačenje ispod linka može ukloniti). Tag
za zatvaranje (</a>)
je obavezan i u samom imenu veze (nekoime.html)
ne sme postojati razmak. Ako se uspostavlja veza sa dokumentom unutar
samog sajta koristi se relativni URL (odnosno samo naziv dokumenta), a ako
se veza uspostavlja sa dokumentom koji se nalazi izvan sajta onda treba
navesti absolutni URL, odnosno kompletnu adresu (na primer, <a
href="http://dinkosta.tripod.com/shiper.html">Uvod u
HTML</a>). Ako želite da se link otvori u novom prozoru
stavite unutar taga target="_blank".
Za pravljenje email linka se koristi isti atribut, ali se unutar navodnika
stavlja mailto: iza čega sledi Vaša email adresa. Primer:
<a
href="mailto:[email protected]">email</a>. Kada se klikne
na takav link otvara se email-klijent posetioca (ovo je samo primer, tako
da se ne otvara ništa, ali primer email linka možete da vidite na dnu ove
stranice).
Za stavljanje slike na
stranicu se koristi tag img sa atributom src. Primer: <img
src="nekaslika.jpg">. Ovaj element nema tag za zatvaranje, a
ostali mogući atributi unutar taga su width, height, border, align, alt
itd.
Za pozicioniranje elemenata u
HTML-u koriste se tabele (table), elementi DIV i P uz korišćenje
atributa align. Moguće vrednosti za ovaj atribut su left, right i center. Primer: <DIV
align="center">Ovde ide sadržaj ovog elementa. Tu se mogu uključivati
svi ostali elementi: tekst, slike, linkovi itd.
</DIV>.
Primer jednostavne tabele:
<TABLE
align="left" bgColor="azure"
border="0">
<TR><TD>
Sadržaj se stavlja izme�u TD
tagova
</TD></TR></TABLE>
Za prelazak u
novi red se koristi tag <BR>: to je prazan tag, tj. ne traži tag za
zatvaranje i on nema nikakve atribute. I tag P otvara novi red, ali
s tom razlikom da on pravi veći razmak i može da sadrži atribut align
(tu se mogu upotrebiti i zajednički atributi za rad sa CSS-om ili
skriptovima - id, class, style, title, onmouseover, onclick itd.).
On ne zahteva tag za zatvaranje, ali se ipak preporučuje.
Postoje
znaci koji ne mogu da se unesu sa tastature te se za to koriste specijalni znaci (entiteti). Neki znaci imaju i
HTML naziv i kodni broj: npr, za znak 'copyright' � HTML naziv je © a kodni broj
©, ali neki imaju samo kodni broj. Ovde navodim samo
decimalne vrednosti za srpska slova:
Ć za
�, ć za ć,
Č za
�, č za č,
Đ za
�, đ za �,
Ž za
�, ž za ž,
Š za
� i š za š.
Da bi se na HTML stranici
pojavila, npr., reč češće u Notepadu treba napisati
češće. Treba reći da srpska slova nisu
pouzdano podržana u HTML-u, ali je ovo rešenje svakako pouzdanije nego da
kucate srpska slova sa tastature (ako imate tastaturu za srpski jezik),
jer nemaju svi oni koji treba da vide Vaše stranice srpsku tastaturu.
Primer jednostavnog HTML dokumenta: <html><head>
<title>Naslov</title>
<meta name="description" content="Osnove HTML-a">
<meta name="keywords" content="html,hipertekst,tag">
</head>
<body bgColor="azure">
<h2 align="center">Uvod u HTML</h2>
Ovo je prvi red teksta.<br>Ovo je drugi red.
Naglašena <b>reč</b>
<p align="center">Ovo je novi pasus.
<div align=left>
Sledi slika <img src="imeslike.jpg" width=50 height=60>
</div>
<TABLE align="left" width="50%" bgColor="yellow" border="2" cellpadding=5>
<TR><TD>
Stavite ovde tekst
</TD></TR></TABLE>
<TABLE align="right" width="40%" bgColor="beige" border="0">
<caption><font color="blue">Naslov tabele</font></caption>
<TR><TD>
Stavite i ovde nekoliko redova teksta.<br>Novi red teksta
</TD></TR></TABLE>
</body></html>
Ukucajte ili prekopirajte ovo u Notepad, snimite kao
test.html i otvorite da ga pogledate. Na�ite odgovarajuću sliku,
otvorite izvorni kod i ubacite u img tag umesto imeslike.jpg
naziv Vaše slike i prilagodite dimenzije. Zatvorite Notepad, na pitanje da
li želite da snimite promene odgovorite sa 'Yes' i pritisnite F5
ili Refresh. Sada možete da počnete da eksperimentišete sa
vrednostima i tagovima u dokumentu: menjajte dimenzije, dodajte nove
tagove, promenite boje itd. Sa malo vežbe brzo ćete savladati
HTML.
Treba reći da je sam HTML statičan i da se za davanje
interaktivnosti i dinamičnosti web stranicama najčešće koriste JavaScript,
CSS, odn. DHTML, kao i
Java, Flash itd. Ali poznavanje HTML-a je preduslov da bi se primenila
bilo koja od navedenih tehnologija.
� Za podrobnija objašnjenja HTML elemenata
i način upotrebe naručite HTML.zip
(u HTML formatu, zipovan, veličina 70 KB, cena 100 dinara).
|
English
Deutsch