Informatika 6

HTML
HTML = Hypertext Markup Language,
Jezik za označavanje hiperteksta
HIPERTEKST = tekst (dokument) koji sadrži veze
(linkove) prema drugim dokumentima ili prema
elementima istog dokumenta
Jezik za označavanje = poseban jezik koji se koristi za
označavanje različitih elemenata nekog dokumenta kao
što su, na primer, naslovi, pasuse, liste, slike, tabele itd.

Šablon
<HTML> - početak HTML dokumenta
 <HEAD> - zaglavlje dokumenta
 <TITLE> - naslov dokumenta
 Naslov Web Stranice
 </TITLE> - kraj naslova
 </HEAD> - kraj zaglavlja
 <BODY> - telo dokumenta
 Ovde će biti sadržaj dokumenta.
 </BODY> - kraj tela dokumenta
</HTML> - kraj HTML dokumenta

Uvod
Otvoriti Notepad
Upisati šablon za HTML
Sačuvati pod nazivom Index.html u odgovarajućem
folderu
pogledati rezultat pomoću IE
Objasniti pojedine tagove
Sintaksa: ne pravi se razlika između malih i velikih slova
Sintaksa: formatiranje teksta nema uticaja na rezultat

Tekst 1
Ispod teksta “Ovde će biti sadržaj stranice.” dodati sledeće
dve rečenice, obe u novom redu:
Ovo je drugi red dokumenta.
Ovo je treći red dokumenta.
Snimiti dokument i posmatrati promene
Staviti tag <BR> ispred dodatih rečenica, snimiti
dokument i pogledati promene

Tekst 2
Dodavanje formatiranog teksta:
<PRE>
Koristeći tag PRE
 možemo dodati
tekst čiji je format unapred
 određene unutar dokumenta.
</PRE>
Snimiti i pogledati promene
Izbrisati tagove, snimiti dokument, pogledati promene, vratiti
tagove
Objasniti kako se dodaju specijalni znaci:
< = < ili < > = > ili >

Pasus, efekti
Dodati horizontalnu liniju pomoću taga <HR> ispred i iza već
napisanog teksta
Dodati sledeće pasuse i pogledati promene:
 <P> Prvi pasus. </P>
 <P> Drugi pasus. </P>
 <P> Treći pasus. </P>
Promeniti poravnanje pasusa dopuniti tekst i pogledati promene:
 centrirati prvi: ALIGN=“CENTER”
 levo poravnati drugi: ALIGN=“LEFT”
 desno poravnati treći: ALIGN=“RIGHT”
Promeniti font za reči “centrirano”, “pasus”, “desno.”:
 <B>, <I>, <U>
Dodati četvrti pasus: Iskrivljeno i podvučeno.
Dodati horizontalnu liniju

Naslovi
Objasniti tagove za različite nivoe naslova:
<H1>...</H1>, ... <H6>...</H6>
Dodati sledeća tri naslova i pogledati promene:
Ovo je naslov najvišeg nivoa. H1
Ovo je naslov drugog nivoa. H2
Ovo je naslov trećeg nivao. H3
Centrirati naslov najvišeg nivao
Dodati horizontalnu liniju i pogledati promene

Linkovi 1
Objasniti tag za linkove:
<A HREF=“adresa”>...</A>
URL = Uniform Resource Lokator (Uniformni Lokator Resursa)
http://www.w3.org/MarkUp/ImeFajla.html
http – protokol, Hypertext Transfer Protocol
 (protokol za prenos hiperteksta)
www.w3.org – domen
 .org – domen prvog nivoa
 w3 – domen drugog nivoa
 www – domen trećeg nivoa
MarkUp – ime foldera
ako ne navedemo ime fajla, bira se podrazumevani fajl sa nazivom
 Index.html

Linkovi 2
Primeri domena prvog nivoa:
 .ORG – organizacije
 .COM – firme
 .EDU – obrazovne institucije
 .GOV – vladine organizacije
Dodati link na www.w3.org unutar novog pasusa, tako da link
predstavlja reč Web iz rečenice:
 Link prema organizaciji W3.
Dodati link na www.w3.org/MarkUp unutar novog, centriranog
pasusa tako da link predstavlja reč Ovde iz rečenice:
 Ovde možete čitati o jeziku HTML.
Dodati horizontalnu liniju i posmatrati promene

Liste 1
Nabrajanje, lista sa simbolima, znacima ispred elemenata liste:
<UL>
 <LI> ... </LI>
 <LI> ... </LI>
</UL>
Dodati sledeću listu i pogledati promene:
Spisak studenata sa znacima:
 Milan
 Jovan
 Ana
 Maja

Liste 2
Nabrajanje, lista sa brojevima ispred elemenata liste:
<OL>
 <LI> ... </LI>
 <LI> ... </LI>
</OL>
Dodati sledeću listu i pogledati promene:
Spisak studenata sa brojevima:
 Milan
 Jovan
 Ana
 Maja

Liste 3
Definiciona lista (rečnik):
 <DL>
 <DT> ... </DT>
 <DD> ... </DD>
 </DL>
Dodati sledeću listu i horizontalnu liniju, pogledati promene:
 Rečnik pojmova:
 Izraz (term)
 Definicija izraza (terma)
 HTML
 Hypertext Markup Language
 URL
 Uniform Resource Locator

Slike 1
Tag za slike:
 <IMG SRC=“ime fajla”
 ALIGN=“left,right,top,bottom,middle”
 BORDER=5
 ALT=“alternativni tekst”
 WIDTH=“širina”
 HEIGHT=“visina”
 HSPACE=“...”
 VSPACE=“...”>
Dodati sliku planete Neptun i pogledati promene, argumenti:
 ALIGN=“right” ALT=“Slika planete Neptun”
Dodati okvir širine 5, levo poravnanje, širina 200, visina 175, hspace 10,
vspace 20

Slike 2
Dodati novi pasus sa opisom planete Neptun iz fajla Neptun.txt
Unutar novog reda dodati tekst:
Sada ćemo dodati logo organizacije W3.
Poništiti paravnanje sa <BR CLEAR=“all”>
Dodati logo W3:
http://www.w3.org/Icons/w3c_main.png
Tipovi slika koje se mogu koristiti: PNG, JPG, GIF
Dodati alternativni tekst:
Logo organizacije W3.
Dodati horizontalnu liniju i pogledati promene

Tabele 1
<TABLE>
 <CAPTION> Naslov tabele </CAPTION>
 <TR> Prvi red </TR>
 <TR> Drugi red </TR>
</TABLE>
<TH> zaglavlje kolone </TH>
<TD> polje tabele </TD>
Napraviti sledeći višejezični rečnik, dodati horizontalnu liniju i
pogledati:
 Višejezični rečnik
 Engleski Srpski Mađarski
 Window Prozor Ablak
 Train Voz Vonat
 Apple Jabuka Alma

Tabele 2
Dodati okvir veličine 5 (BORDER)
Centrirati celu tabelu (ALIGN=“CENTER”)
Promeniti širinu tabele na 300 (WIDTH)
Promeniti veličinu praznog prostora između polja tabele na 10
(CELLSPACING)
Promeniti veličinu praznog prostora između polja i okvira na 5
(CELLPADDING)
Centrirati engleske reči (ALIGN)
Pogledati promene

Informatika 6

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (10)

Mais de Nenad Radic

Mais de Nenad Radic (20)

Informatika 6