2. Šta je HTML?
•
HTML je skraćenica od Hyper Text
Mark-up Language.
•
Izvorni fajlovi sa dokumentom opisanim
u HTML-u imaju obično ekstenziju .html
ili .htm, a nalaze se u određenom
folderu servera vezanog na Internet, što
ih čini dostupnim (vidljivim) na web-u.
3. Koji programi
su nam potrebni?
•
HTML kodove pišemo u nekom
tekst editoru: MS Notepad, WordPad,
UltraEdit,…
•
Snimljeni HTML dokument otvaramo u
nekom browseru (Mozilla Firefox, Internet
Explorer, Opera, Google Chrome,...)
•
Browser interpretira napisane HTML
komande i prikazuje web stranicu.
4. Tagovi u HTML-u
•
HTML komande se pišu u vidu tzv. TAG-ova.
•
Jedan tag je u stvari komanda koja govori
browseru šta i kako da uradi tj. na koji način da
prikaže sadržaj web stranice.
•
Tagovi se pišu unutar oznaka "<" i ">" (bez
znakova navoda) npr: <HTML>
5. Pravila za pisanje tagova
<HTML> početni tag
</HTML> krajnji tag
•Da
bi napravili krajnji tag, samo dodamo / u
početni tag.
•Većina tagova ima i krajnji tag (ali ne svi!).
•Browser
gore napisani tekst "shvata" kao 'Ovo je
početak HTML dokumenta' (<HTML>) i 'Ovo je
kraj HTML dokumenta' (</HTML>).
•HTML
tagovi su "case insensitive" tj. svejedno je
da li ih pišemo malim ili velikim slovima
6. Osnovna struktura
HTML dokumenta
•
Svaki HTML dokument se sastoji od dva dela:
zaglavlja (engl. head) i tela (engl. body)
•
Zaglavlje se odvaja tagovima <head> i </head>
•
Sve što napišemo u zaglavlju dokumenta neće se
prikazati u prozoru browsera već obično služi samo
da pruži neke informacije o našoj web stranici
<HTML>
<HEAD>
</HEAD>
</HTML>
7. Osnovna struktura
HTML dokumenta
•
Sledeća stvar koja bi trebala da se doda u HEAD je
naslov HTML dokumenta (TITLE).
•
Naslov Title se pojavljuje u naslovnoj liniji našeg
browsera
<HTML>
<HEAD>
<TITLE> Moja prva strana </TITLE>
</HEAD>
</HTML>
8. Osnovna struktura
HTML dokumenta
•
Glavni deo HTML dokumenta nalazi se između
BODY tagova.
•
Sve ono što napišemo između tagova <body> i
</body> predstavljaće telo dokumenta i pojaviće
se kao sadržaj naše stranice u prozoru browsera.
<HTML>
<BODY>
Sadržaj moje strane.
</BODY>
</HTML>
9. Naslovi
Naslovi (engl. headers) se kodiraju prema relativnoj
dubini ciframa od 1 do 6.
<HTML>
<BODY>
<H1> Naslov H1 </H1>
<H2> Naslov H2 </H2>
<H3> Naslov H3 </H3>
<H4> Naslov H4 </H4>
<H5> Naslov H5 </H5>
<H6> Naslov H6 </H6>
</BODY>
</HTML>
10. Obeležavanje logičke
strukture teksta
Pasus (engl. paragraph) se obeležava zagradama
<P> ... </P>.
Ukoliko u ravnom tekstu sledi pasus za pasusom,
tag </P> se može izostaviti. Ovaj tag
može imati atribut za pozicioniranje ALIGN sa
vrednostima CENTER, RIGHT ili LEFT.
11. Obeležavanje logičke
strukture teksta
Novi red (engl. break) se obeležava tagom <BR>.
Ovo je prosti tag: ne postoji </BR>.
Podvlaka (engl. rule) se obeležava tagom <HR> sa
opcionim atributom NOSHADE . Ovo je prosti tag:
ne postoji </HR>.
12. Primer HTML
dokumenta sa pasusima
<HTML>
<BODY>
<br>
<br>
<br>
<p> Ovo je moj prvi paragraf </p>
</br>
</br>
</br>
<br>
<br>
<br>
<p> Ovo je moj prvi paragraf </p>
</br>
</br>
</br>
</BODY>
</HTML>
13. Atributi taga Body
•
•
Atributi taga BODY definišu izgled osnovnih
karakteristika prikaza dokumenta. Pozadina
dokumenta se definiše atributima background
ili bgcolor. Pozadina može biti:
- slika (npr. <BODY BACKGROUND="URL slike">)
- boja (npr. <BGCOLOR= predefinisan naziv boje> ili
<BGCOLOR= #hesadecimalna RGB vrednost boje>)
17. Promena boje pozadine
Standardna imena boja je usvojio svetski
konzorcijum i to su: : akvamarin (aqua),
crna (black), plava (blue), lila (fuchsia),
siva (gray), zelena (green), zelenožuta
(lime) , kestenjasta (maroon),
marinskoplava (navy), maslinasta (olive) ,
ljubičasta (purple), crvena (red),
srebrnasta (solver), rezedo (teal), bela
(white) i žuta (yellow).
19. Rad sa tekstom
HTML koristi tagove za formatiranje teksta. Svi
tagovi kao i njihovo značenje dati su u tabeli.
Tag
Opis
<b>
<big>
<i>
<small>
<strong>
<sub>
<sup>
Podebljani tekst
Tekst pisan većim slovima
Iskošen tekst
Tekst pisan manjim slovima
Istaknut tekst
Tekst pisan kao indeks
Tekst pisan kao eksponent
20. Rad sa tekstom
•
Osnovni tag kojim možemo menjati font na
HTML stranici je <font> tag, a on može imati
tri atributa: face, size i color.
Atributom face definišemo tip fonta.
Atributom size definišemo veličinu slova. HTML
razlikuje 7 veličina slova koje nose vrednosti od 1
do 7.
21. Rad sa tekstom
Atributom color definišemo boju teksta. Za ovaj
atribut važi isto pravilo kao i kod definisanja boja
<body> tagom.
<font face=“Verdana" size="5"
color="#ff0000"> Ovde je tekst. </font>
22. Linkovi
Linkove definišemo pomoću tagova <a> i </a>.
link do neke druge stranice u okviru web prezentacije:
<a href="c:SajtGalerija.html"> Otvori galeriju </a>
link do nekog drugog web sajta:
<a href="http://www.ospreljina.rs/"> Sajt škole </a>
link za e-mail:
<a href="mailto:vasilic23@yahoo.com"> Pišite Darku </a>
23. Slike
Slike u okviru HTML definišemo tagom <img>
- src atribut definiše naziv (i lokaciju) grafičkog fajla
<img src="C:/slike/zastava.gif
- align atribut definiše položaj slike u odnosu
na tekst stranice (left, right, top, bottom,
absmiddle)
<img src=" C:/slike/zastava.gif" align="left">
24. Slike
hight i width atributi definišu visinu i širinu slike
(u pikselima ili procentima - % visine i širine prozora
browsera)
<img src=" C:/slike/zastava.gif" height="50%"
width="50%">
25. Slike
hspace i vspace definišu prazan prostor između slike i
okolnog teksta (u pikselima)
<img src=" C:/slike/zastava.gif" hspace="50"
vspace="50">
border definiše debljinu okvira oko slike (u pikselima)
<img src=" C:/slike/zastava.gif" border="5">
26. Slike
<HTML>
<head>
<title> Moja stranica </title>
</head>
<body bgcolor=powderblue>
<H1><font color=blue>
Hello</font></H1>
<B>Ovo je moja HTML stranica</B>
<BR>
<HR color=blue>
<image src="Blue hills.jpg"
width=450 height=300 border=5>
</body>
</HTML>