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.

2.2.1 IDE

Vi börjar med en IDE. Vi kommer använda Visual Studio Code och detta installeras och ställs in i det material som används under kursens gång så du behöver inte installera detta ännu.

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 Undervisningsmaterial

Under hösten 2023 så byggdes detta material om och då var eleverna med och valde ut resurserna vi använder för att lära oss grunderna i HTML och CSS. Valet föll på ett material skapat av Bro Code som finns tillgängligt på Youtube. Resultatet av undervisningen föll väl ut så vi fortsätter på samma sätt så länge materialet är tillgängligt.

Kursen är totalt fyra timmar lång och jag kommer dela upp innehållet i mindre delar och även där jag tycker att det behövs skjuta in lite egna delar.

Jag rekommenderar att du jobbar med detta momentet enligt ordningen nedan, men om du hellre vill göra det på något annat sätt sä fungerar det också. Målet är att du i detta momentet skall få till dig grunderna i HTML & CSS för att sedan kunna göra en första uppgift som skall läggas upp som landing page på din domän.

2.3.1 Introduction to HTML

I detta avsnittet så får du en kort introduktion till HTML, du installerar VSCode och bygger dina första webbsidor.

Min första rekommendation är att du lägger alla dina filer i en mapp som ligger i Google Drive, detta för att det skall vara säkerhetskopierat och att du inte riskerar att förlora ditt arbete vid en eventuell datorkrasch. Nästa tips är att hålla koll på dina filer och mappar så att du har en struktur som fungerar, detta kommer jag återkomma till.

Du väljer själv hur mycket kod du skriver när du följer med i tutorial men jag har ännu inte träffat en enda utvecklare som inte behöver skriva egen kod för att lära sig. Ta heller inte bort något av de du skapar utan bygg en stor fil eller flera mindre filer med de exempel som byggs upp i tutorial. Att samla allt i en större fil gör ju att du kan skapa ditt egna referensmaterial, det är inte så dumt nu i början.

2.3.2 hyperlinks

Länkar, vad vore webben utan länkar mellan sidor och inom sidor? Här går han igenom detta.

2.3.3 images

Dags för bilder, här är det extra viktigt att jobba med bra filnamn och att hålla kolla på var någonstans bildfilen ligger. Att länka till bilder från olika mappar är en viktig kunskap och när du har gått vilse i din egna mappstrukur några gånger så förstår du hur viktigt det är att hålla koll på detta. En annan sak att lägga märke till är vad som händer om du har en bild som heter Fin båt.jpg och vilka problem detta kan ge. Undvik att blanda versaler och gemener, undvik mellanslag i samtliga mapp och filnamn och undvik också svenska tecken som å, ä och ö.

Att använda bilder är lätt men det är tyvärr inte så att du har rätt att använda bilder hur du vill. Detta kommer vi återkomma till senare i kursen. Det finns några ställen på nätet där det är ok att använda bilder fritt och här finns några bilder du kan använda på ett säkert sätt, bilderna nedan är hämtade från Pexels.

• Båt
• Mest rött
• Skog

2.3.4 audio

I detta avsnitt så jobbar han med ljudfiler och börjar med att ladda ner några sådana från Youtube Audio Library. Ladda ner valfria filer därifrån för att träna på att använda ljud på din hemsida.

2.3.5 video

I detta avsnitt jobbar du med att lägga in ett videoklipp på din webbsida. Från Pexels hämtade jag en film på en skidåkare i formaten mp4 och webm.

2.3.6 favicon

Favicon används för att visa en icon brevid url:en till din webbsida. Det är också denna lilla bild som finns med när du skapar ett bokmärke. Här kan du använda en egen bild, skapa en bild för ändamålet eller testa att använda min bild från Från Pexels.

Tidigare så kunde man endast använda en annan bildtyp för att skapa favicons och det var bilder med ändelsen .ico. Fördelen med dessa var att bildfilerna var mycket mindre vilket innebär att de laddas snabbare. Det finns tjänster på nätet som gör om bildfiler till .ico-filer men det kräver ofta att orginalbilden inte är för stor eller för detaljerad för att det skall bli bra. Många exempel på nätet om favicons handlar om .ico-filer så det kan vara bra att veta.

2.3.7 text formatting

Här går han igenom grundläggande textformatering som kan skötas via html. Han nosar också för första gången på CSS och ger ett kort exempel på hur det kan användas.

2.3.8 span & div

Han går igenom två element (<span> och <div>) som är grundfundament i HTML och som ni kommer använda när ni sedan skall bygga upp strukturen på en hemsida. <div>-elementet, och andra strukturelement som fungerar likadant, kommer ni använda väldigt ofta medan <span>-element troligtvis är något ni använder mer sällan. Skall jag vara ärlig så tror jag aldrig att jag har använt ett <span>-element på någon webbsida som jag har skapat. Sedan om det säger mest om elementet eller mig får ni ni avgöra själva.

2.3.9 lists

Listor är användbart, här går han igenom hur du skapar dessa.

2.3.10 tables

Skall vi presentera data på något sätt så är tabeller klart användbart. Här går han igenom grunderna när det gäller tabeller.

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.3.11 buttons

Att skapa en knapp kan vara användbart t.ex. för att skapa ett alternativ till en vanlig textlänk. Här går han igenom hur en knapp kan skapas. Han visar också ett exempel på hur du kan använda JavaScript för att använda knappen för att aktivera en händelse. JavaScript berör vi nästan inte alls i denna kurs men det kan ändå vara kul att se ett enkelt exempel på vad man kan göra. Se denna del som överkurs.....

2.3.12 forms

Formulär är något som ofta skapas på olika webbsidor men för att formulären skall kunna vara användbara så behöver de på något sätt kopplas med JavaScript (behandlas knappt alls i denna kursen) eller med ett programmeringsspråk back-end (vilket vi jobbar med i kursen Webbserverprogrammering01). Så hela detta avsnittet är egentligen överkurs för tillfället men en kunskap du behöver i början av kursen Webbserverprogrammering01. Bestäm själv om du vill köra avsnittet nu eller spara det till nästa kurs. Vill du på egen hand leka lite med JavaScript (Bro Code har en kurs i JavaScript som är åtta timmar lång. Detta är för den som verkligen är intresserad och går utanför denna kursen).

2.3.13 headers & footers

Dags att kika lite på strukturelementen header och footer. Han pratar om att header och footer är semantiska element vilket innebär att elementen inte bara har ett innehåll utan elementets namn ocksås har en betydelse. Kika på filmen och se hur du använder elementen så återkommer jag nedanför om fler semantiska element.

2.3.14 Semantiska element eller vad är skillnaden mellan HTML 4.01 och HTML5

Vi har tidigare kikat på <div>- och <span>-element som går att fylla med innehåll och även formattera med CSS-kod vilket visats i filmerna. Vi kan också bygga upp en webbsida med många sådana element och det kommer fungera riktigt bra att visa upp sidan i en webbläsare. Vi kör ett exempel:

<div>
    <h1>Kanonsidan</h1>
</div>

<div>
    <h2>Rubrik</h2>
    <p>Lorem ipsum dolor sit, amet consectetu adipisicing elit. Earum dolorum dolor molestiae pariatur tempora quisquam cumque minima beatae. Distinctio laboriosam, itaque impedit rem veritatis illo magnam voluptatem possimus. Ab, at.</p>
</div>

<div>
    <p>Författare: Johan <br>
    Datum: 23-09-12</p>
</div>

<header>
    <h1>Kanonsidan</h1>
</header>

<article>
    <h2>Rubrik</h2>
    <p>Lorem ipsum dolor sit, amet consectetu adipisicing elit. Earum dolorum dolor molestiae pariatur tempora quisquam cumque minima beatae. Distinctio laboriosam, itaque impedit rem veritatis illo magnam voluptatem possimus. Ab, at.</p>
</article>

<footer>
    <p>Författare: Johan <br>
    Datum: 23-09-12</p>
</footer>

Så den stora fördelen med detta är att det nu är lättare att strukturera webbsidor så att vi kan få en annan överblick av innehållet. Förutom den uppenbara fördelen att koden/strukturen blir mer lättläst så har HTML5 tillfört nya element och funktioner i inte fanns tidigare. Det finns dock några nackdelar med de semantiska elementen och det är dels att de i HTML5-standarden finns mer regler kring hur man får/skall använda t.ex. <article>-elementet ovan. Det måste innehålla ett rubrikelement för att inte ge en varning när vi sedan validerar koden. Ett annat problem är att de ibland inte känns som att de nya semantiska elementen räcker till. Bygger vi en större sida och har använt <article>, <section> och <main> så börjar det ta slut på strukturelement. Till slut så hamnar vi ofta i läget att vi ändå använder oss av <div>-element och då skulle vi kunna använda sådana hela vägen.

Så trots både för- och nackdelar så är HTML5 här för att stanna. Bro Code kommer senare gå igenom både klasser och id som går att koppla till våra element och då ser du att det kommer vara möjligt att blanda både semantiska element och icke semantiska element. Extra tydligt blir detta senare i kursen då vi introducerar CSS-ramverk.

Det finns flera saker att ta hänsyn till när det gäller semantiska element och hur dessa hanteras. Men de flesta eventuella problem upptäcker du när du validerar din kod. Vill du verkligen förstå mer så kommer här två länkar. Se det som överkurs och du klarar hela kursen utan att ha exakt koll på just detta. Denna artikeln listar alla semantiska element i HTML5 och går även igenom vissa saker som kan vara bra att tänka på när man använder dessa. w3schools har också en genomgång med kodexempel.

2.3.15 Introduction to CSS

Äntligen är det dags att börja jobba med CSS.

2.3.16 colors

Bro Code går igenom olika sätt som färg kan anges på i CSS.

2.3.17 fonts

Bro Code visar hur du använder fonter på dina webbsidor. Hur du använder font från Google Fonts är viktigt, det kommer vi göra senare i kursen.

2.3.18 borders

Dags att skapa ramar runt våra element och då använder vi borders.

2.3.19 shadows

Bro Code leker lite med skuggor på text och boxar. Bara för att det finns möjligheter att leka med design och utseende så behöver vi kanske inte utnyttja det till max. Glöm inte att det vi vill förmedla skall vara enkelt att läsa. Däremot är det alltid tillåtet att leka ordentligt i vår sandbox.

2.3.20 margins

I detta avsnitt så jobbar han med marginaler på våra olika element för att kunna bestämma avståndet mellan olika element.

Han pratade snabbt även om attributet padding utan att jobba med det. När filmen för avsnittet är klart, lägg till en border för att se var bordern på ditt element går. Lägg sedan till padding och använd det på samma sätt som du precis gjorde med margin. Vad händer?

Skärmklipp från denna sidan

Kika lite på boxen Momentet byggs om som är den första boxen av denna typen längre upp på sidan. På den högra sidan av bilden så ser du det som kallas för boxmodellen. Just denna vyn ser du om du högerklickar på webbsidan och väljer Inspektera i Google Chrome.

Det som du ser i denna bilden är vilka värden som är angivna som margin, border, padding och content. Dessa värden kan vara olika beroende på hur bred visningsytan (viewport) är på din webbläsare för tillfället.

Om vi kollar vad bilden för boxmodellen visar så ser vi att ytan som är orange talar om vilka värden som är aktuella för marging, då ser vi att det är 7.2px upe och nere och 21.6px på höger och vänster sida.
Border har endast ett värde och det är 4px på vänster sida vilket gör att boxen har en blå linje på vänster sida som är 4px bred.
Sedan kommer padding som bestämmer avståndet mellan border och innehållet i boxen. Här ser vi att avståndet är 14.4px på höger och vänster sida medan det inte är angivet något värde i toppen och botten. Om det inte är angivna några värden så kommer defaultvärdet från webbläsaren att användas.

Så med en kombination av margin och padding så går det att styra utseendet på våra element.

Gå nu tillbaka till din senaste kod och lek lite med padding också.

2.3.21 float

Float är en teknik för att kunna flytta olika element så att vi får större frihet att positionera olika element i relation till varandra. Detta är det enklaste sättet att skapa en enkel formatering av en webbsida.

2.3.22 CSS: Internal - external - inline

Innan vi avrundar momentet och plockar fram uppgifter som du skall arbeta med så känns det som att det är läge att åter gå tillbaka till de tre olika varianterna av CSS som vi kan använda oss av.

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.

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 webformatter.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. freeformatter.com är en annan liknande tjänst och det finns dessutom ytterligare ett antal.

2.5 Landing page

Vi avslutar momentet med en inlämningsuppgift.