1. laboratorijska vježba
Izrada web stranica (HTML & CSS)
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
(koristiti Headinge)
- tablice
- liste
- slike i slikovne mape
- linkove
- Izraditi inačicu stranice
koja koristi CSS (Cascading Style Sheet) za definiranje izgleda (pozadina,
veličina slova, kontrola veličine headinga, predefiniranje TD i drugih
tagova)
- Kopirati prethodnu stranicu
samo te njen CSS dokument. Modificirati CSS dokument (promjeniti veličine
i tip fontova, boju i/ili sliku podloge i slično) - vidjeti koliko se
može utjecati na izgled dokumenta pomoću CSS-a.
- Stranicu postaviti na web
server predmeta (prema uputama na ploči)
Primjeri:
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)
STYLE SHEETS
Cascading Style Sheets (CSS) je potporni standard kojime se regulira
izgled elemenata na HTML stranicama. Specifikacija stilova se može nalaziti
unutar dokumenta, makar je češće stavljati specifikaciju stilova u vanjski
dokument kojeg onda učitavaju i referenciraju svi dokumenti na poslužitelju,
čime se omogućava vrlo jednostavna izmjena vizualnog i tipografskog identiteta
cijelog sadržaja poslužitelja izmjenama u samo jednom dokumentu.
Referenciranje CSS dokumenta iz web stranice se radi iz <HEAD>
tag-a stranice (odnosno iz zaglavlja)
<head>
...
<link href="stilovi.css" rel="styleSheet" type="text/css">
...
</head>
CSS je plain-text dokument u kojemu se nalaze specifikacije stilova (class)
te specifikacije izgleda pojedinih tagova (odnosno over-ride defaultnog
izgleda taga):
.tekst11 { color: #333366; font-size: 11px; font-family:
"Trebuchet MS", Tahoma, sans-serif; margin-right: 5px; margin-left:
5px }
p { color: #0b0b0b; font-size: 12px; font-family: "Trebuchet
MS", Tahoma, sans-serif; margin-right: 5px; margin-left: 5px }
Prvi primjer (s točkom "." na početku) jest specifikacija stila,
dok je drugi primjer direktno definiranje izgleda nekog taga (u ovom slučaju
<p> taga).
Stilovi se koriste tako da tagu unutar kojeg želimo primjeniti stil dodamo
parametar class kojim definiramo koju CSS specifikaciju izgleda želimo
primjeniti (ona se ovdje piše bez točke):
<p class="tekst11">tekst</p>
će tekstu unutar paragrafa dati karakteristike koje smo definirali pod
stilom ".tekst11" (veličinu, boju, font, margine i slično).
Moguće je rabiti class parametar na mnogim (zapravo skoro na svim tagovima,
odnosno konačni cilj uporabe DOM-a i objektnog modela web stranice bi
ciljao k tomu da SVAKI tag ima svoj ID i CLASS parametar). Npr ovakova
specifikacija:
<td class="tekst11">nešto</td>
će tekstu unutar polja tablice dati izgled definiran stilom tekst11.
Proučiti primjere CSS dokumenata priloženih kao primjer za vježbu te
napisati svoje CSS-ove kojima bi se utjecalo na izgled stranice nastale
u prvom dijelu vježbe.
UPUTE
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
Ukloniti ove parametre kada se koristi CSS, jer se u CSS dokumentu
podešavaju parametri BODY tag-a
npr:
body { background: #f5f5f5 url(bkg.gif); margin: 0px }
Dok se parametri boje linkova podešavaju s modificiranjem A taga.
Naslovi, prijelom i veličina teksta
<hn>...<hn> Naslov razine
n=1,..,6
Primjer predefiniranja Heading tagova:
h1 { color: #46556d; font-weight: bold; font-size: 16px;
font-family: "Trebuchet MS", Tahoma, sans-serif; margin-right:
5px; margin-left: 5px ; line-height: 36px}
h2 { color: #46556d; font-weight: bold; font-size: 14px; font-family:
"Trebuchet MS", Tahoma, sans-serif; margin-right: 5px; margin-left:
5px }
h3 { color: #46556d; font-weight: bold; font-size: 12px; font-family:
"Trebuchet MS", Tahoma, sans-serif; margin-right: 5px; margin-left:
5px }
h4 { color: #46556d; font-weight: bold; font-size: 12px; font-family:
"Trebuchet MS", Tahoma, sans-serif; margin-right: 5px; margin-left:
5px }
<center>...</center> Centrirani
tekst
<pre>...</pre> Predformatirani
tekst
<p>...</p> Odlomak
<br> Novi redak
<hr> Horizontalna crta
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
DL, DT i DD se VRLO rijetko koriste :o)
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
a { color: #46556d; text-decoration: none }
a:hover { color: #7c97c2; text-decoration: underline }
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.)
|
