Genomskinligt och sammanflätat Länkar och ankare

Bilder på hemsidan - lägg in bilden

Efter fyra avsnitt om bildhantering har du fortfarande inte lärt dig hur du flyttar in dina bilder på hemsidan. Det skall du göra nu. Jag förutsätter att du har valt ut en eller ett par bilder som du vill ha med, och försökt göra dem till så små filer som möjligt.

Bara en eller ett par?

Ja, just det. En webbsida med många bilder tar lång tid att ladda, även om bilderna är små. Sidan blir "effektivare" - besökarna stannar kvar - om sidan är snabbladdad. Vi skall inte heller glömma att en enda bild kan säga betydligt mer ensam än en hel dröse av bilder gör tillsammans.

Bestäm var bilden skall ligga

Se till att bilden som du skall använda ligger i mappen Hemsida\bilder - det är förutsättningen för att koden skall fungera. Om du har ett annat mappnamn måste du ändra sökvägen i koden så att den blir rätt.

Öppna HTML-filen i textredigeraren, så att du ser din HTML-kod. Du har säkert gjort en del ändringar under övningarna, men grunden ser ut ungefär så här:

<HTML>
<HEAD>
<TITLE>Titeln på sidan</TITLE>
<LINK REL="stylesheet" HREF="hemsidan.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Här ligger den första rubriken på din sida</H1>
<H2>Här ligger ingressen</H2>
<P>Här har du texten</P>
<HR>
<A HREF="mailto:din.epostadress@servern.se">Skriv till mig</A>
</BODY>
</HTML>

Bestäm nu ungefär var på sidan du vill ha bilden. Vill du ha bilden ovanför rubriken? Då ändrar du koden så här. Ändringarna är hela tiden markerade med rött, förklaringar följer efter exemplen - du ändrar själv sökvägen i SCR, bildens bredd (punkter) i WIDTH och bildens höjd i HEIGHT:

<HTML>
<HEAD>
<TITLE>Titeln på sidan</TITLE>
<LINK REL="stylesheet" HREF="hemsidan.css" TYPE="text/css">
</HEAD>
<BODY>
<IMG BORDER="0" SRC="bilder/dinbild.gif" WIDTH="100" HEIGHT="50">
<H1>Här ligger den första rubriken på din sida</H1>
<H2>Här ligger ingressen</H2>
<P>Här har du texten</P>
<HR>
<A HREF="mailto:din.epostadress@servern.se">Skriv till mig</A>
</BODY>
</HTML>

 Vill du ha rubriken på samma rad som bilden och direkt efter den? Då ändrar du koden så här:

<HTML>
<HEAD>
<TITLE>Titeln på sidan</TITLE>
<LINK REL="stylesheet" HREF="hemsidan.css" TYPE="text/css">
</HEAD>
<BODY>
<H1><IMG BORDER="0" SRC="bilder/dinbild.gif" WIDTH="100" HEIGHT="50">Här ligger den första rubriken på din sida</H1>
<H2>Här ligger ingressen</H2>
<P>Här har du texten</P>
<HR>
<A HREF="mailto:din.epostadress@servern.se">Skriv till mig</A>
</BODY>
</HTML>

Vill du ha bilden mellan rubriken och ingressen? Ändra då så här:

<HTML>
<HEAD>
<TITLE>Titeln på sidan</TITLE>
<LINK REL="stylesheet" HREF="hemsidan.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Här ligger den första rubriken på din sida</H1>
<IMG BORDER="0" SRC="bilder/dinbild.gif" WIDTH="100" HEIGHT="50">
<H2>Här ligger ingressen</H2>
<P>Här har du texten</P>
<HR>
<A HREF="mailto:din.epostadress@servern.se">Skriv till mig</A>
</BODY>
</HTML>

Blir det bättre med bilden till höger om rubriken, men på samma rad? Ändra så här:

<HTML>
<HEAD>
<TITLE>Titeln på sidan</TITLE>
<LINK REL="stylesheet" HREF="hemsidan.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Här ligger den första rubriken på din sida<IMG BORDER="0" SRC="bilder/dinbild.gif" WIDTH="100" HEIGHT="50"></H1>
<H2>Här ligger ingressen</H2>
<P>Här har du texten</P>
<HR>
<A HREF="mailto:din.epostadress@servern.se">Skriv till mig</A>
</BODY>
</HTML>

Du ser säkert att bildens placering hela tiden blir beroende av var i koden du lägger HTML-koden för bilden, men bildens placering på raden kan också styras med attributen nedan.

HTML-koden

Här har det tillkommit en ny HTML-tagg, nämligen <IMG>. Detta är en av de taggar som inte bildar ett par. I taggen <IMG> lägger du in olika egenskaper, eller attribut för bilden. Just nu nöjer vi oss med följande:

  • SCR="..." anger sökvägen till bilden, antingen relativt eller som den absoluta internetadressen
    Som sökvägen är skriven ovan, anger den var bilden ligger i förhållande till din hemsidesfil, nämligen i mappen "bilder". Om du skall använda en bild som ligger någon annanstans, kanske på en annan server, anger du i stället den fullständiga sökvägen till den.
    Exempel: SCR="http://www.SDNweden.se/bilder/loggor/link_20.gif"
  • ALT="..." anger en text som kan visas i stället för bilden
    Om besökarens webbläsare är inställd för att inte visa bilder, kommer den här texten att visas i stället för bilden.
  • ALIGN="..." justerar bilden i sidled (left, center, right, justify)
    Det här attributet anger var bilden skall vara placerad i förhållande till sidans bredd.
  • ALIGN="..." justerar även bilden i höjdled (top, bottom, absbottom, middle)
    Det här attributet anger var bilden skall ligga i förhållande till text och andra bilder.
    Exempel 1: ALIGN="top" lägger bilden med överkanten i samma höjd som översta punkten på den högsta bokstaven i texten eller överkanten på en annan bild i samma rad.
    Exempel 2: ALIGN="bottom" lägger bilden med nederkanten i samma höjd som nedre delen av texten (baslinjen) i samma rad.
    Exempel 3.: ALIGN="absbottom" lägger bilden med nederkanten i samma höjd som nedersta punkten på den lägsta bokstaven i texten eller nederkanten på en annan bild i samma rad.
    Exempel 4: ALIGN="middle" lägger centrumlinjen i bilden i höjd med centrumlinjen på texten.

Exempel 1: ALIGN="top", bilden i höjd med textens överkant

Exempel 2: ALIGN="bottom", bilden i höjd med textens nederkant

Exempel 4: ALIGN="middle", bild och text har samma mittlinje

  • HEIGHT="..." anger bildens höjd i punkter
    Du bör alltid ange storleken på bilden, eftersom webbläsaren då reserverar utrymme för bilden redan innan den är färdighämtad. Kom ihåg att du inte kan förändra laddningstiden för bilden genom att ange en mindre bildstorlek i koden.
  • WIDTH="..." anger bildens bredd i punkter
  • BORDER="..." anger bredd på kanten kring bilden
    Om du inte speciellt vill markera bilden som till exempel länk, bör du sätta BORDER="0" för att slippa en ful ram runt bilden.
  • HSPACE="..." anger mellanrummet horisontellt mellan bilden och resten av innehållet
    Genom att sätta ett värde på HSPACE ser du till att texten inte hamnar precis kant i kant med bilden, vilket är ganska fult och gör texten svårläst.
  • VSPACE="..." anger mellanrummet vertikalt mellan bilden och resten av innehållet
    På samma sätt som med HSPACE använder du VSPACE för att skapa luft kring bilden, men här gäller det "luften" på höjden.

Innan du övergår till övningsuppgifterna, kan du se efter hur det har gått för Haj i Hjälmaren. Som attribut till SCR har jag använt: 

BORDER="0" ALIGN="left" HSPACE="10" VSPACE="2" WIDTH="128" och HEIGHT="60"

Övningsuppgifter
Kunskapstest

Genomskinligt och sammanflätat Länkar och ankare

© SupportData.Net