Embed Size (px)
DESCRIPTION
HyperText Markup Language HTML - Tablice Tables
Citation preview
SVEUČILIŠTE JURJA DOBRILE U PULI
ODJEL ZA ODGOJNE I OBRAZOVNE ZNANOSTI
PULA
ANA BRCKOVIĆ
HyperText Markup Language (HTML) – Tablice (Tables)
REFERAT
PULA, 2015.
SVEUČILIŠTE JURJA DOBRILE U PULI
ODJEL ZA ODGOJNE I OBRAZOVNE ZNANOSTI
PULA
HyperText Markup Language (HTML) – Tablice (Tables)
REFERAT
Predmet: Izrada web stranica
Mentor: doc.dr.sc. Alen Jakupović
Studentica: Ana Brcković
Pula, prosinac, 2015.
- 1 -
Sadržaj
Sadržaj ..................................................................................................................................................... 1
1. UVOD ................................................................................................................................................. 2
2. ISHODI UČENJA ............................................................................................................................... 3
3. TABLICE ............................................................................................................................................ 4
3.1 Struktura tablice ............................................................................................................................ 4
3.2 Oblikovanje tablice ........................................................................................................................ 5
3.3 Vrste tablica ................................................................................................................................... 6
4. PROVJERA DOSTIGNUĆA ISHODA UČENJA.............................................................................. 9
LITERATURA ...................................................................................................................................... 12
- 2 -
1. UVOD
Internet je svjetska globalna mreža koja povezuje mnoga računala s namjerom razmjene
podataka i uporabe raznih multimedijskih sadržaja, usluga i servisa dostupnih u obliku web
stranica temeljenih na HTML jeziku.
HTML (eng. Hyper Text Markup Language) je jezik kojim opisujemo izgled web stranica
pomoću HTML oznaka (eng. tag). HTML oznake u tekstualnom obliku određuju položaj i način
prikazivanja elemenata web stranica.
HTML jezik zapravo je osnova svake web stranice, a sama web stranica je pojedinačni HTML
dokument. Web stranica sastavljena je od različitih elemenata kao što su tekstovi, slike,
poveznice, ali i tablice koje su upravo tema ovoga referata.
Kako i ostalim elementima HTML dokumenta, tako je i tablicama važno posvetiti pažnju
prilikom analize i razumijevanja iste. One nisu složene za oblikovanje, ali zahtijevaju određeno
organiziranje.
Upravo zbog velike zastupljenosti i proširenosti izrade web stranica, u ovom ću referatu obraditi
osnovne pojmove i oznake vezane uz tablice, kao jedne od elemenata HTML dokumenta.
Osvrnuti ću se na sam pojam tablice, strukturu, a zatim i opisati načine na koji se tablica može
oblikovati. Također, vidjeti ćemo da postoje dvije vrste tablice po njenoj strukturi, te ćemo sve
potkrijepiti primjerima.
Cilj ovog referata je upoznati čitatelje sa pojmom tablice u HTML dokumentu, osposobiti ih za
izradu web stranice u kojoj će primjenjivati različite HTML kodove za kreiranje tablica.
Također, cilj je da čitatelj dobije sposobnost razumijevanje čitanja izvornog koda na već
kreiranim HTML tablicama.
- 3 -
2. ISHODI UČENJA
Ishodi učenja koje će čitatelj moći dostići završetkom čitanja ovoga referata navedeni su u
tablici 1.
RAZINA ISHODI UČENJA
ZNANJE
1. Definirati značenje pojma tablica kao elementa HTML
dokumenta.
2. Nabrojati osnovne elemente i atribute za definiranje
strukture tablice.
RAZUMIJEVANJE
1. Objasniti važnost tablica za izradu web stranica.
2. Objasniti razliku između jednostavnih i složenih tablica.
PRIMJENA
1. Primijeniti atribute cellspacing i cellpadding prilikom
definiranja tablice.
2. Primijeniti atribute colspan i rowspan prilikom definiranja
reda u tablici.
ANALIZA
1. Razlikovati jednostavne i složene tablice.
2. Izdvojiti atribute korištene za definiranje tablice.
SINTEZA
1. Kreirati složenu tablicu ugnježđivanjem.
2. Kreirati tablicu pomoću atributa za definiranje tablice.
VREDNOVANJE
1. Procijeniti važnost uporabe tablica kod izrade web stranica.
2. Usporediti oba načina kreiranja složenih tablica.
Tablica 1. Postavljeni ishodi učenja
- 4 -
3. TABLICE
Tablice su strukturirani elementi koji se na HTML stranicama koriste za tablični prikaz
podataka. Služe kako bi podatke rasporedili u mrežu i učinili njihovu analizu što
jednostavnijom. Upravo u HTML dokumentu one imaju ulogu kontrole rasporeda na stranici.
Odnosno, osim što služe za prikaz strukturiranih podataka, one pozicioniraju sadržaj na točno
određeno mjesto na stranici. [1] Ubacivanjem teksta, slika i ostalih elemenata u ćelije tablice
može se lakše i preciznije pozicionirati elemente. [2]
3.1 Struktura tablice
HTML tablica sastoji se od tri elementa:
Granice – četiri granične linije koje čine pravokutnik
Ćelije – prostor unutar četiri granične linije
Raspon ćelija – unutar četiri linije koje okružuju ćeliju, možemo dodavati ili brisati
zidove ćelije [1]
Svaku tablicu definiraju tri osnovne komponente od kojih svaka ima svoj početni i završni dio:
Tablica <table>, oznaka za početak i kraj tablice, a nalazi se uvijek između <body>
tagova u dokumentu.
Red u tablici <tr>, oznaka za redak tablice (eng. table row) koji je uvijek unutar oznake
<table>.
Ćelija tablice <td>, oznaka za ćeliju unutar retka (eng. table data), nalazi se uvijek
unutar oznake <tr>. [1]
U skladu s time, primjer sintakse najjednostavnije tablice izgledao bi ovako:
<table border=''1''>
<tr>
<td> Ovo je sadržaj ćelije </td>
</tr>
</table>
Možemo primijetiti da smo koristili atribut border da bismo definirali debljinu rubova tablice
jer u protivnome tablica ne bi bila vidljiva i naš bi tekst izgledao kao da tablice uopće nema.
- 5 -
Vrijednost border atributa definira debljinu rubne linije u pikselima, npr. border=''3''
postavlja liniju debljine 3 px, a border=''0'' isključuje rubnu liniju. [1]
Tablica može imati željeni broj redaka, a svaki redak upisujemo između početne i završne
oznake <tr> elementa. Svaki redak ima jednaki broj ćelija koje omeđujemo oznakom elementa
<td>...</td>. [3]
Tablice mogu sadržavati i zaglavlja. Ako umjesto oznake <td> koristimo oznaku <th>
definirati ćemo zaglavlje stranice. Ovaj tag daje pregledniku na znanje da je polja zaglavlja
potrebno istaknuti. U skladu s time, tekst napisan u zaglavlju prikazat će se kao podebljan. [3]
3.2 Oblikovanje tablice
Tablični elementi imaju brojne atribute. Određenim atributima postižemo različiti učinak
ovisno o tome hoćemo li ih dodati oznaci tablice, retka ili ćelije.
Za svaku tablicu možemo definirati i više različitih atributa. Najčešće korišteni atributi
prikazani su u tablici 2. [4]
ATRIBUT OPIS ATRIBUTA
align poravnanje tablice u odnosu na tijelo dokumenta ili roditeljski
element u kojem je ugniježđena (vrijednost: left/right/center)
bgcolor određivanje pozadinske boje
border obrubi; debljina linije izražena u pikselima
cellpadding razmak između unutarnjeg ruba ćelije i sadržaja unutar ćelije
cellspacing razmak među ćelijama
height visina tablice; izražena u postotcima ili pikselima
width širina tablice; izražena u postotcima ili pikselima
Tablica 2. Najčešće korišteni atributi i opis atributa za tablice
Važno je istaknuti atribute cellpadding i cellspacing koje možemo koristiti za prazan prostor
između ćelija. [5] Navedeni atributi koriste različite tehnike kako bi ostavili prozor između
ćelija:
Atribut cellpadding dodaje prostor unutar ćelije
- 6 -
Atribut cellspacing dodaje prostor između ćelija
I ćelijama možemo definirati posebne atribute. Najčešći atributi prikazani su u tablici 3. [4]
ATRIBUT OPIS ATRIBUTA
align horizontalno poravnanje sadržaja na razini pojedine ćelije (vrijednost:
left/right/center)
valign vertikalno poravnanje sadržaja na razini pojedine ćelije (vrijednost:
top/middle/bottom)
bgcolor pozadinska boja ćelije
colspan spajanje ćelija na razini reda
rowspan spajanje ćelija na razini stupca
width širina ćelije; izražena u postotcima ili pikselima
Tablica 3. Najčešće korišteni atributi i opis atributa za ćelije
Ako želimo da jedna ćelija ima više redaka i stupaca potrebno je dodati atribut koji će
pregledniku govoriti u kojoj ćeliji će se grananje događati. Broju redaka ili stupaca koje želimo
da ćelija prikazuje odgovara broj atributa. To nazivamo premošćivanjem, a ono nam omogućuje
da se sadržaj jedne ćelije rasporedi preko nekoliko ćelija ignorirajući pritom zidove ćelija. [1]
Atribut colspan dodajemo odabranoj ćeliji i definiramo broj stupaca kroz koji se ona
proteže u situaciji kada želimo da se ćelije protežu kroz nekoliko stupaca.
Atribut rowspan dodajemo odabranoj ćeliji i definiramo kroz koliko redaka se ona
proteže u situaciji kada želimo definirati raspon ćelije kroz nekoliko stupaca. [2]
3.3 Vrste tablica
Ovisno o načinu na koji su strukturirane razlikujemo jednostavne i složene tablice u HTML
dokumentu.
Sve tablice koje se sastoje od nekoliko redova i jednakog broja ćelija unutar svakog reda koji
zajedno tvore stupce, a pritom su jednostavno strukturirane, nazivamo jednostavnim tablicama.
Pomoću <caption> elementa tablicama možemo dodavati naslove koji će biti prikazani
podebljano, iznad ili ispod tablice i poravnati u odnosu na tablicu ovisno o dodanim atributima.
[5]
- 7 -
Primjer sintakse za jednostavnu tablicu:
<table width=''50%'' border=''1'' align=''center''>
<caption> Naslov tablice </caption>
<tr>
<th> Stupac 1 </th>
<th> Stupac 2 </th>
</tr>
<tr>
<td< 1 </td>
<td< 2 </td>
</tr>
<tr align=''left'' valign=''top''>
<td< 3 </td>
<td< 4 </td>
</tr>
</table>
Tablice koje u svojoj strukturi imaju u pojedinim redovima i/ili stupcima različiti broj ćelija
nazivamo složenim tablicama. [5] Dva su načina kreiranja složenih tablica1:
ugnježđivanje tablica
spajanje ćelija na razini reda i/ili stupca
Primjer sintakse za ugnježđivanje tablica:
<table width=''50%'' border=''1'' align=''center''>
<tr>
<td> Stupac 1 </td>
<td>
<table width=''100%'' border=''1''>
<tr>
<th> Red 1 </th>
</tr>
<tr>
<td> Red 2 </td>
</tr>
<tr>
<td> Red 3 </td>
</tr>
1 Dodatni primjeri mogu se naći na sljedećoj poveznici: http://web.zpr.fer.hr/ergonomija/2003/fox/ergonomija.pdf
- 8 -
</table>
</td>
<td> Stupac 3 </td>
</tr>
</table>
Primjer sintakse za spajanje ćelija na razini stupca:
<table width=''50%'' border=''1'' align=''center''>
<caption> Naslov tablice </caption>
<tr>
<th> Stupac 1 </th>
<th> Stupac 2 </th>
<th> Stupac 3 </th>
</tr>
<tr>
<td align=''center'' colspan=''3''>1</td>
</tr>
<tr>
<td< 2 </td>
<td< 3 </td>
<td< 4 </td>
</tr>
</table>
HTML ima nekoliko dodataka elementima koji pomažu da se tablice, kojima se do sada
najčešće definirala logička i fizička struktura sadržaja, pojavljuju dio po dio. S druge strane,
HTML danas potiče razvojne programere i dizajnere web stranica da napuste korištenje tablica
za definiranje strukture i da umjesto njih koriste liste stilova u kombinaciji s nekim
jednostavnijim HTML elementima namijenjenim pozicioniranju i definiraju fizičke strukture.
[5]
- 9 -
4. PROVJERA DOSTIGNUĆA ISHODA UČENJA
U tablici 2. su prikazani zadaci kojima se mogu provjeriti razine dostignuća ishoda učenja
navedenih u tablici 1.
RAZINA ISHODI UČENJA
ZNANJE
1. Definirati značenje pojma tablica kao elementa HTML
dokumenta.
Što su tablice u HTML dokumentu?
______________________________________________
2. Nabrojati osnovne elemente i atribute za definiranje
strukture tablice.
Navedi osnovne elemente i atribute za definiranje strukture
tablice?
______________________________________________
RAZUMIJEVANJE
3. Objasniti važnost tablica za izradu web stranica.
Zašto su tablice važne za izradu web stranica?
______________________________________________
4. Objasniti razliku između jednostavnih i složenih tablica.
Koja je razlika između jednostavnih i složenih tablica?
_______________________________________________
PRIMJENA
5. Primijeniti atribute cellspacing i cellpadding prilikom
definiranja tablice.
Napiši HTML kod za tablicu koristeći odgovarajući atribut
koji će nam dati više mjesta u tablici između naših podataka i
granica ćelija.
__________________________________________
6. Primijeniti atribute colspan i rowspan prilikom
definiranja reda u tablici.
Napiši HTML kod za tablicu koristeći odgovarajuće atribute
pomoću kojih ćeš definirati kroz koliko stupaca, odnosno
redaka želiš da ti se ćelija proteže.
________________________________________________
- 10 -
ANALIZA
7. Izdvojiti atribute korištene za definiranje tablice.
Iz navedenog primjera izdvoji atribute korištene za
definiranje tablice.
<table border="1" width="100%">
<tr>
<th align="left">Prikaz</th>
<th align="right">Kod</th>
</tr>
<tr align="center">
<td>č</td>
<td>č</td>
</tr>
<tr align="center">
<td>ć</td>
<td>ć</td>
</tr>
</table>
8. Razlikovati atribute na razini tablice i atribute na razini
ćelije.
Iz gore navedenog primjera izdvoji atribute koji su korišteni
na razini tablice, a zasebno one koji su korišteni na razini
ćelije.
SINTEZA
9. Kreirati složenu tablicu ugnježđivanjem.
Koristi se načinom ugnježđivanja za kreiranje složene tablice
po izboru.
10. Kreirati tablicu pomoću atributa za definiranje tablice.
Koristi se s najmanje četiri atributa prilikom kreiranja tablice
po izboru.
- 11 -
VREDNOVANJE
11. Procijeniti važnost uporabe tablica kod izrade web
stranica.
Zašto je važno kreiranje tablica prilikom izrade web stranica?
________________________________________________
12. Usporediti oba načina kreiranja složenih tablica.
Koji način kreiranja složenih tablica smatrate adekvatnijim i
zašto?
_________________________________________________
Tablica 4. Zadaci za provjeru dostignuća postavljenih ishoda učenja
- 12 -
LITERATURA
[1] Šimec, A. (2011). <Osnove> #HTML „XHTML“ /*CSS </Osnove>. Tehničko
veleučilište u Zagrebu.
[2] Stojanov, T. (2013). Uvod u (X)HTML i CSS – skripta. Priručnici tehničkog
veleučilišta u Zagrebu.
[3] CARNetLoomen, Osnove HTML-a: Tablice. Preuzeto 7.12.2015 sa:
https://loomen.carnet.hr/mod/book/tool/print/index.php?id=116211
[4] Hayes, D. (2002). Vodič kroz HTML i XHTML. Zagreb: Miš.
[5] Hrnjak, M. (2010). HTML: Priručnik za polaznike, Zagreb: Algebra.
[6] Primjeri sintakse za HTML tablice. Preuzeto 8.12.2015 sa:
http://web.zpr.fer.hr/ergonomija/2003/fox/ergonomija.pdf
