Embed Size (px)
Citation preview
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 < > & €
<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"> </td> <td bgcolor="#00FF00"> </td> <td bgcolor="#00FFFF"> </td> <td bgcolor="#FF0000"> </td> <td bgcolor="#00FF00"> </td> <td bgcolor="#00FFFF"> </td> </tr> </table> <table align="center" height="500" width="500" bgcolor="#000066"> <tr height="100" bgcolor="#6699FF"> <td> </td> <td> </td> <td> </td> </tr> <tr height="170" bgcolor="#339900"> <td> </td> <td> </td> <td> </td> </tr> <tr bgcolor="#FF3300"> <td> </td> <td> </td> <td> </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"> </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%"> </td> </tr> <tr> <td>Poštanski broj:</td> <td><input type="text" name="postBroj" size="5" maxlength="5"></td>
<td colspan="4"> </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"> </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"> </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"> </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> </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.
