0040 text och bild

På JSFiddle finns ett exempel. Lek främst med CSS-koden och försök förstå vad de olika bitarna gör.

Uppgift

Starta Sublime text 3. Du har väl installerat.

Gör en mapp som heter 0040-text-och-bild i mappen webbutveckling.

Lägg till start.html och style.css.

Gör en hemsida med text, rubriker och bilder. Gör ungefär som exemplet på JSFiddle.

Som text kan du ta Arne Heines svenska lorem ipsum

Låna bilder som man får använda eller ta egna bilder. Gör en bildsökning på Google och klicka på sökverktyg och välj som får användas.

Krav:

  1. Text med ingress, första stycket, i avvikande stil.
  2. Minst tre bilder varav en är till vänster, en är till höger och en är centrerad. Den centrerade bilden har ingen text bredvid sig. Bilderna i kanten har text på andra sidan.
  3. Se till att det är lagom mycket luft kring bilderna.
  4. Använd artikelrubrik <h1> och underrubriker <h2>.
  5. Sätt storlek på all text.
  6. Sätt typsnitt, font-family, på all text.
  7. Textraderna ska vara mellan 35 och 65 tecken långa.

Validerar sidan?

För att öka chanserna att sidan ser lika dan ut i olika webbläsare kan sidan valideras. Ta för vana att validera sidans HTML- och CSS-kod ofta. Länkar till valideringssidor följer.

För att olika webbläsare ska visa samma sida på samma sätt behöver de tolka HTML- och CSS-kod på liknande vis. W3C, World Wide Consortium, är den organisation som sköter standardisering av kod för webben.

Kopiera HTML-koden och klistra in den i W3C:s HTML-validator. Ändra på din kod tills den validerar.

Kopiera CSS-koden och klistra in den i W3C: CSS-validator

Lägg upp på webbhotellet

Lägg upp filerna på webbhotellet. Mappen måste också med.