0% found this document useful (0 votes)
161 views

HTML Vezbe

The document contains examples of different HTML elements for building web pages, including headings, paragraphs, lists, tables, frames, and forms. It demonstrates how to use bold, italic, underline, links, images, colors, borders and other attributes to style and structure the content. The examples progress from basic text formatting to more advanced layouts using multiple frames and tables within forms.

Uploaded by

awe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
161 views

HTML Vezbe

The document contains examples of different HTML elements for building web pages, including headings, paragraphs, lists, tables, frames, and forms. It demonstrates how to use bold, italic, underline, links, images, colors, borders and other attributes to style and structure the content. The examples progress from basic text formatting to more advanced layouts using multiple frames and tables within forms.

Uploaded by

awe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 15

ZADATAK1

<html>
<head>
<title>Prvi zadatak </title>
</head>
<body bgcolor="#FFFFFF" link="#CE0421" vlink="#000066">
<!-- Ovako se pise komentar. -->
<h1 align="center"> HTML Primer Veb dizajn </h1>
<hr>
<h3 align="left">H3 tag za naslov!</h3>
<p><b>Boldovan tekst u paragraf tagu!</b><br>
<u>Ovako izgleda podvučeno</u></p>
Ovo su specijalni znaci &lt; &gt; &amp; &euro;
<div align="right">Div-tag za podešavanje sadržaja (left, right, center)</div><br>
<ul>
<li>
<b>Linkovi mogu biti:</b><li><b>Tekst <a href="http://www.etf.bg.ac.yu">
Elektrotehnički fakultet Beograd</a></b>
<br>
<li><b>Slike</b> <a href="http://si.etf.bg.ac.yu//" target="_blank">
<img src="si_header1b.jpg" width="600" height="100"
alt="ETF" hspace="10" vspace="10" border="5" align="bottom">
</a>
</ul>

<dl>
<dt>Postoje tabele sa:
<dd><font color="#0000CC">Borderima-vidljivim ivicama
</font>
<dd><font color="#990000"> Tabela bez bordera
</font>
</dl>
<table border="2" width="100%">
<caption align="left" valign="top">Primer tabele</caption>
<tr>
<td>Ova</td>
<td>tabela ima</td>
<td>border(ivicu) 2 piksela</td>
</tr>
<tr>
<td>Ova</td>
<td>tabela ima</td>
<td>3 reda i 3 kolone</td>
</tr>
<tr>
<td>Ova</td>
<td>tabela je</td>
<td>sirine 100% ekrana</td>
</tr>
</table>

<table width="700" height="200" cellpadding="2" cellspacing="3">


<tr>
<td>Ovo</td>
<td>je tabela</td>
<td>bez bordera</td>
</tr>
<tr>
<td align="center" valign="middle"><font color="Red" size="5" face="Verdana, Arial,
Helvetica, sans- serif"> Atributi</font></td>
<td>tabele su</td>
<td><font size="+2" color="blue">cellpadding (rastojanje od ivica celije)</font></td>
</tr>
<tr>
<td><font color="red" face="Arial">Atributi</font></td>
<td>tabele su</td>
<td><font size="+2" color="blue">cellspacing (rastojanje izmedju celija)</font></td>
</tr>
<tr>
<td><font color="red" face="Arial">Atribut</font></td>
<td>tabela je</td>
<td><font size="+2" color="blue">sirine 700 piksela</font></td>
</tr>
</table>
</body>
</html>

ZADATAK 2
<html>
<head>
<title>Zadatak2</title>
</head>
<body>
<table align="center" height="100" width="500">

<caption> Boje </caption>


<tr>
<td bgcolor="#FF0000">&nbsp;</td>
<td bgcolor="#00FF00">&nbsp;</td>
<td bgcolor="#00FFFF">&nbsp;</td>
<td bgcolor="#FF0000">&nbsp;</td>
<td bgcolor="#00FF00">&nbsp;</td>
<td bgcolor="#00FFFF">&nbsp;</td>
</tr>

</table>

<table align="center" height="500" width="500" bgcolor="#000066">

<tr height="100" bgcolor="#6699FF">

<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr height="170" bgcolor="#339900">

<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>

</tr>

<tr bgcolor="#FF3300">

<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
ZADATAK 3

<html>
<head>
<title>Zadatak3</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body>
<table align="center" border="1">
<th colspan="3">Tabele i liste </th>
<tr>
<td>
<ul type="square">
<li> sto
<li> stolica
<li> krevet
<li> fotelja
</ul>
</td>
<td>
<ol type="I">
<li> krompir
<li> brokoli
<li> paprika
</ol>
</td>
<td rowspan="3"><ul>
<li> Neke vrste nameštaja su:
<ul type="circle">
<li> sto
<li> stolica
<li> krevet
<li> fotelja
</ul>
<li> Neke vrste povrća su:
<ol type="a">
<li> krompir
<li> brokoli
<li> paprika boje
<ol type="i">
<li> žute
<li> zelene
<li> crvene
</ol>
</ol>
</ul>
</td>
</tr>
<tr>
<td colspan="2">
<dl><h4>Pića</h4>
<dt>mleko: <dd> belo hladno piće
<dt>kafa: <dd>crno toplo piće
</dl>
</td>
</tr>
<tr>
<td colspan="2" align="center" >
<img src="DSC00555.JPG" height="50" width="50" align="bottom">
</tr>
</table>
</body>
</html>
ZADATAK 4
main.html
<html>
<frameset rows="5%,95%">
<frame src="menu.html">
<frame src="page1.html" name ="content">
</frameset>
</html>

page1.html
<html>
<frameset rows="50%,50%">
<frame src="page1a.html">
<frameset cols="25%,75%">
<frame src="page1b.html">
<frame src="page1c.html">
</frameset>
</frameset>
</html>
page2.html
<html>
<frameset cols="180,*">
<frame src="page2a.html">
<frame src="page2b.html" name="page2b">
</frameset>
</html>

menu.html
<html>
<body>
<table width="90%" align="center">
<tr>
<td><a href ="http://www.b92.net" target ="content">Frame 1</a> </td>
<td><a href ="page1.html" target ="content">Frame 2</a></td>
<td><a href ="page2.html" target ="content">Frame 3</a></td>
</tr>
</table>
</body>
</html>

page1a.html
<html>
<body bgcolor="#AAFFAA">
<h3>Sub frame a</h3>
</body>
</html>

page1b.html
<html>
<body bgcolor="#AAAAFF">
<h3>Sub frame b</h3>
</body>
</html>

page1c.html
<html>
<body bgcolor="#FFAAAA">
<h3>Sub frame c</h3>
</body>
</html>

page2a.html
<html>
<body>
<ol>
<li><a href ="page2b.html" target ="page2b">Link without Anchor</a><br>
<li><a href ="page2b.html#1" target ="page2b">Section 1</a>
<li><a href ="page2b.html#2" target ="page2b">Section 2</a>
<li><a href ="page2b.html#3" target ="page2b">Section 3</a>
</ol>
</body>
</html>

page2b.html
<html>
<body>
<a name="1"><h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce interdum, arcu quis
gravida mollis, nunc lectus commodo enim, ac tristique sem enim eget urna. Vestibulum
adipiscing leo nec libero. Phasellus vestibulum egestas sem. Phasellus id odio in orci
pellentesque consequat. Sed ac pede. Pellentesque tincidunt. Nullam at elit. Aenean nibh.
Suspendisse potenti. Etiam non mi. Nulla commodo adipiscing leo. Quisque dignissim
</p>
</a>
<a name="2"><h2>Section 2</h2>
<p>Curabitur dui sem, ultricies id, cursus at, blandit eu, quam. Nam felis. Mauris
condimentum consequat risus. Quisque a nibh sit amet magna sagittis posuere. Duis
imperdiet. Fusce congue nisi eu nibh. Etiam sit amet turpis at arcu faucibus ultricies.
</p>
</a>
<a name="3"><h2>Section 3</h2>
<p>Sed in sem a nisl varius convallis. Curabitur est. Vestibulum tempor massa sed
lorem. Maecenas tortor. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Pellentesque erat. Etiam consectetuer felis non leo. Vivamus
</p>
</a>
<a name="4"><h2>Section 4</h2>
<p>Nunc ac nisi in sem elementum semper. Duis nec tortor ut orci facilisis porttitor.
Nunc faucibus vestibulum felis. Sed nibh. Phasellus ligula. Praesent nisl. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc diam,
sed consequat nibh mi id ligula. Aliquam blandit fermentum nulla. Morbi elementum,
diam at fermentum elementum, massa magna tincidunt justo, quis pretium enim massa sit
amet felis
</p>
</a>
</body>
</html>
ZADATAK 5

<html>
<head>
<title>Zadatak1 Forme</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>

<body text="#000000" bgcolor="#CCCCCC">


<p align="center"><font size="5"><b><i>Primer formi</i></b></font></p>
<hr>
<form name="info" method="post" action="">
<table width="900" border="0" cellspacing="1" cellpadding="1" align="center"
bgcolor="#FFCC99">
<th colspan="6">Potrebni podaci su:</th>
<tr>
<td width="20%">Ime i prezime :</td>
<td><input type="text" name="imeprezime" size="30"></td>
<td colspan="4">&nbsp;</td>
</tr>
<tr>
<td>Ulica:</td>
<td><input type="text" name="ulica"></td>
<td>Broj:</td>
<td><input type="text" name="broj" size="5" maxlength="5"></td>
<td colspan="2" width="25%">&nbsp;</td>

</tr>
<tr>
<td>Poštanski broj:</td>
<td><input type="text" name="postBroj" size="5" maxlength="5"></td>
<td colspan="4">&nbsp;</td>
</tr>
<tr>
<td>Grad:</td>
<td><input type="text" name="grad" value="Beograd"></td>
<td>Država:</td>
<td>
<select name="drzava">
<option>Srbija i Crna Gora</option>
<option>Bosna i Hercegovina</option>
<option>Makedonija</option>
<option>Hrvatska</option>
<option>Slovenija</option>
</select>
</td>
<td colspan="2">&nbsp;</td>
</tr>

<tr>
<td rowspan="2">Pol:</td>
<td>Muški <input type="radio" name="pol" value="muški"> </td>
<td rowspan="2" colspan="4">&nbsp;</td>
</tr>
<tr>
<td>Ženski <input type="radio" name="pol" value="ženski" checked></td>
</tr>
<tr>
<td>Omiljeni sladoled:</td>
<td colspan="6">
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="10%">Vanila</td>
<td width="10%"><input type="checkbox" name="vanila"
value="vanila"></td>
<td width="10%">Èokolada</td>
<td width="10%"><input type="checkbox" name="èokolada"
value="èokolada" checked></td>
<td width="10%">Jagoda</td>
<td width="10%"><input type="checkbox" name="jagoda"
value="jagoda"></td>
<td width="10%">Karamela</td>
<td width="10%"><input type="checkbox" name="karamela"
value="karamela"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Kirisnièko ime:</td>
<td><input type="text" name="korisnik"></td>
<td>Lozinka:</td>
<td><input type="password" name="lozinka"></td>
<td colspan="2">&nbsp;</td>

</tr>
<tr>
<td>Komentar:</td>
<td colspan="3"><textarea cols="70" rows="5">Ovde ispisati
komentar</textarea></td>
<td><input type="hidden" name="skriveno" value="OVO JE SKRIVENO
POLJE"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6">
<div align="center">
<input type="submit" name="potvrdi" value="POTVRDI">
<input type="reset" name="odustani" value="ODUSTANI">
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
ZADACI ZA VEŽBU
Zadatak 1. U Notepad-u napisati HTML kôd koji opisuje stranicu kao što je na slici

Napomene: (Boja pozadine: #82CDFF, Boja slova prve liste: #990000,


Boja slova druge liste: #000033, Boja slova treće liste: #CC0000).

Zadatak 2. U Notepad-u napisati HTML kôd koji opisuje stranicu kao što je na slici

Napomena: akcija koju izvodi HTML forma je mailto: [email protected]


Zadatak 3. U Notepadu napisati HTML kôd koji opisuje stranicu kao što je na slici 3.

You might also like