Webbteknik 1

Uppgift 1

Skapa en webbplats med svar på några frågor

I denna uppgift ska du skapa en liten webbplats, för att dels visa att du kan grunderna i HTML och CSS och dels visa att du satt dig in i kursens teori. Webbplatsen bedöms både utifrån innehåll och koden. 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 redovisar.

Frågor

Följande är de tre frågor som ska finnas (tillsammans med dina svar) på webbsidorna. En fråga (inkl. delfrågor) och svar per sida. Syftet med frågorna är dels en kontroll av att du satt dig in i föreläsningarnas innehåll och dels att du ska ha något konkret innehåll på webbsidorna.

Det är lämpligt att ta en fråga per vecka, eftersom det då stämmer med kursens veckoplan, där de olika områdena introduceras i föreläsningarna. Du bör kunna få fram svar på fråga F1 i föreläsning 1, fråga F2 i föreläsning 2 och fråga F3 i föreläsning 3.

F1. Datakommunikation och webbadresser

  1. Vilken roll spelar DNS servern när en användare navigerar till en webbsida?
  2. Beskriv kortfattat de steg som klienten och servern tillsammans går igenom när en webbsida bestående av filerna index.html, style.css och example.jpg öppnas.
  3. Beskriv de delar som följande url består av:
    • https://medieteknik.lnu.se:443/wt1/index.html#intro
    • Ta upp alla delar som åtskiljs av /, : och #

F2. HTML

  1. Vad består en tagg respektive ett attribut av? Hur förhåller de sig till ett element?
  2. Vad är en entitet? Lägg även in ett exempel på en entitet i din HTML-kod i svaret på den här frågan.
  3. Vad är skillnaden mellan ett block-element och ett inline-element?

F3. CSS

  1. Vad är en regel i CSS och vad består den av?
  2. Vad är skillnaden mellan id och class? När bör man använda id respektive class?

Krav och bedömningskriterier

Följande krav ska vara uppfyllda:

  • Innehåll

    • Webbplatsen ska bestå av tre sidor, som ska innehålla följande:
      • En fråga (inkl. delfrågor) och ditt svar per sida.
        • De tre frågorna ges längre ner på denna sida.
      • Svaren på frågorna ska vara formulerade med dina egna ord och skrivas på svenska.
      • Minst en bild (som läggs in med HTML-kod) per sida.
        • Du får fritt kopiera bilder från kursmaterialet och använda i dina svar. T.ex. en skärmkopia från föreläsningsmaterial eller en bild från exempel och laborationer. Vill du istället använda egna bilder, får du naturligtvis göra det.
      • På samtliga sidor ska det finnas navigeringslänkar till alla tre sidor, så att man kan gå mellan sidorna.
        • Navigeringslänkarna ska alltså även innehålla en länk till den sida man befinner sig på, så att de tre länkarnas placering blir stabil och likadan på alla tre sidor.

  • HTML-kod

    • Relevant titel i title-elementet.
    • Text strukturerad med korrekta element för rubriker och textstycken samt andra relevanta HTML-element.
      • Alltså h1, h2, etc. för rubriker och p för textstycken.
    • Adresser till bilder och i navigeringslänkar ska vara relativa adresser.
    • Koden ska vara validerad och gå igenom validatorn utan felmeddelanden.
    • Koden ska vara indenterad, så att strukturen framgår.
      • Använd formateringskommandot i Visual Studio Code, så som det beskrivs i lab L2a.

  • CSS-kod

    • Det ska vara endast en CSS-fil och all CSS-kod för webbsidorna ska finnas i den. Det får alltså inte finnas någon CSS-kod i HTML-filerna. Alla tre HTML-filerna ska länka till samma CSS-fil.
    • Använd några olika CSS-egenskaper för stilsättning av texten.
    • Navigeringslänkarna ska ha olika stil beroende på om muspekaren befinner sig över länken eller ej.
    • Bakgrundsfärg på något element och bakgrundsbild i något annat element.
    • Selektorer med referens till element, id och class.
      • Du måste alltså ha med både id och class även i HTML-koden.
    • Koden ska vara validerad och gå igenom validatorn utan felmeddelanden.

  • Publicering

    • Webbplatsen ska vara upplagd i en privat repository på GitHub och publicerad på Netlify.
    • URL till din publicerade webbplats får inte lämnas ut till någon annan än kursens lärare.
    • Ändra inte den URL som du får från Netlify, utan behåll URL med den slumpmässiga texten som du får från Netlify. I annat fall kan kanske någon gissa din URL och obehörigt komma åt dina svar.
    • Allt måste fungera i Firefox, som är den webbläsare vi använder, då redovisningen granskas.

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

Redovisning

Då du publicerat dina sidor på Netlify går du in på den url du får där. Kontrollera noggrannt att allt ser ut som du vill. 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 på Netlify. Du redovisar genom att skapa länken i ditt svar i MyMoodle.

Redovisa innan deadline. Uppgifterna stängs efter deadline och öppnas inte för ny redovisning förrän till nästa deadline. Missar du deadline, får du alltså vänta till nästa deadline för att redovisa uppgiften. Se datum för deadlines i veckoplan / schema.