Webbteknik 1

I den första delen av laborationen ska du komma igång med CSS, genom att koppla samman HTML och CSS samt skriva några grundläggande regler i CSS. För att det ska bli någon konkret kod, används i denna lab en del CSS-egenskaper som vi ännu inte tagit upp i föreläsningarna. Men vi kommer ta upp dem i kommande föreläsningar (och även labbar) och då gå in på dem mer detaljerat. Så just nu handlar det mest om att lägga in några olika regler och egenskaper, så att du har något att experimentera med.

Följande är förslag på övningar. Experimentera gärna med andra värden på egenskaperna, för att se vilken effekt de ger.

Förberedelser

• Öppna mappen L3 i Visual Studio Code (VSC).
• Öppna filen index.html i VSC och öppna sidan i Live Server.

Grundstil

• Skapa ett nytt CSS-dokument, style.css, i mappen css och öppna det i VSC.
• I index.html lägger du in en link-tagg i head-delen, där du refererar till style.css.
  • Kopiera sedan hela link-taggen och lägg även in den i page2.html och page3.html.
• Lägg in @charset "UTF-8" i CSS-dokumentet.
  • Detta måste ligga på översta raden i dokumentet.
• Skriv en regel för body och lägg in width: 1000px; och margin: 0 auto, för att centrera sidan.
• Lägg in en regel för h1 med color och valfri färg.
  • Välj en relativt mörk färg (t.ex. chocolate), så att texten på webbsidan fortfarande kan läsas.
• Lägg till h2 och h3 som selektorer för regeln för h1, så den även gäller för dem.
• Skriv en regel för .collage img med max-height: 350px;
  • Observera att det ska vara en punkt före collage, för att referera till namnet som finns i ett class-attribut i HTML-koden.
• Lägg även in en regel för .collage med text-align: center;
  • Detta centrerar innehållet i elementet, även om det i detta fall är bilder och inte text.
• Lägg till en regel för footer med border-top: 1px solid black;, för att få en övre kantlinje. Lägg även in margin-top: 20px;

Flexibel bredd

• Ta fram Följsamt designläge i Firefox (se info i rutan i sidospalten).
• Dra i rutans kant, för att se hur sidan ser ut i olika storlek.
  • I detta fall ser sidan likadan ut och du får en rullningslist i nederkanten, då fönstret blir smalare än 1000px, som är den bredd som du tidigare satt för body.
• Ändra width till max-width i regeln för body och prova sedan att återigen att dra i kanten av rutan i Följsamt designläge.
• Lägg till padding: 20px; i regeln för body.
• Skriv en regel för img med max-width: 100%;
  • När du nu drar i rutan i följsamt designläge bör du se att både text och bilder anpassar sig flexibelt. Därefter kan du stänga följsamt designläge igen.

Webbläsarens verktyg för webbutvecklare (“Dev Tools”)

• Skapa en regel för header med text-align: center;

  • Stilen ärvs av h1 och h2 i header.

  • Ta fram Inspektören i “Dev Tools” i Firefox (se rutan i sidospalten):

    • Klicka på fliken Beräknad i den högra spalten.
    • Leta sedan redan på header i HTML-koden i den vänstra spalten. Klicka där på h1 och h2, så ser du i den högra spalten vilken stil de fått.
      • Det bör bl.a. stå text-align: center, som de ärvt från header.

• Lägg till en regel i filen style.css för nav li med font-size: 2rem; och titta på resultatet i webbläsaren.

• Ändra regelen till nav istället för nav li, så att den gäller hela nav-elementet och inte bara li-elementen.

  • Sidan hoppar då ner lite. Ta fram Inspektören och peka på nav-, ul- och li-elementen i HTML-koden i den vänstra spalten. Samtidigt markeras de på sidan, så att du kan se vilken yta de upptar. För ul kan man se att den har en marginal i över- och underkant. Font-storleken i nav ärvs ner till ul och påverkar då också storleken på marginalen, som nu blivit större.

• Prova att lägga in margin: 0; i regeln för nav.

  • Ingen förändring, eftersom margin inte ärvs ner. Lägg istället in margin: 0; i en regel för nav ul.
  • Lägg även in padding: 0; i regeln för nav ul.
    • Punkterna för li-elementen hamnar då till vänster om sidan, men vi kommer att lösa det senare, genom att då ta bort dem.

Validera CSS-koden

• Ta fram validatorn på adressen https://jigsaw.w3.org/css-validator/#validate_by_upload

• Ladda upp din fil style.css.

  • Du kan antingen dra filen till knappen Bläddra eller så klickar du på Bläddra och pekar ut din fil.

• Klicka sedan på knappen Granska.

• Du kommer då till en ny sida, där resultatet visas

  • Är allt korrekt, blir det “grönt”. Men får du felmeddelanden, får du analysera dem och rätta felen i din kod.
  • Om du inte får några fel, bör du prova att införa något fel i din kod och validera igen, för att se hur felmeddelandena visas.