kaxigt.com

Lektion 1 – nybörjare

Okej – eftersom du nu läser detta har du säkert funderingar om att våga ta steget över till att prova xhtml. Hjälp kanske du tänker – det verkar ju så svårt? Mja, det är faktiskt förhållandevis små förändringar som behöver göras för att få sin sida XHTML-kompatibel.

Eftersom Du också valde att komma hit till mig så ska jag på bästa sätt lotsa dig fram på vägen. Jag lovar att när vi har gått igenom det du först behöver veta – det vill säga grunderna i xhtml – så kommer du med all säkerhet ruska på huvudet och tänka: var det inte svårare?

Först granskar vi hur du hanterar din text och html-koder (rätt syntax och semantik), därefter tränger vi lite djupare ned i kodningar som kan styras av css. Efter det skriver vi om koder och javascript.

Sist ska vi se om din meta-definition är korrekt. I det ingår ett rätt gällande doctype. Eftersom du kan se det här som lektion 1 gör vi bara det mest grundläggande. Vartefter du sedan lär dig mer kommer du att ännu bättre kunna utveckla dina kunskaper.

Då sätter vi igång!

XHTML är en utbyggnad av HTML (en kombination av HTML och XML) och styrs därför utifrån en principiell logisk semantik – det innebär att man systematiskt placerar sina koder i en reglerad ordning (vilket man även bör göra i HTML).

Med semantik och syntax menas att det finns särskilda regler för hur man skriver sina koder, var man skriver dem, när man ska använda koderna, och att man använder rätt kod till rätt syfte och rätt ordning.

Samma systematik måste du ha när du granskar dessa koder därför ett enda litet fel i t ex början av sidan kommer få validatorn att reagera på att du har fler fel än vad du i själva verket har. Ett syntaxfel är när märkningen har blivit felaktig.

Därför är det viktigt att du lär dig hur du ska granska koden för att hitta eventuella syntaxfel. Detta kommer du att hjälpligt kunna klara av när vi är färdiga. Låt oss därför först kika på två typiskt semantiskt felaktiga exempel som ofta förekommer.

Du har kanske en hemsida och ska nu göra en häftig rubrik med underrubriker och länkar.

Exempel 1:

<div id="header">
<div id="rubrik"><p class="huvudrubrik">Min hemsida om rosor</p></div>
<div id="underrubrik"><p class="litenrubrik">Här får du läsa om olika arter</p></div>
<div id="links"><p><a href="rosor1.htm">stora rosor</a>, <a href="rosor2.htm">mellanstora rosor</a>, <a href="rosor3.htm">små rosor</a>, <a href="rosor4.htm">krukrosor</a></p></div>
</div>

Exempel 2:

<div id="header"><div class="rubrik">Min hemsida om rosor</div>
<div class="underrubrik">Här får du läsa om olika arter</div>
<p class="links"><a href="rosor1.htm">stora rosor</a>, <a href="rosor2.htm">mellanstora rosor</a>, <a href="rosor3.htm">små rosor</a>, <a href="rosor4.htm">krukrosor</a></p>
</div>

Om vi börjar med exempel 1 så är rubrikerna semantiskt inkorrekta. Korrekt semantik är då man använder rätt märken till rätt syfte! När man gör en rubrik ska man använda dess rätta märken och inte skapa speciella divblock som man sedan formaterar med css så att texten inuti dessa ser ut som rubriker.

En rubrik är just en rubrik och denna kan graderas i sex olika nivåer – från det största teckensnittet som är <h1> till det minsta teckensnittet som är <h6>.

Huvudrubriken borde i detta fall ha skrivits med <h1> utan att ha placerats i något divblock. Samma regel gäller naturligtvis underrubriken, den skulle ha skrivits med <h2> eller <h3> och inte placerats inuti ett divblock.

Rätt kodning hade därför sett ut så här:

<div id="header">
<h1>Min hemsida om rosor</h1>
<h2>Här får du läsa om olika arter</h2>
</div>

Exempel 2 visar också på en inkorrekt märkning av samma orsak som i exempel 1.

Varken divblock med ID eller class-attribut är semantiskt riktigt att använda för att skapa rubriker. Här skulle rubrikerna istället ha skrivits med <h1> respektive <h2>.

Dock kan man med css skapa en mer detaljerad utformning av rubrikerna genom att lägga till ett attribut i rubriken, exempelvis <h1 id=”rubrik1″> eller <h1 class=”rubrik1″>. Används ett ID kan man bara ha detta ID en gång per sida eftersom det räknas som ett egennamn, ett class-attribut däremot går att använda hur ofta man vill.

Det kan vara bra att veta.

Men länkarna då?
Förvisso går det alldeles utmärkt att placera länkarna i ett speciellt divblock, emellertid är det inte rekommendabelt att göra det som i båda exemplen eftersom länkarna inuti divblocket är placerade som en paragraf (p – stycke), dessutom saknar de title-attributet.

Semantiskt korrekt hade varit att göra en (in-line)lista som sedan formaterats av css.

Rätt syntax och semantisk kodning ser alltså ut så här:

<div id="header">
<h1>Min hemsida om rosor</h1>
<h2>Här får du läsa om olika arter</h2>
<ul>
<li><a href="rosor1.htm" title="stora rosor">stora rosor</a></li>
<li><a href="rosor2.htm" title="mellanstora rosor">mellanstora rosor</a></li>
<li><a href="rosor3.htm" title="små rosor">små rosor</a></li>
<li><a href="rosor4.htm" title="krukrosor">krukrosor</a></li>
</ul>
</div>

Syntax och märkning

Först en liten repetition.
Det får bara finnas 1 html, 1 head och 1 body i ett dokument. Kontrollera detta extra noga om ni använder någon form av wysiwyg-program.

Sedan måste hela koden skrivas ut med alla märken. Det fungerar alltså inte att enbart skriva ett inledningsmärke, ex <p> utan att sedan avsluta samma märkning. Alla sådana kodningsfel är grava syntaxfel.

Man kan aldrig utelämna vare sig < eller >
Se till att det första märket i sidhuvudet är <title>
Alla attribut och märken ska skrivas med gemener (små bokstäver). Dock är det inte nödvändigt för attributvärdena. Det ser ut så här <table summary=”blommor”/>
<tr>
<td>dina tabeller</td>
</tr>
</table>

Använder du tabeller till tabulardata?
Då bör du definiera tabellen genom att lägga till kodsnutten summary=”” i varje ny befintlig tabellkod som börjar med table, ex <table summary=”rostabell”>.

Hur du stylar dina tabeller kan du läsa i guiderna om CSS, men man bör inte göra det rätt i html-koden. Antingen har du en extern stilmall som du länkar till sidan, eller så skriver du in dina css-värden i <head> med följande märkning:

<style type="text/css"><!-- dina css-märken här --></style>

Till det absolut viktigaste på en hemsida!

Alla dokument måste ha en doctype deklaration – DTD. Det är nödvändigt för att en DTD talar om hur en webbsida är uppbyggd för webbläsaren och valideringsverktygen, samt vilka attribut och märken som då är tillåtna för den specifika sidan.

Denna deklaration lägger man in innan html-märket – det ska med andra ord vara det som står allra överst på webbsidan.

Det finns tre olika definitioner. En strict, en transitional (övergång) och en för frames.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Strict är som det låter – det mest striktaste doctype vad det gäller märkningen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Transitional (övergångsmässiga doctypes) används således vid “vanlig” xhtmlkodning, eller xhtml med viss html-inslag som exempelvis tabeller. Här kan du till viss del fortfarande använda de vanliga attributen i koderna men du måste naturligtvis göra dessa valida.

Använder du dig av ramar? Då ska du infoga detta doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Alla xhtml-dokument måste också ha något som heter name space-deklaration eller namnrymd. Enkelt uttryckt är det en lista över giltiga märken och attribut som används i dokumentet. Denna deklaration ger även möjligheten att lägga till nya märken och attribut om man behöver det.

Själva name space-deklarationen länkas in i din html-tagg:

<html xmlns="https://www.w3.org/1999/xhtml" charset="iso-8859-1"></html>

Namespace placeras omedelbart under själva doctype deklarationen på en sida som skrivs i xhtml. Men det räcker inte bara med detta utan vi måste också infoga ännu en meta-tagg i head för att berätta för webbläsarna att vi utgår från en västerländsk definition i våra dokument.

I det här fallet att vi kommer att använda bokstäverna å – ä – ö. Det gör vi med character encoding iso-8859-1.

<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />

Är du nyfiken på hur din sida validerar? Testa den här.