HTML för nybörjare – guide till dina första webbsidor

HTML för nybörjare handlar om att lära sig det märkspråk som varje webbsida är byggd med. Varje gång du öppnar en webbsida i en webbläsare har någon skrivit HTML-kod som talar om för webbläsaren vilka delar som är rubriker, stycken, länkar och bilder. I den här guiden går vi igenom vad HTML är, hur en webbsida är uppbyggd och vilka taggar du behöver för att skapa din första egna sida.

Vad HTML är

HTML står för HyperText Markup Language. Det är ett märkspråk, inte ett programmeringsspråk. Skillnaden är att HTML beskriver strukturen och innehållet i en webbsida, medan programmeringsspråk som JavaScript används för att göra sidan interaktiv.

HTML togs fram i samband med World Wide Web av Tim Berners-Lee, och spridningen av internet på 1990-talet gjorde det till det dominerande språket för webbsidor. Utvecklingen drivs av standardiseringsorganisationen W3C tillsammans med webbläsartillverkarna. HTML5 blev en W3C-standard den 28 oktober 2014, och HTML 5.2 kom 2017. Källa: https://sv.wikipedia.org/wiki/HTML

Så är en HTML-sida uppbyggd

Varje HTML-dokument börjar med en dokumenttyp, DOCTYPE, som talar om för webbläsaren vilken version av HTML sidan använder. Därefter kommer rotelementet <html>, och inuti det delas sidan upp i två delar: head och body.

I head ligger information som inte visas direkt för besökaren: sidans titel, teckenuppkodning och länkar till CSS-filer. I body ligger allt som besökaren ser och interagerar med: rubriker, stycken, bilder, länkar och formulär.

Ett minimalt HTML-dokument kan se ut så här:

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <title>Min första sida</title>
</head>
<body>
  <h1>Hej världen</h1>
  <p>Det här är min första webbsida.</p>
</body>
</html>

Varje element börjar med en starttagg, till exempel <h1>, och de flesta har också en sluttagg, </h1>. Mellan taggarna lägger du innehållet. Vissa element, till exempel img, är tomma och behöver ingen sluttagg.

Några vanliga attribut:

• href – i en <a>-tagg anger det vilken sida länken leder till.
• src – i en img-tagg anger det sökvägen till bilden.
• alt – i en img-tagg beskriver det vad bilden visar, viktigt för tillgänglighet.
• charset – i en <meta>-tagg anger det vilken teckenuppkodning sidan använder, till exempel UTF-8.
• id och class – används för att identifiera och styla element med CSS.

Vanliga taggar du behöver känna till

HTML använder taggar för att märka upp innehållet. Här är de vanligaste för den som börjar:

• <h1> till <h6> – Rubriker i olika storlekar. <h1> är den viktigaste och bör bara finnas en gång per sida.
• <p> – Stycke för vanlig brödtext.
• <a> – Länk till en annan sida eller till en annan plats på samma sida.
• img – Bild, ett tomt element som behöver src och alt.
• <ul>, <ol> och <li> – Punktlistor och numrerade listor.
• <div> och <span> – Avsnitt som grupperar innehåll, ofta tillsammans med CSS.

Så skapar du din första HTML-fil

Du behöver inget särskilt program. En vanlig textredigerare räcker, till exempel Anteckningar i Windows eller TextEdit i macOS. Spara filen med ändelsen .html eller .htm.

Så här gör du:

1. Öppna en textredigerare och kopiera in HTML-koden ovan.
2. Spara filen som index.html.
3. Dubbelklicka på filen så öppnas den i din webbläsare.
4. Gör en ändring i textredigeraren, spara och uppdatera webbläsaren för att se resultatet.

När du är bekväm med grunden kan du byta till en kodeditor som gör det enklare att skriva HTML, till exempel genom att färglägga taggarna. På webide.se har vi jämfört webbaserade kodeditorer, ett alternativ för den som vill arbeta direkt i webbläsaren.

CSS och JavaScript bredvid HTML

HTML ansvarar för strukturen, men sällan för utseendet. Det är CSS som bestämmer färger, typsnitt, marginaler och hur sidan ser ut på olika skärmar. JavaScript används för interaktivitet, till exempel menyer som fälls ut eller innehåll som uppdateras utan att sidan laddas om.

För en nybörjare räcker det att veta att de tre språken samarbetar: HTML för innehållet, CSS för utseendet och JavaScript för funktionerna.

Vanliga misstag för nybörjare

Ett vanligt misstag är att glömma att stänga en tagg, vilket kan göra att resten av sidan ser fel ut. Ett annat är att använda flera <h1>-rubriker på samma sida, vilket förvirrar både besökare och sökmotorer. Alla bilder bör också ha en alt-text som beskriver vad bilden visar, så att sidan blir tillgänglig även för den som använder skärmläsare.

Glöm inte heller att ange sidans språk med lang="sv" i <html>-taggen. Det hjälper webbläsaren och skärmläsaren att tolka texten på rätt sätt.

Så fortsätter du

När du har skapat din första sida är nästa steg att lära dig fler taggar, prova CSS för att styla sidan och ta reda på hur JavaScript kan göra den interaktiv. Webbplatsen du läser på, webide.se, har fler guider om JavaScript, Node.js och andra verktyg för webbutveckling när du är redo att gå vidare.

Källa: https://sv.wikipedia.org/wiki/HTML