Vad är skillnaderna mellan XHTML och HTML
Postad: 15 december 2007 | XHTML-guider | No CommentsLektion 2
Lär dig xhtml! Javascript
Nu ska vi fördjupa oss i xhtml.
På en hemsida så förekommer det ofta olika javascript. Vi vet att just javascript ställer till problem för validatorn och webbläsarna om man har en sida som är xhtml-kompatibel – så länge man inte förändrar förutsättningen.
Likaså kan vissa av de vanligaste ”tecknen” i attributen få validatorn att totalt bojkotta dem – trots att de är så vanligt förekommande. Vad är det då som skapar dessa problem? Och hur löser man detta på ett så smidigt sätt som möjligt?
Eller så här: <script source=”https:skriptet.js”></script>
Jag låter de gamla javascript-koderna ligga kvar i studiesyfte om hur man förr gjorde.
Använder du märkena <style> eller <script> måste dessa märkas ut som så kallade CDATA-avsnitt annars finns det en risk för att vissa tecken i koden kan tolkas fel av webbläsaren. Dessa tecken är ”<” ”>” och ”&” samt denna ”]]”
Som du ser så kan man skriva om dessa märken. Men vem har lust att sitta och pula med ett javascript som man kanske ändå inte fattar något av? Bäst löser man detta genom att skriva om koden som omfattar javascriptets start-attribut.
<script language=”JavaScript”
type=”text/javascript”>
<– <![CDATA[
å här lägger du in scriptkoden du ska använda
]]>//–></script>
Ett annat alternativ – vilken också validerar strict och kanske är att föredra är denna:
<script type=”javascript”>
<!–
å här lägger du in scriptkoden du ska använda
–>
</script>
På ett enkelt och hanterbart sätt har vi alltså kringgått från att skriva om dessa tecken i javascriptet till att istället lägga in en liten kod (CDATA) eller <!– –>som får webbläsaren att tolka tecknen rätt i scriptet. Smart va!
Vad man också kan göra för att underlätta är att lägga in en definition i meta-taggen för just javascript i <head>. Det ser då ut så här. Denna kod är skriven i xhtml.
<meta http-equiv="content-script-type" content="text/javascript" />På samma sätt kan man lägga till en defintion om css. Den är också skriven i xhtml och ska placeras i <head>.
<meta http-equiv="content-style-type" content="text/css" />
Det finns en del javascript som dels kan placeras i <head> och dels i <body>. onMouseOver är ett typexempel på detta.
Då räcker det inte bara att sätta dit ett CDATA-avsnitt i <head>.
Minns vad vi lärde oss i föregående lektion: bara använda små bokstäver. Ge därför akt även på javascripten och ändra till små bokstäver, framför allt i de koder som läggs i <body>.
Det här är inte något som många tänker på eftersom de flesta i godan ro tror att bara man slänger in CDATA-avsnittet så blir allt bra. Det är alltså fel. Det vanligaste felmeddelandet som validatorn ger i sådana här fall är att det finns inget som heter onMouseOver.
Jo det gör det – faktiskt, men då behöver vi skriva om det till onmouseover. För själva javascriptet spelar det ingen roll, men för validatorn spelar det en stor roll. Nu ser ni vikten av att bara använda gemener i xhtml.
Din första uppgift blir att kopiera in respektive meta-definition för css och javascript och lägga dessa i <head>. Därefter i varje javascript lägger du dels till attributet type=”text/javascript”> så hela start-attributet för koden ser ut så här:
<script type="javascript" type="text/javascript"></script>Sist stoppar du in CDATA-koden. Glöm inte att det är två stycken slyngor som ska in, dels innan själva scriptet, och dels slutslyngan som ska komma efter scriptet men innan själva scriptets slut-tagg.
Detta CDATA-avsnitt ska alltså finnas med i alla javascript du har på sidan så länge du inte skapar en js.file som du länkar till sidan. Det är lite mer avancerat och är nästan ett måste om man har en sida skriven i xhtml 1.0 strict och vill använda javascript. Vi ska nu därför kika på några skillnader mellan dessa två typer av dokument.
Strict och transitional – skillnader att tänka på.
Är det stora skillnader mellan strict och transitional?
Jag vill svara både ja och nej på det. Själva grundsättet att skriva sin xhtml är likadan, det handlar mer om vad man tidigare har tillåtits att använda som nu inte går.
För att förenkla det tydligare så brukar man säga att när hela layouten görs med stil-mallar (css-mallar) använder man oftast definitionen strict.
Det innebär då att hemsidan med all säkerhet är byggd av en massa block och att dessa styrs av en css-mall.
Då sidan är byggd i css så kan man inte längre använda sig av flertalet märken och attribut som tidigare använts utan de måste valideras eller tas bort helt. Du kan till exempelvis inte använda nedanstående attribut i xhtml 1.0 strict direkt i html-koden utan man får för varje div ange dess specifika utseende.
Det betyder att dessa css-märken infogas i din stillmall för varje div. När det gäller target-definitionen så slopas den helt. Så target=”_blank” – target=”top” – target=”_self” och så vidare försvinner. Följden blir att den sidan där länken ligger på kommer att fungera som en redirect till den sidan som länken anger.
Med andra ord – den nya sidan öppnas i samma fönster. Vilka mest vanliga attribut det handlar om ser du här under.
target – försvinner helt
border – styrs enbart av css
table – försvinner helt (går att använda sig av summary=””)
font – styrs enbart av css
size – styrs enbart av css
height och width – styrs enbart av css
align-attributen – styrs enbart av css
padding och margin – styrs enbart av css
Man kan säga som så att det enda som blir kvar i kodningen på sidan är de rena koderna utan inslag av definitioner och attribut. Detta är inget man bör ge sig in på om man inte förstår systemet med css 1 – css 2 och i viss mån css 3 därför att stilmallen blir det verktyg som styr hela sidans utformning och utseende.
Något annat som också är mycket viktigt att tänka på är att i strict bör du skriva om alla å – ä – ö så dessa validerar. Detta gäller inte bara koderna utan även all text där dessa bokstäver förekommer. En sida skriven i xhtml strict är oerhört känslig för främmande tecken.
Men det finns bra editorer som skriver om dessa.
Det kan verka hur krångligt som helst vid första anblicken. Å andra sidan handlar det också om att bryta en vana. Det finns till och med program som validerar din sida bara genom att du trycker på några knappar.
Programmet är gratis och heter HTML-Kit. Du kan själv hämta hem det. Däri finns även senaste versionen av Tidy – dock kostar den pengar men föregående version är alltid gratis och den duger utmärkt att använda.
Ok – så långt….
Vill du skriva om din sida till strict så måste du naturligtvis också byta ut ditt doctype så du får rätt. Du har att välja på två stycken; antingen använder du dig av xhtml strict 1.0 eller så kör du med xhtml strict 1.1. Du kan kopiera respektive doctype härifrån.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Med detta så avslutar vi grunderna i xhtml.
Jag hoppas att Du har haft glädje av informationen och börjar att förstå principen med det hela. Givetvis är det inget man kan lära sig under en enda dag – övning ger färdighet – men ju mer du kommer att pyssla med det, desto mer kommer du också att inse fördelarna med xhtml.
Lycka till!