HTML-element

Element är "taggar" som t ex <h1> som är taggen för rubriken med den största storleken på typsnittet.

I nio fall av tio måste man tala om var taggen börjar och slutar. I exemplet med <h1>-taggen stänger man den så här: </h1>. En rubrik i HTML-kod ser alltså ut så här <h1>Rubrik</h1>.

Det finns taggar som inte behöver stängas som t ex radbrytningar; <br>. De kallas för tomma taggar/element eftersom de inte har någon avslutande tagg och därmed inte kan "innehålla" någonting mellan den öppnande och stängande taggen. Men om man vill att sidan ska kunna läsas problemfritt av t ex automatiserade XML-tolkare måste man stänga även tomma taggar. De kan då "stängas" redan i öppningstaggen så här: <br />.

HTML-attribut

HTML-rubriker

Rubriker (headings) definieras genom <h1> - <h6>-taggarna.
Webbläsare lägger automatiskt till tomrum före och efter en rubrik.
Sökmotorer använder rubrikerna för att indexera strukturen och innehållet på sidorna.
Använd bara rubriktaggar för rubriker, inte för att göra text stor eller fetstilad.

Exempel på rubrikstorlekar:

H1

H2

H3

H4

H5

H6

Större rubriker

Varje rubrik har en standardstorlek men man kan specificera en egen storleken med hjälp av style-attributet och CSS font-size-egenskapen.

Exempel:

<h1 style="font-size:60px;">Rubrik</h1>

Resultat:

Rubrik

Horisontella linjer

För att markera spearata delar av en sida kan man använda <hr>-taggen.

Exempel:


									<h1>Rubrik 1</h1>

									<p>Lite text.</p>

									<hr>

									<h2>Rubrik 2</h2>

									<p>Annan text.</p>

									<hr>

Resultat:

Rubrik 1

Lite text.

Rubrik 1

Annan text.

<head>-elementet

I <head>-elementet anger man bara metadata om HTML-dokumentet och den infon visas inte direkt på sidan i webbläsaren. Vanligtvis används metadatan för att ange titeln på dokumentet, teckenkodning, stilar, skript och annan metainformation.

<head>-elementet placeras mellan <html>-taggen och <body>-taggen

Exempel:


										<!DOCTYPE html>

										<html>

										

										<head>

										<title>Namn på sidan</title>

										<meta charset="UTF-8">

										</head>

										

										<body>

Resultat:

Högerklicka på sidan och välj visa källkoden för sidan för att se hur <head>-taggen är konfigurerad på den här sidan.

HTML-paragrafer

Paragrafer

HTML-elementet <p> används för att ange en paragraf. Webbläsare lägger automatiskt till lite tomrum före och efter paragrafer.

De flesta webbläsare kommer att visas texten korrekt även om man glömmer stängningstaggen </p>, men för att undvika problem bör man se till att få med den.

Exempel:


							<p>Det här är en paragraf.</p> 

							<p>En till paragraf.</p>

Resultat:

Det här är en paragraf.

En till paragraf.

HTML-visning

Vill man inte ha något tomrum mellan raderna som i paragrafexemplet ovan, använder man istället <br>-taggen för radbrytning.
Som ett exempel är den här paragrafen (eller stycket) är rabruten med <br>-taggen.
<br>-taggen är en tom tag som normalt inte stängs men ibland kan behöva stängas ändå, mer info i det här stycket.

Det finns flera andra faktorer som avgör hur texten visas på sidan, som t ex storleken på skärmen och eller webbläsarfönstret.
Det går heller inte att lägga till mellanrum eller nya rader genom att ange dem direkt i koden som man kan se i exemplen nedan.

Exempel:


								<p>

								Den här paragrafen

								innehåller en massa rader

								i källkoden men webbläsaren

								ignorerar det.

								</p>


								<p>

								Den här        paragrafen

								innehåller    en    massa mellanslag och rader

								i källkoden       men webbläsaren

								ignorerar det.

								</p>

Resultat:

Den här paragrafen innehåller en massa rader i källkoden men webbläsaren ignorerar det.

Den här paragrafen innehåller en massa mellanslag och rader i källkoden men webbläsaren ignorerar det.

Pre-taggen

En lösning på ovanstående problem är att använda sig av <pre>-taggen.
Texten i den här taggen visas i ett tyspnitt med fast bredd (vanligtvis Courier) och bibehåller alla radbrytningar och mellanrum.

Exempel:


										<pre>

										Den här paragrafen


										innehåller rader med flera


										radbrytningar eller bara en enkel

										rabrytning samt en     del   extra    mellanrum

										i källkoden och webbläsaren

										kommer att visa texten korrekt

										eftersom man använder <pre>-taggen.

										</pre>

Resultat:

Den här paragrafen

innehåller rader med flera

radbrytningar eller bara en enkel
rabrytning samt en    del   extra    mellanrum
i källkoden och webbläsaren
kommer att visa texten korrekt
eftersom man använder <pre>-taggen.

HTML-stilar

Style-attributet

Man kan ställa in stilen på ett HTML-element med <style>-attributet och syntaxen ser ut om nedan.


							<tagnamn style="egenskap:värde;">

Egenskap är en CSS-egenskap och värde är ett CSS-värde och CSS kommer att gås igenom i ett senare avsnitt.

Bakgrundsfärg

CSS-egenskapen background-color bestämmer bakgrundsfärgen för ett HTML-element.

Exempel:


								<section style="background-color:darkslategray;">

									Man kan ange att bara en del av sidan ska ha en viss på färg.

									Det gör man genom att använda <section>-taggen.

								</section>

Resultat:

Man kan ange att bara en del av sidan ska ha en viss på färg.
Det gör man genom att använda <section>-taggen.

Exempel:


								<h1 style="background-color:darkslategray;">Rubrik</h1>

									<p style="background-color:darkslategray;">

										Vill man bara ha en viss bakrundsfärg till en rubrik eller paragraf anger man det i respektive tagg.

									</p>

Resultat:

Rubrik

Vill man bara ha en viss bakrundsfärg till en rubrik eller paragraf anger man det i respektive tagg.

Exempel:


								<body style="background-color:steelblue;">

									Vill man att färgen ska gälla hela sidan så anger man det direkt i <body>-taggen.

								</body>

Textfärg

CSS-egenskapen <color> anger textfärgen för ett HTML-element.

Exempel:


								<h1 style="color:blue;">En blå rubrik</h1>

									<p style="color:red;">

										Paragraf med röd text.

									</p>

Resultat:

En blå rubrik

Paragraf med röd text.

Typsnitt

CSS-egenskapen <font-family> anger tyspsnittet för ett HTML-element.

Exempel:


								<h1 style="font-family:verdana;">En rubrik med typsnitt Verdana</h1>

									<p style="font-family:courier;">

										En paragraf med typsnitt courier.

									</p>

Resultat:

En rubrik med typsnitt Verdana

En paragraf med typsnitt courier.

Textstorlek

CSS-egenskapen <font-size> anger textstorleken för ett HTML-element.

Exempel:


								<h1 style="font-size:300%;">En rubrik med 300%-storlek</h1>

									<p style="font-size:160%;">

										Paragraf med 160%-storlek.

									</p>

Resultat:

En rubrik med 300%-storlek

Paragraf med 160%-storlek.

Textplacering

CSS-egenskapen <text-align> anger den horisontella placeringen för ett HTML-element.

Exempel:


								<h1 style="text-align:center;">Centrerad rubrik</h1>

									<p style="text-align:center;">

										Centrerad paragraf.

									</p>

Resultat:

Centrerad rubrik

Centrerad paragraf.

HTML textformatering

Utöver CSS-stilattribut finns det några fler sätt att formatera text på.

<b> - Fet text
<strong> - Viktig text
<i> - Kursiv text
<em> - Betonad text

Ovanstående formateras likadant av webbläsare men det finns en skillnad i betydelsen av dem: <b> och <i> definierar bara att texten ska vara fet och/eller kursiv, men <strong> och <em> betyder att texten har extra semantisk betydelse.

<mark> - Markerad text
<small> - Liten text
<del> - ~~Överstruken eller borttagen text~~
<ins> - Insatt eller tillagd text
<sub> - _{Försänkt text}
<sup> - ^{Upphöjd text}

HTML-citat, förkortningar och kontaktinfo

Det finns ett antal olika sätt att lägga in citat i texten, i exemplet nedan används <q>-taggen.
Det här är ett citat med <q>-taggen.

Korta citat med `<q>`

Används lämpligtvis för korta citat och webbläsare lägger vanligtvis till citattecken "" kring texten.

Exempel:


									<q>Citerad text</q>

Resultat:

Citerad text

Blockcitat med `<blockquote>`

Definierar en sektion som är citerad från en annan källa och webbläsare lägger vanligtvis till ett indrag på textblocket.

Exempel:


									<blockquote>

									Citerad text

									</blockquote>

Resultat:

Citerad text

Förkortningar `<abbr>`

Definierar en förkortning eller akronym och underlättar med den infon för webbläsare, översättningssystem och sökmotorer.

Exempel:


									<p>

										<abbr title="World Health Organization">WHO</abbr> grundaded 1948.

									</p>

Resultat:

WHO grundaded 1948.

Kontaktinfo `<address>`

Definierar kontaktinfo (författare/ägare) för ett dokument eller en artikel. De flesta webbläsare visar texten som kursiv och lägger vanligtvis till tomrum före och efter textblocket.

Exempel:


									<p>

										Nedan finns kontaktuppgifter

										<address>

										John Doe<br />

										Gata 123<br />

										123 45 Stad<br />

										</address>

									</p>

Resultat:

Nedan finns kontaktuppgifter

John Doe
Gata 123
123 45 Stad

Arbetstitel `<cite>`

Definierar titel på ett verk och visas vanligtvis som kursiv text.

Exempel:


									<p>

										<cite>Titel på ett verk</cite> av någon känd artist.

									</p>

Resultat:

Titel på ett verk av någon känd artist.

Dubbelriktad åsidosättning `<bdo>`

Används för att överskrida riktningen på texten.

Exempel:


									<p>

										<bdo dir="rtl">Den här texten skrivs från höger till vänster</bdo>.

									</p>

Resultat:

Den här texten skrivs från höger till vänster.

HTML-kommentarer

HTML-kommentarer används för att skriva kommentarer eller i övrigt dokumentera koden direkt i koden och text som anges inom kommentarstaggen visas inte i webbläsaren. Fler användingsområden är t ex att lägga in påminnelser om saker som ska läggas till i koden framöver eller för kommentera bort något tillfälligt från sidan för t ex felsökning.

Exempel:


							<!-- Det här är en kommentar -->

Resultat:

Texten visas inte i webbläsaren och för att se den måste man högerklicka på sidan och välja visa källkod.

HTML-färger

Färger anges med fördefinierade namn eller RGB-, HEX-, HSL-, RGBA-, HSLA-värden.

Färgnamn och bakgrundsfärg

HTML stöder 140 st standardfärger och ett urval av dessa visas i exemplen nedan som ändrar färgen på bakgrunden till paragrafen.

Exempel:


								<p style="background-color:Tomato;">Tomato</p>

								<p style="background-color:DodgerBlue;">DodgerBlue</p>

								<p style="background-color:Gray;">Gray</p>

								<p style="background-color:Violet;">Violet</p>

								<p style="background-color:Orange;">Orange</p>

								<p style="background-color:MediumSeaGreen;">MediumSeaGreen</p>

								<p style="background-color:SlateBlue;">SlateBlue</p>

								<p style="background-color:LightGray;">LightGray</p>

Resultat:

Tomato

DodgerBlue

Gray

Violet

Orange

MediumSeaGreen

SlateBlue

LightGray

Textfärg

Utöver bakgrundsfärgen går det även att ställa in färgen på själva texten.

Exempel:


									<p style="color:Tomato;">Tomato</p>

									<p style="color:MediumSeaGreen;">MediumSeaGreen</p>

									<p style="color:DodgerBlue;">DodgerBlue</p>

Resultat:

Tomato

MediumSeaGreen

DodgerBlue

Ramfärg

Man kan ställa in en färgad ram runt texten, där px-värdet anger tjockleken i pixlar och double, dotted och solid anger stilen på ramen.

Exempel:


									<p style="border:4px double Tomato;">Tomato</p>

									<p style="border:2px dotted MediumSeaGreen;">MediumSeaGreen</p>

									<p style="border:2px solid DodgerBlue;">DodgerBlue</p>

Resultat:

Tomato

MediumSeaGreen

DodgerBlue

Färgvärden

Färger kan också anges med RGB-, HEX-, HSL-, RGBA-, HSLA-värden.

RGB

Anges som rgb(red, green, blue) där varje färg anges i ett intervall mellan 0-255, t ex rgb(255, 99, 71).

HEX

Anges som #rrggbb där varje färg anges i ett intervall mellan 00-ff, t ex #ff6347.

HSL

Anges som hsl(hue, saturation, lightness), t ex hsl(9, 100%, 64%).

Hue är ett värde på färghjulet mellan 0-360 där 0=röd, 120=grön och 240=blå.
Saturation är ett procentvärde där 100% är den fulla färgen och all därunder blandar in grått i färgen.
Lightness är ett procentvärde där 0%=svart, 50%=varken ljust eller mörkt och 100%=vitt.

RGBA

Anges som rgba(red, green, blue, alpha) och är en förlängning på RGB där man lagt till en alfakanal för transperens och den anges i intervall mellan 0.0-1.0, t ex rgba(255, 99, 71, 0.5).

HSLA

Anges som hsla(hue, saturation, lightness, alpha) och är en förlängning på HSL där man lagt till en alfakanal för transperens och den anges i intervall mellan 0.0-1.0, t ex hsla(9, 100%, 64%, 0.5).

Exempel:


											<p style="background-color:rgb(255, 99, 71);">Färgvärden i RGB-format</p>

											<p style="background-color:#ff6347;">Färgvärde hexadecimalt format (HEX)</p>

											<p style="background-color:hsl(9, 100%, 64%);">Färgvärde i HSL-format</p>

											<p style="background-color:rgba(255, 99, 71, 0.5);">Färgvärden som RGBA där A-värdet står för transperens</p>

											<p style="background-color:hsla(9, 100%, 64%, 0.5);">Färgvärden som HSLA där A-värdet står för transperens</p>

Resultat:

Färgvärden i RGB-format

Färgvärde hexadecimalt format (HEX)

Färgvärde i HSL-format

Färgvärden som RGBA där A-värdet står för transperens

Färgvärden som HSLA där A-värdet står för transperens

Gråskalor

RGB och HEX

För RGB och HEX anges detta oftast som lika värden för alla färgerna.

Exempel:


											<p style="background-color:rgb(60, 60, 60);">RGB (60, 60, 60)</p>

											<p style="background-color:rgb(120, 120, 120);">RGB (120, 120, 120)</p>

											<p style="background-color:rgb(180, 180, 180);">RGB (180, 180, 180)</p>

											<p style="background-color:#3c3c3c;">HEX #3c3c3c</p>

											<p style="background-color:#787878;">HEX #787878</p>

											<p style="background-color:#b4b4b4;">HEX #b4b4b4</p>

Resultat:

RGB (60, 60, 60)

RGB (120, 120, 120)

RGB (180, 180, 180)

HEX #3c3c3c

HEX #787878

HEX #b4b4b4

HSL

För HSL anges detta oftast genom att ställa in hue och saturation till 0 och lightness mellan 0-100% för önskad gråskala.

Exempel:


											<p style="background-color:hsl(0, 0%, 24%);">HSL (0, 0%, 24%)</p>

											<p style="background-color:hsl(0, 0%, 47%);">HSL (0, 0%, 47%)</p>

											<p style="background-color:hsl(0, 0%, 71%);">HSL (0, 0%, 71%)</p>

Resultat:

HSL (0, 0%, 24%)

HSL (0, 0%, 47%)

HSL (0, 0%, 71%)

HTML-CSS

CSS står för Cascading Style Sheets och beskriver hur HTML-element ska visas på skärm, papper eller annan media.
CSS kan kontrollera layouten för flera sidor på en och samma gång och kan läggas till på tre sätt:

Inline - genom att använda style-attributet för HTML-element.
Internal - genom att använda ett style-element i head-sektionen för sidan.
External - genom att använda en extern CSS-fil.

Det vanligaste sättet är använda sig av externa CSS-filer.

Inline CSS

Anger stilen för ett enskilt HTML-element med hjälp av style-attributet.

Exempel:


									<p style="color:blue;">Blå text</p>

Resultat:

Blå text

Internal CSS

Anger stilen för en enskild sida och anges i ett style-element i head-sektionen.

Exempel:


									<!DOCTYPE html>

									<html>

									<head>

									<style>

									body {background-color: powderblue;}

									h1   {color: blue;}

									p    {color: red;}

									</style>

									</head>

									<body>


									
									<h1>En h1-rubrik</h1>

									<p>Text i en paragraf.</p>


									
									</body>

									</html>

Resultat:

External CSS

En eller flera externa CSS-filer används för att ange stilen på en eller flera sidor, på så vis behöver man bara ändra i en fil för att ändringen ska slå igenom på alla sidor som använder den CSS-filen. Detta åstadkoms genom att länka till CSS-filen i head-sektionen av sidan enligt exemplen nedan.

Länk till CSS-fil från W3Schools - <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Länk till CSS-fil i css-mappen för den här sidan - <link rel="stylesheet" href="/css/externcssexempel.css">
Länk till CSS-fil i samma mapp som den här sidan - <link rel="stylesheet" href="externcssexempel.css">

I listan nedan anges några exempel på olika CSS-egenskaper och deras funktion som demonstreras i exemplen nedanför.

color - anger färg.
font-family - anger typsnitt.
font-size - anger textstorlek.
border - anger en ram runt ett HTML-element med alternativ för pixeltjocklek.
padding - anger tomrum mellan ramen och texten.
margin - anger marginal utanför ramen.
id - anger en stil för ett specifikt element. Id:t bör vara unikt för sidan så att inställningen bara gäller för det specifika elementet.

Ange först ett id för för ett element: <p id="p01">Unik paragraf</p>
Ange sen stilen för det elementet i CSS-filen:
#p01 { color: blue; }

class - anger stilen för en viss typ/klass av element.

Ange först en klass för för ett element: <p class="error">Felmeddelande</p>
Ange sen stilen för den klassen i CSS-filen:
p.error { color: red; }

Exempel:


									<!DOCTYPE html>

									<html>

									<head>

									<link rel="stylesheet" href="css/externcssexempel.css">

									</head>

									<body>



										<h1>En h1-rubrik</h1>

										<p>Text i en paragraf.</p>

										<p id="p01">Unik paragraf</p>

										<p class="error">Felmeddelande</p>



									</body>

									</html>

Resultat:

CSS-filen kan skrivas i valfri textredigerare, den får inte innehålla någon HTML-kod och måste sparas med .css som filändelse. I exemplet ovan ser den ut som följer:

Exempel med CSS-fil från W3Schools:

HTML-länkar

HTML-länkar är hyperlänkar som leder till andra sidor/dokument. En länk behöver inte bestå av text, det kan vara en bild något annat HTML-element.

Syntax

Länkar anges med <a>-taggen enligt följande exempel <a href="adress">länktext</a>.

<href>-attributet anger adressen för länken.
Länktexten är texten som visas för länken.

OBS! Om man inte anger ett snedstreck / i slutet på adressen så kan det genereras två förfrågningar till webbservern. Många servrar lägger automatiskt till ett snedstreck på slutet av adressen och skapar sen en ny förfrågan.

Exempel:


								<a href="https://www.w3schools.com/html/">W3Schools HTML-genomgång</a>

Resultat:

W3Schools HTML-genomgång

Lokala länkar

I exemplet ovan användes en absolut länk som angav en hel adress till en annan sida.
Om man vill ange en länk till någon del av sin egen sida kan man använda sig av en relativ adress, alltså utan https://www i början av adressen.
Om inte sidan/objektet man vill länka till ligger i samma mapp som den aktuella sidan måste den relativa adressen innehålla sökvägen till objektet man vill länka till.

Exempel:


								<a href="lokallankexempel-1.html/">Lokal länk till sida i samma mapp som huvudsidan</a>

Resultat:

Lokal länk till sida i samma mapp som huvudsidan

Exempel:


								<a href="lokallankexempel/lokallankexempel-2.html/">Lokal länk till sida i en annan mapp än huvudsidan</a>

Resultat:

Lokal länk till sida i en annan mapp än huvudsidan

Target-attributet

Det här attributet anger var länken kommer att öppnas och kan ha följande värden:

_self - Öppnar länken i samma fönster/flik. Det här är standardinställingen och behöver alltså inte anges om man vill att länken ska öppnas i samma flik/fönster.
_blank - Öppnar länken i ett nytt fönster eller flik.
_parent - Öppnar länken i den ovanliggande ramen.

Om dina sidor ligger i ramar i en nästlad struktur gör det här attributet att sidan öppnas i ovanliggande ram.

_top - Öppnar länken i hela fönstret.

Om dina sidor ligger i ramar i en nästlad struktur gör det här attributet att sidan "bryter sig ur" ramen" och visas på hela sidan.

framename - Öppnar länken i en namngiven ram.

Exempel:


								<a href="lokallankexempel/lokallankexempel-3.html/" target="_blank">Länk som öppnas i ny flik/fönster</a>

Resultat:

Länk som öppnas i ny flik/fönster

Exempel:


								<a href="lokallankexempel/lokallankexempel-4.html/" target="_self">Länk som öppnas i samma flik/fönster</a>

Resultat:

Länk som öppnas i samma flik/fönster

Bilder som länkar

Bilder används ofta som länkar.

OBS! I exemplet nedan är border:0; angivet för att förhindra att Internet Explorer 9 och tidigare visar en ram runt bilden, vilket de gör när bilden är en länk.

Exempel:


								<a href="https://www.w3schools.com/html/" target="_blank">

								<img src"img/bild.png" alt="HTML-genomgång" style="width:42px;height:42px;border:0">

								</a>

Resultat:

Länktitlar

title-attributet anger extra information om ett element och används oftast för tipstext som kommer fram när man vilar muspekare över elementet.

Exempel:


								<a href="https://www.w3schools.com/html/" target="_blank" title="Det här är en länktitel">HTML-genomgång</a>

Resultat:

HTML-genomgång

HTML-bilder

Syntax

Bilder anges i med img-taggen som är en tom tagg och inte har en stängande tagg. src-attributet anger adressen till bilden.

Den grundläggande syntaxen ser alltså ut så här: <img src="url">

alt-attributet

OBS! Det här attritbutet krävs eftersom en webbsida inte kommer att valideras korrekt utan det.

Attributet specifierar en alternativ text om en bild inte kan visas. alt-attributets värde kan läsas av skärmläsare så man kan höra en beskrivning av bilden.

Exempel på korrekt länkad bild:


								<img title="Text som kommer fram när man vilar muspekaren på bilden" src="img/bild.png" alt="Alt-attributet anger alternativ information om en bild om användaren av någon anledning inte kan visa den (t ex pga av långsam anslutning, ett fel i src-attributet, eller om användaren använder en skärmläsare)." width="320" height="180">

Resultat:

Alt-attributet anger alternativ information om en bild om användaren av någon anledning inte kan visa den (t ex pga av långsam anslutning, ett fel i src-attributet, eller om användaren använder en skärmläsare)

Exempel på felaktigt länkad bild:


								<img title="Text som kommer fram när man vilar muspekaren på bilden" src="img/felbild.png" alt="Alt-attributet anger alternativ information om en bild om användaren av någon anledning inte kan visa den (t ex pga av långsam anslutning, ett fel i src-attributet, eller om användaren använder en skärmläsare)." width="320" height="180">

Resultat:

Storlek - höjd och bredd

OBS! Ange alltid storleken på bilden. Om man inte gör det så kan hela sidan blinka under tiden som bilden laddas in.

Det finns två sätt att ange storleken:

Med style-attributet.
Med width- och height-attributen.

width- och height-attributen anges alltid i antal pixlar, så till skillnad mot style-attributet anger man därför ingen måttenhet för det här attributen, vilket man kan se i exemplen nedan.

Syntax för style-attributet: <img src="bild" alt="Alternativ text" style"width:500px;height:600px;">
Syntax för width- och height-attributen: <img src="bild" alt="Alternativ text" width="500" height="600">

W3Schools rekommenderar style-attributet eftersom det hindrar style sheets från att ändra storleken på bilden. Se exemplet nedan där jag bäddat in en sida som består av koden nedan. Eftersom style för sidan är inställd på att bilder ska fylla hela bredden av sidan (width: 100%) överskrider den width-måttet som är angivet för den första bilden. Använder man istället style-attributet slipper man det problemet, vilket man kan se i den andra bilden som visas i den önskade storleken.

Exempel:


							<!DOCTYPE html>

							<html>

							<head>

							<style>

							img {

							width: 100%;

							}

							</style>

							</head>

							<body>



							<img src="img/bild.png" alt="Bild" width="128" height="128">

							<img src="img/bild.png" alt="Bild" style="width:128px;height:128px;">



							</body>

							</html>

Resultat:

Filsökväg

Om man bara anger filnamnet till bilden i src-attributet förutsätter webbläsaren att bilden ligger i samma mapp som webbsidan. Det är dock vanligt att lagra bilderna i en undermapp och man måste då ta med mappnamnet i attritbutet. Man kan också ange adressen till en bild på en helt annan sida på internet.

Exempel lokal fil i undermapp:


							<img src="/img/bild.png" alt="Bild" style="width:128px;height:128px;">

Resultat:

Exempel bild från annan sida på internet:


							<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools">

Resultat:

Animerade bilder

HTML har stöd för animerade bilder i t ex GIF-format.

Exempel:


							<img src="img/animering.gif" alt="Animering" style="width:200px;height:200px;">

Resultat:

Placering av bilder

Man kan använda egenskapen float för att placera bilden till höger eller vänster om texten.

Exempel:


							<p>

							<img src=img/bild.png alt="Bild" style="float:left;width:128px;height:128px;">

							Bild till vänster om texten.

							</p>

Resultat:

Bild Bild tll vänster om texten.

Bildkartor eller Image Maps

En bild kan innehålla klickbara områden. Dessa områden anges med map-taggen och skapar på vis en "bildkarta".

Först anger man att bilden ska använda en karta genom att lägga in usemap-attributet i img-taggen. Sen använder man map-taggen och area-elementet för att ange vilka delar av bilden som ska vara klickbara. Eftersom man anger namnet på kartan i usemap-attributet och hänvisar till det namnet i map-taggen kan man placera map-taggen var som helst i HTML-koden.

De värden som går att använda sig för att ange formen på de klickbara områdena i area-elementet är följande:

rect - rektangulär
circle - cirkulär
poly - polygonal
default - anger hela bilden och ignorerar eventuella koordinater

Koordinaterna för de klickbara områdena anges i pixlar från det övre vänstra hörnet, första värdet anger hur många pixlar från den vänstra kanten och andra värdet anger hur många pixlar från toppen.

För ett rektangulärt område anges fyra värden, två för det ena hörnet av det klickbara området och två för det andra.
Första hörnet: 29,18
Bild som illustrerar markering av den första koordinaten
Andra hörnet: 51,51

Koordinaterna för det området anges alltså som: coords="29,18,51,51"

För ett cirkulärt område anges koordinaterna för mitten av cirkeln, följt av radien på cirkeln.
Mitten av cirkeln: 91,39
Bild som illustrerar markering av mitten av cirkeln
Radien på cirkeln: 11
Bild som illustrerar radien av cirkeln
Koordinaterna för cirkeln anges alltså som: coords="91,39,11"

Slutligen anger man vad som ska hända när man klickar i området. Man kan t ex länka till en annan sida med href-attributet, eller trigga en funktion i Javascript med onclick-attributet.

Exempel:


							<img src=img/bild.png alt="Bild med klickbara områden" style="width:128px;height:72px;" usemap="#bildkarta">


							
							<map name="bildkarta">

							<area shape="rect" coords="29,18,51,51" alt="Bokstaven B" href="https://sv.wikipedia.org/wiki/B">

							<area shape="circle" coords="91,39,11" alt="Cirkel" href="https://sv.wikipedia.org/wiki/Cirkel">

							</map>

Resultat:

Bakgrundsbilder

CSS-egenskapen background-image används för att ange en bakgrundsbild och det går att använda med nästan alla HTML-element.

Bakgrundsbild på ett HTML-element

Använd style-attributet eller style-elementet för att ange bilden. Det sistnämnda anges då i CSS-sektionen för sidan.

Exempel för style-attributet:


								<div style="background-image: url('img/bakgrundexempel.png');">

								Text

								för

								demo

								av

								sektion

								med

								bakgrundsbild

								</div>

Resultat:

Text
för
demo
av
sektion
med
bakgrundsbild

Exempel för style-elementet:

<style> div { background-image: url('img/bakgrundexempel.png'); } </style>

Bakgrundsbild för hela sidan

För att ange en bild som bakgrund för hela sidan anger man den i body-elementet i CSS-sektionen.

Exempel:

<style> body { background-image: url('img/bakgrundexempel.png'); } </style>

Upprepning av bakgrundsbild

I ett av exemplen ovan upprepas bakgrundsbilden med de gula prickarna för at fylla hela sektionen eller sidan beorende på om man använde div- eller body-elementet.

För att undvika att bilden upprepas använder man background-repeat-egenskapen.

Exempel för style-attributet:


									<div style="background-image: url('img/bakgrundexempel.png');background-repeat:no-repeat;">

									Text

									för

									demo

									av

									sektion

									med

									bakgrundsbild

									</div>

Resultat:

Text
för
demo
av
sektion
med
bakgrundsbild

Exempel för style-elementet:

<style> div { background-image: url('img/bakgrundexempel.png'); background-repeat: no-repeat; } </style>

Bakgrundsutfyllnad

Om man vill att bakgrunden ska täcka ett helt element kan man sätta background-size-egenskapen till cover. För att försäkra sig om att elementet alltid täcks sätter man background-attachment-egenskapen till fixed.

Exempel för style-attributet:


									<div style="background-image: url('img/bakgrundexempel.png');background-repeat:no-repeat;background-size: cover;background-attachment: fixed;">

									Text

									för

									demo

									av

									sektion

									med

									bakgrundsbild

									</div>

Resultat:

Text
för
demo
av
sektion
med
bakgrundsbild

Exempel för style-elementet:

<style> div { background-image: url('img/bakgrundexempel.png'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } </style>

Bakgrundutsträckning

Om man vill att bakgrundsbilden ska sträckas ut för att fylla hela elementet anger man background-size-egenskapen som 100% 100%. I exemplet nedan kommer bilden att tänjas ut om man justerar bredden på webbläsarfönstret. Bilden kommer alltså att bli förvrängd men den kommer att fylla elementet precis som man angett i koden.

Exempel:

<div style="background-image: url('img/bakgrundexempel.png');background-repeat: no-repeat;background-size: 100% 100%;"> Text för demo av sektion med bakgrundsbild </div>

Resultat:

Text
för
demo
av
sektion
med
bakgrundsbild

Exempel för style-elementet:

<style> div { background-image: url('img/bakgrundexempel.png'); background-repeat: no-repeat; background-size: 100% 100%; } </style>

Picture-elementet

HTML5 introducerade picture-elementet för mer flexibilitet när man anger bildkällor. Med detta elementet kan man visa olika bilder för olika typer av enheter eller skärmstorlekar.

I elementet anger man ett antal olika source-element som pekar till olika bildkällor och där man i attritbutet anger vid vilken storlek en viss bild ska visas. På så vis kan webbläsaren välja bilden som passar bäst för enheten och dess skärmstorlek eller fönsterstorlek.

Det finns framförallt två skäl till att använda picture-elementet:

Bandbredd - Om man har en liten enhet/skärm är det onödigt att ladda in en stor högupplöst bild.
Formatstöd - Vissa webbläsare eller enheter saknar kanske stöd för vissa format. Man kan då ange flera olika format bland källorna så kommer enheten att visa formatet som den har stöd för.

OBS! Webbläsaren kommer att använda den första källan i listan med matchande värden för enheten och ignorera resten.

OBS! Ange alltid ett img-element sist i listan med bilder för picture-elementet. img-elementet används då av webbläsare som inte stöder picture-elementet, eller om ingen av de andra storlekarna passade.

I exemplet nedan har jag ställt in ett antal olika bredder som styr vilken bild som kommer att visas. Testa att justera storleken på webbläsafönstret eller gå in på sidan från t ex en mobiltelefon och se vilka olika bilder som laddas in.

Exempel:


							<picture>

								<source media="(min-width: 1034px)" srcset="img/pictureex1024.png">

								<source media="(min-width: 810px)" srcset="img/pictureex800.png">

								<source media="(min-width: 650px)" srcset="img/pictureex640.png">

								<source media="(min-width: 330px)" srcset="img/pictureex320.png">

								<img src="img/pictureex160.png" alt="160 pixels" style="width: auto;">

							</picture>

Resultat:

HTML-tabeller

HTML-element

HTML-rubriker

H1

H2

H3

H4

H5

H6

Större rubriker

Rubrik

Horisontella linjer

Rubrik 1

Rubrik 1

<head>-elementet

HTML-paragrafer

Paragrafer

HTML-visning

Pre-taggen

HTML-stilar

Style-attributet

Bakgrundsfärg

Rubrik

Textfärg

En blå rubrik

Typsnitt

En rubrik med typsnitt Verdana

Textstorlek

En rubrik med 300%-storlek

Textplacering

Centrerad rubrik

HTML textformatering

HTML-citat, förkortningar och kontaktinfo

Korta citat med <q>

Blockcitat med <blockquote>

Förkortningar <abbr>

Kontaktinfo <address>

Arbetstitel <cite>

Dubbelriktad åsidosättning <bdo>

HTML-kommentarer

HTML-färger

Färgnamn och bakgrundsfärg

Textfärg

Ramfärg

Färgvärden

RGB

HEX

HSL

RGBA

HSLA

Gråskalor

RGB och HEX

HSL

HTML-CSS

Inline CSS

Internal CSS

External CSS

HTML-länkar

Syntax

Lokala länkar

Target-attributet

Bilder som länkar

Länktitlar

HTML-bilder

Syntax

alt-attributet

Storlek - höjd och bredd

Filsökväg

Animerade bilder

Placering av bilder

Bildkartor eller Image Maps

Bakgrundsbilder

Bakgrundsbild på ett HTML-element

Bakgrundsbild för hela sidan

Upprepning av bakgrundsbild

Bakgrundsutfyllnad

Bakgrundutsträckning

Picture-elementet

Korta citat med `<q>`

Blockcitat med `<blockquote>`

Förkortningar `<abbr>`

Kontaktinfo `<address>`

Arbetstitel `<cite>`

Dubbelriktad åsidosättning `<bdo>`