Våra första webbsidor - Versionshistorik

PGJ den 31 oktober 2020 kl. 13.03

2020-10-31T13:03:42Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.03
Rad 59:		Rad 59:
	Försök att redan nu lägga dig till med att [[indentering\|indentera]] [[HTML]]-koden på ett snyggt och logiskt vis. Det kommer du att tjäna på i längden! Dock så är det som så att [[indentering]]en inte spelar någon som helst roll för själva webbläsaren. Den hade glatt svalt koden även om koden för vår sida hade sett ut så här:		Försök att redan nu lägga dig till med att [[indentering\|indentera]] [[HTML]]-koden på ett snyggt och logiskt vis. Det kommer du att tjäna på i längden! Dock så är det som så att [[indentering]]en inte spelar någon som helst roll för själva webbläsaren. Den hade glatt svalt koden även om koden för vår sida hade sett ut så här:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<!DOCTYPE html><html><head><meta charset=”utf-8”><title>Första sidan</title></head><body><h1>Första sidan</h1></body></html>		<!DOCTYPE html><html><head><meta charset=”utf-8”><title>Första sidan</title></head><body><h1>Första sidan</h1></body></html>
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Det vill säga allt på en och samma rad. Men du kan ju tänka dig hur svårläst det skulle bli om man skrev all kod så! Så gör inte så med kod som du håller på att utveckla!		Det vill säga allt på en och samma rad. Men du kan ju tänka dig hur svårläst det skulle bli om man skrev all kod så! Så gör inte så med kod som du håller på att utveckla!

PGJ: /* Semantik */

2019-08-04T09:34:48Z

Semantik

← Äldre version		Versionen från 4 augusti 2019 kl. 09.34
Rad 84:		Rad 84:

	== Semantik ==		== Semantik ==
	När man använder en tagg är det viktigt att tänka på den så kallade [[semantik]]en. Varje [[tagg]] har ett specifikt syfte, dvs det finns en speciell mening med den. Självklart så ska vi enbart använda [[tagg]]arna för de syfte de är ämnade för. Även om jag helt och hållet kan definiera om hur en <code>[[p]]</code>-tagg uppför sig med hjälp av [[CSS]], så betyder det inte att jag ska göra det. Jag ska enbart formatera och använda den såsom något som är relaterat till ett stycke – det vill säga dess [[semantik\|semantiska]] betydelse. Vill jag ha något slags beteende som det inte finns en [[tagg]] för eller att jag vill göra något slags markering som enbart har med slututseendet att göra, då ska jag använda mig av de [[tagg]]ar som inte har en [[semantik\|semantiska]] betydelse; <code><[[div]]></code> och <code><[[span]]></code>. Kom ihåg; det finns en tanke och mening bakom varje [[tagg]], använd dem för det som de är till för!		När man använder en tagg är det viktigt att tänka på den så kallade [[semantik]]en. Varje [[tagg]] har ett specifikt syfte, dvs det finns en speciell mening med den. Självklart så ska vi enbart använda [[tagg]]arna för de syfte de är ämnade för. Även om jag helt och hållet kan definiera om hur en <code>[[p]]</code>-tagg uppför sig med hjälp av [[CSS]], så betyder det inte att jag ska göra det. Jag ska enbart formatera och använda den såsom något som är relaterat till ett stycke – det vill säga dess [[semantik\|semantiska]] betydelse. Vill jag ha något slags beteende som det inte finns en [[tagg]] för eller att jag vill göra något slags markering som enbart har med slututseendet att göra, då ska jag använda mig av de [[tagg]]ar som inte har en [[semantik\|semantiska]] betydelse; <code><[[div]]></code> och <code><[[span]]></code>.

			Kom ihåg; det finns en tanke och mening bakom varje [[tagg]], använd dem för det som de är till för!

	== Att avsluta eller inte avsluta... ==		== Att avsluta eller inte avsluta... ==

PGJ: /* Semantik */

2019-08-04T09:33:26Z

Semantik

← Äldre version		Versionen från 4 augusti 2019 kl. 09.33
Rad 84:		Rad 84:

	== Semantik ==		== Semantik ==
	När man använder en tagg är det viktigt att tänka på den så kallade [[semantik]]en. Varje [[tagg]] har ett specifikt syfte, dvs det finns en speciell mening med den ~~och~~ vi ~~ska~~ enbart använda [[tagg]]arna för de syfte de är ämnade för. Även om jag helt och hållet kan definiera om hur en <code>[[p]]</code>-tagg uppför sig med hjälp av [[CSS]], så betyder det inte att jag ska göra det. Jag ska enbart formatera och använda den såsom något som är relaterat till ett stycke – det vill säga dess [[semantik\|semantiska]] betydelse. Vill jag ha något slags beteende som det inte finns en [[tagg]] för eller att jag vill göra något slags markering som enbart har med slututseendet att göra, då ska jag använda mig av de [[tagg]]ar som inte har en [[semantik\|semantiska]] betydelse; <code><[[div]]></code> och <code><[[span]]></code>. Kom ihåg; det finns en tanke och mening bakom varje [[tagg]], använd dem för det som de är till för!		När man använder en tagg är det viktigt att tänka på den så kallade [[semantik]]en. Varje [[tagg]] har ett specifikt syfte, dvs det finns en speciell mening med den. Självklart så ska vi enbart använda [[tagg]]arna för de syfte de är ämnade för. Även om jag helt och hållet kan definiera om hur en <code>[[p]]</code>-tagg uppför sig med hjälp av [[CSS]], så betyder det inte att jag ska göra det. Jag ska enbart formatera och använda den såsom något som är relaterat till ett stycke – det vill säga dess [[semantik\|semantiska]] betydelse. Vill jag ha något slags beteende som det inte finns en [[tagg]] för eller att jag vill göra något slags markering som enbart har med slututseendet att göra, då ska jag använda mig av de [[tagg]]ar som inte har en [[semantik\|semantiska]] betydelse; <code><[[div]]></code> och <code><[[span]]></code>. Kom ihåg; det finns en tanke och mening bakom varje [[tagg]], använd dem för det som de är till för!

	== Att avsluta eller inte avsluta... ==		== Att avsluta eller inte avsluta... ==

PGJ: /* "White space" */

2019-08-04T09:29:13Z

"White space"

← Äldre version		Versionen från 4 augusti 2019 kl. 09.29
Rad 26:		Rad 26:

	== "[[White space]]" ==		== "[[White space]]" ==
	~~Webbläsaren har lite speciellt hantering för~~ hur ~~den~~ hanterar så kallad ”[[white space]]”, dvs saker som mellanslag, tabb, enter, osv – alltså tecken som inte ”syns”. Rent generellt kan man säga att webbläsaren försöker dra ihop allt [[white space]] så långt som möjligt och ”kastar bort” det som inte behövs. Ett exempel på detta:		Vi ska titta på hur webbläsare hanterar så kallad ”[[white space]]”, dvs saker som mellanslag, tabb, enter, osv – alltså tecken som inte ”syns”. Rent generellt kan man säga att webbläsaren försöker dra ihop allt [[white space]] så långt som möjligt och ”kastar bort” det som inte behövs. Ett exempel på detta:
	<codepen pen="xGzdmE" tab="html,result" height="200">		<codepen pen="xGzdmE" tab="html,result" height="200">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">

PGJ: /* Den första sidan */

2019-08-04T09:27:30Z

Den första sidan

← Äldre version		Versionen från 4 augusti 2019 kl. 09.27
Rad 23:		Rad 23:
	Med hjälp av det du läst hitintills, borde du relativt lätt kunna gissa hur denna sida kommer att se ut. Klicka på "Result". Såg sidan ut såsom du tänkt dig?		Med hjälp av det du läst hitintills, borde du relativt lätt kunna gissa hur denna sida kommer att se ut. Klicka på "Result". Såg sidan ut såsom du tänkt dig?

	Vi får en i det närmaste blank webbsida, det enda som syns är rubriken ”Första sidan”. Detta kommer även att vara den titel som visas på webbfönstret eller -fliken (nej, ”Första sidan” är definitivt inte en bra titel på en webbsida, men du kommer väl knappast att lägga ut denna sida på nätet? :-)). Vi hade förstås inte behövt ange samma ~~text som vi hade~~ som rubrik som sidtitel. Det är helt fritt att ha olika sidtitel och första rubrik.		Vi får en i det närmaste blank webbsida, det enda som syns är rubriken ”Första sidan”. Detta kommer även att vara den titel som visas på webbfönstret eller -fliken (nej, ”Första sidan” är definitivt inte en bra titel på en webbsida, men du kommer väl knappast att lägga ut denna sida på nätet? :-)). Vi hade förstås inte behövt ange samma både som rubrik som sidtitel. Det är helt fritt att ha olika sidtitel och första rubrik.

	== "[[White space]]" ==		== "[[White space]]" ==

PGJ: /* Programvaror */

2019-08-04T07:28:54Z

Programvaror

← Äldre version		Versionen från 4 augusti 2019 kl. 07.28
Rad 1:		Rad 1:
	Nu ska vi titta på hur vi kan skapa en första webbsida.		Nu ska vi titta på hur vi kan skapa en första webbsida.
	== Programvaror ==		== Programvaror ==
	För att kunna skapa en sida, behöver du något slags editorprogram som du kan använda för att skriva in den text som bygger upp sidan. Det finns flera olika program som främst är till för att skapa webbsidor, såsom t.ex. Adobes [http://www.adobe.com/se/products/dreamweaver.html DreamWeaver], Apache [http://netbeans.org/ NetBeans] (vilken är gratis), osv. Dessa är dock inte helt nödvändiga, det går faktiskt att skriva webbsidor i så gott som alla program i vilka man kan redigera text. Några bra program för ändamålet är [http://notepad-plus-plus.org/ Notepad++], [http://atom.io/ Atom], [http://brackets.io/ Brackets] och [http://www.sublimetext.com/ Sublime]. Dessa är relativt enkla texteditorer som är anpassade för att skriva kod. Förutom Sublime så är de alla helt gratis, så ladda ner någon av dessa, så du har ett bra verktyg att jobba med! (Sublime är gratis att testa och man kan testa det hur länge som helst.)		För att kunna skapa en sida, behöver du något slags editorprogram som du kan använda för att skriva in den text som bygger upp sidan. Det finns flera olika program som främst är till för att skapa webbsidor, såsom t.ex. Adobes [http://www.adobe.com/se/products/dreamweaver.html DreamWeaver], Apache [http://netbeans.org/ NetBeans] (vilken är gratis), osv. Dessa är dock inte helt nödvändiga, det går faktiskt att skriva webbsidor i så gott som alla program i vilka man kan redigera text. Några bra program för ändamålet är [http://notepad-plus-plus.org/ Notepad++], [http://atom.io/ Atom], [http://brackets.io/ Brackets] och [http://www.sublimetext.com/ Sublime]. Dessa är relativt enkla texteditorer som är anpassade för att skriva kod. Förutom Sublime så är de alla helt gratis, så ladda ner någon av dessa, så du har ett bra verktyg att jobba med! (Sublime är gratis att testa och man kan testa det hur länge som helst).

	== Webbpublicering ==		== Webbpublicering ==

PGJ: /* Att sluta eller inte sluta... */

2019-04-05T06:52:30Z

Att sluta eller inte sluta...

← Äldre version		Versionen från 5 april 2019 kl. 06.52
Rad 86:		Rad 86:
	När man använder en tagg är det viktigt att tänka på den så kallade [[semantik]]en. Varje [[tagg]] har ett specifikt syfte, dvs det finns en speciell mening med den och vi ska enbart använda [[tagg]]arna för de syfte de är ämnade för. Även om jag helt och hållet kan definiera om hur en <code>[[p]]</code>-tagg uppför sig med hjälp av [[CSS]], så betyder det inte att jag ska göra det. Jag ska enbart formatera och använda den såsom något som är relaterat till ett stycke – det vill säga dess [[semantik\|semantiska]] betydelse. Vill jag ha något slags beteende som det inte finns en [[tagg]] för eller att jag vill göra något slags markering som enbart har med slututseendet att göra, då ska jag använda mig av de [[tagg]]ar som inte har en [[semantik\|semantiska]] betydelse; <code><[[div]]></code> och <code><[[span]]></code>. Kom ihåg; det finns en tanke och mening bakom varje [[tagg]], använd dem för det som de är till för!		När man använder en tagg är det viktigt att tänka på den så kallade [[semantik]]en. Varje [[tagg]] har ett specifikt syfte, dvs det finns en speciell mening med den och vi ska enbart använda [[tagg]]arna för de syfte de är ämnade för. Även om jag helt och hållet kan definiera om hur en <code>[[p]]</code>-tagg uppför sig med hjälp av [[CSS]], så betyder det inte att jag ska göra det. Jag ska enbart formatera och använda den såsom något som är relaterat till ett stycke – det vill säga dess [[semantik\|semantiska]] betydelse. Vill jag ha något slags beteende som det inte finns en [[tagg]] för eller att jag vill göra något slags markering som enbart har med slututseendet att göra, då ska jag använda mig av de [[tagg]]ar som inte har en [[semantik\|semantiska]] betydelse; <code><[[div]]></code> och <code><[[span]]></code>. Kom ihåg; det finns en tanke och mening bakom varje [[tagg]], använd dem för det som de är till för!

	== Att ~~sluta~~ eller inte ~~sluta~~... ==		== Att avsluta eller inte avsluta... ==
	<code>[[P]]</code>-taggen är en av de [[tagg]]ar som inte alltid behöver en [[sluttagg]]. I de flesta fall kommer allt att fungera även om vi utelämnar den. Men i några specialfall kommer det inte att fungera och därför är det, som nämnts tidigare, oftast bäst att skriva dit [[sluttagg]]arna.		<code>[[P]]</code>-taggen är en av de [[tagg]]ar som inte alltid behöver en [[sluttagg]]. I de flesta fall kommer allt att fungera även om vi utelämnar den. Men i några specialfall kommer det inte att fungera och därför är det, som nämnts tidigare, oftast bäst att skriva dit [[sluttagg]]arna.

PGJ: /* Semantik */

2019-04-05T06:52:00Z

Semantik

← Äldre version		Versionen från 5 april 2019 kl. 06.52
Rad 84:		Rad 84:

	== Semantik ==		== Semantik ==
	När man använder en tagg är det viktigt att tänka på den så kallade [[semantik]]en. Varje [[tagg]] har ett specifikt syfte, dvs det finns en speciell mening med den och vi ska enbart använda [[tagg]]arna för de syfte de är ämnade för. Även om jag helt och hållet kan definiera om hur en <code>[[p]]</code>-tagg uppför sig med hjälp av [[CSS]], så betyder det inte att jag ska göra det. Jag ska enbart formatera och använda den såsom något som är relaterat till ett stycke – det vill säga dess [[semantik\|semantiska]] betydelse. Vill jag ha något slags beteende som det inte finns en [[tagg]] för eller att jag vill göra något slags markering som enbart har med slututseendet att göra, då ska jag använda mig av de [[tagg]]ar som inte har en [[semantik\|semantiska]] betydelse; <code><[[div]]></code> och <code><[[span]]></code>. Kom ihåg; det finns en tanke och mening bakom varje [[tagg]], använd dem för det de är till för!		När man använder en tagg är det viktigt att tänka på den så kallade [[semantik]]en. Varje [[tagg]] har ett specifikt syfte, dvs det finns en speciell mening med den och vi ska enbart använda [[tagg]]arna för de syfte de är ämnade för. Även om jag helt och hållet kan definiera om hur en <code>[[p]]</code>-tagg uppför sig med hjälp av [[CSS]], så betyder det inte att jag ska göra det. Jag ska enbart formatera och använda den såsom något som är relaterat till ett stycke – det vill säga dess [[semantik\|semantiska]] betydelse. Vill jag ha något slags beteende som det inte finns en [[tagg]] för eller att jag vill göra något slags markering som enbart har med slututseendet att göra, då ska jag använda mig av de [[tagg]]ar som inte har en [[semantik\|semantiska]] betydelse; <code><[[div]]></code> och <code><[[span]]></code>. Kom ihåg; det finns en tanke och mening bakom varje [[tagg]], använd dem för det som de är till för!

	== Att sluta eller inte sluta... ==		== Att sluta eller inte sluta... ==

PGJ: /* <p> */

2019-04-05T06:49:17Z

<p>

← Äldre version		Versionen från 5 april 2019 kl. 06.49
Rad 81:		Rad 81:
	<codepen pen="oXyWmw" tab="html,result" height="200">		<codepen pen="oXyWmw" tab="html,result" height="200">
	</codepen>		</codepen>
	Ovanstående ~~skulle skapa~~ två stycken. Varje <code>[[p]]</code>-element ~~skulle bli~~ att innehålla respektive exempeltext. Vanligtvis påbörjas varje stycke på en helt egen rad, dvs <code>[[p]]</code>-taggen ger en radbrytning. Detta går dock att styra med hjälp av [[CSS]], så man kan få till vilket utseende som helst på ett <code>[[p]]</code>-element.		Ovanstående skapar två stycken. Varje <code>[[p]]</code>-element blir att innehålla respektive exempeltext. Vanligtvis påbörjas varje stycke på en helt egen rad, dvs <code>[[p]]</code>-taggen ger en radbrytning. Detta går dock att styra med hjälp av [[CSS]], så man kan få till vilket utseende som helst på ett <code>[[p]]</code>-element.

	== Semantik ==		== Semantik ==

PGJ: /* Att formatera kod */

2019-04-05T06:48:16Z

Att formatera kod

← Äldre version		Versionen från 5 april 2019 kl. 06.48
Rad 73:		Rad 73:
	Om man gör detta, bör man skilja på utvecklingskod och den distribuerade produktionskoden som man lägger upp på sin webbserver. Man har alltså en uppsättning snyggt formaterad kod som man jobbar med och sedan använder man ett verktyg som minimerar den koden som ska läggs upp på ens sajt. Lägg märke till att detta är något man låter ett verktyg sköta och inget man gör för hand!		Om man gör detta, bör man skilja på utvecklingskod och den distribuerade produktionskoden som man lägger upp på sin webbserver. Man har alltså en uppsättning snyggt formaterad kod som man jobbar med och sedan använder man ett verktyg som minimerar den koden som ska läggs upp på ens sajt. Lägg märke till att detta är något man låter ett verktyg sköta och inget man gör för hand!

	Aftonbladet är dåliga på att göra detta. Gå in på deras sajt och välj "Visa sidkälla" och titta på koden. Vilken röra - tänk dig att behöva hålla reda på allt det innehållet! (Självklart är det inte någon som sitter och kodar varje sida på sajter som Aftonbladet. Istället gör man små mallar som sedan ett program slår samman, fyller med innehåll och levererar till din webbläsare).		Aftonbladet är dåliga på att göra detta. Gå in på deras sajt och välj "Visa sidkälla" och titta på koden. Vilken röra - tänk dig att behöva hålla reda på allt det innehållet! (Självklart är det inte någon som sitter och kodar varje sida på sajter som Aftonbladet. Istället gör man små mallar som sedan ett program slår samman, fyller med innehåll och levererar till din webbläsare.)

	== <code><[[p]]></code> ==		== <code><[[p]]></code> ==