HTML

HTML (eng.
HyperText Markup Language)
Izvor: w3schools.com
to je HTML?
HTML je jezik kojim web preglednicima opisujemo izgled naih web stranica, kako bi ih oni mogli ispravno prikazati. HTML nije programski jezik niti su ljudi koji ga koriste programeri. Njime ne moemo izvriti nikakvu zadau, pa ak ni najjednostavniju operaciju zbrajanja ili oduzimanja dvaju cijelih brojeva. On slui samo za opis naih hipertekstualnih dokumenata i za nita vie od toga.
Povijest HTML-a
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 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 kd sastoji se od oznaka (eng. tag) i njihovih atributa, a sve oznake imaju svoj poetni i zavrni dio.
<html> <head> <title>Naslov dokumenta</title> ZAGLAVLJE </head> <body> Ovo je minimalni HTML dokument TIJELO </body> </html>
<HTML> <HEAD> zaglavlje koje moe imati nekoliko podelemenata tipa: <TITLE> naslov dokumenta </TITLE> <BASE> osnovna adresa preko koje se rjeava relativna; nuna ako se dokument ne nalazi na originalnoj lokaciji. </BASE> <ISINDEX> javlja browser-u da je dokument indeksni, s kazalima na druge dokumente </ISINDEX> <LINK> pokazuje vezu izmeu ovog dokumenta i nekog objekta na WEB-u </LINK> <META> daje informacije o stranici, kao to su kljune rijei </META> <SCRIPT> sadri Java ili VB skripta </SCRIPT> <STYLE> sadri informaciju koja se koristi u CSS-u, uzorcima stilova </STYLE> </HEAD> <BODY> Sadraj stranice koji se prikazuje u web pregledniku</BODY> </HTML>
Naslovi
HTML doputa definiranje naslova u est razina i to koritenjem oznake <hn>, gdje je n broj od 1 do 6. Tako ete, na primjer, glavni naslov definirati oznakom <h1>, a podnaslove oznakama od <h2> do <h6>.
<h1>Glavni naslov!!!</h1> HTML <h2>Osnove HTML-a</h2> HTML je zanimljiv i lagan!
HTML automatski dodaje dodatnu praznu liniju prije i nakon heading-a.
Poravnanje
Atribut kojim se najee mijenjaju svojstva naslova je align, a moe poprimiti vrijednosti left, right i center. U skladu s tim, naslov e biti pozicioniran lijevo, desno ili u sredinu.
<h1 align="center">Programski alati 3</h1>
Novi redak na mjestu gdje elimo prekid dodat emo oznaku <br> (eng. break). Ta oznaka ne dolazi s nekim od atributa niti ima zavrni dio.
Dobro doli na Programske alate 3 <br>Uimo HTML
Poravnanje odlomka
<p>This is a paragraph.</p>
<p align="justify">The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors.</p>
<p align="right">The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors.</p>
Ureivanje teksta
Vrstu slova (engl. font) mogue je mijenjati unutar HTML dokumenta uz pomo <FONT> tag-a i njegovih atributa (COLOR za boju, FACE za vrstu fonta i SIZE za veliinu slova). Na primjer, na ovaj nain:
Ovo je obian tekst, <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7"> a ovo neobian tekst!</FONT>
Liste
Poetak i kraj numerirane liste definira se oznakom <ol> (eng. ordered list), dok elemente liste definiramo oznakom <li> (eng. list item), koju koristimo za svaki novi element liste.
Nenumeriranu listu definiramo elimo li promijeniti nain na isti nain kao i numeriranu, numeriranja elemenata liste, samo umjesto oznake <ol> koristit emo atribut type. Kod koristiti oznaku <ul> (eng. numerirane liste vrijednost unordered list). atributa type moe biti: <ol> <li>Numerirane liste</li> 1 - arapski brojevi <li>Nenumerirane I - rimski brojevi liste</li> i - "mali" rimski brojevi <li>Definicijske liste</li> A - slova </ol> a - mala slova npr. <ol type=A>
Hiperveze (hiperlinkovi)
Hipervezu oznaavamo oznakom <a>, to dolazi od engleske rijei anchor (sidro). Ona ima i svoj zavrni dio, </a>, i atribute kojima definiramo njezina svojstva.Najei atributi su href, name, target i title.
<a href="http://www.velv.hr/">Veleuilite u V</a>
Href - (eng. hyperlink reference) definira kamo hiperveza vodi - na neki dokument ili datoteku, adresu e-pote ili na mjesto unutar dokumenta. Name - koristimo za definiranje knjike oznake, mjesta unutar dokumenta (eng. anchor). Target - odreuje 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) trenutanog okvira
Title - opisuje hipervezu, a on se u obliku savjeta (eng. tip) prikazuje kada pokaziva mia postavimo iznad hiperveze. Vrlo je koristan slijepim osobama, jer njihovi preglednici tada itaju i opis hiperveze (npr. kod slikovnih hiperveza)
Moemo definirati i hipervezu koja vodi na knjiku oznaku neke druge stranice. To inimo tako da iza adrese dokumenta dodamo naziv knjike oznake. Na primjer:
<a href="http://www.tv.hr/program.htm#petak"> Raspored programa za petak </a>
Za definiranje hiperveze na adresu elektronike pote bit e nam potreban atribut href
<a href="mailto:referada@velv.hr? subject=Pitanje">referada</a>
Slikovne hiperveze definiramo tako da oznakom hiperveze omeimo sliku koju elimo pretvoriti u hipervezu.
<a href="http://www.velv.hr/"> <img src="http://www.velv.hr/wp-content/uploads/copy-velv_logo2.png" border="0"> </a>
-MultimedijaBoje
Svaka boja ima svoj kd 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 moemo koristiti su: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white i yellow. Model po kojemu piemo HTML kd neke boje izgleda ovako: #RRGGBB
000000 003300 006600 009900 00CC00 00FF00 330000 333300 336600 339900 33CC00 33FF00 660000 663300 666600 669900 66CC00 66FF00 990000 993300 996600 999900 99CC00 99FF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00
0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 6600CC 6633CC 6666CC 6699CC 66CCCC 66FFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC
0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF 3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 6600FF 6633FF 6666FF 6699FF 66CCFF 66FFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF
#RRGGBB
Slika prikazuje izgled i heksadekadski broj odreene boje.
Ureivanje stranice
Unaprijed zadane boje moemo izmijeniti dodavanjem odgovarajuih atributa oznaci <body>. Vrijednosti ovih atributa su boje, odnosno kodovi boja.
text definira boju teksta na stranici link definira boju hiperveza vlink definira boju posjeenih hiperveza alink definira boju aktivnih hiperveza
Oznaka <body> moe sadravati 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 <img> i neizostavnim atributom src, koji sadri putanju i naziv datoteke slike.
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
Oznaku <img> mogu opisivati jo neki atributi, od kojih su najei:

border debljina ruba oko slike. Vrijednost oznaava 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 podravaju prikaz slika ili ako slika ne postoji. Isti tekst prikazuje se u obliku savjeta (eng. tip) kada preko slike prijeemo pokazivaem mia. align poloaj slike u odnosu na tekst. Najee definirane vrijednosti su "left" i "right", a ovaj atribut prihvaa 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 zavrni dio, a upisujemo je unutar zaglavlja HTML dokumenta. Njezino ime je <bgsound> (eng. background sound), uz obavezni atribut src, kojim definiramo izvor zvunog zapisa. Podrane su vrste datoteka s ekstenzijama: WAV, MID (Midi), RA(M) (Real Audio Media), AIF(F) (Audio Interchange File Format), SND i AU. Pozadinskom zvuku moemo definirati broj ponavljanja i to tako da atributu loop pridodamo odreenu vrijednost. Ako ne elimo da se pozadinski zvuk ponavlja, vrijednost atributa bit e "0". elimo li da se zvuk beskonano ponavlja, vrijednost atributa loop bit e "-1". <bgsound src="sound.wav" loop="0">
Tablice
Pojava tablica predstavlja jedan od vanijih trenutaka u razvoju HTML standarda, putem te strukture moglo se opisivati i prikazivati podatke u tablinom obliku koji je otprije poznat iz podruja oblikovanja 'obinog' teksta. Tablice se definiraju putem temeljne <TABLE> oznake, opisuju se preko polja, redak po redak (<TR>), a unutar pojedinog retka definiraju se stupci ili kolone (<TD>). Sve ove oznake obavezno posjeduju otvarajui i zatvarajui tag. Postoji jo i tag <TH> koji oznaava naslovnu eliju(e), najee stupci u prvom retku tablice.
align Atribut kojim definiramo poloaj tablice na stranici. Vrijednosti atributa mogu biti "left", "center" i "right". border Odreuje debljinu vanjskog ruba tablice u pikselima. Stavimo li vrijednost atributa na "0", rub tablice nee biti vidljiv. cellpadding Udaljenost sadraja elija od ruba elije u pikselima. cellspacing Udaljenost izmeu elija iskazana u pikselima. height Visina. Vrijednost atributa moe biti iskazana u pikselima (npr. "400") ili u postocima (npr. "80%"). Ovaj atribut mogue je pridodati i tablici i eliji. width irina. Vrijednost atributa moe biti iskazana u pikselima ili u postocima. Ovaj atribut mogue je pridodati i tablici i eliji. bordercolor Boja ruba tablice (ako nije border="0"). Ovaj atribut mogue je pridodati tablici, retku i eliji. bordercolorlight Kod 3D ruba tablice definira svijetliju stranu. Ovaj atribut mogue je pridodati tablici, retku i eliji.
bgcolor Boja pozadine. Ovaj atribut mogue je pridodati tablici, retku i eliji. background Definira pozadinsku sliku tablice. Ovaj atribut mogue je pridodati i tablici i eliji. align Definira horizontalno poravnavanje elemenata unutar elija. Moe poprimiti vrijednosti "left", "center", "right" i "justify". valign Definira vertikalno poravnavanje elemenata unutar elija. Moe poprimiti vrijednosti "top", "middle" i "bottom".
Okviri
Umjesto oznake <body> koristimo oznake :
<frameset> za definiranje seta okvira <frame> za definiranje dokumenta koji se prikazuje u okviru. Oznakom <frameset> i atributom rows ili cols definiramo broj i veliinu redaka ili stupaca okvira. Atributom rows definiramo broj i visinu okvira, a cols definira broj i irinu okvira.
<HTML> <HEAD> <TITLE>Primjer okvira</TITLE> </HEAD> <FRAMESET COLS="25%, *"> <FRAME SRC="izbornik.html"> <FRAMESET ROWS="20%,*"> <FRAME SRC="gornja.html"> <FRAME SRC="sadrzaj.html"> </FRAMESET> </FRAMESET> </HTML>
Atributi koji opisuju <frame> oznaku

frameborder poprima vrijednost 0 ili 1, ovisno o tome elimo li da okvir ima rubove ili ne. name imenuje okvir (posebno je vano za kreiranje hiperlinkova) noresize ne poprima vrijednosti, a onemoguava mijenjanje veliine okvira. Okvirima je u protivnom u pregledniku mogue promijeniti veliinu povlaenjem ruba okvira. scrolling moe poprimiti vrijednosti "yes", "no" ili "auto", to odreuje prikaz klizaa u okviru. Vrijednost "yes" ga prikazuje, "no" ne prikazuje, a "auto" kliza prikazuje po potrebi.
Obrasci
Obrasci ili forme predstavljaju u HTML jeziku posebno podruje. Nikad ne dolaze samostalno, ve se naslanjaju na skriptu: CGI, JavaScript, VBScript, ASP, PHP ili programske jezike orijentirane WEB aplikacijama: Java ili C#. Forme slue za prikupljanje podataka od strane korisnika, bilo preko upisa podataka, bilo preko izbora ponuenih odgovora. Forma koristi <FORM> element unutar kojeg dolazi jedan ili vie <INPUT> i/ili <SELECT> elemenata:
<FORM> - poetak forme <INPUT> - trai informaciju na razliite naine <SELECT> - izabire informaciju na razliite naine </FORM> - zavretak forme
Element <INPUT> kao osnovni atribut ima tip 'TYPE' koji moe biti:
TEXT - za upis informacije
PASSWORD - za upis lozinke (umjesto utipkanih znakova pojavljuju se '*').
RADIOBUTTON - okrugli gumb za izbor jednog od ponuenih
CHECKBOX kvadratni gumb za izbor vie(ili niiednog) od ponuenih
FILE - za slanje (engl. upload) datoteke preko WEB-a SUBMIT - za tvorbu gumba na iji pritisak (klik miem) se podaci uneseni preko forme daju skriptama na obradu
IMAGE - umjesto gumba za 'SUBMIT' koristi se izabrana slika RESET - ponitavanje informacije upisane u obrasce
HIDDEN - za prijenos nevidljive informacije u skipta za obradu.
Element <SELECT> brine se za popis (preko podelementa <OPTION>) i izbor ponuenih podataka u obliku padajue izborne ponude (menu-a). <SELECT> ima argument 'NAME' gdje se upisuje ime menu-a (potrebno za obradu), <OPTION> ima argument 'VALUE' kojoj se pridjeljuje vrijednost, obino povezana s onom koja se prijavljuje. Izborom jedne od ponuenih vrijednosti, te klikom na 'SUBMIT' gumb, alje se pripadna vrijednost spremljena pod 'VALUE'. Program za obradu e to adekvatno protumaiti i obraditi.
Primjer obrasca

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML (eng.

HyperText Markup Language)

HTML Version 1(1992-3)

Pravila pisanja HTML-a

HTML automatski dodaje dodatnu praznu liniju prije i nakon heading-a.

Slika prikazuje izgled i heksadekadski broj odreene boje.

Oznaka <body> moe sadravati jo neke atribute, od kojih su najpopularniji:

<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">

Oznaku <img> mogu opisivati jo neki atributi, od kojih su najei:

Atributi koji opisuju <frame> oznaku

PASSWORD - za upis lozinke (umjesto utipkanih znakova pojavljuju se '*').

RADIOBUTTON - okrugli gumb za izbor jednog od ponuenih

CHECKBOX kvadratni gumb za izbor vie(ili niiednog) od ponuenih

HIDDEN - za prijenos nevidljive informacije u skipta za obradu.

You might also like