Svrha vježbe:
Stjecanje iskustva sa osnovama HTML-a te izrade i objavljivanja web stranica.
Zadatak:
- Izraditi web stranicu koristeći osnovne elemente HTML jezika. Sadržaj stranice može
biti proizvoljan, a stranica mora sadržavati minimalno slijedeće elemente HTML-a:
- pozadine
- tekst u raznim veličinama
- tablice
- liste
- slike i slikovne mape
- linkove
- Stranicu postaviti na web server predmeta (uputa)
Uvod:
HTML - HyperText Markup Langugae
http://www.w3.org/
- Definiran standardima W3 Consortiuma, prije RFC
dokumentima. W3 Consortium je standardizacijsko tijelo za pitanja razmjene
podataka na Internetu (protokoli, jezici (XML - eXstensible Markup
Language
i izvedenice)). Trenutni nagalasak je na XML-u i izvedenim jezicima (RDF,
SMIL, XHTML i drugi).
Temeljni format podataka WWW-a, nastao je 1991/92 (autor Tim Berners-Lee)
na
Europskom Laboratoriju za čestičnu
Fiziku (CERN, Geneva) te zajedno sa
HTTP protokolom, prvim poslužiteljem i pretraživačem
postavio temelje
razvoja World Wide Weba kao usluge Interneta.
Povijest standarda HTML-a (ključni
koraci):
1.0 1991/2 RFC 1866 Osnove Markupa, prikaz teksta, slika i linkova
2.0 1994 Tablice za formatiranje, naprednija kontrola teksta
3.2 1996 Okviri (frames), prvi script jezik (JavaScript)
4.0 1998 DOM (Document Object Model), StyleSheets, DHTML
Aktualni standard: HTML 4.01 (popravak nekih bug-ova)
U razvoju: XHTML (trenutno u postupku standardizacije), definira HTML kao
XML sukladan jezik (XHTML Transitional) te kao jezik bez ikakvih
informacija
o formatiranju (XHTML Pure).
Podupirući standardi: DOM (Document
Object Model) CSS1/2 (Cascading Style
Sheets), XLINK, XSL (eXtensible Style Sheets Language) - svi ovi standardi
trentuno sudjeluju u izgradnji današnjih web sadržaja.
Temelj markup jezika (SGML kao najopćenitiji,
te HTML, XML drugi izvedeni
jezici) su "oznake" ("značke",
"tagovi") kojima se utječe
na strukturu
i/ili prikaz informacija sadržanih u dokumentu. Tagovi su upute uokvirene
u
"<" i ">" graničnike
(delimitere), koje (npr.) web pretraživač
zna
pročitati te iz njih stvoriti
strukturu dokumenta (uglavnom stablo, poradi
strukturiranosti samih jezika) te ga konačno
prikazati korisniku na
zaslonu.
Tagove koje ne zna protumačiti web
pretražitelj uglavnom ignorira čime
se
postiže određena količina
kompatibilnosti sa starijim inačicama
standarda i pretražitelja (makar je ovo vrlo kompleksan problem, kako
izgraditi web stranice koje će
funkcionirati na što više platformi - kombinacija
OS/pretraživač). U zadnje vrijeme se
često web stranice
grade ili ciljano za određenu
platformu (Win/IE4+) ili se koriste tehnologije
(CSS) kojima se može osigurati dobro funkcioniranje stranica u svim
pretražiteljima, makar se u starijim pretražiteljima gube neki elementi
prikaza i funkcionalnosti.
STRUKTURA
Struktura tag-a (oznake):
<TAG PARAM="value" PARAM></TAG>
Parametri taga su opcionalni, te dodatno utječu
uglavnom na formatiranje,
dok sam tag uglavnom utječe na
strukturu podataka. Zatvarački tagovi
su
također opcionalni u nekim
situacijama, a neki tagovi niti nemaju
zatvaračke tagove. U XHTML standardu
se zahtjeva da svaki tag ima zatvarač
tako da HTML postaje XML ispravan jezik (uvođenjem
<TAG/> samozatvarajućih
tagova). Ugnježđivanje tagova je
dozvoljeno, uz preporuku da se
ugnježđivanje radi simetrično
("<TAG1><TAG2> Tekst </TAG2></TAG1>"
umjesto "<TAG1><TAG2> Tekst
</TAG1></TAG2>"). Simetrično
ugnježđivanje je
obavezno u XML-u (XHTML-u)
Struktura HTML dokumenta:
<HTML></HTML> - Temeljni HTML tag koji ograničava
cijeli HTML dokument.
<HEAD></HEAD> - Uokviruje zaglavlje dokumenta (dio koji se ne
prikazuje
korisniku već sadrži neke
metainformacije vezane uz dokument)
<TITILE></TITLE> - Naslov dokumenta (prikazana u naslovnoj
liniji web
pretražitelja)
<META> - Tag za pohranu meta-informacija o dokumentu (autor, sadržaj,
ključne riječi,
kodiranje dokumenta (bitno zbog lokalizacije)
<BODY></BODY> - Uokviruje tijelo dokumenta, tj. dio koji biva
prikazan
korisniku
Znači, osnovna strukutra HTML
dokumenta je:
<HTML>
<HEAD>
<TITLE>Naslov dokumenta</TITLE>
<META NAME="Author" CONTENT="Zvonimir Zelenika">
</HEAD>
<BODY>
Tekst dokumenta
</BODY>
</HTML>
FORMATIRANJE
Formatiranje tijela dokumenta:
<BODY bgcolor="#f0f0f0" text="#000000"
link="#333366" alink="#990000"
vlink="#666699" background="slika.gif">
Definiramo ovime default boju pozadine, teksta, linkova, aktivnih i
posjećenih linkova te sliku za
pozadinu dokumenta. Parametri su opcionalni,
a boje su zapisane u #RRGGBB formatu (vrijednosti komponenata 0-255 u
heksadecimalnom zapisu).
<P align="left/center/right"></P> Novi paragraf,
zatvarač opcionalan
<BR> Line break, tj. novi red (uočiti
razliku između <P> i <BR>
taga)
<H1><H2><H3><H4><H5><H6> Predefinirani
formati teksta (headings),
zanemareni uvođenjem <FONT>
taga (HTML 3.2), ali u zadnje vrijeme ponovo se
više koriste (CSS).
<B><I><U> - Bold, Italic, Underline - tekst podebljan,
nakošen, podvučen
<PRE><CODE><TT> Razni tipovi monospace-a (Courier,
Monaco npr.)
<FONT face="ime fonta"
size="-3/-2/-1/0/1/2/3"></FONT> Formatiranje teksa,
veličine su relativne u odnosu na
default ili user-defined veličinu.
Uvođenjem CSS-a <FONT> tag se
smatra zastarjelim (depreceated).
<IMG src="file.gif" width="px/%"
height="px/%" border="px">
Uključivanje slike u web stranicu
(primarno GIF i JPEG dokumenti, kasnije
inačice web pretražitelja podržavaju
i PNG - Portable Network Graphics
format)
TABLICE
Tablice za formatiranje:
<TABLE widht="pix/%" height="pix/%"
border="pix" bgcolor="#rrggbb">
<TR height="pix/%" bgcolor="#rrggbb">
<TD width="pix/%" bgcolor="#rrggbb"
colspan="span" rowspan="span">
<TABLE> - Temeljni tag tablice
<TR> Red u tablici
<TD> Polje u tablici
Pomoću "colspan" i
"rowspan" parametra se konrolira da li polje (TD)
tablice prekriva više stupaca (cols) ili redaka (rows) tablice.
Primjer tablice (2 reda, 2 stupca, bez
nekih posebnih formatiranja:
<TABLE>
<TR>
<TD>
<TD>
</TR>
<TR>
<TD>
<TD>
</TR>
<TABLE>
Tablice su vrlo dobar (a dugo su bile i jedini) način
preciznog
formatiranja elemenata na stranici, npr kompleksne slike se mogu razdijeliti
na manje dijelove koji se poslože u polja tablice čime
se može postići
precizno pozicioniranje elemenata. Neki pretražitelji imaju svoja "čudna"
pravila u ponašanju sa tablicama (baš i ne slušaju točno
parametre
širine ili visine polja), pa je pametno u prazna polja tablice ubacivati
prozirnu sliku.
VEZE - LINKOVI
Povezivanje sa drugim dokumentima
Mogućnost povezivanja dokumenta ili
dijela dokumenta sa nekim drugim
sadržajem je zapravo temelj hipertekstualnog modela world wide web-a.
<A href="url-dokumenta"></A>
Elementi unutar A (Anchor) taga, bilo tekst ili slike postaju pokazivač
na
drugi dokument ili sadržaj. Tekst koji je veza (link) ce biti uglavnom
podvučen ili druge boje (definirane
"link" parametrom BODY taga), a slika
će dobiti okvir te boje. Ova oba ponašanja
se mogu eliminirati (npr.
slikama se postavi "border" parametar na 0, a na tekst se utječe
CSS
definicijom).
SLIKE
<IMG src="ime-filea" border="px"
width="px/%" height="px/%"
valign="top/bottom/middle" halign="left/right"
vspace="px" hspace="px"
name="ime">
valign i halign - podešavaju text flow oko slike
vspace i hspace - podešavaju prostor oko slike
width i height - podešavaju veličinu
slike, ako se podesi samo jedan tada
se slika uvećava proporcionalno po
drugoj dimenziji
ime - ime kojim se obilježava slika ukoliko se želi njoj pristupiti iz
skripte (ovo su temelji DOM-a)
Uputa:
Ovdje su dane samo najosnovnije upute o HTML jeziku. Za više detalja i naprednije
opcije može se konzultirati referentna dokumentacija.
HTML
Obavezni elementi
<html>...</html> Deklaracija HTML
dokumenta
<head>...</head> Zaglavlje dokumenta
<title>...</title> Naziv dokumenta; element
zaglavlja
<body>...</body> Tijelo dokumenta
Internacionalizacija
<meta http-equiv="Content-Type"
content="text/html;
charset=charset_name"> Kodna stranica (1)
1)
Za nas su interesantni iso-8859-2 (latin-2) i windows-1250
Slova, boje i podloge
<body background="url" Uzorak podloge
bgcolor="#rrggbb"
Boja podloge
text="#rrggbb" Boja teksta
link="#rrggbb" Boja linkova
vlink="#rrggbb"
Boja već posjećenog linka
alink="#rrggbb">
Boja aktivnog linka
Naslovi, prijelom i veličina teksta
<hn>...<hn> Naslov razine n=1,..,6
<center>...</center> Centrirani tekst
<pre>...</pre> Predformatirani tekst
<p>...</p> Odlomak
<br> Novi redak
<hr> Horizontalna crta
<basefont size=n> Osnovna veličina slova
<font>...</font> Karakteristike slova
<font size=n Veličina slova u odnosu na <basefont>
color="#rrggbb">
Boja slova
Stilovi pisma
<!-- ... --> Nevidljivo (komentar)
<b>...</b> Masno (bold)
<i>...</i> Koso (italic)
<u>...</u> Podvučeno (underline)
<strong>...</strong> Istaknuto
<em>...</em> Naglašeno
Liste
<ul>...</ul> Nepobrojana lista
<ol>...</ol> Pobrojana lista
<li>...</li> Redak liste
<li type="type"> Simbol na početku retka
<dl>...</dl> Rječnička lista
<dt>...</dt> Pojam u rječničkoj listi
<dd>...</dd> Definicija u rječničkoj listi
Tablice
<table>...</table> Deklaracija tablice
<table border=n Debljina okvira
cellspacing=n
Razmak između ćelija
cellpadding=n>
Razmak unutar ćelije
<caption>...</caption> Prateći tekst
<tr>...</tr> Redak tablice
<td>...</td> Ćelija tablice
<td align="align" Položaj unutar ćelije
(left, right, top, bottom, center, middle)
valign="valign"
Vertikalni položaj
rowspan=n Raspon kroz n redaka
colspan=n> Raspon kroz n
stupaca
<th>...</th> Zaglavlje tablice
Slike
<img src="url" Slika unutar teksta
alt="text"
Zamjenski tekst
align="align"
Položaj prema tekstu
border=n>
Debljina ruba
Sidra i linkovi
<a>...</a> Sidro ili link
<a name="anchor" Ime sidra
href="url"> Link na ciljni resurs
Slikovne mape
<img...usemap="#name"> Mapa kod
klijenta
<map name="name">...</map> Definicija
mape
<area shape="shape" Lik polazišta linka (1)
coords="coords"
Koordinate lika linka
href="url"
Odredište linka
1) default|rect|circle|poly; definicije likova, tj. parovi
<area>...</area> moraju se nalaziti unutar <map>...</map>
Referentna dokumentacija:
HTML Specification
HTML Quick Reference Guide
HTML help and reference
Beginner's Guide
to HTML
Beginner's Guide to URLs
Interactive HTML Tutorial for Beginners
Writing HTML
Tutorial
HTML Goodies
Charset tables
RGB color table
Tables, How-To (Netscape)
Frames, design
Tim Berners-Lee's
HTML Style Guide
WebReference.com
Primjeri:
Primjer HTML stranice
Alati:
WWW browser (Internet Explorer, Netscape)
editor (notepad, wordpad, edit, itd.)
|
