HTML

1. HTML

2. HTML dokument Datoteko HTML pričnemo s posebno značko, ki določa različico uporabljenega jezika HTML. Sledi pa opis elementa html - to je osnovni oz. korenski element, ki vsebuje vse ostalo. Njegova vsebina je sestavljena iz glave (head) in telesa (body).

3. V glavi opišemo dokument. Z elementom title moramo določiti naslov, ki se prikaže v naslovni vrstici brskalnika, z drugimi elementi pa lahko določimo še način kodiranja, ki določa, na kakšen način smo zapisali znake, ki jih ni v tabeli ASCII, ključne besede, ki raznim iskalnikom pomagajo pri uvrščanju spletne strani v ustrezne skupine, obliko posameznih elementov, vključimo lahko pomožne datoteke ... Kar napišemo v glavi, v oknu brskalnika ni vidno. Do teh podatkov pridemo, če to posebej zahtevamo (na primer z ukazom Tools, Page Info v brskalniku Mozilla Firefox).

4. Če spletno stran sestavljamo pod operacijskim sistemom Windows s slovenskimi nastavitvami, potem bo način kodiranja verjetno windows-1250, kot smo zapisali v zgornjem primeru. Pod operacijskim sistemom Linux bi za način kodiranja napisali iso-8859-2, ki ustreza kodni tabeli Latin2. Vse bolj priljubljeno pa je kodiranje utf-8, ki podpira vse znake iz tabele Unicode, seveda pa moramo imeti ustrezen urejevalnik datotek, ki takšno kodiranje podpira. To delno omogoča TextPad (pri shranjevanju datoteke je treba izbrati kodiranje UTF-8).

5. Telo V telesu napišemo vse, kar želimo, da brskalnik prikaže v svojem oknu. Običajno tu opišemo besedilo, slike, tabele, sezname in druge elemente, ki sestavljajo spletno stran. Ti elementi so podrobneje opisani v naslednjih poglavjih

7. Naslovi • HTML jezik pozna šest različnih naslovov. Naslovi so enostavno označeni s številkami od 1 do 6. Glavni naslov se začne s številko 1. • Sintaksa elementa je naslednja: • <Hy> Besedilo naslova </Hy> y = 1..6 • <Hy ALIGN=LEFT|RIGHT|CENTER> Besedilo naslova </Hy>

8. Primer: • <H1> Ko odpove vse drugo, preberi navodila! </H1> <H2> Ko odpove vse drugo, preberi navodila! </H2> <H3> Ko odpove vse drugo, preberi navodila! </H3> <H4> Ko odpove vse drugo, preberi navodila! </H4> <H5> Ko odpove vse drugo, preberi navodila! </H5> <H6> Ko odpove vse drugo, preberi navodila! </H6> • <H1> SLOVENIJA </H1> <H1 ALIGN=LEFT> SLOVENIJA </H1> <H1 ALIGN=RIGHT> SLOVENIJA </H1> <H1 ALIGN=CENTER> SLOVENIJA </H1>

10. Odstavki • V običajnih urejevalnikih besedil s tipko ENTER povzročimo prelom vrstice oziroma zaključimo odstavek. V HTML dokumentih pa ni tako. Za dolžino vrstice nam ni potrebno skrbeti, ker pregledovalniki sami poskrbijo za ustrezen prelom. Za lažjo predstavo si zapišimo naslednji tekst: • <H1 ALIGN=CENTER> NERECIPROčNI ZAKON PRIčAKOVANJA </H1> <P> 1. Negativna pričakovanja dajejo negativne rezultate. 2. Pozitivna pričakovanja dajejo negativne rezultate. </P>

11. V izvornem dokumentu smo naredili prelom vrstice, vendar je pregledovalnik prelom spregledal. Iz zagate se rešimo tako, da vsak nov odstavek ukažemo z elementom <P>.

13. Prejšnji primer popravimo na naslednji način: • <H1 ALIGN=CENTER> NERECIPROčNI ZAKON PRIčAKOVANJA </H1> <P> 1. Negativna pričakovanja dajejo negativne rezultate.</P> <P>2. Pozitivna pričakovanja dajejo negativne rezultate. </P>

15. Sintaksa elementa je naslednja: • <P> Vsebina odstavka </P> <P ALIGN=LEFT|RIGHT|CENTER > Vsebina odstavka </P> Opomba: • Oznaka za konec odstavka </P> ni obvezna.

16. Primer: <H2> IZVLEčEK IZ UNIVERZALNIH ZAKONOV ZA NAIVNE IN?INIRJE </H2> <P> Takoj ko boš sestavil stroj, bo na tvoji delovni mizi nekaj delov odveč. </P> <P> Tranzistor zavarovan z varovalko, bo varovalko varoval tako, da bo crknil prej kot ona. <P> Deli, ki se jih nikakor ne da sestaviti narobe, bodo sestavljeni prav tako. <P> Različne poravnave odstavkov! <P ALIGN=RIGHT> Odstavek je desno poravnan! <P ALIGN=CENTER>Odstavek je poravnan na sredino! </P>

18. Vodoravne črte Z oznako <HR> narišemo vodoravno črto, ki sega od levega do desnega roba pregledovalnika. Z vodoravnimi črtami povečamo preglednost dokumentov. črti lahko spreminjamo debelino (SIZE) in širino (WIDTH ; v odstotkih širine okna). • Sintaksa elementa je naslednja: • <HR> <HR SIZE=4 WIDTH=50%>

19. Seznami Sezname v HTML uporabimo, kadar želimo po vrsti našteti več stvari. Obstaja več vrst seznamov, ki jih uporabljamo za naštevanje, številčenje ali opisovanje.

20. Naštevanje Za naštevanje uporabimo element ul (unordered list), znotraj katerega naštejemo elemente li (list item), ki predstavljajo posamezne točke seznama.

22. Številčenje Za številčenje uporabimo element ol (ordered list), znotraj katerega naštejemo elemente li (list item), ki predstavljajo posamezne točke seznama.

24. Opisovanje Opisovanje je malo bolj zapleteno kot naštevanje in številčenje. Uporabimo element dl (definition list), znotraj katerega naštejemo elemente dt (definition term) in dd (definition description). Prvi predstavljajo pojme, ki jih opisujemo, drugi pa njihove opise.

27. Gnezdenje seznamov Omenjene vrste seznamov lahko tudi gnezdimo. To pomeni, da lahko naredimo seznam znotraj drugega seznama (kot točko ali njen del). Pri tem moramo paziti, da značke zaključujemo v obratnem vrstnem redu, kot jih odpiramo.

30. Slike • Sliko vstavimo v dokument s pomočjo elementa img, ki je brez vsebine, torej nima zaključne značke. Element img je vrstični element, kar pomeni, da se slika v dokumentu obnaša kot en velik znak. Če želimo večjo sliko prikazati samostojno, jo moramo obdati z bločnim elementom. Element img ima nekaj pomembnih lastnosti:

31. lastnostjo src določimo naslov slike (ime datoteke). Če se slika nahaja v isti mapi kot spletna stran, je za vrednost lastnosti dovolj napisati samo ime datoteke, kako se sestavi naslov datoteke, ki se nahaja kje drugje (v drugi mapi, na drugem strežniku), pa je podrobneje opisano v poglavju o aktivnih povezavah. Slika mora biti zapisana na datoteki oblike GIF, JPG ali PNG.

32. Z lastnostma width (širina) in height (višina) določimo velikost pravokotnega področja, namenjenega prikazu slike. Če velikosti ne predpišemo, bo slika prikazana v njeni originalni velikosti (kot je zapisano na datoteki). Če podamo samo širino ali samo višino, bo slika tako široka oziroma visoka, kot smo zahtevali, pri čemer bo razmerje med njeno širino in višino ohranjeno (slika ne bo popačena). Če pa podamo širino in višino, bo prikazana slika točno tako velika, kot smo zahtevali (pri tem se lahko slika tudi popači). Priporočljivo je, da vedno podamo obe dimenziji slike. Samo tako bo brskalnik lahko že med nalaganjem strani rezerviral dovolj velik prostor, kjer bo kasneje prikazal sliko.

33. Z lastnostjo alt na kratko opišemo, kaj se nahaja na sliki. Opis slike se prikaže, če z miško nekaj sekund počivamo na njej (prikaže se v rumenem okvirčku) ali pa če pregledovalnik slike ne more prikazati (prikaže se namesto slike).

35. Tabele • Tabele v HTML nam omogočajo, da v obliki vrstic in stolpcev razporedimo elemente, kot so na primer besedila, slike, seznami in celo druge tabele. Tabelo sestavimo iz posameznih vrstic, ki jih lahko združujemo v skupine, vsaka vrstica pa je sestavljena iz posameznih celic.

36. Tabelo opišemo z elementom table. Njegova vsebina se prične z morebitnim opisom (caption), ki se prikaže nad tabelo sredinsko poravnan čez širino celotne tabele. Za opisom lahko z elementi col (column) in colgroup (column group) določimo lastnosti stolpcev, na koncu pa navedemo še vsebino posameznih celic. Za opis navadnih celic uporabljamo element td (table data), za opis naslovnih, ki se običajno pojavljajo v prvi vrstici ali prvem stolpcu pa element th (table heading). Celice združujemo v vrstice, ki jih opišemo z elementi tr (table row), vrstice pa v skupine (glava, noge in telo), ki jih opišemo z elementi thead, tfoot in tbody (v tem vrstnem redu). Glavo tabele sestavljajo vrstice, ki se pri izpisu ponovijo na vrhu vsake strani, noge tabele pa vrstice, ki se ponovijo na dnu vsake strani. Tabela lahko ima več teles. Če so glava in noge prazni in je telo eno samo, nam značk za telo ni potrebno pisati (dovolj je samo opisati njegovo vsebino).