Vill du lära dig hur du tar en tom sida och förvandlar den till en innehållsrik hemsida? Då är det viktigt att du känner till HTML och CSS som är två grundläggande byggstenar för hemsidor. Detta är dock ett komplicerat ämne och det kan vara svårt att veta var man ska börja. Därför har vi skapat den här guiden för att ge dig en snabb introduktion till vad du behöver veta.
Här har vi samlat alla grunderna om HTML och CSS som du behöver om du vill skapa din egen hemsida. På så sätt får du de verktyg du behöver för att skapa något helt eget. Men innan vi går in på de mer tekniska detaljerna ska vi ta en titt på vad HTML och CSS handlar om.
Vad är HTML?
HTML eller Hypertext Markup Language är ett kodspråk som definierar var något på en sida ska stå. Det är HTML som bestämmer placeringen av bilder, text, video och andra element på en hemsida. Kort sagt kan vi se HTML som det ramverk som utgör vår hemsida.
Om du ska skapa din egen hemsida kommer det därför att vara helt väsentligt att du har kunskap om hur HTML fungerar. Ett bra exempel på det är fet text. När du skriver detta i Word behöver du bara markera det och göra det till fetstil, men för att ett program ska förstå att detta är fet text ska det se ut såhär: <strong>är fet text</strong>. En förståelse för hur dessa symboler hänger ihop gör även att du kan tyda hur olika hemsidor är uppbyggda.
Vad är CSS?
En annan förkortning som vi har nämnt, och som är viktig för att du ska kunna skapa din egen hemsida, är CSS. Akronymen står för Cascading Style Sheets och handlar om vilken sorts stil eller presentation en hemsida får. Kort förklarat kan vi säga att CSS talar om för vår enhet hur innehållet som skapats med HTML ska presenteras.
HTML är alltså det faktiska innehållet som ska finnas på sidan, medan CSS är hur det ska visas på din sida. Dessa två språk tillsammans är vad vi kan betrakta som en färdig hemsida. Det är därför viktigt att du kan båda om du vill koda en hemsida med HTML och CSS.
Innan du börjar arbeta med din hemsida
Innan du kan börja bygga din hemsida finns det några grundläggande saker du måste skaffa. Det första du måste göra är att skaffa ett webbhotell. Du måste ha en plats där du kan ladda upp din hemsida efter att ha kodat färdigt den. Det finns ett brett utbud, så det behöver inte bli särskilt dyrt att hitta ett bra webbhotell.
Sedan behöver du ett domännamn för din hemsida. Detta är den adress som någon måste ange om de vill hitta din hemsida på nätet. I många fall kan du få detta från samma ställe som du köpte webbhotellet, men det är inte nödvändigtvis billigast.
Så snart du har båda dessa på plats är du redo att ta itu med ditt projekt. Här börjar vi med HTML som är den första byggstenen du bör behärska.
Lär dig grunderna i HTML
Om du aldrig tidigare har skrivit kod med HTML kan det vara mycket att sätta sig in i. Lyckligtvis är det mycket enklare än vad många tror. HTML-taggar är det mest grundläggande som du använder för att skapa olika element på din hemsida. Vi ska därför ta gå igenom några exempel på detta innan vi går vidare.
När vi talar om HTML-taggar talar vi om <> och </>. Nedan kan du se några exempel på hur detta fungerar i praktiken.
- <b> …. </b> (I det här fallet kommer texten mellan de två HTML-taggarna att vara fet)
- <h1> …. </h1> (I det här fallet betraktas texten mellan taggarna som en H1-titel)
- <p> …. </p> (Innehållet här kommer att betraktas som ett textstycke)
Detta är de mest grundläggande HTML-koderna, men det finns även mer komplexa koder. Om du vill skapa en punktlista som denna:
- Punkt
- Punkt
- Punkt
Så skulle det se ut såhär i HTML
<ul>
<li> Punkt </li>
<li> Punkt </li>
<li> Punkt </li>
Om du däremot vill lägga till en länk till en annan plats på din hemsida krävs en något längre HTML-kod. Sedan måste du tala om för koden var länkens destination är och vad texten för länktexten ska vara.
En sådan enkel länk med HTML-taggar kommer bakom fasaden att se ut såhär:
<a href=”https://hemsidelab.se/”>En länk till vår hemsida</a>
Förstå HTML-strukturer
Även om HTML i sig självt är ganska enkelt att förstå är det sällan som en sida byggs med en enda HTML-tagg. En ensam tagg kommer alltså inte att kunna skapa någon hemsida, utan den tenderar att komma i långa kodsträngar – eller strukturer som den ofta kallas. Vi ska därför titta närmare på några strukturer så att du kan få en bättre förståelse för hur detta kommer att se ut. En enkel struktur för en mycket enkel hemsida kan se ut så här:
<!doctype html>
<html lang=”en”<
<head>
<meta charset=”utf-8”>
<title>Hello, World!</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Min första hemsida</p>
</body>
</html>
Nedan följer en uppdelad förklaring på de olika element i HTML-koden ovan:
- <!doctype html> – Detta är strukturens öppning.
- <html lang=”eng”> – Detta säger att HTML-dokumentet är skrivet på engelska.
- <head> – Markerar var öppningen av head-avsnittet börjar. Här är det vanligt att man lägger in koder för analysprogram och liknande.
- <meta charset=”utf-8”> – Definierar vilket boxset som används för att skriva dokumentet.
- <title>Hello, World! </title> – Sidans titel (den du ser i din webbläsare)
- <body> – Här börjar sidans innehåll (det som syns)
- <h1>Hello, World!</h1> – H1 Sidans rubrik
- <p>min første nettside</p> – ett kort stycke med texten min första hemsida.
- </html> – Avslutar ditt dokument
Om Mats
Mats är utbildad interaktionsdesigner och har erfarenhet som entreprenör vilket gör att han inte bara är kräsen när det kommer till design och användarvänlighet utan även effektivitet. Mats målsättning är därför att kunna hitta de lösningar som har goda möjligheter till sömlösa användarupplevelser utan att de blir komplicerade att arbeta med.
