HTML (HyperText Markup Language) je univerzalen jezik za globalno distribucijo različnih dokumentov po World Wide Web-u (svetovnem spletu) in ga z uporabo ustreznega programa - brskalnika (browser) lahko razumejo različni računalniki na različnih platformah.
Glede na odločitev, da bomo rezultate vaj objavljali na domači strani laboratorija LECAD, je potrebno izdelati dokumentacijo v ustrezni obliki. To pomeni, da je potrebno poročilo zapisati v HTML datoteke, to so datoteke s končnico .html.
V nadaljevanju so prikazana nekatera osnovna pravila jezika HTML. Predstavljeni so osnovni elementi in parametri, ki omogočajo izdelavo dokumenta z medsebojnimi povezavami, izpisom teksta z različnimi tipi naslovov, seznami in odstavki, tabelami ter vključenimi slikami.
Preprost primer HTML datoteke:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<P>Hello world!
</BODY>
</HTML>
V gornjem primeru imamo nekaj elementov jezika HTML. To so: HTML, HEAD in BODY. Elementi imajo svoj začetek, telo in konec. Začetek elementa označuje poseben privesek definiran <ime-elementa>, konec elementa pa privesek definiran </ime-elementa>. Pri nekaterih elementih se lahko privesek za začetek ali konec opusti. Elementi imajo lahko parametre, ki določajo različne lastnosti glede na določeno vrednost. Pare lastnost-vrednost navajamo v začetnem privesku ločene s presledkom v kateremkoli zaporedju.
Primer:
<IMG src="portret.gif" height=100 width=77>
S tem smo nastavili elementu IMG, ki predstavlja sliko, vrednosti parametrov, in sicer izvor src na datoteko s sliko portret.gif ter višino height na 100 in širino width na 77.
V osnovnem HTML dokumentu, ki izpiše tekst Hello world! lahko vidimo kakšna je osnovna zgradba zapisa HTML datoteke. Na začetku deklariramo tip dokumenta.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
V nadaljevanju z ukazom <HTML> nakažemo, da gre za HTML dokument, ki ga z ukazoma <HEAD> in <BODY> razdelimo na glavo in telo dokumenta. V glavi z ukazi, kot je npr. <TITLE>, kjer določimo besedilo izpisano v glavi in ne v vidnem polju okna našega brskalnika, nastavljamo nekatere osnovne značilnosti dokumenta. Pogost je tudi ukaz <META>, s katerim določamo različne nastavitve. Taka je določitev nabora znakov s navedbo standarda. Primer določitve ISO Latin 2 nabora znakov, ki vsebuje tudi posebne znake iz slovenske abecede.
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
V telesu dokumenta se nahaja vsebina, ki se bo pojavila v oknu brskalnika. Tu vpišemo besedilo, ki ga ustrezno oblikujemo z drugimi HTML ukazi, ki določajo želeni videz besedila.
V nadaljevanju bomo pregledali ostale HTML elemente, ki jih lahko razdelimo glede na njihov namen.
- logično oblikovanje (podnaslovi, odstavki, citati,
osebni naslov, elementi za tip informacij ...)
- točno določeno oblikovanje (krepki zapis,
nagnjene črke, velikost črk ...)
- razčlemba dokumentov (skok v novo vrstico, horizontalne
črte)
- seznami (številčni seznami, definicijski
seznam ...)
- kazalci (na druge dokumente in določena mesta
v dokumentih, elektronska pošta)
- slike (namestitev slik)
- tabele, komentarji
HTML ima šest nivojev podnaslovov, ki se označujejo in številčijo sledeče:
<H1> ... </H1>, <H2> ... </H2>, ... <H6> ... </H6>
Pri tem je podnaslov z oznako 1 najpomembnejši in se prikaže največji. V podnaslovih lahko določamo nekatere parametre npr. njihovo poravnavo:
<H1 align=left | center | right> ... </H1>
Z oznako | smo nakazali, da se uporabi ena od možnosti.
Znotraj telesa dokumenta ponavadi vpisujemo besedilo in ga ločujemo v odstavke s priveskoma <P> za začetek in </P> za konec odstavka. Odstavki so tako ločeni z eno prazno vrstico. Podobno kot pri podnaslovih lahko odstavkom določimo način poravnave s parametrom align.
To je besedilo, ki ga želimo na zaslonu prikazati v tipu črk, ki so enako široke. Ponavadi je to "Courier" tip črk, s katerim imamo možnost, da so tabulatorji, nove vrstice in več praznih mest skupaj poravnani enakomerno. Začetek in konec predhodno oblikovanega besedila označujeta priveska <PRE> in </PRE>.
V besedilu za določene citate ali opombe uporabljamo besedilo, ki se nekoliko odmakne od ostalega. Ponavadi se odmakne od levega roba besedila. Tako besedilo definirata priveska:
<BLOCKQUOTE> ... </BLOCKQUOTE>
Spodaj so navedeni elementi jezika HTML, ki nudijo možnost poudarjenega prikaza ali kako drugače ločenega besedila, ki mu dajemo posebni pomen.
<EM> ... </EM> : je privesek za poudarke, ki se ponavadi v brskalniku prikaže z nagnjenimi črkami (italic).
<CODE> ... </CODE> : je privesek za prikaz besedila, ki predstavlja računalniško kodo.
<STRONG> ... </STRONG> : za posebno pomembne poudarke, ki se ponavadi izpišejo krepko.
<BIG> ... </BIG> : za definiranje nekoliko večjih črk.
<SMALL> ... </SMALL> : za definiranje nekoliko manjših črk.
V nasprotju z prejšnjim, logičnim oblikovanjem, kjer uporabniki lahko v različnih brskalnikih sami nastavijo videz logično oblikovanih elementov, točno določeno oblikovanje dokončno in direktno določa obliko črk.
<B> ... </B> : poudarjeno besedilo (bold), se prikaže krepko izpisano.
<I> ... </I> : nagnjen tip črk (italic).
<U> ... </U> : besedilo je podčrtano (underline).
<S> .. </S> ali <STRIKE> .. </STRIKE> : besedilo je prečrtano (strikeout)
<SUB> ... </SUB> : besedilo je prikazano kot indeks (subscript) z manjšimi črkami.
<SUP> ... </SUP> : besedilo je prikazano kot potenca (superscript).
<TT> ... </TT> : prikaže besedilo, kot bi bilo napisano na tipkalni stroj.
<CENTER> ... </CENTER> : besedilo ali slike, ki sledijo so prikazane na sredini strani.
<BLINK> ... </BLINK> : uporabljamo za utripajoče besedilo.
<FONT size=?> ... </FONT> : s tem spreminjamo velikost črk, na mesto ? vstavimo število od 1 do 7.
<BASEFONT size=?> : nastavimo velikost osnovnega tipa črk (1 do 7), privzeta vrednost je 3.
<FONT color="#$$$$$$"> ... </FONT> : s tem določamo barvo črk, število $$$$$$ določa šestnajstiške vrednosti za barve po vrsti, prvi dve cifri rdečo, drugi dve zeleno in zadnji dve modro, npr. 00FF00 je zelena.
Zgoraj smo že prikazali kako besedilo razdelimo na odstavke. Besedilo pa lahko razčlenimo s skokom v novo vrstico in horizontalnimi črtami.
Skok v novo vrstico določa element z začetnim priveskom <BR>, ki pove brskalniku, da naj vstavi prekinitev vrstice in skok v nivo vrstico brez dodatne prazne vrstice. Ta element nima zaključnega priveska in ga ne moremo uporabiti v vseh drugih elementih jezika HTML.
S horizontalnimi črtami lahko lepo ločimo različna poglavja dokumenta. Uporabljamo jih predvsem za ločevanje pomembnejših delov od manj pomembnih, npr. osebni naslov, začetek in zaključek dokumenta. Privesek za ta element je <HR> s sledečimi parametri:
poravnava: <HR align=left | center | right>, uporabimo eno od možnosti ločenih z |.
debelina: <HR size=?>, namesto ? vstavimo ustrezno debelino črte v številu točk na zaslonu (pikslov).
širina: <HR width=?>, namesto ? vstavimo ustrezno širino črte v številu točk na zaslonu (pikslov).
širina v %: <HR width="?%">, namesto ? vstavimo procent širine črte glede na celotno širino okna.
brez 3D učinka: <HR noshade>, s tem izločimo 3D učinek, ki črto prikaže ubočeno oziroma izbočeno.
Parametre lahko navajamo tudi enega za drugim, pri čemer mora biti med njimi presledek.
Jezik HTML podpira sezname, ki omogoča enostavno lomljenje vrstic in enostavno naštevanje. Seznami lahko postavljajo zaporedne številke naštetih elementov. Sezname lahko tudi gnezdimo, pri tem pa moramo paziti, da gnezdenje ni pregloboko, ker to zmanjša preglednost dokumenta.
To je najosnovnejši primer seznama, ki se ponavadi predstavi z določeno oznako pred vsako navedeno točko. Tak seznam definira privesek, ki izhaja iz besede "unnumbered list":
<UL> ... </UL>
Seznamu lahko določimo parameter, ki predstavlja tip oznake pred točko v seznamu, in sicer:
<UL type=disc | circle | square> ... </UL>, kjer navedemo le eno od možnosti ločenih z |.
Znotraj za vsako točko vstavimo poseben privesek za označitev (list) <LI>, ki ne potrebuje zaključnega priveska.
Lahko ga imenujemo tudi urejen seznam (ordered list), ki pred posamezne točke seznama postavi zaporedne številke točk. Privesek je:
<OL> ... </OL>
Seznamu lahko določimo parameter, ki predstavlja tip številčenja pred točko v seznamu, in sicer:
<OL type=A | a | I | i | 1> ... </OL>, kjer navedemo le eno od možnosti ločenih z |.
Točke seznama označimo kot pri seznamu brez številčenja s priveskom <LI>.
V definicijskem seznamu vsako zaporedno točko sestavljata dva tipa, in sicer izraz, ki predstavlja definicijski izraz in besedilo, ki razloži definicijski izraz. Priveski za označitev posameznih delov seznama so:
<DL> ... </DL> : začetni in končni privesek definicijskega seznama (definition list),
<DT> : privesek pred definicijskim izrazom (definition term),
<DD> : privesek pred razlago definicijskega izraza (definition definition).
Jezik HTML omogoča vstavljanje kazalcev od ene točke
v trenutnem dokumentu do druge točke v istem ali drugem
dokumentu. Del besedila, ki vsebuje bralcu skrit kazalec (link)
na drug dokument, je pri prikazu drugače obarvan od drugega
besedila in/ali podčrtan.
Vsebina teh kazalcev so URL naslovi in dodatki, ki omogočajo
brskalniku, da v omrežju najde in naloži željen
dokument.
Za vstavitev kazalca v dokument HTML uporabimo ukaz:
<A href="URL"> ... </A>
Naslov URL vsebuje tip izvora (http, ftp, file, ...), naslov strežnika in lokacijo datoteke.
Primer:
<A href="http://www.lecad.fs.uni-lj.si">Laboratorij LECAD</A>
Ta način je primeren in uporaben pri daljših dokumentih, tako da imamo, npr. na začetku našega dokumenta kazalo, v katerem so kazalci na točke spodaj v istem dokumentu. V tem primeru moramo za določitev kazalca vstaviti naslednji ukaz:
<A href="#***"> ... </A>
Paziti moramo, da ne pozabimo vstaviti znaka "#", ki pove brskalniku, da je v nadaljevanju dokumenta ime označenega mesta, kamor se mora postaviti. V dokumentu mora biti to mesto označeno, in sicer se za to uporabi ukaz:
<A name="***"> ... </A>
V tem primeru moramo v svojem dokumentu, s pomočjo združevanja prejšnjih dveh ukazov, vstaviti naslednji ukaz:
<A href="URL#***"> ... </A>
URL mora kazati na določen naslov, kjer je v dokumentu izbrano mesto označeno s:
<A name="***"> ... </A>
Sledi primer uporabe kazalcev, ki je sestavljen iz dveh datotek .html in sicer Dokument.html in Zivljenjepis.html. Obe datoteki morata biti na istem direktoriju. V prvi Dokument.html je kazalec na drugo datoteko Zivljenjepis.html href="Zivljenjepis.html", kazalec na določeno mesto v isti datoteki href="#BIO" in kazalec na določeno mesto v drugi datoteki Zivljenjepis.html href="Zivljenjepis.html#NAS".
Datoteka Dokument.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Dokument</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
</HEAD>
<BODY>
<STRONG>To je dokument 1</STRONG>
<P>Kazalo: <BR>
- <A href="Zivljenjepis.html">življenjepis</A> <BR>
- <A href="#BIO">biografija</A> <BR>
- <A href="Zivljenjepis.html#NAS">naslov</A> <BR>
<P>
<A name="BIO">Biografija:</A>
<P>
<UL>
<LI>Članek 1
<LI>Članek 2
<LI>Članek 3
</UL>
</BODY>
</HTML>
Datoteka Zivljenjepis.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Življenjepis</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
</HEAD>
<BODY>
<STRONG>To je dokument 2</STRONG>
<P>Življenjepis: <BR>
Rojen 2.7.1970 v Mariboru.<BR>
Osnovna šola: Ivan Cankar<BR>
Srednja šola: Prva gimnazija<BR>
Visoka šola: Tehniška fakulteta<BR>
<HR>
<P>
<A name="NAS">Naslov:</A><BR>
<ADDRESS>
Dejan Neznani<BR>
Neznana ulica 35<BR>
2111 Nezano mesto
</ADDRESS>
</BODY>
</HTML>
V večini brskalnikov je možno prikazovati slike v različnih formatih (.gif, .jpg, .jpeg, .xbm, .png). Najenostavnejši ukaz za vključevanje slike v dokument HTML je:
<IMG src="URL_datoteke_slike">
Pod URL_datoteke_slike se razume naslov strežnika in lokacija datoteke slike po direktorijih. Uporablja se tudi relativno podajanje lokacije datoteke slike glede na direktorij s trenutnim dokumentom.
Primer:
<IMG src="portret.gif"> <IMG src="slike/portret.gif">
V prvem primeru mora biti datoteka s sliko portret.gif na istem direktoriju kot trenutni dokument, kjer sliko kličemo, v drugem primeru pa je datoteka s sliko na poddirektoriju slike.
V ukaz za prikaz slik sta v jeziku HTML vključena dva parametra, ki določata velikost slike. To sta višina (height) in širina (width), ki sta podana v enotah števila točk na zaslonu (pikslih).
Primer:
<IMG src="portret.gif" height=100 width=77>
V primeru je določena višina slike na 100 točk in širina na 77 točk zaslona.
Slike imajo glede na besedilo lahko različen položaj, ki ga določimo s parametrom:
<IMG src="URL" align=TOP | BOTTOM | MIDDLE | LEFT | RIGHT>
Izberemo le eno od možnosti ločenih z |, ki pomenijo namestitev zgoraj, spodaj, na sredini, levo ali desno od besedila v istem odstavku.
Poleg gornjih obstajajo še parametri za nastavitev oddaljenosti besedila od slike v horizontalni in vertikalni smeri, debeline morebitnega roba okrog slike ter parameter, ki vsebuje tekst, ki se prikaže, če brskalnik ne omogoča prikaza slik ali je ta možnost izklopljena.
Tabelo v jeziku HTML sestavljajo določeni elementi, ki jim lahko določamo različne parametre. Osnovni elementi tabele so: naslov, vrstica in celica
Preden kreiramo elemente tabele moramo navesti ukaz za tvorbo tabele <TABLE>, sledijo ukazi za naslov, vrstice in celice, na koncu moramo tabelo zaključiti s </TABLE>. Spodaj so v dveh tabelah navedeni in opisani elementi tabele v jeziku HTML ter njihovi parametri.
| Element | Opis |
|---|---|
| <TABLE> ... </TABLE> | Definira tabelo v HTML. Lahko vsebuje tudi parameter border, s katerim nastavimo debelino okvirja tabele. |
| <CAPTION> ... </CAPTION> | Definira naslov in opis tabele, ki ga lahko s določitvijo parametra align=TOP | BOTTOM postavimo nad ali pod tabelo. |
| <TR> ... </TR> | Definira vrstico znotraj tabele. Vsebuje lahko parametre, ki so prikazani spodaj v posebni tabeli parametrov. |
| <TH> ... </TH> | Definira besedilo naslova celice znotraj tabele. Vsebuje lahko različne parametre. |
| <TD> ... </TD> | Definira osnovno enoto tabele, to je celico. Besedilo v celici je privzeto poravnano levo. Tudi celice lahko vsebujejo različne parametre. |
| Parameter | Opis |
|---|---|
| align=LEFT | CENTER | RIGHT | horizontalni položaj v celici |
| valign=TOP | MIDDLE | BOTTOM | vertikalni položaj v celici |
| colspan=n | število (n) kolon, ki se združijo v eno celico |
| rowspan=n | število (n) vrstic, ki se združijo v eno celico |
| nowrap | izklopi združevanje besed znotraj celic |
Sledi primer uporabe tabel:
<HEAD> <TITLE>Tabela</TITLE> <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-2"> </HEAD> <BODY> <STRONG>To je tabela</STRONG> <TABLE border=3> <CAPTION align=BOTTOM>Tabela prehrane</CAPTION> <TR> <TH colspan=2>Prehrana</TH> </TR> <TR> <TH>Sadje</TH><TH>Meso</TH> </TR> <TR> <TD>Hruške</TD><TD>Teletina</TD> </TR> <TR> <TD>Banane</TD><TD>Govedina</TD> </TR> <TR> <TD>Pomaranče</TD><TD>Perutnina</TD> </TR> </TABLE> </BODY> </HTML>
V besedilo dokumenta lahko vstavimo komentarje, ki jih brskalnik ne prikaže. Sintaksa za komentar je:
<!-- ... -->
Paziti moramo, da ne napišemo samo enega znaka "-".
V novi specifikaciji jezika HTML 4 so določeni načini in ukazi za pisanje matematičnih enačb, vendar zdaj obstoječi brskalniki še ne omogočajo njihove uporabe. Za prikaz enačb si lahko pomagamo z urejevalniki besedil, ki omogočajo shranitev enačbe kot slike v določenem formatu. Tako npr. lahko v urejevalniku besedil MSWord označimo enačbo, jo shranimo v odložišče (clipboard) in jo prilepimo (paste) v urejevalniku slik PaintShopPro, kot novo sliko. Tu jo dodatno obdelamo in shranimo v določenem formatu v datoteko, ki jo navedemo kot referenco v dokumentu HTML, kjer želimo imeti prikazano matematično enačbo.
Pri pisanju matematičnih enačb si lahko pomagamo tudi s programom EzMath.exe, ki omogoča zapisovanje enačb preko svojega urejevalnika. Rezultat je slikovno lepo oblikovana matematična enačba, ki jo skupaj s celotnim oknom programa s kombinacijo tipk Alt + PrtSc prenesemo v odložišče in potem podobno kot prej v program PaintShopPro. Nadaljnji postopek je enak kot je opisano zgoraj.
Janez Vrhovec