Övningsuppgift 1

Övningsuppgift 1 - Skapa en sida om en film, serie eller bok

Bygg en enkel webbsida med en HTML-fil, en extern CSS-fil och en bild.

Filmgenomgång

Börja med att titta på spellistan: Övningsuppgift 1 på YouTube.

Uppgift

Du ska skapa en webbsida i HTML5 där du kortfattat skriver om en bra bok, film eller serie som du har sett eller läst.

Projektet ska bestå av:

En HTML-fil, till exempel index.html.
En extern CSS-fil, till exempel style.css.
En bildfil i formatet jpg, webp eller png.

Krav på HTML

Sidan ska vara skriven i HTML5.
Du ska använda <h1> till sidans rubrik.
Du ska använda <p> till löptext.
Du ska länka till en extern CSS-fil från HTML-filen.
Du ska ha med en bild, till exempel en poster eller omslagsbild.
Bilden ska vara liten och får vara max en halv skärmhöjd.

Krav på CSS

CSS-filen ska påverka rubriken, löptexten och sidans bakgrund.

h1 ska ha fonten Verdana, storlek 1.7rem och valfri textfärg som inte är svart eller röd.
p ska ha fonten Verdana, storlek 1.2rem och valfri textfärg som inte är svart eller röd.
Sidan ska ha en valfri bakgrundsfärg som inte är vit eller röd.
Färgerna ska passa ihop och texten ska vara lätt att läsa.

Validering

Du ska validera både HTML5-koden och CSS-koden med W3C:s validatorer innan du lämnar in.

HTML: W3C Markup Validation Service
CSS: W3C CSS Validation Service

Publicering

Du ska lägga ut webbsidan på GitHub och publicera den med GitHub Pages. Lämna in både länken till koden på GitHub och länken till den publicerade sidan på GitHub Pages.

Exempel på hur det kan se ut:

Koden: https://github.com/pauliskolantest/movie-page-1
GitHub Pages: https://paul-pauliskolan.github.io/movie-page-1/

Checklista för inlämning

Du har en HTML-fil.
Du har en extern CSS-fil som är länkad från HTML-filen.
Du har en bildfil i jpg, webp eller png.
Sidan handlar om en film, serie eller bok.
Du har använt <h1> och <p>.
CSS-kraven för h1, p och bakgrundsfärg är uppfyllda.
Du har inte använt svart eller röd text, vit bakgrund eller röd bakgrund.
Du har validerat HTML och CSS.
Du har publicerat sidan med GitHub Pages.
Du lämnar in både GitHub-länken till koden och GitHub Pages-länken.