VJEŽBE #1 IZ PREDMETA WEB DIZAJN Primjer 1. Prvi program u

VJEŽBE #1 IZ PREDMETA WEB DIZAJN
Primjer 1. Prvi program u HTMLu.
<HTML>
<HEAD><TITLE>Ovo je naslov</TITLE></HEAD>
<BODY>
TEKST KOJI SE PRIKAZUJE
</BODY>
</HTML>
Primjer 2. Ispisivanje naslova različitih veličina.
<HTML>
<HEAD><TITLE>Naslovi</TITLE></HEAD>
<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>
Primjer 3. Primjeri osnovnih tagova unutar HTML stranice.
<HTML>
<HEAD><TITLE>Primjeri osnovnih tagova</TITLE></HEAD>
<BODY>
<H2><P ALIGN=CENTER> HTML</P> </H2>
<HR>
<P ALIGN=LEFT>HTML (HyperText Markup Language) je veoma
jednostavan
jezik cije osnove svako moze da se brzo savlada. U okviru ovog kursa
proucavaju se osnove HTML-a koje su dovoljne da se naprave
jednostavne ali
sasvim zadovoljavajuce prezentacije.
</P> <HR>
<P ALIGN=RIGHT>Svaki put kada krstareci internetom naletite na neku
zanimljivu stranicu, a ne znate kako je napravljena, njen izvorni HTML
kod
mozete pogledati ako u liniji menija odaberete: View -> Source (ili View
–
Page Source u Internet Explorer-u).
</P>
<HR>
<P ALIGN=CENTER>HTML se koristi i u okviru <BR>
ASP stranica<BR>
JSP stranica, <BR>
Zajedno sa JavaScriptom <BR>
ili PHP jezikom <BR>
ili nekim drugim script jezikom</P><HR>
<P ALIGN=CENTER>HTMLje
<DIV ALIGN=LEFT>hiper-</DIV>
<DIV ALIGN=CENTER>tekst-</DIV>
<DIV ALIGN=RIGHT>Markup jezik.</DIV>
Kad savladate osnove HTML-a mozete preci na
upoznavanje JavaScripta
</P>
</BODY>
</HTML>
Primjer 4. Rad sa velicinom fonta
<html>
<head><title> Velicina fonta</title>
</head>
<body>
<FONT SIZE = 1> Velicina fonta 1 </FONT><BR>
<FONT SIZE = 2> Velicina fonta 2 </FONT><BR>
<FONT SIZE = 3> Velicina fonta 3 </FONT><BR>
<FONT SIZE = 4> Velicina fonta 4 </FONT><BR>
<FONT SIZE = 5> Velicina fonta 5 </FONT><BR>
<FONT SIZE = 6> Velicina fonta 6 </FONT><BR>
<FONT SIZE = 7> Velicina fonta 7 </FONT><BR>
</body>
</html>
Primjer 5. Primjer paragrafa.
<html>
<head>
<TITLE> HTML Primjer</TITLE>
</head>
<body>
<H1>HTML Uvod</H1>
<P> Ovo je primjer prvog paragrafa.
Koji se radi na prvom casu.
</P>
<P>Drugi paragraf.</P>
<P ALIGN=CENTER>
Ovo je centrirani paragraf
</P>
</body>
</html>
Primer 6. Primjer opisne liste
<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>
Primjer 7. Primjer numerisane liste
<HTML>
<HEAD>
<TITLE>Numerisane liste</TITLE>
</HEAD>
<BODY>
<OL>Predmeti na 1. godini SPR-a
<LI>Aplikativni softver
<LI>Inženjerska matematika
<LI>Osnovi elektrotehnike
<LI>Osnovi elektronike
<LI>Osnovi racunarstva
</OL>
</BODY>
</HTML>
Primer 8. Primjer nenumerisane liste
<HTML>
<HEAD>
<TITLE>Nenumerisane liste</TITLE>
</HEAD>
<BODY>
<UL>Tokom zime ima
<LI>jabuka
<LI>limuna
<LI>grejpfruta i
<LI>banana.
</UL>
</BODY>
</HTML>
Primjer 9. Primjer numerisane liste
<html>
<body>
<h4>Numerisana lista - Brojevi:</h4>
<ol>
<li>Jabuke</li>
<li>Banane</li>
<li>Limuni</li>
<li>Pomorandze</li>
</ol>
<h4>Numerisana lista – Velika slova:</h4>
<ol type="A">
<li>Jabuke</li>
<li>Banane</li>
<li>Limuni</li>
<li>Pomorandze</li>
</ol>
<h4>Numerisana lista – Mala slova:</h4>
<ol type="a">
<li>Jabuke</li>
<li>Banane</li>
<li>Limuni</li>
<li>Pomorandze</li>
</ol>
<h4>Numerisana lista – Veiliki rimski brojevi:</h4>
<ol type="I">
<li>Jabuke</li>
<li>Banane</li>
<li>Limuni</li>
<li>Pomorandze</li>
</ol>
<h4>Numerisana lista – Mali rimski brojevi:</h4>
<ol type="i">
<li>Jabuke</li>
<li>Banane</li>
<li>Limuni</li>
<li>Pomorandze</li>
</ol>
</body>
</html>
Primjer 10. Primjer nenumerisane liste
<html>
<body>
<h4>Nenumerisana lista – Ispunjen krug:</h4>
<ul type="disc">
<li>Jabuke</li>
<li>Banane</li>
<li>Limuni</li>
<li>Pomorandze</li>
</ul>
<h4> Nenumerisana lista – Prazan krug:</h4>
<ul type="circle">
<li>Jabuke</li>
<li>Banane</li>
<li>Limuni</li>
<li>Pomorandze</li>
</ul>
<h4> Nenumerisana lista – Ispunjen kvadrat:</h4>
<ul type="square">
<li>Jabuke</li>
<li>Banane</li>
<li>Limuni</li>
<li>Pomorandze</li>
</ul>
</body>
</html>
Primer 11. Primjer liste unutar liste
<html>
<body>
<h4>Lista unutar liste (Ugnijezdjena lista):</h4>
<ul>
<li>Kafa</li>
<li>Caj
<ul>
<li>Crni caj</li>
<li>Zeleni caj</li>
</ul>
</li>
<li>Mlijeko</li>
</ul>
</body>
</html>
Primer 12. Primjer neuređene liste
<html>
<body>
<h4>Neuredjena lista</h4>
<dl>
<dt>Kafa</dt>
<dd>Crni topli napitak</dd>
<dt>Mlijeko</dt>
<dd>Bijeli hladni napitak</dd>
</dl>
</body>
</html>
Primer 13. 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>
<BR><BR>
<H1><FONT COLOR="#0000FF">
a ovaj naslov je plav zbog etikete FONT
</FONT>
</H1>
</BODY>
</HTML>
Primer 14. Boje atributa u tagu BODY
<HEAD>
<TITLE> Atributi u tagu BODY</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF"
LINK="#990000" VLINK="#660000"
ALINK="#ff0000">
<H1>Iz teksta na bijeloj pozadini sa crnim slovima<BR>
poziva se <a href="ex0901.html">ovdje</a>
tekst<BR>
iz prethodnog primjera. <BR><BR>
<UL>
<LI><Font COLOR="#990000"> Boja za atribut
LINK</FONT>
<LI><Font COLOR="#660000"> Boja za atribut
VLINK</FONT>
<LI><Font COLOR="#FF0000"> Boja za atribut
ALINK</FONT>
</UL>
</H1>
</BODY>
</HTML>