Webbutveckling
HTML
Introduktion till Brackets
Brackets är ett program som används för att koda och utveckla webbsidor i. Dvs. skriva HTML, CSS och JavaSript med.
Video – Hur du använder Brackets
- Ladda ner Brackets här: Brackets.io
- Installerar Brackets på din dator.
- Skapa en mapp som du döper till webbutveckling.
- Skapa en ny fil i Brackets “Arkiv/Ny”
- Spara den nya filen som index.html i mappen webbutveckling
- Se nästa film
Introduktion till HTML
HTML dokumentet. HTML grundkod vad som måste finnas med i ett html-dokument.
Skriv in följande kod i din fil “index.html”:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
charset="utf-8">
gör det möjligt för oss att skriva å, ä och ö på hemsidan.
Skriva texter i HTML
Precis som vanliga textdokument så innehåller en hemsida rubriker, underrubriker och brödtexter. I HTML så markerar vi texten med olika former av taggar, beroende på vad texten ska vara för något.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Min första webbsida</title>
</head>
<body>
<!-- Hemsidans innehåll ska ligga här -->
</body>
</html>
- Allt innehåll som ska synas på hemsidan lägger vi inom
<body>
taggen. - Det som skrivs mellan <!– och –> är en kommentar i koden och syns inte på webbsidan.
- Det du skriver i
<title>
, dvs webbsidans titel syns på webbläsarens “tab”. - I “bodyn”, dvs mellan
<body>
och</body>
skriver du:
<h1>Min webbsida</h1>
<h2>Detta är min första webbsida</h2>
<p>
Jag tycker det är roligt att gå i skolan. Mitt favvo ämne är webbutveckling med Tommy.
</p>
- h1 betyder header 1, på svenska rubrik 1. Det finns 6 olika rubriker. h1 är störst och h6 är minst.
- p betyder paragraph, på svenska stycke.
- Spara filen
- Tryck på “blixten” längs upp till höger i Brackets
- Voala – Din webbsida syns i Chrome 🙂
- När du skriver en text i Brackets och trycker enter (ny rad) blir det ingen ny rad på webbsidan. Du måste skriva
<br>
i koden för att det ska bli en ny rad på webbsidan. Testa
Än är det kanske långt till att din webbsida liknar Facebook eller Aftonbladet men detta är en början. Alla måste lära sig gå innan man kan springa. Även Facebooks grundare Mark Zuckerberg har varit nybörjare.
Bra nu fortsätter vi.
Länkar
Länka till andra sidor med HTML
En sak med webbsidor som är så självklara att man kanske inte tänker på det är länkar till andra webbsidor. Dessa webbsidor kan vara interna dvs länkar till webbsidor inom den egna siten eller externa länkar till andra siter.
För att skapa en länk använder du dig av <a>
och därefter href
för att bestämma destination.
<a href="http://ibm.se">Länk till IBM</a>
- Skriv in en länk på din webbsida.
Bilder
Visa bilder med HTML
För att visa en bild på en webbsida måste bilden vara av rätt filtyp. Det finns tre primära filtyper för bilder som används på webben, och det är JPG, GIF & PNG.
För att hämta in en bild i HTML använder du dig av <img>
och därefter src
för att bestämma vilken bild.
<img src="bild.jpg">
Spara en bild i mappen webbutvekling och lägg till bilden på din webbsida.
Det går att ändra filens storlek med attributen width och height. Men det bästa sättet att ändra en bildsstorlek är i ett bildredigeringsprogram som tex. Photoshop.
<img src="bild.jpg" width="100px">
Listor
Skriva listor i HTML
För att skriva en lista börjar du med <ul>
<ul>
</ul>
Därefter använder du <li>
för varje objekt som ska listas.
<ul>
<li>Objekt 1</li>
<li>Objekt 2</li>
<li>Objekt 3</li>
</ul>
Lista i listan
För att lista en lista i en lista skriver du en ny lista under det objekt där den ska ligga.
<ul>
<li>Objekt 1</li>
<li>Objekt 2
<ul>
<li>Objekt 2.1</li>
<li>Objekt 2.2</li>
<li>Objekt 2.3</li>
</ul>
</li>
<li>Objekt 3</li>
</ul>

Så lätt var det
- Gör en lista på din webbsida. Lista dina kurser du läser på skolan eller något annat du tycker är kul.
Validera HTML-koden
Validering av HTML-kod är en kontroll att man inte kodat fel någonstans.
Det är ganska smart att validera sin kod REGELBUNDET för att försäkra sig om att man inte skriver in något felaktig som orsakar problem.
Det är väldigt bra att försöka göra rätt från början helt enkelt.
Du kan validera din kod på W3C (World Wide Web Consortium) hemsida. Du hittar den här: https://validator.w3.org/
CodeCademy – codecademy.com
På Codecademy.com kan du lära dig mer om HTML och CSS. Skapa ett konto och börjar med HTML & CSS
Mer om HTML
HTML dokumentet
CSS
Designa HTML med CSS
CSS är ett språk inom webbdesign som används för att ge HTML-element olika stilar, så som storlek, färg, typsnitt, form med mera. Om du vill designa din hemsida så är det CSS du behöver.
Intoduktion till CSS
(Engelska) Introduktion till CSS
JavaScript
JavaScript – Spelprogrammering
Spelprogrammering med JavaScript och html5 1
Spelprogrammering med JavaScript och html5 2
Spelprogrammering med JavaScript och html5 3
Spelprogrammering med JavaScript och html5 4
Spelprogrammering med JavaScript och html5 5