HTML programiranje

Viša železni

ka škola

Boško Nikoli

HTML PROGRAMIRANJE

Beograd 2004

Viša železni

ka škola

HTML - UVOD

Šta je HTML?

HTML (HyperText Markup Language) je veoma jednostavan jezik koji služi za izvršavanje
programa na daljinu. Ovaj jezik predstavlja standard za Internet dokumente.
Sa razvojem Interneta došlo je do pojave nove vrste dokumenata - hiperteksta. To je tekst koji
sadrži veze ili linkove ka drugim dokumentima ili na samog sebe. Preciznije, hipertekst je
skup stranica u obliku datoteka, me

usobno povezanih linkovima koje su umetnute u stranice.

Na ove linkove se može kliknuti. Za razliku od obi

nog teksta, koji se

ita linearno (sleva na

desno, odozgo naniže), hipertekst se

ita prate

i hiper-veze u tekstu, dakle, ne nužno na

linearan na

in.

HTML stranice imaju ekstenziju .html ili .htm, a nalaze se u odre

enom direktorijumu servera

vezanog na Internet, što ih

ini dostupnim na

web

-u.

Hipertekst je, tekst koji sadrže veze ili linkove ka drugim dokumentima ili na samog sebe.
Preciznije, hipertekst je skup stranica, u obliku datoteka, me

usobno povezanih linkovima

koje su umetnute u stranice. Na ove linkove se može

kliknuti

. Za razliku od obi

nog teksta,

koji se

ita linearno (sleva na desno, odozgo naniže), hipertekst se

ita prate

i hiper-veze u

tekstu, dakle, ne nužno na linearan na

in.

Postoji ve

i broj jezika koji omogu

avaju da se precizno opiše izgled i sadržaj jednog teksta.

Od posebnog su zna

aja:

•

SGML (skr. od

Standard General Markup Language

•

TeX i LaTeX (za matemati

ke tekstove),

•

PostScript (jezik laserskih štampa

a),

•

RTF (skr. od

Rich Text Format

), ...

Najzna

ajniji jezici za opis hiperteksta su:

•

SGML,

•

HTML (skr. od

HyperText Markup Language

), pojednostavljena verzija SGML-a,

•

XHTML (skr. od

Expandable HTML

) i

•

XML (skr. od

Extensible Markup Language

, "kompromis" izme

u preterane

složenosti SGML-a i jednostavnosti HTML-a; njegova standardizacija je u toku)

Za generisanje HTML stranice potreban je najobi

niji tekst editor, na primer Notepad.

Nalazi se u Start meniju pod Programs->Accessories.

Pisanje programa pomo

u tekst editora Notepad

Prvo je potrebno startovati

Notepad

program. U okviru

Windows

operativnog sistema, na

statusnoj liniji treba prona

i dugme

Start

i pritisnuti ga. Od ponu

enih opcija treba prona

opciju

Run

i treba aktivirati ovu opciju. Na prozoru koji se pojavio postoji tekst polje. U njega

treba upisati

notepad

(slika 1).

Viša železni

ka škola

Nakon aktiviranja dugmeta

, dobija se prozor koji predstavlja izgled HTML stranice u

Internet Exploreru.

Za pisanje HTML programa mogu se koristiti i specijalni alati, na primer Front Page. Stranica
se može videti u okviru Web browser-a, Netscape Navigator ili Internet Explorer

HTML komande se pišu u vidu tzv. TAG-ova. Jedan tag je ustvari komanda koja govori
browseru sta i kako da uradi tj. na koji nacin da prikaze sadrzaj vase stranice.
HTML tagovi su "case insensitive" tj. svejedno je da li ih pisete malim ili velikim slovima.
Tagovi se pišu unutar oznaka "<" i ">" (bez znakova navoda) npr:

<html>

Ovaj tag se nalazi na po

etku svakog HTML dokumenta

<html> govori browseru da je fajl koji je upravo po

eo da u

itava HTML dokument i da kao

takvog treba i da ga prikaže.
Na kraj HTML dokumenta se stavlja završni HTML tag:

</html>

Ovaj tag govori browseru da je to kraj HTML dokumenta. Ve

ina tagova ima i po

etni i

završni tag. Završni tag se dobija dodavanjem znaka "/" i ozna

ava mesto na kom prestaje

dejstvo po

etnog taga.

Vrste tagova

•

prosti tagovi za opisivanje jednostavnih elemenata logi

ke strukture. Oblika su: <

•

složeni tagovi su zagrade oblika <

> kojima je opisan izgled dela teksta

•

atributi složenih obeležja oblika: <

X A1

a A2

...>

> koji pružaju dodatne

informacije, obi

no o grafi

kom izgledu, dela teksta

Struktura HTML stranice

Minimalna struktura HTML-dokumenta obuhvata tagove:
<HTML>, </HTML> - zagrade HTML-teksta;
<HEAD>, </HEAD> - zagrade zaglavlja, sadrži meta-definicije HTML-dokumenta;
<TITLE>, </TITLE> - zagrade za naziv HTML-dokumenta i
<BODY>, </BODY> - zagrade teksta obeleženog dokumenta.

Head deo

Svaki HTML dokument se sastoji od dva dela: zaglavlja (engl. head) i tela (engl. body).
Zaglavlje se odvaja tagovima <head> i </head> a telo dokumenta tagovima: <body> i
</body>.
Sve ono sto se napiše u zaglavlju dokumenta ne

e se prikazati u prozoru browsera vec obicno

služi samo da pruži neke informacije o stranici.

BODY deo

Sve ono što je napisano izmedju tagova <body> i </body> predstavlja telo dokumenta
pojavi

e se kao sadržaj prezentacije u prozoru browsera.

Izgled stranice:
<html>
<head>
<title>
ovde je naziv prezentacije
</title>
</head>
<body>
ovde se unosi sve ono sto zelite da se vidi u prezentaciji

Viša železni

ka škola

</body>
</html>

Komentar

Dodatna opcija omogu

ava da se obeleži komentar u HTML-obeleženom tekstu koji se ne

videti u vizuelizaciji dokumenta.
Na primer:

Headeri

Naslovi (engl.

headers

) se kodiraju prema relativnoj dubini ciframa od 1 do 6. Tag za naslov

ima opšti oblik:
<Hn> Naslov nivoa

</Hn>

gde

uzima vrednosti od 1 do 6.

Odeljak

Odeljak (engl.

division

) se opisuje zagradama <DIV> ... </DIV>.

Ovaj tag može imati atribut za pozicioniranje ALIGN sa vrednostima CENTER, RIGHT ili
LEFT.

Paragraf

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 istim vrednostima kao tag <DIV>.

Novi red

Novi red (engl.

break

) se obeležava etiketom <BR>.

Ovo je prosti tag: ne postoji kraj taga </BR>.

Razdvojna linija

Razdvojna linija (engl.

rule

) se obeležava etiketom <HR> sa opcionim atributom NOSHADE

Ovo je prosti tag: ne postoji kraj taga </HR>.
Primer
<HR SIZE=4 WIDTH="50%">
SIZE – debljina linije

Primeri za rad u laboratoriji

Primer 1.