Till den här lektionen har du skapat ditt första HTML-dokument och placerat det i rotmappen på ditt konto. I den mappen kommer du under kursen placera många andra mappar och filer för att bygga din sajt.
Dokumentet du just har lagt upp kommer du att utveckla vidare under hela kursen, från denna förstasida ska du länka vidare till allt du gör under kursen.
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>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.
<!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><!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.
<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.
<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.
<title>...</title>
title är sidtiteln. Texten som visas i själva fliken (inte i webbläsarfönstret).
<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.
<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.
<body>...</body>
body innehåller allt som ska visas på sidan. Text, bilder, video, ljud, browserspel eller vad det nu kan vara.
<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.
<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.
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.
Adresser anges (vanligtvis) i form av URL:ar, dessa kan vara absoluta eller relativa.
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
Index.html är inte samma sak som index.html och kommer inte fungera).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
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 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.
Lägg i din index.html till en presentationsbild på dig själv och en eller flera relevanta länkar som har med dig att göra.
Du får gärna lägga till mer saker du tycker passar, tänk bara på att det du gör syns offentligt i hela världen...