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 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.

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 hur den ska tolka webbsidan märker man upp sitt dokument med taggar (från det engelska ordet tags=etiketter).

Taggen innehåller alltid ett element, ofta med ett eller flera attribut. Attributen kan i sin tur kan ha olika värden. 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”>innehåll</element>
notera likamedtecknet ( = ) och citationstecknen ( ” ” ).

De flesta taggar skall kompletteras med en 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.

Ditt dokument rad för rad

<!DOCTYPE html>
<html>
<head>
  <title><!--Sidtitel här--></title>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="">
</head>
<body>
  <h1><!--huvudrubrik här--></h1>
  <h2><!--underrubrik här--></h2>
  <p><!--Ett stycke text, kopiera gärna för fler stycken--></p>
</body>
</html>

  1. <!DOCTYPE html>

    DOCTYPE är egentligen ingen HTML-tagg, och följer inte taggarnas syntax. DOCTYPE-deklarationen, eller DTD:n, inleder alla HTML-dokument och informerar webbläsaren om vilken språkversion dokumentet är skrivet i. <!DOCTYPE html> är den DTD som talar om att sidan använder sig av den senaste standarden, det som oftast kallas HTML5.

  2. <html>...</html>

    elementet html, med sluttagg, innesluter all HTML-kod i dokumentet. Man kan säga att dokumentet börjar och slutar med dessa, efter att DTD:n talat om vilken sorts dokument det är.

  3. <head>...</head>

    head är den delen av dokumentet som innehåller sådant som inte visas i webbläsarfönstret, länkar till skript, stilmallar, information om själva sidan (metainformation) och så vidare. Massor av saker, men inte själva sidinnehållet. huvudet avslutas med sin sluttagg innan nästa del av dokumentet, kroppen, kan börja.

  4. <title>...</title>

    title är sidtiteln. Texten som visas i själva fliken (inte i webbläsarfönstret).

  5. <meta charset="UTF-8">

    meta är ett element för just metainformation, information om dokumentet själv. Metataggar behöver ingen sluttagg. Den här metataggen talar om att dokumentet är skrivet i teckenuppsättningen UTF-8 (elementet meta har attributet charset (teckenuppsättning) med värdet UTF-8). Om du inte anger teckenupsättning kommer inte webbläsaren veta hur den ska tolka tecken utöver A-Z, a-z och 0-9.

  6. <meta name="description" content=""> och <meta name="keywords" content="">

    värdet för attributet content i en metatagg med name="description" är en beskrivning av sajten, riktad till andra datorer. Framför allt med tanke på sökmotorer och liknande. När name har värdet keywords är det ett eller flera nyckelord som beskriver sajten, nyckelorden skiljs från varandra med komma.

    Det här är bara tre av många möjliga metataggar, du kommer att stöta på fler under kursen.

  7. <body>...</body>

    body innehåller allt som ska visas på sidan. Text, bilder, video, ljud, browserspel eller vad det nu kan vara.

  8. <h1>...</h1>

    Anger att texten är en huvudrubrik (heading 1, rubrik 1). Det finns flera rubriknivåer för under- och mellanrubriker: <h2>, <h3>, <h4>, <h5> och <h6>. Det rekommenderas att du bara har en huvudrubrik (<h1>) per sida, men du kan ha hur många av de andra rubriknivåerna som helst på sidan.

  9. <p>...</p>

    p står för paragraph, stycke på svenska. Alla vanlig text på sidan omges av p-taggar. En starttagg och en sluttagg för varje nytt stycke.

Lägg till bilder och länkar på din sida

I namnet HTML, HyperText Markup Language, kan du se ordet hypertext. Det innebär att det är text som är länkad till annan text med "hyperlänkar", något som är centralt i idén som blev webben.

URL:ar

Adresser anges (vanligtvis) i form av URL:ar, dessa kan vara absoluta eller relativa.

Absolut sökväg

En absolut URL börjar med kommunikationsprotokollet (schemat), i webbens fall HTTP://. efter detta följer själva namnet på enheten (resursen) du vill nå, antingen i form av ett domännamn, t.ex webbem.se, eller IP-nummer (ett unikt nummer som tilldelas nätverksanslutna enheter). Efter domännamnet följer sökvägen till den sökta filen. Varje steg till en underliggande katalog (mapp), markeras med snedstreck ( /, slash).
OBS! inte bakåtlutade snedstreck ( \, backslash).

http://webbem.se/html/sokvagar_och_adresser/dokument.html

  • Adressen (URL:en) ovan innebär alltså:
    • Gå till dokumentet "index.html" i katalogen (mappen) "sokvagar_och_adresser" i katalogen "html" på resursen "webbem.se". Använd kommunikationsprotokollet (schemat) HTTP
  • Filer som öppnas automatiskt
    • Om filen som ska öppnas heter index.html (eller vissa andra namn, beroende på inställningar på severn) kommer servern öppna den automatiskt när användaren går in i katalogen. Alltså är det god praxis att alltid ha en indexfil i varje katalog.
  • Namngivning av kataloger och filer
    • Undvik att använda bokstäver som åäö, eller andra tecken som inte finns i det engelska alfabetet. Undvik mellanslag, ersätt eventuella mellanslag med _ eller - . Tänk på att webben skiljer på stora och små bokstäver (Index.html är inte samma sak som index.html och kommer inte fungera).

Relativa sökvägar

Om du länkar till dokument på samma server som den länkade filen själv ligger på kan du i stället för att använda en absolut sökväg använda en relativ, som beskriver var den sökta filen finns i förhållande till filen du länkar från

  • Om du länkar till en fil som ligger i samma katalog som dokumentet du länkar från räcker det med namnet på filen som sökväg.

    fil.html

  • Om du behöver gå ned i en katalog som befinner sig i katalogen du är i, anger du katalognamnet, snedstreck, filnamnet. Naturligtvis kan du förlänga det om du behöver gå fler nivåer (kataloger i kataloger).

    katalog/fil.html

    katalog1/katalog2/fil.html

  • Om du behöver gå upp en nivå, och backa upp till en överliggande mapp, anges detta med två punkter (går att upprepa).

    ../annan_katalog/fil.html

    ../../katalog1/katalog2/fil.html

    läs mer om sökvägar

Skapa en länk

Allt innehåll som kan visas i body kan också vara klickbara länkar. Elementet som anger att någonting är en länk är a (anchor). URL:en du länkar till anges som värdet till attributet href (hypertext reference).

<a href="http://webbsajt.com">länkad text</a>

Om du länkar till en fil på din egen sajt är det kanske enklare att använda en relativ adress:

<a href="fil.html">länkad text</a>

eller kanske

<a href="../katalog/fil.html">länkad text</a>

beroende på var den efterfrågade filen befinner sig.

Vill du bestämma att filen du länkar till ska öppnas i en ny flik kan du lägga till attributet target, och ge det värdet _blank (ett av flera möjliga värden till target)

<a href="http://webbsajt.com" target="_blank">länkad text</a>

Bilder är också länkar

Bilder är normalt inte inbäddade i HTML-koden utan länkas in med hjälp av elementet img (image). Värdet till attributet src (source) är sökvägen till bildfilen.

Du kan använda bildfiler i filformaten JPEG (.jpg, .jpe, .jpeg), PNG (.png), GIF (.gif) och SVG (.svg).

Du ska alltid lägga till attributet alt (alternativtext) i dina img-taggar, för att förklara bilderna i de fall bilder inte visas (punktskriftdisplay, talsyntes, Lynx, trasiga sökvägar o.s.v...). Värdet till alt är den förklarande texten.

<img src="anka.jpeg" alt="En bild på en anka">

eller kanske

<img src="http://extern_sajt.se/bildmapp/anka.jpeg" alt="En bild på en anka">

Notera att img-taggar inte behöver någon sluttagg, eftersom de inte innesluter något annat innehåll än sig själva.