Upload
hrvoje-mikolcevic
View
283
Download
10
Embed Size (px)
Citation preview
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
2012. / 2013. 3WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
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. 4WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
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
2012. / 2013. 5WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
Primjer liste s brojevima
HTML kod
<ol>
<li>kupus</li>
<li>kelj</li>
<li>koraba</li>
</ol>
Izgled u pregledniku
1. kupus
2. kelj
3. koraba
2012. / 2013. 6WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
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>
Izgled u pregledniku
kupus
pun je C vitamina
kelj
izvrstan je na lešo
koraba
nema juhe bez korabe
2012. / 2013. 7WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
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. 8WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
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. 9WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
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
2012. / 2013.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 11
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
2012. / 2013.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 12
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>
2012. / 2013.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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>
</tr></table>
2012. / 2013.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 15
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)
2012. / 2013.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 17
…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>
2012. / 2013.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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.WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 25