WWW-lehekülge ei kujutata tänapäeval enam ilma graafikata ettegi. Loomulikult annab oskuslikult valitud ja paigutatud pildimaterjal lehele palju juurde, samas aga meenutagem kaht asja. Esiteks - esimesed WWW-leheküljed olid hoopis ilma graafikata ning sisaldasid ainult teksti ja viiteid, ka praegu koostatakse nii mõnedki leheküljed samadel alustel. Teiseks - on palju kasutajaid, kes mitmetel põhjustel (nõrgem arvuti, tekstikuvar, aeglane modemiühendus, tekstibrauser jne) ei saa graafiliselt esitatud infot kasutada. Seda arvestades tuleks graafika lisamisel järgida põhimõtet "nii palju kui vajalik, nii vähe kui võimalik".
Tervenisti graafiliste lehekülgede lugejaid kummitavad järgmised probleemid, millest tihtipeale autoril aimu pole:
Tavalise pildi paigutamine WWW-leheküljele toimub kõige lihtsamal kujul selliselt:
<IMG SRC="pildifaili nimi" WIDTH="pikselite arv" HEIGHT="pikselite arv" ALT="Kirjeldus">
ALT-osa ei ole tegelikult kohustuslik, kuid on ülimalt soovitav. See on ainsaks võimaluseks neile lugejaile, kes graafikat ei näe - nemad näevad selle asemel ALT-osaga antud kirjeldust (selle puudumisel aga vaid märget "[ IMAGE ]", mis neid just kuigi palju targemaks ei tee). Seega oleks väga heaks tooniks hakata kohe algusest peale kõiki graafilisi komponente ALT-osaga varustama. Näiteks selliselt:
<IMG SRC="foto.gif" ALT="Foto - mina, vanaema ja meie kass.">
On ka juhuseid, kus kirjeldamisel ei ole mõtet - näiteks lõigu algust märkivate graafiliste sümbolite (pallikesed, tärnid jms) puhul. "Siin on sinine muna"-sarnane kirjeldus ei ole eriti informeeriv. Sellisel juhul tuleks ALT osa ikkagi lisada, vältimaks "[ IMAGE ]"-märget, kuid jätta kas tühjaks (ALT="") või panna kirjelduseks näiteks tärn vms.
WWW-s kasutatakse kaht liiki graafikafaile - GIF- ja JPEG-tüüpi. Jämedalt eristatuna on esimene veidi parema kvaliteediga ja võimaldab oma uuemas modifikatsioonis salvestada ka animatsiooni, teine aga pastelsema väljanägemise ning väiksema mahuga. Seepärast on - jällegi laias laastus - võimalik soovitada GIF-i joonistatud graafika ja väikeste fotode jaoks, JPEG-d aga suurte piltide ja fotode tarvis.
JPEG-pildiformaati kasuta keskmise kvaliteediga, GIF pildiformaadi puhul kasuta interlaced formaati (pilt tuleb ekraanile etappide kaupa, kusjuures igal etapil paraneb pildi punkttihedus).
WWW-poolseid ettekirjutusi kummagi formaadi kasutamiseks aga ei ole.
Lehekülge looma hakates on ilmselt tarvis koguda (Internetist või mujalt) endale vajaminev graafikamaterjal ning see siis oma WWW-kataloogi kopeerida. Kui tegu pole just paari-kolme pildiga, oleks otstarbekas luua WWW-kataloogi alla omaette alamkataloog graafika jaoks - suurtes, sadu pilte sisaldavates süsteemides võiks veel ka graafika ära sorteerida - fotod ühte, taustad teise, joonised kolmandasse, muu pudi-padi neljandasse "kasti". Sellisel juhul tuleb muidugi lisada katalooginimed ka graafikamärgendisse:
<IMG SRC="graafika/fotod/mari.jpg" WIDTH="30" HEIGHT="50" ALT="Mari pilt">
Nagu viidete puhul, saab ka graafika korral kasutada nii lähi- kui kaugviiteid.
<IMG SRC=http://www.ttu.ee/users/mari/fotod/mari.jpg WIDTH="30" HEIGHT="50" ALT="Minu õe pilt">
Tõsi, kaugviiteid tasub kasutada vaid juhul, kui viidatav arvuti ei asu väga kaugel (vastasel juhul võib pildi lugemine võtta mõttetult palju aega) või pildi omanik ei luba mingil põhjusel seda teistel endale kopeerida.
Atribuudid
Atribuut ALIGN=(TOP, MIDDLE, BOTTOM, LEFT, RIGHT) - määrab asukoha ekraanil
Atribuut ALT="tekst" - kommentaar nendele kes mingil põhjusel pilti ennast ei näe.
Atribuut SRC="pildi faili nimi" - näitab pildi asukohta.
Atribuut WIDTH="pikselite arv" ja HEIGHT="pikselite arv" - saab anda pildile ise suuruse pixelites.
Atribuut BORDER="pikselite arv" - pildi ääre paksus
Atribuut HSPACE="pikselite arv" - mitu pikselit jätta horisontaalis pildi ümber vabaks
Atribuut VSPACE="pikselite arv" - mitu pixelit jätta vertikaalis pildi ümber vabaks
Graafikat saab kasutada ka viidete tegemiseks kas siis viite teksti asemel või koos sellega. Selleks tuleb lihtsalt kombineerida graafika- ja viitemärgendid.
<A HREF="/users/peeter/mina.html"> <IMG SRC="/users/peeter/fotod/mina.jpg" WIDTH="30" HEIGHT="50" ALT="Minu pilt">Peetri kodulehekülg</A>
Tulemuseks on viide tekstiga "Peetri kodulehekülg", mille ees on samuti viitena toimiv Peetri foto.
Lihtsaimal kujul luuakse tabel HTML-is nii:
<TABLE> <TR> (rea algus) <TD> </TD> (veerg) <TD> </TD> (veerg) . . . </TR> (rea lõpp) <TR> (uus rida) <TD> </TD> (veerg) <TD> </TD> (veerg) . . . </TR> </TABLE>
Näiteks osa korvpallimeeskonna andmeid sisaldavast tabelist (all on toodud ka tulemus):
<TABLE BORDER=1> <TR> <TD>Nimi</TD> <TD>Pikkus</TD> <TD>Kaal </TD> <TD>Jalanumber</TD> </TR> <TR> <TD>Ants</TD> <TD>185</TD> <TD>88</TD> <TD>43</TD> </TR> <TR> <TD>Kalle</TD> <TD>194</TD> <TD>94</TD> <TD>44</TD> </TR> <TR> <TD>Mikk</TD> <TD>177</TD> <TD>78</TD> <TD>42</TD> </TR> </TABLE>
|
Nimi |
Pikkus |
Kaal |
Jalanumber |
|
Ants |
185 |
88 |
43 |
|
Kalle |
194 |
94 |
44 |
|
Mikk |
177 |
78 |
42 |
Atribuudid
<TABLE> . . . </TABLE>
Atribuut BORDER="pikselite arv" määrab tabeli äärejoonte jämeduse.
Atribuut WIDTH="pikselite arv" määrab tabeli laiuse. See võib olla ka %-des (lehekülje laiusest)
Atribuut HEIGHT="pikselite arv" - määrab tabeli kõrguse. See võib olla ka %-des.
Atribuut ALIGN=(LEFT, CENTER, RIGHT) - määrab tabeli asetuse ekraanil
Atribuut BGCOLOR=(Black, White) - määrab tabeli taustavärvi
<TR><TD>. . .</TD></TR>
Atribuut ALIGN=(LEFT, RIGHT, CENTER) - määrab teksti asukoha väljas
Atribuut VALIGN=(TOP, MIDDLE, BOTTOM) - määrab teksti asukoha väljas vertikaalselt., Atribuut
Atribuut WIDTH=pikselite arv - tabeli välja laius
Atribuut BGCOLOR=(Black, White) - määrab tabeli välja taustavärvi
<TD>. . . </TD>
Atribuut COLSPAN=n - n rea muutmine üheks
Atribuut ROWSPAN=n - n veeru muutmine üheks
Raamid
Raamide ehk freimide (ingl. k. frame) kasutamine lubab luua "leht lehes"-süsteeme - mitmest osast koosnevaid lehekülgi, kus erinevates akendes saab vaadata erinevaid lehekülgi, sooritada mitmesuguseid operatsioone jpm.
Raamide kirjeldus esitatakse peale koodi </head>
Näiteks:
</head>
<frameset border="0" cols="135,*">
<frame name="left" src="freim.htm" scrolling="no" border="0">
<frameset rows="80,*">
<frame name="top" src="ylemine.htm" scrolling="no" border="0">
<frame name="tekst" src="yldine.htm" scrolling="auto">
</frameset>
<noframes>
<body>
Su browser ei näita raame!
</body>
</noframes>
</frameset>
<FRAMESET> - algavad raamid.
FRAME NAME="freimi nimi" - näitab mis on raami nimi (seda nime läheb linkamisel vaja).
BORDER="pikselite arv" - näitab kui suur on raami paksus.
COLS="pikselite arv, pikselite arv,…" - näitab mis pidi raam on. Antud juhul koosneb raam veergudest.
ROWS="pikselite arv, pikselite arv,…" - näitab jällegi mis pidi raam on. Antud juhul koosneb raam ridadest.
* - ülejäänud osa leheküljest
SCROLLING="(NO, YES, AUTO)" - saab määrata, kas raami saab üles-alla kerida.
SRC="faili nimi" - mis lehte raam näitab.
</FRAMESET> - raamide lõpp.
Viitamine raamidega lehel
<A HREF="faili nimi" TARGET="freimi nimi">
Lisaks võimalik kasutada ka
TARGET="(_blank, _self, _top)" - määrab akna, millele viide väljastatakse.
_blank - viide väljastatakse uuele, käivitatavale sirvijale
_self - viide väljastatakse samasse frame'i
_top - viide väljastatakse, eksisteerivat frame-süsteemi vältides, samasse sirvijasse.
Värvidest
Värve esitatakse kas värvi ingliskeelse nimetusena või spetsiaalse koodina.
Mõnede värvide koodid:
Valge - White või #FFFFFF
Must - Black või #000000
Sinine - Blue või #0000FF
Punane - Red või #FF0000
Kollane - Yellow või #FFFF00
Värve saab lisada mitmetele elementidele, nagu näiteks <BODY>, <TABLE>, <TR>, <TD>, <FONT>
Näiteks <BODY bgcolor=#000000> puhul on lehekülje taustavärv must.
Näiteks <TABLE bgcolor=#0000FF> puhul on tabeli taustavärv sinine.
Näiteks <FONT color=#FF0000> puhul on tekst punast värvi
Kõik WWW-s avaldatud dokumendid, pildid, fotod jms. on tehnilisest küljest igale kasutajale kättesaadavad - igaüks võib kogu soovitava materjali enda arvutisse kopeerida. Samas eksisteerivad ka siin mõningad "ausa mängu" alla kuuluvad põhitõed.
Kõigepealt kehtivad WWW-s täielikult kõik Interneti üldised etiketinõuded - mida võib kokku võtta lausesse "ära tee seda, mida ei taha, et sulle tehakse". Igasugune mõnitamine, halvustamine, sõimamine ning ropendamine mõjub WWW-s täpselt sama räigena kui mistahes muul kujul.
Nagu mistahes publikatsioonide korral, on ka WWW-s hukkamõistetav plagieerimine - teise inimese töö avaldamine oma nime all. Käesoleval juhul kuulub siia kindlasti teiste tehtud lehekülje serveerimine omaenda tööna, kuid plagiaadina võib võtta ka teise lehekülje salvestamist ja ülespanekut oma serverisse, selleks eelnevat luba küsimata. Internetis leviv WWW-graafika on üldiselt vabalt kasutatav, kuid selle kopeerimine kohtadest, kus see on ühemõtteliselt kuulutatud eraomandiks, on samuti üleastumine.
Ja lõpuks tasub meeles pidada kuldset mõtet - kui midagi öelda pole, ole parem vait. Liiga palju on WWW-s lehti, millel tegelikult puudub igasugune mõte. Veel ühte juurde tekitada oleks ilmselge rumalus.
WWW-kujundusest on tänaseks saanud omaette tõsine töövaldkond, kus töötavad kõrvuti arvutispetsialistid, kunstnikud ja disainerid. Algajale võib soovitada järgmist: