En introduktion till attribut - Versionshistorik

PGJ den 31 oktober 2020 kl. 13.04

2020-10-31T13:04:17Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.04
Rad 3:		Rad 3:
	[[Attribut]] anges genom att man lägger till extra ord inuti en [[starttagg]]. Om vi till exempel skulle vilja tala om att ett stycke är på svenska skulle vi kunna göra så här:		[[Attribut]] anges genom att man lägger till extra ord inuti en [[starttagg]]. Om vi till exempel skulle vilja tala om att ett stycke är på svenska skulle vi kunna göra så här:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<p lang="sv">Detta är på svenska</p>		<p lang="sv">Detta är på svenska</p>
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	[[Attribut]]et är alltså ”<code>[[Globala_attribut#lang\|lang]]</code>”, vilket är en förkortning för language. Med hjälp av ”<code>=</code>”-tecknet så tilldelar vi [[attribut]]et ett värde, det vill säga vi sätter det till något. I det här fallet sätter vi det till språkkoden för det svenska språket. Just ”<code>[[Globala_attribut#lang\|lang]]</code>” är ett [[globala attribut\|globalt attribut]] som kan sättas alla [[tagg]]ar (även om det kanske inte alltid är användbart för alla taggar). Det kan vara bra att ha tillgång till, inte minst om vi blandar olika språk på en sida. Vissa webbläsare fattar vilket språk som används på en sida utifrån detta [[attribut]] och kan då erbjuda sig att, vid behov, översätta sidan.		[[Attribut]]et är alltså ”<code>[[Globala_attribut#lang\|lang]]</code>”, vilket är en förkortning för language. Med hjälp av ”<code>=</code>”-tecknet så tilldelar vi [[attribut]]et ett värde, det vill säga vi sätter det till något. I det här fallet sätter vi det till språkkoden för det svenska språket. Just ”<code>[[Globala_attribut#lang\|lang]]</code>” är ett [[globala attribut\|globalt attribut]] som kan sättas alla [[tagg]]ar (även om det kanske inte alltid är användbart för alla taggar). Det kan vara bra att ha tillgång till, inte minst om vi blandar olika språk på en sida. Vissa webbläsare fattar vilket språk som används på en sida utifrån detta [[attribut]] och kan då erbjuda sig att, vid behov, översätta sidan.

PGJ: /* type */

2019-04-05T07:17:20Z

type

← Äldre version		Versionen från 5 april 2019 kl. 07.17
Rad 45:		Rad 45:

	=== <code>type</code> ===		=== <code>type</code> ===
	Det sista, egna [[attribut]]et som <code><[[ol]]></code> har är ”<code>type</code>”, ~~dvs~~ vilken typ av ~~lista detta är~~. Man kan sätta typen till följande värden:		Det sista, egna [[attribut]]et som <code><[[ol]]></code> har är ”<code>type</code>”, vilket styr vilken typ av uppräkning listan ska ha. Man kan sätta typen till följande värden:

	; <code>1</code> : Vanlig numrering (förvalet, om man inte sätter något annat).		; <code>1</code> : Vanlig numrering (förvalet, om man inte sätter något annat).

PGJ: /* Övningar */

2019-02-06T10:13:18Z

Övningar

← Äldre version		Versionen från 6 februari 2019 kl. 10.13
Rad 86:		Rad 86:
	== Övningar ==		== Övningar ==
	Lägg till de attribut som behövs för att få till det efterfrågas (klicka på "Edit on CodePen" för att utföra övningen).		Lägg till de attribut som behövs för att få till det efterfrågas (klicka på "Edit on CodePen" för att utföra övningen).
	<codepen pen="/zeEJwq" tab="html,result" height="~~375~~">		<codepen pen="/zeEJwq" tab="html,result" height="425">
	</codepen>		</codepen>

PGJ: /* Övningar */

2019-02-06T10:13:08Z

Övningar

← Äldre version		Versionen från 6 februari 2019 kl. 10.13
Rad 86:		Rad 86:
	== Övningar ==		== Övningar ==
	Lägg till de attribut som behövs för att få till det efterfrågas (klicka på "Edit on CodePen" för att utföra övningen).		Lägg till de attribut som behövs för att få till det efterfrågas (klicka på "Edit on CodePen" för att utföra övningen).
	<codepen pen="/zeEJwq" tab="html,result" height="~~325~~">		<codepen pen="/zeEJwq" tab="html,result" height="375">
	</codepen>		</codepen>

PGJ: /* Mer om attribut */

2019-02-06T10:12:54Z

Mer om attribut

← Äldre version		Versionen från 6 februari 2019 kl. 10.12
Rad 83:		Rad 83:
	== Mer om attribut ==		== Mer om attribut ==
	Om du använder [[Webbling]]s lista över [[HTML5-taggar]], kan du se vilka specifika [[attribut]] som finns tillgängliga för varje [[HTML]]-[[tagg]]. Det finns även en lista över de [[globala attribut]]en, dvs de som kan användas med alla [[tagg]]ar. Med hjälp av [[attribut]]en får du mer specifik kontroll över hur varje [[element]] ska hanteras.		Om du använder [[Webbling]]s lista över [[HTML5-taggar]], kan du se vilka specifika [[attribut]] som finns tillgängliga för varje [[HTML]]-[[tagg]]. Det finns även en lista över de [[globala attribut]]en, dvs de som kan användas med alla [[tagg]]ar. Med hjälp av [[attribut]]en får du mer specifik kontroll över hur varje [[element]] ska hanteras.

			== Övningar ==
			Lägg till de attribut som behövs för att få till det efterfrågas (klicka på "Edit on CodePen" för att utföra övningen).
			<codepen pen="/zeEJwq" tab="html,result" height="325">
			</codepen>

	== Nästa aktivitet ==		== Nästa aktivitet ==

PGJ: /* Att sätta flera, samtidiga attribut */

2019-01-13T13:04:58Z

Att sätta flera, samtidiga attribut

← Äldre version		Versionen från 13 januari 2019 kl. 13.04
Rad 71:		Rad 71:
	== Att sätta flera, samtidiga attribut ==		== Att sätta flera, samtidiga attribut ==
	Självklart kan man sätta flera [[attribut]] samtidigt i en och samma tagg. Ville vi ha romerska siffror och baklängesräkning skulle vi göra så här:		Självklart kan man sätta flera [[attribut]] samtidigt i en och samma tagg. Ville vi ha romerska siffror och baklängesräkning skulle vi göra så här:
	<codepen pen="ZGrYKd" height="200">		<codepen pen="ZGrYKd" height="200" tab="html,result">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<ol type=”i” reversed>		<ol type=”i” reversed>
Rad 79:		Rad 79:
	</ol>		</ol>
	</syntaxhighlight>		</syntaxhighlight>
	~~</codepen>~~

	~~Vilket skulle resultera i följande lista:~~
	~~<codepen pen="ZGrYKd" height="200" tab="result">~~
	~~<pre>~~
	~~iii. Knäck äggen~~
	~~ii. Häll i äggen i skålen~~
	~~i. Vispa äggen~~
	~~</pre>~~
	</codepen>		</codepen>

PGJ: /* type */

2019-01-13T13:04:25Z

type

← Äldre version		Versionen från 13 januari 2019 kl. 13.04
Rad 54:		Rad 54:

	Vi kör ett exempel där vi sätter uppräkningen till romerska siffror, det skulle se ut så här:		Vi kör ett exempel där vi sätter uppräkningen till romerska siffror, det skulle se ut så här:
	<codepen pen="BNYyRx" height="200">		<codepen pen="BNYyRx" height="200" tab="html,result">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<ol type=”i”>		<ol type=”i”>
Rad 63:		Rad 63:
	</syntaxhighlight>		</syntaxhighlight>
	</codepen>		</codepen>
	~~Vilket skulle resultera i följande lista:~~

	~~<pre>~~
	~~i. Knäck äggen~~
	~~ii. Häll i äggen i skålen~~
	~~iii. Vispa äggen~~
	~~</pre>~~

	== Att tänka på när man anger värden för attribut ==		== Att tänka på när man anger värden för attribut ==

PGJ: /* start */

2019-01-13T13:04:02Z

start

← Äldre version		Versionen från 13 januari 2019 kl. 13.04
Rad 42:		Rad 42:
	</ol>		</ol>
	</syntaxhighlight>		</syntaxhighlight>
	~~</codepen>~~
	~~Vilket skulle resultera i följande lista:~~

	~~<codepen pen="aOqzJO" height="200" tab="result">~~
	~~<pre>~~
	~~10. Knäck äggen~~
	~~11. Häll i äggen i skålen~~
	~~12. Vispa äggen~~
	~~</pre>~~
	</codepen>		</codepen>

PGJ: /* start */

2019-01-13T13:03:49Z

start

← Äldre version		Versionen från 13 januari 2019 kl. 13.03
Rad 34:		Rad 34:
	=== <code>start</code> ===		=== <code>start</code> ===
	Med hjälp av ett annat [[attribut]] kan vi ange från och med vilken siffra uppräkningen ska påbörjas. Det görs med [[attribut]]et ”<code>start</code>”. Detta är inte ett booleskt [[attribut]], utan vi måste sätta det till ett värde för det ska göra någon nytta. Till exempel skulle vi kunna ändra vår lista så här:		Med hjälp av ett annat [[attribut]] kan vi ange från och med vilken siffra uppräkningen ska påbörjas. Det görs med [[attribut]]et ”<code>start</code>”. Detta är inte ett booleskt [[attribut]], utan vi måste sätta det till ett värde för det ska göra någon nytta. Till exempel skulle vi kunna ändra vår lista så här:
	<codepen pen="aOqzJO" height="200">		<codepen pen="aOqzJO" height="200" tab="html,result">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<ol start=”10”>		<ol start=”10”>

PGJ: /* reversed */

2019-01-13T13:03:32Z

reversed

← Äldre version		Versionen från 13 januari 2019 kl. 13.03
Rad 28:		Rad 28:
	</ol>		</ol>
	</syntaxhighlight>		</syntaxhighlight>
	~~</codepen>~~
	~~Detta skulle skapa en baklängeslista:~~

	~~<codepen pen="bdLNgK" height="200" tab="result">~~
	~~<pre>~~
	~~3. Knäck äggen~~
	~~2. Häll i äggen i skålen~~
	~~1. Vispa äggen~~
	~~</pre>~~
	</codepen>		</codepen>