Bilder kan pigga upp sidorna lite. Hur får man då in en bild i en webbsida? Försök nu inte klistra in en bild i den ordbehandlare du använer, det går nämligen inte.
En bild placeras in med hjälp av en IMG-tagg. Den ser ut så här:
<IMG SRC="bild.jpg" ALT="Min vackra bild">
Anvisning: "bild.jpg" byts ut mot namnet på den bildfil som skall infogas. Observera att filen då måste vara på samma
"nivå" som filen. Det betyder att bilden måste finnas som en fil på samma ställe som ditt HTML-dokument.
Man kan också använda en fullständig adress för bilden. Då blir koden på formen:
<IMG SRC="http://www.intsys.fi/bilder/bild.jpg" ALT="Min vackra bild">
ALT står för alternativ text. Det betyder, att om bilden av någon orsak inte kan visas, så används den alternativa
texten för att berätta vad bilden föreställer.
Använd alltid ALT-taggen! Även om bilden finns på servern kan det hända att t.ex. mobiltelefonens webbläsare inte kan visa bilden, eller at den är inställd att inte använda bilder. Det är också artigt med tanke på blinda att använda alternativ text. (Även blinda kan surfa på internet m.h.a. program som läser upp sidans innehåll. En maskin kan dock inte tolka en bild. Därför är det din plikt som webdesigner att förse bilden med alternativ text, som kan läsas upp.
Vilka bildformat stöds?
De mest använda bildformaten är JPG, GIF och PNG. Nedan en liten tabell med fördelar och nackdelar med bilderna:
| Format | Anvvändning | + | - |
|---|---|---|---|
| JPG | Främst för fotografier | Ett packat bildformat, som ger OK kvalitet och relativt små filer. Stöds bra av alla webbläsare. | Stöder inte genomskinliga bilder. Packningen förstör bildkvaliteten. |
| GIF | Enkel grafik, animationer | Stöder genomskinlighet. Stöder rörliga bilder. Ger små filer. Fungerar bra i de flesta webbläsare | Endast 256 olika färger. Genomskinligheten antingingen 1 eller 0. |
| PNG | Grafik, logon m.m. | Små filer, med bra kvalitet. Genomskinligheten kan ställas mellan 0 och 255. | Inte ännu så vanligt. Stöds inte av alla webbläsare. |
Tabellen nedan visar hur samma bild ser ut i olika bildformat (JPG, GIF och PNG) på olika färgers bakgrund.
| JPG | GIF | PNG |
|---|---|---|
| | |
| | |
| | |
På den vita bakgrunden ser alla bilderna lika bra ut. På den ljusgråa ser man att JPG-bilden har en vit kvadrat runtomkring sig. Märk ändå att GIF:fen har en genomskinlig mitt och att det gråa och blåa syns igenom mitten av ringen. På den blåa bakgrunden ser man tydligt överlägsenheten hos PNG-formatet, detta är möjligt tackvare en steglöst inställbar genomskinlighet.
OBS!!! Man måste alltid ha tillstånd för att få använda en bild, som inte är ens egen!
Skapa en ny sida, och placera in bilden http://www.intsys.fi/sokoviken/bilder/vinterbild.jpg på sidan.
Gör en egen bild t.ex. med Paint och infoga den också.
Kommentarer kan placeras in i koden. De syns inte på sidan, men kan läsas om man ser på sidans kod. Kommentaren börjar alltid med <!-- och avslutas med -->
<!--Detta är en kommentar-->
Kommentarer är bra att använda för att komma ihåg hur man tänkt sig vissa saker och göra det enklare att hitta den del av koden man behöver. Dessutom kan man enkelt testa att ta bort en del av koden, t.ex. omringa en bild av kommentarstart och -slut, för att se hur sidan skulle se ut utan bilden. På det sättet är det enkelt att få tillbaka bilden om man tycker att sidan var bättre med bild.
Gör en ny sida i vilken du skriver en kommentar (med valfri text).
Infoga en bild (t.ex. samma som i Uppgift 12) under kommentaren. Prova därefter "kommentera bort" bilden.
En links uppgift är att ta läsaren från en plats till en annan. Linkarna är väldigt smidiga, då du med ett musklick kan kastas till en sida med mera information t.ex. om ett ord, som du aldrig tidigare har hört talas om, medan folk som vet vad begreppet innebär lugnt kan läsa vidare.
En link till t.ex. Google skapas med koden <A HREF="http://www.google.fi/">Google</A>
I HREF-attributet kommer linkens destination (dit man linkar, t.ex. http://www.google.fi/). Inannför A-taggen (mellan <A HREF="destination"> och </A>) kommer den text som blir link.
Exemplet ovan ser alltså ut såhär: Google
Linka rätt ord!!!
Försök alltid använda ett beskrivande ord som link, ett ord som berättar vart du hamnar, eller vad sidan handlar om. Undvik att använda ord som "klicka här" som linkar. Dels blir texten mera flytande (lättare att läsa) och det blir lättare att hitta det man söker efter.
Bra exempel: Google är en väldigt bra söktjänst, Altavista är också rätt bra och var troligen tidigare den populäraste tjänsten.
Dåligt exempel: Google, som du hittar här är en väldigt bra söktjänst, Altavista, som du hittar här är också rätt bra och var troligen tidigare den populäraste tjänsten.
Använd linkar!
På en del sidor blir man hastigt förtvivlad, då den som skapat sidan av antingen tekniska orsaker eller pur lättja inte har skapat linkar till det som det talas
om. Ett bra exempel på detta kunde ses på FPA:s sida. På en sida kunde man läsa vilken blankett som behövdes för ett visst ärende gällande studiestöd. Någon link till blanketten fanns inte, utan man fick på
egen hand leta reda på den bland alla blanketter de hade. I den situationen var man i princip ett steg från det sökta, men p.g.a. en saknad link blev det mera letande.
Skriv en egen fritt formulerad, flytande text eller historia, där du nämner olika företag, föreningar, statliga instanser, skolor, söktjänster eller dylikt och linkar till dessas sidor. Eventuella produkter och tjänster som nämns får också gärna vara linkar. Minimi 10 linkar.
Humor uppskattas i denna uppgift :)
Ankaren (anchor) är märken, som kan placeras ut på ställen av sidan, som man vill göra lätta att hitta. Man kan skapa en link till ett ankare. Öppnar man en link som pekar på ett ankare hoppar webbläsaren direkt till den delen av sidan.
Ex. Rubriken "Genomskinlighet" i detta dokument är omgiven av ett ankare, som heter genomskinlighet:
<A NAME="genomskinlighet">Genomskinlighet</A>
Nu kan man linka till rubriken "Genomskinlighet" med denna kod:
<A HREF="#genomskinlighet">Genomskinlighet</A>
Linken kan vara antingen direkt till ett ankare innom samma dokument med koden
<A HREF="#ankarets-namn">Innom samma dokument</A>
eller till ett dokument som är i samma katalog som filen med linken
<A HREF="filens-namn.html#ankarets-namn">Till fil i samma katalog</A>
eller till en fullständig adress
<A HREF="http://www.domain.com/katalog/filens-namn.html#ankarets-namn">
Detta vara bra att veta (speciellt om man jobbar med filer i olika mappar (folders)). En link till "en nivå uppåt" fås med "../" och en link till "domainets top" fås med "/".
Ex. Antag att vårt dokument har adressen http://www.domain.com/alfa/beta/gamma.html
Om vi skapar en link till "../beta/gamma.html" hamnar vi i vår egna fil.
Skapar vi en link till "../pi/314.html" hamnar vi på adressen http://www.domain.com/alfa/pi/314.html. Vi kan också göra en link till "epsilon.html" varvid vi hamnar
på adressen http://www.domain.com/alfa/beta/epsilon.html
Om vi skapar en link till "/" hamnar vi på adressen http://www.domain.com och med en link till "/index.html" kommer vi till http://www.domain.com/index.html
En absolut link är enkelt förklarat en link, som alltid har en fullständig adress. Man kan säga att den alltid börjar med "http://" och som så kan kopieras till eller från webbläsarens adressrad.
Man kan använda absoluta linkar i stället för relativa linkar, men de relativa linkarna har en del fördelar:
Skapa relativa linkar till dina tidigare uppgifter.
Skapa en innehållsförteckning för denna lektion (= Linkar till de ankaren som finns i denna fil (lektion3.html)). Du är tvungen att antingen använda absoluta linkar till t.ex."http://www.intsys.fi/sokoviken/lektion3.html#lektion3" eller relativa linkar till t.ex. "/sokoviken/lektion3.html#lektion3.html". Alla rubrikers ankaren har namn enligt rubriken och ankarena på formen "uppg16". Det räcker med att du linkar till två rubriker och två uppgifter (välj fritt vilka, ogärna de översta om du bara tar två av vardera).
En oordnad lista ger en punktuppställning (lite i stil med franska streck). Listan börjar med taggen <UL> och avslutas med taggen</UL>
(minnesregel UL = Unordered list, oordnad lista).
Varje punkt omges av taggarna <LI> och </LI> (minnesregel LI = List Item).
Ex. En lista på personer i skolan
Samma sak i HTML-kod:
<UL>
<LI>Elever</LI>
<LI>Lärare</LI>
<LI>Övrig personal</LI>
</UL>
Gör en egen woordnad lista på någonting du gillar (t.ex. mat, godis, växter, djur...)
En ordnad lista ger en numrerad lista. Listan börjar med taggen <OL> och avslutas med taggen</OL>
(minnesregel OL = Ordered list, ordnad lista).
Varje punkt omges av taggarna <LI> och </LI> (minnesregel LI = List Item), precis som i en oordnad lista.
Ex. En lista på F1 förarna 2004:
Samma sak i HTML-kod:
<OL>
<LI>Michael Schumacher</LI>
<LI>Rubens Barrichello</LI>
<LI>Jenson Button</LI>
<LI>Fernando Alonso</LI>
<LI>Juan Pablo Montoya</LI>
<LI>Jarno Trulli</LI>
<LI>Kimi Räikkönen</LI>
<LI>Takuma Sato</LI>
</OL>
Ordna den lista du skapade i Uppgift 17, eller gör en ny lista.
