Låt oss fylla din nya hemsida med innehåll!
Vi bygger upp en enkel hemsida som listar recept på mat.
Låt oss ha med några recept som är enkla att tillaga snabbt och några som ger många portioner, som är lämpliga att ha med sig i en liten matlåda. Välj ut minst ett recept som du gärna tillagar ofta, men inte riktigt kommer ihåg utantill ännu.
Om du snabbt vill komma vidare med HTML så kan du välja ut ett recept ifrån min samling med recept. Rekommenderar varmt Linsbolognesen!
Lägg nu till receptet i din "mywebsite.html"-fil.
Ditt dokument, din hemsida, alltså mywebsite.html skulle kunna se ut såhär just nu:
Linsbolognese
Ingredienser
* 1 gul lök
* 2 vitlöksklyftor
* 2-3 morötter
* ca 200g rotselleri
* 2 msk olivolja
* 0,5 dl tomatpuré
* 2 förpackningar skalade (flådda) hela tomater (à 390/400g)
* färsk basilika - en kruka
Finns ofta redan hemma
* 1,5 dl torra röda linser
* 1 tsk torkad timjan
* 1 tsk torkad rosmarin
* 2 lagerblad
* 2 grönsaksbuljongtärningar
* 2 msk soja
* 5dl vatten
* salt & peppar
Tillagning
1. Skala gullök och vitlök
2. Skala morötter och rotselleri
... o.s.v.
Spara och ladda om din webbläsare för att visa den nya versionen av din hemsida med mer innehåll.
Som du nu ser så visas allting på en lång rad med text.
Nästa steg är nu att märka upp innehållet i din hemsida så att webbläsaren vet vad som är rubriker, vanlig brödtext, vad som är en lista med innehåll o.s.v. Innehållet på din hemsida "märker du upp" med "HTML-taggar". Du kodar i "hyper text markup language"(HTML).
Vi tar en sak i taget!
Vi börjar med rubriken!
headings... (h1, h2 o.s.v.)
<h1>Linsbolognese</h1>
Hur ser hemsidan ut nu?
Vad förändrades?
Varför blev rubriken så stor? Varför blev den fetstilt? Vi har inte skrivit någon kod ännu som säger hur det hela ska se ut! Webbläsaren gissar att huvudrubriken ska vara större och fetstilt.. Vi kan ändra detta senare med css.
Det är en god princip att följa att varje sida bara ska ha en h1, av flera skäl.
Rubrikerna "Ingredienser" och "Tillagning" är våra underrubriker. Du kan sannolikt relatera till en boks innehåll och struktur. En bok har vanligtvis en titel (h1) och att den sedan kan innehålla flera olika kapitel ("som alla är h2:or"), dessa kapitel kan i sin tur ha innehåll som delas in i sektioner under flera underrubriker (h3, h4 o.s.v.)
Ändra nu så att Ingredienser och Tillagning är "h2"-rubriker. Just ditt recept kanske har fler underrubriker, eller inga alls - använd de h2, h3 o.s.v. taggar som just du behöver till ditt innehåll!
... ul med li inuti...
Om du har löpande text i ditt recept, kanske en beskrivning i slutet med några extra tips, kanske ett stycke text som berättar om när du för första gången upptäckte detta recept, då märker du upp den texten med taggen "p" (<p>). I detta exempel kommer texten längst ner på sidan anses vara ett stycke text som är lämpligt att märka upp med <p>.