Enkel html

Hur man skapar ett enkelt html-dokument För att skapa ett enkelt html-dokument kan man använda olika typer av enklare textredigeringsprogram, exempelivis TextEdit, men jag har valt att visa hur man gör det i DreamWeaver.

1 1. Vi börjar med att öppna DreamWeaver och skapa ett nytt dokument. Här väljer jag alltså “More”.

2. Då får jag upp en ruta med en massa alternativ och jag vill ha ett html-dokument och jag vill att dokumenttypen ska vara HTML 5 .

2

3

3. En av anledningarna till att jag gillar DreamWeaver är att programmet “gör saker” åt en. All standardkod som vi ser här på bild 3 finns direkt när man öppnar dokumentet i Dreamweaver så man slipper själv ange det.

4

4. Själva hemsidan som jag ska göra nu skriver jag i body-delen. Jag vill ha en header med en rubrik så jag anger en headertagg. Även här “hjälper” DW användaren och ger förslag så fort man börjar skriva <.

5

5. I min header har jag en rubrik som man anger med taggen <h1>. Man kan ha olika rubriknivåer på den (ex. 1,2,3,4,5,6).

Varje tagg (ex. <h1>) har en “sluttagg” som stänger med ett snedstreck (i detta fall då </h1>).

6

6. Nu till sj채lva receptbloggen. Den har jag under en del som heter <section></section> och jag delar upp de olika recepten i olika delar m h a <article></article>.

7. Varje recept har d책 en egen mindre rubrik <h3></h3> och en paragraf <p></p> d채r jag skriver hur man bakar det man nu ska baka.

7

8 9 8. Nu kom jag på att jag vill lägga in en bild på kanelbullar vilket jag gör med <img src=”” alt=””/> där jag anger källan för bilden (src) och jag ger bilden ett namn/beskrivning (alt). Här behövs ingen sluttagg.

9. Varje recept behöver ingredienser så jag gör en liten lista. <ul> (osorterad lista) beskriver vilken typ av lista jag vill ha och <li> är själva punkterna i min lista.

10

10. Här ser jag att jag inte har gett min hemsida en titel så jag ändrar <title> till Jasminas receptblogg.

Den titeln man anger här är det man ser i fliken på webbläsaren, vad hemsidan heter.

11. En annan bra grej med DreamWeaver är att man kan dela upp vyn i kod och design, och då ser man hur ens hemsida kommer att se ut när den publiceras. Nu är det en konstig liten ruta där min bild ska vara eftersom jag länkar till en bild som inte finns.

12

12. Det här lilla som jag har gjort nu räcker gott och väl för en enkel, kanske inte så snygg, men fungerande hemsida. Jag sparar filen som “index.html” för att detta är min startsida på bloggen. Nu när jag har mitt enkla html-dokument är deet bara att ladda upp på en server och dela med mig av recepten!