Standardeid järgiv veebidisain: XHTML ja CSS algajale

Hans Põldojahans@tpu.ee

Natuke ajaloost

Milleks standardeid järgida?

http://www.tpu.ee/~hans/www/ 3

Hüpertekstisüsteemide ajaloost

• 1945 esitas Vannevar Bush artiklis “As We May Think” oma visiooni süsteemist Memex

• 1968 esitles Douglas C. Engelbart esimest töötavat hüpertekstisüsteemi NLS

• 1981 kirjeldas Ted Nelson süsteemi Xanadu, mis erinevalt eelkäijatest pidi töötama personaalarvutil

• 1987 avaldati Bill Atkinsoni loodud lihtne hüpertekstisüsteem HyperCard, mis levis laialdaselt aastatel 1987-1992

http://www.tpu.ee/~hans/www/ 4

Memex

http://www.tpu.ee/~hans/www/ 5

NLS

http://www.tpu.ee/~hans/www/ 6

HyperCard

http://www.tpu.ee/~hans/www/ 7

WWW ajaloost

• 1989-1990 leiutas Tim Berners-Lee veebi ja kirjutas esimese brauseri WorldWideWeb

• 1992 ilmus esimene HTML standard• 1993 ilmus Mosaic, esimene laialt levinud

graafiline brauser Windowsile• 1994 ilmus Netscape 1.0 (koodnimega Mozilla)• 1994 asutas Tim Berners-Lee World Wide Web

konsortsiumi (www.w3.org)

http://www.tpu.ee/~hans/www/ 8

W3C eesmärgid

• Universaalne ligipääs – muuta veeb ligipääsetavaks kõigile inimestele propageerides tehnoloogiaid, mis arvestavad kõikidel kontinentidel elavate inimeste laiade erinevustega kultuuris, keeles, hariduses, võimetes, materiaalsetes ja tehnilistes võimalustes ning füüsilistes piirangutes.

• Semantiline veeb – luua tarkvarakeskkond, milles dokumentide sisu on arvutiprogrammidele arusaadava tähendusega.

• Usaldatav veeb – suunata veebi arengut, pidades hoolikalt silmas selle tehnoloogia õiguslikke, majanduslikke ning sotsiaalseid aspekte.

http://www.tpu.ee/~hans/www/ 9

W3C standardid

• HTML (viimane versioon HTML 4.01 aastast 1999)• XHTML• XML - laiendatav märgendikeel• CSS1 ja CSS2 - veebilehtede kujunduse kirjeldamiseks• WCAG - veebilehekülgede ligipääsetavusjuhised• PNG - graafikaformaat• SVG - vektorgraafika kirjeldamise keel• MathML - matemaatiliste sümbolite esitamine veebis• ...

http://www.tpu.ee/~hans/www/ 10

“The Browser Wars”

• 1995 ilmus Internet Explorer 1.0 (Microsoft ostis Mosaic’i lähtekoodi)

• 1995-1997 tihedad IE ja Netscape versiooniuuendused

• Uued funktsionaalsused, brauserispetsiifilised HTML elemendid, ebastabiilsus, turvaaugud

• 1998 AOL ostab Netscape, IE saavutab ülekaaluka turuosa

• 1999 Ilmub IE 5.0, mis on väga tolerantne vigase HTML koodi suhtes

http://www.tpu.ee/~hans/www/ 11

IE vs Netscape (1997)

http://www.tpu.ee/~hans/www/ 12

Brauserite sõja tagajärjed

• HTML kasutatakse kujunduslikel eesmärkidel, mitte dokumendi struktuuri kirjeldamiseks

• Leheküljed pole ligipääsetavad erivajadustega kasutajatele

• Leheküljed paistavad erinevates brauserites erinevalt ning vanema versiooni jaoks loodud leheküljed ei pruugi töötada uuema brauseriga

• Veebirakenduste loomine nõuab rohkem aega ja raha, kui luuakse erinevatele brauseritele oma versioonid

• Kuna kujundus ja sisu ei ole lahus, on problemaatiline lehekülgede portimine õhukestele klientidele kasutatavale kujule

http://www.tpu.ee/~hans/www/ 13

Üleminek standardite järgimisele

• 1998 juhtivate veebidisainerite poolt asutati Web Standards Project (www.webstandards.org)

• 2000 ilmus Internet Explorer 5.0 Mac’i versioon, mis oli esimene standardeid suurel määral toetav brauser

http://www.tpu.ee/~hans/www/ 14

Standardeid järgivad brauserid

• Mozilla 1.0 ja uuemad• Mozilla Firefox• Netscape Navigator 6.0 ja uuemad• Internet Explorer 6.0 ja uuemad Windowsil• Internet Explorer 5.0 ja uuemad Macintoshil• Opera 7.0 ja uuemad• Safari• ...

http://www.tpu.ee/~hans/www/ 15

Brauserite sõda 2?

http://www.tpu.ee/~hans/www/ 16

Müüdid standardite kohta

• Standardeid järgivad leheküljed on inetud ja igavad

• Standardite järgimine on vajalik ainult puuetega inimestele ligipääsu tagamiseks

• Standardid on keerulised

http://www.tpu.ee/~hans/www/ 17

Inetu ja igav?

http://www.tpu.ee/~hans/www/ 18

Ligipääsetav?

http://www.tpu.ee/~hans/www/ 19

Ligipääsetav?

XHTML ja CSS

Keeruline? Üldsegi mitte...

http://www.tpu.ee/~hans/www/ 21

XHTML mõisted

• <img src=“minupilt.jpg” alt=“Mina” />• märgis (tag)• img - element• src, alt - atribuudid (attribute)• minupilt.jpg, Mina - atribuutide väärtused

(attribute value)

http://www.tpu.ee/~hans/www/ 22

Sammud veebilehestiku loomisel

1. Dokumenditüübi valik2. Dokumendi sisu lisamine ainult struktuuri

kirjeldavate HTML elementide abil (<h1>, <h2>, <p>, <ul>, <ol>, <li>, <table>, <img>, ... )

3. Dokumendi kontrollimine validaatori abil4. Dokumendi kujundust kirjeldava CSS faili

loomine5. CSS kontrollimine validaatori abil6. CSS testimine erinevatel brauseritel

http://www.tpu.ee/~hans/www/ 23

XHTML dokumenditüübid (1)

• XHTML 1.0 Strict. Dokumendi struktuuri kirjeldamine. Kõikide kujundusega seotud märgiste asemel tuleb kasutada CSS'i.

• XHTML 1.0 Transitional. Sobivaim dokumenditüüp olukorras, kui tahetakse, et lehekülg vastaks XHTML'i standarditele kuid kujundus töötaks ka CSS'i mittetoetavate brauseritega. Võimalik kasutada kujunduseks mõeldud HTML'i märgiseid.

• XHTML 1.0 Frameset. Kasutatakse juhul, kui soovitakse jaotada brauseriakent paneelideks.

http://www.tpu.ee/~hans/www/ 24

XHTML dokumenditüübid (2)

• XHTML 1.0 Basic. See dokumenditüüp on mõeldud klientidele, mis ei toeta kõiki XHTML'i võimalusi: mobiiltelefonid, pihuarvutid jne. Dokumenditüüp võimaldab kasutada pilte, ekraanivorme, lihtsamaid tabeleid ja objekte.

• XHTML 1.1. Modulaarse ülesehitusega XHTML, millest on kõrvaldatud kõik hüljatud HTML märgised, sarnaneb XHTML 1.0 Strict dokumenditüübiga, kuid sobib paremini XHTML edasiarendamise aluseks ning teiste keeltega integreerimiseks.

http://www.tpu.ee/~hans/www/ 25

XHTML erinevused HTML’ist (1)

• Kohustuslik DOCTYPE• Kohustuslik XML nimeruum HTML avamärgises: <html

xmlns="http://www.w3.org/1999/xhtml">• Sisutüüp: <meta http-equiv="Content-Type"

content="text/html; charset=iso-8859-1" />• XHTML on tõstutundlik - kõik HTML elemendid ja

atribuutide nimed tuleb kirjutada väikeste tähtedega: <h1>, <p>, ...

• Atribuutide väärtused võivad olla suurte tähtedega: <img src=“MinuFoto.jpg” />

• Atribuutide väärtused peavad olema jutumärkides: height=“80”

http://www.tpu.ee/~hans/www/ 26

XHTML erinevused HTML’ist (2)

• Kõikidel atribuutidel peab olema väärtus• Iga algusmärgisega peab kaasas käima ka

lõpumärgis: <h1>See on pealkiri</h1>• “Tühjad” märgised peavad ka olema suletud:

<img src=“minupilt.jpg” alt=“Mina” />• < asemel &lt;• & asemel &amp;• > asemel &gt; (see pole kohustuslik, kuid nii on

ilus)

http://www.tpu.ee/~hans/www/ 27

Ülesanne

• Kontrollige eelmisel korral loodud kooli kodulehekülge W3C HTML validaatoriga

• Määrake dokumenditüübiks XHTML 1.0 Transitional ja parandage vead

http://www.tpu.ee/~hans/www/ 28

CSS näide

h1 {font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;font-weight : bold;font-size : 10pt;

}

http://www.tpu.ee/~hans/www/ 29

Ülesanne 2

• Kujundada kooli kodulehekülg välise CSS laadilehe abil (värvid, kirjatüüp jne)