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
- Här kommer lite små övningar där du tränar på olika html taggar och dess attribut
- Öppna en texteditor och klister in var fri ostrukturerade råtext från internet för en enkel webbsida helt utan några HTML-taggar. Omvandla textdokumentet till ett giltigt HTML-dokument genom att omsluta innehållet med doctype, html, head, title och body-taggarna. Spara test kör i webbläsaren. Märk upp texten i body med lämpliga HTML-element som rubriker (h1-h6), paragrafer (p) och betonad text (em/strong). Spara test kör i webbläsaren. Lägg till en bild på sidan med img-taggen och se till att den har en beskrivande alt-text för tillgänglighet. Spara test kör i webbläsaren.
- Lägg till hr-elementet för att markera ett tematiskt skifte mellan två olika avsnitt i din text. Spara och test kör i webbläsaren.
- Skapa en punktlista (ul) och en numrerad lista (ol), samt en beskrivningslista (dl) med termer (dt) och beskrivningar (dd). Spara och test köra i webbläsaren.
- Märk upp ett längre citat med blockquote, ett kortare citat med q samt visa ett kodexempel med code-taggen. Spara och test kör i webbläsaren.
- Skapa en länk till en extern webbplats med a-taggen och dess href-attribut för att visa hur man länkar till webbpalter på nätet. Spara och test kör i webbläsaren.
- Länka samman två egna HTML-filer i samma mapp med en relativ sökväg i href-attributet. Spara och test kör i webbläsaren.
- Skapa en ankarlänk som hoppar direkt till ett specifikt avsnitt längre ner på samma sida med hjälp av id-attributet. Spara och test kör i webbläsaren.
- Använd attributet target=\"_blank\" tillsammans med rel=\"noopener noreferrer\" på en länk för att öppna den säkert i en ny webbläsarflik. Spara och test kör i webbläsaren.
- Skapa en e-postlänk med mailto-protokollet i href-attributet så att användarens e-postprogram öppnas när de klickar. Spara och test kör i webbläsaren.
- Bygg en klickbar telefonlänk med tel-protokollet i href-attributet för att göra det enkelt för mobilanvändare att ringa upp. Spara och test kör i webbläsaren.
- Infoga en rasterbild (JPEG eller PNG) med img-elementet samt ange korrekta src- och alt-attribut för tillgänglighet. Spara och test kör i webbläsaren.
- Sätt explicita width- och height-attribut på en img-tagg för att förhindra att sidans layout hoppar under inläsning. Spara och test kör i webbläsaren.
- Bädda in en SVG-vektorbild på sidan, antingen som en extern fil via img-taggen eller direkt i koden med inline svg-taggar. Spara och test kör i webbläsaren.
- Använd picture-elementet med source-taggar för att erbjuda ett modernt bildformat som WebP eller AVIF med en fall-back till JPEG. Spara och test kör i webbläsaren.
- Använd srcset- och sizes-attributen på en img-tagg för att låta webbläsaren välja den bäst anpassade bildstorleken utifrån skärmupplösningen. Spara och test kör i webbläsaren.
- Skapa en figur (figure) bestående av en responsiv bild med bildtext (figcaption) som passerar W3C Validator utan fel och ger 100% på Accessibility i Lighthouse. Spara och test kör i webbläsaren.
- Finn en text, skapa en html sida där du gruppera dess innehåll med de semantiska taggarna main, section och article för att skapa en tydlig innehållsstruktur. Spara och test kör i webbläsaren.
- 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
- Skapa en minimal tabell med table-elementet bestående av två rader (tr) och två dataceller (td) per rad. Spar och test kör i webbläsaren. Lägg till en beskrivande rubrik för hela tabellen med caption samt ersätt den första radens dataceller med rubrikceller (th). Spara och test kör i webbläsaren.
- Skapa en tabell där du slår samman celler över flera kolumner med colspan-attributet och över flera rader med rowspan-attributet. Spara och test kör i webbläsaren.
- Skapa ett egen tabell som visar en resturangsmeny.
- Skapa ett form-element med korrekta action- och method-attribut för att definiera vart och hur formulärdata ska skickas. Spara och test kör i webbläsaren. Infoga två textfält (input) och ett flerraders textfält (textarea) där varje fält har ett unikt name-attribut för datainsamling. Spara och test kör i webbläsaren. Bygg ut formuläret med radioknappar (radio), kryssrutor (checkbox), en rullgardinsmeny (select med option) samt en skicka-knapp (button). Spara och test kör i webbläsaren. Koppla samman varje inmatningsfält med en beskrivande textetikett med hjälp av label-elementet och dess for-attribut. Spara och test kör i webbläsaren.
- Gruppera relaterade inmatningsfält i formuläret med fieldset-elementet och ge gruppen en tydlig rubrik med legend. Spara och test kör i webbläsaren.
- Bygg ett uthyrningsformulär för en biluthyrning ska ha 100% på Accessibility i Lighthouse. Spara och test kör i webbläsaren.
- Skapa din egna blogg med html taggar från kapitel 4–9. 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 W3C HTML validator (https://validator.w3.org/). Lighthouse: Gör en analys i Chrome Lighthouse och optimera sidan tills du når 100% på Accessibility, Best Practices och SEO.
- Skapa webbplats för en lokala byggfirma med html taggar från kapitel 4–9. 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 W3C HTML validator (https://validator.w3.org/). Lighthouse: Gör en analys i Chrome Lighthouse och optimera sidan tills du når 100% på Accessibility, Best Practices och SEO.
- Skapa en webbplats för ett lokalt café med semantiska HTML5-taggar (header, nav, main, section, article, footer) och taggar från kapitel 4–9, som har ren kod utan fel i W3C HTML Validator samt uppnår 100% på Accessibility, Best Practices och SEO i Chrome Lighthouse.
- Skapa en webbplats för ett lokalt gym med semantiska HTML5-taggar (header, nav, main, section, article, footer) och taggar från kapitel 4–9, som har ren kod utan fel i W3C HTML Validator samt uppnår 100% på Accessibility, Best Practices och SEO i Chrome Lighthouse.
- Skapa en webbplats för en musikfestival med semantiska HTML5-taggar (header, nav, main, section, article, footer) och taggar från kapitel 4–9, som har ren kod utan fel i W3C HTML Validator samt uppnår 100% på Accessibility, Best Practices och SEO i Chrome Lighthouse.
- Skapa en webbplats för en veterinärklinik med semantiska HTML5-taggar (header, nav, main, section, article, footer) och taggar från kapitel 4–9, som har ren kod utan fel i W3C HTML Validator samt uppnår 100% på Accessibility, Best Practices och SEO i Chrome Lighthouse.
- Skapa en webbplats för en IT-konsultbyrå med semantiska HTML5-taggar (header, nav, main, section, article, footer) och taggar från kapitel 4–9, som har ren kod utan fel i W3C HTML Validator samt uppnår 100% på Accessibility, Best Practices och SEO i Chrome Lighthouse.
- Skapa en webbplats för en återbruksbutik med semantiska HTML5-taggar (header, nav, main, section, article, footer) och taggar från kapitel 4–9, som har ren kod utan fel i W3C HTML Validator samt uppnår 100% på Accessibility, Best Practices och SEO i Chrome Lighthouse.
- Examination:
Instuderingsfrågor
- Vilka är de tre absolut nödvändiga elementen för en giltig tabellstruktur?
- Varför bör man aldrig använda tabeller för layoutändamål t.ex. för att positionera knappar eller textblock?
- Hur definierar man en rubrik för hela tabellen som är tillgänglig för både seende användare och skärmläsare?
- Vad är den semantiska skillnaden mellan <th> och <td>?
- Vad gör attributet colspan="3"?
- Vad gör attributet rowspan="2"?
- Vad gör attributet rowspan="2"?
- Vilka är de två viktigaste attributen på ett form-element för att data ska kunna skickas till en server, och vad gör de?
- Vad är skillnaden mellan att använda method="GET" och method="POST"?
- Varför är det viktigt att varje form-element, som input, har ett unikt name-attribut?
- Hur kopplar man samman ett <label>-element med ett <input>-element på ett korrekt sätt?
- Varför bör man undvika att använda attributet placeholder som ersättning för en <label>?
- Vad är fördelen med att använda specifika <input> -typer som type="email", type="tel" eller type="number" istället för bara type="text"?
- Hur markerar man ett input element fält som obligatoriskt i HTML?
- Vilka två element används för att gruppera relaterade fält i ett långt formulär visuellt och med rubrik, och vad är deras syfte?
- Vilket HTML-element och vilken type bör användas om användaren endast får välja ett alternativ ur en grupp av flera förutbestämda val?
- Vilka tre element måste (och bör) ingå i en korrekt strukturerad rullista, dropdown meny, och vad är deras respektive funktioner?
- Vilket värde skickas till och blir tillgängligt på server och dess kod <option value="sthlm">Stockholm</option>? sthlm eller Stockholm?
| 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 |