Kurshandbok för
Responsiv webbdesign
Studietips från Pär
Min pedagogiska grundidé bygger på att lära sig programmering är som ett hantverk som kräver en kombination av teoretisk input och praktisk muskelminne. För att bygga en solid grund rekommenderar jag följande metodik: Avsätt 2–4 timmar dagligen. Varva läsning i kurslitteraturen med att se de inspelade föreläsningarna för att få olika perspektiv på samma koncept. Börja med att 'skriva av' befintliga kodexempel. Det kan låta enkelt, men det tränar ögat att se detaljer och syntax som man annars missar. Gör små, kontrollerade förändringar i koden och testkör direkt. Vad händer om du ändrar en loop eller en variabeltyp? Det är i felsökningen den verkliga förståelsen föds. Skapa ett eget 'projekt' som följer dig genom kursen. Det kan vara ett system för en bilfirma, ett register för en idrottsförening eller en personlig boklista. Genom att applicera det du lärt dig på en 'verkligt' projekt får du en praktisk kompetens.
Veckoplanering
Vecka 46
Kursmaterial
- Jennifer Niederst Robbins, Learning Web Design, 6 upplagan 2025, O'Reilly.
Webbsidans tre stora delar Visar en websidas tre stora delar: html, css och javascipt.
Kap 4 HTML overview Inspelning utifrån kursbokens powerpoints: Elements & Attributes: Hur vi bygger upp taggar och ger dem egenskaper. Minimal Structure: Skelettet som krävs för ett korrekt HTML-dokument. Block vs. Inline: Hur olika element tar plats och beter sig på sidan. Troubleshooting: Hur du validerar din kod och hittar fel med rätt verktyg.
Kodexempel Kap 4 HTML overview Kodexempel Kap 4: Vi omsätter teori till praktik med konkreta exempel. Lighthouse-optimering: Så strukturerar du din HTML för att få 100% poäng på tillgänglighet, SEO och prestanda. Best Practices: Vikten av semantiska taggar och korrekt länkning av resurser. HTML-mallen: Vi går igenom en universell mall som du kan använda som stabil grund för alla dina framtida webbprojekt.
Kap 5 Marking up text Inspelning utifrån kursbokens powerpoints: Struktur & Layout: Skillnaden mellan generella block-element, sidorganiserande element och radbrytningar (br). Listor: Hur man skapar ordnade och oordnade listor på rätt sätt. Inline-nivå: En genomgång av textnära element och skillnaden mellan generiska taggar som div och span. ARIA & Tillgänglighet: En första introduktion till hur vi gör webben tillgänglig för alla. Specialtecken: Hur man använder escaping characters för att visa symboler korrekt.
Kodexempel Kap 5 Marking up text Går igenom html kodexempel relaterat till kap 5. Citat & Källor: Hur du markerar upp citat och referenser på ett korrekt sätt. Definitionslistor: Vi tittar på dl, dt och dd för att strukturera ordlistor eller förklaringar. Article-taggen: En kort genomgång om när och varför man använder article för fristående innehåll. Datum & Tid: Hur du markerar upp tidskritiskt innehåll med time-taggen för bättre sökbarhet och tillgänglighet.
Kap 6 Adding links Inspelning utifrån kursbokens powerpoints: A-elementet: Grunden för alla länkar och hur attributet href fungerar. Absoluta vs. Relativa URL:er: Skillnaden mellan att länka till externa sajter och att navigera mellan dina egna lokala filer. Fragment (Länka inom en sida): Hur du skapar bokmärken och länkar på samma sida med hjälp av ID. Target: Hur du styr om en länk ska öppnas i en ny flik eller i samma fönster. Speciallänkar: Hur du skapar klickbara länkar för e-post (mailto) och telefonnummer (tel).
Kodexempel Kap 6 Adding links Mappstruktur: Hur du organiserar dina HTML-filer och bilder på ett logiskt sätt. Länka mellan sidor i olika mappar: Hur du "hoppar" in i eller ut ur mappar med hjälp av ./ och ../ Bilder: Hur du använder img-taggen för att hämta bilder som ligger i en separat bildmapp.
Kodexempel Kap 6 Adding links inom samma sida Länkar i samma html-sida: Hur du använder id attributet och # i dina länkar för att få webbläsaren att skrolla till ett specifikt ställe i html sidan. Användningsområden: Hur man bygger en innehållsförteckning eller en "Tillbaka till toppen"-knapp.
Kap 7 Adding images Inspelning utifrån kursbokens powerpoints: Bildformat för webben: Så som JPG, PNG, WebP eller GIF. IMG-elementet: Hur man praktiskt lägger till bilder i sin HTML-kod. Attributen src och alt: Hur du anger rätt sökväg till bilden och varför den alternativa texten är avgörande för tillgängligheten. Bredd & Höjd: Hur du använder attribut för att styra bildens storlek när den laddas. SVG-grafik: Hur du lägger till skalbar vektorgrafik som ser knivskarp ut på alla skärmar.
Kodexempel Kap 7 Adding images Bilder som länkar: Hur du omsluter en bild med en ankar-tagg för att göra hela bilden klickbar. Image Maps (Bildkartor): Hur du definierar specifika regioner (koordinater) i en och samma bild som leder till olika destinationer. Mappstruktur för media: Best practices för att organisera dina bildfiler i projektet. CSS & Bildlayout: Hur du använder CSS-egenskaper som float, margin och display för att snyggt placera bilder i förhållande till din text.
Att göra
- Ladda ner VS Code för att kunna koda och editera dina HTML-, CSS- och JSfiler.
- I VS code installera 'Live server' via extentions ikonen till vänster. Komma igång med Live server i VS code
- Fixa git i VS code Versionhantering med git i VS code
- Komma igång med VS code och git
- Längre video om att komma igång med VS code och git
- Koda tillsammans med live share
- Skapa din egna digitala portfolio som visar vem du är och vad du kan som systemvetare använd html taggar från kapitel 4–7. Sidorna ska även vara byggd med semantiska taggar (header, nav, main, section, article, footer) för att skapa en logisk och modern struktur. Validering: Din kod måste passera utan fel i både W3C HTML. Lighthouse: Gör en analys i Chrome Lighthouse och optimera sidan tills du når 100% på Performance, Accessibility, Best Practices och SEO.
- Skapa din egna blogg med html taggar från kapitel 4–7. Sidorna ska även vara byggd med semantiska taggar (header, nav, main, section, article, footer) för att skapa en logisk och modern struktur. Validering: Din kod måste passera utan fel i både W3C HTML. Lighthouse: Gör en analys i Chrome Lighthouse och optimera sidan tills du når 100% på Performance, Accessibility, Best Practices och SEO.
- Skapa ditt egna CV med html taggar från kapitel 4–7. Sidorna ska även vara byggd med semantiska taggar (header, nav, main, section, article, footer) för att skapa en logisk och modern struktur. Validering: Din kod måste passera utan fel i både W3C HTML. Lighthouse: Gör en analys i Chrome Lighthouse och optimera sidan tills du når 100% på Performance, Accessibility, Best Practices och SEO.
- Skapa webbplats för en lokala byggfirma med html taggar från kapitel 4–7. Sidorna ska även vara byggd med semantiska taggar (header, nav, main, section, article, footer) för att skapa en logisk och modern struktur. Validering: Din kod måste passera utan fel i både W3C HTML. Lighthouse: Gör en analys i Chrome Lighthouse och optimera sidan tills du når 100% på Performance, Accessibility, Best Practices och SEO.
- Examination: Se kursrummet
Instuderingsfrågor
- Vilken tagg används för att berätta för webbläsaren vilken version av HTML som används?
- Var placeras metadata om webbsidan, såsom titel och teckenkodning?
- Vilken tagg omsluter allt innehåll som faktiskt syns på webbsidan?
- Vilken tagg omsluter huvudinnehållet på en webbsida?
- Vilken tagg används för att definiera sidans introduktionsinnehåll, ofta innehållande en logotyp och rubrik?
- Kan man ha flera <header>-element på samma sida?
- Vilken tagg är bäst lämpad för att innehålla kontaktinformation eller copyright-text, adresser?
- Vilken tagg används för att gruppera innehåll som hör ihop tematiskt, till exempel olika produktkategorier? ämnesområden
- Vilken semantisk tagg är bäst lämpad för att omsluta en oberoende del av en sida, till exempel ett blogginlägg, information om en bil, en produkt eller personal?
- Vilken tagg används för att skapa ett vanligt textstycke?
- Hur många nivåer av rubriktaggar finns det i HTML?
- Varför ska man aldrig hoppa över rubriknivåer (t.ex. gå direkt från <h1> till <h3>)?
- Vilken tagg används för att skapa en punktlista?
- Vilken tagg används för att skapa en numreradlista?
- Vilken tagg används för varje enskilt element i en lista?
- Vilket generiskt element används för att gruppera innehåll på blocknivå, ofta för styling?
- Vad är den största skillnaden mellan att använda <div id="nav"> och att använda den semantiska taggen <nav>?
- Vilken tagg används för att citera ett längre stycke från en annan källa?
- Vilken tagg används för att citera ett längre stycke från en annan källa?
- Vilken tagg används för att skapa en klickbar länk?
- Hur länkar man till en html sida filnamn.html som ligger i en undermapp som heter "bilder"?
- Vad kallas en länk som leder till en helt annan webbplats?
- Vilket tag används för att skapa en bild?
- Vilket attribut anger sökvägen till bilden?
- Vilket element kan erbjuda alternativa bildformat så att webbläsaren kan välja det mest optimala
- Vilket attribut på img-taggen hjälper webbläsaren att reservera plats för bilden innan den laddats, så att sidan inte "hoppar"?
- Vilken tagg används ofta för att gruppera navigeringslänkar?
- Vilken taggar används ofta inuti en tagg där man gruppera navigeringslänkar?
- Vilket element används för att markera en tematisk paus, vilket oftast visas som en vågrät linje?
- Vilken tagg används för att markera en specifik tidpunkt eller ett datum?
- Vilken är den vanligaste teckenkodningen som används i HTML5 för att stödja tecken som å, ä och ö?
- Vad innebär det att ett element är ett "tomt element" (void element), och ge ett exempel?
Vecka 47
Kursmaterial
Kap 8 Table markup Inspelning utifrån kursbokens powerpoints: Hur en tabell byggs upp logiskt i HTML. Hur man använder taggar som som table, skapa rader med tr och dataceller/columner med td samt rubrikceller med th. För att ge hela tabellen en titel används en caption.
Kodexempel Kap 8 Table Markup hur man använder rowspan och colspan.
Kap 9 Forms Inspelning utifrån kursbokens powerpoints: Går igenom Hur formulär fungerar, olika fomulärstaggar som textfält, knappar, menyer, speciala fält text date time.
Kodexempel Kap 9 Forms Visar ett beställningsformulär för pizzeria som använder olika HTML-input typer för att samla in data: text / tel / email: För korta fritextsvar som namn, adress och kontaktuppgifter. textarea: För längre fritext (leveransinstruktioner). radio: För val där man bara kan välja ett alternativ (bottentyp). checkbox: För val där man kan välja flera alternativ (toppings). select: En menylista för att välja ett specifikt antal (antal pizzor). submit: En knapp som skickar iväg all ifylld data till servern. Koden använder även och för att gruppera och strukturera informationen logiskt.
Att göra
- Examination:
Instuderingsfrågor
Vecka 48
Kursmaterial
Grundläggande css egenskaper för layout och extern css fil för styling Visar stylingen i en rödbrun färgskala (maroon) för rubrikerna. H1 får en tydlig inramning med linjer upptill och nertill, medan H2 och brödtexten skjuts in 100 pixlar från vänster för att skapa en ren och luftig layout. Vi använder ett stilrent sans-serif-typsnitt i större storlek för bättre läsbarhet, och slutligen ser vi till att bilder flyter till höger med en balanserad marginal så att texten kan löpa snyggt runtomkring. Till sist så länkar vi style från extern css fil.
Att göra
- Examination:
Instuderingsfrågor
| PROGRAM | Systemvetenskapliga programmet |
|---|---|
| SYFTE | Kursen behandlar grundläggande HTML och CSS, så som element, attribut, nästling, dokumentdisposition, sektionering, länkning, deklarationer, egenskaper, värden och kaskaden.. |
| KURSPLAN | Gå till kursplan hos DU |