Lektion 9: Indsættelse af billeder
Ville det ikke være lækkert, hvis man kunne indsætte et billede af Richard Ragnvald lige midt på sin side? Og det kan man faktisk!
Men er det ikke drøn anstrengende?
Jo, men til gengæld er det ret nemt. Alt du skal bruge er som sædvanligt et tag:
Eksempel 1:
<img src="ragnvald.jpg" />
Vil i browseren se sådan ud:
img er et element og en forkortelse af "image" ("billede" på dansk). src er en attribut og en forkortelse af "source" ("kilde"). Det virker jo meget logisk: Først fortæller man browseren, at man ønsker at indsætte et billede (img) og dernæst hvor det er placeret (src). Læg mærke at img åbnes og lukkes i samme tag - ligesom med <br /> er der tale om en kommando, der ikke er knyttet til et stykke tekst.
"ragnvald.jpg" er navnet på det billede, du ønsker at indsætte på din side. ".jpg" er den filtype, dit billede er gemt i (på samme måde som ".htm" fortæller at en fil er et HTML-dokument). Der findes tre billedtyper, man kan indsætte på sine sider:
- GIF (Graphics Interchange Format)
- JPG eller JPEG (Joint Photographic Equipment Group)
- PNG (Portable Network Graphics)
GIF-billeder er bedst at bruge til tegninger, mens JPEG-billeder er bedst til fotografier. Dette skyldes to ting. For det første kan GIF-billeder kun bestå af 256 farver, mens JPEG-billeder kan indeholde millioner af farver. For det andet er GIF-formatet bedst til at komprimere enkle billeder, mens JPEG-formatet er bedre til de mere komplicerede billeder (jo mindre dine billeder fylder, jo hurtigere bliver din side indlæst i browseren - og der findes ikke noget mere irriterende end unødvendige 'tunge' sider, når man sidder på en langsom forbindelse).
Traditionelt har man primært brugt GIF- og JPEG-formatet, men på det seneste er også PNG-formatet blevet mere populært - især på bekostning af GIF-billeder. PNG indeholder på mange måder det bedste fra både JPEG- og GIF-formatet: millioner af farver og effektiv komprimering.
Hvor får jeg nogle andre billeder fra?
Får at lave din egne billeder skal du have et tegneprogram. Et godt tegneprogram er et af de vigtigste redskaber til at lave gode hjemmesider.
Desværre er der ikke inkluderet et godt tegneprogram i Windows (om Mac- og Linux-brugerne er bedre stillede, ved jeg ikke). Du kan derfor med fordel anskaffe dig enten Paint Shop Pro eller PhotoShop (to af de bedste tegneprogrammer jeg kender).
Men som lovet er det dog ikke nødvendigt med fancy og dyre programmer for at gennemføre denne tutorial. Til at starte med kan du downloade det udemærkede og gratis program Irfan View. Eller bare låne andres billeder. Du kan nemlig downloade alle billeder på Internettet uden problemer (pas dog på copyrights!). Her er en beskrivelse af, hvordan du gør:
- Klik på det ønskede billede med højre museknap
- Vælg "Save picture as..." ("Gem billede som...") i menuen der kommer frem
- Vælg derefter en placering til billedet på harddisken og tryk "Save" ("Gem")
Gør dette med nedenstående billede af html.dk's logo og gem det på harddisken samme sted, som du har dine hjemmesider til at ligge (læg mærke til at logoet er gemt som en GIF-fil: logo.gif):
Du kan nu indsætte billedet på en af din egne sider. Prøv selv.
Er der mere?
Der er et par ting mere, der er handy at vide om billeder. Den ene er, at på samme måde som du kan linke til sider i en underfolder - som du lærte i forrige lektion - kan du også hente dine billeder fra andre foldere - eller endda andre websites:
Eksempel 2:
<img src="billeder/logo.gif" />
Eksempel 3:
<img src="http://www.html.dk/logo.gif" />
Og så lige en anden ting: Billeder kan godt være links:
Eksempel 4:
<a href="http://www.html.dk"> <img src="logo.gif" /></a>
Vil se sådan ud i browseren (prøv at klik på billedet):
Er der flere attributter, jeg bør kende?
Du skal selvfølgelig altid bruge attributten src, der fortæller, hvor billedet er placeret. Derudover er der ligesom ved links en række andre attributter, der kan være nyttige ved indsættelse af billeder.
Attributten alt bruges til at give en alternativ beskrivelse af billedet, hvis det af en eller grund ikke vises for brugeren. Dette er især er vigtigt for blinde/synshandicappede og hvis siden loades langsomt eller slet ikke vises. Derfor bør attributten alt altid bruges:
Eksempel 5:
<img src="logo.gif" alt="Logo for html.dk" />
Ligesom ved links kan attributten title bruges til at skrive et kort beskrivelse af billedet:
Eksempel 6:
<img src="logo.gif" title="html.dk's logo" />
Ville se sådan ud i browseren:
Hvis du, uden at klikke, holder musen henover linket, vil du se at teksten "html.dk's logo" kommer frem.
To andre attributter er width og height:
Eksempel 7:
<img src="logo.gif" width="100" height="100" />
Ville se sådan ud i browseren:
width (engelsk for "bredde") og height (engelsk for "højde") kan bruges til at angive et billedes højde og bredde. Værdien der bruges til at angive width og height, er pixels. Pixels er også den måleenhed, der bruges til at angive skærmopløsning (de mest almindelige skærmopløsninger er 800x600 og 1024x768 pixels). I forhold til f.eks. centimeter er pixels en relativ måleenhed der afhænger af skærmopløsningen - hos en bruger med høj skærmopløsning vil 25 pixels måske svare til en centimeter på skærmen, mens de samme 25 pixel ved en lav skærmopløsning er 1½ centimeter på skærmen.
Hvis du ikke angiver width og height, bliver billedet bare indsat med den størrelse det faktisk har, men med width og height kan du manipulere med størrelsen:
Eksempel 8:
<img src="logo.gif" width="100" height="25" />
Ville se sådan ud i browseren:
Den reelle størrelse på billedet forbliver dog den samme, og det tager den samme tid at hente billedet ned. Derfor bør du aldrig gøre et billede mindre ved at bruge width og height, men i stedet formindske det i dit tegneprogram, og derved gøre dine sider lettere og hurtigere.
Alligevel er width og height en god idé at bruge, da browseren på den måde på forhånd ved, hvor meget plads billedet vil tage, og kan sætte din side pænt op allerede inden billedet er hentet ned.
Ikke flere billeder af hverken Richard eller vores logo i denne omgang ...
This HTML tutorial is now avaliable in English
You can find this lesson and the rest of this HTML tutorial in English at HTML.net.
- Relateret materiale på HTML.dk
- Relaterede nyhedsgrupper på Usenet
- Relaterede links om emnet
