Det synliga innehållet i webbsidan...

Jag har nu ägnat en massa kraft och energi till att få innehållet i mina webbsidor att spirituellt och intresseväckande. Så här kan det t.ex se ut i en av mina webbsidefiler:

När jag sparat min kod, växlat till webbläsaren och laddat in sidan ser jag precis all den text jag så mödosamt har HTML-strukturerat i webbsidefilen, med rubriker, stycken och länkar återgivna som man väntar sig:

Fantastikst! Men vänta - det finns mer att säga om webbdokument än så här!

...kan behöva kompletteras med ytterligare nformation om webbdokumentet

Utvecklarna av HTML-standarden har nämligen förutsett att man kan vilja spara annan information i ett webbdokument än bara det synliga innehållet i webbsidan. Ett exempel på ytterligare information är metadata om dokumentet, t.ex vem som skrivit det och när det senast uppdaterades. Andra exempel är instruktioner om vilka stilmallar som ska hjälpa webbläsaren att återge webbsidan med det utessende webbutvecklaren tänkt sig, eller javascriptkod som modifierar beteendet hos somliga av elementen i webbsidan. Sen kan man vilja lägga in information som bara läses av program som indexerar webbsidor, t.ex för att infoga dem i en sökbar databas som Google. Och så finns möjligheten att definiera en adressikon för sidan (den lilla bild som syns i adressfält och på flikar) och en sidtitel (som visas på den - i Windows - vanligtvis blå kanten överst i en webbläsares fönster). Och så vidare...

Som vi har sett är det helt tillräckligt med bara sidinnehållet för att webbsidan ska fungera, men så fort vi höjer ambitionsnivån lite högre över miniminivån bör vi lära oss hur vi ska komplettera vår kod med den här typen av kompletterande information. I själva verket är det nödvändigt när vi senare ska börja experimentera med den extremt användbara tekniken med stilmallar! Så hur gör man då i HTML för att infoga extrainformation?

Två avdelningar i ett webbdokument: HEAD och BODY

Jag har försökt övertyga dig om att det i ett typiskt HTML-dokument måste beredas plats för två olika typer av data:

För att tydliggöra skillnaden mellan de två typerna av data har man infört två nya HTML-element: head för den kompletterande dokumentinformationen och body för själva webbsideinnehållet. Båda elementen är innehållande, d.v.s. de ska ha start- och sluttaggar. Så här ser det ut när jag innesluter hela webbsidekoden som jag presenterade ovan i body-elementet:

Jag brukar när jag kodar använda indentering av kodraderna inuti body-elementet. Det är inte nödvändigt, förstås, men gör det lite lättare att se vilka kodrader som hör ihop.

Sen behöver mitt HTML-dokument lite kompletterande information, så att jag kan visa hur det hela fungerar. Ett minimum är att man lägger in elementet title som ger den text som fungerar som sidtitel, d.v.s. visas överst i webbläsarfönstret, på flikar och i favoritlistor. Elementet är innehållande, så här:

Och så här blir det när jag lägger in denna metainformation där den hör hemma, nämligen som innehåll i elementet head:

Sen lägger jag in båda elementen med sitt innehåll i min webbsidefil. Regeln är: HEAD-avsnittet (d.v.s. elementet head) ska alltid ligga före BODY-avsnittet (elementet body). Det får också bara finnas ett avsnitt av vardera typen. Så här alltså:

Jag ska strax ge lite fler exempel på element man kan ha i ett webbdokuments HEAD-avsnitt, men först en liten formell detalj till...

Rotelementet för ett webbdokument

Så långt som jag har visat dig reglerna för strukturen för ett webbdokument har vi fått två innehållande element, head och body, jämte varandra, och tillsammans innehåller de allt som kan få finnas i dokumentet. Nu är det bara så att reglerna för den familj av märkspråk som HTML hör till (en övergripande standard som heter SGML) kräver att ett webbdokument bara får bestå av ett innehållande element, som i sin tur innehåller allt övrigt i dokumentet.

Så vad göra? Jo, vi inför ytterligare ett nytt element, med samma namn som märkspråket, alltså html. Detta innehållande element får bara innehålla två element, nämligen vära vänner head och body, och de i sin tur innehåller extrainformation respektive webbsideinnehåll. Ett sådant element som innehåller allt övrigt i dokumentet kallas HTML-dokumentets rotelement. Det är vanligt att elementets namn är samma som märkspråket.

Känns det hela inte lite väl onödigt krångligt? Jo, kanske, men så är det nu bestämt och det är lika bra vi håller oss till reglerna. I kortform blir strukturen för ett HTML-dokument alltså så här:

och när jag fyller på med HEAD- och BODY-innehållet får vi ett fullständigt strukturerat HTML-dokument:

Puh. Är det nu verkligen slut? Inga fler konstigheter? Nej, inga fler konstigheter. Jo, förreesten, en liten konstighet till, men den tar vi senare.