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

2012. / 2013. 2WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević

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


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)


Primjer liste s grafičkim oznakama

HTML kod

<ul>

<li>kupus</li>

<li>kelj</li>

<li>koraba</li>

</ul>

Izgled u pregledniku

• kupus

• kelj

• koraba


Primjer liste s brojevima

HTML kod

<ol>

<li>kupus</li>

<li>kelj</li>

<li>koraba</li>

</ol>


1. kupus

2. kelj

3. koraba


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


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


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>


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.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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

prijava.htmlpoveznica

…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

poveznicaprijava.html

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>


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>


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>

</tr></table>


1 2-3

4-7 5 6

8 9

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 spanodreĎ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 scopekoji može imati vrijednosti row (red), col (stupac), rowgroup (grupa redova), colgroup (grupa stupaca)


…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


…dodatne mogućnosti tablica

<table>

<caption>Popis inventara i potreba u učionici broj 14.</caption>

<colgroup class="plavi" />

<colgroup span="2" class="zuti" />

<thead>

<tr>

<th scope="col">Sredstvo</th>

<th scope="col">Stanje</th>

<th scope="col">Potreba</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Ukupno</td>

<td>1</td>

<td>3</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>Projektor</td>

<td>1</td>

<td>1</td>

</tr><tr>

<td>Zastor</td>

<td>0</td>

<td>2</td>

</tr>

</tbody>

</table>


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” />


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


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>


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,…


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:


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š


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”


http://www.quackit.com/html_5/tags/



http://www.w3schools.com/tags/default.asp




html oznake

Documents