Bilder. Bilder och bildformat

Storlek: px

Starta visningen från sidan:

Download "Bilder. Bilder och bildformat"

Viktor Magnusson
för 7 år sedan
Visningar:

1 och bildformat Det första du måste göra är att skaffa bilder att lägga in i ett HTMLdokument. Ta en bild med din mobil/ webbkamera eller rita bilden själv.du kan ta gratisbilder från Google, gå in på bilder och sök, högerklicka och spar som eller save as, ge filen ett namn exempelvis hund.jpg. En bild har tre olika bildformat som används mest: jpg, png och gif. GIF (Graphics Interchange Format) har formatet.gif GIF-formatet är komprimerad på ett sätt som gör att originalbilden kan återställas exakt när bilden visas, förutsatt att den inte har många färger. När GIF utvecklades var det ovanligt med datorer som kunde visa mer än 256 färger. Därför begränsade man antalet färger till 256, det går att göra GIFbilder med 2 eller 16 färger och då blir filen ännu mindre.

2 och bildformat PNG (Portable Network Graphics) har formatet.png Formatet är utvecklat som en modernare efterföljare till GIF, och PNG-bilder kan ha miljontals färger. Detta format har stöd för avancerade funktioner som gammakorringering, alpha-genomskinlighet, färgkorrigering och förbättrad kompression. Gamma- och färgkorrigering är speciellt intressant, eftersom de gör att webbläsare på andra operativssystem kan visa bilder med korrekta färger. Det finns också en inofficiell variant av PNG med stöd för animeringar, APNG. Av de stora webbläsarna är det bara Firefox och Opera som kan visa animationer utan tilläggsprogram. Det är W3C, World Wide Web Consortium som förvaltar PNG-standarden.

3 och bildformat JPEG (Join Photographic Experts Group) har formatet.jpg JPEG är utvecklat för att komprimera fotografier. Fotografier skannas ofta in med miljontals färger, och det är då mycket svårt att komprimera bilden i någon större utsträckning med konventionella metoder. JPEG använder i ställdet så kallad förstörande kompression, där man helt enkelt kastar delar av bildinformationen. Man försöker ta bort information på ett sådant sätt att det mänskliga ögat inte upptäcker skillnaden, och det fungerar mycket bra vid låga och medelhöga kompressionsgrader. Vid kompression med JPEG väljer man själv hur mycket bilden ska komprimeras, och därmed hur stor kvalitetsförlust man kan acceptera. Man kan oftast komprimera bildfilen till en 1/20 del av deras normala storlek.

4 och bildformat I nedanstående exempel ligger en PNG-fil med en bild på ett paket i samma katalog som exempelfilen. <html> <head> <title>en bild </title> </head> <body> <h1>äntligen dags för bilder!</h1> <p> Man kan lägga in en bild <img src= paket.png alt= Bild på ett paket /> var som helst i texten. </p> </body> </html> Attributet alt, ger endast texten om man håller musen över bilden eller om bilden inte visas. Webbsidan blir mer lättanvänd, speciellt vid tröga uppkopplingar.

5 och bildformat heigth och width Dessa två attribut används för att ange hur hög (height) och vid (width) bilden är, mätt i bildpunkter pixels. Du kan använda dessa två attribut för att göra bilden större- eller mindre på webbsidan. ismap och usemap Dessa attribut används när man vill ha aktiva områden i en bild. Aktiva områden används när man vill hoppa till olika sidor beroende på vilken del av bilden användaren klickar i.

6 som länkar Ett bra sätt att få en webbsida att se bättre ut är att länkar i form av knappar, alltså bilder som går att klicka på. Att åstadkomma det är inte svårt allt du behöver göra är att lägga en bild i ett ankarare. Om du till exempel har en bild med namnet hem.png som föreställer en knapp med texten Till startsidan kan du lägga in den så här: <a href= index.html > <img src= hem.png alt= Till startsidan /> </a>

7 och bildformat PNG jämfört med JPEG JPEG är oftast det bästa valet för kompression av stora filer med fotografiska bilder. PNG är oftast det bästa valet för ritningar, skärmbilder och serier. Alla linjer förblir skarpa, och kompressionen blir bra. Om bilden ska ha genomskinliga delar är PNG ett måste JPG har inte stöd för genomskinlighet. <img /> Det finns inget behov av en sluttagg, eftersom <img /> bara gör att en bild visas på taggens plats i texten. I rena HTML-dokument behöver du inte skriva ut snedstrecket i sista taggen, men det gör ingen skada att ta med det. I XHTML, däremot är snedstrecket obligatoriskt. Attributet SRC (source) betyder källa och används för at berätta vilken bild som ska läggas in. Värdet av attributet ska vara en URL. <img src= minbild.png />

8 <figure> och <figcaption> Man vill ofta skriva texter som beskriver bilder, och i HTML5 tillkom två nya taggar som ger möjlighet att koppla texter till både bilder och annat innehåll. I vetenskapliga dokument använder man ofta ordet figur för att hänvisa till en bild eller en illustration, så <figure> är lätt att komma ihåg. <figcaption> är en sammandragning av figure caption, alltså bildtext eller figurtext på engelska. Här är ett exempel som visar hur man använder taggar: <p> Man kan ha flera bilder i samma figur: <figure> <img src= hem.png alt= Ett stiliserat hus /> <img src= paket.png alt= Ett paket /> <figcaption> Några exempelbilder </figcaption> <p> Här får bilderna en gemensam bildtext. </p>

9 <object> och <embed> Taggen <object> är mycket generell den används helt enkelt för att lägga in objekt, vilket som helst i webbdokument. Ett objekt kan vara exempelvis en bild, en video, ett appletprogram eller ett annat dokument. <object> är alltså en mycket allängiltig tagg som man kan ha i många situationer, bland annat i stället för <img />. Denna tagg har många olika attribut, <object> måste ha en </object> sluttagg, vilket inte <img /> har. I stället för attributet SRC använder taggen <object data= fil1.png > data som attribut för filer. Taggen <embed> är lite udda. Gammal tagg som togs bort i tidigare, men är nu tillbaka för att stödja äldre webbläsare. Om taggen <object> inte fungerar i webbläsaren, prova då med <embed> i stället.

10 <map> och <area> - överkurs Kartstrukturer anges med taggen <map>. Taggen har attributen name och id som ger strukturen ett namn så att bilden kan referera till den. För att bildkartan ska fungera i så många webbläsare som möjligt är det bäst att ange båda attributen. De måste då ha samma värde. Inne i kartstrukturen anges sedan ett antal områden och URL-strängar för dem som taggen <area > avser. Strukruren avslutas med </map>. Exempel: <map name= kartan id= kartan > <area... > <area > </map>

11 <map> och <area> - överkurs Taggen <area > kan ha nio olika attribut. shape coords href alt target, rel, media hreflang och type dessa fungerar på samma sätt som i <a> Exempel: <area shape= rect coords= 0, 0, 99, 49 href= gubbe.html alt= En rektangel >

12 <base /> Det händer att webbläsaren blir förvirrad och försöker hoppa till en URL som inte finns när man använder bilder med aktiva områden. Om det händer kan du lägga in taggen <base /> i sidans huvud. <base /> berättar vilken utgångspunkt webbläsaren ska ha när den ska beräkna vart relativa länkar leder. Taggen har, precis som ankare, ett attribut som heter href med en URL som värde. Denna URL ska peka ut dokumentet den befinner sig i. <html><head> <title>min fil </title> <base href= /> <br /> <base href= minfil.html /> </head><body> </body> </html>

Relevanta dokument

Carl-Oscar Hermansson WEBB DESIGN

Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...