 |
Lär dig Xhtml |
1. Inledning
2. Skapa ett Xhtml-dokument
3. Regler för välutformade dokument
4. Validering
5. Grundkoden för en Xhtml-sida
1. Inledning
På den här sidan får du lära dig grunderna i Xhtml. Innan man kan lära sig det bör man känna till Html.
Skillnaderna mellan Xhtml och vanlig Html kan sammanfattas så här: Xhtml kräver en mer detaljerad DTD och en större noggrannhet i koden. Båda dessa aspekter kommer jag att diskutera på denna sida.
Jag inleder med att kort beskriva dokumenttypsdeklarationen för Xhtml. Du hittar en kort introduktion till begreppet på sidan "Vad är en DTD?". Gå dit >
Kapitel 3 handlar om de regler för koden som man måste följa. Därefter följer ett avsnitt om validering. I sista kapitlet visar jag grundkoden för en sida.
2. Skapa ett Xhtml-dokument
Eftersom webbläsarna redan förstår Html behöver man i princip inte ange någon DTD då man bara använder Html i sitt Xhtml-dokument. Men då man utnyttjar Xml-kod måste man ange en DTD. Annars riskerar man att webbläsaren visar koden snarare än tolkar den.
Så här inleder man ett Xhtml-dokument som innehåller Xml-kod:
| <? xml version="1.0" encoding="UTF-8"?> |
Här kommer jag dock inte att prata alls om Xml och struntar därför i denna rad i de exempel jag visar. Under den kommer sedan den DTD som skall vara med för att tala om för webbläsaren att koden följer Xhtml:
| <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Under denna rad måste man också skriva:
| <html xmlns="http://www.w3.org/TR/xhtml1"> |
Attributet xmlns utläses "xml namespace", som på svenska blir ungefär "namnutrymme" eller "namnrymd". Det anger alltså vilken dokumenttypsdefinition koden följer och var denna definition kan laddas ner.
Efter dessa två element följer sedan vanlig Html-kod. I sista kapitlet visar jag hur grundkoden till en sida ser ut.
3. Regler för välutformade dokument
Som jag tidigare nämnt skiljer sig Xhtml från vanlig Html främst genom att man måste vara mer noggrann när man skriver koden. Här tänker jag beskriva de viktigaste reglerna.
Hur vet man då vad som är korrekt kod? jo, det bestäms i den DTD som anges i början av varje dokument. Om koden är korrekt skriven i dokumentet säger man att det är välutformat. Så här ser reglerna ut:
Små bokstäver i koden
Den kanske viktigaste regeln är att Xhtml skiljer mellan stora och små bokstäver. Det gäller för koden, men självklart inte för filnamn och internetadresser. Däremot måste såväl element som attribut skrivas med små bokstäver:
| Rätt: | <a href=" http://www.w3.org/TR/xhtml1 ... |
| Fel: | <A href=" http://www.w3.org/TR/xhtml1 ... |
| Fel: | <a HREF=" http://www.w3.org/TR/xhtml1 ... |
Element måste avslutas
I Html kunde man strunta i att avsluta element som <p>, <td>, <body>, osv. I Xhtml måste man däremot avsluta alla element:
| Rätt: | <p>Detta är ett stycke</p>
<p>Detta är också ett stycke</p> |
| Fel: | <p>Detta är ett stycke
<p>Detta är också ett stycke |
| Rätt: | <td>Detta är en tabellcell</td>
<td>Detta är också en tabellcell</td> |
| Fel: | <td>Detta är en tabellcell
<td>Detta är också en tabellcell |
Tomma element skall också avslutas
Hur gör man då med element som saknar avslutning? Sådana kallar man ofta för tomma, eftersom de endast har strukturell effekt och saknar innehåll. Till denna grupp hör <hr>, <br> och andra. Man avslutar dem så här:
| <hr /> |
Man lägger således in ett blanksteg mellan elementet och avslutningen. Anledningen till att man gör så är att en del webbläsare annars inte förstår elementet och struntar i det. Man kan för all del också avsluta så här:
<hr></hr>
men det är mer tidsödande, skapar mer kod och rekommenderas inte av "experterna". Använd alltså den första varianten.
Element får inte överlappa
Element måste nästlas på ett korrekt sätt. Det betyder att element inte får överlappa:
| Rätt: | <b><i>Fet och kursiv stil</i></b> |
| Fel: | <b><i>Fet och kursiv stil</b></i> |
Attribut måste citeras
I Html kunde man skriva attributens värden utan citationstecken. I Xhtml måste man citera alla värden, även dem som bara innehåller siffror:
| Rätt: | <table width="100"> |
| Fel: | <table width=100> |
Obligatoriska element
I Html kunde man slarva och strunta i att ta med <head> eller <body>. I stycken kunde man strunta i <p> och i tabeller kunde man hoppa över vissa delar av koden, som <<tr> eller <td>.
I Xhtml måste sådana element alltid finnas. Det får med andra ord inte finnas något innehåll som saknar behållare, t.ex <body> eller inte har sluten behållare, t.ex </body>. Terminologin känner du igen från de inledande sidorna om stilmallar. Gå dit >
Till varje sådan här regel finns självklart också specialregler. En sådan innebär att <title> måste finnas och dessutom vara första elementet efter <head>.
Attribut måste ha värden
Det är också viktigt att veta att alla attribut måste ha ett värde. I Html kunde man ju använda attribut som compact, selected och noshade utan att ange något värde för dem. Detta kallades för att minimera dem. I Xhtml måste de förses med värden, trots att de bara har ett enda:
| Rätt: | <dl compact="compact"> |
| Fel: | <dl compact> |
Konstiga tecken måste översättas
Specialregeln om att konstiga tecken måste översättas gällde visserligen även för Html. På sidan Konstiga tecken fick du lära dig vad det innebar. men webbläsarna visade ändå rätt tecken ibland, trots allt. I Xhtml gäller dock att konstiga tecken måste översättas för att de skall visas. Utan översättning kommer de att tolkas.
Läs mer om konstiga tecken på sidan "Kôñstig@ t#ckên?". Gå dit >
Scripts och stilmallar
Föregående regel påverkar också hur man skriver script- och stilmallskod på sidan. För att undvika att tecken som "<" och "& i scriptet eller stilmallen tolkas, måste man lägga in en rad, som talar om för webbläsaren att det finns en CDATA-rad.
<script type="text/javascript">
<! [CDATA [
... här kommer scriptet ...
]]>
</script>
CDATA anger alltså att det följer kod som inte skall tolkas som markeringar eller "taggar" i egentlig mening. Du kan läsa mer om CDATA på sidorna om Xml.
4. Validering
W3C är den sammanslutning som bestämmer vad som skall gälla som standard, vilka språk som skall finnas, vad som är giltig kod, osv. På deras sajt finns mycket matnyttig information. Där hittar man också en validator som man kan använda för att kontrollera att den kod man skrivit följer den DTD man angivit.
När det gäller validering och analys av webbsidor brukar man skilja mellan en validerad och en icke-validerad analysator. Den förra kontrollerar att ett dokument motsvarar alla regler som satts upp i en DTD. En icke-validerad analysator kontrollerar endast att dokumentet är välutformat.
Läs mer om validering på sidan " Valideringstjänsterna - hur bra är dom?". Gå dit >
Kolla dina sidor i W3Cs validator: http://validator.w3.org
5. Grundkoden för en Xhtml-sida
Sammantaget blir alltså grundkoden för en sida något i den här stilen:
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1">
<head>
<title>Detta är ett Xhtml-dokument</title>
</head>
<body bgcolor="#ccffff">
<h1>Välkommen!</h1>
<hr />
<p>Detta är mitt första Xhtml-dokument</p>
</body>
</html>