Senast uppdaterad 3/6-98

Vad man behöver för att göra sig en hemsida

Man behöver först och främst en Internet läsare och det har du ju redan, annars skulle du inte kunna se denna sida. Du behöver också en HTML-editor, och som det kan man använda Anteckningar i Windows95, eller vad jag föredrar ladda hem en från nätet. Om du skulle tycka HTML-text är förjobbigt men ändå vill göra en hemsida så finns det ju alltid WYSIWYG (WhatYouSeeIsWhatYouGet) editors, och en sådan kan man ladda hem på AolPress. Och sen frågar du nartuligtvis "var ska jag lägga upp min hemsida när den är klar?". Det finns många ställen att lägga upp sin hemsida gratis, dem kan du antingen titta på här eller vänta till sista lektionen i kursen.

Lite kort om HTML

HTML är en förkortning av Hyper Text Markup Language. Varje kod börjar med <*> och slutar med </*> där * byts ut mot koden, mer om det kommer du att få lära dig i lektion två. Jag ska också påpeka att det som du ska skriva är det som är rött.

Lektion 1:
Det första du ska skriva

Det första du ska skriva när du startat det du vill göra din hemsida i är:

De här raderna ska ska alltid vara med i ditt HTML dokument. Det spelar ingen roll om man skriver med stora eller små bokstäver men jag skriver med stora för det blir tydligare så. Nu ska jag berätta lite vad det olika sakerna här uppe betyder. Utan koderna <HTML> och </HTML> skulle internetläsaren t ex Netscape Navigator eller Internet Explorer visa sidan på samma sätt som den ser ut med HTMLtext, alltså betyder <HTML> här börjar HTML-koden och </HTML> här slutar HTML-koden. Mellan <HEAD> och </HEAD> så skriver man sedan <TITLE>vad sidan ska heta</TITLE>. <BODY> taggen visar vad det du visar på sidan börjar och </BODY> var det slutar.
Sen skriver vi dÅ in titeln (t ex Min första hemsida) så här:

<HTML>
<HEAD>
<TITLE>Min första hemsida</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Har du några frågor så gå hit

Lektion 2:
Textstorlekar

Nu har vi kommit till rubriken. När man skriver rubriken använder man sig av koden <H*> och </H*> (H:et betyder Heading(Rubrik på Svenska))där * byts ut mot en siffra från 1-6, och 1 ärstörst och 6 är minst. Du kan se hur stora dem är här nedanför:

<H1>

<H2>

<H3>

<H4>

<H5>

<H6>

Sen kommer ju den vanliga texten också. Den skriver du som vanligt under rubriken. Du kan även ändra storleken på texten genom att skriva <FONT SIZE=*> och efter texten skriva </FONT>, där du än en gång byter ut * mot en siffra. Denna gång får du välja mellan 1-7. Om du inte skriver någon FONT SIZE alls så blir det storlek 3. Här ser du de olika storlekarna:

Nu sätter vi in lite text i dokumentet:

<HTML>
<HEAD>
<TITLE>Min första hemsida</TITLE>
</HEAD>
<BODY>
<H1>
Min första hemsida
</H1>
<FONT SIZE=4>
Det här är mitt första försök till en egen hemsida. Med tiden kommer den att bli bättre, ha tålamod.
</FONT>
</BODY>
</HTML>

Nu har du kommit så pass långt att sidan går att titta på, och det kan du göra här

Har du några frågor så gå hit

Lektion 3:
Textformer

Nu kommer det några nya koder att lära sig, t ex att centrera och få fetstil mm. Här kommer en del av koderna uppradade i bokstavsordning:

Centrera = <CENTER> (Center) Om du vill Centrera bild eller text SLUTKOD: </CENTER>
Centrera = <P ALIGN="CENTER"> Om du vill centrera med ett annat kommando SLUTKOD: </P>
Ej ny rad = <NOBR> (No break) Om det är ett stycke där du absolut inte vill ha radbrytning SLUTKOD: </NOBR>
Fet stil = <B> (Bold) Om du vill ha fetstil på texten SLUTKOD: </B>
Höger justera = <P ALIGN="RIGHT"> Om du vill ha höger justerad text eller bild SLUTKOD: </P>
Kursiv stil = <I> (Italic) Om du vill ha kursivstil på texten SLUTKOD: </I>
Ny rad = <BR> (Break) Om du vill ha radbrytning INGEN SLUTKOD
Nytt stycke = <P> (Paragraph) Om du vill ha ett nytt stycke i texten eller en rads mellanrum INGEN SLUTKOD
Understruken stil = <U> (Underline) Om du vill ha texten understruken SLUTKOD: </U>
Vänster justera = <P ALIGN="LEFT"> Om du vill vänsterjustera bild eller text SLUTKOD: </P>

Om du vill skriva t ex <d> så att det syns på sidan så måste du använda dig av specialtecken, annars händer det ingenting. Det gäller också å ä och ö, för om du skriver dem vanligt så kommer dem som inte har ett svenskt tangentbord inte att kunna se dem. Här kommer en lista på sådana tecken:

å = å
Å = Å
ä = ä
Ä = Ä
ö = ö
Ö = Ö
< = <
> = >
& = &
" = "
© = ©
æ = æ
Æ = Æ
ø = ø
Ø = Ø
"hårt" mellanslag =  

Jag ändrar inte å ä och ö till å ä och ö istället när jag visar(jag har gjort det på min sida).Men vi lägger till en del annat.

Vill du ändra stil på texten så kan du göra det genom att skriva <FONT FACE="*"> Där * byts ut mot namnet på typsnittet. Men det finns en nackdel, om den som tittar på sidan inte har det teckensnittet på sin dator så ser han/hon det normala teckensnittet. Men man kan skriva alternativa teckensnitt och då skiljer man dem åt med kommatecken, sÅ här: <FONT FACE="Arial,Courier"> men så klart kan du byta ut Arial och Courier mot vilka teckensnitt som helst. Jag tar inte med teckensnitt när jag demonstrerar här nedanför. Om du vill veta mer om teckensnitt, så gå till www.microsoft.com/truetype/.

<HTML>
<HEAD>
<TITLE>Min första hemsida</TITLE>
</HEAD>
<BODY>
<H1>
<CENTER>
Min första hemsida
</CENTER>
</H1>
<FONT SIZE=4>
Det här är mitt första försök till en egen hemsida. Med tiden kommer den att bli bättre, ha tålamod.
<P>
Nu har jag kommit ännu en bit på väg på min första hemsida, så kom och besök den snart igen.
</FONT>
</BODY>
</HTML>

Här kan du även se på det du har gjort nu, kanske inte så mycket men viktigt.

Har du några frågor så gå hit

Lektion 4:
Horisontiella streck

Nu ska vi ta upp lite om horisontella streck. Man gör de horisontella strecken genom att <HR>. Det finns en del olika streck att välja på. Det finns det enklaste som jag har, där det räcker att skriva <HR> och det ser ut som dem strecken som jag har på min sida mellan varje lektion. Det finns lite annat man kan göra med sträcket också:

Man kan skriva hur långt strecket ska vara i procent t ex <HR WIDHT="80%"> då blir strecket 80%skärmen.

Man kan också använda sig av längd i punkter t ex <HR WIDTH="680"> blir ett nästan lika långt streck som om man bara skriver <HR>(om man kör med en upplösning på 800*600).

Man kan också bestämma streckets höjd. Det gör man genom att skriva t ex <HR SIZE=9>, det betyder att streckets höjd då är 9 punkter.

Strecket har i vanliga fall en svag 3D effekt, om man vill ta bort den så skriver man <HR NOSHADE>

Om man har Internet Explorer kan man ändra färgen på strecket också genom att skriva <HR COLOR="#*"> där man byter ut * mot färgen.

Nu skriver vi in ett streck i texten.

<HTML>
<HEAD>
<TITLE>Min första hemsida</TITLE>
</HEAD>
<BODY>
<H1>
<CENTER>
Min första hemsida
</CENTER>
</H1>
<HR SIZE=2 WIDHT=75% NOSHADE>
<FONT SIZE=4>
Det här är mitt första försök till en egen hemsida. Med tiden kommer den att bli bättre, ha tålamod.
<P>
Nu har jag kommit ännu en bit på väg på min första hemsida, så kom och besök den snart igen.
</FONT>
</BODY>
</HTML>

Nu har vi lagt till ett horisontellt streck också, och sidan kan du titta på här, i nästa kurs lägger vi till färger och bakgrund.

Har du några frågor så gå hit

Lektion 5:
Färger och bakgrunder

Nu ska vi då lägga till en bakgrund och färger till sidan. Vi kan börja med en att ta upp dem vanligaste färgerna. Man skriver alla färger med koder så jag har listat upp dem med de vanligaste först, här:

000000 = SVART
FFFFFF = VIT
FF0000 = RÖD
00FF00 = GRÖN
0000FF = BLÅ
FFFF00 = GUL
00FFFF = CYAN
FF00FF = LILA

Här får du 208 färger till som jag inte har räknat upp än, men det finns många mer, men de här räcker långt. Nackdelen med att ta andra än dem här färgerna är att dem som bara har sin dator inställd på 256 färger inte kan se dem andra.


`#000000`	`#003300`	`#006600`	`#009900`	`#00CC00`	`#00FF00`
`#000033`	`#003333`	`#006633`	`#009933`	`#00CC33`	`#00FF33`
`#000066`	`#003366`	`#006666`	`#009966`	`#00CC66`	`#00FF66`
`#000099`	`#003399`	`#006699`	`#009999`	`#00CC99`	`#00FF99`
`#0000CC`	`#0033CC`	`#0066CC`	`#0099CC`	`#00CCCC`	`#00FFCC`
`#0000FF`	`#0033FF`	`#0066FF`	`#0099FF`	`#00CCFF`	`#00FFFF`
`#330000`	`#333300`	`#336600`	`#339900`	`#33CC00`	`#33FF00`
`#330033`	`#333333`	`#336633`	`#339933`	`#33CC33`	`#33FF33`
`#330066`	`#333366`	`#336666`	`#339966`	`#33CC66`	`#33FF66`
`#330099`	`#333399`	`#336699`	`#339999`	`#33CC99`	`#33FF99`
`#3300CC`	`#3333CC`	`#3366CC`	`#3399CC`	`#33CCCC`	`#33FFCC`
`#3300FF`	`#3333FF`	`#3366FF`	`#3399FF`	`#33CCFF`	`#33FFFF`
`#660000`	`#663300`	`#666600`	`#669900`	`#66CC00`	`#66FF00`
`#660033`	`#663333`	`#666633`	`#669933`	`#66CC33`	`#66FF33`
`#660066`	`#663366`	`#666666`	`#669966`	`#66CC66`	`#66FF66`
`#660099`	`#663399`	`#666699`	`#669999`	`#66CC99`	`#66FF99`
`#6600CC`	`#6633CC`	`#6666CC`	`#6699CC`	`#66CCCC`	`#66FFCC`
`#6600FF`	`#6633FF`	`#6666FF`	`#6699FF`	`#66CCFF`	`#66FFFF`
`#990000`	`#993300`	`#996600`	`#999900`	`#99CC00`	`#99FF00`
`#990033`	`#993333`	`#996633`	`#999933`	`#99CC33`	`#99FF33`
`#990066`	`#993366`	`#996666`	`#999966`	`#99CC66`	`#99FF66`
`#990099`	`#993399`	`#996699`	`#999999`	`#99CC99`	`#99FF99`
`#9900CC`	`#9933CC`	`#9966CC`	`#9999CC`	`#99CCCC`	`#99FFCC`
`#9900FF`	`#9933FF`	`#9966FF`	`#9999FF`	`#99CCFF`	`#99FFFF`
`#CC0000`	`#CC3300`	`#CC6600`	`#CC9900`	`#CCCC00`	`#CCFF00`
`#CC0033`	`#CC3333`	`#CC6633`	`#CC9933`	`#CCCC33`	`#CCFF33`
`#CC0066`	`#CC3366`	`#CC6666`	`#CC9966`	`#CCCC66`	`#CCFF66`
`#CC0099`	`#CC3399`	`#CC6699`	`#CC9999`	`#CCCC99`	`#CCFF99`
`#CC00CC`	`#CC33CC`	`#CC66CC`	`#CC99CC`	`#CCCCCC`	`#CCFFCC`
`#CC00FF`	`#CC33FF`	`#CC66FF`	`#CC99FF`	`#CCCCFF`	`#CCFFFF`
`#FF0000`	`#FF3300`	`#FF6600`	`#FF9900`	`#FFCC00`	`#FFFF00`
`#FF0033`	`#FF3333`	`#FF6633`	`#FF9933`	`#FFCC33`	`#FFFF33`
`#FF0066`	`#FF3366`	`#FF6666`	`#FF9966`	`#FFCC66`	`#FFFF66`
`#FF0099`	`#FF3399`	`#FF6699`	`#FF9999`	`#FFCC99`	`#FFFF99`
`#FF00CC`	`#FF33CC`	`#FF66CC`	`#FF99CC`	`#FFCCCC`	`#FFFFCC`
`#FF00FF`	`#FF33FF`	`#FF66FF`	`#FF99FF`	`#FFCCFF`	`#FFFFFF`

Nu när du "kan" alla färger så kan vi sätta in en bakgrund på sidan. Då gör man så att man i <BODY>-taggen efter BODY skriver BGCOLOR="#*" där * än en gång byts ut, denna gång mot färgkoden. T ex så här: <BODY BGCOLOR="#FFFF00"> Då blir sidan gul.
Text färg kan skrivas in så att hela sidan får den färgen på texten, genom att skriva TEXT="#*" innanför <BODY>-taggen. Så här t ex: <BODY TEXT="#*">. Där * byts ut mot färgen.

Det gäller även färger på länkar, besökta länkar och aktiva länkar. På länkar skriver man på samma sätt som på bakgrundsfärg och textfärg. Istället för BG COLOR och TEXT använder man LINK, VLINK och ALINK, så här: <BODY LINK="#*" VLINK="#*" ALINK="#*">

Om du vill ha en bakgrundsbild så gör du ungefär som på bakgrundsfärg, ända skillnaden är att istället för BGCOLOR och färgen så skriver man BACKGROUND och adressen, så här: <BODY BACKGROUND="*">, där * byts ut mot adressen till bilden.

Nu ska vi skriva in det här på vår sida. Vi väljer en enfärgad gul sida med grön text, blå länkar, lila besökta länkar och bruna aktiva länkar. Vi gör även en röd rubrik. så här:

Då blir det så här.

Har du några frågor så gå hit

Lektion 6:
Bilder och Animationer

Nu ska vi lägga till bilder och animationer till sidan, så kommer den att bli lite trevligare att titta på. När vi lägger till bilder och även animationer så använder vi oss av taggen <IMG SRC="*">, där * byts ut mot adressen till bilden, t ex om bilden eller animationen heter bild.gif och ligger i samma mapp som sidan så skriver man <IMG SRC="bild.gif">, annars skriver man mappens_namn/bild.gif istället. På denna taggen så står IMG för Image(bild) och SRC för Source(källa).

Om du vill göra egna bilder så finns det många program att ta hem på nätet som t ex Paint Shop PRO, det gäller samma sak med animationer (fast inte Paint Shop PRO förstås). Om du vill ha animationer på din sida men inte göra dem själv så gå till mitt animations arkiv. Om man har gjort en egen bild så vet man kanske inte vad man ska spara den som. Om du ska göra flera bilder som du ska göra en animationen av så måste du spara bilden som gif annars går det inte. För vanliga bilder finns en regel som kan vara ganska bra att följa: Ritade bilder ska sparas som gif och fotogarafier som jpg. Det går förstås inte alltid men för det mesta.

Man kan också bestämma själv hur stora bilderna ska vara. Det gör man genom att skriva WIDTH="*" HEIGHT"*" där * byts ut mot bredden/höjden. Om man bara skriver en av dem fixa webläsaren så att det blir rätt storlek på den andra.

När man för musen över så kan man bestämma vad det ska stå också, så här: ALT="*" där * byts ut mot vad det ska stå då. Om du inte förstå så prova på "testsidan".

Nu sätter vi in några bilder på sidan:

Om du vill titta på hur det ser ut så tryck här

Har du några frågor så gå hit

Lektion 7:
Länkar

Nu ska vi då äntligen lägga till länkar på sidan. Man börjar då med att skriva <A HREF="*"> och slutar med </A> där * byts ut mot adressen. Om man vill ha en länk till en annan av sina egna sidor så kan man skriva hela adressen eller bara skriva namnet på sidan, vi tar ett exempel: Istället för att skriva http://home8.swipnet.se/~w-81711/html.html så kan jag skriva html.html.

Om du vill länka till en annan del av sidan ett s k ankare så använder du dig av samma kod fast du måste sätta # framför adressen. Du måste förstås namna ett ställe och det gör du genom att skriva <A NAME="*"> på det stället dit du vill komma. * byts då ut mot ett ord t ex ankare. Och länken till den sidan sen blir <A HREF="#*"> där * byts ut det du skrev som namn t ex ankare. Om ankaret ligger på en annan sida så får man skriva <A HREF="*#*"> där den första * byts ut mot sidans namn och den andra mot ankarets namn.

Om du har en länkar en bild så blir det en ram runt. Om du vill göra den ramen tjockare så skriver du BORDER=* inanför BILD taggen på lektionen innan, där * byts ut mot tjockleken. Om du vill ta bort ramen så skriver du BORDER=0.

Om du skulle vilja att man ska kunna ladda hem något från din sida så gör du precis som en vanlig länk men istället för adressen till sidan så skriver du adressen till (vad det nu är som går att ladda ner).

Om du vill ha en länk till din e-mail dvs. när man trycker på länken så kommer man till sin brevlåda och din e-mailadress redan är ifylld (Det förutsäger dock att den person som trycker på länken har sin e-mail i Explorers/Netscapes brevlåda beronde på vilket denna person nu använder). Ja, om du vill ha en sådan länk så skriv <A HREF="mailto:*">Maila mig här</A> där * byts ut mot din e-mailadress, och där jag har skrivit Maila mig här kan du skriva vad du vill.

Om du vill titta på hur det ser ut så nu, så tryck här

Har du några frågor så gå hit

Lektion 8:
Tabeller

Nu ska vi lära oss att g�ra en tabell till sidan, som vi sedan ska l�gga in d�r. Vi b�rjar med det enklaste jag vet. En ruta med en ram runt. Nu g�r vi igenom hur man ska g�ra steg f�r steg. Vi b�rjar att tala om att vi vill ha en tabell. Det g�r vi genom att skriva <TABLE BORDER=*> där * byts ut mot tjockleken p� ramen till tabellen i pixles, t ex 2. Efter det är det lite mer man ska skriva in. Jag visar allt inklusive det jag redan f�rklarat.
Man skriver:
<TABLE BORDER=2>
<TR>
<TD>
En ruta med en ram p� 2 pixles runt
</TD>
</TR>
</TABLE>

Då blir det så här:

En ruta med en ram p� 2 pixles runt

Om vi vill ha tv� rutor brevid varandra s� ser det ut s� h�r:
<TABLE BORDER=2>
<TR>
<TD>
En ruta med en ram p� 2 pixles runt
</TD>
<TD>
En ruta till med en ram p� 2 pixles
</TD>
</TR>
</TABLE>

En ruta med en ram p� 2 pixles runt En ruta till med en ram p� 2 pixles

Det g�r ju bra s� vi skriver in en rad till:
<TABLE BORDER=2>
<TR>
<TD>
En ruta med en ram p� 2 pixles runt
</TD>
<TD>
En ruta till med en ram p� 2 pixles
</TD>
</TR>
<TR>
<TD>
En ruta med en ram p� 2 pixles runt p� rad 2
</TD>
<TD>
En ruta till med en ram p� 2 pixles p� rad 2
</TD>
</TR>
</TABLE>

En ruta med en ram p� 2 pixles runt En ruta till med en ram p� 2 pixles

En ruta med en ram p� 2 pixles runt p� rad 2 En ruta till med en ram p� 2 pixles p� rad 2

Nu ska jag visa hur man gör om man vill ha en ruta som är lika stor som två vanliga tillsammans. Då gör vi så att vi gör en ruta ovanför tabellen där tabellrubriken ska stå:
<TABLE BORDER=2>
<TR>
<TH COLSPAN=2>Tabellrubrik</TH>
</TR> <TR>
<TD>
En ruta med en ram p� 2 pixles runt
</TD>
<TD>
En ruta till med en ram p� 2 pixles
</TD>
</TR>
<TR>
<TD>
En ruta med en ram p� 2 pixles runt p� rad 2
</TD>
<TD>
En ruta till med en ram p� 2 pixles p� rad 2
</TD>
</TR>
</TABLE>

Tabellrubrik

En ruta med en ram p� 2 pixles runt En ruta till med en ram p� 2 pixles

En ruta med en ram p� 2 pixles runt p� rad 2 En ruta till med en ram p� 2 pixles p� rad 2

Tabellrubrik
En ruta med en ram p� 2 pixles runt	En ruta till med en ram p� 2 pixles
En ruta med en ram p� 2 pixles runt p� rad 2	En ruta till med en ram p� 2 pixles p� rad 2

Om du vill att tabellen ska täcka upp en viss del av fönstret så skriv in WIDTH="*" där * byts ut mot bredden i pixles eller WIDTH="*%" där * byts ut mot bredden i procent. Detta skriver du in efter TABLE BORDER fast i samma tagg, så här:
<TABLE BORDER=2 WIDHT="80%">
Då blir bredden på tabellen 80% av sidans bredd.

Nu skriver vi in detta i dokumentet:

<HTML>
<HEAD>
<TITLE>Min första hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF00" TEXT="#00FF00" LINK"#0000FF" VLINK="#660066" ALINK"#660000">
<FONT COLOR="#FF0000">
<H1>
<CENTER>
<A NAME="ankare"> Min första hemsida
</CENTER>
</H1>
</FONT>
<HR SIZE=2 WIDHT=75% NOSHADE>
<FONT SIZE=4>
Det här är mitt första försök till en egen hemsida. Med tiden kommer den att bli bättre, ha tålamod.
<P>
Nu har jag kommit ännu en bit på väg på min första hemsida, så kom och besök den snart igen.
<P> <HR SIZE=2 WIDHT=75% NOSHADE>
<P>
<CENTER>
<TABLE BORDER=1>
<TR>
<TH COLSPAN=2>Mina favorit länkar</TH>
</TR> <TR>
<TD>
<A HREF="http://home8.swipnet.se/81711/html.html">Jacob�s HTMLkurs på Svenska</A>
</TD>
<TD>
En mycket bra HTML-kurs, på Svenska och allt
</TD>
</TR>
<TR>
<TD>
<A HREF="http://come.to.com/jacob!">Jacob�s hemsida</A>
</TD>
<TD>
Jacob�s hemsida, en av dem bästa privatsidor på nätet
</TD>
</TR>
</TABLE>
</CENTER> <HR>
<P>
Ses bäst med <A HREF="http://www.microsoft.com"> <IMG SRC="explorer.gif" HEIGHT="30" ALT="Ladda hem explorer" BORDER=2;></A> och <A HREF="http://www.netscape.com"><IMG SRC="Netscape.gif" HEIGHT="30" ALT="Ladda hem Netscape" BORDER=2></A>
<P>
<A HREF="#ankare">Till toppen</A>
</FONT>
</BODY>
</HTML>

Om du vill titta på hur det har blivit så titta här.

Vad man behöver för att göra sig en hemsida

Lite kort om HTML

Lektion 1: Det första du ska skriva

Lektion 2: Textstorlekar

<H1>

<H2>

<H3>

<H4>

<H5>

<H6>

Lektion 3: Textformer

Lektion 4: Horisontiella streck

Lektion 5: Färger och bakgrunder

Lektion 6: Bilder och Animationer

Lektion 7: Länkar

Lektion 8: Tabeller

Har du frågor eller synpunkter på min HTML-kurs

Lektion 1:
Det första du ska skriva

Lektion 2:
Textstorlekar

Lektion 3:
Textformer

Lektion 4:
Horisontiella streck

Lektion 5:
Färger och bakgrunder

Lektion 6:
Bilder och Animationer

Lektion 7:
Länkar

Lektion 8:
Tabeller