Uppgift 3 - Bilder

I den här uppgiften ska ni arbeta med bilder. Ni ska visa att ni förstår olika bildformat. Ni ska kunna avgöra vilket bildformat som passar bäst i olika tillfällen. Ni ska kunna placera en bild i ett rent html-dokument och placera den i olika nivåer med align. Ni ska också kunna dela in bilder i bildgrupper och sätta en bildtext på en bild

Tre viktiga regler man måste kunna då det gäller bilder:
1. Spara bilderna i rätt format.
2. Spara bilderna i rätt storlek.
3. Mäta alltid storleken på en bild i pixlar.

Uppgifter.

Skapa en ny sida där du presenterar dina resultat enligt följande uppgifter/frågor:

1. Visa några exempel på hur man kan anväda align för att placera en bild.
• Skapa en bild av din drömbil i valfritt filformat. Bilden ska vara 150x100 pixlar stor.
• Skriv en kort text på ca: 100 ord om din drömbil. Texten ska bestå av endast en paragraf utan radbrytningar eller annan utsmyckning. När den visas på skärmen bör paragrafen med text vara lika hög som bilden.
• Placera bilden och texten i samma paragraf (<p><img>din text</p>) OBS! du ska sätta ett alt-attribut på din img-tagg så att en, för bilden beskrivande, text syns om bilden misslyckats att visas. Beror oftast på att sökvägen blir fel.
• Kopiera din paragraf 5 gånger med en linje emellan för att avkilja de olika paragraferna.
• Använd align attributet på din img-tagg för att visa på 5 olika placeringar av bilden i förhållande till texten.
• Skriv en kort förklaring till var och en av de olika align alternativen som förklarar hur bilden placeras.
2. Använd photoshop och skapa en egen animerad gif (rita själv). Den kan se ut till exempel såhär: eller eller Bilden bör inte vara större än 100x100 pixlar.
Några tips för gif-skapande:
• Skapa bilden i rätt storlek från början. Det går ibland att minska bilder med bra resultat men ofta kommer du att stöta på problem med pixlar vars färger inte matchar efter att du förminskat/förstorat bilden, så undvik det.
• I varje bildruta kan ett eller flera lager vara aktiverade, men för att det ska bli så enkelt som möjligt så föreslår jag att du använder endast ett lager per bildruta.
• Menyn för att skapa din tidslinje finns i Fönster/Tidslinje. Välj sedan Bildruteanimering.
• Använd knappen för att Duplicera valda bildrutor för att lägga till nya bildrutor
3. Ibland vill man gruppera flera bilder. Detta kan man göra i taggen <figure> man kan också lägga en bildtext till en bild med taggen <figcaption>

   

   

   Gör egna bilder som du grupperar och sätter bildtext till.
4. Man kan göra länkar av bilder genom att sätta in en bild i en <a>-tagg. Gör en bild som länkar någonstans. Länken ska öppnas i en ny flik.
5. Det finns ett sätt att göra så att bara vissa delar av en bild blir länkar. Detta gör man genom att definera ett visst område i en bild som ett aktivt område. Dett görs i två steg. Först skapas en <map name="karta" id="karta"> I den kan man definera upp olika <area .. \> som var och en definerar ett klickbart område i kartan. Efter den avslutande </map> så kan man sedan ange att en viss bild ska använda sig av den mappen på en bild genom att lägga in attributet usemap="karta" i bildens <img>-tagg.

   Använd följande bild för att göra ett klickbart område av varje grottrum. Låt länken leda till en sida som beskriver kortfattat vad man kan hitta i rummet. låt varje länk öppnas i en ny flik.
   
   Skapa minst 5 zoner, varav minst en ska bestå av en cirkel och minst en ska vara en polygon.
   

6. Länka till första sidan och från första sidan till den här uppgiften.

Tillbaka till startsidan.