Övningsuppgift 1

Film, serie eller bok

Skapa en webbsida med HTML, extern CSS och en bild.

Börja här

Se filmgenomgången

Titta först på spellistan Övningsuppgift 1 på YouTube.

Öppna spellistan

Ha gärna presentationen och uppgiftssidan öppna medan du arbetar.

Uppgift

Vad ska du skapa?

Bygg en enkel HTML5-sida om en bra film, serie eller bok som du har sett eller läst.

Skriv kortfattat och välj en bild, exempelvis en poster eller omslagsbild.

Projektfiler

Tre delar behövs

film-sida/
  index.html
  style.css
  poster.webp

En HTML-fil.
En extern CSS-fil.
En bild i formatet jpg, webp eller png.

HTML-krav

Sidans innehåll

Skriv sidan i HTML5.
Använd h1 till huvudrubriken.
Använd p till löptexten.
Länka en extern CSS-fil.
Lägg in en poster eller omslagsbild.

HTML · head

Koppla den externa CSS-filen

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Min favoritfilm</title>
  <link rel="stylesheet" href="style.css">
</head>

link gör att webbläsaren läser reglerna i style.css.

HTML · body

Lägg in text och bild

<body>
  <h1>Min favoritfilm</h1>
  <p>Här skriver jag kort om filmen.</p>
  <img src="poster.webp"
       alt="Poster till min favoritfilm">
</body>
</html>

Skriv en alt-text som beskriver bilden.

Bildkrav

Bilden får inte dominera sidan

Använd en fil i formatet jpg, webp eller png.

Bilden får vara högst en halv skärmhöjd.

img {
  max-height: 50vh;
}

50vh betyder 50 procent av webbläsarfönstrets höjd.

CSS-krav · rubrik

Utforma h1

h1 {
  font-family: Verdana, sans-serif;
  font-size: 1.7rem;
  color: darkblue;
}

Fonten ska vara Verdana.
Storleken ska vara 1.7rem.
Textfärgen får inte vara svart eller röd.

CSS-krav · löptext

Utforma p

p {
  font-family: Verdana, sans-serif;
  font-size: 1.2rem;
  color: #243b53;
}

Fonten ska vara Verdana.
Storleken ska vara 1.2rem.
Textfärgen får inte vara svart eller röd.

CSS-krav · bakgrund

Välj läsbara färger

body {
  background-color: lightblue;
}

Bakgrunden får inte vara vit eller röd.

Färgerna ska passa ihop och texten ska vara lätt att läsa.

Kontrollfråga

Uppfyller denna CSS kraven?

h1 {
  font-family: Arial;
  font-size: 1.7rem;
  color: red;
}

Nej. Fonten ska vara Verdana och textfärgen får inte vara röd.

Validering

Kontrollera båda filerna

HTML

W3C Markup Validation Service

CSS

W3C CSS Validation Service

Rätta felen innan du lämnar in.

Publicering

GitHub och GitHub Pages

Lägg projektets kod i ett repository på GitHub.
Publicera sidan med GitHub Pages.
Kontrollera den publicerade sidan.

GitHub visar koden. GitHub Pages visar den färdiga webbsidan.

Inlämning

Två länkar ska lämnas in

1. Koden

github.com/ditt-namn/ditt-projekt

2. Webbsidan

ditt-namn.github.io/ditt-projekt/

Testa båda länkarna innan du lämnar in.

Arbetsordning

Från idé till inlämning

Välj film, serie eller bok.
Skapa projektmappen och filerna.
Skriv HTML och lägg in bilden.
Skriv CSS enligt kraven.
Testa och validera HTML och CSS.
Publicera och kontrollera länkarna.

Checklista

Kontrollera innehållet

HTML-fil, extern CSS-fil och bildfil finns.
Sidan handlar om en film, serie eller bok.
h1, p och bilden visas.
Bilden är högst en halv skärmhöjd.
CSS påverkar rubrik, text och bakgrund.

Checklista

Kontrollera kvalitet och inlämning

Färgkraven är uppfyllda och texten är läsbar.
HTML och CSS är validerade.
Sidan är publicerad med GitHub Pages.
GitHub-länken fungerar.
GitHub Pages-länken fungerar.

Klart

Det här lämnar du in

En fungerande och validerad webbsida om en film, serie eller bok.

Lämna in: länken till koden på GitHub och länken till sidan på GitHub Pages.

Simulerat exempel

Så kan den färdiga sidan se ut

https://ditt-namn.github.io/film-sida/

Project Hail Mary

Project Hail Mary är en science fiction-film baserad på Andy Weirs bok.

Sidan använder Verdana, läsbara textfärger och en ljusblå bakgrund.

Exemplet uppfyller kraven för rubrik, löptext, bildstorlek och bakgrundsfärg.