Primož Jakopin
Postavitev spletne strani v jeziku HTML
pri predmetu Jezikovne tehnologije


  1. Uvod
  2. Primeri strani in uporabni naslovi
    1. Pet zanimivih predstavitvenih strani
    2. Uporabni naslovi na internetu
  3. Pisanje predstavitvene strani
    1. Enostavna predstavitvena stran
    2. Jezik HTML
    3. Boljša predstavitvena stran
    4. Barvna lestvica
    5. Slike kot ozadja strani
  4. JavaScript in Java
    1. Primeri uporabe Javascripta
    2. Primer uporabe ukaza Canvas za risanje
    3. Internetni čas
  5. Preverjanje zapisa spletne strani
  6. Nekaj drugih uporabnih naslovov na internetu
    1. Navodila za postavitev strani iz domačih logov
    2. Ponudniki dostopa in prostora na svetovnem spletu
    3. Brezplačen prostor na svetovnem spletu
  7. Fotografija
    1. Prenos fotografij v digitalno obliko
    2. Digitalni fotoaparati
    3. Priprava digitalnih slik
    4. Arhiviranje fotografij in priprava za objavo na spletu
    5. Digitalne fotografije na papirju
  8. Film
    1. Kratek film v lastni režiji
    2. Mobilni telefoni
  9. Glasba
  10. Sklep

Uvod

        Predstavitvena stran (angl. home page, sinonim domača stran) pove o svojem nosilcu tisto najpomembnejše, kar naj bi o njem vedela domača in svetovna komunikacijsko sodobna javnost. Internet postaja vsak dan bolj živa svetovna enciklopedija, osnovni vir informacij, v vseh okoljih, v akademskem okolju pa še posebej. Tako ne gre drugače, kot da smo vsi živo prisotni tudi na ta način. Dela ni prav veliko, marsikdaj pa pride predstavitvena stran zelo zelo prav, tako doma kot, še bolj, na tujem.
        Stran mora biti shranjena na strežniku (angl. server), vozliščnem računalniku svetovnega omrežja, ki mora izpolnjevati nekaj osnovnih zahtev. Predvsem mora biti

        Navadno bo vse te zahteve najhitreje izpolnil strežnik vaše matične ustanove, če je ne more, če ga ni ali če ni dostopen pa je treba izbrati enega izmed ponudnikov, navedenih v razdelku Ponudniki dostopa in prostora na svetovnem spletu.

        Spletne strani vedno gledamo s posebnim programom, ki mu po slovensko pravimo pregledovalnik (angl. browser, slovenska sinonima sta brskalnik in brkljalnik). Izbire pri pregledovalnikih je kar nekaj, na prvih treh mestih, kar se tiče števila uporabnikov, so bili avgusta 2016 Googlov Chrome, Applov Safari in Mozillin Firefox.


Primeri strani in uporabni naslovi

        Preden se resneje lotimo oblikovanja lastne predstavitvene strani, je priporočljivo, da si ogledamo kakšno že narejeno, poleg tega pa še nekaj naslovov na internetu, ki jih morda utegnemo citirati na naši strani.

Pet primerov predstavitvenih strani

        Poleg vzorčne osebne predstavitvene strani v slovenskem in angleškem jeziku, ki jo bomo videli malo kasneje, je na internetu še mnogo drugih, ki so vredne ogleda. Ob obilici bolj zapleteno sestavljenih in tudi nagrajenih strani, ki kar kipijo od najnovejših programskih dosežkov, migetajočih slikic in bolj ali manj posrečene glasbe, je tudi kaj preprostejšega, pa vseeno zanimivega:

         Miran Hladnik je profesor na Oddelku za slovenski jezik Filozofske fakultete in naš prvoborec na področju uvajanja uporabe interneta v literarni vedi. Njegova stran je kratka in jasna, najpomembnejše pa je, da od vsega pomembnega, kar je napisal ali kar želi povedati, niso navedene samo reference, ampak tudi kazalci, s katerimi ustrezne dokumente takoj prikličemo na zaslon.
         Franc Marušič - Lanko je docent za jezikoslovje na Fakulteti za humanistiko Univerze v Novi Gorici, sicer znan tudi kot jamar. Stran je bolj špartanska, je pa mogoče tudi na njej takoj priti do vseh Marušičevih del.
        Nancy Ide je ena redkih lastovk na visokem nebu računalniške znanosti, še posebej tiste o besedilih in ima zelo skrbno in premišljeno narejeno predstavitveno stran; le za njeno sliko je treba klikniti tu. Ženske so sicer prispevale pomemben delež v razvoju računalništva, npr. pri razvoju prvega elektronskega računalnika ENIAC ali kasnejših, že bolj integriranih računalnikov iz začetka 60-ih let 20. stoletja. In kdo je bila prva izmed njih, ki se je sicer ukvarjala z matematiko in znanostjo, pa ne brez nekaj očetove poetične žilice?
         Eric Weisstein, astronom in sodelavec podjetja Wolfram Research, je eden največjih internetnih polihistorjev - na svetovni splet je spravil izredno veliko koristnih in uporabnih podatkov.
        Stran Costa Navarino je zaradi lepega oblikovanje in z njim povezane predstavitve vsebin dosegla uvrstitev na Seznam najlepših spletnih strani podjetja 1stwebdesigner, ki ga vodi Daniel Kurdoghlian.

        Poleg teh petih primerov so vedno zanimive tudi strani, dobitnice priznanj Webby, ki jih vsako leto podeljuje The International Academy of Digital Arts and Sciences iz San Francisca.

Vsako stran, ki nam je všeč, se splača, ko bomo osnove jezika HTML vsaj za silo poznali, pogledati v njeni izvorni obliki. Navadno to dosežemo tako, da pritisnemo na desno tipko na miši in potem iz seznama možnosti izberemo Ogled vira strani (angl. View source). Marsičesa se lahko naučimo na ta način, kar bi bilo s pomočjo učbenikov dosti manj zanimivo in težje.

Uporabni naslovi na internetu

        Poleg vzorčnih predstavitvenih strani pridejo zelo prav tudi nekateri naslovi na internetu, s katerimi si lahko pomagamo pri izdelavi lastne tako da npr. da napravimo povezavo nanje ali pa zaradi splošnega vtisa - te strani so namreč narejene precej drugače kot osebne:


Pisanje predstavitvene strani

        Za izdelavo predstavitvene strani potrebujemo dva osnovna programa - urejevalnik, s katerim jo bomo pisali in pregledovalnik, ki nam bo služil za preizkušanje že napravljenega. Pregledovalnik že imate in si tudi z njim že kar nekaj upate, ostane pa še urejevalnik. Predstavitvenih strani se lahko lotimo na enega izmed treh načinov. Prvi je s programskimi orodji za tiste, ki se s pisanjem teh strani zelo veliko, recimo poklicno ukvarjajo (primer je Microsoftov Frontpage) in kjer je treba že precej dobro vedeti, kaj se dogaja na izvornem nivoju datotek. Drugi način je s kakim izmed tako imenovanih urejevalnikov za jezik HTML, ki jih je veliko na internetu, dober pregled je na strani podjetja Tucows in kjer pišemo bolj ali manj v izvorni kodi, le da nam je delo precej olajšano. Ti programi spadajo večinoma v kategorijo shareware, se pravi da jih lahko mesec dni brezplačno preizkušamo, potem pa moramo proizvajalcu nekaj malega plačati. Tretji način je, da uporabimo kak urejevalnik, ki je že pri roki, npr. Beležnico (angl. Notepad ), ki jo že dobimo z operacijskim sistemom računalnika. Ker orodja,omenjena pri prvem in drugem načinu niso čisto enostavna in povsod dostopna, ker se s tem delom najbrž ne boste poklicno ukvarjali in ker želimo spoznati, za kaj pri celi stvari dejansko gre, je bolje, da začnemo z nazadnje omenjenim najpreprostejšim urejevalnikom, ki ga ni bo treba daleč iskati in ki ga res ni težko uporabljati.

Enostavna predstavitvena stran

        Našo stran bomo najprej zapisali na disk (ali disketo) računalnika, na katerem delamo, jo tam preizkusili in jo šele potem, ko bo povsem gotova in ko bomo z njo zadovoljni, prenesli na strežnik, od koder bo dostopna še vsem ostalim. Odprimo Beležnico - z izbirami Start->Programi->Pripomočki->Beležnica in napišimo naslednjih nekaj vrstic:

<html>
<head>
<title>Marija Novak - predstavitvena stran</title>
</head>
<body>
Marija Novak<br>
<br>
Dobrodošli na moji predstavitveni strani.<br>
Če bi mi radi kaj sporočili, mi pišite na naslov:<br>
marija.novak@ung.si<br>
<br>
Nasvidenje!<br>
</body>
</html>

Namesto Marija Novak, najpogostejšega slovenskega para (ime,priimek), bomo seveda napisali svoje ime in svoj priimek. Ko smo gotovi, shranimo besedilo z izbiro Datoteka->Shrani kot, v nov podimenik na disku, ki mu damo npr. ime "Eva", datoteki pa "index.html".
        Za ime index.html se odločimo zaradi tega, ker je to dogovorjeno ime datoteke, ki jo gre spletni pregledovalnik iskat v nekem podimeniku na strežniku, če imena datoteke ne navedemo. Za lažje razumevanje si oglejmo primer. Denimo, da sem Alenka Valentinčič in da je stric zakupil domeno www.valentincic.net ter v njej odprl podimenik alenka, ki mi je na razpolago. Vanj želim shraniti svojo osebno stran. Če ji dam ime index.html, bo za ogled strani na spletu dovolj napisati naslov http://www.valentincic.net/alenka, če pa recimo osebna_stran.html bo moral biti naslov daljši: http://www.valentincic.net/alenka/osebna_stran.html. Na kratko - naslova http://www.valentincic.net/alenka in http://www.valentincic.net/alenka/index.html sta, kar se gledalcev strani tiče, enakovredna. Ali še enkrat - če imena datoteke v podimeniku pregledovalniku ne damo, bo skušal v njem najti datoteko index.html in jo odpreti.
        Ime podimenika smo pustili namenoma kratko, da ga bomo lahko zlahka našli tudi s programom za prenos datotek na strežnik. Ko je datoteka shranjena, Beležnice ne zapremo, ampak jo le skrijemo v spodnjo črto na zaslonu in spet poženemo pregledovalnik (npr. Internet explorer) in v njem kot naslov vnesemo:

C:\Program Files\Eva\index.html

Če ga pri tipkanju nismo nič polomili, zagledamo na zaslonu nekaj podobnega kot je napisano spodaj:


Marija Novak

Dobrodošli na moji predstavitveni strani.
Če bi mi radi kaj sporočili, mi pišite na naslov:
marija.novak@ung.si

Nasvidenje!


Če je kaj narobe, če nam kaj ni všeč, se vrnemo v Beležnico, popravimo, kar je treba, shranimo (tokrat kar z ukazom Shrani, spet pokličemo pregledovalnik in tam izberemo Pogled -> Osveži ali, še hitreje, kar ikono Osveži (angl. Refresh).
        Postopek nadaljujemo tako dolgo, dokler z izdelkom nismo zadovoljni.

Jezik HTML

Oglejmo si prvo vrstico izvorne kode naše predstavitvene strani še enkrat:

<html>

Pregledovalniku pove, da gre za dokument, napisan v jeziku HTML (angl. HyperText Markup Language), hipertekstnem ali nadbesedilnem označevalnem jeziku; zadnji izraz je predlagal Miran Hladnik v drugem delu svojega prispevka Elektronski literarnovedni viri in računalniško pisanje.
       Jezik HTML je podmnožica jezika SGML (Standardni splošni označevalni jezik, akronim iz angl. Standard Generalized Markup Language); oboje je bilo razvito v CERN-u, evropskem središču za jedrske raziskave v Ženevi z namenom, da bi omogočili kar najbolj pregledno in enovito označevanje dokumentov v računalniškem okolju. HTML je izumil Tim Berners-Lee (zelo poučna sta njegova predstavitvena stran in predavanja sodelavcev), ki zdaj vodi svetovnospletni konzorcij (angl. W3C, iz World Wide Web Consortium).
        Z jezikom HTML so označene strani na svetovnem spletu (angl. WWW); je kar pregleden in čez nekaj časa, ko se njegovih oznak malo privadimo, nam vse skupaj ne deluje več nečloveško in zoprno. Jezik je, če ga primerjamo z marsikaterimi novejšimi strukturami, zaradi fiksnih oznak celo prav simpatičen, predvsem pa omogoča pisanje zelo kompaktnih in obvladljivih spletnih strani. Leta 1999 je bil sprejet nov standard za označevanje dokumentov na internetu, XML (akronim iz Extensible Markup Language), kjer v posebni datoteki (DTD, od angl. Document Type Definition), ločeni od spletne strani same, predpišemo kakšne oznake bomo v dokumentu uporabljali in kaj naj pomenijo. S tem lahko zapišemo tudi zelo zapletene in komplicirane podatkovne in besedilne strukture, za aplikacije skoraj ni več omejitev. Most med jezikoma HTML in XML je XHTML, pri katerem je različica HTML 4.01 oblikovana kot aplikacija v jeziku XML.
        Novejše različice Microsoftovih izdelkov (Office od 2003 naprej), npr. MS Word, ponujajo pri shranjevanju dokumentov, kadar izberete način shranjevanja Shrani kot spletno stran, vsaj dve možnosti. Pri izbiri prve možnosti shranijo zapisano v formatu XML, z zelo veliko dodatnimi oznakami, da bi bila spletna različica kar najbolj podobna osnovni. To zelo poveča velikost shranjene kode (tudi za faktor 3 in več), skoraj do neprepoznavnosti pa zmanjša berljivost te spletne kode. Zato je priporočljivo uporabiti način shranjevanja Kot spletno stran, filtrirano. Na ta način se dokument shrani v formatu HTML, bolj pregledno in čitljivo, ciljna datoteka je pa tudi nekajkrat manjša in za hranjenje in promet po internetu veliko primernejša.
       O jeziku HTML je na internetu v angleščini zelo veliko napisanega, v slovenščini seveda veliko manj. Nekaj virov:         Najprej čisto načelna jezikovna pripomba vsem avtorjem slovenskih navodil - stvarna imena pišemo v slovenščini za samostalniki in ne pred njimi. Tako delajo v pivovarni ob Celovški cesti našemu jeziku veliko krivico, z vsakim izveskom, kjer so napisali "UNION pivo" namesto pravilnega pivo UNION in tudi avtorji obravnavanih virov bi lahko vedeli, da ni prav "HTML jezik" ampak jezik HTML. Sicer pa si oglejmo vire enega za drugim:
         Prvi vir je napisal dr. Matjaž Zaveršnik s Fakultete za matematiko in fiziko ljubljanske univerze. Je kratek in jedrnat, za učenje osnov zelo primeren, poleg tega pa vključuje tudi obrazce.
        Nadaljnja vira sta dve slovenski knjigi s to tematiko. Obe sta na razpolago v večjem številu knjižnic, informacijo o tem, kje ju imajo in ali je kak izvod še prost, dobite pa v slovenskem vzajemnem katalogu (Vzajemna bibliografsko-kataložna baza podatkov COBIB); še najhitreje tako, da pri iskanju v rubriko "jezik" napišete "slv", v rubriko "besede iz naslova" pa "HTML".
        Naslednji na seznamu je kratek in jedrnat priročnik, ki so ga napisali pri konzrciju World Wide Web. Na zelo pregleden način je opisano vse bistveno jezika HTML.
        Sledi vir, ki bi mu lahko rekli tudi kratek spletni pravopis, izpod peresa že omenjene vrhunske avtoritete pride zelo prav, ko se z jezikom HTML že nekako znajdemo, pa bi radi dosegli, da našim stranem tudi zahtevnejši uporabniki ne bodo imeli kaj očitati. Obsežnejše podobno delo je Web Style Guide, ki ga je napisal Patrick J. Lynch z ameriške univerze Yale.
        Zadnji na seznamu je interaktivni vodič, približno v stilu knjig "Za telebane", ki ga je napisal Joe Burns.

Boljša predstavitvena stran

        Naša prva predstavitvena stran je bila kratka in lepa. Življenje pa, kot bi rekel prijatelj iz Zahodnega gozda, je trdo in nepravično. Da bi bila stran res sprejemljiva, ji še precej manjka, potrebuje pa tudi svojo sestro v angleškem jeziku.
        Najprej dopolnimo zaglavje, del spletne strani med oznakama za začetek zaglavja <head> in za konec: </head>. Namenjeno je predvsem pregledovalniku in vsebuje razne podatke o spletni strani, ki pa jih na strani, kot jo vidi uporabnik na zaslonu računalniku uporabnik, seveda ni videti. Doslej je vsebovalo samo naslov spletne strani:
<head>
<title>Marija Novak - predstavitvena stran</title>
</head>

zdaj pa ga dopolnimo v:

<html>
<head>
<title>Marija Novak - predstavitvena stran</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta http-equiv="content-language" content="sl">
<meta name="author" content="Marija Novak">
<meta name="copyright" content="Marija Novak">
<meta name="revised" content="26.2.2007">
<meta name="description" content="Zanima me merjenje
kvantitativnih pojavov v slovenskem in angleškem jeziku.
Ukvarjam se tudi s fotografiranjem metuljev.">
<meta name=keywords content="predstavitvena stran, domača stran, slovenski jezik, angleški jezik, kvantitativno jezikoslovje, računalniška lingvistika, fotografija, metulji">
</head>

Oznako za naslov in njeno vsebino že poznamo, pregledovalnik jo ima bolj za lastno uporabo, izpiše se le na začetku zunanjega okvira okna, v katerem bo nekdo gledal stran. Naslov uporabijo tudi informacijski servisi, o katerih bo tekla beseda še malo kasneje, za prvo vrstico izpisa informacije o naši strani. Sledi sedem oznak <meta ...>; teh oznak v jeziku HTML ni treba posebej končati, ne objemajo kakega besedila, njihova vsebina pa je, kot že rečeno, namenjena predvsem pregledovalniku samemu in drugim programom, ki bodo imeli s to stranjo na internetu še kaj opraviti. V prvi oznaki je najpomembnejše določilo charset=windows-1250, ki pregledovalniku pove, da bomo uporabljali okenski nabor znakov z oznako 1250. To so predvsem posebne črke tkim. srednje in vzhodne Evrope (angl. CEE - Central and Eastern Europe) brez cirilice, se pravi češke, poljske, madžarske in tudi naši sičniki in šumniki. V njem od črk, ki bi si jih človek želel, zaradi italijanščine in francoščine, manjkajo predvsem samoglasniki s krativcem. Alternativna izbira, s podobnim, le malo skromnejšim naborom črk tega področja, je charset=ISO-8859-2; razlika med naboroma ISO-8859-2 in windows-1250 je večja univerzalnost prvega - njegove črke naj bi prav videli vsi uporabniki interneta v tem delu Evrope, tudi tisti, ki nimajo računalnika z okenskim operacijskim sistemom (na tehniških fakultetah in inštitutih je veliko delovnih postaj z operacijskim sistemom UNIX). Mi smo pri naboru windows-1250 ostali le zaradi enostavnosti - zaradi tega, da lahko za urejanje strani uporabimo katerikoli urejevalnik pod okni, ne samo posebnih, ki imajo že vgrajen tudi filter za ISO-8859-2 (EVA npr. ga ima). Hiba nabora ISO-8859-2, če bi se odločili zanj, je le v tem, da v vrstici <title> ... ni priporočljivo pisati črk č, ž in š - pregledovalnik jih bo na dnu in na vrhu zaslona pokazal narobe vsaj na 75% obstoječih računalnikov, to je tistih z okenskim operacijskim sistemom. Nabor ISO-8859-2 se imenuje tudi Latin 2 in je standardiziran - mednarodna organizacija za standarde (ISO - akronim iz angl. International Standards Organisation) ga je sprejela leta 1987.
        Standard Unicode, ki je namenjen uporabi vseh vrst pisav na računalnikih, tudi grškim črkam, cirilici, arabskim črkam, kitajskim in japonskim pismenkam:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

je že zelo na pohodu, ga pa operacijski sistem, ki je zdaj najbolj v uporabi (Okna), še ne podpira povsod, recimo v Beležnici ne, in zato mi, vsaj za zdaj, ostanemo pri naboru windows-1250. Naslednja oznaka:

<meta http-equiv="content-language" content="sl">

pove, da je vsebina strani napisana v slovenskem jeziku (sl); šifra za angleščino je en, oziroma, če želimo biti še bolj natančni, en-gb ali en-us. Seznam kod jezikov najdemo na tej strani. Sledijo vrstice s tremi določili author, copyright in revised s katerimi povemo, kdo je avtor strani, kdo nosilec avtorskih pravic zanjo in kdaj je bila nazadnje spremenjena. Zatem sta na vrsti še zadnji določili zaglavja, description in keywords:

<meta name="description" content="Zanima me merjenje
kvantitativnih pojavov v slovenskem in angleškem jeziku.
Ukvarjam se tudi s fotografiranjem metuljev.">
<meta name=KEYWORDS content="predstavitvena stran, domača stran, slovenski jezik, angleški jezik, kvantitativno jezikoslovje, računalniška lingvistika, fotografija, metulji">

ki sta skupaj z naslovom namenjena internetovim iskalnim servisom, kakršni je npr. ameriški Google, ki je trenutno največji in najbolj uspešen. Vsi, ki želijo, da bi njihovo stran na internetu našel še kdo, ki njenega naslova ne pozna, mu zaupajo vsebino strani. Google (ali drug ustrezen servis) jo, z vsemi besedami vred, shrani v svoj indeks, po katerem lahko potem po želji poizvedujemo. V primeru, da se naša predstavitvena stran prikaže med zadetki poizvedbe na Google-u, bo vsebina vrstice z oznako title izpisana najprej, takoj pod njo pa ena ali dve vrstici opisa (angl. description). Zato je važno, da naslov ni daljši kot eno vrstico (70 znakov), opis pa ne kot dve oziroma približno 150 znakov (črk in ločil). V rubriko gesel (angl. keywords) napišemo ključne besede, besede in fraze (lahko jih je zelo veliko), za katere domnevamo, da vsebino naše strani dobro opisujejo, jih pa v samem besedilu strani morda ni ali pa tam niso v normalizirani obliki (samostalniki v prvem sklonu ednine, glagoli v nedoločniku in tako naprej).

Za zaglavjem pride na vrsto osrednji del naše strani, ki ga uvaja določilo <body> in ki ga uporabnik na zaslonu tudi res in najprej vidi. Določilo ima v splošnem daljšo obliko, npr:

<body bgcolor="barva" text="barva" link="barva" vlink="barva" alink="barva">

Barvo ozadja strani (bgcolor), črk besedila (text), še neobiskanih povezav (link), že obiskanih povezav (vlink) in ravnokar poklicane povezave (alink) lahko izberemo sami. Pri tem si lahko pomagamo s kakšnim izmed virov na svetovnem spletu ali pa z naslednjo tabelo, v kateri so navedena imena in kodne vrednosti za 134 barvnih odtenkov.

BARVNI ODTENKI

RDEČE IN VIJOLIČASTE RUMENE IN ORANŽNE RJAVE MODRE ZELENE BELE IN SIVE
        seashell #fff5ee         lightyellow #ffffe0         beige #f5f5dc         aliceblue #f0f8ff         mintcream #f5fffa         white #ffffff
        mistyrose #ffe4e1         lemonchiffon #fffacd         blanched-
almond #ffebcd
        azure #f0ffff         honeydew #f0fff0         snow #fffafa
        lightpink #ffb6c1         lightgolden-
rodyellow #ffff00
        cornsilk #fff8dc         aqua #00ffff         lightcyan #e0ffff         ivory #fffff0
        pink #ffc0cb         pale-
goldenrod #eee8aa
        lightyellow #ffffe0         lightblue #add8e6         cyan #00ffff         floralwhite #fffaf0
        hotpink #ff69b4         yellow #ffff00         lemon-
chiffon #fffacd
        powderblue #b0e0e6         pale-
turquoise #afeeee
        oldlace #fdf5e6
        deeppink #ff1493         gold #ffd700         papayawhip #ffefd5         lightsteelblue #b0c4de         turquoise #40e0d0         linen #faf0e6
        rosybrown #bc8f8f         goldenrod #daa520         bisque #ffe4c4         lightskyblue #87cefa         medium-
turquoise #48d1cc
        antiquewhite #faebd7
        pale-
violetred #db7093
        darkgoldenrod
#b8860b
        peachpuff #ffdab9         skyblue #87ceeb         dark-
turquoise #00ced1
        ghostwhite #f8f8ff
        medium-
violetred #c71585
        papayawhip #ffefd5         navajowhite #ffdead         deepskyblue #00bfff         aquamarine #7fffd4         whitesmoke #f5f5f5
        red #ff0000         peachpuff #ffdab9         moccasin #ffe4b5         cornflower-
blue #6495ed
        palegreen #98fb98         gainsboro #dcdcdc
        crimson #dc143c         lightsalmon #ffa07a         wheat #f5deb3         dodgerblue #1e90ff         lawngreen #7cfc00         lightgrey #d3d3d3
        indianred #cd5c5c         salmon #fa8072         tan #d2b48c         medium-
slateblue #7b68ee
        medium
springgreen #00fa9a
        silver #c0c0c0
        firebrick #b22222         darksalmon #e9967a         burlywood #deb887         blue #0000ff         springgreen #00ff7f         darkgray #a9a9a9
        darkred #8b0000         lightcoral #f08080         goldenrod #daa520         mediumblue #0000cd         lightgreen #90ee90         gray #bebebe
        maroon #800000         orange #ffa500         darkgoldenrod
#b8860b
        slateblue #6a5acd         greenyellow #adff2f         lightslategray #778899
        lavender-
blush #fff0f5
        sandybrown #f4a460         peru #cd853f         royalblue #4169e1         lime #00ff00         slategray #708090
        lavender #e6e6fa         coral #ff7f50         chocolate #d2691e         blueviolet #8a2be2         chartreuse #7fff00         dimgray #696969
        thistle #d8bfd8         tomato #ff6347         sienna #a0522d         steelblue #4682b4         limegreen #32cd32         darkslategray #2f4f4f
        plum #dda0dd         orangered #ff4500         brown #a52a2a         darkblue #00008b         yellowgreen #9acd32         black #000000
        violet #ee82ee         darkorange #ff8c00         saddlebrown
#8b4513
        darkslateblue #483d8b         medium-
aquamarine #66cdaa
 
        fuchsia #ff00ff           navy #000080         light-
seagreen #20b2aa
 
        magenta #ff00ff           indigo #4b0082         cadetblue #5f9ea0  
        orchid #da70d6           midnightblue #191970         darkcyan #008b8b  
        medium-
orchid #ba55d3
           teal #008080  
        medium-
purple #9370db
           medium-
seagreen #3cb371
 
        darkorchid #9932cc            dark-
seagreen #8fbc8f
 
        darkviolet #9400d3            forestgreen #228b22  
        dark-
magenta #8b008b
           olivedrab #6b8e23  
        purple #a020f0            green #00ff00  

Pri vsaki barvi je najprej navedeno ime, ki ga lahko uporabimo za določilom bgcolor, za njim pa še šestmestna šifra, sestavljena iz treh šestnajstiških vrednosti za vse tri osnovne barve - rdečo, rumeno in modro (kratica RGB - od angl. Red, Green, Blue). Večji kot je delež posamezne osnovne barve (0 ... 255 v desetiškem številskem sistemu ali 0 ... FF v šestnajstiškem), bolj je dobljena skupna barva svetla. Manjše kot so vrednosti posameznih osnovnih barv, bolj je vse skupaj črno. Tako je koda čisto črne barve #000000 (R 0, G 0, B 0), koda čisto bele pa #FFFFFF (R 255, G 255, B 255). Tudi pot do komplementarne barve je lahka: dobimo jo tako, da vse tri vrednostih dane barve, vsako posebej, odštejemo od 255. Primer: oranžna barva (angl. oznaka orange) ima vrednost #FFA500 (FF,A5,00) ali, prevedeno v desetiški številski sistem (255,165,0). Komplementarna barva bi potem bila (0,90,255) ali šestnajstiško (00,5A,FF) oz. #005AFF:

oranžna barva #FFA500                     komplementarna #005AFF (modra)               

        S šestnajstiškimi kodami lahko ponazorimo veliko več barv, kot jih je na voljo s pomočjo imen v tabeli, in sicer 256 x 256 x 256 = 16.777.216 (po 256 različnih vrednosti za vsako izmed treh osnovnih barv). Če izberemo neko barvo in v enakem razmerju spreminjamo njene dele, dobimo več odtenkov iste barve. Vzemimo za primer tirkizno barvo, #40E0D0 (angl. turquoise) in njenih 32 odtenkov v spodnji tabeli:

#48FDEB                     #46F6E4                     #44EEDD                     #42E7D6                    
#37C2B4                     #35BAAD                     #33B3A6                     #31AB9F                    
#2EA498                     #2C9C91                     #2A958A                     #288D83                    
#26867C                     #247E75                     #22776E                     #207068                    
#1D6861                     #1B615A                     #195953                     #17524C                    
#154A45                     #13433E                     #113B37                     #0E3430                    
#0C2C29                     #0A2522                     #081D1B                     #061614                    

Štirje odtenki so svetlejši (prva vrstica), 27 pa je temnejših (do konca druge vrstice in naprej). Tako lahko npr. za barvo črk v besedilu izberemo temnejši odtenek barve ozadja in s tem dosežemo veliko bolj naraven učinek naše strani. Tabelo, kakršna je zgornja, lahko naračunamo sami ali pa si pomagamo z ustreznim programom.
       Primer še malo drugačnega zlatega ozadja strani z ustreznimi barvami povezav, ki tudi niso pisane z imeni, ampak s šestnajstiškimi kodami, je vrstica:

<body bgcolor="#CCCC66" link="#666600" alink="#666600" vlink="#666600">

       Precej koristnih podatkov o osnovah barv je na strani, ki jo je pripravila Janet Lynn Ford z Univerze v Minnesoti, trenutne modne barve pa najdemo na straneh podjetja PANTONE.

Za ozadje strani lahko uporabimo tudi kako sliko, npr. z imenom slika.jpg:

<body background="slika.jpg">

recimo iz enega spodnjih seznamov:
Poleg zanimivega ozadja lahko našo predstavitveno stran popestrimo še s sličicami, navadnimi in animiranimi, ki jih veliko, tudi brezplačnih, lahko najdemo na internetu. Navadno je, če stran ni namenjena kaki dobičkonosni dejavnosti, dovolj, da na strani napišemo, kje smo sličico dobili in se z ustrezno povezavo na njegovo stran avtorju oddolžimo za uslugo. Spodaj so navedene tri strani, preko katerih pridemo do veliko sličic, ozadij in drugih dodatkov za vaše spletne strani:
Pri izbiri ozadij in drugih virov za oblikovanje svoje strani si lahko pomagamo tudi z nasveti, ki sta jih pripravila John Dalton in Nancy Baer iz Arizone.

Za določilom <body> sledi glavnina naše strani, ki se je v našem prvem osnutku začela že kar na vrstici z imenom in priimkom:

<body>
Marija Novak<br>

zdaj pa vmes dodamo še 4 dodatne vrstice z sličicama dveh zastav, slovenske, slovensko in angleške, english:

<body>
<img src="slovensko.gif" alt="Slovensko">&nbsp;
<a href="index_eng.html"><img src="english.gif"
alt="English" WIDTH="46" HEIGHT="30" border=0></a>
<hr>
Marija Novak<br>

Obe sličici prekopiramo v imenik na disku, kjer imamo našo stran, index.html, s pomočjo klika na desno tipko na miši in izbire "Shrani sliko kot". Videti je zapleteno, pa ni. Na vrhu zaslona, v levem kotu je sličica slovenske zastave, ki je opisana v drugi vrstici. Določilu img src (od angl. image source), ki pove, da je zdaj na vrsti slika, sledi ime datoteke v dvojnih narekovajih - "slovensko.gif", zatem pa še besedilo alt="Slovensko" ki pregledovalniku pove, kaj naj izpiše na zaslon na mestu slike, ko to šele zlaga s strežnika in svojega dela še ni končal. Včasih je naš bralec zelo daleč in ker besedilo potuje veliko hitreje kot slike (ker je krajše), je lepo, da na zaslonu na mestu slike vidi vsaj komentar, dokler slika še ni pripotovala. Čudna kombinacija znakov za opisom slike - &nbsp; je le tkim. trdi presledek - presledek, ki ga pregledovalnik vedno upošteva - navadne presledke, če jih je več ali če smatra, da niso potrebni, meče proč. Z &nbsp; smo dosegli, da se slikici ne bosta stikali.

Slovensko  English

Marija Novak

        Ko gledamo stran v slovenščini, slika naše zastave ni živa - nanjo ne moremo klikniti in se preseliti nekam drugam, slika angleške pa je - zaradi enega najpomembnejših ukazov jezika HTML - določila <a=href"naslov"> ... </a>. Vse, kar napišemo na mestu ... bo na zaslonu izpisano z, če ne določimo drugače, modrimi črkami in podčrtano, v primeru, da na modro vsebino kliknemo, se preselimo pa na neko drugo stran na internetu; na stran, ki jo kaže naslov. V našem primeru je to datoteka index_eng.html, se pravi predstavitvena stran v angleškem jeziku. Z določiloma WIDTH="46" HEIGHT="30" smo dosegli, da je angleška zastava malo pomanjšana (širina obeh originalov znaša 57 pikic, višina pa 38) - to zaradi tega, da še dodatno poudarimo, da je stran, ki jo gleda obiskovalec naše strani, v slovenskem jeziku. Klik na angleško zastavico pa, kot že rečeno, prikliče angleško stran.
        Na angleški različici naše spletne strani (index_eng.html) bi položaja in velikost obeh zastavic seveda zamenjali:

English  Slovensko

Tokrat je najprej slika angleške zastave, ki ni živa, za njo je malo manjša slika slovenske zastave, na katero se da klikniti in ki uporabnika preseli nazaj na slovensko različico strani. Izvorna koda je tokrat taka:

<img src="english.gif" alt="English">&nbsp;
<a href="index.html"><img src="slovensko.gif"
alt="Slovensko" WIDTH="46" HEIGHT="30" border=0></a>

        Zadnja vrstica v tej skupini je

<hr>

Ta ukaz preko celega zaslona nariše vodoravno poglobljeno črto; z njo razmejujemo enote strani med seboj - v našem primeru obe zastavici od ostale vsebine. Dopolnimo našo stran še naprej. Vrstico z imenom in priimkom dopolnimo z

<h1><img src="Novak_Marija.jpg" alt="Slika">Marija Novak</h1>
<p>
<address>
E-mail: <a href="mailto:Marija.Novak@ung.si"> Marija.Novak@ung.si</a>
</address></p>

nekaj vrsticami z našimi najosnovnejšimi podatki. Najprej je navedena slika s portretom: <img src="Marija_Novak.jpg" alt="Slika">. Slika je shranjena na strežniku v obliki datoteke Marija_Novak.jpg, kjer seveda namesto Marije Novak napišemo naš priimek (s c, z, s namesto č, ž, š) in prvo črko imena. Sledita naše ime in priimek, ki bosta, ker sta objeta s parom <h1> ... </h1>, izpisana z največjimi možnimi črkami. Druge možne izbire, čedalje manj poudarjene, so še <h2>, <h3>, <h4> in <h5>. Z <p>, povemo, da se začne nov odstavek, pred katerim pregledovalnik napravi tudi prazno vrstico; odstavek končamo z </p>, ki ga pa, kadar takoj nato sledi nov odstavek, lahko tudi izpustimo (mi ga nismo). Določilo <address> pregledovalniku sporoči, da bo sledil naslov - konča ga, kot si zdaj lahko že mislimo, </address>. Naslov ime.priimek@ung.si je napisan dvakrat - prvič v sklopu kazalca: <a href="mailto: ... ">, drugič pa kot besedilo, ki se modre barve in podčrtano prikaže na zaslonu. Če bo tisti, ki si bo ogledoval našo stran, kliknil nanj, bo s tem odprl program za elektronsko pošto, s katerim bo na naš naslov kaj pisal. Morda bo pa naš elektronski naslov samo prebral in shranil za kakšno kasnejšo uporabo (upajmo da ne za pošiljanje reklam). Domačega navadnega naslova in telefonske številke sem običajno ne pišemo, ker ne vemo, kdo vse bo to stran bral - oglaševalci in reklamni agentje znajo biti prav zoprni. Če imamo tako zaposlitev, da sta naš službeni naslov in telefon zanimiva, npr. da smo v knjižnici, se spodobi, da ju tu navedemo, z urami, kdaj smo dosegljivi vred.
        Za uvodnimi podatki je na vrsti kazalo naše strani:

Vsebina:
<ul>
<li><a href="#splosno">O meni na splošno</a>
<li><a href="#zanima">Kaj me najbolj zanima</a>
</ul>
<hr>

Narejeno je v obliki naslova (Vsebina) in seznama z dvema vrsticama. Seznam je objet z <ul> ... </ul>, kar pride od angl. "unordered list" - seznam, pri katerem enote niso oštevilčene; če bi želeli pred vrsticami v kazalu še številke, bi uporabili oznako <ol> ... </ol>. Vsaka enota v seznamu tipa <ul>, kot že rečeno je to navadno ena vrstica, mora imeti na začetku oznako <li> in dobi spredaj dvignjeno piko. Obe smo opremili še s kazalcema #splosno in #zanima, ki pa tokrat ne kažeta na kake druge datoteke, temveč, zaradi grabljic na začetku (#) kar v isto datoteko, našo predstavitveno stran. Prva vrstica v kazalu je O meni na splošno, druga pa Kaj me najbolj zanima. Obe sta seveda podčrtani in modre barve - če na katerokoli kliknemo, se na strani pomaknemo naprej na začetek ustreznega poglavja. V resnici bi bilo, če bi našo stran malo resneje zastavili, kazalo daljše in podrobneje razčlenjeno. Na njegovem koncu je spet vodoravna črta, ki ga loči od vsebine (<hr>).
        Sledi telo predstavitvene strani, besedilo obeh poglavij. Po strukturi sta zelo podobni, zato navedimo samo prvo:

<h2><a name="splosno">O meni na splošno</a></h2>
<p>
Rojena sem bila 25. maja 1992 v Prestranku pri Postojni.
Po osnovni šoli v Prestranku in gimnaziji v Postojni sem se odločila za študij slovenskega jezika na
<a href="http://www.ung.si/si/o-univerzi/sole/4000/">Fakulteti za humanistiko</a>
v Novi Gorici. Zdaj sem v tretjem letniku.</p>
<p>
Poleg študija, ki mi pobere veliko večino časa, tudi
zelo rada potujem.</p>
<p>
Govorim angleško, malo pa tudi italijansko in nemško.</p>
<hr>

Prva vrstica vsebuje naslov poglavja, ki ima spredaj ustrezno določilo <a name = "splosno">, na katerega kaže ustrezna vrstica v kazalu: <a href = "#splosno">. Naslov poglavja je tudi poudarjen, a za stopnjo manj kot ime in priimek na začetku strani - objet je z <h2> ... </h2>. Besedi Fakulteti za humanistiko smo opremili še s kazalcem <a href="http://www.ung.si/si/o-univerzi/sole/4000/">, ki kaže na naslov predstavitvene strani fakultete.
        Poglavje ima tri odstavke, ki so razmejeni z <p> ... </p>, na koncu pa je spet ločilna črta: <hr>.
        Čisto na koncu strani najdemo še zaglavje (kjer seveda namesto uporabniško ime napišemo naše uporabniško ime):

<small>
<p><i>
Stran je nastala 17. oktobra 2013, nazadnje pa je bila
spremenjena 15. novembra.</i></p>
<p><i>
Spletni naslov: http://www.jtpj.eu/osebne_strani/2015-2016/Novak_Marija/index.html
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Število obiskov: &nbsp;&nbsp;&nbsp;
<img src="http://www.arnes.si/cgi-bin/counter?pad=0|dd=C|id=http://www.jtpj.eu/osebne_strani/2015-2016/Novak_Marija/index.html">
</i></p>
</small>
</body>
</html>

V njem sta datuma nastanka in zadnje spremembe strani, njen naslov na svetovnem spletu ter števec, ki meri, koliko obiskov je bila stran deležna. Ker smo želeli te podatke dati v malo drobnejši tisk, smo spredaj napisali določilo <small>. Z njim smo izbrali nekoliko bolj drobne črke - najdrobnejše, ki so pa že precej težko berljive, bi dobili z <font size="1">. Besede, ki so sicer v isti vrstici, pa malo ločene med seboj, smo razmaknili z obveznimi presledki (&nbsp;). Vse skupaj smo še bolj ločili od prejšnjega besedila tudi tako, da smo z določiloma <i> ... </i> izbrali kurzivno pisavo (i pride od angl. italic).
        Pri števcu smo uporabili usluge zavoda Arnes (Akademska in raziskovalna mreža Slovenije) in izbrali števec brez vodilnih ničel: pad=0. Če bi radi imeli števec, kot je bil na starih hišnih števcih za elektriko ali kot je na ključavnicah za kolesa, bi namesto pad=0 uporabili določilo md=n, kjer je n število mest. Možne so vrednosti od 5 do 8.


JavaScript in Java

        Poleg stvari, ki se običajno dajo početi s pregledovalnikoma na svetovnem spletu in ki smo jih že nekaj srečali, obstajajo še dopolnitve, ki so nastale kasneje in ki lahko bistveno razširijo možnosti uporabe spleta ali pa zelo popestrijo predstavitvene strani. V prvo skupino spada predvsem jezik Java, ki so ga razvili pri podjetju Sun in katerega končni cilj je nadomestiti obstoječe programske rešitve in tudi operacijski sistem, kakršna so Okna, z novimi, ki ne bodo več odvisne od strojne opreme pri uporabniku. Vaš bodoči urejevalnik besedil in preglednica bosta tekla na nekem strežniku, ki ga ne boste niti poznali, v vaši škatlici pa bo le najnujnejši del za komunikacijo in nekaj lokalnega pomnilnika ter skromna procesna moč. Za Javo (izg. po naše, američani pa seveda po njihovo) je značilno, da potrebujemo zanjo prevajalnik in da lahko programe izvajamo šele, ko so prevedeni v strojno kodo in shranjeni na podoben način kot ostali. Le njihovo izvajanje lahko sprožimo kar s predstavitvene strani.
        Precej obtolčeno Javo, ki jo interpretersko izvaja kar pregledovalnik sam in katere izvorna koda je shranjena med ostalimi ukazi jezika HTML na predstavitveni strani spleta, so razvili pri podjetju Netscape. Imenuje se JavaScript in jo poleg Komunikatorja podpira tudi Internet Explorer, čisto dobro od verzije 4.0 naprej. Kratka navodila za uporabo JavaScripta najdemo tudi na straneh, ki jih je pripravil Matjaž Zaveršnik.

Primeri uporabe JavaScripta

        Da bi se vsaj malo seznanili z JavaScriptom, si oglejmo nekaj splošnih pravil in nekaj ne preveč zapletenih primerov. Med pravili omenimo, da je važen je vrstni red narekovajev, zunaj so dvojni, znotraj njih enojni, važna je mala in velika začetnica, važni so presledki. In - morda najpomembnejše - ukaze je treba vedno pisati v eni vrstici!

Primer 1: Izpis vrstice na zaslon.

<SCRIPT LANGUAGE="javascript">
document.write("<FONT COLOR='BLUE'>Vrstica je modre barve</FONT>")
</SCRIPT>

Primer 2: Izpis datuma in časa.

<SCRIPT LANGUAGE="JavaScript">
var zdaj = new Date();
var mesec=zdaj.getMonth()+1;
var leto=zdaj.getYear();
var minute=zdaj.getMinutes();
var sekunde=zdaj.getSeconds();
document.write("Datum in čas: " + zdaj.getDate() + "." + mesec + '.' + leto + " " + zdaj.getHours() + ":");
if (minute < 10) document.write("0");
document.write(minute);
document.write(",");
if (sekunde < 10) document.write("0");
document.write(sekunde);
</SCRIPT>

Primer 3: Izpis sporočila v statusni vrstici pri prehodu povezave z mišjo.

<A HREF="http://www.slovenija.si" onMouseOver="window.status='Slovenija za tuje goste'; return true" onMouseOut="window.status=' '; return true">Slovenija</A> in
<A HREF="http://www.ljubljana.si" onMouseOver="window.status='vse o Ljubljani, tudi za obiskovalce'; return true" onMouseOut="window.status=' '; return true">Ljubljana</A><br>

Primer 4: Sprememba barve zaslona pri prehodu povezave z mišjo.

<A HREF="http://www.slovenija.si" onMouseOver="document.bgColor='lightblue', onMouseOver=window.status='Nebo na Primorskem'; return true">Slovenija - modro</A>

Primer 5: Izbira barve zaslona pri kliku na ploščico.

<center>
<form>
  Izberite barvo ozadja:
  <INPUT TYPE="button" VALUE="Modro ozadje" onClick="document.bgColor='lightblue'">
  <INPUT TYPE="button" VALUE="Rožnato ozadje" onClick="document.bgColor='pink'">
  <INPUT TYPE="button" VALUE="Zeleno ozadje" onClick="document.bgColor='lime'">
</form>
</center>

Primer 6: Branje podatka od uporabnika in izpis.

<SCRIPT LANGUAGE="javascript">

var uporabnik = prompt ("Prosim napišite ime in priimek"," ");
document.write(uporabnik + ", lepo da berete mojo stran!");

</SCRIPT>

Primer 7: Izpis sporočila ob slovesu.

<body onUnload="alert('Hvala za obisk in nasvidenje!')">

Primer 8: Odpiranje novega pregledovalnikovega okna.

<SCRIPT LANGUAGE="javascript">
window.open('novo.html', 'Novo_okno', config='height=200,width=500')
</SCRIPT>

Poleg parametrov height in width lahko uporabimo še naslednje (vsi morajo imeti za enačajem ali besedico yes ali no):
Primer 9: Sprememba slike povezave pri prehodu z mišjo.

<a href="http://www.slovenija.si" onMouseOver="document.pic1.src='english.gif'" onMouseOut="document.pic1.src='slovensko.gif'">
<IMG SRC="slovensko.gif" BORDER=0 name="pic1"></a>

Primer 10: Klic iskalnika Google z naše strani.

<SCRIPT LANGUAGE="JavaScript">
function iskanje()
{ var izraz = document.obrazec.okence.value;
  var celoten_naslov = "https://www.google.com/search?q=" + izraz;
  location.href = celoten_naslov; }
</SCRIPT>
<FORM name="obrazec">
Iskanje na informacijskem servisu Google:<br><br>
<INPUT TYPE="button" VALUE="Išči" onClick="iskanje()">
<INPUT name="okence" SIZE="40" TYPE="texT">
</FORM>

Primer uporabe ukaza Canvas za risanje

        V jeziku HTML je mogoče od različice HTML 5 naprej uporabljati tudi element canvas (platno), s katerim določimo risalno površino in potem v JavaScriptu na njej rišemo črte, kroge, loke, barvamo ploskve in podobno. Za ilustracijo si oglejmo primer risanja rdečega kroga, ki se mu barva spreminja od bele v sredini do rdeče na obodu.

Internetni čas

        Pri komuniciranju na internetu se je dostikrat težko znajti v času, še posebej, če sta sogovornika daleč narazen in tudi ne v istem časovnem pasu. Zato so 23. oktobra 1998 pri švicarskem podjetju uvedli tkim. internetni čas, ki ga pišemo kot @n, npr. čas @526, kjer je dan razdeljen na tisoč udarcev (angl. beat) in ki je seveda enak po vsem svetu. Več je mogoče izvedeti npr. na strani, ki jo je pripravil Steffen Thorsen, na voljo pa je tudi za domačo in akademsko uporabo brezplačni programček v Javi, ki internetni čas izpisuje na predstavitveni strani kot uro in ga je pripravil Peter Theill.


Preverjanje zapisa spletne strani

        Ko je trud z našo spletno stranjo končno obrodil sadove in je gotova, seveda želimo, da bi bile oznake jezika HTML tudi prav napisane. Najbolj očitne napake se seveda pokažejo že, ko stran gledamo s pregledovalnikom, ne pa seveda vse. Pregledovalniki skušajo biti biti kar se najbolj da prizanesljivi do tistega, ki je pisal kodo strani in če, npr. naletijo na oznako, ki ni znana ali je napačno napisana, jo po možnosti ignorirajo - se delajo, kot da je vse v redu. Tudi ne gredo vnaprej preverjati, ali vse povezave na naši strani delujejo - to vidi uporabnik šele takrat, ko na povezavo klikne in se, če je vse v redu, preseli na tisto stran, če pa je povezava napačna ali ne deluje več, dobi le sporočilo, da tiste strani ni mogoče najti.
        Da bi pomagali piscem spletnih strani, torej tudi nam, so pri že omenjenem konzorciju W3C (World Wide Web Consortium) med ostalim pripravili dva programa, ki ju lahko uporabljamo brezplačno:

Prvemu lahko datoteko, na kateri je shranjena spletna stran, podtaknemo na tri načine - lahko povemo, na katerem spletnem naslovu jo imamo, če je tam že shranjena (glej tudi naslednje poglavje), lahko sporočimo, kje na disku jo imamo, ali pa njeno vsebino z ukazoma Kopiraj in Prilepi prenesemo v temu namenjeno okence. Je pa res, da moramo, če želimo zadostiti zahtevam preverjalnega programa, nekaj malega spremeniti. Pred prvo vrstico naše strani:

<html>

dodati še podatek, v kateri različici jezika HTML je napisana naša stran. Navadno se odločimo za najvišjo različico jezika, 4.01, obenem pa na način, ki še ne zahteva striktne, z jezikom XML povsem skladne sintakse (transitional):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
         "http://www.w3.org/TR/html4/loose.dtd">
<html>

Druga stvar, ki jo moramo obvezno še popraviti, je oznaka <body ... , kadar imamo v njej navedeno kaj parametrov, npr. širino levega in desnega roba, barvo ozadja na strani in podobno. Vse te podatke moramo prenesti v zaglavje, v posebno oznako <style>. Dodamo jo pred konec zaglavja:

<style type="text/css">
body { margin-left: 20px; color: darkred; background-color: peachpuff; }
</style>
</head>
<body>

vrstico z oznako <body> pa oklestimo. V zgornjem primeru smo za barvo črk na celi spletni strani izbrali temnordečo (darkred), za barvo ozadja pa zelo nežno rjavo (peachpuff).
         S tema popravkoma smo dosegli, da je preverjalni program ustanove W3C naši spletni strani dal pozitivno oceno:

This Page Is Valid HTML 4.01 Transitional!

in da smemo na konec strani ponosno dodati ikono:

Page Valid!

Navodila, kako to napraviti, dobimo na preverjalnikovi strani takoj pod razveseljivim svetlozelenim obvestilom.


Nekaj drugih uporabnih naslovov na internetu

Navodila za postavitev strani iz domačih logov

Ponudniki dostopa in prostora na svetovnem spletu

Brezplačen prostor na svetovnem spletu

        je tudi mogoče najti. Osnovna pomanjkljivost je skoraj vedno to, da bodo gledalci vaše strani vsakih nekaj sekund oziroma ob vsaki večji akciji neusmiljeno bombardirani z reklamnimi sporočili. Poleg tega pa je še nekaj drugih pomanjkljivosti in pasti. Sem spada predvsem tisto, kar je zapisano v drobnem tisku pogodbe, s katero se morate strinjati, da vas spustijo naprej. Navadno je tu določilo, da ponudnik te usluge ne jamči za karkoli - brez posebnega razloga lahko svojo dejavnost ukine, omeji dostop ali kako drugače boleče ukrepa. Če si vaše strani nekaj časa, običajno dva meseca, ne bo nihče ogledal, bo z vsemi pritiklinami vred letela v smeti. Še bolj zoprno je določilo, ki ga tudi znajo imeti nekateri ponudniki (npr. The globe, naslov www.theglobe.com) o vaši privolitvi, da vse, kar spravite na te strani, besedilo, slike in ostalo, postane last ponudnika - izgubite avtorske pravice. Licenčni sporazum se vsekakor splača dobro prebrati.
        Če se za brezplačno izbiro vseeno, so tu poleg ustrezne strani na angleški wikipediji še štiri popularne možnosti:
        slo-hosting  Angelfire  Tripod  110 MB
Prva je domača, druge tri pa ameriške, vse ponujajo 20 MB ali več brezplačnega prostora, skoraj pri vseh pa ne gre brez reklam.

Fotografija

        Nekaj malega o tem, kako napraviti predstavitveno stran, je zdaj za nami. Napišite čimveč zanimivega, če deset zaslonov pa deset, če sto pa sto. In - nikar ne pozabite, če le imate možnost, dodajte tudi kakšno sliko - čimveč, tem bolje. Tale, ki je priložena:

Nebo nad južnim robom Kanina
P. Jakopin: Nebo nad južnim robom Kanina, oktobra 2006

je dolga le 21.930 znakov, kar skoraj za 10 strani besedila z malo večjim razmikom, je pa stran zaradi nje veliko bolj pestra.
        In kako pridemo do fotografij v digitalni obliki, uporabni za opremo spletne strani? Najlažje seveda z digitalnim fotoaparatom, obravnavani so v naslednjem razdelku. Kaj pa če smo še bolj stare šole in nimamo digitalnega fotoaparata? Ali pa imamo o tem, kar bi radi dali na spletno stran, samo fotografijo, negativ ali diapozitiv? Če bralnika slike sami nimamo, je najceneje po prijateljski liniji - skušamo se dogovoriti z znancem, ki ga ima in naše fotografije prenesemo v digitalno obliko pri njem. Kadar takega znanca nimamo, si moramo pomagati drugače. Običajna pot je, da svoje fotografije, negative ali diapozitive spravimo na cede ali USB ključ tako, da jih nesemo k fotografu, ki se ukvarja s tem, npr. v DIA STUDIO d.o.o. (beseda DIA je tu razvezana kot Digitalna In Analogna fotografija) na Tomšičevi ulici, ob trgovini NAMA v središču Ljubljane.

Digitalni fotoaparati

        Dandanes že samoumevna pot do fotografij je z digitalnim fotoaparatom. Pred nekaj leti je prodaja le-teh po vrednosti prvič presegla prodajo klasičnih aparatov, pred kratkim pa jih je tudi po že številu. Za fotografijo, kakršne smo bili nekoč vajeni, v Združenih državah zdaj uporabljajo izraz klasična fotografija (traditional photography). Ta je ohranila svojo magijo, da dokler film ni razvit v laboratoriju (ali v domači temnici) ne veš, kaj točno si posnel. Ima pa film še vedno tudi kako bolj otipljivo prednost v primerjavi z digitalnimi senzorji, npr. večji razpon tonov na zelo svetlih in zelo temnih delih slike. Izreden čar digitalne fotografije je seveda v tem, da ni treba filma, slikaš kolikor hočeš in - na zaslončku lahko takoj precej dobro oceniš, ali je posnetek uspel ali ga je treba ponoviti. O taki fotografiji lahko izvemo kaj več, če pogledamo         Razvoj je zelo nagel, tako da je čas, ko bo standardno orodje, s katerim si že desetletja pomagajo fotografski navdušenci, zrcalni fotoaparat Leica formata, na voljo tudi v digitalni izvedbi, že tako rekoč tu. Ker je za to, da bomo fotoaparat vedno jemali s seboj, izredno pomembna njegova teža, je med najprimernejšimi prav gotovo najmanjši in najlažji, Canon 100 D, ki ne pretirava s ceno (dobrih 600 evrov), tehta pa, s kakšnim lažjim objektivom vred, npr. s Canonom 40 mm f 2.8 (palačinko), le pol kilograma. Še boljši, s senzorjem, ki ima dvojno število pik, ene za sliko in ene za pomoč pri ostrenju, pa dvakrat težji in dražji, je Canon 70 D. Pri obeh je mogoče uporabiti vse sodobne Canonove objektive, bliskavice in drug pribor. V primerjavi s klasičnimi zrcalnimi fotoaparati imata le to osnovno pomanjkljivost, da je treba zaradi plovičnega senzorja (24 x 16 mm) goriščno razdaljo pomnožiti z 1.5 (35-mm objektiv ustreza 53-milimetrskemu). Najbližja konkurenca je Nikon D 7100, ki je seveda združljiv z objektivi in priborom te tvrdke. Zrcalni digitalni fotoaparat, res primerljiv s fotoaparati na film, brez množitvenega faktorja pri objektivih, s svetlobnim tipalom velikosti 24 x 36 mm, pa za precej manj dostopno ceno, je npr. Canon EOS 7D Mark II.
        Tudi fotoaparati za posebne priložnosti, kakršni so posnetki iz zraka, se iz domene specializiranih podjetij, kakršna je Aerovizija najbolj znanega slovenskega sodobnega letalca Matevža Lenarčiča, že selijo tudi k bolj vsakdanjim uporabnikom. Primer je Aries Blackbird X10, kvadkopter podjetja Adorama.
        Za marsikoga zelo zanimivi so tudi nekoliko dostopnejši digitalni aparati, ki sicer niso zrcalni, se da pa z njimi gledanje skozi objektiv nadomestiti z opazovanjem zaslona na tekoče kristale (LCD) na zadku fotoaparata. Imajo mnogo lastnosti zrcalnih fotoaparatov, vsi pa so mnogo lažji in manjši. Velike hiše, kot so Nikon, Canon, Fuji, Sony ali Olympus, imajo celo paleto takih aparatov. Tudi čisto zadnji, najskromnejši, pa cenovno najugodnejši, je povsem ustrezen za marsikateri namen, še posebej za objavo slik na spletu.
        Pri vseh je treba za resno uporabo dokupiti večjo pomnilniško kartico, če je tak aparat opremljen tudi z nastavkom za eksterno bliskavico, se jo seveda zelo splača tudi nabaviti; najbolje se bosta razumela, če bo istega proizvajalca. Opazimo tudi, da je razmerje med višino in širino slike 3:4 (Leica format ima razmerje 2:3), ki ustreza tudi računalniškemu zaslonu. Iz posnetkov se da napraviti kvalitetne povečave do formata A3 oziroma A4.

Priprava digitalnih slik

        Ker je uporaba digitalnih fotoaparatov bistveno cenejša od slikanja s klasičnimi, pride človek v skušnjavo, da bi napravil dosti več posnetkov, ki jih je potem potrebno nekako spraviti do gledalcev. Običajna pot je objava teh slik na internetu, s katero je, kot se hitro pokaže, veliko več dela kot s samim slikanjem. Spodobi se, da vsaki sliki dodamo spremno besedilo, še prej jo pa ustrezno pomanjšamo in po potrebi še kaj popravimo, npr. izrez, kaj zavrtimo ali podobno. Pri tem ne gre brez ustreznega grafičnega orodja. Poleg običajne izbire tistih, ki se s tem poklicno ukvarjajo, programa Photoshop podjetja Adobe, je na razpolago še veliko dosti cenejših orodij, s katerimi se tudi da čisto dobro shajati. Večina spada v kategorijo shareware - se pravi, da jih je treba po navadno enomesečnem poskusnem obdobju plačati. Eden izmed seznamov tovrstnih programov je naveden na tej strani Steva Sandersa. Med brezplačnimi programi te vrste se je zelo dobro izkazal program IrfanView, ki ga je napisal Irfan Škiljić iz Jajca v Bosni. Na razpolago je z uradne strani www.irfanview.com, od koder se da naložiti instalacijski program s končnico .EXE. Če to zaradi omejitev na strežniku, prek katerega delate, ne gre, si lahko pomagate z instalacijsko datoteko s končnico .ZIP, jo na svojem računalniku potem razpakirate ter nadaljujete z instalacijo. Če pa je tudi ta pot zaklenjena, si lahko pomagate z naložitvijo programa samega, s končnico .EX, ki jo shranimo v imenik C:/Program Files/Irfanview, ji tam spremenimo končnico v .EXE in jo od tam izvajamo.

Arhiviranje digitalnih fotografij in priprava za objavo na spletu

        Če klasičnih fotografij nikoli ni moglo biti prav veliko, negativni film je bilo treba razviti in napraviti povečave na papirju, kar je precej stalo in se je tudi zelo navdušeni novopečeni fotograf hitro sam omejil, je pri digitalni fotografiji stvar drugačna. Pomnilniška kartica v fotoaparatu ali mobilnem telefonu, nekateri mu pravijo tudi fotofon, je velika in za malo malico lahko slikamo in nanjo shranimo tudi tisoč in več posnetkov, tudi v nekaj urah, če bi hoteli. Problem nastane, ko je treba tej množici dati neko bolj trajno obliko. Spodobi se, da ima vsaka fotografija opis, da bomo čez leta vedeli, kaj je na njej. Datum in čas posnetka je shranjen avtomatično, drugi podatki pa ne. In če je teh opisov samo nekaj sto, je že kar precej dela, da jih napravimo.
        Ogromno majhnih slik na neki spletni strani, iz katerih s klikom dobimo večje različice, je sicer bolje kot nič, še veliko lepše pa je, če si gledalec lahko vsako sliko v miru ogleda, samo samcato na zaslonu, in o njej tudi kaj prebere. Zato je seveda priporočljivo, da slik ni preveč, nekaj deset jih bo gledalec z veseljem pogledal, za kaj več pa najbrž tudi časa ne bo imel. Premislek, preden pritisnemo na sprožilec (in ali se za to sploh odločimo, če je motiv zanič), pripomore ne samo k bolj obvladljivi količini slik, ampak navadno tudi k boljšim posnetkom. Poti, kako vse skupaj organizirati, je več, ena izmed njih je opisana na spletni strani Shranjevanje fotografij in priprava za objavo na spletu.

Digitalne fotografije na papirju

        Digitalne fotografije na zaslonu so zelo lepe in marsikomu v veselje, čisto za vsako rabo pa tudi niso. Vsi smo vajeni vzeti sliko v roke in si jo v miru ogledati, brez računalnika in druge sodobne šare. In kako spraviti digitalne fotografije na papir?
        Prva, preprosta in dostopna možnost je fotolaboratorij, kamor slike ali pošljemo po elektronski pošti, če jih ni veliko, ali pa jih prinesemo na USB ključu.
        Druga možnost je nabava lastnega tiskalnika; le-ti gredo ves čas v korak z izboljševanjem ločljivosti fotoaparatov. S fotografijami, tako po kvaliteti kot po načinu uporabe (10 metrov dolg kolut z 10 cm širokim fotopapirjem, ki se potiska od roba do roba in potem samo odreže) so še najbolj primerljivi Epsonova tiskalniki iz serije Stylus Photo. V tej skupini so tudi tiskalniki, katerih odtisi so boljši od klasičnih barvnih fotografij. Posebni pigmenti v prozornih ovojčkih slikam zagotavljajo predvideno življensko dobo tudi 200 let (pod steklom in ob umetni svetlobi).




Film

        Fotografije zelo izboljšajo vsako predstavitveno stran, ob kakšni priliki, npr. opisu maturantskega izleta, pa ne bi bil napačen niti film. Prostora na strežnikih je vsako leto več, s skoraj vsemi digitalnimi fotoaparati za široko rabo (tudi z zrcalnimi) se da snemati tudi video, za silo pa tudi že z mobilnimi telefoni, o katerih malo več v naslednjem razdelku.
        In kaj potrebujemo za kratek filmski poskus? Najprej digitalno video kamero ali fotoaparat, ki snema tudi video, če ni drugega pri roki, pa tudi ustrezen mobilni telefon. S tem posnamemo nekaj kadrov, vsak je shranjen na svoji datoteki, navadno tipa .MP4 ali .MP2, ki jih prenesemo v računalnik, kjer v ta namen najprej odpremo poseben imenik. Tam jih lahko uredimo v film s pomočjo programa Windows Movie Maker, do katerega pridemo prek spletne strani podjetja Microsoft (Windows 7, Vista) ali kar naravnost, prek izbir Start -> Programi -> Pripomočki (starejše različice operacijskega sistema Windows). Če kamera shranjuje posnetke v formatu .MP4, ki ga starejše različice programa Windows Movie Maker ne podpirajo, jih moramo prej še prekodirati v kakega izmed formatov, ki ga ta program pozna. Zelo priročna in prostodostopna možnost je program MP4Cam2AVI Easy Converter, ki ga je napisal Oleg Miheev.
        Sledijo tri povezave do strani z navodili za uporabo programa Windows Movie Maker:
        Pri pripravi filmov, tudi bolj preprostih, je zelo važna glasbena spremljava. Veliko bolj z veseljem spremljamo predstavo, ki je prijetna tudi za uho. To še posebej velja, če nameravamo film objaviti, najbolj obiskan je video portal YouTube. Tu pa se mimogrede znajdemo v škripcu - če za predvajanje v domačem krogu lahko uporabimo prav vsako glasbo, ki nam je všeč, tega pri objavi ne moremo. Upoštevati je treba avtorske pravice. Če film, ki ga nameravate objaviti npr. na YouTubu, opremite z glasbo, ki je avtorsko zaščitena, pa dovoljenja za to nimate, je velika verjetnost, da bo YouTubov program, ki pregleda zvočni del vašega filma in ga primerja z zbirko posnetkov vseh večjih diskografskih hiš, to odkril in vas kaznoval najmanj z neobjavo zvočnega dela filma. Dovolj je npr. že, da imate v filmu prizor, kjer gredo nastopajoči mimo gostilne, v kateri igra radio ali kak drug vir z zaščiteno glasbo. In film brez zvoka je seveda zelo gol in bos.
       Poti iz zagate so štiri - če smo vešči, kaj zaigramo sami in posnamemo, če nismo uporabimo ali skladbo s kakega izmed spletišč z brezplačno glasbo, ali glasbeno spremljavo kupimo ali pa si jo pripravimo sami glede na potrebe filma iz zaloge vzorcev. Za drugo možnost si lahko pomagamo s spodnjimi povezavami:
        Če se odločimo za enega izmed zgornjih virov, prej še preverimo, ali lahko glasbo uporabljamo samo v neprofitne namene ali je treba zanjo, če bi želeli film uporabiti v komercialne namene, kupiti posebno licenco.
        Za tretjo možnost v okence iskalnika Google napišimo izraz Royalty free film music, za četrto pa si lahko pomagamo s programskim orodjem Sonicfire podjetja SmartSound.

        Dodajmo še nekaj povezav, kjer lahko najdemo napotke za vse, ki bi se radi resneje lotili brezproračunskih ali nizkoproračunskih filmskih projektov (angl. indiemovie):
        Mobilni telefoni so zelo na pohodu. Hitro se bližajo tistemu, kar je bilo še pred desetimi leti videti čista znanstvena fantastika, osebnemu digitalnemu pomočniku (angl. personal digital assistant - PDA), ki bi v enem majhnem in priročnem strojčku združeval telefon in videotelefon, računalnik, televizijo, fotoaparat, kamero, diktafon, GPS, merilec krvnega pritiska, merilec sladkorja v krvi, EKG ... In ki bi mu lahko narekovali še, kaj naj opravi in uredi, vas recimo uči angleščine, rezervira karte za gledališče ali se dogovori za dostavo špecerije.
        Res bi si človek pri današnjih mobilnih telefonih, ki imajo večinoma že čisto spodoben fotoaparat in kamero, želel še kakšne malenkosti, kot je recimo navoj za stojalo. Z njim bi posnete filmske sekvence dobile pravi lesk, roko, ki se prav nič ne trese ali maje, je kar težko najti. Posebej za foto in filmske namene so mobilni telefoni tudi že precej v rabi. In enominutni filmček tudi ni prav dolg - nekaj megabajtov. Že leta 2003 je bil prvi filmski festival, namenjen filmom, posnetim z mobilnimi telefoni. Več o tej temi izvemo, če v iskalniku, npr. Google, vtipkamo besedno zvezo itak filmfest ali mobile phone film festival ali cell phone film festival.
        Kateri mobilni telefon pa je najprimernejši? Najbrž skoraj vsak, tisti ki ga že imamo, ga poznamo, smo nanj navajeni, ima vedno še poseben šarm. Je pa tudi res, da se vsak čas zdi manj primeren za nakup mobilnega telefona z daljšo vezavo, npr. za dve leti. Spremembe si sledijo tako hitro, ampak v nedogled čakati tudi ne moreš. Že zdaj je na trgu veliko telefonov z operacijskimi sistemi, podobnimi tistim na pravih računalnikih. Primera sta operacijski sistem Android, ki so ga najprej razvili pri podjetju Google in ki temelji na operacijskem sistemu Linux ter Windows Phone podjetja Microsoft, kompatibilen z Okni na osebnih računalnikih.
        Kam pes taco moli na področju mobilnotelefonske fotografije in videa lepo kaže npr. Samsung Galaxy S4 Zoom, ki ima ne samo navoj za uporabo na stojalu, ampak tudi 10-kratni zoom, fotoaparat z ločljivostjo 16 milijonov pik, videokamero s 1080p, to je 1920 x 1080 pik ali full HD. Povsem dovolj za veliko platno dvorane v Koloseju.




Glasba

        Besedilo in fotografije na naši spletni strani lahko zelo lepo dopolni še glasbena spremljava. Le da je tu večina avtorjev precej na slabšem, saj je biti avtor besedila in fotografij veliko lažje kot pa biti avtor glasbe. Morda pa se, če tega sami ne znamo, najde kak glasbeno nadarjen prijatelj, ki nam odstopi svojo skladbo za dopolnitev spletne strani. Ali pa si pomagamo s spletom - kar nekaj je mest, kjer lahko pridemo do brezplačnih, obenem pa tudi brezvirusnih datotek (okužene .MP3 datoteke so eden izmed glavnih prenašalcev virusov na spletu) z glasbo na legalen način; na tej strani je najboljših 6, kot jih je izbral Mark Harris.
        Načinov, kako datoteko s skladbo vključiti v našo stran, je več. Morda najpreprostejši je hipertekstna povezava:

<a href="URL">Ime spletne strani z glasbo</a>

npr. odlomek glasbene spremljave filma Jama belega mačka, ki jo je napisal Milko Lazar:

<a href="http://www.jakopin.net/wpc/jbm_odlomek.mp3">Odlomek glasbe iz filma Jama belega mačka</a>

Na ta način bo gledalec spletne strani prišel do glasbe po kliku na povezavo. Če želimo glasbo vključiti v stran na nekem mestu, podobno kot sliko, uporabimo eno izmed oznak bgsound in embed:

<bgsound src="URL" loop="i"> ali
<embed src="URL" controls="cc" width="jj" height="kk" autostart="n" loop="i">

kjer je URL ali spletni naslov ali ime datoteke (npr. glasba.mp3) v območju, kjer imamo tudi spletno stran. V primeru oznake bgsound se na zaslonu ne prikaže posebno okno z nastavitvami igranja (jakost tona, premikanje po skladbi in podobno), pri uporabi oznake embed pa se. Z oznako embed lahko v spletno stran vključimo tudi izvajanje datoteke ne samo z glasbo ampak tudi predvajamo video datoteko. Določilo loop lahko tudi manjka - v tem primeru se bo datoteka z glasbo zavrtela samo enkrat. Če za vrednost i napišemo kakšno številko, se bo po koncu skladbe le-ta zavrtela še enkrat, skupaj i-krat, če namesto i napišemo infinite, se bo vrtela pa, dokler izvajanja strani sami ne prekinemo. Določilo controls ima lahko eno izmed dveh vrednosti: smallconsole ali bigconsole, ki izbirata preprostejšo ali obsežnejšo ploščico z nastavitvami igranja, vrednosti jj in kk določata velikost te ploščice, določilo n pa je lahko ali TRUE ali FALSE. Podobno kot določilo loop lahko manjkajo tudi določila controls, width, height in autostart.
        Je pa treba vključevanje glasbe ali videa na naše strani jemati s ščepcem soli - mnogi strežniki, na katere so priključeni uporabniki interneta, tudi potencialni gledalci naše strani, stranem, ki imajo ukaz embed iz varnostnih razlogov ne zaupajo. Bojijo se, da bi datoteka, navedena v ukazu, vsebovala virus ali kako drugo škodljivo vsebino in zato tako stran uporabniku pokažejo le do ukaza embed, naprej pa ne. Zato, če želimo našo stran napraviti čimbolj univerzalno, glasbo in video vključimo le v obliki povezave ali pa jo damo na dno strani, da bo uporabnik videl vso ostalo vsebino. Več o ukazu embed je mogoče prebrati npr. na eni izmed šolskih strani ustanove W3C.



Sklep

        Kakorkoli že, časa, ki ga porabite za izdelavo in dopolnjevanje svoje predstavitvene strani, naj vam nikar ne bo žal ... življenje je kratko in res bi bilo škoda, če bi vaše svetle iskrice ostale samo vaše. Nikoli ne veste, morda jih bo pa le kdo vesel?



Stran je napisal Primož Jakopin in jo nazadnje spremenil 27. novembra 2016.

Naslov:  http://www.jakopin.net/JT/viri/spletna_stran/Postavitev_v_jeziku_HTML.php              4856         Valid HTML 4.01 Transitional