Din första webbsida

HTML är ett så kallat märkspråk och har egentligen mer gemensamt med hur ett Word- eller PDF-dokument är uppbyggt än med ”riktig” programmering. Du anger vad som ska vara rubrik, brödtext, listor och så vidare på samma sätt som när du väljer formatmallar i Word. När du markerar en rubrik och väljer ”Rubrik 1” i listan markeras texten med taggarna H1. Detta ska utläsas header 1, det vill säga rubriknivå 1. Denna metainformation, det vill säga information som inte syns för dig som läser men som ändå följer med dokumentet, används om du till exempel ska skapa en automatisk innehållsförteckning eller berättar för någon som läser dokumentet med skärmläsare vad som är rubriker.

När du skapar en webbsida med HTML berättar du för webbläsaren (Chrome, Explorer eller Firefox) hur den ska presentera informationen för de som besöker den. Vanligtvis kombinerar man idag HTML med tekniken som kallas för CSS som primärt används för att skapa webbsidans struktur och utseende. Med HTML berättar du vad som ska vara en rubrik och med CSS berättar du hur den rubriken ska se ut i korta drag.

Det finns också en uppsjö andra tekniker som kan användas för att skapa interaktivitet eller mer komplexa webbtjänster som till exempel JavaScript som du kanske hört talas om.

Kursen bygger på att du använder en PC med Windows.

Skapa din första webbsida

I denna kurs rekommenderar vi att du använder Windows-programmet ”Anteckningar”. Sök efter det i sökrutan och du hittar det.

Starta programmet och skriv in koden nedan:

Tryck  Arkiv->Spara som, döp din fil till sida_ett.html och skapa en ny mapp som du döper till webbsidekurs där du sparar den. Öppna sedan mappen i Utforskaren och testa att dubbelklicka på filen. 

Om allt stämmer ska den nu öppnas i den webbläsare som är associerad med dessa HTML-filer (Troligtvis Explorer eller Chrome) och du kan nu beskåda din första webbsida!

Du har nu skapat instruktioner till webbläsaren hur den ska presentera information!

Om det skulle vara som så att den lilla ikonen framför din webbsida skulle visa Anteckningar istället för en webbläsare så är det troligtvis något som spökar med filändelsen.

Se till så att ”Filnamnstillägg” är ikryssat. Kolla sen så att filändelsen är .html och inte .txt.

För att webbläsaren ska veta vad som är kod som den ska tolka och vad som är text markerar du all kod med teckenparet <>. Titta på exemplet nedan och se  hur den första h1 berättar att nu kommer börjar rubrik och den avslutande /h1, med snedstreck, att nu är rubriken slut. Om man vänder tecknen åt fel håll eller glömmer av dem så förstår inte webbläsaren hur den ska tolka koden och det blir fel.

Uppgift

Titta på din kod och se om du kan klura ut hur du ska ändra och bygga ut den för att skapa webbsidan nedan:

Om du fastnar kan du hitta en ledtråd här. Här kan du jämföra din kod med facit.