Visa meny
Dölj meny

Skapa webbsidor

HTML

PDF

För att kunna skriva kod för våra webbsidor behöver vi ett program för detta, en så kallad ”editor”.
Ett bra, lättanvänt och gratis alternativ är Visual Studio Code (klicka på texten för att ladda ner).

När vi har en editor kan vi börja skriva kod. Start Visual Studio Code, klicka på ”File” och välj ”New File” för att skapa en ny tom sida.

Ny fil

Det första vi behöver är själva grunden till webbsidor, som ser ut som här:

<!DOCTYPE html>
<html>
<head>
   <title>Min hemsida</title>
   <meta charset="utf-8">
</head>
<body>
   <h1>Min hemsida</h1>

</body>
</html>

Skriv in koden ovanför i din editor, och när det är klar klicka på ”File” längst upp och välj ”Save as” och spara filen någonstans på din dator, som till exempel på skrivbordet.
Döp din fil till: index.htm

Startsidan på en webbplats ska alltid heta just index.htm, för att webbläsaren ska veta vilken fil som är startsida.

Nu kan vi testköra! Leta rätt på filen på din dator och dubbelklicka på den! Ta-daa! Har allt fungerat som tänkt så ska du nu se en webbsida som säger ”Min hemsida”.

Innehåll

Nu kan vi börja fylla på med själva innehållet som vi vill ha på vår webbsida!

Placera markören under raden <h1>Min hemsida</h1> och skriv in något om dig själv. Till exempel:

Hej! Jag heter Mattias, och det här är min första webbsida!

Spara och testa i webbläsaren igen.

Bilder och länkar

Det går att lägga in bilder i webbsidor. Prova det genom att ställa markören under raden du skrev in nyss, och skriv:

<img src="http://gnarp.se/uggla.png" />

Klicka på ”File” och ”Save” och testkör i webbläsaren på nytt. Nu bör bilden på CoderDojo-ugglan synas! Gör den inte det, kolla att du skrivit rätt.

För att göra en länk, som är en genväg till en annan webbsida, ställ markören under bilden du nyss lade in och skriv såhär:

<a href="http://gnarp.se">CoderDojo i Gnarp</a>

Så! Nu har vi gjort en liten webbsida, med en bild och en genväg (länk) till en webbsida! Skoj va?

Förklaring av vad vi gjort

Om vi kikar lite på koden vi skrivit, så är allra första raden – <!DOCTYPE html> den kod som säger till webbläsaren ”Det här är en HTML-sida!”. HTML är den kod som bygger upp alla webbsidor, och är en förkortning för HyperText Markup Language.

Nästa rad – <html> – säger att ”Här börjar HTML-koden!”. Kika även på sista raden, där finns </html> – i webbkod så betyder / att något slutar. HTML-koden slutar alltså på sista raden.

Sen delas webbsidor upp i två sektioner – <head> vilken innehåller inställningar till webbsidorna, vad titeln ska vara, vilket är det som syns i fliken vid testkörning, och det namn som används för att spara till exempel ett bokmärke/favorit.
Här säger vi även att <meta charset=”utf-8″> vilket behövs för att svenska tecken – å ä och ö – ska visas korrekt.

Sedan kommer själva innehållet inom <body> – här ligger allt som syns ut för de som besöker webbsidan.

Jobba vidare med webbsidan

För att styra hur webbsidan ska se ut behöver vi lära oss lite om något som kallas för CSS.

Klicka på knappen här under för att gå vidare.

Steg 2 – CSS