Upload
zeljko-vidovic
View
212
Download
3
Embed Size (px)
DESCRIPTION
Upravljanje mrezama i servisima - html tabele
Citation preview
5/24/2018 Html tabele
1/21
JAVNA USTANOVA SREDNJOKOLSKI CENTAR
JOVAN CVIJI
MODRIA
MATURSKI RAD
IZ PROGRAMIRANJE I PROGRAMSKI JEZICI
TEMA: TABELE U HTML-u
Mentor: Uenik:
Prof. Rajko Miljevi Marijana Koji IV-5
Modria,kolske 2013/2014. Godine
5/24/2018 Html tabele
2/21
2
SADRAJ
SADRAJ........................................................................Error! Bookmark not defined.UVOD ............................................................................................................................... 3KAKO RADE HTML TABELE? .................................................................................... 4ATRIBUTI ....................................................................................................................... 6TABELE ZA FORMATIRANJE DOKUMENTA .......................................................... 8irina tabele i polja........................................................................................................... 9TABELE ZA PRIKAZ PODATAKA .............................................................................. 9IRINA TABELE ............................................................................................................ 9PRIMJER TABELE ....................................................................................................... 10Izbornici .......................................................................................................................... 12
Primjer 6: .............................................................................................................. 13OKVIRI .......................................................................................................................... 14
Primjer 7: .............................................................................................................. 15Primjer 8: .............................................................................................................. 16
ZAKLJUAK................................................................................................................. 18LITERATURA ............................................................................................................... 19STRANA ZA UPIS PODATAKA ................................................................................. 20ODBRANA MATURSKOG RADA .............................................................................. 21
5/24/2018 Html tabele
3/21
3
UVOD
U ovom tekstu prvo emo objasniti ta je HTML, zatim prelazimo na tabele i rad
sa tabelama u HTML-u
HTML (HyperText Markup Language) predstavlja, uz kaskadne stilove (CSS),
grafiku i skriptne jezike, osnovnu web tehnologiju za izradu web stranica. Hipertekst je
tekst koji se prikazuje na zaslonu raunara i koji je hipervezom povezan s nekim drugim
tekstom u istom ili nekom drugom dokumentu. Markup jezik nije programski jezik koji
moe izvravati naredbe, nego jezik kojim opisujemo strukturu dokumenta. HTML-om
emo primjerice opisati da naa web stranica sadri naslove teksta, tekstualne odlomke,
slike ili video.
HTML tabele pojavljuju se prvi puta 1996 kao nadogradnja HTML 2.0 standarda,
opuisane u dokumentu RFC 1942 ( ftp://ds.internic.net/rfc/rfc1942.txt ), a 1997 su
ukljuene kao sluebeni dio HTML 3,2 specifikacije ( http://www.w3.org/TR/REC-
html32 ). Zamiljene su kao nain prikazivanja podataka organizovanih u retke i stupce
u HTML dokumentima. Tabele mogu sadravati tekst,brojeve,slike,linkove,forme,pa i
druge tabele. U ovom radu prikazati emo razne mogunosti u upotrebi HTML tabela,
te mogunosti alternative za neka od podruija primjene.
5/24/2018 Html tabele
4/21
4
KAKO RADE HTML TABELE?
Tabela = dvodimenziona matrica iji se elementi nazivaju elije (engl.cell).
elija moe sadrati razliite informacije:
Brojeve
Tekst
Boje
Liste
Hiperveze
Slike,itd.
Tabela se sastavlja tako to se opisuju redom njeni redovi (engl.row) i sadraj svake
elije u redu. Tabela se opisuje uz pomo sloenog taga table koja moe sadrati vie
atributa:
border(okvir, ram) - koji opisuje irinu okvira tabele;
cellspacing- koji opisuje irinu linije koja razdvaja dve elije;
cellpadding- koji opisuje prostor oko sadraja elije (margine);
width- koji opisuje ukupnu irinu tabele.
U daljem tekstu objasnicemo detaljno sve atribute prema HTML 3.2 specifikaciji
HTML tabelestruktura. Tabele se vie ne koriste za izradu strukture web stranice jer
je tu zadau preuzeo css.HTML tabelaje upisana izmeu poetne i zavrne oznake
elementa. Tablica moe imati eljeni broj redaka a svaki redak upisujemo
izmeu poetne i zavrne oznake elementa.Svaki redak ima jednaki broj elija koje
omeujemo oznakom elementa .... HTML tabele - osnovni elementi.
Oznaavanje poetka i krajatabele: ...
Poetak i kraj dijela gdje se nalazi zaglavlje stupaca: ...
Poetak i kraj zaglavlja stupaca: ...
HTML tablica definira se izmeu para HTML tagova i .
5/24/2018 Html tabele
5/21
5
Tablica moe sadrati proizvoljan broj redaka omeenih* i tagovima. U
svakom retku nalazi se jednak broj elija omeenih sa i (podatkovne
elije) ili i (elije zaglavlja). Svaka elija moe sadravati bilo koji
HTML kod koji se moe nalaziti u BODY dijelu HTML dokumenta, ukljuujui I Drugu
tabelu, elije zaglavlja nisu ni po emu razliite od ostalih, na pregledniku je da odlui
da li e ih posebno istaknuti ili ne. Veina grafikihpreglednika sadraj elija zaglavlja
prikazuje masnim slovima (bold). Tabela moe sadravati i
par tagova, koji omeuje* potpis ili naslov tabele.
Primjer jedostavne tabele:
Pr imjer 1.
JMBAGOcjena p i smenogOcjena usmenog
0030390954
0012345655
U ovom jedonstavnom primjeru vidimo i upotrebu dva atributa. Atributi su dodatne
kljune rijei koje se navode unutar nekog od HTML tagova, i slue za mijenjanje
osnovnog znaenja taga ili navoenje potrebnih parametara. Kod taga
upotrebljen je BORDER atribut. Ovaj atribut odreuje debljinu ruba oko tabele i izmeu
njenih elija. Ako nije specificiran, tabela se iscrtava bez vidljivih rubova (ekvivalentno
ORDER="0"). Drugi upotrebljen atribut je u tagu. ALIGN kae da
elimo da se potpis prikazuje ispod tablice. Ako nije naveden, preglednih potpis
ispisuje iznad tabele. Poetak i kraj tijela stranice unutar kojeg se nalazi podatci:
...
5/24/2018 Html tabele
6/21
6
ATRIBUTI
Prema HTML 3.2 specifikaciji, tagovi koji ine tabelu mogu sadravati slijedee
atribute:
ALIGN horizontalna pozicija tabele u odnosu na prozor preglednika. Moe
poprimiti vrijednosti "left", "center" ili "right". Podrazumijevana vrijednost je "left".
WIDTHpredloena irina tabele. Ovaj parametar je samo naputak pregledniku
kako bi trebalo iscrtati tabelu. Preglednik ga u odreenim sluajevima moe ignorisati ili ne
potovati. irina moe biti zadanaapsolutnom vrijednosu u pikselima (npr. WIDTH=212)
ili relativnom vrijednosu u postotcima irine prozora preglednika, okvira ili elije koja
sadri tabelu (npr. WIDTH="100%"). Ako nije naveden, potrebna irina tabele se
automatski odreuje prema njenom sadraju.
BORDER debljina ruba oko tabele i elija u pikselima. Podrazumijevana
vrijednost je "0".
CELLSPACINGrazmak izmeu susjednih rubova elija u pikselima.
Podrazumijevana vrijednost je "2".
CELLPADDINGrazmak izmeu ruba elije i njenog sadraja u pikselima.
Podrazumijevana vrijednost je "1".
:
ALIGNpoloaj potpisa u odnosu na tabelu. Moe poprimiti vrijednosti"top" ili
"bottom". Podrazumijevana vrijednost je "top".
:
ALIGN vodoravno poravnavanje sadraja elija unutar cijelog reda. Moe
poprimiti vrijednosti "left", "center" ili "right". Podrazumijevana vrijednost je "left".
5/24/2018 Html tabele
7/21
7
VALIGNokomito poravnavanje sadraja elija unutar cijelog reda. Moe
poprimiti vrijednosti "top", "middle" ili "bottom". Podrazumijevana vrijednost je "top".
:
NOWRAPatribut bez parametara. Upuuje preglednik da ne prelama tekst
unutar elije, osim u sluaju da se to eksplicitno trai
(npr.
ili
tagovima).
ROWSPANbroj redova kroz koji se protee ova elija. Omoguuje
kreiranje nepravilnih tabela. Slijede_i red (ili redovi) treba sadravati jednueliju manje.
COLSPANbroj stupaca kroz koji se protee ova elija. Omoguuje kreiranje
nepravilnih tabela. Slijedei stupac (ili stupci) treba sadravati jednu eliju manje.
VALIGN okomito poravnavanje sadraja unutar elije. Moe poprimiti
vrijednosti "top", "middle" ili "bottom". Ako nije naveden, koristi se vrijednost VALIGN
atributa za cijeli red.
WIDTHpredloena irina elije. Kao i irina cijele tabele, ovo slui samo kao
naputak pregledniku. U pravilu, preglednik potuje zadanu brojku, osim usluajevima kada
to stvara konflikt sa potrebnim irinama ostalih elija u danom stupcu. irina moe biti
zadana apsolutnom vrijednosu u pikselima (npr. WIDTH=50) ili relativnom vrijednosu u
postotcima irine cijele tabele (npr. WIDTH="30%"). Ako nije naveden, potrebna irina
elije se automatski odreuje prema njenom sadraju.
HEIGHTpredloena visina elije. U pravilu, preglednik potuje zadanubrojku,
osim u sluajevima kada to stvara konflikt sa potrebnim irinama ostalih elija u danom
retku. Takoe moe biti zadana u postotcima ili apsolutnom vrijednou u pikselima.
Preglednici poput Microsoft Internet Explorera koristili su i neke dodatne atribute. Neki od
njih su kasnije ukljueni u HTML 4.0 specifikaciju. HTML 4.0 takoedodaje neke nove
tagove i atribute, uglavnom namjenjene lakem prikazivanju na nevizualnimpreglednicima.
Mogue je grupisanje redaka i stupaca tabele koritenjem , ,
i tagova. Takoe je dodan tag koji moe
sadrati opis sadraja tabele, za preglednike koji nisu u mogunosti iscrtati tabelu. HTML
4.0 uvoenjem stilova (cascading style sheets) insistira na odvajanju informacija o sadrajudokumenta od onih o formi. U skladu sa tim su mnogi atributi za formatiranje tabela poput
5/24/2018 Html tabele
8/21
8
ALIGN, VALIGN, BGCOLOR i slinih proglaenizastarjelima, i preporuujese koritenje
stilova (CSS) za formatiranje tabela. Ovo su samo neke od najbitnijih promjena, kompletan
opis razlika izmeu HTML 3.2 i HTML 4.0 specifikacija je izvan opsega ovog rada. Sa
izuzetkom CSS-a, noviji preglednici jo uvijek ne implementiraju veinu mogunosti koje
dodaje HTML 4.0
TABELE ZA FORMATIRANJE DOKUMENTA
HTML originalno nije zamiljen kao jezik kojim bi bilo mogue precizno
formatiranje dokumenata. Potreba za takvim mogunostima bila je velika, pa su
kreativni web-dizajneri objeruke doekali pojavu tablica u HTML 3.2 specifikaciji, I
poeli ih koristiti za prelom teksta. Mogunosti upotrebe su brojne, ukljuujui prelom
teksta na dva, tri ili vie stupaca,kreiranje izbornika za navigaciju, crtanje raznovrsnih
rubova i okvira ili rezanje sloenih grafikih elemenata u manje komade kako bi se
smanjila koliina prenesenih podataka.
Pojavom CSS-a, ovakva upotreba tabela je zastarjela, no mnogi dizajneri je jo
uvijek na veliko korite. Razlog tome jeo navika, a i razlike u iscrtavanju izmeurazliitih preglednika. Veina preglednika tablice prikazuju gotovo identino,a razlike
koje postoje su poznate, kao i naini da ih se izbjegne. CSS je jo uvijek relativno nova
tehnologija, te je potrebno puno vie panje kako bise dobili dokumenti koji izgledaju
jednako u razliitim preglednicima. Bez obzira na to, poeljno je za potrebe
formatiranja dokumenta koristiti CSS. Vei uloeni trud isplatit e se veim
mogunostima, mnogo lakom kasnijom promjenom formatiranja i boljom
pristupanou za korisnike ne-vizualnih preglednika. Za one koji se ipak odluekoristiti tablice za formatiranje slijedi nekoliko korisnih savijeta.
5/24/2018 Html tabele
9/21
9
irina tabele i polja
Ovdje je opet poeljno zadati irinu tabele i polja u postotcima, kako bi korisnici
mogli bez potekoa gledati stranicu u prozorima razliitih irina. Ponekad nekigrafiki
element dizajna zahtjeva fiksne dimenzije tablice. Tada je potrebno odrediti dimenzije
tako da stranica stane i na monitore sa najmanjom razluivou. Danas je relativno
sigurno za pretpostaviti da je to 800x600, pa bi shodno tome stranice fiksne irine
trebale biti iroke ne vie od oko600-700 piksela.
TABELE ZA PRIKAZ PODATAKA
Pri koritenju tabelavalja voditi rauna o tome da HTML nije zamiljen kao jezik
za formatiranje teksta. Iako postoje brojni atributi kojima moemo uticati na izgled
tabela, njihovo ponaanje nije strogo definisano, i mogu imati vrlo razliite efekte u
razliitim preglednicima.
IRINA TABELE
Trebalo bi izbjegavati zadavanje vrijednosti za irinu tablice u pikselima. Osim
to postoji mogunost da razliiti preglednici razliito interpretiraju zadanu vrijednost,
moramo voditi rauna i o tome da korisnici gledaju na dokument naekranima razliitih
razluivosti, i u prozorima razliitih veliina. Zbog toga moe doi do neeljenih pojava,
kao tabela koja po irini ne stane u prozor preglednika pa prisiljava koris nika na
skrolanje. Ukoliko je neophodno zadati irinu tabele, poeljno je napraviti to u
postotcima.
5/24/2018 Html tabele
10/21
10
PRIMJER TABELE
Poetak i kraj retka tabele: ...
Poetak i kraj elije s podatcima: ...
Primjer tabele u HTML-u:
Naziv 1
Naziv 2
elija 1 u 1. retku
elija 2 u 1. retku
elija 3 u 2. retku
elija 4 u 2. retku
5/24/2018 Html tabele
11/21
11
Izgled gornjeg primjera na web stranici:
Naziv 1 Naziv 2
elija 1 u 1. retkuelija 2 u 1. retku
elija 3 u 2. retkuelija 4 u 2. retku
Primjer 1Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije elije u jednom redu).
Kod Objanjenje Ispis na ekran
Dodavanje tabele
Tabela sa jednim redom idvije elije bez teksta.
Primjer 2.Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije elije u jednom redu). Tekst u prvojeliji je jedan a u drugoj broj 2.
Kod Objanjenje Ispis na ekran
Dodavanjetabele2
jedan 2
Tabela sa jednim redom idvije elije bez teksta. jedan 2
Primjer 3. Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije elije u jednom redu).
Kod Objanjenje Ispis na ekran
Dodavanjetabele3
12
Svaki red poinje sa TAG-
om (), a svaka
kolona sa TAG-
om().
1 2 3
Druga tabela
1
5/24/2018 Html tabele
12/21
12
3
druga tabela
1
2
3
2
3
Primjer 4. Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije elije u jednom redu).Tekst u prvojeliji je jedan a u drugoj broj 2
Kod Objanjenje Ispis na ekran
Dodavanjetabele4
red 1, elija 1red 1, elija 2
red 2, elija 1red 2, elija 2
Tabela sa jednim redom i
dvije elije bez teksta.Nije navedena irinatabele zato je irokakoliko je potrebno za ispisteksta u tabli.
red 1,
elija 1red 1,
elija 2
red 2,
elija 1red 2,
elija 2
Izbornici
Pomou tabela mogue je jednostavno oblikovati navigacijske izbornike. Svako polje
tabele predstavlja jedan "dugme". Velika prednost nad koritenjem slika za "dugmad" je
mogunost promjene teksta bez koritenja nekog od programa za crtanje, te daleko
kraa vremena uitavanja. Koritenjem ONMOUSEOVER atributa moemo
jednostavno promijeniti boju polja preko kojeg korisnik prelazi miem, i tako
signalizirati da se radi o linku. Koritenjem ONCLICK atributa moemo promijenitiizgled "dugmeta" prilikom klika, i tako stvoriti zgled stisnutog "dugmeta".
5/24/2018 Html tabele
13/21
13
Primjer 6:
opcija 1
opcija 2
opcija 3
opcija 4
opcija 5
5/24/2018 Html tabele
14/21
14
Ova tehnika koritena je i za izradu glavnog izbornika ovog dokumenta.
OKVIRI
Preglednici tipi_no iscrtavaju okvir tablice sa "3d" efektom; tablica izgleda kao da
je izdignuta od povrine dokumenta, a sama polja tablice su udubljenja u tojpovrini.
Koritenjem ugraenih tabelai CELLSPACING atributa mogue je kreirati raznobojne
okvire, a dodavanjem redaka i stupaca na rubove tablica mogue je ubaciti grafike
elemente kao okvire.
5/24/2018 Html tabele
15/21
15
Primjer 7:
Iscrtkani okvir postignut koritenjem ugnije_enih tablica.
Ime
Prezime
JMBG
Marijana
Koji
0907995125000
Goran
Koji_
5/24/2018 Html tabele
16/21
16
Primjer 8:
--> Moe se postaviti slika
Tablica sa grafikim okvirom. Iako je okvir nacrtan,
tablica nije fiksne veliine nego mijenja veliinu zajedno
sa prozorom preglednika.
5/24/2018 Html tabele
17/21
17
5/24/2018 Html tabele
18/21
18
ZAKLJUAK
Tehnike opisane u prolom dijelu dokumenta vrlo su efektne, no za postizanje
istih efekata puno je bolje koristiti stilove. Ne-vizualni preglednici mogu imati puno
problema sa brojnim dodatnim poljima i ugraenim tabelakoje ne sadre korisni sadraj
nego samo slue za formatiranje. Uz dobro definiranu logiku strukturu dokumenta,
koritenjem stilova mogue je vrlo jednostavno promijeniti njegov izgled, i to bez
mijenjanja samog dokumenta. S druge strane, tabele su i dalje neizostavne za prikaz
podataka. Kod primjena te vrste treba voditi rauna o raznim vrstama preglednika, i
koristiti atribute i tagove za dodatni opis sadraja (npr. koristiti umjesto
za zaglavlje, koristiti i tagove, te ABBR, TITLE i
HEADERS atribute u poljima) kako bi ne-vizualni preglednici to lake prikazali
sadraj tabele.
5/24/2018 Html tabele
19/21
19
LITERATURA
1. HTML I Web dizajn, Mikro knjiga ,Osborne.Beograd, (2010).
2. DREAMWEAVER MX, Mikro knjiga,Beograd , (2004).
3. RAD SA TABELAMA , Biljana Jovanovi,Matematikifakultet,Univerzitet u Beogradu http://poincare.matf.bg.ac.rs/ (2013).
4. OSNOVE HTML-a ,prof. Duko Popovi,http://www.osnoveprogramiranja.com/
5. HTML PRIRUNIK I ZADACI , http://www.znanje.org/
5/24/2018 Html tabele
20/21
20
STRANA ZA UPIS PODATAKA
5/24/2018 Html tabele
21/21
21
ODBRANA MATURSKOG RADA
Ocjena maturskog rada: ( ),____________________________________________.
Pitanja: 1.____________________________________________________________.
2.____________________________________________________________.
3.____________________________________________________________.
Ocjena na odbrani rada: ( ),___________________________________________.
Komisija: ____________________________________________________________.
Predsjednik
____________________________________________________________.Ispitiva
____________________________________________________________.lan