Teks en Grafika
<img src="?" align="left" /> belyn grafika aan die linkerkant van die bladsy
<img src="?" align="right" /> belyn grafika aan die regterkant van die bladsy
<img src="?" align="top" /> belyn teks gelyk met die bokant van die grafika
<img src="?" align="bottom" /> belyn teks gelyk met die onderkant van die grafika
<img src="?" align="middle" /> belyn teks regoor die middel van die grafika
Grafika is soveel wêrd as 'n duisend woorde, maar jy moenie alles glo wat jy hoor nie. Grafika is interessant, maar die kans is goed dat jy teks saam met die grafika sal wil plaas. Dit is hoe jy dit doen......
Daar is verskeie tegnieke om teks saam met grafika te belyn, en dit word gedoen met die <img src="?" align="?" />-merker. In die grafika les het ons reeds kennis gemaak met die basiese belyning van grafika sonder teks. Kom ons kyk nou hoe lyk dit wanneer ons teks en grafika kombineer.
Eerstens gaan ons 'n paragraaf begin met grafika en die teks daarom laat vloei:
<p><:img src="kat.gif" align="left" /> Tot die aand dat ou Boesman hom in die donker teen Stan se Siamees vasgeloop het. As dit nie was dat die brakke so blitsig vinnig was nie, kon Boesman dalk meer skade gehad het as net 'n middeldeur oor maar sy gil het ver getrek. Gryp ek 'n flits om die paartie te bekyk. Dit was nou een kat wat nie wou boomklim nie. Nie aanvanklik nie.</p>
|
Die teks sal gelyk met die bokant van die grafika begin en aan die regterkant daarvan afvloei tot dit onder die grafika kan inskuif:
 Tot die aand dat ou Boesman hom in die donker teen Stan se Siamees vasgeloop het. As dit nie was dat die brakke so blitsig vinnig was nie, kon Boesman dalk meer skade gehad het as net 'n middeldeur oor maar sy gil het ver getrek. Gryp ek 'n flits om die paartie te bekyk. Dit was nou een kat wat nie wou boomklim nie. Nie aanvanklik nie.
|
Partymaal sal jy egter die teks bo die grafika wil laat begin en die teks dan om die grafika laat vloei. In die geval integreer ons dan die grafika in die paragraaf:
<p>Maar met Oubaas vasgebyt aan sy stert en twee ander <img src="kat.gif" align="left" /> van voor af het die kat nie lank gehou nie. Die kat was al halfpad oor die draad voor Oubaas agtergekom het hy gaan saam die lug in en hy beter los wat hy het. Eers die volgende dag kon mens 'n idee van die spokery vorm net aan die bolle katwol wat op die gras agtergebly het. Soek jy 'n hond met 'n leeuhart?</p>
|
Die grafika sal aan die linkerkant van die paragraaf geplaas word, beginnende by die eerste reël nadat dit geplaas is:
Maar met Oubaas vasgebyt aan sy stert en twee ander van voor af het die kat nie lank gehou nie. Die kat was al halfpad oor die draad voor Oubaas agtergekom het hy gaan saam die lug in en hy beter los wat hy het. Eers die volgende dag kon mens 'n idee van die spokery vorm net aan die bolle katwol wat op die gras agtergebly het. Soek jy 'n hond met 'n leeuhart?
|
<img src="?" align="right" /> funksioneer op dieselfde manier, met die enigste verskil dat die grafika aan die regterkant van die paragraaf belyn sal word:
<p>Kyk nie verder as 'n chihuahua nie. Nou praat ek nie van <img src="kat.gif" align="right" /> die misgewassies wat met hulle tingerige ou lyfies in 'n teekoppies afgeneem word of langs 'n Great Dane staangemaak word nie. 'n Regte chihuahua is effe kleiner as 'n skippertjie en het 'n "boel"agtige lyfie. En hy't hart.</p>
|
en dit sal soos volg lyk:
Kyk nie verder as 'n chihuahua nie. Nou praat ek nie van die misgewassies wat met hulle tingerige ou lyfies in 'n teekoppies afgeneem word of langs 'n Great Dane staangemaak word nie. 'n Regte chihuahua is effe kleiner as 'n skippertjie en het 'n "boel"agtige lyfie. En hy't hart.
|
Daar is ongelukkig geen manier om grafika in die middel van 'n paragraaf te plaas met teks wat aan weerskante om die grafika vloei nie. Jy kan wel die grafika in die middel van die bladsy plaas met die teks onder dit. Daarvoor moet jy die <p align="center">-merker gebruik en nie <img src="?" align="center" />-merker nie. Jy sal ook moet 'n lynbreuk-merker (<br />) gebruik om te voorkom dat die teks langs die grafika inskuif:
<p align="center"><img src="kat.gif" /><br />Komunikasie met mense - wag dat hierdie rooikat (gemmer) van my honger word en sien hoe hy dit vir jou vertel. Maak nie saak of jy slaap nie. Een oggend hom doelbewus ignoreer en gemaak of ek bly slaap. Klim hy op die bed, lek eers aan my oor en toe ek nog nie roer nie, word ek liggies aan die oor gebyt.</p>
|
en dit sal soos volg vertoon:
Komunikasie met mense - wag dat hierdie rooikat (gemmer) van my honger word en sien hoe hy dit vir jou vertel. Maak nie saak of jy slaap nie. Een oggend hom doelbewus ignoreer en gemaak of ek bly slaap. Klim hy op die bed, lek eers aan my oor en toe ek nog nie roer nie, word ek liggies aan die oor gebyt.
|
Moenie nou belangstelling verloor nie, daar is nog 'n paar dinge wat jy moet leer. As jy net 'n enkele reël teks langs jou grafika wil plaas met die res van die teks wat onder die grafika inskuif, kan jy die <img src="?" align="top" />-, <img src="?" align="middle" />- en <img src="?" align="bottom" />-merkers gebruik.
<img src="?" align="top" /> lyk soos volg:
Nee - dis heeltemal korrek. Ons diere kommunikeer met ons. Ek weier net bloot om my diere te "vermenslik" soos wat Walt Disney se diereflieks my voorskryf die goed is.
|
<img src="?" align="bottom" /> lyk soos volg:
Nee - dis heeltemal korrek. Ons diere kommunikeer met ons. Ek weier net bloot om my diere te "vermenslik" soos wat Walt Disney se diereflieks my voorskryf die goed is.
|
en <img src="?" align="middle" /> lyk soos volg:
Nee - dis heeltemal korrek. Ons diere kommunikeer met ons. Ek weier net bloot om my diere te "vermenslik" soos wat Walt Disney se diereflieks my voorskryf die goed is.
|
Hierdie reëls mag miskien langdradig wees en baie moeite om te onthou, maar solank jy die konsep verstaan sal jy regkom. Dit is ook nie 'n skande om dinge later weer na te slaan nie, jy kan dus gerus hierdie blad boekmerk in jou webblaaier vir latere verwysing.
OM OP TE SOM:
- <img src="?" align="left" /> belyn grafika aan die linkerkant van die bladsy.
- <img src="?" align="right" /> belyn grafika aan die regterkant van die bladsy.
- <img src="?" align="top" /> belyn teks gelyk met die bokant van die grafika.
- <img src="?" align="bottom" /> belyn teks gelyk met die onderkant van die grafika.
- <img src="?" align="middle" /> belyn teks regoor die middel van die grafika.
|
Indien jy voel jy het teks en grafika onder die knie, gaan gerus na die volgende les oor skakels.
| 