HTML oznake

HTML oznake
Pregled najvažnijih HTML oznaka

Oznake koje određuju strukturu dokumenta





Ovo smo već naučili, ali da ponovimo:
<html> i </html> odreĎuju početak i kraj dokumenta
<head> i </head> odreĎuju zaglavlje dokumenta
<body> i <body> odreĎuju početak i kraj tijela
dokumenta

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević

2012. / 2013.

2

Oznake za rad s tekstom
 <p> i </p> odreĎuju odlomak (paragraph)
 <br /> služi za prelazak u novi red
 <h1> do <h6> (parne oznake) služe za zadavanje
naslova različitog značaja: h1 je najveći, glavni naslov,
h2 podnaslovi,…
 Iako ovo baš nisu sve oznake za rad s tekstom, puno
više od ovog nam niti ne treba
 Uz pomoć css-a moguće je dijelove teksta oblikovati na
najrazličitije načine


2012. / 2013.

3

Oznake za rad s listama
 <ul> i </ul> odreĎuju početak i kraj liste s grafičkim
oznakama (unordered list)
 <ol> i </ol> odreĎuju početak i kraj liste s brojevima
(ordered list)
 <dl> i </dl> odreĎuju početak i kraj definicijske liste
 <li> i </li> odreĎuju pojedinu stavku liste s brojevima ili
grafičkim oznakama (list item)
 <dt> i </dt> odreĎuju jedan pojam definicijske liste
(definition term)
 <dd> i </dd> odreĎuju jedan opis definicijske liste
(definition description)

2012. / 2013.

4

Primjer liste s grafičkim oznakama
HTML kod

Izgled u pregledniku

<ul>
<li>kupus</li>
<li>kelj</li>
<li>koraba</li>
</ul>

• kupus
• kelj
• koraba


2012. / 2013.

5

Primjer liste s brojevima
HTML kod


<ol>
<li>kupus</li>
<li>kelj</li>
<li>koraba</li>
</ol>

1. kupus
2. kelj
3. koraba


2012. / 2013.

6

Primjer definicijske liste
HTML kod


<dl>
<dt>kupus</dt>
<dd>pun je C vitamina</dd>
<dt>kelj</dt>
<dd>izvrstan je na lešo</dd>
<dt>koraba</dt>
<dd>nema juhe bez
korabe</dd>
</dl>

kupus
pun je C vitamina
kelj
izvrstan je na lešo
koraba
nema juhe bez korabe


2012. / 2013.

7

O listama
 Liste su vrlo često korišten element na web stranicama
 Pomoću css-a ih možemo oblikovati tako da ih je na prvi
pogled teško prepoznati
 Trebalo bi ih koristiti gdje god imamo kakvo nabrajanje ili
zbirku kratkih tekstualnih navoda
 Često se koriste za izbornike na web stranicama


2012. / 2013.

8

Poveznice
 Poveznice su osnova www-a
 Kreiramo ih pomoću oznaka <a> i </a>
 Obavezan je atribut href koji odreĎuje adresu ili
dokument prema kojem pokazuje poveznica
 Primjer:
<a href=“http://www.google.com”>gugl</a>
 Kako će izgledati poveznica obično se odredi css-om
 Ako nije drugačije odreĎeno, tekst poveznice će biti
podcrtan i prikazan drugom (plavom) bojom
 Poveznica ne mora biti samo tekst, može biti i slika… :
<a href=“http://www.google.com”><img
src=“slike/slika1.jpg” /></a>

2012. / 2013.

9

Apsolutne adrese
 U apsolutnim adresama se u argumentu href navodi
cjelovit url prema kojemu pravimo poveznicu, npr:
<a href=“http://www.tehnickaskola.net”>škola</a>
 Apsolutne adrese su neizbježne kad želimo poveznicu
prema nekom drugom web mjestu
 Nisu praktične za povezivanje sa stranicama s istog web
mjesta (otežano lokalno isprobavanje, nije fleksibilno u
odnosu na domenu na koju će se postaviti web
mjesto…)
 Kad god je to moguće koristimo relativne adrese


2012. / 2013.

10

Relativne adrese
 U relativnim adresama navodimo put od dokumenta na
kojem kreiramo poveznicu do dokumenta prema kojemu
pokazuje poveznica, npr:
<a href=“obrasci/korisnik/prijava.html”>prijavi se</a>
 Prethodna poveznica je prema stranici prijava.html do
koje ćemo od aktualnog dokumenta doći tako da
proĎemo kroz mape obrasci i korisnik
korisnik
korisnik

poveznica


prijava.html

2012. / 2013.

11

…relativne adrese
 Ako želimo napraviti poveznicu prema dokumentu izvan
mape aktualnog dokumenta koristimo se simbolom ../,
npr:
<a href=“../../prijava.html”>prijavi se</a>
 Prethodna poveznica je prema stranici prijava.html do
koje ćemo od aktualnog dokumenta doći tako da
prethodno dva puta izaĎemo iz mape
Neka mapa
Neka podmapa

prijava.html


poveznica

2012. / 2013.

12

Sidra
 Sidro je odreĎeno mjesto na stranici prema kojemu
možemo napraviti poveznicu. Kreiramo ga oznakom a i
atributom name:
<a name="napomena"></a>
Sidro nije vidljivo na stranici.
 Na istoj stranici možemo napraviti poveznicu prema tom
sidru koristeći znak # (stranica će se automatski
pomaknuti i pokazati dio sa sidrom):
<p><a href="#napomena">Poveznica</a> prema
napomeni.</p>
 Poveznicu prema sidru možemo napraviti i sa druge
stranice, npr koristeći relativnu adresu:
<a href=“napomene.html#napomena">napomena</a>

2012. / 2013.

13

Tablice
 Tablice su se nekad upotrebljavale kao način da
rasporedimo elemente na stranici, kao strukturni
element. Danas se to ne preporuča.
 Html oznake za rad s tablicama su:
» <table> i </table> odreĎuju tablicu
» <tr> i </tr> odreĎuju jedan red tablice
» <td> i </td> odreĎuje jedno polje tablice

 Jednostavna tablica 2 2 imala bi kod:
<table>
<tr><td>gore lijevo</td><td>gore desno</td></tr>
<tr><td>gore lijevo</td><td>gore desno</td></tr>
</table>


2012. / 2013.

14

Spajanje polja u tablici
 Polja u tablici možemo spojiti pomoću atributa rowspan
(preko koliko redova se proteže spojeno polje) i colspan
(preko koliko stupaca se proteže spojeno polje)
<table><tr>
<td>1</td><td colspan="2">2-3</td>
</tr><tr>
<td rowspan="2">4-7</td><td>5</td><td>6</td>
</tr><tr>
<td>8</td><td>9</td>
1
2-3
</tr></table>
4-7
5
8

2012. / 2013.

6
9
15

Dodatne mogućnosti tablica
 Oznaka caption unutar oznake table služi za zadavanje
naslova tablice
 Oznaka colgroup služi za grupiranje i zajedničko
zadavanje svojstva grupi stupaca. Njen argument span
odreĎuje koliko stupaca obuhvaća, a ako se ne navede,
podrazumijeva se jedan.
 thead zadaje zaglavlje u kojemu se nalazi naslovni red
tablice
 th su pojedina polja u naslovnom retku ili naslovnom
stupcu. Što je naslovljeno odreĎuje se atributom scope
koji može imati vrijednosti row (red), col (stupac),
rowgroup (grupa redova), colgroup (grupa stupaca)

2012. / 2013.

16

…dodatne mogućnosti tablica
 tfoot zadaje podnožje u kojemu je zadnji red tablice
 tbody zadaje dio (glavni) tablice u kojemu su ostala polja
(podaci)
 Primjer uporabe navedenih oznaka je na slijedećem
slajdu


2012. / 2013.

17

…dodatne mogućnosti tablica
<table>
<td>3</td>
<caption>Popis inventara i potreba
</tr>
u učionici broj 14.</caption>
</tfoot>
<colgroup class="plavi" />
<tbody>
<colgroup span="2" class="zuti" />
<tr>
<thead>
<td>Projektor</td>
<tr>
<td>1</td>
<th
<td>1</td>
scope="col">Sredstvo</th>
</tr><tr>
<th scope="col">Stanje</th>
<td>Zastor</td>
<th scope="col">Potreba</th>
<td>0</td>
</tr>
<td>2</td>
</thead>
</tr>
<tfoot>
</tbody>
<tr>
</table>
<td>Ukupno</td>
<td>1</td>

2012. / 2013.

18

Slike na stranici
 Gotovo svaka web stranica sadrži i slike
 Sliku ubacujemo pomoću neparne oznake img
 Obavezan je atribut src kojim zadajemo adresu
(najčešće relativnu) slike koju želimo prikazati
 Nisu obavezni, ali su poželjni i slijedeći atributi:
» width – širina slike u pikselima
» height – visina slike u pikselima
» alt – kratki opis (naslov) slike, bit će prikazan ako iz bilo kojeg
razloga nije moguće prikazati sliku

 Primjer:
<img src=“slike/prva.jpg” width=“100” height=“70”
alt=“Dinamo – Hajduk: 0 – 0” />

2012. / 2013.

19

Strukturni elementi stranice
 S dosadašnjim znanjem ne možemo lijepo rasporediti
elemente na stranici niti organizirati njen sadržaj.
 Da bismo to mogli potrebno je poznavati slijedeće
oznake:
 <div> i </div> - zadaju pravokutno područje u kojega
možemo umetnuti bilo koji drugi sadržaj
 Sav vidljivi sadržaj na stranici obično je organiziran u
nekoliko div oznaka
 Ako nije drugačije odreĎeno css-om, granice i pozadina
div elementa nisu vidljivi, a širina mu je preko cijelog
dostupnog područja

2012. / 2013.

20

Strukturni elementi stranice
 <span> i </span> zadaju element kojim se najčešće
služimo kako bismo obuhvatili neki dio teksta i omogućili
zadavanje nekog oblikovanja (css stila) na njega
 Da bismo omogućili oblikovanje div i span elemenata
najčešće im dodjeljujemo atribute id (div) ili class (span i
div)
 Primjeri:
<div id=“red”><p>Ovo je odlomak u crvenom div-u.</p></div>
<p>Molimo unesite ispravno <span class=“red”>ime</span>.</p>


2012. / 2013.

21

Blok i linijski elementi
 Gotovo sve html elemente dijelimo na blok ili linijske
 Blok (Block) elementi:
»
»
»
»

Zauzimaju maksimalnu dostupnu širinu
Sadržaj im započinje (i završava) novim retkom
Unutar sebe mogu sadržavati druge blok ili linijske elemente
Najčešći blok elementi: div, h1 do h6, p, ul, ol, dl, table, form,…

 Linijski (Inline) elementi:
» Zauzimaju samo toliko širine koliko je potrebno
» Nema prelaska u novi red na početku niti na kraju elementa
» Ne mogu unutar sebe sadržavati blok elemente, ali mogu druge
linijske elemente.
» Najčešći linijski elementi: a, span, img, br,…


2012. / 2013.

22

Primjer blok i linijskih elemenata








Kod 1:
<p>Just wait a minute! <span class=“red”>You want a question that goes with
the answer for 42? </span>Well, how about what's six times seven?</p>
Rezultat 1:

Kod 2:
<p>Just wait a minute! <div class=“red”>You want a question that goes with the
answer for 42? </div>Well, how about what's six times seven?</p>
Rezultat 2:


2012. / 2013.

23

Specijalni HTML znakovi
 Neke znakove nije jednostavno napisati u HTML-u jer ih
interpreter smatra dijelom sintakse
 Ipak, možemo ih zadati pomoću slijedećih kratica
(nepotpun pregled):
»
»
»
»
»
»

  razmak, sad znamo kako ubaciti više od jednog!
" navodnici
' apostrof
< i > znakovi manje od ( < ) i veće od ( > )
© znak za copyright ( © )
® registered trademark ( ® )

 Npr za ovo: © “webgupa” tš treba napisati kod:
© "webgrupa" tš

2012. / 2013.

24

Zaključak
 Ovo je vrlo kratki i nepotpuni pregled HTML oznaka,
osim navedenih koje su često korištene postoje i mnoge
druge
 Ovdje nismo spomenuli oznake za rad s obrascima, o
njima u nekom od slijedećih poglavlja
 Potpunije preglede svih html oznaka možete pronaći na:
» http://www.quackit.com/html_5/tags/
» http://www.w3schools.com/tags/default.asp
» Ili jednostavno zaguglajte “html tags” 


2012. / 2013.

25

HTML oznake

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to HTML oznake

Similar to HTML oznake (7)

HTML oznake