Gå direkt till innehållet

FYSIKUMS WEBB- OCH MEDIAKURSER

HTML strukturerar ett webbdokument

Du har kanske lagt märke till att webbadresserna till de flesta webbsidor slutar med ".html" (eller ibland ".htm" i Windows-sammanhang). Bokstavskombinationen syftar på siduppmärkningsspråket HTML - HyperText Markup Language. Man ger webbsidor filtillägget "html" för att visa att den logiska strukturen för webbsidans textinnehåll har beskrivits enligt standarden HTML.

När du följer en länk eller skriver in en webbadress i din webbläsares adressrad hämtas den efterfrågade webbsidan hem till din dator i form av en textfil. Det är denna fils namn som har tillägget html/htm. Filen innehåller dels den text som ska visas på din skärm, men också en rad HTML-koder. (Om du öppnar en webbsidefil i en vanlig texteditor ser du HTML-koderna inbäddade i sidans text; de känns igen på att de omges av vinkelparenteserna < och >.)


HTML-strukturerad text och dess tolkning i en webbläsare

Med hjälp av HTML-koderna har webbsidans författare markerat vilka textblock som ska hanteras som stycken i brödtext, vilka som ska visas som rubriker, listor eller tabeller, var i texten ev. bilder ska placeras in, etc. HTML-koden definierar alltså en webbsidas logiska struktur.

Koderna läses efter nedladdningen av sidan av webbläsaren, som tolkar koden och presenterar sidans innehåll efter författarens önskemål på din skärm. En webbläsare har alltså i grunden två huvudfunktioner: att hämta hem webbsidor och att tolka HTML-kod.

Stilmallar bestämmer dokumentets utseende

Men hur ska koden tolkas? Alla webbläsare har inbyggt instruktioner om exakt hur HTML-koder, t.ex ett "stycke" eller en "rubrik", ska återges rent grafiskt på skärmen (eller presenteras på ett annat utmedium, t.ex läsas upp via talsyntes). Instruktionen för HTML-koden för "stycke" kan t.ex vara: använd webbläsarens standardtypsnitt, vanligtvis Times New Roman, i graden 10 punkter, låt raderna gå från webbläsarens ena kant till den andra, utan marginaler, och lägg en blankrad mellan stycken. I en webbsida kommer därför alla textblock som markerats med HTML-koden för stycke att presenteras på just detta standradiserade sätt.

Webbförfattaren har dessutom möjlighet att komplettera HTML-koden med en stilmall, som innehåller egna instruktioner om hur HTML-strukturerad text ska visas, t.ex med ett annat typsnitt än standardens. Stilmallar är en webbteknik som beskrivs i en separat artikel "Utseendekontroll med stilmallar". Om du som webbförfattare är nöjd med standardvisning av HTML-kod kommer du långt med bara ren HTML, och kan strunta i stilmallar.

Javascript omdefinierar beteendet hos webbsidekomponenter

Stilmallar är inte den enda teknik som kompletterar grundtekniken HTML när man skapar avancerade webbsidor. Alla komponenter i en webbsida har en logisk funktion i sidan, och denna kodas enligt standarden HTML. Komponenterna har dessutom ett utssende som kan ändras med stilmallar. En del komponenter har slutligen ett eller flera typiska beteenden om de manipuleras på något sätt av webbsidebesökaren. Det mest kända exemplet på beteende är förstås länkar, som när de klickas aktiverar en nedladdning av en ny webbsida till webbläsarfönstret. Ett annat mycket viktigt exempel är formulär.

Alla dessa webbsidekomponenter har vanligtvis en rad beteenden som initieras av besökaren, men man kan vilja anpassa något av dessa beteenden, eller definiera helt nya beteenden. För detta ändamål har en tredje grundteknik för webbsideskapande tagits fram, webbsideskriptspråket Javascript. Det är ett programmeringsliknande språk med vars hjälp en webbsideutvecklare kan programmera egna beteenden för sina webbsidors komponenter. Javascript är en webbteknik som beskrivs i en separat artikel "Webbsideskriptspråket javascript". Om du är nöjd med standardbeteendena hos HTML-kodade webbsidekomponenter kan du strunta i Javascript.

Koda webbsidor för hand eller med webbeditorer

När du vill skapa en egen webbplats har du två tillvägagångssätt att välja mellan. Du kan dels lära dig HTML i detalj, och skriva HTML-kod för hand i en vanlig texteditor. Men det går som tur är att skapa webbsidor utan en gnutta kunskap om HTML med hjälp av s.k. webbeditorer. Det är program som låter författaren designa sidor grafiskt, ungefär som i ett ordbehandlingsprogram och överlåta åt programmet att generera HTML-koden.

Vilken av metoderna du slutligen väljer är en personlig smaksak. Du kan läsa mer om editorer i en separat artikel "Webbeditorer" i denna kurs. Den webbeditor som används som exempel i kursen heter Dreamweaver. Programmet beskrivs närmare i artikeln "Webbeditorn Dreamweaver".

Lär dig grunderna i HTML

I denna artikel kan du läsa mer om HTML:s grunder. Fler detaljer, både om HTML och hur du skapar webbsidor, hittar du annars i artikelsamlingen "Komponenter i webbsidor".

I artikelns olika kapitel beskrivs bl.a närmare vad som menas med "uppmärkning" av ett dokument, webbens teckenuppsättning, en genomgång av begreppet HTML-element, av den övergripande strukturen hos en webbsida, en jämförelse av HTML och andra webbtekniker, och slutligen också en rad exempel som illustrerar HTML-kodning, steg för steg, följt av lästips och övningsuppgifter.

För den som är intresserad av lite mer bakgrund om HTML följer dock här först några allmänna betraktelser om nyttan med HTML och HTML:s begränsningar.

FORTSÄTT

kodvalidering:
tester:
HTTP-data:
sidstruktur:
resurser:
välj stilmall:
välj typsnitt:

Senast uppdaterad 2 april 2007