View
205
Download
3
Category
Preview:
Citation preview
Uvod u HTML
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 NotepadUpisati šablon za HTMLSačuvati pod nazivom Index.html u
odgovarajućem folderupogledati rezultat pomoću IEObjasniti pojedine tagoveSintaksa: ne pravi se razlika između malih i
velikih slovaSintaksa: 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 promeneStaviti tag <BR> ispred dodatih rečenica, snimiti
dokument i pogledati promene
Tekst 2Dodavanje formatiranog teksta:
<PRE>Koristeći tag PRE možemo dodatitekst čiji je format unapred određene unutar dokumenta.</PRE>
Snimiti i pogledati promeneIzbrisati tagove, snimiti dokument, pogledati
promene, vratiti tagoveObjasniti kako se dodaju specijalni znaci:
< = < ili < > = > ili >
Pasus, efektiDodati horizontalnu liniju pomoću taga <HR> ispred i iza već
napisanog tekstaDodati 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
NasloviObjasniti tagove za različite nivoe naslova:
<H1>...</H1>, ... <H6>...</H6>Dodati sledeća tri naslova i pogledati promene:
Ovo je naslov najvišeg nivoa. H1Ovo je naslov drugog nivoa. H2Ovo je naslov trećeg nivao. H3
Centrirati naslov najvišeg nivaoDodati horizontalnu liniju i pogledati promene
Linkovi 1Objasniti tag za linkove:
<A HREF=“adresa”>...</A>URL = Uniform Resource Lokator (Uniformni Lokator
Resursa)http://www.w3.org/MarkUp/ImeFajla.htmlhttp – protokol, Hypertext Transfer Protocol (protokol za prenos hiperteksta)www.w3.org – domen .org – domen prvog nivoa w3 – domen drugog nivoa www – domen trećeg nivoaMarkUp – ime folderaako ne navedemo ime fajla, bira se podrazumevani fajl sa nazivom Index.html
Linkovi 2Primeri 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 1Nabrajanje, 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 2Nabrajanje, 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 3Definiciona 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 1Tag 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 2Dodati novi pasus sa opisom planete Neptun iz fajla
Neptun.txtUnutar 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.pngTipovi slika koje se mogu koristiti: PNG, JPG, GIFDodati 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
Recommended