Oblikovanje dokumentov s pomočjo odprte kode

Učna enota: 12. HTML - oblikovanje in povezave
Kaj se bomo v tem poglavju naučili
Osvoji bomo osnove oblikovanja spletne strani. Oblikovali bomo besedilo v spletni predstavitvi, povezovali bomo spletne strani s hiperpovezavami in si jih ogledali.

Nova znanja in veščine:

V zadnjem desetletju postaja internet predvsem na račun svetovnega spleta (WWW - World Wide Web) glavni medij za izmenjavo informacij. Na spletnih strežnikih se ponujajo spletne strani, ki integrirajo razne multimedijske vložke, kar zahteva vse večjo pasovno širino povezave strežnika v globalno omrežje. Splet tudi nekako požira ostale servise, tako da jih vpenja v svojo funkcionalnost.

Primer orodja za izdelavo spletnih strani je Nvu in spada v skupino HTML urejevalnikov tipa WYSIWYG (What You See Is What You Get). Omogoča nam izdelavo enostavnih, ne preveč zahtevnih, spletnih strani in tudi posege v izvorno kodo. Programski paket je prosto dostopen na spletu in ga lahko snamemo verzije za različne operacijske sisteme (Linux, Mac OS X, Windows). Datoteke za spletne strani imajo navadno končnico "html", v omenjenem urejevalniku pa jih oblikujemo zelo podobno kot navaden besedilni dokument.

Posamezne strani lahko med sabo povezujemo s povezavami, katere navadno imenujemo kar link. Link je lahko na neko stran v istem področju, lahko pa je relativno glede na trenutno področje nekam drugam. Imamo lahko tudi absolutne linke, kjer je definirana celotna pot do dokumenta, lahko tudi kar celotni URL naslov. V linkih je ravno ogromen potencial spleta, ki temelji na hipertestnih povezavah. Nam namreč ni treba vedeti kje se neki dokument nahaja. S klikom na link se nam enostavno odpre dokument katerega želimo brez da bi vedeli kje se sploh nahaja.

Vaje

1.) Kreiraj imenike po shemi:

Tvoj imenik
|
| _____html
2.) V imeniku html kreiraj s pomo č jo Nvu novi dokument za spletno predstavitev pod imenom index.html!

3.) V dokumentu index.html podaj osnovne podatke o sebi in na koncu podaj povezavo (link) na spletni dokument druga.html!
Namig: Urejevalnik Nvu ima gumbe in ukaze za popravljanje zelo podobne standardnim urejevalnikom. Tako ne boš imel težav z oblikovanjem besedila. Povezavo narediš tako, da označiš del besedila, ki bo občutljiv na klik in potem uporabiš gumb za povezavo v orodni vrstici. Potem določiš datoteko, na katero bo vodil link ali kar celotni URL naslov.

4.) V druga.html vklju č i neko sliko in navedi se kaj zanimivega o sebi ter na koncu podaj povezavo nazaj na tvojo osnovno stran, to je index.html!
Namig: Sliko vstaviš tako, da klikneš na gumb za sliko v orodni vrstici, izbereš datoteko s sliko, vtipkaš dodatno besedilo in po potrebi še nastaviš dodatne funkcije.

5.) Oglej si spletno predstavitev in shrani dokumenta!

Koristne povezave:

- LUGOS; http://www.lugos.si/
- Nvu; http://www.nvu.com/
- Šola HTML; http://www.sigov.si/tecaj/html/html.html
- Navodila za uporabo NVU: Learning NVU - web authoring system
- Navodila za uporabo NVU: How to Design and Publish Your Website with Nvu

2003-2007, Renato LUKAČ