Laboration W1: HTML och CSS

Välkommen till den första labben i kursens Webbdel!

Uppgift 1: Kursboken

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 prgcl-webbdelen 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

• Ö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.

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

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. Den behöver inte handla om dig själv. Du får gärna kopiera från det du gjorde i förra uppgiften.
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 när det är en kvart kvar så kommer du automatiskt att få se tre andras inlämningar.

Quiz W1

Detta är det första av tre obligatoriska quiz som ska göras under webbdelen:

• W1: HTML och CSS