En ny HTML-side fra grunden

Indlæs andet indhold på denne side:

Indsæt et billede

Siden er opdateret 7. 2. 2009

At indsætte et billede på en side, kræver ikke ret meget kode. Faktisk skal man blot skrive:

<img src="billede.ext" alt="" />

hvor billede refererer til billedets navn og .ext til billedets format, som skal være enten *.gif eller *.jpg.

Fremgangsmåden kan i midlertid volde en del problemer i skønhedsmæssig retning, idet det vil få eventuel omgivende tekst til først at fylde hele siden, for derefter at blive skubbet væk af billedet.

Det er derfor en fordel at udvide koden lidt, så billedets størrelse er fastlagt fra starten, så fylder teksten også fra starten præcis det, den skal og ikke mere:

<img src="billede.ext" width="xxx" height="yyy" alt="" />

hvor xxx og yyy refererer til billedets størrelse i pixels i bredde henholdsvis højde. Der skal ikke sættes definiton på.

Hvis billedet skal bruges til at klikke på i forbindelse med et link, er det nødvendigt at bestemme, om billedet skal have en indramning. Hvis man bestemmer, at der skal være en indramning, skal man ikke foretage sig noget - ellers kan indramningen fjernes ved at indsætte denne kode i din *.css-fil:

img{
border: none
}

Har du indsat ovenstående kode i *.css-filen, kan du i enkeltstående tilfælde indsætte en ramme omkring et billede, ved at udvide koden i billedkaldet således:

<img src="billede.ext" class="kant" width="200" height="150" alt="" />

... hvor class="kant" er et kald til en klasseerklæring i din *.css-fil. Denne klasse skal se sådan ud:

.kant{
border: solid;
border-width: 1px;
border-color: blue
}

I denne klasse fortæller du med linjen border: solid, at der skal være en kant og at den skal bestå af en ubrudt linje. I linjen border-width: 1px bestemmer du rammens tykkelse. Og i linjen border-color: black fastlægger du den farve, du vil give rammen. Husk semikolon efter alle linjer (kan undværes efter den sidste).

Koden kan - om ønsket - forkortes, uden at det ændrer på funktionen:

.kant{
border: solid 1px blue
}
knap knap
Denne knap er uden indramning Samme knap - men med indramning

Du har sikkert bemærket attributten alt="". Du kan lade den stå tom, men den skal være der, hvis du skal have din side til at passere en valideringstest. Eventuelt indhold mellem gåseøjnene vil blive skrevet i det felt, som er afsat til billedet i de browsere, som af deres bruger er sat til IKKE at hjemtage billeder.

Endelig er der den mulighed, at det billede, som du vil indsætte på siden, ikke befinder sig i samme mappe som selve siden. Du kan så udvide billedhenvisningen ved at tilføje den relative adresse, f.eks.:

<img src="../billede.ext" width="xxx" height="yyy" alt="" />

Du kan også i stedet hente billedet på en anden mands hjemmesideadresse på nettet. Du må så skrive den absolutte adresse til billedet. Derved kommer kaldet til billedet til at se f.eks. sådan ud:

<img src="http://www.microsoft.com/pictures/logo.gif" width="xxx" height="yyy" alt="et billede" />

Jeg må så lige tilføje, at dette må man ikke gøre, hvis man ikke har tilladelse fra billedets ejer på den fremmede side!

Endnu en mulig attribut, som du kan tilføje til kaldet til billedet, er align="left", som vil få eventuel efterfølgende tekst til at begynde ved toppen af billedet - det kan bl.a. bruges, hvis du vil indsætte et flot bogstav som versal i et tekstafsnit. I modsat fald begynder teksten ved billedets underkant som hvis billedet var det første tegn på tekstlinjen.

Jeg vil lige - inden jeg slutter med billeder - omtale en attribut mere: title, som laver en bogletekst, der vises, når cursoren kommer ind over billedet. Her kan du skrive om billedet, hvad du synes. Tilføjet til koden fra før vil den samlede kode se således ud:

<img src="http://www.microsoft.com/pictures/logo.gif" width="xxx" height="yyy" alt="et billede" title="Dette er et billede" />

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen januar 2000
Hjemmesideskolen
Du er her: Forsiden - html - En ny HTML-side fra grunden
Brugere lige nu: 1
Home Mail