HTML merupakan bahasa ibu bagi internet. Tak peduli ASP, PHP, JSP, atau lainnya, semua berangkat dari HTML. Karenanya, penguasaan HTML merupakan hal wajib bagi anda yang ingin membuat halama…Description complète
to learn html(copy from csc)Full description
HTML GUIDE
Full description
Descripción completa
html
Full description
Descrição completa
Full description
Εφαρμογές Πληροφορικής Α' Λυκείου Ασκήσεις HTML
HTML (eng. HyperT HyperText ext Markup Markup Language) Langua ge)
Izvor: w3schools.com
Što je HTML? • HTML je jezik kojim web preglednicima opisujemo izgled naših web stranica, kako bi ih
•
oni mogli ispravno prikazati. HTML nije programski jezik niti su ljudi koji ga
koriste programeri. Njime ne možemo izvršiti nikakvu zadaću, pa čak ni najjednostavniju operaciju oper aciju zbrajanja ili oduzimanja dvaju cijelih
brojeva. broje va. On služi samo za opis naših hipertekstualnih dokumenata i za ništa više od toga.
Što je HTML? • HTML je jezik kojim web preglednicima opisujemo izgled naših web stranica, kako bi ih
•
oni mogli ispravno prikazati. HTML nije programski jezik niti su ljudi koji ga
koriste programeri. Njime ne možemo izvršiti nikakvu zadaću, pa čak ni najjednostavniju operaciju oper aciju zbrajanja ili oduzimanja dvaju cijelih
brojeva. broje va. On služi samo za opis naših hipertekstualnih dokumenata i za ništa više od toga.
Povijest HTML-a • GML-Generalized GML-Generalized Markup Language, IBM, 1969. • SGML-ISO 8879 Standard Generalized Markup • • •
Language, 1986. HTML Version 1(1992-3), osnovnaHTML struktura, hipertekst HTML Version 2(1994), formulari, liste HTML Version Version 3.2(1996-7), tabele, apleti, skripte, CGI programiranje, sigurnost HTML Version 4.x(1998), inline frames XHTML, XML (1998) Extensible Markup Language.
• • • …
HTML Version 1(1992-3) • Definirao ga je 1993. Sir Tim Berners-Lee, ravnatelj World Wide Web Konzorcija (W3C).
• W3C je organizacija koja brine o standardizaciji web tehnologija i razvoju Weba.
Pravila pisanja HTML-a • HTML kôd sastoji se od oznaka (eng. tag) i njihovih atributa, a sve oznake imaju svoj početni i završni dio. Naslov dokumenta ZAGLAVLJE Ovo je minimalni HTML dokument TIJELO
zaglavlje koje može imati nekoliko podelemenata tipa: naslov dokumenta
osnovna adresa preko koje se rješava relativna; nužna ako se dokument ne nalazi na originalnoj lokaciji. javlja browser-u da je dokument indeksni, s kazalima na druge dokumente
pokazuje vezu između ovog dokumenta i nekog objekta na WEB-u
<META> daje informacije o stranici, kao što su ključne riječi
<SCRIPT> sadrži Java ili VB skripta Sadržaj stranice koji se prikazuje u web pregledniku
Naslovi • HTML dopušta definiranje naslova u šest razina i to korištenjem oznake , gdje je n broj od 1 do 6. Tako ćete, na primjer, glavni naslov definirati oznakom
, a podnaslove oznakama od
do
.
Glavni naslov!!!
HTML
Osnove HTML-a
HTML je zanimljiv i lagan!
• HTML automatski dodaje dodatnu praznu liniju prije i nakon „heading“-a.
Poravnanje • Atribut kojim se najčešće mijenjaju svojstva naslova je
align, a može poprimiti vrijednosti left, right i center. U skladu s tim, naslov će biti pozicioniran lijevo, desno ili u sredinu.
Programski alati 3
• Novi redak – na mjestu gdje želimo prekid dodat ćemo oznaku (eng. break). Ta oznaka ne dolazi s nekim od atributa niti ima završni dio. Dobro došli na Programske alate 3 Učimo HTML
Poravnanje odlomka
This is a paragraph.
The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors.
The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors.
Uređivanje teksta
• Vrstu slova (engl. font) moguće je mijenjati unutar HTML dokumenta uz pomoć tag-a i njegovih atributa (COLOR za boju, FACE za vrstu fonta i SIZE za
veličinu slova). Na primjer, na ovaj način: Ovo je običan tekst, a ovo neobičan tekst!
Liste
• Početak i kraj numerirane liste definira se oznakom (eng. ordered list), dok elemente liste definiramo oznakom
(eng. list item), koju koristimo za svaki novi element liste.
• Nenumeriranu listu definiramo • Želimo li promijeniti način na isti način kao i numeriranu, samo umjesto oznake koristiti oznaku
(eng. unordered list).
Numerirane liste
Nenumerirane liste
Definicijske liste
numeriranja elemenata liste, koristit ćemo atribut type. Kod numerirane liste vrijednost atributa type može biti: 1 - arapski brojevi I - rimski brojevi i - "mali" rimski brojevi A - slova a - mala slova npr. …
Href - (eng. hyperlink reference) definira kamo hiperveza vodi - na neki dokument ili datoteku, adresu e-pošte ili na mjesto unutar dokumenta. Name - koristimo za definiranje knjiške oznake, mjesta unutar dokumenta (eng. anchor). Target - određuje mjesto u kojem se hiperveza otvara. _top - otvara link u cijelom browser-ovom prozoru _blank - otvara link u novom browser-ovom prozoru _self - otvara link u istom browser-ovom prozoru ili okviru _parent - otvara link u prethodniku (roditelju) trenutačnog okvira
•
Title - opisuje hipervezu, a on se u obliku savjeta (eng. tip) prikazuje kada pokazivač miša postavimo iznad hiperveze. Vrlo je koristan slijepim osobama, jer njihovi preglednici tada čitaju i opis hiperveze (npr. kod slikovnih hiperveza)
• Možemo definirati i hipervezu koja vodi na knjišku
oznaku neke druge stranice. To činimo tako da iza adrese dokumenta dodamo naziv knjiške oznake. Na primjer: Raspored programa za petak
• Za definiranje hiperveze na adresu elektroničke pošte bit će nam potreban atribut href referada
• Slikovne hiperveze definiramo tako da oznakom
hiperveze omeđimo sliku koju želimo pretvoriti u hipervezu.
-MultimedijaBoje • Svaka boja ima svoj kôd koji se temelji na RGB modelu,
• •
gdje R predstavlja zastupljenost crvene (eng. red ), G zelene (eng. green), a B plave boje (eng. blue), iskazanu brojem u rasponu od 0 do 255, a pisanu u heksadecimalnom sustavu (00 - FF). Imena boja koja možemo koristiti su: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white i yellow. Model po kojemu pišemo HTML kôd neke boje izgleda ovako: #RRGGBB
000000
000033
000066
000099
0000CC
0000FF
003300
003333
003366
003399
0033CC
0033FF
006600
006633
006666
006699
0066CC
0066FF
009900
009933
009966
009999
0099CC
0099FF
00CC00
00CC33
00CC66
00CC99
00CCCC
00CCFF
00FF00
00FF33
00FF66
00FF99
00FFCC
00FFFF
330000
330033
330066
330099
3300CC
3300FF
333300
333333
333366
333399
3333CC
3333FF
336600
336633
336666
336699
3366CC
3366FF
339900
339933
339966
339999
3399CC
3399FF
33CC00
33CC33
33CC66
33CC99
33CCCC
33CCFF
33FF00
33FF33
33FF66
33FF99
33FFCC
33FFFF
660000
660033
660066
660099
6600CC
6600FF
663300
663333
663366
663399
6633CC
6633FF
666600
666633
666666
666699
6666CC
6666FF
669900
669933
669966
669999
6699CC
6699FF
66CC00
66CC33
66CC66
66CC99
66CCCC
66CCFF
66FF00
66FF33
66FF66
66FF99
66FFCC
66FFFF
990000
990033
990066
990099
9900CC
9900FF
993300
993333
993366
993399
9933CC
9933FF
996600
996633
996666
996699
9966CC
9966FF
999900
999933
999966
999999
9999CC
9999FF
99CC00
99CC33
99CC66
99CC99
99CCCC
99CCFF
99FF00
99FF33
99FF66
99FF99
99FFCC
99FFFF
CC0000
CC0033
CC0066
CC0099
CC00CC
CC00FF
CC3300
CC3333
CC3366
CC3399
CC33CC
CC33FF
CC6600
CC6633
CC6666
CC6699
CC66CC
CC66FF
CC9900
CC9933
CC9966
CC9999
CC99CC
CC99FF
CCCC00
CCCC33
CCCC66
CCCC99
CCCCCC
CCCCFF
CCFF00
CCFF33
CCFF66
CCFF99
CCFFCC
CCFFFF
FF0000
FF0033
FF0066
FF0099
FF00CC
FF00FF
FF3300
FF3333
FF3366
FF3399
FF33CC
FF33FF
FF6600
FF6633
FF6666
FF6699
FF66CC
FF66FF
FF9900
FF9933
FF9966
FF9999
FF99CC
FF99FF
FFCC00
FFCC33
FFCC66
FFCC99
FFCCCC
FFCCFF
FFFF00
FFFF33
FFFF66
FFFF99
FFFFCC
FFFFFF
#RRGGBB
Slika prikazuje izgled i heksadekadski broj
određene boje.
Uređivanje stranice • Unaprijed zadane boje možemo izmijeniti dodavanjem
odgovarajućih atributa oznaci . Vrijednosti ovih atributa su boje, odnosno kodovi boja. text definira boju teksta na stranici link definira boju hiperveza vlink definira boju posjećenih hiperveza alink definira boju aktivnih hiperveza
• Oznaka može sadržavati još neke atribute, od kojih su najpopularniji: bgcolor definira boju pozadine stranice background definira sliku u pozadini stranice topmargin definira gornju marginu stranice leftmargin definira lijevu marginu stranice
Dodavanje slika • Slike definiramo oznakom i neizostavnim atributom src, koji sadrži putanju i naziv datoteke slike.
• Oznaku mogu opisivati još neki atributi, od kojih su najčešći: • border debljina ruba oko slike. Vrijednost označava broj piksela. • width širina slike definirana u pikselima (npr. "100") ili postocima (npr. "80%"). • height visina slike definirana u pikselima ili postocima. • alt alternativni tekst (opis slike) koji se prikazuje u preglednicima koji ne
podržavaju prikaz slika ili ako slika ne postoji. Isti tekst prikazuje se u obliku savjeta (eng. tip) kada preko slike prijeđemo pokazivačem miša.
• align položaj slike u odnosu na tekst. Najčešće definirane vrijednosti su "left" i "right", a ovaj atribut prihvaća i "top", "middle" i "bottom". • hspace horizontalni razmak slike od teksta ili nekog drugog elementa na stranici iskazan u pikselima. • vspace vertikalni razmak slike od teksta ili nekog drugog elementa na stranici iskazan u pikselima.
Dodavanje zvuka • Oznaka kojom definiramo pozadinski zvuk nema svoj završni dio, a upisujemo je unutar zaglavlja HTML dokumenta. Njezino ime je (eng. background sound ), uz
obavezni atribut src, kojim definiramo izvor zvučnog zapisa. • Podržane su vrste datoteka s ekstenzijama: WAV, MID (Midi), RA(M) (Real Audio Media), AIF(F) (Audio Interchange File Format), SND i AU.
• Pozadinskom zvuku možemo definirati broj ponavljanja i to tako da atributu loop pridodamo određenu vrijednost. Ako ne želimo da se pozadinski zvuk ponavlja, vrijednost atributa bit će "0". Želimo li da se zvuk beskonačno ponavlja, vrijednost atributa loop bit će "-1".
Tablice • Pojava tablica predstavlja jedan od važnijih trenutaka u razvoju HTML standarda, putem te strukture moglo se
opisivati i prikazivati podatke u tabličnom obliku koji je otprije poznat iz područja oblikovanja 'običnog' teksta.
• Tablice se definiraju putem temeljne
oznake, opisuju se preko polja, redak po redak (
), a unutar pojedinog retka definiraju se stupci ili kolone (
).
• Sve ove oznake obavezno posjeduju otvarajući i zatvarajući tag. • Postoji još i tag
koji označava naslovnu ćeliju(e), najčešće stupci u prvom retku tablice.
•
align
Atribut kojim definiramo položaj tablice na stranici. Vrijednosti atributa mogu
•
biti "left", "center" i "right". border
•
cellpadding
•
cellspacing
•
height Visina. Vrijednost atributa može biti iskazana u pikselima (npr. "400") ili u postocima (npr. "80%"). Ovaj atribut moguće je pridodati i tablici i ćeliji. width Širina. Vrijednost atributa može biti iskazana u pikselima ili u postocima. Ovaj atribut moguće je pridodati i tablici i ćeliji. bordercolor Boja ruba tablice (ako nije border="0"). Ovaj atribut moguće je pridodati tablici, retku i ćeliji. bordercolorlight Kod 3D ruba tablice definira svijetliju stranu. Ovaj atribut moguće je pridodati tablici, retku i ćeliji.
• • •
Određuje debljinu vanjskog ruba tablice u pikselima. Stavimo li vrijednost atributa na "0", rub tablice neće biti vidljiv. Udaljenost sadržaja ćelija od ruba ćelije u pikselima. Udaljenost između ćelija iskazana u pikselima.
• • •
•
bgcolor Boja pozadine. Ovaj atribut moguće je pridodati tablici, retku i ćeliji. background Definira pozadinsku sliku tablice. Ovaj atribut moguće je pridodati i tablici i ćeliji. align Definira horizontalno poravnavanje elemenata unutar ćelija. Može poprimiti vrijednosti "left", "center", "right" i "justify". valign Definira vertikalno poravnavanje elemenata unutar ćelija. Može poprimiti vrijednosti "top", "middle" i "bottom".