Lektion 6: Grafik

Sådan får du billeder og animationer på din hjemmeside. Lær også at lave såkaldte imagemaps.

En webside består, som tidligere nævnt, primært af to ting: tekst og grafik. I denne lektion kigger vi på hvordan du putter grafik ind på en webside og vi kigger lidt på hvad du skal være opmærksom på, når du gør det.

Grafik

Umiddelbart er det simpelt at putte grafik på en webside. Der er dog et par ting du skal vide først.

• Grafik filer bør ikke overskride max. 20Kb. pr. stk.. Der er en lillefinger regel der hedder at en webside ikke bør overskride ca. 60 Kbytes.. og hvis den gør det, bør det ikke være pga. tunge grafik elementer.
• Grafik filer skal laves som enten ".gif" eller som jpeg - ".jpg".
• Du bør bruge ".gif" filer hvis der ikke er for mange farver i billedet da gif formatet viser billedet nøjagtigt som det er lavet.
• Du bør bruge ".jpg" filer hvis der er mange farver eller hvis filen ellers bliver for tung. ".jpg" filer kan laves i forskellig kvalitet - lav kvalitet = færre Kbytes.
• ".gif" filer kan være animerede. Dvs. at de kan bestå af X antal "frames" som bliver vist efter hinanden.

Image tag'n

At putte grafik på en webside gøres med <img> tag'n. Den simple udgave ser således ud:

<img src="delfin.gif">

Du kan og bør dog bruge flere koder en src= koden. Jeg gennemgår mulige koder og bagefter ser vi på et eksempel:

• src angiver hvilken fil du ønsker at bruge.
• border angiver tykkelsen af kanten rundt om billedet. Hvis billedet bruges i et link vil der automatisk være border="1" og farven af kanten vil være den farve du har angivet at links skal have. Vi anbefaler at du derfor altid bruger border="0" i dine <img> tags, hvis billedet bruges som link.
• alt angiver en titel til grafikfilen. Titlen vises før filen er loadet og bagefter ved mus-over grafik filen.
• width og height gør at du kan have kontrol over bredde og højde af grafik filen (skrives i pixels).
• hspace og vspace gør at du kan lave horizontal og vertical luft omkring billedet (skrives i pixels).
• align kan justere placeringen af billedet. F.eks. "left", "center" og "right"

Eksemplet med "delfin.gif" herover kunne f.eks. også skrives således:

<img src="delfin.gif" width="101" height="100" alt="en delfin" border="0">

Resultatet af koden herover (og grafik filen) vil se således ud (bemærk at der er brugt en animeret gif):

Client-side imagemap

Vha. imagemaps kan du lave klikbare områder inde i en grafik fil. Der findes to typer imagemaps - client-side (dvs. at det er grafikfiler du har lavet og som du selv lægger op på nettet) og server-side (andres grafikfiler beliggende på anden server). Server-side imagemaps er meget sjældne og det er formodentligt et emne du aldrig kommer til at berøre. Client-side image maps er til gengæld brugbare.

Lad os sige du ønsker en grafik fil som ser således ud.. og som har tre områder som er links (vi ser nærmere på hvordan links fungerer i næste lektion):



At skrive grafikfilen gøres, som du nu kender, med <img> tag'n. Dog med den forskel at vi nu siger at den skal bruge et "client-side imagemap". Dette gør vi opmærksom på ved at tilføje koden usemap="#navn-på-imagemap-her" i <img> tag'n.

Nu mangler vi at lave selve image map'et. Dette gøres vha. <map name="det-navn-vi-bruger-som-usemap-navn"> ..og.. </map>. Imellem disse to tags har vi så en række <area> tags som angiver de områder der er klikbare.

Som i <img> tag'n er der en lang række koder du kan bruge i <area> tags'ne.. de vigtigste får du her:

• shape er formen på det klikbare område. Formen kan være enten rect (en firkant), circ (en cirkel) eller poly (en polygon).
• coords angiver koordinater på det klikbare område. "rect" angives med fire koordinater [venstre x, top y, højre x, bund y]. "circ" angives med tre koordinater [midt x, midt y, radius]. "poly" angives med X antal koordinater [første x, første y, andet x, andet y, etc..].
• href fortæller hvilken handling der skal udføres ved klik.
• alt angiver titel på det klikbare område.

Koden til eksemplet herover ser således ud:

<img src="delfin_as.gif" width="94" height="93" border="0" usemap="#dlfn">
<map name="dlfn">
<area shape="rect" coords="0, 6,94,16" href="forside.html" alt="forside">
<area shape="rect" coords="0,18,94,28" href="priser.html" alt="priser">
<area shape="rect" coords="0,30,94,40" href="kontakt.html" alt="kontakt">
</map>

Grafik og tekst

Når du kommer længere i lektionerne lærer du at bruge tables. Det er lettere og bedre at styre hvordan tekst og grafik placeres i forhold til hinanden med tables, end det er at gøre med align= koden og <br> tags. Du vil dog alligevel ikke kunne undgå at skulle benytte disse af og til.

Emnet er desværre lidt kompliceret og den letteste måde at lære det på er at forsøge sig frem. Det vi kan gøre nu er at vise et par eksempler på problematikken. Husk at <br> tag'n i sig selv kun laver et "linieskift", men at <br clear="all"> tvinger et fuldt liniekskift.

<font color="#A00000">
En to tre fire fem seks syv otte ni ti elleve tolv tretten fjorten femten
<img src="delfin.gif">
seksten sytten atten nitten tyve enogtyve toogtyve treogtyve osv. osv.
</font>

Resultatet af koden herover ser således ud:

En to tre fire fem seks syv otte ni ti elleve tolv tretten fjorten femten seksten sytten atten nitten tyve enogtyve toogtyve treogtyve osv. osv.

Hvis vi bruger <br> tag'n kan vi sætte anden ½del af teksten under billedet. Følgende kode:

<font color="#008000">
En to tre fire fem seks syv otte ni ti elleve tolv tretten fjorten femten
<img src="delfin.gif"><br>
seksten sytten atten nitten tyve enogtyve toogtyve treogtyve osv. osv.
</font>

Giver følgende resultat

En to tre fire fem seks syv otte ni ti elleve tolv tretten fjorten femten
seksten sytten atten nitten tyve enogtyve toogtyve treogtyve osv. osv.

Nu udvider vi image tag'n ved at bruge align="left". Når vi gør dette vil teksten opføre sig anderledes i forhold til <img> tag'n. Kik på dette eksempel:

<font color="#000090">
En to tre fire fem seks syv otte ni ti elleve tolv tretten fjorten femten
<img src="delfin.gif" align="left"><br>
seksten sytten atten nitten tyve enogtyve toogtyve treogtyve osv. osv.
</font>

Giver følgende resultat:

En to tre fire fem seks syv otte ni ti elleve tolv tretten fjorten femten
seksten sytten atten nitten tyve enogtyve toogtyve treogtyve osv. osv.

Bemærk at vi stadig bruger <br> tag'n - Det er svært at se i resultatet... Måden vi har fået teksten du læser lige nu til at stå under billedet, er ved at skrive en <br clear="all"> tag før denne tekst.

Nu prøver vi at lave to grafik filer og undlader brug af <br> tags fuldstændigt:

<font color="#A00000">
<img src="delfin.gif" border="0" align="right">
<img src="delfin.gif" border="0" align="left">
En to tre fire fem seks syv otte ni ti elleve tolv tretten fjorten femten
seksten sytten atten nitten tyve enogtyve toogtyve treogtyve osv. osv.
</font>

Dette giver følgende resultat:

En to tre fire fem seks syv otte ni ti elleve tolv tretten fjorten femten seksten sytten atten nitten tyve enogtyve toogtyve treogtyve osv. osv.

Mere vil vi ikke sige her. Forsøg dig frem, eller gør som de fleste gør: Brug tables i stedet for.

Skrevet okt. 2001 af Niels Rune Bøggild

Tilføjet af Simon Glue den 02-12-2003 - Hits: 4664