Teknik

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

  1. Ladda ner Brackets här: Brackets.io
  2. Installerar Brackets på din dator.
  3. Skapa en mapp som du döper till webbutveckling.
  4. Skapa en ny fil i Brackets “Arkiv/Ny”
  5. Spara den nya filen som index.html i mappen webbutveckling
  6. 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>
  1. Allt innehåll som ska synas på hemsidan lägger vi inom <body> taggen.
  2. Det som skrivs mellan <!– och –> är en kommentar i koden och syns inte på webbsidan.
  3. Det du skriver i <title>, dvs webbsidans titel syns på webbläsarens “tab”.
  4. 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>
  1. h1 betyder header 1, på svenska rubrik 1. Det finns 6 olika rubriker. h1 är störst och h6 är minst.
  2. p betyder paragraph, på svenska stycke.
  3. Spara filen
  4. Tryck på “blixten” längs upp till höger i Brackets
  5. Voala – Din webbsida syns i Chrome 🙂
  6. 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>
  1. 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.

Använd INTE å, ä, ö, mellanrum eller konstiga tecken i bildens namn. Du får däremot använda bindestreck och understreck i filnamnet, så använd det istället för mellanrum.

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

  1. 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

Pages

© 2015 Falth Production