Uvod u html - osnovna škola

Uvod u HTML
HyperText Markup Language

Darko Vasilić

Š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.

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.

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>

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

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>

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>

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>

Naslovi
Naslovi (engl. headers) se kodiraju prema relativnoj
dubini ciframa od 1 do 6.

<HTML>
<BODY>
<H1> Naslov H1 </H1>
</BODY>
</HTML>

Obeležavanje logičke
strukture teksta
Pasus (engl. paragraph) se obeležava zagradama
 ... .
Ukoliko u ravnom tekstu sledi pasus za pasusom,
tag se može izostaviti. Ovaj tag
može imati atribut za pozicioniranje ALIGN sa
vrednostima CENTER, RIGHT ili LEFT.

Obeležavanje logičke
strukture teksta
Novi red (engl. break) se obeležava tagom .
Ovo je prosti tag: ne postoji .

Podvlaka (engl. rule) se obeležava tagom <HR> sa
opcionim atributom NOSHADE . Ovo je prosti tag:
ne postoji </HR>.

Primer HTML
dokumenta sa pasusima
<HTML>

<BODY>
 
 
 
 Ovo je moj prvi paragraf 



 
 
 
 Ovo je moj prvi paragraf 



</BODY>
</HTML>

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>)

Promena boje pozadine
<HTML>
<BODY BGCOLOR="RED">
</BODY>
</HTML>

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).

Slika kao pozadina
<HTML>
<BODY BACKGROUND =“Desert.jpg”>
Sadržaj moje strane.
</BODY>
</HTML>

Rad sa tekstom
HTML koristi tagove za formatiranje teksta. Svi
tagovi kao i njihovo značenje dati su u tabeli.
Tag

Opis


<big>






Podebljani tekst
Tekst pisan većim slovima
Iskošen tekst
Tekst pisan manjim slovima
Istaknut tekst
Tekst pisan kao indeks
Tekst pisan kao eksponent

Rad sa tekstom
•

Osnovni tag kojim možemo menjati font na
HTML stranici je 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.

Rad sa tekstom
Atributom color definišemo boju teksta. Za ovaj
atribut važi isto pravilo kao i kod definisanja boja
<body> tagom.
 Ovde je tekst.

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>

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">

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%">

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">

Slike
<HTML>
<head>
<title> Moja stranica </title>
</head>
<body bgcolor=powderblue>
<H1>
Hello</H1>
Ovo je moja HTML stranica
 
<HR color=blue>
<image src="Blue hills.jpg"
width=450 height=300 border=5>
</body>
</HTML>

Slike
<HTML>
<body bgcolor=powderblue>
<H1><fontcolor=blue>KOALA</H1>
Ovo je moja HTML stranica
 
<image src="Koala.jpg" width=450 height=300 border=5>
</body>
</HTML>

Uvod u html - osnovna škola

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Uvod u html - osnovna škola

Ähnlich wie Uvod u html - osnovna škola (13)

Mehr von Darko Vasilic

Mehr von Darko Vasilic (14)

Kürzlich hochgeladen

Kürzlich hochgeladen (14)

Uvod u html - osnovna škola