Webbutveckling med HTML och CSS

Förberedelser

• Öppna mappen L7a i Visual Studio Code (VSC).
• Öppna filen index.html och style.css i VSC samt öppna sidan i Live Server.
• Studera den kod som finns i HTML- och CSS-filerna, så att du blir insatt i den.

Uppbyggnad av tabellen

HTML – Grunden för tabellen

• Skriv start- och sluttaggen för table.
• Lägg in ett tr-element med fyra th-element. I dem skriver du Titel, Genre, Land och År.
• Lägg in ytterligare ett tr-element med fyra td-element och skriv in uppgifter om en film, t.ex. Fest i byn, Komedi, Frankrike, 1949

CSS – Färger och kantlinjer

• Skriv en regel för table med background-color: #FFF;
• Skriv en regel för th, td med kantlinje och inre marginal, t.ex. border: 2px solid #CCC; och padding: 6px; Lägg också in text-align: left;
• Lägg in border-collapse: collapse; i regeln för table.
• Lägg till en regel för th med en annan bakgrundsfärg och textfärg, t.ex. #960 respektive #FFF.

HTML – Fler rader och beskrivning

• Lägg till tr- och td-element för några fler filmer, så att du har fem rader med filmer.
  • Skriv svensk titel på filmerna. Du ska sedan längre ner i denna lab lägga till ytterligare en kolumn med originaltitel.
• Lägg också in ett caption-element med lämplig beskrivning av dina filmer, t.ex. Klassiska filmer.
  • Observera att caption måste ligga först i table.

CSS – Piffa upp tabellen

• Lägg in caption-side: bottom; i regeln för table.
• Skriv en regel för caption med margin-top: 1em; och font-style: italic;
• Lägg en skugga på tabellen, genom att i regeln för table lägga in box-shadow: 10px 10px 15px #666;
• Lägg till en regel för tr:nth-of-type(even) med background-color: #EDC;
  • Detta specificerar varannan rad, de med jämna ordningsnummer.

Slå ihop rader och kolumner

HTML – Två kolumner för titel

• Lägg till ett tr-element under det första med rubrikerna. Det nya tr-elementet ska alltså bli den andra raden och i det lägger du in två th-element med texterna Original och Svensk.
• I början av varje rad för filmerna lägger du in ytterligare ett td-element med originaltiteln.
• I th-elementet med texten Titel lägger du in attributet colspan="2".
• I th-elementen för Genre, Land och År lägger du in attributet rowspan="2".

CSS – Jämna till rubrikerna

• I regeln för th, td lägger du in vertical-align: bottom;
  • Det behövs egentligen endast för th, men eftersom vi nu har en gemnsam regel för th och td, kan det läggas där. Innehållet i td-elementen upptar endast en rad, så det spelar ingen roll om vi har vertical-align där.

Responsiv design

CSS – Media query med ändring till listor

• Ta fram Följsamt designläge och dra ner storleken till strax under 500px.
• Lägg in en media query för max-width: 500px; och lägg in följande regler i den:
  • Lägg in en regel för tr med display: block;
  • Lägg till en regel för td med display: list-item; list-style: disc; margin-left: 2em; padding: 2px; och border: none;
  • Lägg också till en regel för td:first-of-type med font-weight: bold; och margin-left: 0.5em;
    • Det första td-elementet i varje rad fungerar då som en rubrik.
  • Ta bort skuggan på tabellen och gör den bredare med en regel för table med box-shadow: none; och width: 100%;
  • Lägg in en rgelen för tr:nth-of-type(1) med background-color: #960;
    • Den första raden i tabellen ska bli en rubrikrad.
  • Dölj raden med rubrikerna Original och Svensk, dvs den andra raden, genom en regel för tr:nth-of-type(2) med display: none;
  • Lägg till en regel för th med display: inline-block; border: none; och font-weight: normal;

Validera koden

• Validera både HTML- och CSS-filen och rätta eventuella fel.
• HTML-validator: https://validator.nu/
• CSS-validator: https://jigsaw.w3.org/css-validator/#validate_by_upload