Kmom01/02: HTML & CSS

By . Latest revision .

Vi börjar med en labbmiljö för att bygga webbplatser och med hjälp av den så studerar vi HTML och CSS för att se hur de bidrar när vi bygger en webbplats. HTML står för strukturen och innehållet på webbplatsen och CSS bidrar med utseende och layout.

När det gäller webbsidornas layout så finns det flera grundlayouter för hur man bygger en webbplats. Vi kommer titta på “one-page-website” där man bygger en webbplats i en webbsida. Vi tittar även på en mer klassisk webbplats med webbsidor som har en-, två- och tre-kolumners layout.

Vi tar hjälp av de validatorer och testverktyg som hjälper oss att kontrollera att HTML-dokumenten har en korrekt struktur, liksom att CSS-filerna följer den standard som finns. Vi använder även verktyg för att “mäta” vår webbplats för att se att den håller god kvalitet ur en teknisk synvinkel.

Vi behöver förstå flödet mellan webbläsare, webbserver och källkodsfiler för HTML, CSS, bilder och liknande resurser. Det finns ett flöde som sker när webbläsaren skickar en förfrågan till webbservern, en förfrågan om att hämta resurser från webbservern, webbservern letar upp dessa och levererar till webbläsaren som tolkar filernas innehåll och visar upp en webbsida.

När man bygger en webbplats underlättar det om man har en god katalogstruktur för alla de resurser som bygger upp webbplatsen. Det blir en viktig startpunkt för vårt arbete.

Dagens webbplatser behöver fungera på olika stora skärmar. Det är vanliga datorskärmar, bärbara datorer, läsplattor, olika storlekar av mobiler och sen stora och breda widescreen-skärmar. Vi ser hur responsiv webbdesign kan underlätta detta arbetet.

När du är klar med detta kursmoment så har du grunderna för hur man bygger och driftsätter en webbplats med HTML och CSS.

Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.

#Studieplan & Upplägg

Följande är förslag till en grov och övergripande studieplan för att genomföra kursmomentet. Läs igenom hela dokumentet, innan du bestämmer din plan, det kan finnas mer aktiviteter och lärmoment som är relevanta att utföra inom ramen för kursmomentet.

Kursmomentet omfattar cirka 20 + 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke.

#Introveckan

Introveckan har ett eget detaljschema med aktiviteter som hjälper dig att komma igång med kurs och labbmiljö.

Målet med introveckan är att man kommer igång med kursen, bekantar sig med materialet och har installerat labbmiljön innan veckan är slut.

Grovt sett handlar det om följande aktiviteter.

  • Titta på föreläsning “Kursintroduktion” med introduktion till kursen, innehållet och upplägget.
  • Jobba igenom “Installera kursens labbmiljö” för att komma igång med din labb- och utvecklingsmiljö för kursen.

Avsluta med att genomföra följande uppgift.

Nu är du redo för kursen.

#Vecka 1

Titta på följande föreläsningar. Föreläsningarna kan innehålla ytterligare läsanvisningar.

Delta i lektionen som förbereder dig för veckans uppgift.

Genomför veckans uppgift.

#Vecka 2

Titta på följande föreläsningar. Föreläsningarna kan innehålla ytterligare läsanvisningar.

* Responsiv webbdesign

Delta i lektionen som förbereder dig för veckans uppgift.

Genomför veckans uppgift.

#Resultat & Redovisning

Läs instruktionen om hur du skall redovisa.

För att avrunda detta kmom, se till att följande frågor besvaras i redovisningstexten.

  • Har du provat på webbutveckling, HTML, CSS eller liknande sedan tidigare?
  • Vilken är din TIL för detta kmom?

TIL är en akronym för “Today I Learned” vilket leksamt anspelar på att det finns alltid nya saker att lära sig, varje dag. Man brukar lyfta upp saker man lärt sig och där man kanske hajade till lite extra över dess nyttighet eller enkelhet, eller så var det bara en ny lärdom för dagen som man vill notera.

#Resurser & Referenser

Här finns referenser och resurser som kan användas för studier i det som kursmomentet omfattar.

#Videor och spellista

Kursen innehåller genomgångar och föreläsningar som spelas in eller streamas och därefter läggs i en spellista.

Du kan nå spellistan på “webtec streams h21”.

Du kan även finna äldre inspelade föreläsningar från tidigare kursomgångar. De listas här enbart av historiska skäl.

#Video för orientering

Titta på följande videor/filmer. Filmerna är tänkta att ge dig en liten orientering i det område som behandlas i kursmomentet.

Videorna ovan finner du även i spellistan “ Om webbutveckling (HTML, CSS, PHP, SQL)”.

#Webbutveckling

Webbplatserna web.dev, MDN och W3Schools är relevanta resurser när man vill lära sig webbutveckling med HTML och CSS.

  • web.dev, en Google community för webbutveckling.

Resurser på Mozilla Developers network (MDN).

Resurser på W3Schools.

#WHATWG standarder

Organisationen WHATWG arbetar med standardiseringar av webbteknologier, bland annat HTML och DOM.

WHATWG är sedan 2019 den organisation som standardiserar HTML och DOM, W3C följer deras arbete och återanvänder deras specifikationer. Läs deras överenskommelse.

#W3C standarder

Organisationen W3C arbetar med standardiseringar av webbteknologier, bland annat HTML och CSS.

#HTML & CSS referensmanual

Referensmanualer till HTML och CSS finns på MDN, de är mer lättlästa än de standarddokument som finns.

Minns att det är enkelt att googla sig fram till rätt sida i referensmanualen, pröva “mdn html body” och “mdn css text-align”. Var noga med att du landar på en sida i referensmanualen, det är säkrast så.

Det finns även en Cheatsheet som underhålls av W3C, där kan man söka efter element och konstruktioner och få mer information om dem.

#Responsiv webbdesign

W3Schools har material om hur man bygger grunden i en responsiv webbplats.

#Validatorer och testverktyg

Följande verktyg är bra att ha när man utvecklar webbplatser.

#Kuriosa

Om man vill se hur gamla webbsidor såg ut, eller om man hittar en länk som numer ger 404 (sidan saknas), så kan man använda följande verktyg för att hitta gamla webbsidor.

#Revision history

  • 2021-09-02: (A, mos) Första utgåvan.

Document source.