Göm menyn

TDDD52 Webbprogrammering - grundkurs

2014

Laboration 1 - HTML & CSS

1. Syfte

  • Att förstå hur ett vanligt textdokument kan markeras med HTML taggar för att formatera texten.
  • Att förstå hur flera dokument kan sammanlänkas med hjälp av HTML.
  • Att presentera flera dokument, sammanlänkade, på IDA:s webbserver (studentens www-pub).
  • Att förstå hur ett CSS dokument kan länkas till ett HTML dokument.
  • Att förstå hur HTML element kan påverkas utav regler skrivna i länkade CSS dokument.
  • Att förstå hur man väljer vilka HTML element som skall påverkas av vilka CSS regler.

2. Genomförande

Läs igenom hela denna sida innan ni börjar med laborationen, detta kommer säkert att underlätta. Laborationen genomförs i två steg, först skapar man den HTML kod man behöver och sedan börjar man med sin CSS kod. Det kan hända att man behöver ändra i sin HTML allteftersom man skriver CSS kod.

2.1 Filer

Alla filerna som behövs för denna laboration finns i mappen "lab1".

  • Hemsida (index.html) - Kort om företaget.
  • Produkt 1 (product1.html) - En sida som beskriver första produkten.
  • Produkt 2 (product2.html) - En sida som beskriver andra produkten.
  • Produkt 3 (product3.html) - En sida som beskriver tredje produkten.
  • Kontakt (contact.html) - En sida som innehåller kontaktinformation samt ett formulär för att skicka meddelanden.
  • CSS kod (stylesheet.css) - Det är denna fil som ni skriver er CSS kod i.
  • Inga andra CSS dokument får länkas till från HTML dokumenten.
  • Endast givna filer skall användas och inga filnamn får ändras. Inga andra filer får heller skapas. Det enda undantaget är att bilder får läggas till i denna mapp.

3. Webbplats med ren HTML

Skapa en webbplats genom att endast använda text och bilder markerade med HTML. Webbplatsen skall vara till ett fiktivt företag som har tre olika produkter. Hitta på ett företagsnamn och tre produkter som detta företag kan tänka sig ha tillverkat.

3.1 Innehållskrav

  • Alla sidor skall följa samma logiska layout med sidhuvud, sidfot, navigering och innehåll. Sidorna skall följa exempel två i denna bild: Exempel på layout.
  • Alla sidor skall till rimlig nivå följa god sökmotorsoptimering enligt Google Search Engine Optimization Starter Guide (se länkar nedan). Som ett minimum skall alla sidor ha unika title och meta-description element.
  • Allt innehåll på sidorna skall vara relevant till det fiktiva företaget och produkten.
  • Sidhuvud, sidfot och navigering skall ha samma innehåll på alla sidor.
  • Sidhuvud skall innehålla logotyp och en rad med förklaring av företaget.
  • Sidfoten skall innehålla copyright-information och mejladress till webbansvarig.
  • Produktsidorna skall alla ha samma layout av innehåll, endast text och bild skall ändras. Varje produktsida skall ha produktens namn, en kort beskrivning, en längre förklaring av produkten, ett pris samt en bild.

3.2 Tekniska krav

  • Webbplatsen skall minst använda taggarna: html, head, title, meta description, body, table, th, tr, td, h1, h2, p, img, ul, li, a, div och span. Förutom detta skall taggar nödvändiga för att skapa formulär användas.
  • Alla sidor skall vara sammanlänkade, man skall alltså kunna nå alla sidor från alla andra sidor.
  • Alla sidor skall validera som HTML5 utan fel via: validerare för html-kod.
  • Inga iframes/frames eller server-side includes får användas.
  • Sidorna skall inte använda taggen table för att skapa en layout. Table skall endast användas för att visa data.
  • Attributet style får inte användas i några taggar.

3.3 Krav på kontaktformulär

  • På kontaktsidan skall det finnas ett formulär där man kan skicka meddelanden.
  • Via kontakformuläret skall man kunna skriva in namn, epost, telefonnummer, sitt meddelande, välja den produkt som meddelandet gäller samt välja om man vill ha uppdateringar mejlade till sig angående denna produkt.
  • I kontaktformuläret är det viktigt att ni använder rätt typ av komponent för olika typer av data som skall insamlas.
  • För val av produkt skall <select> användas. Ingen produkt skall vara förvald, det skall stå "Var god välj" om man inte ännu gjort ett val.
  • Tänk på att kontaktformuläret även skall ha en knapp för att "Skicka".
  • Använd <label> för beskrivning av fälten.
  • Absolut längst upp i formuläret, dvs direkt efter <form> skall det finnas ett element som ser ut såhär: <div id="form_messages"></div>. Detta kommer underlätta kommande laborationer.
  • De olika komponenterna för att fylla i kontaktformuläret skall ha unika "id" och "name" värden. Följande "id" och "name" värden skall användas:
    • Komponenten för namn skall ha "id" och "name": name
    • Komponenten för epost skall ha "id" och "name": email
    • Komponenten för telefonnummer skall ha "id" och "name": phone
    • Komponenten för meddelandet skall ha "id" och "name": message
    • Komponenten för produkt skall ha "id" och "name": product
    • Komponenten för uppdateringar skall ha "id" och "name": updates
    • Komponenten för att skicka (dvs knappen) skall ha "id" och "name": send
  • T ex skall komponenten för namn se ut såhär: <input type="text" name="name" id="name" />

4. Webbplats med HTML och CSS

I föregående steg skapade ni en webbplats med endast HTML. I detta steg skall ni snygga till utseendet på denna webbplats med hjälp av CSS.

4.2 Tekniska krav

  • CSS dokumentet (stylesheet.css) skall minst ha regler för följande: h1, h2, table, th, td och a.
  • Reglerna i CSS dokumentet skall ändra flera egenskaper, inklusive: border, font-size, padding, margin, color, width.
  • Minst två av reglerna skall appliceras på en klass (.class) och minst två av reglerna skall appliceras på ett id (#id).
  • Layouten av alla sidor skall ändras från föregående steg (ren HTML) endast med hjälp utav CSS. Sidorna skall följa exempel ett i denna bild: exempel på layout.
  • Design, färger, typsnitt och layout skall tydligt passa för innehållet.
  • CSS dokumentet skall valideras utan fel via: CSS Validation
  • Minst vid ett tillfälle skall ":hover" användas.
  • Inga CSS regler skall anges via style attributet i HTML taggarna.

5. Redovisning

AutoCorrect: Innan ni kontakter er assistent för rättning använd AutoCorrect för att kolla att ni uppfyller kraven: Klicka här för att komma till AutoCorrect

Inlämning: Mejla till er laborationsassistent när webbplatsen är färdig (både HTML och CSS), den skall finnas tillgänglig på båda studenters konto. I ämnesraden skriver ni "TDDD52 - Laboration 1 - Redovisning". I mejlet skriver ni länken till er publicerade webbplats, era namn, liu-id och epost-adresser.

Muntlig: Laborationsassistenten kan ställa frågor till er angående er inlämning om det är något som kräver förtydligande.

5.1 Deadline

Soft: 2013/01/25

Hard: 2013/03/01

6. Verktyg

De datorer som IDA tillhandahåller har all mjukvara som behövs för genomförandet av laborationen. Det är ok att använda egna datorer om man vill, men all kod måste placeras löpande i www-pub mappen i korrekt struktur enligt instruktioner.

Notera att det inte är tillåtet att använda verktyg där man via ett gränssnitt drar och släpper komponenter för att bygga webbsidan, så kallade WYSIWYG.

7. Litteratur

7.1 Böcker

  • Robert Sebesta - Programming the World Wide Web - Chapter 2 & 3
  • Niederst Robbins - Learning Web Design - Part II & III

7.2 Länkar

7.2.1 HTML

7.2.2 CSS


Sidansvarig: Jakob Bandelin
Senast uppdaterad: 2013-01-13