Laboration W1: HTML och CSS

Välkommen till den första labben i Webbdelen av kursen!

Vi kommer att använda en interaktiv bok: Fundamentals of Web Programming Links to an external site.. Det går att komma åt boken utan inloggning, men skapa gärna ett gratiskonto, så kan du hålla reda på hur långt du läst/vilka uppgifter du gjort. Om du skapar ett konto kan du ange prgcl23 som kursnamn.

Vill du läsa på svenska? I Chrome kan du välja "Översätt till svenska" om du högerklickar på sidan.

Läsanvisning:

1. The World Wide Web Links to an external site.

2. HTML Basics Links to an external site.

4. Cascading Style Sheets Links to an external site. kap 4.1 och 4.2

Om du vill slå upp saker så kan du gå in på https://www.w3schools.com/ Links to an external site.

Uppgift 1: Kursboken

Öppna avsnitt 2.5. Exercises Links to an external site. och gå igenom övningarna. Det är OK att hoppa över de svåraste, t ex tabellen i uppgift 5.

Uppgift 2: Egen HTML-sida

1. Skapa en ny fil Labb1.html, i en editor (IDLE går bra att använda)
2. Skriv varsin egen webbsida. Välj själv vad den ska handla om.

3. Krav:

   • Din webbsida måste ha
     • Olika rubriknivåer
     • En länk till någon annan webbsida
     • En lista
     • En bild
4. Här finns ett exempel som tips: https://kthnamn.eu.pythonanywhere.com/Labb1.html Links to an external site.
5. För att testa om HTML-koden fungerar kan ni gå in på någon av övningsuppgifterna i boken, klistra in koden och sen trycka på knappen Save & Render

Uppgift 3: En CSS-fil

1. Läs avsnittet Introduction to CSS Links to an external site. i kursboken
2. Skriv tillsammans en CSS-fil. Ettt exempel att utgå från finns här: https://kthnamn.eu.pythonanywhere.com/stil.css Links to an external site.

Uppgift 4: Lägg upp sidorna på webben

Vi använder gratisversionen av https://eu.pythonanywhere.com/ Links to an external site. Följ denna illustrerade guide Links to an external site.!

Lämna in

• html-filen Labb1.html
• css-filen stil.css
• länken till din hemsida (t ex https://kthnamn.eu.pythonanywhere.com/Labb1.html Links to an external site.)

Peer review

Om du lämnat in kl 16:45 så kommer du automatiskt att få se tre andras inlämningar. I denna labb är det frivilligt att kommentera på övrigas inlämningar.