Till Startsidan
JavaScript.nu / HTML-kurs / Din första hemsida

Din första hemsida

I detta kapitel:
Starta NotePad
Spara filen
Öppna filen
Taggarna
Start-/Avslutningstagg
Taggarnas betydelse
Test


På denna sida ska du lära dig skapa din första hemsida. Det ska inte bli en avancerad sida, endast det absolut nödvändigaste kommer att finnas med på din sida.
Till att börja med måste du öppna ett skrivprogram. Du bör INTE använda ett program som Word, eftersom du nu ska skriva in HTML-kod i sidan. Jag rekommenderar att du som nybörjare använder vanliga NotePad.
För att starta NotePad:
  1. Tryck på Start-knappen.
  2. Välj "Kör"/"Run".
  3. Skriv "notepad" i fältet.
  4. Tryck på OK-knappen
  5. Vips du ska nu ha öppnat NotePad.

För att nu skapa din första sida ska du skriva av det som finns i fältet nedan till NotePad.
<HTML>
<HEAD>
<TITLE>Rubrik på din sida</TITLE>
</HEAD>
<BODY>
Hej, detta är min första hemsida!
</BODY>
</HTML>

Du bör nu alltså ha ett osparat NotePad-dokument öppet som ser ut såhär:
NotePad
För att du nu ska kunna spara din HTML-kod ska du:
  1. Välj "Arkiv"
  2. Välj "Spara som"
  3. Skriv in filnamnet som "index.html"
  4. Välj vart på hårddisken du vill spara din sida.
  5. Tryck på "Spara".

Du har nu alltså skapat din första hemsida! Svårare var det inte.
Att du valt att spara din fil med namnet "index" beror på att den första sidan en website innehåller alltid ska heta "index.html". Så varje gång du besöker en webbplats som http://www.javascript.nu/ så är det egentligen http://www.javascript.nu/index.html som laddas in (egentligen är inte detta helt sant, man kan också ha filändelser som .htm, .shtml, .asp m.m. Detta är dock överkurs och vi ska inte gå in närmare på filändelser i detta kapitel).
Vill du framöver skapa fler sidor, t.ex. en med text, en med bilder och en med länkar så får du döpa dem till något annat än index.html. Lämpliga namn skulle då kunna vara text.html, bilder.html och lankar.html.

Nu vill du antagligen också se hur din sida ser ut i webbläsaren. Då är det bara att starta filen du nyss sparat så startar webbläsaren automatiskt med din hemsida. Dvs, starta Utforskaren och leta upp din fil och dubbelklicka på den. Nu öppnas ett nytt webbläsarfönster med din hemsida. Nedan ser du hur det ska bli:
Första hemsidan
Visst, det kanske inte blir världens mest avancerade hemsida, fast det är i alla fall en bit på vägen. Låt oss nu undersöka vad vi har tagit med i vår HTML-kod. HTML-koden är alltså den kod du tidigare skrev av och som alltså är grunden för din hemsida. Nedan beskrivs vad varje tagg gör för något. Varje "ord" som finns inom HTML skrivs inom en så kallad "tagg". Några exempel på taggar är som du ser i HTML-koden du kopierat:

  • HTML
  • HEAD
  • TITLE
  • BODY
Än så länge har du alltså endast använt dig av 4 ord i språket HTML. Jämför detta med alla ord, dvs taggar, som finns inom HTML. Vissa taggar är vanligare än andra, fast åtminstone 20 olika taggar bör en webbdesigner kunna. Är man duktig ska man kunna minst dubbelt så många.
Du kan jämföra din sida med 4 ord med en målare som målar med 4 färger. Visst går det att måla en tavla med bara fyra färger, fast vill man få till en riktig vacker tavla bör man använda sig utav fler färger.
Som du ser så har alla (fyra) taggar vi använt av oss en starttagg och en avslutningstagg. Vad är nu detta?
Jo, kollar du noga så ser du att det finns två av varje tagg på sidan, fast första gången taggen skrivs omges den bara av ett < och ett >. Andra gången omges den av ett </ och ett >.
Som exempel:
Starttagg: <TITLE>
Avslutningstagg: </TITLE>

Du kommer senare under denna kurs lära dig mer om start- och avslutningstaggar.

Alla HTML-sidor bygger på en massa taggar som säger åt webbläsaren (det program som läser in sidan, t.ex. Internet Explorer eller Netscape) hur sidan ska se ut.
Låt oss gå genom vad de fyra taggarna du använt gör:

  • HTML - Alla sidor börjar med <HTML> och slutar med </HTML>. Detta är en regel du bara måste lära dig.
  • HEAD - Alla sidor måste innehålla ett <HEAD>, som ska skrivas direkt efter <HTML>. Alla sidor ska också innehålla ett </HEAD>. Detta är en regel du bara måste lära dig.
  • TITLE - Alla sidor måste innehålla ett <TITLE>, som oftast ska skrivas direkt efter <HEAD>. Direkt efter <TITLE> ska sidans rubrik skivas in. Det är denna rubrik som syns längst upp i sidans blåa rand (se bilden ovan). Direkt efter rubriken ska </TITLE> skrivas. Detta är en regel du bara måste lära dig.
  • BODY - Alla sidor måste innehålla ett <BODY>, som ska skrivas direkt efter </HEAD>. Direkt efter <BODY> skriver du in din text och framöver de andra taggar du kommer att lära dig. Efter din text och de andra taggar du framöver kommer att lära dig att använda ska du ha </BODY>. Detta är en regel du bara måste lära dig.


Test
I slutet av varje kapitel i HTML-kursen finns några frågor som du ska svara på för att testa dina kunskaper inom HTML. Om du har fått alla rätt så är det bara att gå vidare, fast har du haft något fel kan det kanske vara klokt att försöka lista ut vad som kan ha varit fel. Givetvis kan du gå vidare även om du inte svarar rätt på alla frågor.
Vilken filändelse kan (brukar) ett HTML-dokument ha?
.html
.txt
.com

Vilket av dessa alternativ är inte en giltig tagg?
HEAD
BODY
FOOT

Vad är en avslutningstagg?
En tagg som avslutar den motsvarande start-taggen
Den sista taggen man har i ett HTML-dokument
En tagg som avslutar alla start-taggar

Vart i HTML-dokumentet bestämmer man vad hemsidans rubrik blir?
Man skriver rubriken längst upp i sitt HTML-dokument
Man skriver rubriken mellan <TITLE> och </TITLE>
Rubriken är samma sak som filnamnet

En website kan innehålla många HTML-dokument. Vad bör det första HTML-dokumentet ha som filnamn?
start.html
index.html
readme.html







Copyright © Omid Rouhani 1997-2022; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]