Grafika
<img src="?" /> plaas grafika
<img src="?" alt="?" /> beskryf grafika
<img src="?" align="?"> belyn grafika
Om grafika in jou HTML dokument te kan plaas, moet jy weet wat die naam van die lêer is en waar op jou Internet bediener dit gestoor is (die bron van die lêer - "source"). Dan eers kan jy die webblaaier sê waar om die grafika te kry wat dit moet laai op 'n spesifieke plek in jou webblad.
Die maklikste manier is om die grafika lêers in dieselfde vouer te stoor as jou HTML dokument, wat die verstekstelling is van enige webblaaier en waar dit dus outomaties sal gaan soek. Jy kan ook jou grafika lêers in subvouers gaan stoor wat dit makliker sal maak om dit te organiseer as jy baie grafika lêers in jou dokument gebruik.
Die grafika wat ek vir 'n voorbeeld gaan gebruik, se naam is "kat.gif" en dit is in 'n subvouer gestoor genaamd "pictures". Die bron vir my grafika is dus "./pictures/kat.gif", waar "./" dieselfde vouer aandui as waarin my HTML-dokument gestoor is, "pictures/" die naam van die subvouer is en "kat.gif" die naam van die grafika lêer is.
Die HTML wat die webblaaier opdrag gee om my kat grafika te laai, lyk soos volg:
<img src="./pictures/kat.gif" />
|
en dit lyk soos volg:
Eenvoudig, nê? Sien jy die dubbele aanhalingstekens (" ") waartussen die bron geplaas is? Dit is baie belangrik, aangesien die bron uit verskillende dele bestaan. Die aanhalingstekens groepeer al die dele van die bron saam, sodat die webblaaier eers die volledige pad na die bron kan lees voordat dit die grafika lêer gaan soek om te laai. Sien jy ook die spasie en vorentoeskuinsstreep net voor die regterhoekhakie? Aangesien die <img src="?">-merker nie 'n eindmerker het nie, word dit op die manier geëindig.
Soos met die lynbreuk-merker, sou die merker net <img src="?"> gewees het. Dit was met HTML3.2 nie nodig om die <img src="?">-merker te eindig nie. Nuwe ontwikkelinge in HTML soos HTML4.1+ en XHTML1.0+ vereis egter dat alle merkers geëindig word. <img src="?" /> word korrek deur ouer webblaaiers geïnterpreteer en dit voldoen aan die vereistes vir nuwe generasie webblaaiers. Gebruik dit dus maar so, dan sal jou webblaaie versoenbaar wees met nuwe generasie webblaaiers.
Kom ons gebruik nou die <img src="?" align="?" />-merker om die plasing van die grafika op die blad te beheer. Ons kan dit aan die linkerkant plaas deur te skryf:
<img src="./pictures/kat.gif" align="left" />
|
en dan sal dit aan die linkerkant van die paragraaf geplaas word:
Of ons kan dit aan die regterkant van die paragraaf plaas deur te skryf:
<img src="./pictures/kat.gif" align="right" />
|
en dan sal dit regs geplaas word:
Om grafika in die middel van 'n paragraaf te plaas, is effens moeiliker, aangesien <img src="?" align="center" /> nie in die meeste webblaaiers werk nie. In plaas van om die grafika te sentreer, moet ons die paragraaf sentreer waarin die grafika geplaas is, al het ons geen teks in die paragraaf nie:
<p align="center"><img src="./pictures/kat.gif" /></p>
|
en siedaar! Die grafika verskyn in die middel van die paragraaf!
Jy kan ook 'n beskrywing gee van jou grafika wat sal verskyn wanneer jy jou muis oor die grafika beweeg. Die HTML daarvoor sal soos volg lyk:
<img src="./pictures/kat.gif" alt="My gunsteling kat" />
|
Onthou om die "alt" teks tussen aanhalingstekens (" ") te plaas. Die "alt" teks sal slegs vertoon word wanneer jy jou muis oor die grafika hou. Dit lyk soos volg:
Indien jy 'n fout maak met die bron van jou grafika, en wel alternatiewe teks gespesifiseer het, sal dit soos volg lyk:
Die alternatiewe teks word dus deur die grafika vervang wanneer alles reg werk. Die alternatiewe teks dien 'n verdere doel as om net jou grafika te beskryf. Dit maak jou blad ook toeganklik vir mense wat gesiggestrem is. "WAT??" vra jy? "Gesiggestremde mense wat rekenaars gebruik?" JA, jy het reg gelees. Sulke mense maak gebruik van tekslesers wat die teks vir 'n webblad deur middel van 'n klankkaart uitlees. Die teksleser sal dan die alternatiewe teks vir jou grafika lees, sodat die gesiggestremde persoon kan weet dat jy 'n foto van jou gunsteling kat geplaas het.
OM OP TE SOM:
- <img src="?" /> plaas grafika.
- <img src="?" alt="?" /> beskryf grafika.
- <img src="?" align="?" /> belyn grafika.
- Jy moet weet wat die naam van die grafika lêer is en waar op jou Internet bediener dit gestoor is (die bron van die lêer - "source").
- Jy kan jou grafika lêers in subvouers stoor.
- Die bron moet tussen dubbele aanhalingstekens (" ") geplaas word.
- Jy kan die grafika links, regs of gesentreer belyn.
- Alternatiewe teks verskyn wanneer jy jou muis oor die grafika beweeg.
- Die "alt" teks moet tussen aanhalingstekens (" ") geplaas word.
- Die "alt" teks maak jou blad toeganklik vir mense wat gesiggestrem is.
|
Indien jy voel jy het grafika onder die knie, gaan gerus na die volgende les oor grafika rame ("borders").
| 
