Uppgift 1 – en receptsida

Leta rätt på ett ganska omfattande (långt) matrecept med tillhörande bild på nätet. Spara bilden i din mapp, och kopiera in texten i ditt html-dokument.

1. Formgivning med html-kod

Här börjar du med att bygga hela sidan med endast html-kod. Ange typsnitt och färg och annat, enligt nedanstående punkter, i html-koden. Detta gör du för att du ska lära dig hur html-kod fungerar, med textformatering och allt.

Lägg till och formge din receptsida enligt följande:

• Sidan ska ha en titel (välj själv)
• Sidan ska ha en mycket ljusblå bakgrundsfärg. Textfärgen ska vara mörk (valfri färg).
• Rubrikerna väljer du själv typsnitt på, brödtexten ska vara Verdana, i läsvänlig storlek
• Överst – en stor rubrik, med namnet på maträtten.
• Under bilden – en mellanrubrik, ”Ingredienser”
• Gör en onumrerad lista med ingredienserna i fet stil
• Under ingredienserna – en mellanrubrik, ”Gör så här:”
• Dela in instruktionstexten i lagom långa stycken
• Betona vissa viktiga ord i texten genom att ge dem fet stil och avvikande färg

Lämna in din receptsida innan du går vidare!

2. Gör om formateringen med css

När du är klar med detta öppnar du ett nytt textdokument, sparar det som recept.css i samma mapp som html-dokumentet. Nu ska du formge din receptsida med css-kod istället för html-kod. Du måste börja med att rensa bort all "utseendekod" från ditt html-dokument, och sedan skriva in motsvarande i css-dokumentet. Glöm inte att koppla stilmallen till html-dokumentet!

Du kan hitta fakta om html-kodens grunder på Webdesignskolan under kapitlet "Html grunder". Början till CSS hittar du på samma ställe, under "CSS grunder".

Spara denna sida med nytt namn och lämna in!