Nazaj Informatika Naprej Informatika 2 Vaje
V3 - Zgradba dokumenta
Novo: OZNAKA, HTML, HEAD, TITLE, BODY (Vaja3)
Osnova jezika HTML so oznake.
Lahko si jih predstavljate kot ukaze, ki brskalniku povedo, kako
naj tisto, kar je med oznakami, prikaže. Oznake
pišemo med znaka <>,
ki ju najdete v levem spodnjem delu tipkovnice:
| <oznaka> | začetna oznaka |
Ker želimo z
oznakami vplivati le na del dokumenta (npr.: besedilo), moramo
brskalniku nekako povedati, kje je začetek in kje konec oznake.
Konec oznake ima za razliko od začetka še poševnico / takoj po
znaku <:
| </oznaka> | končna oznaka |
Včasih pa končna oznaka ni obvezna in se konča s pričetkom kakšne druge oznake.
Kot celota ima oznaka torej naslednjo zgradbo:
| <oznaka>
.... </oznaka> |
Namig: ko napišete začetno oznako, napišite še končno tako, da začetno prekopirate in ji dodate poševnico.
Tudi celoten dokument HTML mora biti med oznakama:
| <HTML> | DOKUMENT - začetek |
| .... | |
| </HTML> | DOKUMENT - konec |
saj moramo brskalniku nekako povedati, kje se dokument prične in kje konča.
V večini dokumentov imamo uvod in jedro dokumenta. Tudi tukaj je zgradba podobna.
V glavi, ki je obvezen del dokumenta, navedemo osnovne
informacije o dokumentu: avtorjevi podatki, ključne besede,
naslov, ... . Glavo omejujeta oznaki <HEAD> in
</HEAD>.
| <HTML> | dokument - začetek |
| <HEAD> | GLAVA - začetek |
| </HEAD> | GLAVA - konec (Če končne oznake ni, se glava konča pri oznaki FRAMESET ali BODY.) |
| /HTML> | dokument - konec |
Osnovne informacije pa zapišemo med oznaki <TITLE> in
</TITLE>:
| <HTML> | dokument - začetek |
| <HEAD> | glava - začetek |
| <TITLE> | NASLOV - začetek (to besedilo na strani ni vidno) |
| </TITLE> | NASLOV - konec |
| </HEAD> | glava - konec |
| </HTML> | dokument - konec |
Vse, kar smo
napisali do sedaj, na spletni strani ne bo vidno. Manjka nam še
jedro dokumenta, ki mu pravimo tudi TELO (Body) in predstavlja
vidni del dokumenta (spletne strani). Znotraj telesa lahko
uporabljamo različne oznake za oblikovanje besedila. Telo
napišemo med oznaki <BODY>:
| <HTML> | dokument - začetek |
| <HEAD> | glava - začetek |
| <TITLE> | naslov - začetek (to besedilo na strani ni vidno) |
| </TITLE> | naslov - konec |
| </HEAD> | glava - konec |
| <BODY> | TELO - začetek |
| </BODY> | TELO - konec (Zaključna oznaka ni obvezna.) |
| </HTML> | dokument - konec |
To, kar smo napisali, je osnova za spletno stran. Pa si jo v
celoti oglejmo še enkrat:
| <HTML> | dokument - začetek |
| <HEAD> | glava - začetek |
| <TITLE> | naslov - začetek (to besedilo na strani ni vidno) |
| </TITLE> | naslov - konec |
| </HEAD> | glava - konec |
| <BODY> | TELO - začetek |
| </BODY> | TELO - konec (Zaključna oznaka ni obvezna.) |
| </HTML> | dokument - konec |
Pri izdelavi spletnih strani potrebujemo urejevalnik za HTML,
s katerim stran izdelamo in brskalnik, s katerim pogledamo, kaj
smo naredili. Ker sam uporabljam Netscape, se bodo navodila za
brskalnik nanašala nanj.
Sedaj bom opisal, kako to naredimo v praksi, zato bodo navodila nekoliko spominjala na kuharski recept.
Postopek bom opisal po korakih:
| Št. koraka | Opis |
| 1. | Da bi lažje
sledili tem navodilom, že sedaj odprite brskalnik
(Netscape, IE) in nato še to stran z navodili. Postopek: File, Open Page, Choose File, nato pokažete na mapo v kateri so ta navodila in jih odprete. |
| 2. | Odprite program
BELEŽNICA (Notepad). Postopek: Strart, Programi, Pripomočki, Beležnica. |
| 3. | Med programoma lahko preklapljate z miško ali še enostavneje s pritiskom tipke "Alt" (držimo pritisnjeno) in tabulatorske tipke. |
| 4. | S programom "Beležnica"
napišemo le potrebne oznake spletne strani (glej
teoretični del): <HTML> <HEAD> <TITLE> Mirko Pešec </TITLE> </HEAD> <BODY> </BODY> </HTML> |
| 5. | Vpisane oznake shranite kot
Vaja3.htm. Postopek: Datoteka, Shrani, izberete mapo in pod "Ime datoteke:" vpišete Vaja3.htm ter shranite s klikom na tipko "Shrani". Pri imenih datotek in map ne uporablajte šumnikov in presledkov. |
| 6. | Z brskalnikom odprite
Vaja3.htm. Postopek: File, Open Page, Choose File, nato pokažete na mapo v kateri je naš primer (Vaja3.htm) in ga odprete. Namig: Ko ste v brskalniku odprli naš primer, ste izgubili stran z navodili. V takih primerih si lahko odprete še dodatno okno, ki ga uporabljate zato, da vidite rezultate svojega dela. Zato bi v našem primeru odprli Vaja3.htm na naslednji način: File, New, Navigator Window, File, Open Page, Choose File, nato pokažete na mapo v kateri je naš primer (Vaja3.htm) in ga odprete. Rezultat je prazna stran. Oznake jezika HTML pa lahko pogledate tudi z brskalnikom. To je tako imenovan "Source" (izvorna koda), ki ga pogledate s klikom na ukaze: View, Page Source. Ko ste si Source pogledali, ga zaprite. |
| 7. | Na našo stran bomo dodali
svoje inicialke, ki jih vpišemo v telo, torej med oznaki
<BODY>: <BODY> MP </BODY> Datoteko ponovno shranimo. Postopek: Datoteka, Shrani. |
| 8. | Z brskalnikom ponovno pogledamo rezultat tako, da na strani z Vaja3.htm, kliknemo na ukaz Reload. Tako ravnamo vedno, ko želimo videti rezultat sprememb, saj ukaz Reload obnovi stran. |
| 9. | S tem smo naš prvi praktični primer zaključili. Celoten primer je dodan k povezavam na začetku strani.S klikom na Vaja3, ga boste odprli. Če pa ga želite prekopirati na svoj računalnik, v brskalniku izberete File in Save As. |
| 10. | Namig: Primerjaj Source-a za Vaja3.htm narejena z Beležnico in Netscape-om (ali Wordom). |
S klikom na "dodatno gradivo" dobis seznam spletnih
strani z razlagami oznak jezika HTML.