F�rsta sidan: Din f�rsta hemsida

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:

Tryck p� Start-knappen.
V�lj "K�r"/"Run".
Skriv "notepad" i f�ltet.
Tryck p� OK-knappen
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:

V�lj "Arkiv"
V�lj "Spara som"
Skriv in filnamnet som "index.html"
V�lj vart p� h�rddisken du vill spara din sida.
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.