HOME -> HTML_TUTORIAL -> html-09 Mandag, 11. December 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2002 - Opdateret n/a

Lektion 09

Billeder/Images

Indhold:

  • Gif og jpg/jpeg.
  • At indsætte billeder i dokumentet.
  • Et billede som link.


Gif og jpg/jpeg.
For at lave en lang historie kort, kan man generelt sige at gif formatet anvendes til tegninger, grafik og animationer. Gif formatet giver mulighed for anvendelse af 256 farver, og mulighed for transparente billeder.
Jpg formatet anvendes derimod primært til fotografier. Her har man op til 16,7 mio. farver. Ved jpg er der ikke mulighed for at lave transparente billeder eller at lave animationer.

At indsætte billeder i dokumentet.
Ved hjælp af følgende kode kan du indsætte et billede i dit dokument. Dog skal du huske på, at <img>-tagen skal afsluttes i sig selv.

Dette gøres med / i enden af tagen.:


<img src=" .... " />


"Img" står for image eller billede på dansk. "Src" står for source eller kilde på vores hjemmelige sprog.
XHTML kræver endvidere at du anvender "alt", som kan anvendes til at beskrive dit billede. Prøv at holde musen stille på et af billederne her på siden. Så kan du se effekten af "alt". Denne tekst vises endvidere også når dit billede ikke er tilgængelig.


<img src="ungerne.jpg" alt="Er vores unger ikke søde?" />


Andre attributter som du kan anvende er:

width, der angiver bredden i px (pixels).
heigt, der angiver højden i px (pixels).
border, der angiver kanten omkring dit billede, når det anvendes som et link.

Her er et eksempel hvor vi anvender attributterne.


<img src="maleri.gif" width="120" height="80" alt="Billede" />


Hvis du nøjes med at angive f.eks. height, så vil width blive tilpasset automatisk.

Et billede som link.
Ønsker du at anvende et billede som et link kan du indsætte billedet i stedet for en tekst i ankeret.


<a href=" .... "><img src=" .... " /></a>


For at undgå at billedet får en ugly blå kant omkring sig, kan du angive border til at være lig med nul.
Kode stumpen nedenfor er et link til NETeXplorer.dk, hvor vi har indsat vores logo.


<a href="http://www.NETeXplorer.dk"><img src="http://www.NETeXplorer.dk/banner/banner140x40.gif" alt="NETeXplorer.dk" border="0" /></a>






I den næste lektion ser vi nærmere på frames. Her ser du hvordan du via frames kan have flere vinduer på din side.

FRAMES >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top