En webbsidas anatomi - Versionshistorik

PGJ den 6 augusti 2024 kl. 14.34

2024-08-06T14:34:42Z

← Äldre version		Versionen från 6 augusti 2024 kl. 14.34
Rad 13:		Rad 13:
	Det här är den första grej som man måste ange i början av varje webbdokument. Det är den så kallade ”<code>[[doctype]]</code>”, vilket är en förkortning för engelskans ”Document Type” eller dokumenttyp. Denna tjänar som en indikation på vilken typ av dokument det handlar om, samt vilken [[HTML]]-[[standard]] som används i dokumentet. Detta gör att webbläsaren kan hantera alla [[tagg]]ar i ditt webbdokument på ett korrekt vis.		Det här är den första grej som man måste ange i början av varje webbdokument. Det är den så kallade ”<code>[[doctype]]</code>”, vilket är en förkortning för engelskans ”Document Type” eller dokumenttyp. Denna tjänar som en indikation på vilken typ av dokument det handlar om, samt vilken [[HTML]]-[[standard]] som används i dokumentet. Detta gör att webbläsaren kan hantera alla [[tagg]]ar i ditt webbdokument på ett korrekt vis.

	<code>[[doctype]]</code> ska anges allra först i ditt dokument, innan du använder dig av någon [[tagg]]. Den har lite speciellt utseende som skiljer sig ~~ifrån~~ [[HTML]]-[[tagg]]arna och det finns heller ingen [[sluttagg]] för den. För [[HTML5]] är det väldigt enkelt att ange <code>[[doctype]]</code>, man skriver nämligen så här:		<code>[[doctype]]</code> ska anges allra först i ditt dokument, innan du använder dig av någon [[tagg]]. Den har lite speciellt utseende som skiljer sig från [[HTML]]-[[tagg]]arna och det finns heller ingen [[sluttagg]] för den. För [[HTML5]] är det väldigt enkelt att ange <code>[[doctype]]</code>, man skriver nämligen så här:

	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
Rad 19:		Rad 19:
	</syntaxhighlight>		</syntaxhighlight>

	Svårare än så är det inte. (Äldre versioner av HTML hade långa, krångliga varianter av <code>doctype</code>, men man beslöt sig att förenkla detta rejält ~~inför~~ HTML5.)		Svårare än så är det inte. (Äldre versioner av HTML hade långa, krångliga varianter av <code>doctype</code>, men man beslöt sig att förenkla detta rejält i HTML5.)

	<div class="well well-meadow">		<div class="well well-meadow">
	Anledningen att <code>DOCTYPE</code> ser lite annorlunda ut är att det faktiskt inte är en egentlig HTML-tagg. Den är ett arv ifrån språket SGML. Vilket kan ses som ~~rötterna~~ till HTML. Dock är inte HTML kompatibelt med SGML längre. Den enda kvarlevan är <code>doctype</code>.		Anledningen att <code>DOCTYPE</code> ser lite annorlunda ut är att det faktiskt inte är en egentlig HTML-tagg. Den är ett arv ifrån språket SGML. Vilket kan ses som en förfader till HTML. Dock är inte HTML kompatibelt med SGML längre. Den enda kvarlevan är <code>doctype</code>.
	</div><!-- end well -->		</div><!-- end well -->

Rad 30:		Rad 30:

	== <code><[[html-tagg\|html]]></code> ==		== <code><[[html-tagg\|html]]></code> ==
	Den första, riktiga [[tagg]]en vi måste ~~lära oss~~ är <code><[[html-tagg\|html]]></code>. Detta är en inledande [[tagg]] som talar om för webbläsaren var [[HTML]]-innehållet börjar. [[Tagg]]en ska sitta före alla andra [[tagg]]ar, förutom <code>[[doctype]]</code>~~, och dess motsvarande~~ [[~~sluttagg~~]] ska ska ~~sitta som~~ den sista [[sluttagg]]en i dokumentet.		Den första, riktiga [[tagg]]en vi måste ha med är <code><[[html-tagg\|html]]></code>. Detta är en inledande [[tagg]] som talar om för webbläsaren var [[HTML]]-innehållet börjar. [[Tagg]]en ska sitta före alla andra [[tagg]]ar, förutom <code>[[doctype]]</code>. Sluttaggen <code></[[html-tagg\|html]]></code> ska ska vara den sista [[sluttagg]]en i dokumentet, eftersom den "talar om" att det är slut på [[HTML]]-koden.
	<div class="well well-danger">		<div class="well well-danger">
	Det får endast förekomma ett <code>[[HTML]]</code>-element i varje webbdokument. Det enda möjliga undantaget där man har flera <code>[[HTML]]</code>-element i en webbsida är när man inkluderar en annan sida via <code>[[iframe]]</code>. Detta är dock ett specialfall där webbläsaren ser den inkluderade sidan som ett helt separat HTML-dokument (vilket det också är).		Det får endast förekomma ett <code>[[HTML]]</code>-element i varje webbdokument. Det enda möjliga undantaget där man har flera <code>[[HTML]]</code>-element i en webbsida är när man inkluderar en annan sida via <code>[[iframe]]</code>. Detta är dock ett specialfall där webbläsaren ser den inkluderade sidan som ett helt separat HTML-dokument (vilket det också är).

PGJ den 6 augusti 2024 kl. 14.28

2024-08-06T14:28:21Z

← Äldre version		Versionen från 6 augusti 2024 kl. 14.28
Rad 11:		Rad 11:

	== [[doctype\|<!doctype html>]] ==		== [[doctype\|<!doctype html>]] ==
	Det ~~finns en~~ första grej som man måste ange i början av varje webbdokument. Det är den så kallade ”<code>[[doctype]]</code>”, vilket är en förkortning för engelskans ”Document Type” eller dokumenttyp. Denna tjänar som en indikation på vilken typ av dokument det handlar om, samt vilken [[HTML]]-[[standard]] som används i dokumentet. Detta gör att webbläsaren kan hantera alla [[tagg]]ar i ditt webbdokument på ett korrekt vis.		Det här är den första grej som man måste ange i början av varje webbdokument. Det är den så kallade ”<code>[[doctype]]</code>”, vilket är en förkortning för engelskans ”Document Type” eller dokumenttyp. Denna tjänar som en indikation på vilken typ av dokument det handlar om, samt vilken [[HTML]]-[[standard]] som används i dokumentet. Detta gör att webbläsaren kan hantera alla [[tagg]]ar i ditt webbdokument på ett korrekt vis.

	<code>[[doctype]]</code> ska anges allra först i ditt dokument, innan du använder dig av någon [[tagg]]. Den har lite speciellt utseende som skiljer sig ifrån [[HTML]]-[[tagg]]arna och det finns heller ingen [[sluttagg]] för den. För [[HTML5]] är det väldigt enkelt att ange <code>[[doctype]]</code>, man skriver nämligen så här:		<code>[[doctype]]</code> ska anges allra först i ditt dokument, innan du använder dig av någon [[tagg]]. Den har lite speciellt utseende som skiljer sig ifrån [[HTML]]-[[tagg]]arna och det finns heller ingen [[sluttagg]] för den. För [[HTML5]] är det väldigt enkelt att ange <code>[[doctype]]</code>, man skriver nämligen så här:

PGJ den 31 oktober 2020 kl. 13.03

2020-10-31T13:03:00Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.03
Rad 15:		Rad 15:
	<code>[[doctype]]</code> ska anges allra först i ditt dokument, innan du använder dig av någon [[tagg]]. Den har lite speciellt utseende som skiljer sig ifrån [[HTML]]-[[tagg]]arna och det finns heller ingen [[sluttagg]] för den. För [[HTML5]] är det väldigt enkelt att ange <code>[[doctype]]</code>, man skriver nämligen så här:		<code>[[doctype]]</code> ska anges allra först i ditt dokument, innan du använder dig av någon [[tagg]]. Den har lite speciellt utseende som skiljer sig ifrån [[HTML]]-[[tagg]]arna och det finns heller ingen [[sluttagg]] för den. För [[HTML5]] är det väldigt enkelt att ange <code>[[doctype]]</code>, man skriver nämligen så här:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<!DOCTYPE html>		<!DOCTYPE html>
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Svårare än så är det inte. (Äldre versioner av HTML hade långa, krångliga varianter av <code>doctype</code>, men man beslöt sig att förenkla detta rejält inför HTML5.)		Svårare än så är det inte. (Äldre versioner av HTML hade långa, krångliga varianter av <code>doctype</code>, men man beslöt sig att förenkla detta rejält inför HTML5.)
Rad 89:		Rad 87:
	För att ange [[UTF-8]] i vårt webbdokument, skriver vi:		För att ange [[UTF-8]] i vårt webbdokument, skriver vi:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<meta charset=”utf-8”>		<meta charset=”utf-8”>
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Vi anger då att det är ett <code>[[meta]]</code>-element och vi anger att vi vill sätt [[attribut]]et <code>charset</code>. Det senare är en förkortning av engelskans ”character set”, eller teckenuppsättning.		Vi anger då att det är ett <code>[[meta]]</code>-element och vi anger att vi vill sätt [[attribut]]et <code>charset</code>. Det senare är en förkortning av engelskans ”character set”, eller teckenuppsättning.

PGJ: /* <h1> */

2019-08-04T07:26:44Z

<h1>

← Äldre version		Versionen från 4 augusti 2019 kl. 07.26
Rad 111:		Rad 111:
	Även om vi angivit en titel i vårat <code>[[head]]</code>-element, så vill vi oftast ha en titel som syns även i själva sidan (och inte enbart på fliken eller fönstret). För överskrifter eller huvudrubriker använder vi oss av <code>[[hx\|h1]]</code>-taggen. ”H” står i detta fall för engelskans ”header”, eller rubrik på svenska. Siffran som följer efter talar om vilken rubriknivå det handlar om. Det finns sex möjliga rubriknivåer att tillgå, dvs; <code><[[hx\|h1]]></code>, <code><[[hx\|h2]]></code>, <code><[[hx\|h3]]></code>, <code><[[hx\|h4]]></code>, <code><[[hx\|h5]]></code> och <code><[[hx\|h6]]></code>. Har du jobbat med något ordbehandlingsprogram och använt deras stilmallar är rubriknivåer säkert inget nytt koncept för dig.		Även om vi angivit en titel i vårat <code>[[head]]</code>-element, så vill vi oftast ha en titel som syns även i själva sidan (och inte enbart på fliken eller fönstret). För överskrifter eller huvudrubriker använder vi oss av <code>[[hx\|h1]]</code>-taggen. ”H” står i detta fall för engelskans ”header”, eller rubrik på svenska. Siffran som följer efter talar om vilken rubriknivå det handlar om. Det finns sex möjliga rubriknivåer att tillgå, dvs; <code><[[hx\|h1]]></code>, <code><[[hx\|h2]]></code>, <code><[[hx\|h3]]></code>, <code><[[hx\|h4]]></code>, <code><[[hx\|h5]]></code> och <code><[[hx\|h6]]></code>. Har du jobbat med något ordbehandlingsprogram och använt deras stilmallar är rubriknivåer säkert inget nytt koncept för dig.

	Rubrikerna ska användas i stigande ordning och de ska förekomma i en konsekvent serie. Vi ska t.ex. aldrig ange en <code><[[hx\|h2]]></code> utan att ha en <code><[[hx\|h1]]></code>. Inte heller ska vi hoppa över någon rubriknivå, t.ex. att gå ifrån <code><[[hx\|h2]]></code> direkt till <code><[[hx\|h4]]></code>. Rubriknivåerna bygger upp en logisk struktur ~~på vårt~~ dokument och vi kan lätt se vilka underrubriker som tillhör respektive huvudrubriker, precis såsom du bygger upp en logisk struktur då du skriver en uppsats.		Rubrikerna ska användas i stigande ordning och de ska förekomma i en konsekvent serie. Vi ska t.ex. aldrig ange en <code><[[hx\|h2]]></code> utan att ha en <code><[[hx\|h1]]></code>. Inte heller ska vi hoppa över någon rubriknivå, t.ex. att gå ifrån <code><[[hx\|h2]]></code> direkt till <code><[[hx\|h4]]></code>. Rubriknivåerna bygger upp en logisk struktur för vårat dokument och vi kan lätt se vilka underrubriker som tillhör respektive huvudrubriker, precis såsom du bygger upp en logisk struktur då du skriver en uppsats.

	<code>[[hx\|H1]]</code>-elementet är lite speciellt. Tidigare fick det enbart förekomma en gång per [[HTML]]-dokument. Numera, i och med [[HTML5]], får det dock användas mer flitigt. Allt material som är helt avskilt ifrån övrigt material kan ha en egen <code>[[hx\|h1]]</code>-rubrik. Den kan till exempel användas i sidhuvud, sidfot, underartiklar eller i en egen sektion.		<code>[[hx\|H1]]</code>-elementet är lite speciellt. Tidigare fick det enbart förekomma en gång per [[HTML]]-dokument. Numera, i och med [[HTML5]], får det dock användas mer flitigt. Allt material som är helt avskilt ifrån övrigt material kan ha en egen <code>[[hx\|h1]]</code>-rubrik. Den kan till exempel användas i sidhuvud, sidfot, underartiklar eller i en egen sektion.

PGJ: /* <body> */

2019-08-04T07:25:25Z

<body>

← Äldre version		Versionen från 4 augusti 2019 kl. 07.25
Rad 102:		Rad 102:

	== <code><[[body]]></code> ==		== <code><[[body]]></code> ==
	Nu har vi lämnat <code>[[head]]</code>-elementet och det är dag för nästa viktiga [[tagg]], vilken är <code><[[body]]></code>. Allt i detta [[element]] är själva sid-kroppen. Här samlas allt det innehåll som ska visas på sidan. Så gott som alla [[element]] som definieras innanför <code><[[body]]></code> styr på något vis dokumentets struktur och följaktligen även hur det ska återges. Man skulle kunna säga att <code>[[body]]</code>-~~elements~~ innehåll är själva sidan, i alla fall den visuella delen. Så gott som alla [[HTML]]-[[tagg]]ar går att använda inuti <code>[[body]]</code>, förutom ett litet fåtal som enbart ska användas i <code>[[head]]</code>-elementet.		Nu har vi lämnat <code>[[head]]</code>-elementet och det är dag för nästa viktiga [[tagg]], vilken är <code><[[body]]></code>. Allt i detta [[element]] är själva sid-kroppen. Här samlas allt det innehåll som ska visas på sidan. Så gott som alla [[element]] som definieras innanför <code><[[body]]></code> styr på något vis dokumentets struktur och följaktligen även hur det ska återges. Man skulle kunna säga att <code>[[body]]</code>-elementets innehåll är själva sidan, i alla fall den visuella delen. Så gott som alla [[HTML]]-[[tagg]]ar går att använda inuti <code>[[body]]</code>, förutom ett litet fåtal som enbart ska användas i <code>[[head]]</code>-elementet.

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

PGJ: /* <title> */

2019-08-03T11:14:36Z

<title>

← Äldre version		Versionen från 3 augusti 2019 kl. 11.14
Rad 57:		Rad 57:

	== <code><[[title]]></code> ==		== <code><[[title]]></code> ==
	<code>[[head]]</code>-elementet har en undertagg som är visuell, dvs den kommer att visas för slutanvändaren. Det är taggen ”<code><[[title]]></code>”~~, det vill säga titeln på sidan~~. Titeln på sidan kommer att visas antingen som ~~titel~~ på ~~webbläsarens fönster~~ eller som namnet på en flik i webbläsaren. En bra titel gör det lättare för användaren att navigera bland flikarna i dennes webbläsare.		<code>[[head]]</code>-elementet har en undertagg som är visuell, dvs den kommer att visas för slutanvändaren. Det är taggen ”<code><[[title]]></code>”. Vilket alltså är sidans namn/titel. Titeln på sidan kommer att visas antingen som namnet på ett webbläsarfönster eller som namnet på en flik i webbläsaren. En bra titel gör det lättare för användaren att navigera bland flikarna i dennes webbläsare.

	Titeln visas inte bara i webbläsaren, den är även grunden för det namn väljas när användaren skapar ett bokmärke till ~~din sida~~. Återigen är det en god vana att ange en bra titel som ger ett vettigt grundnamn för bokmärket. På så vis får användaren ett bokmärke som är lätt att identifiera, utan att behöva redigera bokmärkesnamnet.		Titeln visas inte bara i webbläsaren, den är även grunden för det namn väljas när användaren skapar ett bokmärke till sidan. Återigen är det en god vana att ange en bra titel som ger ett vettigt grundnamn för bokmärket. På så vis får användaren ett bokmärke som är lätt att identifiera, utan att behöva redigera bokmärkesnamnet.

	Det är alltså viktigt att välja sidnamn på ett bra sätt.		Det är alltså viktigt att välja sidnamn på ett bra sätt.
Rad 69:		Rad 69:
	* När sidnamnet visas på en flik så kommer det ofta att klippas av mitt i. Desto fler flikar man har, desto mindre blir flikytan där namnet ska visas. Vill man att det ska vara lätt hitta rätt flik, gäller det alltså att ha ett kort och kärnfullt namn.		* När sidnamnet visas på en flik så kommer det ofta att klippas av mitt i. Desto fler flikar man har, desto mindre blir flikytan där namnet ska visas. Vill man att det ska vara lätt hitta rätt flik, gäller det alltså att ha ett kort och kärnfullt namn.

	* När användaren skapar ett bokmärke, utgår webbläsaren oftast ifrån sidans titel som namn för bokmärket. Är titeln för lång, kan det hända att bokmärkesnamnet kapas av mitt i. Står det då inte någonting med mycket informationsinnehåll, är chansen liten att användaren kommer att komma ihåg vad sidan handlade om.		* När användaren skapar ett bokmärke, utgår webbläsaren oftast ifrån sidans titel som namn för bokmärket. Om titeln är för lång, kan det hända att bokmärkesnamnet kapas av mitt i. Står det då inte någonting med mycket informationsinnehåll, är chansen liten att användaren kommer att komma ihåg vad sidan handlade om.

	Ett vanligt fel är att döpa sin sida till något i stil med, ”Välkommen till min fin, fina sida”. Eftersom det är så vanligt med frasen ”Välkommen”, är chansen stor att användaren får en drös av flikar där det bara syns ”Välkommen” eller, ännu värre, en massa bokmärken där det bara står ”Välkommen”.		Ett vanligt fel är att döpa sin sida till något i stil med, ”Välkommen till min fin, fina sida”. Eftersom det är så vanligt med frasen ”Välkommen”, är chansen stor att användaren får en drös av flikar där det bara syns ”Välkommen” eller, ännu värre, en massa bokmärken där det bara står ”Välkommen”.
Rad 79:		Rad 79:
	Titeln kan även vara viktig för så kallad [[SEO]] – eller [[Search Engine Optimization]]. Detta innebär att man försöker optimera sidan så att sidan hamnar så tidigt som möjligt bland sökresultaten på söksidor, såsom Google. Att hamna bland de första sökresultaten innebär att det är mycket större chans att folk kommer att besöka sidan. De flesta vill ju ha så många besökare som möjligt på sin sida – inte minst om man har finansiell vinning av besökare, kanske genom att visa reklam på sidan eller för att man försöker sälja en produkt av något slag.		Titeln kan även vara viktig för så kallad [[SEO]] – eller [[Search Engine Optimization]]. Detta innebär att man försöker optimera sidan så att sidan hamnar så tidigt som möjligt bland sökresultaten på söksidor, såsom Google. Att hamna bland de första sökresultaten innebär att det är mycket större chans att folk kommer att besöka sidan. De flesta vill ju ha så många besökare som möjligt på sin sida – inte minst om man har finansiell vinning av besökare, kanske genom att visa reklam på sidan eller för att man försöker sälja en produkt av något slag.

	Så, redan här, där vi har den första [[tagg]]en där du kan sätta något eget innehåll, ser man att man måste tänka sig för innan man skapar sin webbplats. Det är inte bara att sätta igång och börja tok-koda, utan man måste planera och tänka sig för i förväg. Mycket förarbete och planering, innan själva kodandet, är en bra metodik som man tjänar på i längden!		Så, redan här, där vi har den första [[tagg]]en där du kan sätta något eget innehåll, ser man att man måste tänka sig för innan man skapar sin webbplats. Det är inte bara att sätta igång och börja tok-koda, utan man måste planera och tänka sig för redan i förväg. Mycket förarbete och planering, innan själva kodandet, är en bra metodik som man tjänar på i längden!
	</div><!-- end well -->		</div><!-- end well -->

PGJ: /* <title> */

2019-08-03T11:08:58Z

<title>

← Äldre version		Versionen från 3 augusti 2019 kl. 11.08
Rad 57:		Rad 57:

	== <code><[[title]]></code> ==		== <code><[[title]]></code> ==
	<code>[[head]]</code>-elementet har ~~dock~~ en undertagg som är visuell, dvs den kommer att visas för slutanvändaren. Det är taggen ”<code><[[title]]></code>”, det vill säga titeln på sidan. Titeln på sidan kommer att visas antingen som titel på webbläsarens fönster eller som namnet på en flik i webbläsaren. En bra titel gör det lättare för användaren att navigera bland flikarna i dennes webbläsare.		<code>[[head]]</code>-elementet har en undertagg som är visuell, dvs den kommer att visas för slutanvändaren. Det är taggen ”<code><[[title]]></code>”, det vill säga titeln på sidan. Titeln på sidan kommer att visas antingen som titel på webbläsarens fönster eller som namnet på en flik i webbläsaren. En bra titel gör det lättare för användaren att navigera bland flikarna i dennes webbläsare.

	Titeln visas inte bara i webbläsaren, den är även grunden för det namn väljas när användaren skapar ett bokmärke till din sida. Återigen är det en god vana att ange en bra titel som ger ett vettigt grundnamn för bokmärket. På så vis får användaren ett bokmärke som är lätt att identifiera, utan att behöva redigera bokmärkesnamnet.		Titeln visas inte bara i webbläsaren, den är även grunden för det namn väljas när användaren skapar ett bokmärke till din sida. Återigen är det en god vana att ange en bra titel som ger ett vettigt grundnamn för bokmärket. På så vis får användaren ett bokmärke som är lätt att identifiera, utan att behöva redigera bokmärkesnamnet.

PGJ: /* <head> */

2019-08-03T11:08:39Z

<head>

← Äldre version		Versionen från 3 augusti 2019 kl. 11.08
Rad 49:		Rad 49:
	Inom [[tagg]]en <code><[[head]]></code> placerar man så kallad [[metadata]] om dokumentet. Det är den data som beskriver dokumentet och dess innehåll. Det här är information som är till för webbläsaren/sökmotorer och liknande, snarare än att det är till för slutanvändaren. Sånt som man kan hitta här är t.ex.; vilken [[teckenkodning]] som används på sidan, länkar till andra dokument som krävs för att visa sidan korrekt (såsom [[CSS]]-filer), namnet på den som skapat sidan, sökord, osv.		Inom [[tagg]]en <code><[[head]]></code> placerar man så kallad [[metadata]] om dokumentet. Det är den data som beskriver dokumentet och dess innehåll. Det här är information som är till för webbläsaren/sökmotorer och liknande, snarare än att det är till för slutanvändaren. Sånt som man kan hitta här är t.ex.; vilken [[teckenkodning]] som används på sidan, länkar till andra dokument som krävs för att visa sidan korrekt (såsom [[CSS]]-filer), namnet på den som skapat sidan, sökord, osv.

	Det finns några [[tagg]]ar som enbart får förekomma inom <code>[[head]]</code>-elementet. Så gott som alla undertaggar i <code>[[head]]</code>-element är icke-visuella, dvs de innehåller ingenting som kommer att visas för slutanvändaren när sidan skapas. Så här i början behöver vi inte bry oss i de flesta av de möjliga undertaggarna.		Det finns några [[tagg]]ar som enbart får förekomma inom <code>[[head]]</code>-elementet. Så gott som alla undertaggar i <code>[[head]]</code>-element är icke-visuella, dvs de innehåller ingenting som kommer att visas för slutanvändaren när sidan skapas.

			Så här i början behöver vi inte bry oss i de flesta av de möjliga undertaggarna som kan förekomma i <code>head</code>.
	<div class="well well-danger">		<div class="well well-danger">
	Det får bara finnas ett [[head]]-element i varje dokument.		Det får bara finnas ett [[head]]-element i varje dokument.

PGJ: /* <html> */

2019-08-03T11:06:54Z

<html>

← Äldre version		Versionen från 3 augusti 2019 kl. 11.06
Rad 34:		Rad 34:
	Den första, riktiga [[tagg]]en vi måste lära oss är <code><[[html-tagg\|html]]></code>. Detta är en inledande [[tagg]] som talar om för webbläsaren var [[HTML]]-innehållet börjar. [[Tagg]]en ska sitta före alla andra [[tagg]]ar, förutom <code>[[doctype]]</code>, och dess motsvarande [[sluttagg]] ska ska sitta som den sista [[sluttagg]]en i dokumentet.		Den första, riktiga [[tagg]]en vi måste lära oss är <code><[[html-tagg\|html]]></code>. Detta är en inledande [[tagg]] som talar om för webbläsaren var [[HTML]]-innehållet börjar. [[Tagg]]en ska sitta före alla andra [[tagg]]ar, förutom <code>[[doctype]]</code>, och dess motsvarande [[sluttagg]] ska ska sitta som den sista [[sluttagg]]en i dokumentet.
	<div class="well well-danger">		<div class="well well-danger">
	Det får endast förekomma ett <code>[[HTML]]</code>-element i varje webbdokument. Det enda möjliga undantaget där man har flera <code>[[HTML]]</code>-element i en webbsida är när man inkluderar en annan sida via <code>[[iframe]]</code>. Detta är dock ett specialfall där webbläsaren ser den inkluderade sidan som ett helt separat HTML-dokument (vilket det ju är).		Det får endast förekomma ett <code>[[HTML]]</code>-element i varje webbdokument. Det enda möjliga undantaget där man har flera <code>[[HTML]]</code>-element i en webbsida är när man inkluderar en annan sida via <code>[[iframe]]</code>. Detta är dock ett specialfall där webbläsaren ser den inkluderade sidan som ett helt separat HTML-dokument (vilket det också är).

	Det finns några ~~till~~ taggar som bara får förekomma en gång i varje webbdokument. De flesta taggar får dock användas flera gånger i samma sida.		Det finns några fler taggar som bara får förekomma en gång i varje webbdokument. De flesta taggar får dock användas flera gånger i samma sida.
	</div>		</div>

PGJ: /* <!doctype html> */

2019-08-03T11:04:34Z

<!doctype html>

← Äldre version		Versionen från 3 augusti 2019 kl. 11.04
Rad 11:		Rad 11:

	== [[doctype\|<!doctype html>]] ==		== [[doctype\|<!doctype html>]] ==
	Det finns en första grej som man måste ange i början av varje webbdokument. Det är den så kallade ”[[doctype]]”, vilket är en förkortning för engelskans ”Document Type” eller dokumenttyp. Denna tjänar som en indikation på vilken typ av dokument det handlar om samt vilken [[HTML]]-[[standard]] som används i dokumentet. Detta gör att webbläsaren kan hantera alla [[tagg]]ar i ditt webbdokument på ett korrekt vis.		Det finns en första grej som man måste ange i början av varje webbdokument. Det är den så kallade ”<code>[[doctype]]</code>”, vilket är en förkortning för engelskans ”Document Type” eller dokumenttyp. Denna tjänar som en indikation på vilken typ av dokument det handlar om, samt vilken [[HTML]]-[[standard]] som används i dokumentet. Detta gör att webbläsaren kan hantera alla [[tagg]]ar i ditt webbdokument på ett korrekt vis.

	[[~~Doctype~~]] ska anges allra först i ditt dokument, innan du använder dig av någon [[tagg]]. Den har lite speciellt utseende som skiljer sig ifrån [[HTML]]-[[tagg]]arna och det finns heller ingen [[sluttagg]] för den. För [[HTML5]] är det väldigt enkelt att ange [[doctype]], man skriver nämligen så här:		<code>[[doctype]]</code> ska anges allra först i ditt dokument, innan du använder dig av någon [[tagg]]. Den har lite speciellt utseende som skiljer sig ifrån [[HTML]]-[[tagg]]arna och det finns heller ingen [[sluttagg]] för den. För [[HTML5]] är det väldigt enkelt att ange <code>[[doctype]]</code>, man skriver nämligen så här:

	<div class="well well-cyanide-light">		<div class="well well-cyanide-light">
Rad 21:		Rad 21:
	</div>		</div>

	Svårare än så är det inte. (Äldre versioner av HTML hade långa, krångliga varianter av doctype, men man beslöt sig att förenkla detta rejält inför HTML5.)		Svårare än så är det inte. (Äldre versioner av HTML hade långa, krångliga varianter av <code>doctype</code>, men man beslöt sig att förenkla detta rejält inför HTML5.)

	<div class="well well-meadow">		<div class="well well-meadow">
	Anledningen att <code>DOCTYPE</code> ser lite annorlunda ut är att det faktiskt inte är en egentlig HTML-tagg. Den är ett arv ifrån språket SGML. Vilket kan ses som rötterna till HTML. Dock är inte HTML kompatibelt med SGML längre. Den enda kvarlevan är <code>~~DOCTYPE~~</code>.		Anledningen att <code>DOCTYPE</code> ser lite annorlunda ut är att det faktiskt inte är en egentlig HTML-tagg. Den är ett arv ifrån språket SGML. Vilket kan ses som rötterna till HTML. Dock är inte HTML kompatibelt med SGML längre. Den enda kvarlevan är <code>doctype</code>.
	</div><!-- end well -->		</div><!-- end well -->

← Äldre version		Versionen från 4 augusti 2019 kl. 07.26
Rad 111:		Rad 111:
	Även om vi angivit en titel i vårat <code>[[head]]</code>-element, så vill vi oftast ha en titel som syns även i själva sidan (och inte enbart på fliken eller fönstret). För överskrifter eller huvudrubriker använder vi oss av <code>[[hx\|h1]]</code>-taggen. ”H” står i detta fall för engelskans ”header”, eller rubrik på svenska. Siffran som följer efter talar om vilken rubriknivå det handlar om. Det finns sex möjliga rubriknivåer att tillgå, dvs; <code><[[hx\|h1]]></code>, <code><[[hx\|h2]]></code>, <code><[[hx\|h3]]></code>, <code><[[hx\|h4]]></code>, <code><[[hx\|h5]]></code> och <code><[[hx\|h6]]></code>. Har du jobbat med något ordbehandlingsprogram och använt deras stilmallar är rubriknivåer säkert inget nytt koncept för dig.		Även om vi angivit en titel i vårat <code>[[head]]</code>-element, så vill vi oftast ha en titel som syns även i själva sidan (och inte enbart på fliken eller fönstret). För överskrifter eller huvudrubriker använder vi oss av <code>[[hx\|h1]]</code>-taggen. ”H” står i detta fall för engelskans ”header”, eller rubrik på svenska. Siffran som följer efter talar om vilken rubriknivå det handlar om. Det finns sex möjliga rubriknivåer att tillgå, dvs; <code><[[hx\|h1]]></code>, <code><[[hx\|h2]]></code>, <code><[[hx\|h3]]></code>, <code><[[hx\|h4]]></code>, <code><[[hx\|h5]]></code> och <code><[[hx\|h6]]></code>. Har du jobbat med något ordbehandlingsprogram och använt deras stilmallar är rubriknivåer säkert inget nytt koncept för dig.

	Rubrikerna ska användas i stigande ordning och de ska förekomma i en konsekvent serie. Vi ska t.ex. aldrig ange en <code><[[hx\|h2]]></code> utan att ha en <code><[[hx\|h1]]></code>. Inte heller ska vi hoppa över någon rubriknivå, t.ex. att gå ifrån <code><[[hx\|h2]]></code> direkt till <code><[[hx\|h4]]></code>. Rubriknivåerna bygger upp en logisk struktur ~~på vårt~~ dokument och vi kan lätt se vilka underrubriker som tillhör respektive huvudrubriker, precis såsom du bygger upp en logisk struktur då du skriver en uppsats.		Rubrikerna ska användas i stigande ordning och de ska förekomma i en konsekvent serie. Vi ska t.ex. aldrig ange en <code><[[hx\|h2]]></code> utan att ha en <code><[[hx\|h1]]></code>. Inte heller ska vi hoppa över någon rubriknivå, t.ex. att gå ifrån <code><[[hx\|h2]]></code> direkt till <code><[[hx\|h4]]></code>. Rubriknivåerna bygger upp en logisk struktur för vårat dokument och vi kan lätt se vilka underrubriker som tillhör respektive huvudrubriker, precis såsom du bygger upp en logisk struktur då du skriver en uppsats.

	<code>[[hx\|H1]]</code>-elementet är lite speciellt. Tidigare fick det enbart förekomma en gång per [[HTML]]-dokument. Numera, i och med [[HTML5]], får det dock användas mer flitigt. Allt material som är helt avskilt ifrån övrigt material kan ha en egen <code>[[hx\|h1]]</code>-rubrik. Den kan till exempel användas i sidhuvud, sidfot, underartiklar eller i en egen sektion.		<code>[[hx\|H1]]</code>-elementet är lite speciellt. Tidigare fick det enbart förekomma en gång per [[HTML]]-dokument. Numera, i och med [[HTML5]], får det dock användas mer flitigt. Allt material som är helt avskilt ifrån övrigt material kan ha en egen <code>[[hx\|h1]]</code>-rubrik. Den kan till exempel användas i sidhuvud, sidfot, underartiklar eller i en egen sektion.