HTML Primeri

HTML – primeri
PRIMER 1:
<html>
<head><title>Moja prva stranica</title></head>
<body>
Zdravo svima pocinjem da ucim HTML
</body>
</html>
PRIMER 2:
<html>
<head><title>Pasusi</title></head>
<body>
 Ovo je prvi pasus. 
 Ovo je drugi pasus. 
 
 Ovo je treci pasus ispred koga je bio prazan red. 
 Ovo je pasus koji je desno poravnat.
 Ovo je pasus koji je centriran.
 Ovo je pasus koji je levo poravnat.
<body>
</html>
PRIMER 3:
Naslovi različite dubine
<html>
<head><title>Naslovi</title></head>
<body>
<H1> Naslov H1 </H1>
</body>
</html>
PRIMER 4:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
<TITLE> Osnovne etikete</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=CENTER>
<H3>Fizički stil karaktera</H3>
<TABLE>
<TR>
<TD>Normalan slog:</TD><TD> Sportska gimnazija. </TD></TR>
<TR>
<TD>Crni slog:</TD><TD> Sportska gimnazija. </TD></TR>
1|Strana
<TR>
<TD>Kurzivni slog:</TD><TD> Sportska gimnazija. </TD></TR>
<TR>
<TD>Podcrtavanje:</TD><TD> Sportska gimnazija. </TD></TR>
<TR>
<TD>Teleprinterski slog:</TD><TD> <TT> Sportska gimnazija.</TT> </TD></TR>
<TR>
<TD>Precrtavanje:</TD><TD> <STRIKE> Sportska gimnazija.</STRIKE> </TD></TR>
<TR>
<TD>Blinkovanje:</TD><TD> <BLINK> Sportska gimnazija.</BLINK> </TD></TR>
</TABLE>
</DIV>
 Ovo su slova uobičajene veličine, a ovo su slova manja od uobičajenih.

 Ovo su slova uobičajene veličine, <BIG> a ovo su slova veća od uobičajenih.
</BIG>
 Ovo je tekst crvene boje, slova su veličine 10.

</BODY>
</HTML>
PRIMER 5: Boje pozadine i slova
<HTML>
<HEAD>
<TITLE> Boje pozadine i slova </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF00" TEXT="#FF0000">
<H1>Ovaj naslov je crven zbog atributa TEXT</H1>
 
<H1>
a ovaj naslov je plav zbog etikete FONT

</H1>
</BODY>
</HTML>
PRIMER 6: Opisna lista
<HTML>
<HEAD>
<TITLE>Opisne liste</TITLE>
</HEAD>
<BODY>
<DL>
<DT>piko-
<DD> prefiks nekoj jedinici koji pokazuje milioniti deo
milionitog dela te jedinice;
<DT>nano-
<DD> prefiks nekoj jedinici koji pokazuje milijarditi
deo te jedinice;
<DT>mikro-
<DD>prefiks nekoj jedinici koji pokazuje milioniti deo
te jedinice;
</DL>
</BODY>
</HTML>
2|Strana
PRIMER 7: Numerisana lista
<HTML>
<HEAD>
<TITLE>Numerisane liste</TITLE>
</HEAD>
<BODY>
<OL>Moji omiljeni predmeti su:
<LI>Istorija
<LI>Engleski jezik
<LI>Računarstvo i informatika
<LI>Hemija
</OL>
</BODY>
</HTML>
Vizuelni prikaz
Moji omiljeni predmeti su:
1. Istorija
2. Engleski jezik
3. Računarstvo i informatika
4. Hemija
PRIMER 8: Nenumerisna lista
<HTML>
<HEAD>
<TITLE>Nenumerisane liste</TITLE>
</HEAD>
<BODY>
<UL>Tokom zime jedemo:
<LI>jabuku
<LI>limunu
<LI>grejp
<LI>bananu
</UL>
</BODY>
</HTML>
Vizuelni prikaz
Tokom zime jedemo:
 jabuku
 limun
 grejp
 bananu
PRIMER 9: Smestiti sličicu i HTMl dokument u isti fail.
<html>
<head>
<title>Moja prva Slicica na Internet stranici</title>
</head>
3|Strana
<body bgcolor="#FFFFFF">
Zdravo HTML svete evo moje prve sličice! 
<img src ="slicica.jpg" width ="500" height ="480" hspace ="30" vspace ="10" border
="2" align ="left">
</body>
</html>
PRIMER 10: Ubacivanje slike u HTML dokument
Kreirati HTML dokument koji ce :

a) sliku u datoteci slika.gif umetnuti iza teksta primer slike
b) sliku u datoteci slika.gif umetnuti ispod teksta primer slike, tako da slika bude
deo centriranog pasusa
c) sliku u datoteci slika.gif prikazati u okviru cija sirina je 130, a visina 140 piksela
d) sliku u datoteci slika.gif prikazati u okviru cija sirina je 300, a visina 50 piksela, dok
alternativni tekst glasi "Slika br. 4". Slika mora biti iscrtana na levoj strani, a tekst koji
se rasporedjuje oko nje da glasi: Ovo je primer levog poravnanja.
e) sliku u datoteci slika.gif prikazati u okviru cija sirina je 300, a visina 50 piksela, dok
alternativni tekst glasi "slika br. 5". Slika mora biti iscrtana na desnoj strani, a tekst koji
se rasporedjuje oko nje da glasi: Ovo je primer desnog poravnanja.
f) sliku u datoteci slika.gif prikazati u okviru cija sirina je 200, a visina 50 piksela, dok
alternativni tekst glasi "slika br. 6". Slika mora biti imati MIDDLE poravnanje, a tekst koji
se rasporedjuje oko nje da glasi: Ovo je primer MIDDLE poravnanja. Okvir oko slike neka
bude 3 piksela.
g) isto kao pod f), ali bez pojave alternativnog teksta, ali dodatni horizontalni i vertikalni prostor oko slike da bude
u oba slucaja po 10 piksela
h) sliku u datoteci slika.gif prikazati u okviru cija sirina je 100, a visina 100 piksela, dok
alternativni tekst glasi "Poslednja slika". Slika mora imati TOP poravnanje, a tekst koji
se rasporedjuje oko nje da glasi: Tekst za ALIGN=Bottom.
U svim podzadacima, pretpostaviti da se datoteka slika.gif i HTML dokument nalaze u istom folderu.
<html>
<head>
<title>Umetanje slika u HTML dokumentu </title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
</head>
<body>
Primer slike:
<img src="slika.jpg">
 
Primer centrirane slike:

 <img src="slika.jpg"> 
 <img src="slika.jpg" width="130" height="140"> 

 
<img src="slika.jpg" width="300" height="50" alt="Slika br. 4" align=LEFT> Ovo je

primer levog poravnanja.

 
<img src="slika.jpg" width="300" height="50" alt="slika br. 5" align=right>
Ovo je primer desnog poravnanja.

 
<img src="slika.jpg" width="200" height="50" alt="slika br. 6" align=MIDDLE border="3">
Ovo je primer MIDDLE poravnanja.

 
<img src="slika.jpg" width="200" height="16" align=middle border="3" hspace="10"
vspace="10">
Ovo je primer MIDDLE poravnanja.

 <img src="slika.jpg" width="100" height="100" alt="Peta slika" align=TOP>
Tekst za ALIGN=TOP
Isto to ali u novom redu 
<img src="slika.jpg" width="100" height="100" alt="Poslednja slika" align=bottom>

Tekst za ALIGN=Bottom.
</body>
</html>
PRIMER 11: Povezivanje sa spoljasnjim slikama
Spoljasnje slike se ne prikazuju sa ostalom sadrzinom na veb stranici.

Kodiraju se pomocu oznake <a> , </a> uz atribut href.
<html>
<head>
<title>Slika kao hiper veza</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
</head>
<body BGCOLOR="FFC0CB">
 Nasa slika kao hiper veza 
 Ovde je <a href="slika.jpg"> slika </a> Zalaska sunca 
</body>
</html>
PRIMER 12: Povezivanje sa drugim stranama
<html>
<head>
<title>Linkovi</title>
5|Strana
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>Linkovi</h1>
 Ovaj primer sadrži <a href="Primer1.html">link ka stranici
Primer1</a>, u pitanju je relativna putanja na neki od prethodnih primera.

 Ovaj primer sadrži <a href="http://www.google.com">link ka
stranici Google Search </a>, sa apsolutnom adresom početne
stranice Google-a. 
</body>
</html>
PRIMER 13: Primer sa sidrom – tekući dokument
• Mesto u html dokumentu se označava sa:
• <a name=”oznaka”> Tekst sa sidrom </a>
• Na ovako označen deo teksta “Tekst sa sidrom” se pravi hyper link sa:
• <a href=”#oznaka”> Hiperlink na sidro </a>
• Znak „#” – hash označava da se vrednost atributa href odnosi na sidro sa atributom name koji ima vrednost “oznaka” u
tekućem dokumentu.
<html>
<head><title>IZRADA INTERNET STRANICE</title></head>
<body bgcolor="FFEBCD">
6|Strana

<h3>IZRADA INTERNET STRANICE</h3>
 Bez obzira da li internet sajt kreirate sami ili uz pomoć prijatelja ili plaćenih
profesionalaca, savetujemo vam da redosled poteza pri izradi Internet sajta bude
sledeći: 
Faze izrade Internet sajta: 
<a href="#oznaka1"> 1. Definisanje koncepta i sadržaja sajta</a> 
<a href="#oznaka2"> 2. Definisanje funkcionalnosti</a> 
<a href="#oznaka3"> 3. Definisanje sistema navigacije</a> 
<a href="#oznaka4"> 4. Kreiranje vizuelnog identiteta</a> 
<a href="#oznaka5"> 5. Izbor arhitekture i tehnologije</a> 
<a href="#oznaka6"> 6. Izrada Sistema za upravljanje sadržajem (CMS)</a> 
<a href="#oznaka7"> 7. Implementacija i testiranje</a> 
<a href="#oznaka8"> 8. Održavanje i ažuriranje</a> 
<a href="#oznaka9"> 9. Promocija</a> 
<a href="#oznaka10"> 10. Osveženje</a> 
<a name="oznaka1"> <big> 1.Definisanje koncepta i sadržaja sajta </big> </a> 
Sadržaj je najbitnija stvar na Internetu - zbog toga posetioci dolaze i vraćaju se na

sajtove ! U sadržaj spadaju tekstovi, fotografije, ilustracije, multimedija... sve ono
što može da vas predstavi ostatku sveta. Zato osmislite sadržaj koji će da bude
primeren vašoj ciljnoj grupi, logično strukturiran, ažuran, jasan i pristupačan vašim
posetiocima. <hr>
<a name="oznaka2"> <big> 2.Definisanje funkcionalnosti </big></a> 
Zapitajte se šta vam sve od raznih "Internet fora" uopšte treba na sajtu. Ako ne možete
da obezbedite pristojan nivo funkcionisanja nekih složenih "tehničkih egzibicija",
bolje da ih ne koristite. <hr>
<a name="oznaka3"> <big> 3.Definisanje sistema navigacije </big></a> 
Navigacija na sajtu pomaže posetiocima da što brže, najviše sa dva-tri klika, dođu do
željenog sadržaja. Zato navigacija mora da bude pregledna i logična. <hr>
<a name="oznaka4"> <big> 4.Kreiranje vizuelnog identiteta </big></a> 
Danas na Internetu ima mnogo besplatnih web dizajn šablona, tako da je bolje da
koristite njih ako niste dovoljno spretni da kreirate originalni vizuleni identitet
svog sajta. <hr>
<a name="oznaka5"> <big> 5.Izbor arhitekture i tehnologije </big></a> 
Tehnologija koje omogućavaju funkcionisanje sajtova danas priličan broj, ali je

najbitnije da ona koju odaberete za svoj Internet sajt bude bezbedna i ima mogućnost
unapređivanja. <hr>
7|Strana
<a name="oznaka6"> <big> 6.Izrada Sistema za upravljanje sadržajem(CMS) </big></a> 
Content Management System omogućava jednostavno i brzo kreiranje i održavanje Internet

sajta i danas je prilično neozbiljno raditi sajt bez CMS-a. Veoma popularni,
jednostavni za upotrebu, besplatni i često korišćeni CMS-ovi su Joomla i WordPress.
<hr>
<a name="oznaka7"> <big> 7.Implementacija i testiranje </big></a> 
Uvek postavite probnu verziju sajta na nekoj sakrivenoj test adresi. Tek kada ga
potpuno proverite, prebacite ga na vašu zvaničnu Internet adresu. <hr>
<a name="oznaka8"> <big> 8.Održavanje i ažuriranje </big></a> 
Internet ima tu prednost nad drugim medijima da uočene greške relativno lako mogu da se
otklone i posle puštanja u rad. I zapamtite najbitniju stvar: REDOVNO ažurirajte svoj
sajt novim podacima, fotografijama i ostalim sadržajem. <hr>
<a name="#oznaka9"> <big> 9.Promocija </big></a> 
Ništa vam ne vredi Internet sajt ako za njega niko ne zna da postoji. Zato, pored
raznih besplatnih Internet metoda promovisanja,koristite i sve druge dostupne načine da
izreklamirate svoju Internet adresu. <hr>
<a name="#oznaka10"> <big> 10.Osveženje </big></a> 
Životni vek Internet sajtova je dve do tri godine. Posle toga im je vreme da odu
penziju, a da ih nasledi neki vaš novi sajt, sa novim sadržajem, novim dizajnom i novom
tehnologijom. <hr>

</body>
</html>
8|Strana

HTML Primeri

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Primeri

Uploaded by

Copyright:

Available Formats

HTML – primeri

Naslovi različite dubine

PRIMER 5: Boje pozadine i slova

PRIMER 6: Opisna lista

Moji omiljeni predmeti su:

PRIMER 8: Nenumerisna lista

Tokom zime jedemo:

PRIMER 9: Smestiti sličicu i HTMl dokument u isti fail.

PRIMER 10: Ubacivanje slike u HTML dokument

Kreirati HTML dokument koji ce :

Primer centrirane slike:

<!--Na dimenziju prikazane slike uticu atributi visine(HEIGHT) i

<p>&nbsp; </p>

<img src="slika.jpg" width="300" height="50" alt="Slika br. 4" align=LEFT> Ovo je

Ovo je primer desnog poravnanja.

Ovo je primer <br> MIDDLE poravnanja.

Ovo je primer<br>MIDDLE poravnanja.

<p><img src="slika.jpg" width="100" height="100" alt="Poslednja slika" align=bottom>

PRIMER 11: Povezivanje sa spoljasnjim slikama

Spoljasnje slike se ne prikazuju sa ostalom sadrzinom na veb stranici.

PRIMER 12: Povezivanje sa drugim stranama

PRIMER 13: Primer sa sidrom – tekući dokument

• Mesto u html dokumentu se označava sa:

• <a name=”oznaka”> Tekst sa sidrom </a>

• <a href=”#oznaka”> Hiperlink na sidro </a>

<head><title>IZRADA INTERNET STRANICE</title></head>

<h3>IZRADA INTERNET STRANICE</h3>

Faze izrade Internet sajta: <br>

<a href="#oznaka1"> 1. Definisanje koncepta i sadržaja sajta</a> <br>

<a href="#oznaka2"> 2. Definisanje funkcionalnosti</a> <br>

<a href="#oznaka3"> 3. Definisanje sistema navigacije</a> <br>

<a href="#oznaka4"> 4. Kreiranje vizuelnog identiteta</a> <br>

<a href="#oznaka5"> 5. Izbor arhitekture i tehnologije</a> <br>

<a href="#oznaka6"> 6. Izrada Sistema za upravljanje sadržajem (CMS)</a> <br>

<a href="#oznaka7"> 7. Implementacija i testiranje</a> <br>

<a href="#oznaka8"> 8. Održavanje i ažuriranje</a> <br>

<a href="#oznaka9"> 9. Promocija</a> <br>

<a href="#oznaka10"> 10. Osveženje</a> <br> <br> <br>

Sadržaj je najbitnija stvar na Internetu - zbog toga posetioci dolaze i vraćaju se na

<a name="oznaka2"> <big> 2.Definisanje funkcionalnosti </big></a> <br>

<a name="oznaka3"> <big> 3.Definisanje sistema navigacije </big></a> <br>

<a name="oznaka4"> <big> 4.Kreiranje vizuelnog identiteta </big></a> <br>

<a name="oznaka5"> <big> 5.Izbor arhitekture i tehnologije </big></a> <br>

Tehnologija koje omogućavaju funkcionisanje sajtova danas priličan broj, ali je

Content Management System omogućava jednostavno i brzo kreiranje i održavanje Internet

<a name="oznaka7"> <big> 7.Implementacija i testiranje </big></a> <br>

<a name="oznaka8"> <big> 8.Održavanje i ažuriranje </big></a> <br>

<a name="#oznaka9"> <big> 9.Promocija </big></a> <br>

<a name="#oznaka10"> <big> 10.Osveženje </big></a> <br>

You might also like

<p> </p>