Lektion 1


Min första hemsida

Innan vi börjar:

HTML på svenska finns även som e-bok. Vill du läsa den på datorn, läsplattan eller i telefonen kan du läsa e-boken i stället. HTML på svenska som e-bok hittar du på Hitta e-boken. Om du lånar e-boken på ditt bibliotek är det helt gratis. Länk till ditt bibliotek finns också på Hitta e-boken i länken ovan.

Nu sätter vi igång med första lektionen.

Starta den texteditor eller ordbehandlare du vill använda för att skriva HTML-kod och skriv följande sex rader:

<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

Dessa rader ska alltid finnas med i dina HTML-dokument! Det spelar ingen roll om du skriver HTML-koder med gemener (små bokstäver) eller versaler (STORA BOKSTÄVER). I kursen använder vi versaler. Nu ska vi gå igenom vad ovanstående rader betyder.

<HTML> talar om för webbläsaren att här börjar den HTML-kod som beskriver hur sidan ska se ut. Följaktligen betyder koden</HTML> “här slutar HTML-koden”. Utan dessa koder kommer webbläsaren att visa sidan på samma sätt som den ser ut i texteditorn och det kan bli rätt tröttsamt att läsa.

Innanför <HEAD>-koderna talar man till exempel om vad sidan heter. Vi återkommer till det alldeles strax.

<BODY>-koderna anger var det du visar på sidan börjar och slutar. Det är mellan de koderna som det mesta av innehållet i en hemsida står.

Nu ska vi döpa sidan och fylla den med text. Infoga en rad mellan <HEAD>-koderna:

<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

<TITLE> används för att döpa sidan. Det du skriver mellan <TITLE>-koderna är det som står längst upp i webbläsaren när någon tittar på din sida. Vi ska snart titta efter hur det ser ut, men först ska vi lägga till ytterligare några rader:

<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY>
Välkommen till min hemsida!
Det här är mitt första försök att göra en egen hemsida.
Ju mer jag lär mig, desto bättre kommer sidan att bli. 
Ha lite tålamod så blir du rikligt belönad!
</BODY>
</HTML>

När det gäller specialtecken som å, ä och ö finns det en del saker att tänka på, men det lämnar vi till senare. Om å, ä och ö ser konstiga ut på din sida behöver du inte oroa dig för det. Vi tar hand om det i lektion 9.


Nu är det äntligen dags att titta hur sidan ser ut. Spara dokumentet under namnet lektion1.htm. När du sparar dokumentet är det viktigt att du gör det i textformat. En vanlig ordbehandlare lägger till en del styrkoder om du inte sparar dokumentet i textformat. Om du använder en texteditor slipper du det problemet. Filtillägget “.htm” betyder att det är ett HTML-dokument. Ett HTML-dokument måste ha fil-tillägget “.htm” eller “.html”. Vi använder filtillägget “.htm” i våra övningar.

Öppna html-dokumentet i webbläsaren. Kortkommandot Ctrl + O (i Windows) eller Cmd + O (i Mac) brukar fungera i många webbläsare. Leta reda på filen lektion1.htm. Här kan du se hur sidan ser ut.

Lektion 1 - Min första hemsida

Klicka för att förstora

Inte så snyggt, eller hur? All text hamnar i en enda lång rad fastän vi har skrivit den på olika rader. Det fixar vi i nästa lektion.