2. Moment02 - Grunder HTML & CSS + landing page

I detta moment kommer vi börja koda. Först kommer vi sätta upp den miljö vi behöver, sedan kommer vi lära oss grunderna i att bygga en hemsida och slutligen kommer du få bygga din första egna webbsida som skall bli startsidan på din webbplats.

2.1 Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

2.1.1 Centralt innehåll

• Märkspråk och deras inbördes roller, syntax och semantik – där det huvudsakliga innehållet är standarderna för HTML och CSS samt orientering om Ecmaskript och dokumentobjektsmodellen (DOM).
• Teckenkodning, begrepp, standarder och handhavande.
• Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet.

2.2 Utvecklingsmiljö

För att kunna utveckla webbsidor behöver vi skapa oss en lämplig utvecklingsmiljö. Denna utvecklingsmiljön består av några olika typer av program och vi kommer installera några nu och sedan lägger vi till resten allt eftersom vi behöver dem.

Om du vill kika på genomgången som körs via webbkoda om olika verktyg så finns den här.

2.2.1 IDE

Vi börjar med en IDE. Det finns ett eget kunskapsdokument för IDE.

2.2.2 Webbläsare

För att nå innehållet på webben så behövs en webbläsare. Det du kommer märka i kursen är att olika webbläsare har en tendens att visa upp webbsidor på lite olika sätt. Speciellt tydligt blir detta när du inte skapar helt korrekt kod. I skolverkets kursdokumentation så står det att du skall testa dina produkter i någon/några/flera webbläsare. Därför är det viktigt att du laddar ner några olika webbläsare för att se hur webbsidorna fungerar i olika läsare. De två webbläsare som du bör ladda ner, om du inte redan har dem tillgängliga, är Chrome och FireFox. Chrome är bra för att det är den överlägset vanligaste webbläsaren samt att den har riktigt bra inbyggda verktyg för webbutveckling som vi kommer kika på en del senare under kursen. Firefox är bra då den skapas av Mozilla vilket är en organisation där flera av utvecklarna dessutom är medlemmar i den organisationen som tar fram och utvecklar reglerna för HTML och CSS. Detta innebär att i FireFox så kommer många nya saker som ännu inte är, eller inte kommer bli, standard att kunna testas.

Det är alltid bra att ladda ner ytterligare någon webbläsare för tester under kursens gång. Hur många och vilka avgör du själv.

Kikar vi på statistiken under den senaste månaden så är det tydligt vilka webbläsare som används. Här kan du analysera lite djupare genom att kolla på om det skiljer sig beroende på var användarna finns och/eller vilken plattform som används.

Source: StatCounter Global Stats - Browser Market Share

2.2.3 Google Drive

Google Drive förutsätter jag att du har installerat och förberett för synkning sedan tidigare. Att säkerhetskopiera filerna är viktigt ifall det skulle bli en datorkrasch.

Här finns Kunskapsdokument: Google Drive om du behöver detta.

2.3 Webbkoda

Vi kommer använda oss av webbsidan Webbkoda.se för att lära oss grunderna i HTML/CSS. Denna webbsidan stödjs av Internetfonden och Internetstiftelsen i Sverige och är skapad av läraren Erik Malmsköld. Sidan har byggts om lite och för tillfället är den lite svårnavigerad för att på ett bra sätt komma in i arbetet. Här följer i punktform mitt tips för hur jag vill att ni tar till er informationen.

OBS! Vissa filmer kan komma dubbelt, då behöver du inte se dem två gånger.... Allt eftersom ni jobbar med materialet så kan vägen nedan ändras.

• Webbverktyg, 2 filmer
• Starta webbprojekt, 2 filmer

2.3.1 HTML grunder

Gå in på webbkoda.se -> webbtekniker -> HTML. Jobba nu igenom de olika avsnitten;

• Startkod HTML
• Text & rubriker
• Länkar och navigering
• Bilder
• Listor
• Enkla strukturtaggar

Välj själv hur du jobbar med de olika delarna, vissa har både kodexempel och en videofilm medan andra bara har text och kodexempel. Gör sedan någonting av de taggar du jobbar med.
Jag har ännu aldrig träffat någon elev som bara lär sig programmera genom att bara läsa kod eller kolla på film.

2.3.2 CSS grunder

Gå in på webbkoda.se -> webbtekniker -> css. Jobba nu igenom de olika avsnitten;

• Introduktionsavsnittet till css
• Färger
• Text & typografi
• Block & boxar
• Boxmodellen

Välj själv hur du jobbar med de olika delarna, vissa har både kodexempel och en videofilm medan andra bara har text och kodexempel. Träna nu på att ge olika selektorer olika egenskaper.

När vi skriver css-kod så finns det tre sätt att göra detta på;

• Internal
• External
• Inline

2.3.2.1 Internal

Internal är troligtvis det sätt som du oftast kommer i kontakt med css för första gången. Internal innebär att all css-kod är skriven i samma dokument som html-koden.

<!DOCTYPE html>
<html lang="sv">
<head>
  <title>Startkod</title>
  <meta charset="utf-8">
  <style type="text/css">
    body{
      background: #F1E0C5;
    }
    h1{
      color: #71816D;
      margin-left: 20px;
    }
    p{
      color: #342A21;
    }
  </style>
</head>
<body>
  <h1>Startkod</h1>
  <p>Detta är min startkod.</p>
</body>
</html>

2.3.2.2 External

External innebär att du skriver css-koden i en extern fil som du sedan länkar in i varje html-fil som skall använda just den css-filen. Detta är ett smidigare sätt att jobba på när du bygger en webbplats med många sidor. Tänk lite på hur vi använder oss av funktioner när vi programmerar, om den koden vi skriver behövs på flera olika ställen så är det enklast att placera detta på ett ställe som är lätt att nå. En webbplats som har många sidor och många css-instruktioner blir också snabbare om vi använder oss av en extern css-fil då denna laddas ner av webbläsaren en gång och sedan hämtas ur minnet varje gång. Kursolle är uppbyggt på knappt 2000 filer varav 100-150 är sidor som visas i webbläsaren. Css-koden är uppdelad i fem filer som tillsammans består av kanske 10000 rader med css-intruktioner. Om detta skulle ligga i varje sida så skulle laddtiden vara mycket större och framförallt skulle det vara problematiskt ifall jag skulle vilja ändra något i css-instruktionerna.

<!DOCTYPE html>
<html lang="sv">
<head>
  <title>Startkod</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Startkod</h1>
  <p>Detta är min startkod.</p>
</body>
</html>

body{
  background: #F0F4EF;
}

h1{
  color: #0D1821;
  margin-left: 20px;
}

p{
  color: #344966;
}

2.3.2.3 Inline

Inline är det tredje alternativet och det kan vi använda när vi vill formatera en specifik html-tagg. Det är fullt möjligt att formatera en hel webbplats/webbsida på detta sätt men det tar tid och sedan är det lite lurigt att få till ett enhetligt utseende. Det skall dock inte underskattas att kunna göra detta vid något enskilt tillfälle. Vi kommer senare kolla på möjligheten att skriva css-instruktioner för klasser och id'n och det är ofta att föredra.

<!DOCTYPE html>
<html lang="sv">
<head>
  <title>Startkod</title>
  <meta charset="utf-8">
  <style type="text/css">
    body{
      background: #F1E0C5;
    }
    h1{
      color: #71816D;
      margin-left: 20px;
    }
    p{
      color: #342A21;
    }
  </style>
</head>
<body>
  <h1>Startkod</h1>
  <p>Detta är min startkod.</p>
  <p style="color: red;">Denna paragrafen skall vara röd så att den syns.</p>
  <p>Denna paragrafen är formaterad som vanligt.</p>

</body>
</html>

2.3.2.4 Att blanda olika skrivsätt för css

Ni kommer i början att jobba för att hitta er stil att skriva css och det är inte fel att använda någon specifik av de tre olika skrivsätten. För större webbplatser så är external absolut att föredra. Ofta använder jag internal för att snabbt kunna testa saker, för att sedan flytta ut koden i en extern fil. Inline använder jag troligtvis bara när det är något speciellt element som skall kodas och jag vet/tror att detta är enda gången jag kommer göra just denna formatering i mitt projekt.

Det är möjligt att blanda dessa tre olika skrivsätten och då kommer prioriteringen vara att inline kör över alla andra skrivsätten. Om internal eller external kommer gälla om de har css-instruktioner till samma element avgörs i vilken ordning de skrivs. I exemplet så läser jag in den externa css-filen före de interna instruktionerna. Detta innebär att de interna instruktionerna kör över de som lästs in från den externa filen.

<!DOCTYPE html>
<html lang="sv">
<head>
  <title>Startkod</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
  p{
    color: green;
  }
  </style>
</head>
<body>
  <h1>Startkod</h1>
  <p>Detta är min startkod.</p>
  <p style="color: red;">Denna paragrafen skall vara röd så att den syns.</p>
</body>
</html>

Som du märker så finns det en del att tänka på om du blandar skrivsätten så risken är stor att det vållar dig mer problem än vad det är värt. Bättre då att du skapar en struktur som du trivs med och som är stabil så slipper du lägga onödig tid på att felsöka din kod.

Uppgift: m02u02

Du skall nu med hjälp av css formatera den fil du skapade i uppgift 1 när du jobbade med HTML. Lek fritt med färg och form för att testa en mängd olika selektorer och ge dem egenskaper. Inget kan bli fel i denna övning, vill du ha gröna prickar på en röd bakgrund så gör det.
För din egen skull kan det vara bra att skriva små kommentarer och dokumentera olika delar som du inser att du kommer använda dig av senare.

Exempel på lösning [klicka för att visa]

2.4 Validering

Även om vi får mycket hjälp med kodningen av vår editor och webbläsaren så är det viktigt att den kod vi producerar är korrekt. Detta kan vi själva förenkla genom att indentera koden men det finns också sidor på nätet som hjälper oss med detta.

Gå till Markup Validation Service och klistra in din källkod. Om sidan validerar korrekt så får du meddelandet Document checking completed. No errors or warnings to show. Det går också att länka till valideringen och skicka med url till en specifik sida. Vill du kika på hur valideringen ser ut på denna sidan så följer du länken, https://validator.w3.org/nu/?doc=http://kursolle.se/weuweb01/moment02.php. Du kommer då få se ett antal fel som finns i min kod, både några varningar men också några rena fel. Om jag fixar dessa så kommer webbsidan laddas snabbare, få bättre rating av google för att komma högre upp vid sökning. Nu skall vi inte gå igenom alla fel som jag har på min sida men några av dessa fel beror på länkar som klistrat in från andra tjänster och då låter jag det vara eftersom den sida som jag har tagit koden ifrån vill ha det på detta sättet. Vi kommer kika närmare på validering senare.

På samma sätt kan du validera css-koden genom att gå till CSS Validation Service.

Förhoppningsvis är nu både html och css godkända, om de inte är godkända försök lösa de icke korrekta koder som du har skrivit. Ta för vana att alltid validera din kod, det kommer jag göra när jag bedömer ditt arbete. Klarar din sida inte valideringen så kommer du få rätta detta.

När du kodat en stund så finns det stor risk att din kod inte är så snygg längre, då finns det flera tjänster på nätet för att snygga till din kod. En som är smidig att använda är freeformatter.com. Ta även här för vana att snygga till din kod, om inte annat så för din egen skull. Att jobba i stökig kod ökar sannolikheten att du skriver felaktig kod. Webbläsaren struntar i att din kod är stökig, för den fick du gärna skriva allt på en enda rad.

I kunskapsdokumentet Validering kommer det finnas en samling av tips och verktyg för att validera din kod och dina projekt på bästa sätt.

2.5 Landing page

Vi avslutar momentet med en inlämningsuppgift.