HTML

Vad är HTML?

Webbsidor konstrueras i märkspråket (markup language) HTML. Förkortningen står för HyperText Markup Language. Att det kallas för märkspråk, eller markup language på engelska, innebär att det används för att märka upp innehållet och på så sätt tala om för en programvara, i HTML:s fall en webbläsare, hur informationen skall tolkas. HTML är alltså inget programmeringsspråk. Vill du ha programfunktioner på din webbsida använder du dig i stället av olika typer av skript, små programsnuttar som man länkar till eller som bäddas in i HTML-koden.

HTML skall framför allt användas för att beskriva vilken typ av innehåll som skall visas. Förr användes ofta funktioner i HTML för att layouta och jobba med den visuella utformningen av sidan, vilket ledde till att koden blev allt mer tillkrånglad och omfattande i takt med att folk ställde successivt högre krav på webbsidornas visuella utformning. Sedan 1994 har man istället strävat efter att hålla isär form och funktion genom att flytta så mycket som möjligt av sidornas formgivnig till det kompletterande språket CSS. CSS länkas eller bäddas sedan in på ett liknande sätt som skript.

Under 00-talet har man kunnat se att övergången är mer eller mindre komplett, det är sällan idag men ser en sida gjord enbart i HTML.

Vi skall icke desto mindre börja kursen med HTML, som ju är själva grunden.

En HTML-fil är i grund och botten en vanlig textfil, som förses med filändelsen .html eller .htm i stället för .txt och där texten är märkt på ett speciellt sätt som kan tolkas av en webbläsare (browser).

När du skriver in en adress i en webbläsare (till exempel http://www.dagy.danderyd.se) använder den kommunikationsprotokollet HTTP för att öppna URL:en http://www.dagy.danderyd.se. Väl där kommer webbläsaren att leta efter ett första HTML-dokument, som oftast heter index.html (eller index.htm).

Om filen som skall öppnas heter något annat än detta (eller ett begränsat antal andra namn) måste man även skriva in filnamnet i URL:en. Undvik detta, se till att det finns en indexsida om du vill att folk skall hitta till din sida. Vi kommer att återkomma till URL:arna senare under kursen.

Taggar, element och värden

För att tala om för webbläsaren vad den skall göra med webbsidan märker man upp sitt dokument med taggar (tags=etiketter). Taggen innehåller alltid ett element, ofta också ett attribut, som i sin tur

kan få ett värde. För att tala om vad som är en tagg använder vi oss av tecknen <, mindre än, och >,större än.

En exempeltagg med ett attribut och värde kommer alltså se ut såhär: <element attribut=”värde”> notera likamedtecknet ( = ) och citationstecknen ( ” ” ).

De flesta taggar skall kompletteras med en motsvarande sluttagg, som markerar när taggen skall sluta gälla. En sluttagg består av ett snedstreck ( / ) före elementet: </element>

Som du ser behöver du inte ha några attribut eller värden i sluttaggen, eftersom den bara markerar att den tidigare taggen skall upphöra att gälla, oavsett vilka attribut den eventuellt har.

Best practice – funktion, inte utseende

Tanken med språket HTML är att det ska tala om vilken typ av innehåll det är som visas. Därför strävar man efter att elementen ska ha ett semantiskt värde. På vanlig svenska betyder det att man inte ska tänka på till exempel <h1> som den största, tjockaste rubriken, utan som den högsta rubriknivån. Det viktiga med <p> är inte att det blir snygga avstånd före och efter stycket, utan att det är ett stycke, rent språkligt. <em> gör visserligen texten kursiv (som standard), men det viktiga är att det är text som betonas extra.

För utformning av sidan, för att förändra utseendet på elementen och styra i detalj hur de visas har man skapat "systerspråket" CSS. Med CSS kan du i detalj styra utformningen av sidan på ett mycket detaljerat sätt, som är svårt/omöjligt att göra med bara HTML

Allt innehåll på den här sidan är gjort med HTML, men alla färger, typsnitt, storlekar o.s.v styrs med CSS

Skapa en grundstruktur

Öppna en enkel texthanterare, i Windows kan du använda Anteckningar (Notepad), och påbörja ditt dokument.

Börja med taggen som talar om att det är ett HTML-dokument: <html> och dess sluttagg: </html>. Mellan dessa skall allt annat in.

Lägg till dokumentets huvud (head): <head> och sluttagg. I huvudet (mellan head och /head) placeras framför allt sådan information som inte skall ses på skärmen av webbsidans betraktare, sådant som skall läsas av maskiner snarare än människor.

I den här övningen skall vi lägga in en av de taggar som placeras i huvudet och faktiskt syns, nämligen <title> med motsvarande sluttagg. Taggen och sluttaggen placeras runt den korta texten som brukar finnas i listen i webbläsarens överkant. Vill du alltså att det skall stå ”Min hemsida” högst upp i webbläsaren skriver du: <title>Min hemsida</title> och placerar detta mellan huvudets tagg och sluttagg.

Nedanför huvudet kommer dokumentets kropp, body, Detta är den del där allt som ska visas i webbläsarfönstret placeras.

<body>

mellan <body> och </body> ska du nu placera innehållet på sidan

<html>
   <head>
      <title>Min hemsida</title>
   </head>
   <body>
      Mitt innehåll
   </body>
</html>

Öppna filen i en webbläsare och se vad du har gjort.