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 ima...
Koji programi
su nam potrebni?
•

HTML kodove pišemo u nekom
tekst editoru: MS Notepad, WordPad,
UltraEdit,…

•

Snimljeni...
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 ...
Pravila za pisanje tagova
<HTML> početni tag
</HTML> krajnji tag
•Da

bi napravili krajnji tag, samo dodamo / u
početni ta...
Osnovna struktura
HTML dokumenta
•

Svaki HTML dokument se sastoji od dva dela:
zaglavlja (engl. head) i tela (engl. body)...
Osnovna struktura
HTML dokumenta
•

Sledeća stvar koja bi trebala da se doda u HEAD je
naslov HTML dokumenta (TITLE).

•

...
Osnovna struktura
HTML dokumenta
•

Glavni deo HTML dokumenta nalazi se između
BODY tagova.

•

Sve ono što napišemo izmeđ...
Naslovi
Naslovi (engl. headers) se kodiraju prema relativnoj
dubini ciframa od 1 do 6.

<HTML>
<BODY>
<H1> Naslov H1 </H1>...
Obeležavanje logičke
strukture teksta
Pasus (engl. paragraph) se obeležava zagradama
<P> ... </P>.
Ukoliko u ravnom tekstu...
Obeležavanje logičke
strukture teksta
Novi red (engl. break) se obeležava tagom <BR>.
Ovo je prosti tag: ne postoji </BR>....
Primer HTML
dokumenta sa pasusima
<HTML>

<BODY>
<br>
<br>
<br>
<p> Ovo je moj prvi paragraf </p>
</br>
</br>
</br>
<br>
<...
Atributi taga Body
•

•

Atributi taga BODY definišu izgled osnovnih
karakteristika prikaza dokumenta. Pozadina
dokumenta ...
Promena boje pozadine
<HTML>
<BODY BGCOLOR="RED">
</BODY>
</HTML>
Promena boje pozadine
Promena boje pozadine
Standardna imena boja je usvojio svetski
konzorcijum i to su: : akvamarin (aqua),
crna (black), plav...
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

...
Rad sa tekstom
•

Osnovni tag kojim možemo menjati font na
HTML stranici je <font> tag, a on može imati
tri atributa: face...
Rad sa tekstom
Atributom color definišemo boju teksta. Za ovaj
atribut važi isto pravilo kao i kod definisanja boja
<body>...
Linkovi
Linkove definišemo pomoću tagova <a> i </a>.
link do neke druge stranice u okviru web prezentacije:
<a href="c:Saj...
Slike
Slike u okviru HTML definišemo tagom <img>

- src atribut definiše naziv (i lokaciju) grafičkog fajla
<img src="C:/s...
Slike
hight i width atributi definišu visinu i širinu slike
(u pikselima ili procentima - % visine i širine prozora
browse...
Slike
hspace i vspace definišu prazan prostor između slike i
okolnog teksta (u pikselima)

<img src=" C:/slike/zastava.gif...
Slike
<HTML>
<head>
<title> Moja stranica </title>
</head>
<body bgcolor=powderblue>
<H1><font color=blue>
Hello</font></H...
Slike
<HTML>
<body bgcolor=powderblue>
<H1><fontcolor=blue>KOALA</font></H1>
<B>Ovo je moja HTML stranica</B>
<br>
<image ...
KRAJ!
Uvod u html - osnovna škola
Upcoming SlideShare
Loading in...5
×

Uvod u html - osnovna škola

6,224

Published on

Prezentacija o osnovama HTML-a, namenjena učenicima osmog razreda osnovne škole.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
6,224
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Uvod u html - osnovna škola"

  1. 1. Uvod u HTML HyperText Markup Language Darko Vasilić
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>)
  14. 14. Promena boje pozadine <HTML> <BODY BGCOLOR="RED"> </BODY> </HTML>
  15. 15. Promena boje pozadine
  16. 16. 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).
  17. 17. Slika kao pozadina <HTML> <BODY BACKGROUND =“Desert.jpg”> Sadržaj moje strane. </BODY> </HTML>
  18. 18. 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
  19. 19. 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.
  20. 20. 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>
  21. 21. 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>
  22. 22. 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">
  23. 23. 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%">
  24. 24. 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">
  25. 25. 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>
  26. 26. Slike <HTML> <body bgcolor=powderblue> <H1><fontcolor=blue>KOALA</font></H1> <B>Ovo je moja HTML stranica</B> <br> <image src="Koala.jpg" width=450 height=300 border=5> </body> </HTML>
  27. 27. KRAJ!

×