Uvod u html - osnovna škola

  • 5,471 views
Uploaded on

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

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
5,471
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Uvod u HTML HyperText Markup Language Darko Vasilić
  • 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>)
  • 14. Promena boje pozadine <HTML> <BODY BGCOLOR="RED"> </BODY> </HTML>
  • 15. Promena boje pozadine
  • 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. Slika kao pozadina <HTML> <BODY BACKGROUND =“Desert.jpg”> Sadržaj moje strane. </BODY> </HTML>
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. KRAJ!