List-grunder - Versionshistorik

PGJ: /* De vanligaste listorna */

2019-08-04T09:47:19Z

De vanligaste listorna

← Äldre version		Versionen från 4 augusti 2019 kl. 09.47
Rad 1:		Rad 1:
	Listor är vanligt förekommande i dokument. Det kan t.ex. vara punktlistor eller uppräkningslistor. Eftersom dessa är så vanliga, har [[HTML]] en uppsättning [[tagg]]ar som används för att skapa listor. Listor användas för en hel del olika syften, t.ex. så är det nästan alltid en oordnad lista som ligger till grunden för menyer på webbsidor.		Listor är vanligt förekommande i dokument. Det kan t.ex. vara punktlistor eller uppräkningslistor. Eftersom dessa är så vanliga, har [[HTML]] en uppsättning [[tagg]]ar som används för att skapa listor. Listor användas för en hel del olika syften, t.ex. så är det nästan alltid en oordnad lista som ligger till grunden för menyer på webbsidor.

	== De vanligaste ~~listorna~~ ==		== De vanligaste listtyperna ==
	Här kommer vi att gå igenom de två vanligaste listtyperna. Den oordnade listan och den ordnade listan.		Här kommer vi att gå igenom de två vanligaste listtyperna. Den oordnade listan och den ordnade listan.

PGJ: /* ol */

2019-04-05T06:59:03Z

← Äldre version		Versionen från 5 april 2019 kl. 06.59
Rad 39:		Rad 39:

	==== <code>[[ol]]</code> ====		==== <code>[[ol]]</code> ====
	Det skiljer sig inte så mycket åt mellan hur man skapar oordnade och ordnade listor. Det enda som skiljer sig är vilken [[tagg]] som inleder listan. Här använder man sig av [[tagg]]en <code><[[ol]]></code>, vilket är en förkortning av ”ordered list”, dvs ordnad lista. Liksom med den oordnade listan så markerar man innehållet på varje listrad med [[tagg]]en ”<code><[[li]]></code>”.		Det skiljer sig inte så mycket åt mellan hur man skapar oordnade och ordnade listor. Det enda som skiljer sig är vilken [[tagg]] som inleder listan. Här använder man sig av [[tagg]]en <code><[[ol]]></code>, vilket är en förkortning av ”ordered list”, dvs en ordnad lista. Liksom med den oordnade listan så markerar man innehållet på varje listrad med [[tagg]]en ”<code><[[li]]></code>”.

	==== Exempel på en ordnad lista====		==== Exempel på en ordnad lista====

PGJ: /* Exempel på en oordnad lista */

2019-04-05T06:56:31Z

Exempel på en oordnad lista

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

	<div class="well well-danger">		<div class="well well-danger">
	~~Det går~~ självklart inte att använda <code>li</code>-element utanför list-element!		Man ska självklart inte att använda <code>li</code>-element utanför list-element!
	</div>		</div>

PGJ: /* li */

2019-04-05T06:55:57Z

← Äldre version		Versionen från 5 april 2019 kl. 06.55
Rad 15:		Rad 15:
	Varje delelement i en lista anges med taggen <code><[[li]]></code>, vilket är en förkortning för ”list item”. Det vill säga innehållet som ska stå på den raden i listan.		Varje delelement i en lista anges med taggen <code><[[li]]></code>, vilket är en förkortning för ”list item”. Det vill säga innehållet som ska stå på den raden i listan.

	I stort sett kan listinnehållet bestå av alla tillgängliga HTML-element. Ofta är innehållet ren text, men det är inget som hindrar att det är bilder, filmer, eller vad som helst. Man kan ~~t.ex. ha andra HTML-element inuti listorna. Det gör att man kan~~ skapa listhierarkier, där man har listor inuti andra listor.		I stort sett kan listinnehållet bestå av alla tillgängliga HTML-element. Ofta är innehållet ren text, men det är inget som hindrar att det är bilder, filmer, eller vad som helst. Man kan även skapa listhierarkier, där man har listor inuti andra listor.

	==== Exempel på en oordnad lista ====		==== Exempel på en oordnad lista ====

PGJ: /* Oordnade listor */

2019-04-02T10:34:09Z

Oordnade listor

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

	=== Oordnade listor ===		=== Oordnade listor ===
	Oordnade listor visas oftast som en punktlista. Det vill säga varje element i listan föregås av en punkt, följt av innehållet ~~för~~ den ~~raden~~. Utseendet för hur varje element visas är fullt styrbart ifrån [[CSS]] och man kan ändra såväl utseende på punkter, färger och mycket annat.		Oordnade listor visas oftast som en punktlista. Det vill säga varje element i listan föregås av en punkt, följt av innehållet på den listraden. Utseendet för hur varje element visas är fullt styrbart ifrån [[CSS]] och man kan ändra såväl utseende på punkter, färger och mycket annat.

	Oordnade listor heter inte så därför att deras innehåll presenteras huller om buller, snarare anger det hur innehållet i listan hör samman. Oordnade listor ska enbart användas för saker som inte har någon som helst inbördes ordning. Det vill säga det ska inte spela någon roll i vilken ordning elementens visas upp. Om man byter plats på två element ska inte innehållets betydelse förändras på något vis.		Oordnade listor heter inte så därför att deras innehåll presenteras huller om buller, snarare anger det hur innehållet i listan hör samman. Oordnade listor ska enbart användas för saker som inte har någon som helst inbördes ordning. Det vill säga det ska inte spela någon roll i vilken ordning elementens visas upp. Om man byter plats på två element ska inte innehållets betydelse förändras på något vis.
Rad 13:		Rad 13:

	==== <code>li</code> ====		==== <code>li</code> ====
	Varje delelement i en lista anges med taggen <code><[[li]]></code>, vilket är en förkortning för ”list item”. ~~Vilket förstås kan tolkas~~ som ~~listinnehåll~~.		Varje delelement i en lista anges med taggen <code><[[li]]></code>, vilket är en förkortning för ”list item”. Det vill säga innehållet som ska stå på den raden i listan.

	I stort sett kan listinnehållet bestå av alla tillgängliga HTML-element. Ofta är innehållet ren text, men det är inget som hindrar att det är bilder, filmer, eller vad som helst. Man kan t.ex. ha andra HTML-element inuti listorna. Det gör att man kan skapa listhierarkier, där man har listor inuti andra listor.		I stort sett kan listinnehållet bestå av alla tillgängliga HTML-element. Ofta är innehållet ren text, men det är inget som hindrar att det är bilder, filmer, eller vad som helst. Man kan t.ex. ha andra HTML-element inuti listorna. Det gör att man kan skapa listhierarkier, där man har listor inuti andra listor.
Rad 29:		Rad 29:
	</codepen>		</codepen>

	~~Att~~ byta ut punkten mot något annat, eller för den delen att ta bort punkten, är relativt enkelt att åstadkomma med [[CSS]]. Men för tillfället nöjer vi oss med standardutseendet på listan		Vill man byta ut punkten mot något annat, eller för den delen att ta bort punkten, så är det relativt enkelt att åstadkomma med [[CSS]]. Men för tillfället nöjer vi oss med standardutseendet på listan.

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

PGJ: /* Exempel på en ordnad lista */

2019-02-06T10:09:59Z

Exempel på en ordnad lista

← Äldre version		Versionen från 6 februari 2019 kl. 10.09
Rad 52:		Rad 52:
	</syntaxhighlight>		</syntaxhighlight>
	</codepen>		</codepen>
	~~De flesta webbläsare kommer att visa ovanstående exempel ungefär så här:~~

	~~# Knäck äggen~~
	~~# Häll i äggen i skålen~~
	~~# Vispa äggen~~

	Med hjälp av [[CSS]] kan man enkelt styra hur uppräkningen ska se ut, t.ex. om man vill använda bokstäver istället. Men vissa saker kan man faktiskt styra redan med [[tagg]]en. För det behöver vi dock lära oss om så kallade [[attribut]].		Med hjälp av [[CSS]] kan man enkelt styra hur uppräkningen ska se ut, t.ex. om man vill använda bokstäver istället. Men vissa saker kan man faktiskt styra redan med [[tagg]]en. För det behöver vi dock lära oss om så kallade [[attribut]].

PGJ: /* Nästa aktivitet */

2019-02-06T10:09:34Z

Nästa aktivitet

← Äldre version		Versionen från 6 februari 2019 kl. 10.09
Rad 59:		Rad 59:

	Med hjälp av [[CSS]] kan man enkelt styra hur uppräkningen ska se ut, t.ex. om man vill använda bokstäver istället. Men vissa saker kan man faktiskt styra redan med [[tagg]]en. För det behöver vi dock lära oss om så kallade [[attribut]].		Med hjälp av [[CSS]] kan man enkelt styra hur uppräkningen ska se ut, t.ex. om man vill använda bokstäver istället. Men vissa saker kan man faktiskt styra redan med [[tagg]]en. För det behöver vi dock lära oss om så kallade [[attribut]].

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

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

PGJ: /* Exempel på en oordnad lista */

2019-01-13T13:02:48Z

Exempel på en oordnad lista

← Äldre version		Versionen från 13 januari 2019 kl. 13.02
Rad 19:		Rad 19:
	==== Exempel på en oordnad lista ====		==== Exempel på en oordnad lista ====
	En enkel lista skulle kunna läggas upp så här:		En enkel lista skulle kunna läggas upp så här:
	<codepen pen="ZGrYBN" tab="html" height="200">		<codepen pen="ZGrYBN" tab="html,result" height="200">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<ul>		<ul>
Rad 28:		Rad 28:
	</syntaxhighlight>		</syntaxhighlight>
	</codepen>		</codepen>
	~~I de flesta webbläsare skapar det här en punktlista som ser ut ungefär så här:~~

	~~<div class="well well-cyanide-light">~~
	* Taggar
	* Attribut
	* Länkar
	~~</div>~~

	Att byta ut punkten mot något annat, eller för den delen att ta bort punkten, är relativt enkelt att åstadkomma med [[CSS]]. Men för tillfället nöjer vi oss med standardutseendet på listan		Att byta ut punkten mot något annat, eller för den delen att ta bort punkten, är relativt enkelt att åstadkomma med [[CSS]]. Men för tillfället nöjer vi oss med standardutseendet på listan

PGJ: /* Exempel på en ordnad lista */

2019-01-13T13:02:18Z

Exempel på en ordnad lista

← Äldre version		Versionen från 13 januari 2019 kl. 13.02
Rad 50:		Rad 50:
	==== Exempel på en ordnad lista====		==== Exempel på en ordnad lista====
	Så här skulle en enkel ordnad lista kunna se ut.		Så här skulle en enkel ordnad lista kunna se ut.
	<codepen pen="LVQExZ" height="200">		<codepen pen="LVQExZ" height="200" tab="html,result">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<ol>		<ol>

PGJ: /* Exempel på en oordnad lista */

2019-01-13T12:59:31Z

Exempel på en oordnad lista

← Äldre version		Versionen från 13 januari 2019 kl. 12.59
Rad 30:		Rad 30:
	I de flesta webbläsare skapar det här en punktlista som ser ut ungefär så här:		I de flesta webbläsare skapar det här en punktlista som ser ut ungefär så här:

			<div class="well well-cyanide-light">
	* Taggar		* Taggar
	* Attribut		* Attribut
	* Länkar		* Länkar
			</div>

	Att byta ut punkten mot något annat, eller för den delen att ta bort punkten, är relativt enkelt att åstadkomma med [[CSS]]. Men för tillfället nöjer vi oss med standardutseendet på listan		Att byta ut punkten mot något annat, eller för den delen att ta bort punkten, är relativt enkelt att åstadkomma med [[CSS]]. Men för tillfället nöjer vi oss med standardutseendet på listan