Foga in bild i hemsida med hjälp av html-kod.

Nu är det dags att göra en hemsida där du fogar in en bild. Här finns bilder som du kan välja att jobba med. Spara bilderna i din arbetsmapp! När det är gjort ska du tillverka en mall med de koder som behövs för att infoga en bild.

Ta fram "Anteckningar" och spara som... bildmall.html    Spara filen i din hemsidemapp! Nu kan du "kopiera" avsnittet med koderna som finns här nedan och "klistra in" i "Anteckningar" (bildmall.html):

<html>
<head>
<title> </title>
</head>
<body>
<h2>
 
</h2>
<img width="" height="" src="">
<font size="4">
 
</font>
</body>
</html>

Spara!
Skrivskydda mallen!

Bra att veta:

<br> betyder radbrytning. <p> betyder nytt stycke. Dessa två koder lägger vi inte in i någon mall eftersom man inte vet var man vill lägga in dem när man väl börjar skriva. Försök att minnas dem.
Dessa båda koder har ingen avslutningskod vilket är bra eftersom man använder dem så ofta.

Nu är det dags att lägga in en bild på en hemsida.

<img width="" height="" src=""> är det nya du ska prova på den här gången. Den här koden "talar om " för datorn att det gäller en bild. Men det finns inga värden inskrivna. Då kan den inte fungera. Låt oss anta att du väljer att lägga in koltrasten på din hemsida.
Öppna din arbetsmapp och ta reda på dessa tre saker:
1) Vad heter bildfilen? Svar: koltrast.gif
2) Hur bred är den? Svar: 100 bildpunkter
3) Hur hög är den? Svar: 77 bildpunkter
Du får fram dessa svar genom att högerklicka på biden och se på "Egenskaper" (sammanfattning).

Ta fram "bildmall.html". Högerklicka och "Visa källa". Markera allt och "Kopiera". Minimera fönstret.
Ta fram ett nytt fönster i "Anteckningar" och "Klistra in". "Spara som..." koltrasten.html

Skriv in på lämpligt ställe:
Titel: Min hemsida med infogad bild.
Rubrik: Koltrasten
<img width="100" height="77" src="koltrast.gif">

Brödtext: Koltrasten...<br>
Den... <p>

När...

Spara. Minimera. Kolla nu resultatet! Om det smög sig in ett fel får du ta fram sidan i "Anteckningar" igen och rätta. Spara. Kolla igen!

Kommentar:
OBS! Det är bra att vara konsekvent. Använd alltid små bokstäver i filnamn! Kom ihåg att det inte får vara å, ä, ö eller mellanslag i filnamnet.
De bilder som man använder på en hemsida får inte vara för stora räknat i kB. Då tar det lång tid att ladda ner dem i datorn och risken är stor att besökaren tröttnar och går vidare till annan hemsida. Detta utesluter bilder sparade i filformatet ".bmp". De kräver stort utrymme. Ett bra filformat är ".jpg". Ett annat bra format är ".gif". Om dessa bildfiler är över 60-70 kB bör man fundera om det går att beskära bilden eller ändra storlek på den i något bildbehandlingsprogram.
De bilder man använder bör man försäkra sig om att man får använda. Bäst är att ha egna foton som man skannar in eller som man för över via CD eller digitalkamera. Man kan också ta något som man själv ritat i "Paint".

Om tiden räcker till gör du fler hemsidor där du lägger in en eller flera bilder och skriver text till. Använd "bildmall.html". Hitta på egen "title", "rubrik", valfri bild och "brödtext".

Här ser du hur det kan se ut i färdigt skick:

Koltrasten

Koltrasten kommer ibland för att få fågelmat. Den letar frön som småfåglarna spritt omkring fröautomaterna.
Den sjunger inte på vintern men på våren kan man få höra dess vackra toner. Hanen är glänsande svart med gul näbb. Honan är brun.

När den varma årstiden kommer är koltrastarna duktiga på att leta mask på gräsmattorna. Med ungar i boet går det åt mycket mat!

Till nästa avsnitt     Till kursens början

Barbros trädgård