Webbteknik 1

Syftet med den här uppgiften är att du skall få visa att du kan strukturera innehåll med HTML och stilsätta det med enkel CSS. Du skall också få öva på hela arbetsgången: skriva kod, validera den, testa i webbläsaren och till slut publicera resultatet på webben. Kraven som ges nedan måste vara uppfyllda, så använd listan dels för att se vad du ska göra och dels som en checklista, innan du lämnar in.

Uppgiften bygger på det som tagits upp under kursens tre första veckor (föreläsning 1-3 och laboration 1-3). Sidorna skall presenteras i webbläsarens normala flöde, i en kolumn, ungefär som i veckans exempel.

Beskrivning

Du skall skapa en liten webbplats bestående av tre sidor som hör ihop och som har gemensam navigering och gemensam stilmall. Tänk dig en enkel informationssida, av samma slag som exemplet om Småland i laborationerna.

Ämnet väljer du helt själv: en plats du tycker om, en hobby, en förening, ett spel, ett djur, en maträtt, en artist - vad som helst som du kan skriva några stycken text om och hitta ett par bilder till. Innehållet behöver inte vara långt eller heltäckande, men det skall vara relevant och läsbart. Nonsenstext av typen “Lorem ipsum” får alltså inte förekomma i redovisningen, även om det är utmärkt att använda medan du bygger upp strukturen.

Tips: i uppgift 2 skall du göra en sida som handlar om dig själv, så välj gärna ett annat ämne här.

Krav och bedömningskriterier

Följande krav ska vara uppfyllda:

• Innehåll och struktur

  • Webbplatsen skall bestå av tre HTML-dokument, som ligger i samma mapp.
    • Startsidan skall heta index.html, så att den laddas automatiskt när man navigerar till webbplatsens domännamn.
  • Alla tre sidorna skall innehålla header, nav, main och footer.
    • header och nav skall se likadana ut på alla tre sidorna, så att webbplatsen hänger ihop.
  • nav skall innehålla en lista med länkar till alla tre sidorna, även till den sida man befinner sig på.
  • Varje sida skall ha eget innehåll med minst två textstycken samt en eller flera underrubriker.
  • Minst tre olika bilder totalt, fördelade på minst två av sidorna.
  • Bilderna skall vara anpassade för att användas på en webbsida.
  • Minst en lista (ul eller ol) någonstans i innehållet, utöver listan med navigeringslänkarna.
  • Minst en länk till en extern webbplats, som öppnas i en ny flik.
  • Texter på sidan skall skrivas på svenska eller engelska.
  • Ert namn skall finnas med någonstans i sidfoten (på alla sidor).

• HTML-kod

  • Korrekt grundstruktur med doctype, html, head och body, samt rätt värde i lang-attributet.
  • Relevant titel i title-elementet - och olika titel på de tre sidorna.
  • Text strukturerad med korrekta element för rubriker och textstycken.
    • Alltså h1, h2, osv. för rubriker, p för textstycken, etc.
    • Rubriknivåerna skall användas i rätt ordning, alltså ingen h3 utan en h2 ovanför.
  • Använd relevanta semantiska HTML-element för att strukturera innehållet där det är lämpligt.
  • Minst ett fraselement (t.ex. em eller strong) för att markera något i en löpande text.
  • Alla bilder skall ha en beskrivande text i alt-attributet.
  • Adresser till bilder och till de egna sidorna ska vara relativa adresser, bilderna skall alltså vara en del av din webbplats och inte länkas in från externa källor.
  • Koden ska vara validerad och gå igenom validatorn utan felmeddelanden. Detta gäller alla tre HTML-dokumenten.

• CSS-kod

  • All CSS-kod skall finnas i en enda separat CSS-fil, som länkas in i alla tre HTML-dokumenten. Det får alltså inte finnas någon CSS-kod i HTML-filerna, varken inline eller i <style>-taggar.
  • Du skall använda selektorer med referens till element, id och class.
    • Du måste alltså ha med både id och class även i HTML-koden.
  • Minst en selektor skall vara sammansatt av flera element, alltså av typen header h1 eller main ul.
  • Minst tre olika CSS-egenskaper för stilsättning av text skall användas, t.ex. font-family, font-size, line-height, text-align eller font-style.
  • Bakgrundsfärg på något element och bakgrundsbild i något annat element.
    • Kontrasten mellan text och bakgrund skall vara god, så att texten går lätt att läsa.
  • Punktmarkeringen i minst en lista skall ändras eller tas bort med list-style.
  • Länkarna skall stilsättas:
    • Navigeringslänkarna skall ha olika stil beroende på om muspekaren befinner sig över länken eller ej.
    • Länken till den sida man för tillfället befinner sig på skall vara markerad, så att man ser var på webbplatsen man är. Detta löser du med en class i HTML-koden.
    • Länkar i innehållet (inom main) skall ha en annan stil än navigeringslänkarna.
  • Sidans innehåll skall ha en flexibel bredd, som anpassar sig då webbläsarfönstret ändrar storlek (se lab 3a).
    • Begränsa textens bredd med max-width och centrera innehållet, så att raderna inte blir orimligt långa på en stor skärm.
    • Se till att bilderna inte sticker ut utanför sidan på en liten skärm.
    • Det får inte uppstå någon rullningslist i sidled, oavsett fönstrets bredd.
  • Koden ska vara validerad och gå igenom validatorn utan felmeddelanden.

• Publicering

  • Webbplatsen ska vara publicerad publikt online. Exempelvis via Netlify (se laboration 1b).

Se även de allmänna kraven för uppgifterna.

Redovisning

Då du publicerat din webbplats går du in på den url du fått. Kontrollera noggrannt att allt ser ut som du vill, att alla länkar fungerar och att alla bilder visas. Gå också igenom ovanstående kravlista och checka av att alla krav är uppfyllda.

Redovisningen ska endast bestå av en länk med den url som du fått när du publicerade, den skall inte innehålla någon filsökväg. Du redovisar genom att skicka länken i ditt svar i Moodle. Du måste redovisa innan deadline, det räcker inte att du bara har publicerat din webbplats.