NAZAD NA POČETNU Osnovne funkcije NAZAD
Pa, da počnemo. Zadatak br.1-napravi najosnovniju stranicu u HTML5.
<!DOCTYPE html>
<html>
<head>
<title>Naslov</title>
</head>
<body>
Sadržaj dokumenta......
</body>
</html>
Evo, ovako izgleda jedna minimalna HTML stranica. Rezultat Isprobaj sam ("desni klik>open link in new tab" Da bi mogli lakše da uporedite ovaj kod i onaj koji pišete.)
Zadatak br.2-ubacimo heading
<!DOCTYPE html>
<html>
<body>
<h1>Ovo je heading 1</h1>
<h2>Ovo je heading 2</h2>
<h3>Ovo je heading 3</h3>
<h4>Ovo je heading4</h4>
<h5>Ovo je heading 5</h5>
<h6>Ovo je heading6</h6>
</body>
</html>
Zadatak br.3-ubacimo paragraf
<!DOCTYPE html>
<html>
<body>
<p>Ovo je paragraf.</p>
<p>Ovo je paragraf.</p>
<p>Ovo je paragraf.</p>
</body>
</html>
Zadatak br.4-ubacimo komentar u nas HTML kod.
<!DOCTYPE html>
<html>
<body>
<!--Ovo nece biti prikazano-->
<p>Ovaj tekst nije komentar i bice prikazan</p>
</body>
</html>
Zadatak br.5-ubacimo horizontalne linije u nas kod.
<!DOCTYPE html>
<html>
<body>
<p>Hr tag predstavlja horizontalnu liniju.</p>
<hr />
<p>Ovo je paragraf</p>
<hr />
<p>Ovo je paragraf</p>
<hr />
<p>Ovo je paragraf</p>
</body>
</html>
Zadatak br.6-odvojimo tekst pomocu <br> taga
<!DOCTYPE html>
<html>
<body>
<p>Ovo <br />je<br />odvojen tekst.</p>
</body>
</html>
Zadatak br.7-formatiranje teksta pomocu raznih HTML tagova
<!DOCTYPE html>
<html>
<body>
<p><b>Ovaj tekst je pobedljan(bold)</b></p>
<p><strong>Ovaj tekst je "jak" (strong)</strong></p>
<p><big>Ovo je veliki tekst.</big></p>
<p><em>Ovo je naglasen tekst.</em></p>
<p><i>Ovaj tekst je u italiku.</i></p>
<p><small>Ovo je mali tekst.</small></p>
<p>Ovo je<sub> subskript</sub> i <sup>superskript</sup></p>
</body>
</html>
Zadatak br.8- Koriscenje preformatiranog teksta
<!DOCTYPE html>
<html>
<body>
<pre>
Ovo je preformatiran tekst
on postuje odvajanja i prelaske u druge redove
</pre>
<p><pre> tag je koristan pri pisanju poezije</p>
<pre>
Kisa pada,
trava raste,
a na nebu
lete laste.
</pre>
</body>
</html>
Zadatak br.9- ubacivanje informacija o korisniku pomocu taga <adress>
<!DOCTYPE html>
<html>
<body>
<address>
Napisao Aleksandar Djordjevic<br />
<a
href="email@primjer.com"> Email
adresa </a><br />
Adresa: Zmaj Jovina 13<br />
Telefon: 065 844 465
</address>
</body>
</html>
Zadatak br.10- oznacavanje obrisanog i ubacenog teksta
<!DOCTYPE html>
<html>
<body>
<p>Moja omiljena boja je <del>crvena</del> <ins>plava</ins>!</p>
<p>Primjetite kako je tekst izmedju del tagova precrtan a izmedju ins podvucen</p>
</body>
</html>
Zadatak br.11- Stilski (style) elementi u HTML-u
<!DOCTYPE html>
<html>
<body style="background-color:PowderBlue;">
<h1>Stilovi i boje</h1>
<p style="font-family:verdana;color:red;">
Ovaj tekst je u Verdani i crven je</p>
<p style="font-family:times;color:green;">
TOvaj tekst je u Times formatu i zelen je</p>
<p style="font-size:30px;">Ovaj tekst ima 30 piksela</p>
</body>
</html>
Zadatak br.12- Poravnanje teksta
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Srednje poravnanje teksta</h1>
</body>
</html>
Zadatak br.13- Jednostavnije koriscenje stilova u HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {color:red;}
h2 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>Svi h1 elementi ce biti u crvenoj boji</h1>
<h2>Svi h2 elementi ce biti u plavoj boji</h2>
<p>Svaki tekst u paragrafu ce biti zelen</p>
</body>
</html>
Zadatak br.14- Link koji nije automatski podvucen
<!DOCTYPE html>
<html>
<body>
<a href="naslovna.htm" style="text-decoration:none;">Naslovna</a>
</body>
</html>