• Save
Uvod u html - osnovna škola
Upcoming SlideShare
Loading in...5
×
 

Uvod u html - osnovna škola

on

  • 5,439 views

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

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

Statistics

Views

Total Views
5,439
Views on SlideShare
694
Embed Views
4,745

Actions

Likes
0
Downloads
0
Comments
0

7 Embeds 4,745

http://tiometar.wordpress.com 4275
http://nstvanja.wordpress.com 349
http://darkovasilicnastava.wordpress.com 113
http://www.google.rs 5
http://sr.wordpress.com 1
https://tiometar.wordpress.com 1
https://nstvanja.wordpress.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Uvod u html - osnovna škola Uvod u html - osnovna škola Presentation Transcript

  • 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> <H2> Naslov H2 </H2> <H3> Naslov H3 </H3> <H4> Naslov H4 </H4> <H5> Naslov H5 </H5> <H6> Naslov H6 </H6> </BODY> </HTML>
  • 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.
  • 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>.
  • 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>
  • 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
  • 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 <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
  • 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.
  • 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>
  • 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><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>
  • 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>
  • KRAJ!