51 besökare och 0 kunder online

Webdesign och HTML

 

Dokumenttyper - doctypes - DTD

webbläsaren läser HTML-dokumentet och tolkar koden för presentation av innehåll och layout. Om du glömt att avsluta öppnade märken, använt kod som inte följer W3C:s standard eller gjort rena felskrivningar i koden så försöker webbläsaren ändå visa sidorna på bästa sätt och ignorerar alltså dina felaktigheter. Snällt av webbläsaren men inte bra för utvecklingen av framtida webbstandards med andra ord. webbläsarna försöker tolka koden bakåtkompatibelt så att även äldre versioner av webbläsaren ska förstå innehållet. Användning av visuella HTML-editorer skapar ofta mer kod än vad som behövs och använder egna tillägg till W3C:s rekommendationer, läs mer i guiden W3C och webbstandards »

En metod för att underlätta för webbläsaren och dessutom göra dina sidor snabbare är att använda en Doctype-deklaration - DTD (Document type declaration). Här är en lista över rekommenderade doctypes från W3C: http://www.w3.org/QA/2002/04/valid-dtd-list.html Öppnas i nytt fönster (Open in new window)

I början av ditt dokument talar du om för webbläsaren vilken dokumenttyp du använder:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Acme AB</title>
</head>
<body>
<p>Välkommen till företaget...</p>
</body>
</html>

Det finns i huvudsak tre Doctype-deklarationer: Strict - Transitional - Frameset och du anger i doctypen om du använder HTML eller XHTML

Strict

Strict innebär att nästan all formatering sker med CSS och ingen formatering bör ske i övrig kod. Här gäller alltså strikt separering av innehåll och layout. Om din kod validerar enligt W3C bör du använda denna doctype (läs om W3C och validering » )

Strict HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Avsnittet: http://www.w3.org/TR/html4/strict.dtd är egentligen en länk till W3C:s egna riktlinjer för denna doctype. Observera att det finns en viss risk att adressen ändras av W3C i framtiden och om så sker så måste du också ändra informationen i dina egna dokument...

Strict XHTML:

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

 

Transitional

Transitional kan beskrivas som en övergång mellan den strikta separeringen av innehåll och layout och de tidigare standarderna. Beskrivningen innehåller förutom allt som är godkänd enligt Strict även äldre element. Formatering direkt i sidorna är tillåten. Tillägg som bara stöds av vissa webbläsare är normalt inte tillåtna. Om din kod inte validerar enligt W3C bör du använda denna doctype.

Transitional HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Transitional XHTML:

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

 

Frameset

Doctype-deklarationen för Frameset innehåller förutom allt som är godkänt enligt Transitional även elementen för frames:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Om du använder frames anger du denna doctype i det dokument som innehåller beskrivningen av ditt frameset. Använd Strict eller Transitional i dina övriga dokument.

 

 

Standard mode och Quirks mode

Om du använt en Doctype-deklaration och den dessutom är korrekt enligt innehållet i din kod så väljer webbläsaren sitt standardläge "Standard mode" och sidan ska då presenteras enligt gällande regler för respektive doctype. Detta är alltså det optimala läget som i längden främjar framtida webbstandards.

Om angiven doctype däremot inte stämmer mot innehållet i koden går webbläsaren över i "quirks mode" vilket innebär att webbläsaren bryter mot W3C:s rekommendationer och visar sidorna enligt sina egna metoder för bla bakåtkompatibilitet. Olika webbläsare har olika quirks mode och kan alltså visa sidorna på olika sätt. Om ingen Doctype-deklaration alls använts så används automatiskt quirks mode. Begreppet "quirks" kan liknas vid olika "klurigheter" som egentligen betyder annat än utlovat...

Läs mer om olika webbläsare i guiden webbläsare och säkerhet »

Läs mer om val av rätt doctype i guiden CSS - positionering »

TIPS! Vissa funktioner som inte följer webbstandards fungerar inte om du anger länken till W3C:s dokument enligt ovan. Vill du ändå använda funktionerna kan du "gå halva vägen" och bara ange själva Doctype-deklaration men hoppa över raden med länken till W3C:

Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


Dina funktioner kan då fungera om webbläsaren går över i "quirks mode".

 

 

Information om XML och XHTML

XHTML 1.0 (Extensible Hyper Text Markup Language) är den standard som tar vid där HTML 4.01 slutar. HTML-standarden kommer alltså inte att uppdateras i sin nuvarande form i framtiden. Ett troligt scenario är att flera nya "moduler" utvecklas vid sidan av XHTML för specifika ändamål som mobila enheter, handdatorer, mobiltelefoner mm.

Historik: SGML - HTML - XML - XHTML

SGML (Standard Generalized Markup Language) utvecklades av "International Organization for Standards" (ISO) redan i mitten av 80-talet. SGML ger själv inga större möjligheter till formatering men specificerar reglerna för hur märken och element kan användas för formatering på olika sätt. SGML är ett stort och komplext system som ännu inte fått någon större utbredning på persondatorer men används i elektronisk dokumenthantering. HTML är däremot baserat på reglerna från SGML och är egentligen ett av flera exempel på sidbeskrivningssråk (markup language). HTML är det som har haft starkast anknytning till WWW och webbsidor.

XML (Extensible Markup Language) har också sitt ursrung i SGML. Målet med XML är att utföra uppgifter som HTML inte klarar och alltså på sikt helt ersätta nuvarande HTML-standarder. XML har utvecklats för att fungera med både SGML och HTML och passar till många områden som tex ordbehandlings- och kalkylprogram, databaser, ekonomisystem mm. XML är tänkt att vara helt oberoende av hård- och mjukvara.

XHTML är egentligen flera olika dokumenttyper och moduler som vidareutvecklar HTML 4 baserade på XML och de ska fungera i programvaror som hanterar XML och HTML. Nästa steg i utvecklingen av Internet är XHTML och genom att börja använda XHTML kan du dra nytta av fördelar med XML samtidigt som dina dokument blir båda framåt- och bakåtkompatibla. Dina dokument ska med andra ord fungera i både nya och äldre webbläsare.

 

inledning av XHTML-dokument, XML-deklaration

I praktiken är det XHTML (snarare än XML) som fungerar på webbsidor idag och övergången från HTML till XHTML är inte så komplicerad om du har bra koll på HTML sedan tidigare.

Den första raden i dokumentet kan vara en XML-deklaration som anger teckenkodning (läs mer i guiden Teckenkoder - charset » ) och XML-version. W3C rekommenderar att den finns med särskilt om annan teckenkod än Unicode används. Detta är dock inget krav och om det används kan det innebära att vissa webbläsare missförstår koden och visar all kod som text eller helt enkelt går in i "quirks mode" ».

OBS! Om du vet vilka webbläsare din målgrupp kommer att använda kan du använda XML-deklarationen men annars bör du hoppa över detta.

Här är exempel på XML-deklaration för teckenkodningen UTF-8:

<?xml version="1.0" encoding="UTF-8" ?>

Här är exempel på XML-deklaration för teckenkodningen ISO-8859-1:

<?xml version="1.0" encoding="ISO-8859-1"?>

 

Doctype för XHTML

Doctypes som kan användas för XHTML är:

Strict:

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


Transitional:

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


Frameset:

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

Se även listan över rekommenderade doctypes från W3C:
http://www.w3.org/QA/2002/04/valid-dtd-list.html Öppnas i nytt fönster (Open in new window)

 

Namespace för XHTML

I XML är det tillåtet att namnge egna element och därför måste du ange ange en sk namespace (namnrymd) för XHTML-dokumentet. Detta krävs för att webbläsaren ska förstå vilka språk som används eftersom XML tillåter att element och attribut hämtas från olika programspråk. För att de olika programmen ska kunna känna igen elementen på det sätt det ursprungligen var tänkt, även om samma attribut används på annat sätt av andra programmoduler, så används XML-namespace.

Ett exempel är märket <title> som i HTML endast får förekomma inom <head>:

<html>
<head><title>
Acme AB - företagsinformation</title></head>
<body>
Vårt företag informerar här om...</body>

XML tillåter däremot att samma märke <title> kan användas i andra sammanhang. I exemplet nedan avser märket inte rubriken eller namnet på sidan utan olika medarbetares yrkestitel i företaget:

<acme>
<huvudkontoret><title>
personalansvarig</title> Anna Persson</huvudkontoret>
<marknadsavdelningen><title>
copywriter</title> Jenny McKalls</marknadsavdelningen>
</acme>

För att ange gällande XML-namespace lägger du till följande rad till rotelementet <html>:

<html xmlns="http://www.w3.org/1999/xhtml">

Du kan även ange vilket språk som används:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 

Grundkoden för XHTML-dokumentet

När du angivit en doctype och XML-namespace och eventuellt en XML-deklaration kan du börja ange innehållet i ditt dokument. Så här kan ett minimalt dokument se ut:

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Acme AB</title></head>
<body>
<p>
Vårt företag informerar här om...</p>
</body>
</html>

Teckenkodningen anges i exemplet ovan inom <META> men om du vill använda en XML-deklaration kan du istället ange teckenkodningen där:

<?xml version="1.0" encoding="iso-8859-1"?>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Acme AB</title></head>
<body>
<p>
Vårt företag informerar här om...</p>
</body>
</html>

(läs mer om XML-deklaration i avsnittet ovan »)

 

 

Grundregler för bra XHTML-dokument

För att XML och XHTML ska fungera korrekt krävs att de är välutformade och följer vissa regler som inte var lika viktigt i HTML. Om dina dokument är felaktiga visas inte innehållet i dina sidor och webbläsaren ger ett felmeddelande. Här är några av kraven för ett XHTML-dokument:

1. Nästlade taggar (nested elements)

En regel som funnits hela tiden även för HTML men inte följts då vissa webbläsare ändå visat innehållet korrekt är nästlade taggar. Märken får inte överlappa varandra och här gäller att först öppnat märke avslutas sist:

Rätt:
<p><em>kursiv text...</em></p>

Fel:
<p><em>
kursiv text...</p></em>

Märken måste dessutom vara korrekt nästlade vilket innebär att ett stycke kan innehålla kursiv text men kursiv text kan inte innehålla ett stycke:

Rätt:
<p><em>kursiv text...</em></p>

Fel:
<em><p>
kursiv text...</p></em>

 

2. använd bara gemener - små bokstäver

Alla märken och attribut måste anges med små bokstäver - gemener (lower case) då XML är "case sensitive" och skiljer på tex <BODY> och <body>:

Rätt:
<html><body><p>Detta är ett stycke...</p></body></html>

Fel:
<HTML><BODY><P>Detta är ett stycke...</P></BODY></HTML>

 

3. Stäng alla öppnade märken

Alla öppnade taggar måste stängas korrekt. Använd alltså både start och slut i varje märke:

Rätt:
<p>Detta är ett stycke...</p>
<p>
och ett stycke till</p>
<p><em>
stycke med kursiv text</em></p>

Fel:
<p>
Detta är ett stycke...
<p>
och ett stycke till
<p><em>
stycke med kursiv text

 

4. Stäng även tomma märken

Tomma element som annars inte har ett slutmärke måste i XML avslutas. Ett tomt element saknar egentligt innehåll och markerar var tex en radbrytning <br> ska ske eller en bild <img> ska visas. Du kan avsluta märket med en sluttagg:

Rätt:
här är en radbrytning<br />
till denna rad som också bryts<br />
och här är en horisontell linje <hr />
före denna bild <img src="bild.gif" />

Fel:
här är en radbrytning<br>
till denna rad som också bryts<br>
och här är en horisontell linje <hr>
före denna bild <img src="bild.gif">

VIKTIGT! För att ditt XML-dokument ska vara bakåtkompatibelt och fungera i webbläsare som inte förstår XML måste du ha med ett blanksteg före snedstrecket:

Rätt: <br />
Fel: <br/>

Enligt W3C beror detta på att det finns brister i XML-stödet i flera webbläsare vilket medför att många XHTML-dokument levereras med MIME-typen "text/html" och hanteras då som HTML.

 

 

5. Värden för attribut måste skrivas inom citationstecken

Alla värden för attribut måste anges inom citationstecken. Detta gäller även numeriska värden:

Rätt:
<table width="50%" border="0" cellpadding="5" cellspacing="0">
<td valign="top" bgcolor="#cccccc">tabellcell</td>

Fel:
<table width=50% border=0 cellpadding=5 cellspacing=0>

<td valign=top bgcolor=#cccccc>
tabellcell</td>

 

6. Nästlade listor

Listelement i listor som innehåller en undernivå måste avslutas med </li> vilket inte varit ett krav i HTML:

Rätt:
<ul>
<li>
Kvartal 1
  <ul>
  <li>
Januari </li>
  <li>
Februari</li>
  </ul>
</li>
<li>
Kvartal 2
  <ul>
  <li>
April</li>
  <li>
Maj</li>
  </ul>
</li>
</ul>

Fel:
<ul>
<li>
Kvartal 1
  <ul>
  <li>
Januari </li>
  <li>
Februari</li>
  </ul>
<li>
Kvartal 2
  <ul>
  <li>
April</li>
  <li>
Maj</li>
  </ul>
</ul>

 

7. Attribut får inte förkortas

Det är vanligt att korta ned attribut i HTML för att snabba på kodning och överföringstid men detta är inte tillåtet i XML. Alla attribut måste tilldelas ett värde och får inte förkortas:

Rätt:
<input type="checkbox" id="svar" value="javisst" checked="checked">
<hr noshade="noshade"/>

Fel:

<input type="checkbox" id="svar" value="javisst" checked>
<hr noshade />

 

8. Attributet "id" ersätter "name"

HTML tillåter attributet name på märken som a - applet - frame - iframe - img - map men detta är inte tillåtet i XML. Istället ska attributet id användas. För bättre bakåtkompatibilitet kan du använda både name och id under en övergångsperiod:

Rätt:
<img src="logo.gif" id="logotype" />eller
<img src="
logo.gif" name="logotype" id="logotype" />

Fel:

<img src="
logo.gif" name="logotype" />

Observera att elementet <img> måste stängas i XML. Dessutom måste du ha ett blanksteg före snedstrecket (se punkt 4 ovan).

Läs mer om XHTML:
http://www.w3.org/MarkUp/2004/xhtml-faq Öppnas i nytt fönster (Open in new window)
http://www.w3.org/TR/xhtml1 Öppnas i nytt fönster (Open in new window)