Att länka till en bild - Versionshistorik

PGJ den 31 oktober 2020 kl. 13.05

2020-10-31T13:05:08Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.05
Rad 19:		Rad 19:
	För vårt exempelfall, skulle <code><[[img]]></code>-taggen kunna se ut så här:		För vårt exempelfall, skulle <code><[[img]]></code>-taggen kunna se ut så här:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<img src="demo.png" alt="En demobild">		<img src="demo.png" alt="En demobild">
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Vad har vi nu åstadkommit med vårt <code>[[img]]</code>-element? Jo, vi säger att vi vill komma åt en fil som heter ”<code>demo.png</code>”. Då vi inte angett någon [[sökväg]] före filnamnet, förstår webbläsaren att den ska hämta resursen ifrån samma källa som den hämtade HTML-dokumentet ifrån. Vi har satt så att de som inte kan se grafiken kommer att få en liten text som säger att det är "<code>En demobild</code>" (verkligen ett uselt val till <code>alt</code>-text!).		Vad har vi nu åstadkommit med vårt <code>[[img]]</code>-element? Jo, vi säger att vi vill komma åt en fil som heter ”<code>demo.png</code>”. Då vi inte angett någon [[sökväg]] före filnamnet, förstår webbläsaren att den ska hämta resursen ifrån samma källa som den hämtade HTML-dokumentet ifrån. Vi har satt så att de som inte kan se grafiken kommer att få en liten text som säger att det är "<code>En demobild</code>" (verkligen ett uselt val till <code>alt</code>-text!).
Rad 36:		Rad 34:
	Vissa skriver [[tagg]]en på följande sätt för att få till åstadkomma vad som kallas för en [[självstängande-tagg]]:		Vissa skriver [[tagg]]en på följande sätt för att få till åstadkomma vad som kallas för en [[självstängande-tagg]]:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<img src=”demo.png” alt=”En demobild” />		<img src=”demo.png” alt=”En demobild” />
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Lägg märke till det avslutande ”<code>/</code>”-tecknet. Att skriva på detta vis är det samma som om man skulle skrivit:		Lägg märke till det avslutande ”<code>/</code>”-tecknet. Att skriva på detta vis är det samma som om man skulle skrivit:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<img src=”demo.png” alt=”En demobild”></img>		<img src=”demo.png” alt=”En demobild”></img>
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Detta är dock inte nödvändigt och tillför egentligen ingenting. Det spelade roll i tidigare varianter av [[HTML]] (speciellt i [[XHTML]]), men i [[HTML5]] saknar detta betydelse. Det är att föredra att man inte använder sig av [[självstängande-tagg]]ar.		Detta är dock inte nödvändigt och tillför egentligen ingenting. Det spelade roll i tidigare varianter av [[HTML]] (speciellt i [[XHTML]]), men i [[HTML5]] saknar detta betydelse. Det är att föredra att man inte använder sig av [[självstängande-tagg]]ar.

PGJ: /* Självstängande-taggar */

2019-04-05T13:16:54Z

Självstängande-taggar

← Äldre version		Versionen från 5 april 2019 kl. 13.16
Rad 32:		Rad 32:

	== Självstängande-taggar ==		== Självstängande-taggar ==
	<code>[[~~Img~~]]</code>-taggen är en av de [[tagg]]ar som inte kräver en [[sluttagg]] och det kan det inte uppstå några problem om man utelämnar [[sluttagg]]en. Anledningen till att man kan göra detta är att <code>img</code>-element inte kan innehålla några andra element. Det enda innehåll som kan genereras med en <code>[[img]]</code> är den bild som <code>src</code> refererar till, det går inte att ha några som helst underelement.		<code>[[img]]</code>-taggen är en av de [[tagg]]ar som inte kräver en [[sluttagg]] och det kan det inte uppstå några problem om man utelämnar [[sluttagg]]en. Anledningen till att man kan göra detta är att <code>img</code>-element inte kan innehålla några andra element. Det enda innehåll som kan genereras med en <code>[[img]]</code> är den bild som <code>src</code> refererar till, det går inte att ha några som helst underelement.

	Vissa skriver [[tagg]]en på följande sätt för att få till åstadkomma vad som kallas för en [[självstängande-tagg]]:		Vissa skriver [[tagg]]en på följande sätt för att få till åstadkomma vad som kallas för en [[självstängande-tagg]]:

PGJ: /* <img> */

2019-04-05T13:14:47Z

<img>

← Äldre version		Versionen från 5 april 2019 kl. 13.14
Rad 2:		Rad 2:

	== <code><[[img]]></code> ==		== <code><[[img]]></code> ==
	För att länka till bilder använder man sig av <code>[[img]]</code>-taggen, ”<code>[[img]]</code>” är förstås en förkortning av image, dvs; bild. <code>[[~~Img~~]]</code>-taggen har en handfull egna [[attribut]], men de som är mest intressanta för oss är ”<code>src</code>” och ”<code>alt</code>”.		För att länka till bilder använder man sig av <code>[[img]]</code>-taggen, ”<code>[[img]]</code>” är förstås en förkortning av image, dvs; bild. <code>[[img]]</code>-taggen har en handfull egna [[attribut]], men de som är mest intressanta för oss är ”<code>src</code>” och ”<code>alt</code>”.

	=== <code>src</code> ===		=== <code>src</code> ===

PGJ: /* Användning av <img> */

2019-02-15T12:03:18Z

Användning av <img>

← Äldre version		Versionen från 15 februari 2019 kl. 12.03
Rad 28:		Rad 28:

	Koden för hela vår sida skulle kunna se ut så här:		Koden för hela vår sida skulle kunna se ut så här:

	<codepen pen="WPaKpd" tab="html,result" height="300">		<codepen pen="WPaKpd" tab="html,result" height="300">
	</codepen>		</codepen>

PGJ: /* Användning av <img> */

2019-02-15T12:03:03Z

Användning av <img>

← Äldre version		Versionen från 15 februari 2019 kl. 12.03
Rad 29:		Rad 29:
	Koden för hela vår sida skulle kunna se ut så här:		Koden för hela vår sida skulle kunna se ut så här:

	<codepen pen="WPaKpd" tab="~~css~~,result" height="300">		<codepen pen="WPaKpd" tab="html,result" height="300">
	</codepen>		</codepen>

	~~Detta är ett av de enklaste sättet att visa bilder bilder.~~

	== Självstängande-taggar ==		== Självstängande-taggar ==

PGJ: /* Användning av <img> */

2019-02-15T12:02:39Z

Användning av <img>

← Äldre version		Versionen från 15 februari 2019 kl. 12.02
Rad 29:		Rad 29:
	Koden för hela vår sida skulle kunna se ut så här:		Koden för hela vår sida skulle kunna se ut så här:

	<~~div class~~="~~well well-cyanide-light~~">		<codepen pen="WPaKpd" tab="css,result" height="300">
	~~<syntaxhighlight lang~~="~~html5~~">		</codepen>
	~~<!DOCTYPE html>~~
	~~<html>~~
	~~<head>~~
	~~<title>Demosida</title>~~
	~~</head>~~
	~~<body>~~
	~~<img src~~=~~”demo.png” alt=”En demobild”>~~
	~~</body>~~
	~~</html>~~
	~~</syntaxhighlight~~>
	</~~div~~>

	Detta är en av de enklaste~~, och antagligen mest förekommande, typen av länkar. [http://exempel.webbling.se/demo.html Här] kan du se hur exemplet blir~~ att ~~se ut~~.		Detta är ett av de enklaste sättet att visa bilder bilder.

	== Självstängande-taggar ==		== Självstängande-taggar ==

PGJ: /* Självstängande-taggar */

2019-01-11T21:35:19Z

Självstängande-taggar

← Äldre version		Versionen från 11 januari 2019 kl. 21.35
Rad 50:		Rad 50:
	Vissa skriver [[tagg]]en på följande sätt för att få till åstadkomma vad som kallas för en [[självstängande-tagg]]:		Vissa skriver [[tagg]]en på följande sätt för att få till åstadkomma vad som kallas för en [[självstängande-tagg]]:

			<div class="well well-cyanide-light">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<img src=”demo.png” alt=”En demobild” />		<img src=”demo.png” alt=”En demobild” />
	</syntaxhighlight>		</syntaxhighlight>
			</div>

	Lägg märke till det avslutande ”<code>/</code>”-tecknet. Att skriva på detta vis är det samma som om man skulle skrivit:		Lägg märke till det avslutande ”<code>/</code>”-tecknet. Att skriva på detta vis är det samma som om man skulle skrivit:

			<div class="well well-cyanide-light">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<img src=”demo.png” alt=”En demobild”></img>		<img src=”demo.png” alt=”En demobild”></img>
	</syntaxhighlight>		</syntaxhighlight>
			</div>

	Detta är dock inte nödvändigt och tillför egentligen ingenting. Det spelade roll i tidigare varianter av [[HTML]] (speciellt i [[XHTML]]), men i [[HTML5]] saknar detta betydelse. Det är att föredra att man inte använder sig av [[självstängande-tagg]]ar.		Detta är dock inte nödvändigt och tillför egentligen ingenting. Det spelade roll i tidigare varianter av [[HTML]] (speciellt i [[XHTML]]), men i [[HTML5]] saknar detta betydelse. Det är att föredra att man inte använder sig av [[självstängande-tagg]]ar.

PGJ: /* Användning av <img> */

2019-01-11T21:34:43Z

Användning av <img>

← Äldre version		Versionen från 11 januari 2019 kl. 21.34
Rad 19:		Rad 19:
	För vårt exempelfall, skulle <code><[[img]]></code>-taggen kunna se ut så här:		För vårt exempelfall, skulle <code><[[img]]></code>-taggen kunna se ut så här:

			<div class="well well-cyanide-light">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<img src="demo.png" alt="En demobild">		<img src="demo.png" alt="En demobild">
	</syntaxhighlight>		</syntaxhighlight>
			</div>

	Vad har vi nu åstadkommit med vårt <code>[[img]]</code>-element? Jo, vi säger att vi vill komma åt en fil som heter ”<code>demo.png</code>”. Då vi inte angett någon [[sökväg]] före filnamnet, förstår webbläsaren att den ska hämta resursen ifrån samma källa som den hämtade HTML-dokumentet ifrån. Vi har satt så att de som inte kan se grafiken kommer att få en liten text som säger att det är "<code>En demobild</code>" (verkligen ett uselt val till <code>alt</code>-text!).		Vad har vi nu åstadkommit med vårt <code>[[img]]</code>-element? Jo, vi säger att vi vill komma åt en fil som heter ”<code>demo.png</code>”. Då vi inte angett någon [[sökväg]] före filnamnet, förstår webbläsaren att den ska hämta resursen ifrån samma källa som den hämtade HTML-dokumentet ifrån. Vi har satt så att de som inte kan se grafiken kommer att få en liten text som säger att det är "<code>En demobild</code>" (verkligen ett uselt val till <code>alt</code>-text!).
Rad 27:		Rad 29:
	Koden för hela vår sida skulle kunna se ut så här:		Koden för hela vår sida skulle kunna se ut så här:

			<div class="well well-cyanide-light">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<!DOCTYPE html>		<!DOCTYPE html>
Rad 38:		Rad 41:
	</html>		</html>
	</syntaxhighlight>		</syntaxhighlight>
			</div>

	Detta är en av de enklaste, och antagligen mest förekommande, typen av länkar. [http://exempel.webbling.se/demo.html Här] kan du se hur exemplet blir att se ut.		Detta är en av de enklaste, och antagligen mest förekommande, typen av länkar. [http://exempel.webbling.se/demo.html Här] kan du se hur exemplet blir att se ut.

PGJ: /* Bildformat */

2016-10-05T06:40:48Z

Bildformat

← Äldre version		Versionen från 5 oktober 2016 kl. 06.40
Rad 63:		Rad 63:

	== Bildformat ==		== Bildformat ==
	Webbläsare klarar bara av att visa vissa typer av bildformat. Alla webbläsare som kan visa bilder, klarar av att visa JPEG-bilder. Det vill säga de bildfiler som har ändelsen <code>.jpg</code>. Även det gamla GIF-formatet är fullt supportat på alla visuella webbläsare. Alla moderna webbläsare klarar även av PNG-bilder, som slutar med <code>.png</code> (formatet uttalas egentligen "ping"). Många webbläsare klarar även av vektorformatet SVG, det skiljer sig dock lite i hur webbläsarna hanterar detta. Det finns andra format som vissa läsare klarar, t.ex. har Google stöd för något som heter WebP. Men detta stöds inte i alla ~~andra läsare än~~.		Webbläsare klarar bara av att visa vissa typer av bildformat. Alla webbläsare som kan visa bilder, klarar av att visa JPEG-bilder. Det vill säga de bildfiler som har ändelsen <code>.jpg</code>. Även det gamla GIF-formatet är fullt supportat på alla visuella webbläsare. Alla moderna webbläsare klarar även av PNG-bilder, som slutar med <code>.png</code> (formatet uttalas egentligen "ping"). Många webbläsare klarar även av vektorformatet SVG, det skiljer sig dock lite i hur webbläsarna hanterar detta. Det finns andra format som vissa läsare klarar, t.ex. har Google stöd för något som heter WebP. Men detta stöds ännu inte i alla webbläsare.

	<div class="well well-danger">		<div class="well well-danger">

PGJ: /* Självstängande-taggar */

2016-10-05T06:39:58Z

Självstängande-taggar

← Äldre version		Versionen från 5 oktober 2016 kl. 06.39
Rad 42:		Rad 42:

	== Självstängande-taggar ==		== Självstängande-taggar ==
	[[Img]]-taggen är en av de [[tagg]]ar som inte kräver en [[sluttagg]] och det kan det inte uppstå några problem om man utelämnar [[sluttagg]]en. Vissa skriver [[tagg]]en på följande sätt för att få till åstadkomma vad som kallas för en [[självstängande-tagg]]:		<code>[[Img]]</code>-taggen är en av de [[tagg]]ar som inte kräver en [[sluttagg]] och det kan det inte uppstå några problem om man utelämnar [[sluttagg]]en. Anledningen till att man kan göra detta är att <code>img</code>-element inte kan innehålla några andra element. Det enda innehåll som kan genereras med en <code>[[img]]</code> är den bild som <code>src</code> refererar till, det går inte att ha några som helst underelement.

			Vissa skriver [[tagg]]en på följande sätt för att få till åstadkomma vad som kallas för en [[självstängande-tagg]]:

	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
Rad 54:		Rad 56:
	</syntaxhighlight>		</syntaxhighlight>

	Detta är dock inte nödvändigt och tillför egentligen ~~inte speciellt mycket~~. Det spelade roll i tidigare varianter av [[HTML]] (speciellt i [[XHTML]]), men i [[HTML5]] saknar detta betydelse.		Detta är dock inte nödvändigt och tillför egentligen ingenting. Det spelade roll i tidigare varianter av [[HTML]] (speciellt i [[XHTML]]), men i [[HTML5]] saknar detta betydelse. Det är att föredra att man inte använder sig av [[självstängande-tagg]]ar.

	<div class="well well-danger">		<div class="well well-danger">