1. laboratorijska vježba
Izrada web stranica (HTML & CSS)

Svrha vježbe:

• upoznavanje osnova HTML-a i CSS-a
• stjecanje iskustva u izradi i objavljivanju web stranica

Zadatak

1. Izraditi web stranicu proizvoljnog sadržaja tako da stranica zadovoljava osnovna pravila strukturiranja. Stranica mora sadržavati minimalno slijedeće elemente HTML-a:

   1. pozadine
   2. tekst različitih veličina (Heading elementi)
   3. tablice
   4. liste
   5. slike i slikovne mape
   6. linkove i sidra
   Prva stranica koju napravite mora nositi naziv index.html. Linkovi koji s nje vode mogu nositi proizvoljna imena.

2. Izraditi inačicu stranice koja koristi CSS (Cascading Style Sheet) za definiranje izgleda. CSS primijenite za definiranje sljedećih svojstava:

   1. izgled pozadine
   2. veličina slova
   3. veličina heading elementa
   4. izgled teksta u tablici
   5. izgled linka (ne/posjećeni)



3. Kopirati prethodnu HTML stranicu te njezin CSS dokument. Modificirati novi CSS dokument tako da se promijene definicije izgleda za barem 3 elementa, te tako pokazati koliko se može utjecati na izgled dokumenta pomoću CSS predloška.

4. Stranicu postaviti na web poslužitelj predmeta (prema uputama)

Primjeri:

• HTML sa svim potrebnim elementima
• Stranica koja koristi CSS te njen css dokument
• Ista stranica s drugim CSS dokumentom
• Ista stranica bez CSS-a

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 trenutno 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 oznake (engl. tag):

<TAG PARAM="value" PARAM></TAG>

Parametri oznake su opcionalni, te dodatno utječu uglavnom na formatiranje, dok sama oznaka uglavnom utječe na strukturu podataka. Zatvaračke oznake su također opcionalne u nekim situacijama, a neke oznake niti nemaju zatvaračke oznake. U XHTML standardu se zahtijeva da svaka oznaka ima zatvarač tako da HTML postaje XML ispravan jezik (uvođenjem <TAG/> samozatvarajućih oznaka). Ugnježđivanje oznaka 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>	Temeljna HTML oznaka koja ograničava cijeli HTML dokument
<HEAD>...</HEAD>	Uokviruje zaglavlje dokumenta (dio koji se ne prikazuje korisniku već sadrži neke metainformacije vezane uz dokument)
<TITLE>...</TITLE>	Naslov dokumenta (prikazan u naslovnoj liniji web pretražitelja)
<META ...>	Oznaka 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

Lokalizacija:

Lokalizacija se ostvaruje umetanjem odgovarajuće META oznake u zaglavlje HTML dokumenta:

<META http-equiv="Content-Type" content="text/html; charset=kodna_stranica">

Za hrvatsko govorno područje koriste se kodne stranice "iso-8859-2" (latin-2) i "windows-1250".

FORMATIRANJE

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).

body { background: #f5f5f5 url(bkg.gif); margin: 0px }

Dok se parametri boje linkova podešavaju s modificiranjem A 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.

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
CSS Reference
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.)