(X)HTML

IBK 3. loeng

Eellugu

1945 – Vannevar Bush, presidendi teadusnõunik – Memex, mikrofilmipõhine seade suure info-koguse salvestamiseks ja info otsinguks

196? - Douglas Engelbarti hüpertekstisüsteem

1968 – Ted Nelson, mõiste „hüpertekst“

1972 – ARPAneti algus

1979 – Charles Goldfarb loob SGMLi

1981 – Xanadu, võrgupõhise publitseerimissüsteemi idee

CERN ja teised

1987 – CERN võtab Interneti peamiseks ühenduskanaliks

1989 – Tim Berners-Lee esimene hüpertekstisüsteemi kavand

1990 – World Wide Web

1992 – Gopheri kõrgaeg

1993 – Mosaic

1994 – Netscape

Natuke tehnilist juttu

Serveripõhine teenus, mis kasutab HTTP protokolli

Tavaline lahtine tekstifail – sisu ja vorm (märgendid)

Avalik info => vajab eraldi kataloogi

Redigeerimine

Kohalikus masinas (FTP-ga serverisse)

Otse serveris (üle telneti/SSH)

Paar tähelepanekut

Enamik materjali vabalt kopeeritav – kuid mõnel juhul piiratud autori tahte kaudu

„Kuidas kuts külale...“

Netiämber koliseb kõvemini ja kauem

Lolli loomingu mahavõtmisest ei pruugi piisata

Plagiaat – samavõrd hukkamõistetud kui mujal

Reklaam või veebispämm?

Si tacuisses, philosophus manisses

HTML

Loodud võimalikult lihtsa dokumentide struktu-reerimise keelena

Ei ole programmeerimiskeel, kuid võib selle õppimisel abiks olla

Sisu ja vormi lahusus – mida edasi, seda suurem

Märgendid: paarilised vormimäärangud

N: See on üks <b>eriti</b> lahe värk

Kujunemine

Vajadus struktuursete dokumentide järgi on vanem kui veeb – TeX, PostScript jt olid loodud paberile trükkimist silmas pidades

1979 – SGML. Probleem – liiga keeruline

1990 - Tim Berners-Lee lahendus

1993 – HTML 1.0: tekst ja graafika. Staatiline!

Siis hakkasid kõik leiutama..HTML+, HTML 1.1

Esimene tõsine standard: HTML 2.0 (1995)

HTML 2.0

1995

Erinevad tekstivormingud, graafika

Uudne tehnika: sisestusvormid. Probleem: HTMLi pool oli lihtne, kuid eeldas keerukat CGI (serveriskriptide) programmeerimist (Perl, C)

Paljud uudsemad ideed jäeti välja, kuid jõudsid hilisematesse standarditesse

HTML 3.2

1997

1995. aasta versioon 3.0 – lahkhelid

Uued tehnikad: raamid, tabelid, appletid

<font> -märgend vs stiililehed

Üks pikemaajalisi stabiilseid standardeid

HTML 4.0/4.01

1997-99

Suur rõhk sisu ja vormi lahususele. <font> välja, stiililehed lõplikult sisse.

<applet> => <object>

Rahvusvahelisus (ISO-8859-1 => Unicode) ja ligipääsetavus - paraku ei ole kummaski osas ikka veel lõplikult vettpidavaid lahendusi (erinevad kodeeringud tekitavad probleeme)

Kõrvalepõige: XML

2000/2001

HTMLi „vend“ - ühiseks vanemaks on SGML

Kui HTML on siiski mõeldud rohkem ekraaniväljastuseks, siis XMLi prioriteet on struktuurne, väljundist sõltumatu dokument

Uute märgendite defineerimise ning tuletatud, väga erinevate alamkeelte loomise võimalus (näiteks DocBook).

Aluseks paljudele uuematele failiformaatidele

XHTML

Jaanuar 2000 - 1.0

XMLi ja HTML 4.01 sulam – sisuliselt HTML, mis on viidud vastavusse XMLi reeglitega

Sisuliselt mitte uus HTML versioon, vaid eelmise versiooni „uuestikirjutamine“

Üldiselt rangemad nõuded (tõstutundlikkus jm)

Mai 2001 – 1.1. Modulaarsuse kasv, vanu brausereid enam ei toeta => tavaveebis tasub esialgu jätta 1.0

200? - 2.0 (hetkel väljas 7. draft ehk ettevalmistav versioon). Muutused puhtama XMLi suunas.

Mõned muutused arengu jooksul

Varajane HTML – nii paaris- kui üksikmärgen-did, praegu vaid paaris (v.a. lühikuju)

Varasemad versioonid – tõstutundetud, soovitati kasutada suurtähti (paremini eristatav). HTML 4 – soovitati väiketähti, XHTML – kohustuslik

Argumentide kirjutamine rangemaks (jutumärgid)

Dokumendi tüübidefinitsiooni (DTD) tähtsus on kasvanud – XHTML 1.0 kasutab kolme eri DTD-d (strict, transitional, frameset). Strict => 1.1

Algus

Varem oli HTML hästi lihtne:
<HTML>
dokument
</HTML>

XHTML tekitab algajas palju segadust (kui tahta standardit rangelt järgida) – ka lihtsaim „Hello World“ sisaldab arusaamatuid definitsioone

XHTML 1.0 ja „Hello World“

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="et" lang="et" xmlns="http://www.w3.org/1999/xhtml">
Tere-tere, sinine muna keset kosmost!
</html>

NB! Käesolevas loengus kasutatakse siin ja edaspidi XHTML 1.0 versiooni!

Natuke uhkem leht...

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="et" lang="et" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Minu esimene veebileht
</title>
</head>
<body>
Tere-tere, sinine muna keset kosmost!
</body>
</html>

Lihtsaim tekstitöö

Enter-iga reavahetusi ei tunnistata

Murdemärgend <br>

Lõigumärgend <p>

NB! <p> oli HTMLis paarismärgend, <br> mitte

Vältimaks mõttetut topeltmärgendit <br></br>, saab XHTMLis kasutada lühikuju <br />

Tühik vajalik vanade brauserite jaoks

...

Lõigu joondamine – parameeter align

Parameetrid XHTMLis – rangelt kujul
<märgend parameeter=“väärtus“>...</märgend>

<p align=“left“>See on lõik</p>

Left, center, right

Eelformaaditud tekstilõik (N: luuletus) – kasutatakse <pre> -märgendipaari

Pealkirjad

<h1> kuni <h6>

<h1> - kasutatakse ainult 1 kord ühe lehe kohta

Mitmest lehest koosneva terviku puhul tasub kasutada vaid avalehel

Näide

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="et" lang="et" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Aadu arvutiäri </title>
</head>
<body>
<h1>Aadu arvutiäri</h1>
<h2>Tere tulemast!</h2>
<p> ( siin on avatekst, tervitus vms.) </p>
<h4>Arvutid</h4>
<p> (tekst)</p>
<h4>Tarkvara</h4>
<p> (tekst)</p>
</body>
</html>

Täpitähed ja erimärgid

Uuemates masinates ei ole eesti täpitähtedega probleemi – aga vanal Unixi terminalil? Või on vaja Portugalis olles Eestis asuvat veebi torkida?

Kaks meetodit:

Sümbol ”&”, numbritähis ”#”, vastava tähemärgi kood (näit. 64 - @), semikoolon. N: &#64;

Sümbol ”&”, ”alusmärk” (näiteks ”a”), ”efektikood” (näiteks ”uml”), semikoolon. N: &auml;

Tekstirõhutused

Füüsilised: <b>, <i>, <u>. Mittesoovitav!

Loogilised:
<strong> - tüüpiliselt paks kiri
<em>	- „“ kaldkiri
<dfn> - „“ paks kaldkiri
<cite> -	„“	kaldkiri
<code> -	„“	„“
<blockquote> - nihkega lõik

<sup>, <sub>, <strike>

Ei tohi: <em><strong>blaa</em><strong>

Loendid

Järjestamata:	Järjestatud:
<ul>	<ol>
<li>Jänes</li>	<li>Jänes</li>
<li>Hunt</li>	<li>Hunt</li>
<li>Siil</li>	<li>Siil</li>
</ul>	</ol>

<ul> parameeter: <ul type=“square“>

<ol>: <ol type=“a“>

<ol>: <li value=“4“>

Kaugviited

Lihtsaim üldkuju:
<a href=”soovitud URL”>Viite tekst </a>
<a href=”http://www.ttu.ee/users/jyri/”> Jüri lehekülg </a>

Üha enam soovitatav: title-parameeter:
<a href=”http://www.ttu.ee/users/jyri/” title=”Jüri Juurika kodulehekülg”> Jüri lehekülg </a>

NB! Veebikataloogi nimi ei lähe URLi!

Lähiviited

Suhtelise kataloogiteega:
<a href=”../jyri/” title=”Minu sõbra Jüri kodukas”> Jüri kodulehekülg </a>

Absoluutse kataloogiteega nagu kaugviide:
<a href=”http://www.ttu.ee/jyri/” title=”Minu sõbra Jüri kodukas”> Jüri kodulehekülg </a>

Vaikimisi avalehele minnes pole failinime vaja, muidu aga küll

Siseviited

Kui võimalik, ei tasu pikki tekste ühes tükis välja panna – vahel aga on vaja. Sisukord ette teha.

Nimi: koht, kuhu siseviide suunata:
<a name= ”Seljanka” /> VANA, KUID KADUV VIIS
<a id = „Seljanka“ /> UUS STANDARD!

Sisukord:
<a href=”#Bubert”> Bubert </a> <br />
<a href=”#Kotletid”> Kotletid </a> <br />
<a href=”#Seljanka”> Seljanka </a> <br />
<a href=”#Vahvlid”> Vahvlid </a> <br />

Võimalusel mitte jätta viiteid kõrvuti!

E-postiviide

NB! Sageli unustatakse, et ei garanteeri saatmisvõimalust!

Üldkuju:
<a href=”mailto:jyri@marvin.ttu.ee”> Jüri Juurikas – jyri@marvin.cc.ttu.ee </a>

Üks suur „aga“ - spämmerid.... Lahendus:

Ära panegi veebi

Pane pildina

Aadress kujul jyri(at)marvin.ttu.ee

Ballasti lisamine: jyri@eispammi.marvin.cc.ttu.ee

Graafika: natuke üldist jorinat

Pane pilt ja pea aru

Nii palju kui vajalik, nii vähe kui võimalik

Ühenduste kiirused ja lugemisvahendid erinevad

Macromedia Flash – ilus küll, kuid täielikult Flashis tehtud leht vajab tekstipõhist alternatiivlehte
Hoiatav näide - http://www.elion.ee (vaadake Lynxi vmm. tekstibrauseriga)

„Kamoon – miks mitte graafiline?“

Tekstibrauseri kasutajad jäävad ukse taha (sh moblad, ekraanilugejad, terminaliühendused jt)

Aeglane laadimine => saadab pikalt ja läheb ära

„Best viewed with...“ - kuidas meeldiks maantee sildiga „Parima efekti annab sõit Mersuga!“

Suur pilt lehe alguses – vt punkti 2

Üld/korduvkasutatav leht – graafikauputus võib olla otseselt tervistkahjustav (Delfi on piiri peal)

Kui on siiski vaja – tee alternatiivleht!

Lihtgraafika

Tehniline absoluutmiinimum (NB! lühikuju!):

<img src=”pildifaili nimi” />

Tegelikult on mitu parameetrit praktiliselt kohustuslikud. Järgmine tase:

<img src=”foto.gif” alt=”Foto – mina, vanaema ja meie kass.” />

ALT-tekst kuvatakse, kui lugemisvahend ei suuda graafilisi elemente näidata

Puhtdekoratiivse elemendi korral panna tühi ALT – kui puudub, lisab brauser [ IMAGE ]

...

Järgmine samm – LONGDESC

<img src=”foto.gif” alt=”Foto – mina, vanaema ja meie kass.” longdesc=”perepilt.txt” />

.. ja järgmine – pildi mõõtmed:

<img src=”foto.gif” alt=”Foto – mina, vanaema ja meie kass.” longdesc=”perepilt.txt” width=”200” height=”140” hspace=”30” vspace=”25” />

Ja viimaks: pildi paigutus lehel:

<img src=”foto.gif” alt=”Foto – mina, vanaema ja meie kass.” longdesc=”perepilt.txt” width=”200” height=”140” hspace=”30” vspace=”25” align=”left” />

...

Paigutusatribuudid:

left – pilt paigutatakse vasakusse ekraaniserva, tekst paigutatakse kohakuti pildi ülaservaga

right – sama paremas servas

top – pilt vasakus erkaaniservas, esimene tekstirida paigutatakse kohakuti pildi ülaservaga, järgnev tekst tuleb pildi alla (sobib piltide pealkirjade lisamiseks).

middle – nagu eelmine, kuid esimene tekstirida tuleb pildi keskjoonele

bottom - sisuliselt sama, mis align-i puudumine.

Graafikaformaadid veebis

GIF (versioonid 87 ja 89) – kuni 256 värvitooni, teravad värvid. Pikka aega patendiprobleem.

JPEG (JPG) – fototaseme värvivalik, pastelsus (lossy compression ehk kadudega pakkimine)

PNG – GIF-i sarnane, kuid värvipiiranguteta

Efektid:

Läbipaistev taust (transparency)

Kihtesitus (interlaced GIF, progressive JPEG)

Animatsioonid (animated GIF – ainult versioon 89)

Graafika serveris

Serveris olev materjal on kasulik sorteerida eri kataloogidesse vastavalt otstarbele:

<img src=”graafika/fotod/mari.jpg” alt= ”Mari pilt” />

Lähi- ja kaugviited nagu linkide puhul

<img src=”/users/mari/graafika/fotod/mari.jpg” alt=”Minu pruudi pilt” />

<img src=”http://www.ttu.ee/users/mari/ fotod/mari.jpg” alt= ”Minu õe pilt” />

Kaugviidet kasutada vaid vajaduse korral

Graafiline viide

Tavaviide:

<a href=”/users/mari/” title=”Mari koduleht”>Mari lehekülg</a>

Pildimärgend (lihtsustatud kujul):

<img src=”/users/mari/fotod/mari.jpg” alt=”Mari pilt” />

Paneme kokku:

<a href=”/users/mari/” title=”Mari koduleht”> <img src=”/users/mari/fotod/ mari.jpg” alt=”Mari pilt” border=”0” /> Mari kodulehekülg </a>

NB! border=”0” eemaldab siin raamjoone!

Suured pildid

Nagu mainitud, suuri pilte lehe algusse toppida ei ole eriti ilus. Parem on pildile viidata:

<a href=”pildifaili nimi” title=”Minu sünnipäevapilt”>Siin on suur pilt minu sünnipäevapeost (555 kB) </a>

Lisatud suurus koos pildi kirjeldusega laseb kasutajal otsustada, kas jääda laadimist ootama

Viisakam variant aga on teha omaette leht:

<a href=”fotoleht.html” title=”Minu sünnipäevapilt”>Siin on suur pilt minu sünnipäevapeost (555 kB) </a>

...

Omakorda fotoleht.html-il on viide tagasi:

<a href=”index.html” title=”Tagasi”> Tagasi esilehele </a>

Kõige soliidsem variant – eelvaatlusega viide:

<a href=”fotoleht.html” title=”Minu sünnipäevapilt”><img src=”v_foto.gif” alt= ”pildilink suurele pildile”> Suur pilt minu sünnipäevapeost (555 kB) </a>

NB! Thumbnail on siin GIF, suur pilt JPG

Siputavad asjad

Varem olid peamised multimeediavõimalused eeskätt animeeritud GIF-id, Java applet-id ja Javascripti programmid

Tänapäeval põhimärksõna Flash

Suhtumine võiks olla siiski sama – kui lehte on plaanis lasta lugeda rohkem kui üks kord (ja lehe eesmärk ei ole tähelepanu iga hinna eest!), tasub tõsiselt mõelda animatsioonidest loobumisele

Halvad näited – enamik Eesti portaalidest :-P

Teine probleem – sageli vajab lisatarkvara

CSS?

HTML: alguses mõeldud struktuuri edastamiseks

<p>See on lõik</p><p>See on teine lõik</p>

Äri => efektsed veebilehed

Must maagia ja peedist pesumasinatrummel

„Best viewed with...“ => igaühel oma veeb?

<font>-märgend – struktuur + kujundus

W3C pidi midagi ette võtma

CSS!

Cascading Style Sheets – kaskaad-stiililehed

HTMLi ja XHTMLi paralleelstandard

Ilmus HTML 3.2 ajal, käivitamine võttis aega

Algul paras segadus – kes mida kuidas toetas

HTML 4 ja XHTML ajaks hakkas ühtlustuma – CSS2

Praegu tegemisel CSS3

Põhimõisted

Koosneb reeglitest

Reegel koosneb selektorist ja definitsioonidest
selektor
{
definitsioon1;
definitsioon2;
...
definitsioon N
}

Paigutus tegelikult vaba

...

Definitsioon koosneb omadusest ja selle väärtusest (sarnaneb HTML-märgendi argumentidega, kuid süntaks on veidi teine)

p {font-size: 8pt; color: red}

p – selektor, 2 definitsiooni: kirja suurus ja värv

Lühikesed reeglid võib kirjutada ka ühele reale

Kolm varianti: 1

HTML-märgendi sees, kehtib vaid sellele märgendile:
<p style="font size: small; color: red; font-weight: bold; font-family: Arial, Helvetica, non-serif">See on märgendisisene stiilimäärang</p>

Vana <font>-märgendi aseaine

3 varianti: 2

<head>-osas asuv leheküljepõhine määrang

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="et" lang="et" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Stiilne veebileht </title>
<style type="text/css">
<![CDATA[
body
{
font size: small;
color: red;

...

font-weight: bold;
font-family: Arial, Helvetica, non-serif

}

]]>

</style>

</head>

</body>

dokumendi tekst

</body>

</html>

Kommentaarimärgendite kasutamine stiili ümber väldib vanade brauserite lolliksmineku!

3 varianti: 3

Eraldi failis asuv stiilileht

Tasub kasutada, kui mitu lehte kasutavad ühtset stiili

Välise stiililehe korral tuleb <head>-ossa lisada
<link rel="stylesheet" href="stiililehefail.css" type="text/css" />

Mõju levib üldisemalt konkreetsemale (kaskaad!)

Kui tekib vastuolu, kehtib lokaalsem stiil

Mõõtühikud

% - protsent millestki

in - toll

cm – sentimeeter

mm - millimeeter

em - jooksva elemendi kirjastiili suurus

ex - jooksva elemendi kirjastiili x-height -väärtus; harilikult u. ½ suurusest

pt – punkt (1/72 tolli)

pc - piika (12 punkti)

px - piksel (ekraanipunkt vastavalt ekraani lahutusvõimele)

Värvid

värvi_nimi - ingliskeelne nimetus: red, saddlebrown, burlywood – KÕIK EI TOETA

rgb(x,x,x) - RGB-kolmik (punane-roneline-sinine): rgb(255,0,0)

rgb(y%, y%, y%) - RGB-kolmik protsentuaalselt: rgb(100%,0%,0%)

#rrggbb - RGB-kolmik kuueteistkümnend-numbrina: #ff0000 – ENIMKASUTATAV

Kokkuvõtteks

Veebitegemine on üldiselt lihtne, kuid kohati ka mitte nii lihtne, kui vahel tundub

Üldjuhul peaks sisu dikteerima vormi, mitte vastupidi

Tuleks teadvustada, et tegemist on avaliku esinemisega paljude inimeste ees

Standardid on mõeldud järgimiseks

Soovitav on vähemalt suurem osa HTMLi alguses ise kirjutada (mitte kasutada generaatorit)

Jõudu!

Kaido Kikkas

2005-09-15T12:12:10