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.

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.

Uppgift: m02u01

  1. Skapa en html-sida där du visar upp alla taggar som gicks igenom i avsnitten ovan (på webbkoda). Skriv också i dokumentet lite om de taggar som du tycker är svåra eller saker du behöver tänka på när du sedan skall återanvända koden.
    OBS: Denna sidan skall redovisas, men den är främst till för din egen skull som ett referensverk. Hur du bygger upp sidan är upp till dig, men vet du inte hur du skall göra så kan det vara bra att bygga en enkel tabell med alla koder. För att skriva ut en tagg så att den blir synlig i webbläsaren behöver du använda koden < för att skriva ut mindre än-tecknet (se exempel nedan).
  2. Exempel på lösning [klicka för att visa]

    sidan kodförslag
  3. Du skall bygga din egen startkod. Kika på det avsnittet från webbkoda och utgå ifrån hans exempel. Utifrån detta så använder du hans startkod eller så bygger du din egen. Gör den enkel, tänk på att detta är koden du startar alla hemsidor med.
    Visa upp denna startkod på något sätt, du kan bygga in den i dokumentet som du skapde i uppgift 1 eller så lägger du koden i ett inlägg på din WordPress. I WordPress finns det plugins för att visa upp koden färgformaterad, nu kan vara ett bra tillfälle att testa detta. Snipit.io är ju en annan bra tjänst som vi har kikat på i tidigare kurser. Här går det ju också att samla på lite kodexempel till sig själv.

    Om du använder Emmet, fundera på om den grundkoden som kommer där är den du vill använda, skall den anpassas på något sätt? Exakt hur detta görs i din editor får du kolla upp. Google är din bästa vän i denna kursen.

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

    sidan kodförslag

    Så här ser startkoden ut för Emmet i min konfigurering.

    kodförslag

2.3.2 CSS grunder

Webbkoda.se under ombyggnad?

I detta avsnitt blir det tydligt att webbkoda har byggts om eller håller på att byggas om. Vissa delar är dåligt formaterade och vissa länkar är brutna. Jag hoppas ändå att innehållet är så bra att avsnittet fungerar. Är det någon del som du känner att det saknas så säg till så fyller jag på med detta material.

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.

Kodexempel internal

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

Kodexempel external html-filen

<!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>

Kodexempel external css-filen (style.css)

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.

Kodexempel html-filen med css inline

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

Kodexempel mixade skrivsätt

<!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]

sidan kodförslag

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.

Uppgift: m02u03

Nu vill jag att du validerar html och css-kod från uppgift m02u02. Kör även koden genom freeformatter.com för att se om det blir någon skillnad på hur koden ser ut.

2.5 Landing page / Startsidan

Vi avslutar momentet med en inlämningsuppgift.

Inlämningsuppgift: Landing page version 1

Du skall bygga den första versionen av en landing page. Denna sida skall ligga som startsida på din webbplats (subdomän: www).

Denna sida kommer du vara och pilla i lite varje gång ett nytt moment skall lämnas in så den kommer du skapa flera olika versioner av.
Följande krav finns på din sida;

  • Ditt namn skall tydligt stå på sidan.
  • Du skall länka till uppgift m02u03.
  • Det skall finnas en länk till din startsida på wordpress (wp.dindoman.online)
  • Lägg lite tid och tanke på din sida, den ligger på nätet så den går att hitta. Tänk på att detta är sidan som någon mest troligt hittar och hamnar på.
  • Tänk igenom och förbered hur du skall kunna länka till alla moment som skall redovisas i denna kursen, ca sex stycken + några projekt.
    Läser du Webbserverprogrammering så kommer du lägga även dessa projekt här.

Hjälp vid inlämning

  • Se till att din sida heter index.html och att du har lite koll på lämplig struktur för html-filer, css-filer och eventuellt bilder.
  • Följ guiden för FileZilla, installera och konfigurera så att du kan koppla upp dig mot din webbplats.
  • Ta bort filen binero_default.html och lägg upp alla dina filer.
    TIPS: Om alla filer har en bra struktur på din dator så är det lätt att flytta upp hela webbsiten med mappar och allt till din webbplats.
  • Testa din sida, se till att alla css-filer, bilder och länkar fungerar.
  • Skriv nu ett inlägg på din WordPress där du länkar till din Landing page och sidan med lösning på uppgiften m02u03. Ta en skärmdump på valideringen av kod i m02u03 eller på din landing page. Lägg in denna skärmdump på lämpligt sätt i inlägget.
    Skriv också en kortare text om hur du tycker att detta momentet har gått, vad har varit svårt och om något har varit roligt.