Element-grunder - Versionshistorik

PGJ den 6 augusti 2024 kl. 14.27

2024-08-06T14:27:13Z

← Äldre version		Versionen från 6 augusti 2024 kl. 14.27
Rad 72:		Rad 72:
	</syntaxhighlight>		</syntaxhighlight>

	Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet trots att man gjort fel. Dock kan det vara som så att ~~det~~ fel som en ~~typ av~~ webbläsare klarar av, kanske en annan webbläsare inte alls klarar.		Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet trots att man gjort fel. Dock kan det vara som så att den typ av fel som en webbläsare klarar av, kanske en annan webbläsare inte alls klarar.
	<div class="well well-meadow">		<div class="well well-meadow">
	Det är viktigt att använda sig av testverktyg som kollar igenom ens [[HTML]]-kod och påpekar fel och brister. Dessa testverktyg sväljer inte vad som helst, utan de är riktigt, riktigt petiga och ska ha allt absolut rätt innan de godkänner koden. Användningen av dylika testverktyg ger mer robust kod, som är lättare att felsöka och underhålla. Så gör det till en god vana att testa din kod ofta – det vinner du på i längden. Ett bra ställe att hitta webbverktyg som gör dessa kontroller är:		Det är viktigt att använda sig av testverktyg som kollar igenom ens [[HTML]]-kod och påpekar fel och brister. Dessa testverktyg sväljer inte vad som helst, utan de är riktigt, riktigt petiga och ska ha allt absolut rätt innan de godkänner koden. Användningen av dylika testverktyg ger mer robust kod, som är lättare att felsöka och underhålla. Så gör det till en god vana att testa din kod ofta – det vinner du på i längden. Ett bra ställe att hitta webbverktyg som gör dessa kontroller är:

PGJ den 6 augusti 2024 kl. 14.25

2024-08-06T14:25:23Z

← Äldre version		Versionen från 6 augusti 2024 kl. 14.25
Rad 39:		Rad 39:


	Det mest intressanta med ovanstående exempel är att vi har ett <code>[[div]]</code>-element nästlat inuti i ett annat <code>[[div]]</code>-element. När webbläsaren ska tolka ovanstående, så kommer den fatta att den första ”<code></[[div]]></code>”-[[tagg]]en är [[sluttagg]]en till den andra ”<code><[[div]]></code>”-[[tagg]]en och att ~~den sista [[sluttagg]]en hör samman med den första [[starttagg]]en~~. ~~Webbläsaren är alltså rätt så ”smart” när den ska tolka~~ hur ~~[[tagg]]ar~~ och ~~[[sluttagg]]ar hör~~ samman~~, dock gäller det att se till så att man får dit [[sluttagg]]ar som gäller för olika element i rätt ordning~~.		Det mest intressanta med ovanstående exempel är att vi har ett <code>[[div]]</code>-element nästlat inuti i ett annat <code>[[div]]</code>-element. Webbläsaren kan alltså förstå och hantera att man nästlar samma typ av element inuti varandra. Den kommer även att kunna hantera hur de olika start- och sluttaggarna hänger samman.

	I teorin kan du nästla saker inuti varandra i all oändlighet. Det är dock dumt att nästla saker och ting alltför djupt, det gör nämligen din kod mer svårläst och därmed ~~mer svårarbetad~~.		När webbläsaren ska tolka ovanstående, så kommer den fatta att den första ”<code></[[div]]></code>”-[[tagg]]en är [[sluttagg]]en till den andra ”<code><[[div]]></code>”-[[tagg]]en och att den sista [[sluttagg]]en hör samman med den första [[starttagg]]en. Webbläsaren är alltså rätt så ”smart” när den ska tolka hur [[tagg]]ar och [[sluttagg]]ar hör samman, dock gäller det att se till så att man får dit [[sluttagg]]ar som gäller för olika element i rätt ordning.

			I teorin kan du nästla saker inuti varandra i all oändlighet. Det är dock dumt att nästla saker och ting alltför djupt, det gör nämligen din kod mer svårläst och därmed svår att jobba med.

	<div class="well well-meadow">		<div class="well well-meadow">
	<code>[[Div]]</code>-[[tagg]]en används för att ange att något innehåll hänger samman som ett block, men att det inte har någon speciell semantisk betydelse. Detta används ofta för layout. Lite längre fram kommer vi att använda denna tagg ~~till~~ många olika ~~saker~~.		<code>[[Div]]</code>-[[tagg]]en används för att ange att något innehåll hänger samman som ett block, men att det inte har någon speciell semantisk betydelse. Detta används ofta för layout. Lite längre fram kommer vi att använda denna tagg för många olika ändamål.
	</div>		</div>

Rad 50:		Rad 52:
	När man skriver omfattande och komplex kod, kan det lätt bli en enda stor soppa av allting. Med lite tur är det en soppa som webbläsaren klarar av att tolka, medan du, som skrivit koden, kanske tappar bort dig helt. I värsta fall är det en soppa som vare sig du eller webbläsaren klarar av att tolka. Det gäller alltså att strukturera sin kod på ett vettigt vis.		När man skriver omfattande och komplex kod, kan det lätt bli en enda stor soppa av allting. Med lite tur är det en soppa som webbläsaren klarar av att tolka, medan du, som skrivit koden, kanske tappar bort dig helt. I värsta fall är det en soppa som vare sig du eller webbläsaren klarar av att tolka. Det gäller alltså att strukturera sin kod på ett vettigt vis.

	Det finns en del tricks, eller goda vanor, som gör att det blir enklare att hålla ordning på koden. I exemplet ovan har vi använt oss av så kallad [[indentering]]. Det vill säga vi har skjutit in texten med några extra mellanslag (tabbar går också bra) på vänster sida. Det gör att vi kan se strukturen i koden och att vi lätt ser vilka start- och sluttaggar som hör samman. Vi återkommer till goda kodvanor i en senare aktivitet.		Det finns en del tricks, eller goda vanor, som gör att det blir enklare att hålla ordning på koden. I exemplet ovan har vi använt oss av så kallad [[indentering]]. Det vill säga vi har skjutit in texten med några extra mellanslag (tabbar går också bra) på vänster sida. Det gör att vi kan följa strukturen i koden och att vi lätt ser vilka start- och sluttaggar som hör samman. Vi återkommer till goda kodvanor i en senare aktivitet.

	== Verktyg hjälper dig ==		== Verktyg hjälper dig ==
	Moderna webbutvecklingsverktyg har bra stöd som hjälper dig med att skriva korrekt, snygg och vettig kod. Detta gör de på flera olika sätt.		Moderna webbutvecklingsverktyg har bra stöd som hjälper dig med att skriva korrekt, snygg och vettig kod. Detta gör de på flera olika sätt.

	När du börjar skriva, så ger de flesta verktyg förslag på vad det kan vara som du håller på att skriva. Det gör att du snabbt kan skriva en bokstav eller två och vips så kan din editor fylla i och komplettera vad du vill skriva. Detta gör att man skriver snabbare och att det blir färre fel. I många fall föreslår din editor kompletteringar utifrån sammanhanget runt ~~omkring~~ det du skriver. Om du ska ange ett färgattribut, så fattar editorn antagligen att det är en färg som du håller på att ange och ger förslag på olika färgkombinationer.		När du börjar skriva, så ger de flesta verktyg förslag på vad det kan vara som du håller på att skriva. Det gör att du snabbt kan skriva en bokstav eller två och vips så kan din editor fylla i och komplettera vad du vill skriva. Detta gör att man skriver snabbare och att det blir färre fel. I många fall föreslår din editor kompletteringar utifrån sammanhanget runt om det du skriver. Om du ska ange ett färgattribut, så fattar editorn antagligen att det är en färg som du håller på att ange och ger förslag på olika färgkombinationer.

	De flesta verktyg hjälper dig att ~~få dit~~ [[sluttagg]]arna där de hör hemma. Detta gör editorn genom att fylla i korrekt sluttaggsnamn direkt du skriver ”<code></</code>”.		De flesta verktyg hjälper dig att sätta [[sluttagg]]arna där de hör hemma. Detta gör editorn genom att fylla i korrekt sluttaggsnamn direkt du skriver ”<code></</code>”.

	Editorer brukar även vara duktiga på att se till att din kod blir snyggt och korrekt indenterad. Vilket gör att saker hamnar på ~~korrekt~~ plats i förhållande till kringliggande kod. Detta gör det ''mycket'' lättare att läsa din kod.		Editorer brukar även vara duktiga på att se till att din kod blir snyggt och korrekt indenterad. Vilket gör att saker hamnar på "rätt" plats i förhållande till kringliggande kod. Detta gör det ''mycket'' lättare att läsa din kod.

	Lär dig att använda ditt verktyg. Det kommer att göra ditt liv enklare. Du kommer att behöva skriva mycket mindre och det är stor chans att saker blir korrekta redan från början. Men kom ihåg att man inte kan förlita sig helt på att verktygen gör allting rätt...		Lär dig att använda ditt verktyg. Det kommer att göra ditt liv enklare. Du kommer att behöva skriva mycket mindre och det är stor chans att saker blir korrekta redan från början. Men kom ihåg att man inte kan förlita sig helt på att verktygen gör allting rätt...

PGJ den 6 augusti 2024 kl. 14.18

2024-08-06T14:18:04Z

← Äldre version		Versionen från 6 augusti 2024 kl. 14.18
Rad 39:		Rad 39:


	Det mest intressanta med ovanstående exempel är att vi har ett <code>[[div]]</code>-element nästlat inuti i ett annat <code>[[div]]</code>-element. När webbläsaren ska tolka ovanstående, så kommer den ~~att~~ fatta att den första ”<code></[[div]]></code>”-[[tagg]]en är [[sluttagg]]en till den andra ”<code><[[div]]></code>”-[[tagg]]en och att den sista [[sluttagg]]en hör samman med den första [[starttagg]]en. Webbläsaren är alltså rätt så ”smart” när den ska tolka hur [[tagg]]ar och [[sluttagg]]ar hör samman, dock gäller det att se till så att man får dit [[sluttagg]]ar som gäller för olika element i rätt ordning.		Det mest intressanta med ovanstående exempel är att vi har ett <code>[[div]]</code>-element nästlat inuti i ett annat <code>[[div]]</code>-element. När webbläsaren ska tolka ovanstående, så kommer den fatta att den första ”<code></[[div]]></code>”-[[tagg]]en är [[sluttagg]]en till den andra ”<code><[[div]]></code>”-[[tagg]]en och att den sista [[sluttagg]]en hör samman med den första [[starttagg]]en. Webbläsaren är alltså rätt så ”smart” när den ska tolka hur [[tagg]]ar och [[sluttagg]]ar hör samman, dock gäller det att se till så att man får dit [[sluttagg]]ar som gäller för olika element i rätt ordning.

	I teorin kan du nästla saker inuti varandra i all oändlighet. Det är dock dumt att nästla saker och ting alltför djupt, det gör nämligen din kod mer svårläst och därmed mer svårarbetad.		I teorin kan du nästla saker inuti varandra i all oändlighet. Det är dock dumt att nästla saker och ting alltför djupt, det gör nämligen din kod mer svårläst och därmed mer svårarbetad.

PGJ den 6 augusti 2024 kl. 14.17

2024-08-06T14:17:08Z

← Äldre version		Versionen från 6 augusti 2024 kl. 14.17
Rad 9:		Rad 9:
	Detta är ett <code>[[hx\|h1]]</code>-element vars innehåll är texten ”Detta är en huvudrubrik”. På detta vis talar vi om för webbläsaren att texten har ett speciellt syfte. I det här fallet anges att detta är sektionens huvudrubrik. Vi talar dock inte om hur texten ska visas, utan enbart dess syfte. Alla webbläsare har ett grundutseende för hur olika [[element]] ska återges. I vårt fall kommer innehållet antagligen att visas med lite större och fetare text. Så länge vi jobbar med [[HTML]], fokuserar vi dock inte på utseende.		Detta är ett <code>[[hx\|h1]]</code>-element vars innehåll är texten ”Detta är en huvudrubrik”. På detta vis talar vi om för webbläsaren att texten har ett speciellt syfte. I det här fallet anges att detta är sektionens huvudrubrik. Vi talar dock inte om hur texten ska visas, utan enbart dess syfte. Alla webbläsare har ett grundutseende för hur olika [[element]] ska återges. I vårt fall kommer innehållet antagligen att visas med lite större och fetare text. Så länge vi jobbar med [[HTML]], fokuserar vi dock inte på utseende.

	Det exakta utseendet som elementen ger upphov till skiljer sig mellan olika ~~modeller av~~ webbläsare. Det kan till och med vara som så att slutanvändaren som använder vår webbsida är blind (eller har något annat handikapp) och därför får sidan uppläst ~~för sig~~. När vi jobbar med ren [[HTML]], kan vi aldrig vara säkra på hur slutresultatet kommer att återges. Med hjälp av [[CSS]] får vi mer kontroll över hur sidan återges, men inte ens då kan vi inte vara 100 % säkra på att slutanvändaren kommer att uppleva sidan exakt så som vi tänkt oss. Vi återkommer ~~dock~~ till utseende i senare aktiviteter.		Det exakta utseendet som elementen ger upphov till skiljer sig mellan olika webbläsare. Det kan till och med vara som så att slutanvändaren som använder vår webbsida är blind (eller har något annat handikapp) och därför får sidan uppläst. När vi jobbar med ren [[HTML]], kan vi aldrig vara säkra på hur slutresultatet kommer att återges. Med hjälp av [[CSS]] får vi mer kontroll över hur sidan återges, men inte ens då kan vi inte vara 100 % säkra på att slutanvändaren kommer att uppleva sidan exakt så som vi tänkt oss. Vi återkommer till utseende i senare aktiviteter.

	<div class="well well-meadow">		<div class="well well-meadow">
Rad 18:		Rad 18:
	Det går även att klicka på "Edit on CodePen" i exemplen för att gå till dem på [http://codepen.io CodePens sajt]. Om du gör det så kan du förändra och redigera koden, så att du kan se vad som händer om man väljer att göra saker på olika sätt. Detta är ett bra sätt att lära sig mer om hur webbteknikerna fungerar, så passa på att experimentera med exemplen!		Det går även att klicka på "Edit on CodePen" i exemplen för att gå till dem på [http://codepen.io CodePens sajt]. Om du gör det så kan du förändra och redigera koden, så att du kan se vad som händer om man väljer att göra saker på olika sätt. Detta är ett bra sätt att lära sig mer om hur webbteknikerna fungerar, så passa på att experimentera med exemplen!
	</div>		</div>

	== Underelement och nästling ==		== Underelement och nästling ==
	[[Element]] kan i sin tur innehålla andra [[element]]. Ett exempel på det skulle kunna vara:		[[Element]] kan i sin tur innehålla andra [[element]]. Ett exempel på det skulle kunna vara:
Rad 27:		Rad 28:


	Här har vi alltså ett <code>[[em]]</code>-element som är nästlat inuti ett <code>[[hx\|h1]]</code>-element. Det gör att <code>[[em]]</code>-elementet är en del av <code>[[hx\|h1]]</code>-elementet~~, men~~ det ~~är även ett eget [[element]] i sig~~.		Här har vi alltså ett <code>[[em]]</code>-element som är nästlat inuti ett <code>[[hx\|h1]]</code>-element. Det gör att <code>[[em]]</code>-elementet är en del av <code>[[hx\|h1]]</code>-elementet. Man behöver ofta nästla olika element inuti varandra för att få till den struktur man vill ha. Oftast krävs det nästling när man ska skapa en snygg layout.

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

PGJ den 31 oktober 2020 kl. 13.02

2020-10-31T13:02:15Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.02
Rad 65:		Rad 65:
	När vi skapar nästlade [[element]] gäller det att hålla tungan rätt i munnen och se till att [[tagg]]arna hamnar i rätt ordning. Det här skulle till exempel bli rejält fel:		När vi skapar nästlade [[element]] gäller det att hålla tungan rätt i munnen och se till att [[tagg]]arna hamnar i rätt ordning. Det här skulle till exempel bli rejält fel:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<h1>Detta är en <i>huvudrubrik</h1></i>		<h1>Detta är en <i>huvudrubrik</h1></i>
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet trots att man gjort fel. Dock kan det vara som så att det fel som en typ av webbläsare klarar av, kanske en annan webbläsare inte alls klarar.		Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet trots att man gjort fel. Dock kan det vara som så att det fel som en typ av webbläsare klarar av, kanske en annan webbläsare inte alls klarar.

PGJ den 31 oktober 2020 kl. 13.01

2020-10-31T13:01:53Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.01
Rad 17:		Rad 17:

	Det går även att klicka på "Edit on CodePen" i exemplen för att gå till dem på [http://codepen.io CodePens sajt]. Om du gör det så kan du förändra och redigera koden, så att du kan se vad som händer om man väljer att göra saker på olika sätt. Detta är ett bra sätt att lära sig mer om hur webbteknikerna fungerar, så passa på att experimentera med exemplen!		Det går även att klicka på "Edit on CodePen" i exemplen för att gå till dem på [http://codepen.io CodePens sajt]. Om du gör det så kan du förändra och redigera koden, så att du kan se vad som händer om man väljer att göra saker på olika sätt. Detta är ett bra sätt att lära sig mer om hur webbteknikerna fungerar, så passa på att experimentera med exemplen!
			</div>
	== Underelement och nästling ==		== Underelement och nästling ==
	[[Element]] kan i sin tur innehålla andra [[element]]. Ett exempel på det skulle kunna vara:		[[Element]] kan i sin tur innehålla andra [[element]]. Ett exempel på det skulle kunna vara:

PGJ: /* Felaktigt angivna sluttaggar */

2020-06-20T12:57:48Z

Felaktigt angivna sluttaggar

← Äldre version		Versionen från 20 juni 2020 kl. 12.57
Rad 71:		Rad 71:
	</div>		</div>

	Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet, trots att man gjort fel. Dock kan det vara som så att det fel som en typ av webbläsare klarar av, kanske en annan webbläsare inte alls klarar.		Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet trots att man gjort fel. Dock kan det vara som så att det fel som en typ av webbläsare klarar av, kanske en annan webbläsare inte alls klarar.
	<div class="well well-meadow">		<div class="well well-meadow">
	Det är viktigt att använda sig av testverktyg som kollar igenom ens [[HTML]]-kod och påpekar fel och brister. Dessa testverktyg sväljer inte vad som helst, utan de är riktigt, riktigt petiga och ska ha allt absolut rätt innan de godkänner koden. Användningen av dylika testverktyg ger mer robust kod, som är lättare att felsöka och underhålla. Så gör det till en god vana att testa din kod ofta – det vinner du på i längden. Ett bra ställe att hitta webbverktyg som gör dessa kontroller är:		Det är viktigt att använda sig av testverktyg som kollar igenom ens [[HTML]]-kod och påpekar fel och brister. Dessa testverktyg sväljer inte vad som helst, utan de är riktigt, riktigt petiga och ska ha allt absolut rätt innan de godkänner koden. Användningen av dylika testverktyg ger mer robust kod, som är lättare att felsöka och underhålla. Så gör det till en god vana att testa din kod ofta – det vinner du på i längden. Ett bra ställe att hitta webbverktyg som gör dessa kontroller är:

PGJ: /* Verktyg hjälper dig */

2020-06-20T12:56:56Z

Verktyg hjälper dig

← Äldre version		Versionen från 20 juni 2020 kl. 12.56
Rad 54:		Rad 54:
	Moderna webbutvecklingsverktyg har bra stöd som hjälper dig med att skriva korrekt, snygg och vettig kod. Detta gör de på flera olika sätt.		Moderna webbutvecklingsverktyg har bra stöd som hjälper dig med att skriva korrekt, snygg och vettig kod. Detta gör de på flera olika sätt.

	När du börjar skriva, så ger de flesta verktyg förslag på vad det kan vara som du håller på att skriva. Det gör att du snabbt kan skriva en bokstav eller två och vips så kan din editor fylla i och komplettera vad du vill skriva. Detta gör att man skriver snabbare och att det blir färre fel. I många fall föreslår din editor kompletteringar utifrån sammanhanget ~~runtomkring~~ det du skriver. Om du ska ange ett färgattribut, så fattar editorn antagligen att det är en färg som du håller på att ange och ger förslag på olika färgkombinationer.		När du börjar skriva, så ger de flesta verktyg förslag på vad det kan vara som du håller på att skriva. Det gör att du snabbt kan skriva en bokstav eller två och vips så kan din editor fylla i och komplettera vad du vill skriva. Detta gör att man skriver snabbare och att det blir färre fel. I många fall föreslår din editor kompletteringar utifrån sammanhanget runt omkring det du skriver. Om du ska ange ett färgattribut, så fattar editorn antagligen att det är en färg som du håller på att ange och ger förslag på olika färgkombinationer.

	De flesta verktyg hjälper dig att få dit [[sluttagg]]arna där de hör hemma. Detta gör editorn genom att fylla i korrekt sluttaggsnamn direkt du skriver ”<code></</code>”.		De flesta verktyg hjälper dig att få dit [[sluttagg]]arna där de hör hemma. Detta gör editorn genom att fylla i korrekt sluttaggsnamn direkt du skriver ”<code></</code>”.

	Editorer brukar även vara duktiga på att se till att din kod blir snyggt och korrekt indenterad. Vilket gör att saker hamnar på korrekt plats i förhållande till ~~koden omkring~~. Detta gör det ''mycket'' lättare att läsa din kod.		Editorer brukar även vara duktiga på att se till att din kod blir snyggt och korrekt indenterad. Vilket gör att saker hamnar på korrekt plats i förhållande till kringliggande kod. Detta gör det ''mycket'' lättare att läsa din kod.

	Lär dig att använda ditt verktyg. Det kommer att göra ditt liv enklare. Du ~~behöver~~ kommer att behöva skriva mycket mindre och det är stor chans att saker blir ~~korrekt~~ redan ~~ifrån~~ början. Men kom ihåg att man inte kan förlita sig helt på att verktygen gör allting rätt...		Lär dig att använda ditt verktyg. Det kommer att göra ditt liv enklare. Du kommer att behöva skriva mycket mindre och det är stor chans att saker blir korrekta redan från början. Men kom ihåg att man inte kan förlita sig helt på att verktygen gör allting rätt...

	== Felaktigt angivna sluttaggar ==		== Felaktigt angivna sluttaggar ==

PGJ: /* Vikten av snygg kod */

2020-06-20T12:54:40Z

Vikten av snygg kod

← Äldre version		Versionen från 20 juni 2020 kl. 12.54
Rad 49:		Rad 49:
	När man skriver omfattande och komplex kod, kan det lätt bli en enda stor soppa av allting. Med lite tur är det en soppa som webbläsaren klarar av att tolka, medan du, som skrivit koden, kanske tappar bort dig helt. I värsta fall är det en soppa som vare sig du eller webbläsaren klarar av att tolka. Det gäller alltså att strukturera sin kod på ett vettigt vis.		När man skriver omfattande och komplex kod, kan det lätt bli en enda stor soppa av allting. Med lite tur är det en soppa som webbläsaren klarar av att tolka, medan du, som skrivit koden, kanske tappar bort dig helt. I värsta fall är det en soppa som vare sig du eller webbläsaren klarar av att tolka. Det gäller alltså att strukturera sin kod på ett vettigt vis.

	Det finns en del tricks, eller goda vanor, som gör att det blir enklare att hålla ordning på koden. I exemplet ovan har vi använt oss av så kallad [[indentering]]. Det vill säga vi har skjutit in texten med några extra mellanslag (tabbar går också bra) på vänster sida. Det gör att vi kan se strukturen i koden och att vi lätt se vilka start- och sluttaggar som hör samman. Vi återkommer till goda kodvanor i en senare aktivitet.		Det finns en del tricks, eller goda vanor, som gör att det blir enklare att hålla ordning på koden. I exemplet ovan har vi använt oss av så kallad [[indentering]]. Det vill säga vi har skjutit in texten med några extra mellanslag (tabbar går också bra) på vänster sida. Det gör att vi kan se strukturen i koden och att vi lätt ser vilka start- och sluttaggar som hör samman. Vi återkommer till goda kodvanor i en senare aktivitet.

	== Verktyg hjälper dig ==		== Verktyg hjälper dig ==

PGJ: /* Underelement och nästling */

2020-06-20T12:53:31Z

Underelement och nästling

← Äldre version		Versionen från 20 juni 2020 kl. 12.53
Rad 43:		Rad 43:

	<div class="well well-meadow">		<div class="well well-meadow">
	<code>[[Div]]</code>-[[tagg]]en används för att ange att något innehåll hänger samman som ett block, men ~~som~~ inte har någon speciell semantisk betydelse. ~~Det~~ används ofta för layout. Lite längre fram kommer vi att använda denna tagg till ~~mycket~~ olika saker.		<code>[[Div]]</code>-[[tagg]]en används för att ange att något innehåll hänger samman som ett block, men att det inte har någon speciell semantisk betydelse. Detta används ofta för layout. Lite längre fram kommer vi att använda denna tagg till många olika saker.
	</div>		</div>