Senast uppdaterad: 2000-03-29 klockan: 21.35

HTML på svenska

Vad behöver man för att göra hemsidor?

En av de bästa sakerna med att göra hemsidor är att man inte behöver några dyra program eller avancerad utrustning. Det enda man måste ha är en texteditor och en webbläsare, till exempel Netscape Navigator eller Microsoft Internet Explorer. Internetläsaren har du ju redan. Då återstår texteditorn. Om du har Microsoft Windows kan du använda "Anteckningsblocket" (i den engelska versionen heter det "Notepad"). Det går naturligtvis även bra att använda en ordbehandlare som Word, Word Perfect eller liknande, men eftersom man inte har någon användning för alla de avancerade funktionerna i en ordbehandlare är det ofta bättre att använda en enkel editor.

I slutet av varje lektion finns ett e-postformulär där du kan ställa frågor eller komma med synpunkter. Jag besvarar all e-post så snart som möjligt!

SITT NER OCH VAR TYST, NU BÖRJAR KURSEN!

Inledning

HTML är en förkortning av Hyper Text Markup Language och är egentligen inte ett programmeringsspråk utan en uppsättning koder. Varje textutseende och layout har sin egen kod eller "tag" som man ibland kallar det. Jag har valt att kalla det kod eftersom det här är en svensk kurs! Koden för t ex fetstil är <B> (bold). All text som står efter en kod får det utseende som koden ger. </B> betyder "slut på fetstil". Alla HTML-koder är omgivna av <>. De flesta koder fungerar på samma sätt. En startkod och en slutkod. Start-koden är omgiven av <> och slutkoden är omgiven av </>, som t ex slutkoden för fetstil: </B>. Koden för kursiv stil är <I> (italics) och </I> är slutkoden för kursiv stil. Ganska enkelt va´?! Man kan skriva flera HTML-koder på samma rad om man vill och det spelar ingen roll om man har mellanslag eller inte mellan koderna. Det viktigaste är att det är lätt att läsa koden. I kursen kommer vi oftast att ha en kod per rad. Det är lättare för en ovan att se vad som händer då.

I lektion 9 får du lära dig hur du kan tjäna pengar på din hemsida. Varje gång någon klickar på en av dina länkar kan du få betalt. Det låter väl spännande?!

Nu när du har lärt dig grunderna är det dags att göra lite nytta!

Lektion 1: "Min första hemsida"

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 man skriver HTML-koder med gemener eller versaler. Jag tycker att det blir tydligare med 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 talar om hur sidan ska se ut. Följaktligen betyder </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 t ex 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>-koderna 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 man 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å kommer du att bli 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.

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 man inte sparar dokumentet i textformat. Om man använder en texteditor slipper man det problemet. Filtillägget "htm" betyder att det är ett HTML-dokument. Ett HTML-dokument måste ha filtillägget "htm" eller "html". Av praktiska skäl använder vi filtillägget "htm" i våra övningar.

Öppna html-dokumentet i webbläsaren:

Om du använder Netscape Navigator eller Microsofts Internet Explorer trycker du Ctrl + O och letar reda på filen lektion1.htm.

Här kan du se hur sidan ser ut. Inte så snyggt, eller hur?! Det fixar vi i nästa lektion!

[Visa fördjupningsavsnitt]

Lektion 2: Textformatering

Med några nya koder ska vi se till att hemsidan vi gjorde i förra lektionen blir lite trevligare att titta på. Du vet redan att <B> betyder fetstil och <I> betyder kursiv stil. Lägg till några nya koder i HTML-dokumentet "lektion1.htm":

<HTML>
<HEAD>
 <TITLE>Min hemsida</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<P>
<FONT SIZE=4>
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å kommer du att bli rikligt belönad!
</FONT>
</BODY>
</HTML>

Vad koden <CENTER> betyder är inte svårt att gissa: centrera. Allt efter <CENTER> centreras mitt på raden. </CENTER> talar om att centreringen ska upphöra.

<H1> betyder "rubrik storlek 1" (header1). Storlek 1 är störst och 6 är minst:

<H1>

<H2>

<H3>

<H4>

<H5>

<H6>

<P> betyder "nytt stycke" (paragraph). I vårt exempel visar det sig som en blankrad mellan rubriken och brödtexten. Man kan inte sätta in flera <P> efter varandra för att få ett stort mellanrum. Vill man ha det får man lösa det på andra sätt. Det finns en slutkod för "nytt stycke" (</P>), men den behöver man inte använda.

<FONT SIZE=4> talar om att vi vill ha den efterföljande texten i storlek 4. Det finns 7 storlekar. 1 är den minsta och 7 är den största. Slutkoden är </FONT>.

Nu ska vi se hur sidan ser ut. Spara den först, men byt namn till lektion2.htm. Öppna dokumentet i webbläsaren.

Sidan ser ut så här. Det börjar arta sig, men lite mer färger skulle se trevligt ut. Det tar vi i nästa lektion.

[Visa fördjupningsavsnitt]

Lektion 3: Färger och horisontella streck

"Standardutseendet" på en hemsida är grå bakgrund, svart text, blå obesökta länkar och röda besökta länkar. Det kan man lätt ändra på. Ändra i dokumentet "lektion2.htm" så att det ser ut så här:

<HTML>
<HEAD>
 <TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF99" TEXT="#000080"
LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<HR WIDTH="80%">
<P>
<FONT SIZE=4>
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å kommer du att bli rikligt belönad!
</FONT>
<HR WIDTH="80%">
</BODY>
</HTML>

I koden <BODY> kan man lägga till flera parametrar som talar om hur sidan ska se ut. BGCOLOR anger vilken bakgrundsfärg sidan ska ha. Färgkoden fungerar så här:

Tecknen efter # kan delas upp i tre grupper med två tecken vardera (FF DA 2D). De talar om hur mycket rött, grönt och blått som ska blandas för att skapa den bakgrundsfärg man vill ha. Den första gruppen innehåller det hexadecimala värdet för mängden röd färg, nästkommande grupp hur mycket grönt och sista gruppen hur mycket blått som ska ingå i bakgrundsfärgen. I vårt exempel betyder det att vi vill ha FF (255 decimalt) röd färg, DA (218 decimalt) grönt och 2D (45 decimalt) blått. En hög siffra betyder att det ska vara mycket av färgen och en låg siffra att det ska vara lite. Minimum är 00 (ingen färg) och maximum är FF (max färg). Om du inte vill prova dig fram kan du använda någon av nedanstående färger.

000000 = svart
FFFFFF = vitt
FF0000 = rött
00FF00 = grönt
0000FF = blått
FFFF00 = gult
00FFFF = cyan
FF00FF = lila

Saknar du någon färg? Här har du resten av de 216 färger du bör hålla dig till.

TEXT, LINK, VLINK och ALINK anger vad det ska vara för färg på text, obesökta länkar, besökta länkar och länkar i det ögonblick man klickar på dem. Färgkoderna fungerar på samma sätt som med BGCOLOR.

HTML-koden <HR WIDTH="80%"> betyder att här vill vi ha ett horisontellt streck (horisontal rule) som har en längd som motsvarar 80% av skärmens bredd. Om man anger en bredd, men utelämnar %-tecknet betyder det att strecket ska vara så många pixlar brett. <HR WIDTH=620> betyder att strecket nästan räcker hela vägen över en skärm som är 640 pixlar bred.

Om man vill kan man även ändra färgen på text. <FONT COLOR="#FF0000"> gör efterföljande text röd. </FONT> ändrar tillbaka till vanlig färg. Färgkoderna är desamma som för t ex bakgrundsfärg.

Spara dokumentet under namnet lektion3.htm och se hur det ser ut.

Det ser ut så här. I nästa lektion ska vi lägga till länkar.

[Visa fördjupningsavsnitt]

Lektion 4: Länkar

En av de saker som gör hemsidor så spännande är att man kan placera länkar från en sida till en annan och på det sättet hoppa mellan olika sidor. Man kan t ex göra en länk från en sida i Sverige till en sida i Australien. Det enda som krävs är att man har adressen till den sida man vill länka till. Man kan naturligtvis även göra länkar mellan egna sidor, eller t o m inom en sida. Det går att använda länkar till annat också. Vi ska snart titta på det.

Vilka är våra favoritlänkar? Netscape och Microsoft är ganska bra. Då behöver vi veta vilka adresser, eller URL:er (Uniform Resource Locator), de har. Netscape har "http://www.netscape.com" och Microsoft har "http://www.microsoft.com". Länken till Netscape blir:

<A HREF="http://www.netscape.com">Netscape</A>

Vad betyder detta? Länkar har koden <A>. <HREF> (Hypertext REFerence) talar om vilken typ av länk det är, nämligen en referens till en annan adress. Efter adress-koden talar man om vad det ska stå på länken: Netscape. Sedan avslutar vi länken med </A>. Det var väl inte så svårt? Nu ska vi skapa länken till Microsoft. Vi börjar med att tala om vilken typ av länk vi vill göra:

<A HREF=

Sedan anger vi adressen till Microsoft:

<A HREF="http://www.microsoft.com">

Vad ska ska det stå på länken?

<A HREF="http://www.microsoft.com">Microsoft

Och avslutningskoden:

<A HREF="http://www.microsoft.com">Microsoft</A>

Klart!

Nu lägger vi till dem i vår hemsida från lektion 3:

<HTML>
<HEAD>
 <TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF99" TEXT="#000080"
LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<HR WIDTH="80%">
<P>
<FONT SIZE=4>
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å kommer du att bli rikligt belönad!
</FONT>
<P>
<A HREF="http://www.netscape.com">Netscape</A>
<P>
<A HREF="http://www.microsoft.com">Microsoft</A>
<HR WIDTH="80%">
</BODY>
</HTML>

Visst är det trevligt att få post! Därför ska vi lägga till en e-postlänk, så att den som besöker hemsidan kan skicka några rader. Allt vi behöver är din e-postadress. Här använder vi: htmlps@nkls.net. Vi bygger upp länken steg för steg:

<A HREF=

Inga konstigheter så långt! Vi går vidare:

<A HREF="mailto:

Vänta nu! Vad var det där? Jo, "mailto:" talar om att webbläsaren ska öppna sin e-post-funktion. Nu måste vi tala om vem vi vill skicka e-post till:

<A HREF="mailto:htmlps@nkls.net">

Vad ska det stå på länken? För tydlighetens skull skriver vi e-postadressen:

<A HREF="mailto:htmlps@nkls.net">htmlps@nkls.net</A>

Jag lade till slutkoden </A> på en gång. Du vet ju hur det fungerar nu. Vi sätter in den här raden på hemsidan:

<HTML>
<HEAD>
 <TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF99" TEXT="#000080"
LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<HR WIDTH="80%">
<P>
<FONT SIZE=4>
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å kommer du att bli rikligt belönad!
</FONT>
<P>
<A HREF="http://www.netscape.com">Netscape</A>
<P>
<A HREF="http://www.microsoft.com">Microsoft</A>
<HR WIDTH="80%">
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:htmlps@nkls.net">htmlps@nkls.net</A>
</FONT>
</CENTER>
</BODY>
</HTML>

Spara dokumentet under namnet "lektion4.htm".

I nästa lektion ska vi lägga till bilder! Så här ser sidan ut nu.

[Visa fördjupningsavsnitt]

Lektion 5: Bilder

Lite bilder kan lätta upp en hemsida. För att du ska kunna visa en bild på hemsidan måste den vara i antingen gif- eller jpg-format. Jpg-bilder är bra på det sättet att de är relativt små. Ju större en bild är, desto längre tid tar det att ladda in den. Gif-bilder är något större än jpg-bilder, men har den fördelen att de kan göras "genomskinliga" och man kan spara dem i ett sådant format att de laddas in gradvis med högre och högre upplösning (interlaced gif). Det är bra eftersom man kan se vad bilden föreställer redan innan den är helt laddad. Jag har några bilder vi kan använda:

HTML-koden för bilden av de tre skönheterna är:

<IMG SRC="vacker.jpg" BORDER=1>

IMG (image) talar om att vi vill visa en bild. SRC (source) talar om att källan (bilden) är "vacker.jpg". Man måste ange sökvägen till bilden om den inte ligger i samma katalog som den HTML-sida som anropar den. Om "vacker.jpg" hade legat i en underkatalog som heter "bilder" skulle koden ha blivit:

<IMG SRC="bilder/vacker.jpg" BORDER=1>

Observera att snedstrecket (/) ska luta framåt och inte bakåt som man kanske är van vid från DOS-miljö! BORDER=1 betyder att vi vill ha en ram som är 1 punkt bred runt bilden. Om vi inte vill ha någon ram skriver vi BORDER=0.

En del har Internetläsare som inte kan visa bilder. För att de ändå ska veta vad en bild föreställer kan vi hjälpa dem genom att lägga till lite kod:

<IMG SRC="bilder/vacker.jpg" ALT="Skönheter" BORDER=1>

ALT (alternative) gör att de som inte kan se bilden i stället ser den alternativa texten. Man måste inte använda ALT, men det är hövligt att göra det.

Vi lägger till bilderna på hemsidan:

<HTML>
<HEAD>
 <TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF99" TEXT="#000080"
LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<HR WIDTH="80%">
<P>
<FONT SIZE=4>
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å kommer du att bli rikligt belönad!
</FONT>
<P>
<CENTER>
<H4>Här är mina idoler:</H4>
<P>
<IMG SRC="vacker.jpg" ALT="Skönheter" BORDER=1>
</CENTER>
<P>
<CENTER>
<H4>Mina favoritlänkar:</H4>
<P>
<A HREF="http://www.netscape.com">
<IMG SRC="netscape.gif" ALT="Netscape" BORDER=1></A>
<P>
<A HREF="http://www.microsoft.com">
<IMG SRC="microsft.gif" ALT="Microsoft" BORDER=1></A>
</CENTER>
<HR WIDTH="80%">
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:htmlps@nkls.net">htmlps@nkls.net</A>
</FONT>
</CENTER>
</BODY>
</HTML>

Jag bytte ut texterna "Netscape" och "Microsoft" mot koden för bilderna! Det betyder att bilderna fungerar som länkar. När man klickar på bilderna blir man länkad till Netscapes eller Microsofts hemsidor! Det är väl snyggt?

Spara sidan under namnet "lektion5.htm" och titta hur den ser ut.

Ålrajt!! Nu börjar det se ut som en riktig hemsida!

[Visa fördjupningsavsnitt]

Lektion 6: Tabeller

Vi ska lägga till en tabell i hemsidan. Först ska vi titta lite på hur man gör tabeller. Vi börjar med enklast tänkbara. En tabell med bara en ruta:

En ruta med ram runt

Nu ska vi gå igenom steg för steg hur man gör. Vi börjar med att tala om att vi vill ha en tabell:

<TABLE BORDER=2>

TABLE (tabell) betyder att vi vill göra en tabell. BORDER=2 talar om att vi vill ha en ram som är 2 pixlar bred mellan rutorna och runt tabellen. Nästa steg är att tala om att vi vill påbörja en rad i tabellen:

<TABLE BORDER=2>
<TR>

<TR> (table row) betyder att här börjar en ny rad i tabellen. Vi måste tala om att vi vill ha ett fält i tabellen också:
<TABLE BORDER=2> <TR> <TD> En ruta med ram runt
<TD> (table data) gör att vi får ett datafält i tabellen. Dessa tre rader är vad vi behöver för att definiera en enkel tabell. Vi sätter dit slutkoder också:
<TABLE BORDER=2> <TR> <TD> En ruta med ram runt </TD> </TR> </TABLE>
Nu ska vi lägga till en ruta i tabellen bredvid den vi redan har. Det ser ut så här:
<TABLE BORDER=2> <TR> <TD> En ruta med ram runt </TD> <TD> En ruta till med ram runt </TD> </TR> </TABLE>
Vi lägger alltså till ett datafält efter det första men före slutet på raden (</TR>). Då ser tabellen ut så här:

En ruta med ram runt

En ruta till med ram runt

När vi ändå är igång kan vi lägga till en rad i tabellen så att det blir två rader med vardera två fält i:

<TABLE BORDER=2>
<TR>
<TD>
En ruta med ram runt
</TD>
<TD>
En ruta till med ram runt
</TD>
</TR>
<TR>
<TD>
En ruta med ram runt på rad 2
</TD>
<TD>
En ruta till med ram runt på rad 2
</TD>
</TR>
</TABLE>

Vi lägger in koderna för den nya raden efter den första raden, men före tabellslutet (</TABLE>).

Blev det mycket på en gång? Vi skriver om ovanstående HTML-kod på ett annat sätt och ritar ut lite hjälplinjer så blir det lättare att förstå:

Tabell-beskrivning

Utan att ändra ordningen på HTML-koderna har vi flyttat dem så att flera hamnar på samma rad. Då ser vi att tabellen börjar med <TABLE> och slutar med </TABLE>. Varje tabellrad börjar med en <TR> och slutar med en </TR>. Varje ruta börjar med en <TD> och slutar med en </TD>. Det blev väl lite mer överskådligt?

Du kan säkert gissa att tabellen ser ut så här:

En ruta med ram runt	En ruta till med ram runt
En ruta med ram runt på rad 2	En ruta till med ram runt på rad 2

Ibland händer det att man vill ha en ruta som är lika lång som flera fält. Vi gör en sådan och sätter en rubrik i den:

<TABLE BORDER=2>
<TR> <TH COLSPAN=2> Tabellrubrik </TH> </TR>
<TR> 
<TD> En ruta med ram runt </TD>
<TD> En ruta till med ram runt </TD>
</TR>
<TR> 
<TD> En ruta med ram runt på rad 2 </TD>
<TD> En ruta till med ram runt på rad 2 </TD>
</TR>
</TABLE>

<TH> (table header) fungerar på samma sätt som <TD>, med den skillnaden att allt som står i ett <TH>-fält skrivs med fetstil. COLSPAN=2 betyder att fältet ska vara lika brett som 2 kolumner (fält) i tabellen. På samma sätt finns det en kod som heter ROWSPAN och som anger hur många rader högt ett fält ska vara. Vi ser efter hur tabellen tar sig ut nu:

Tabellrubrik
En ruta med ram runt	En ruta till med ram runt
En ruta med ram runt på rad 2	En ruta till med ram runt på rad 2

Det finns fler funktioner att använda tillsammans med tabeller, men dem kan vi lämna till senare. Nu ska vi göra en tabell på vår hemsida. Vi gör en tabell med flera av våra favoritlänkar i. Komplettera HTML-dokumentet från lektion 5 så att det ser ut så här:

<HTML>
<HEAD>
 <TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF99" TEXT="#000080"
LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<HR WIDTH="80%">
<P>
<FONT SIZE=4>
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å kommer du att bli rikligt belönad!
</FONT>
<P>
<CENTER>
<H4>Här är mina idoler:</H4>
<P>
<IMG SRC="vacker.jpg" ALT="Skönheter" BORDER=1>
</CENTER>
<P>
<CENTER>
<H4>Mina favoritlänkar:</H4>
<P>
<A HREF="http://www.netscape.com"> 
<IMG SRC="netscape.gif" ALT="Netscape" BORDER=1> </A>
<P>
<A HREF="http://www.microsoft.com"> 
<IMG SRC="microsft.gif" ALT="Microsoft" BORDER=1> </A>
</CENTER>
<P>
<CENTER>
<TABLE BORDER=2 WIDTH="80%">
<TR> 
 <TH COLSPAN=2>
  Fler favoritlänkar:
 </TH> 
</TR>
<TR> 
 <TH>
  Länk
 </TH> 
 <TH>
  Kommentar
 </TH> 
</TR>
<TR>
 <TD> 
  <A HREF="http://monkeytoys.com/htmlkurs/html.htm">
   HTML på svenska
  </A>
 </TD>
 <TD> 
  En enkel kurs i konsten att göra hemsidor 
 </TD>
</TR>
<TR>
 <TD> 
  <A HREF="http://monkeytoys.com/javascript/script.htm">
   Introduktion till JavaScript!
  </A>                            
 </TD>
 <TD> 
  En svensk översättning av Stefan Kochs 
  Introduktion till JavaScript                                              
 </TD>
</TR>
</TABLE>
</CENTER>
<HR WIDTH="80%">
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:htmlps@nkls.net">htmlps@nkls.net</A>
</FONT>
</CENTER>
</BODY>
</HTML>

WIDTH="80%" är en frivillig kod som betyder att tabellen ska ha en bredd som motsvarar 80% av skärmbredden. Du kan även ange bredden i pixlar.

Spara dokumentet under namnet "lektion6.htm" och ta en titt på sidan.

Så här ser den ut nu. Vi fortsätter med lektion 7.

[Visa fördjupningsavsnitt]

Lektion 7: Sökmaskiner

Ibland kan det vara roligt att ha en sökmaskin på sin hemsida. Det ska vi göra nu. Det finns många olika sökmaskiner så vi väljer en i mängden: Lycos. Det som behövs för att göra en sökmaskin är ett formulär där man kan fylla i det man söker efter och en knapp för att tala om att sökningen ska börja. Dessutom behöver man ett program som utför själva sökningen. Formulär och knapp kan vi enkelt göra själva och sökprogrammet kan vi "låna" hos Lycos. Med låna menar jag inte att vi ska hämta programmet hos Lycos. Det räcker med att anropa det från vår hemsida. Så här går det till:

<FORM ACTION="http://www.lycos.com/cgi-bin/pursuit">

FORM talar helt enkelt om att här börjar formuläret. ACTION="http://www.lycos.com/cgi-bin/pursuit" betyder att när vi trycker på startknappen ska ett program som heter pursuit startas. pursuit-programmet ligger i katalogen cgi-bin på servern lycos-tmp1.psc.edu. Programmet pursuit letar reda på det som skrivs i formuläret.

Nästa steg är att skapa ett inmatningsfält:

<INPUT NAME="query">

INPUT anger att vi vill skapa ett inmatningsfält. Med koden NAME="query" (namn) döper vi fältet till "query" (fråga). Anledningen till att vi döper fältet till just "query" är att sökprogrammet hos Lycos söker efter det som står i ett fält som heter "query". Om vi byter ut namnet mot någonting annat kommer inte sökningarna att fungera.

För att kunna starta sökningar måste vi ha en knapp som anropar sökprogrammet:

<INPUT TYPE="submit" VALUE="Sök!">

INPUT skapar även här ett inmatningsfält, men TYPE="submit" betyder att det här fältet är av typen "submit" (överlämna), det vill säga en knapp. VALUE="Sök!" talar bara om vad det ska stå på knappen. I stället för "Sök!" hade vi kunnat skriva "Kalle dussin" eller någonting annat. Det påverkar inte sökprogrammet.

Till sist lägger vi till slutkoden för formuläret:

</FORM>

Klart!

Detta är vad som sker: När vi trycker på knappen "submit" överlämnas det som står i inmatningsfältet "query" till programmet "pursuit". Programmet "pursuit" söker reda på alla sidor som innehåller det som står i fältet "query" och skickar tillbaka en ny sida med svaren till oss.

Så här ser hela koden ut:

<FORM ACTION="http://www.lycos.com/cgi-bin/pursuit">
<INPUT NAME="query">
<INPUT TYPE="submit" VALUE="Sök!">
</FORM>

Och så här ser det färdiga formuläret ut:

Vi skapar en ny sida och lägger in sökmaskinen på den. Kommer du ihåg hur man börjar?

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

Och så lite färg:

<HTML>
<HEAD>
<BODY BGCOLOR="#FFFF99" TEXT="#000080" LINK="#8080FF" 
VLINK="#FF0000" ALINK="#FFFF80">
</HEAD>
<BODY>
</BODY>
</HTML>

Och formuläret med sökmaskinen:

<HTML>
<HEAD>
<BODY BGCOLOR="#FFFF99" TEXT="#000080" LINK="#8080FF" 
VLINK="#FF0000" ALINK="#FFFF80">
</HEAD>
<BODY>
<CENTER>
<FORM ACTION="http://www.lycos.com/cgi-bin/pursuit">
Sök med Lycos: <INPUT NAME="query">
<INPUT TYPE="submit" VALUE="Sök!">
</FORM>
</BODY>
</HTML>

Det var det. Spara sidan under namnet "lektion7.htm". Så här ser sidan ut.

[Visa fördjupningsavsnitt]

Lektion 8: "Frames" - Flera fönster

"Frames" gör det möjligt att dela upp skärmen i flera fönster och visa olika saker i de olika fönstren. Om man t ex har en sida med favoritlänkar kan man dela upp skärmen i två delar. I det ena fönstret visas en lista över länkarna och i det andra visas den URL man valt.

Det man ska tänka på är att inte alla webbläsare kan visa frames. Två av de program som kan det är Netscape Navigator version 2.0 eller senare och Microsoft Internet Explorer version 3.0 eller senare.

Har du en webbläsare som kan visa frames? Om du är osäker kan du testa här. Har du inte det bör du skaffa ett om du vill lära dig hur man gör frames.

Nu ska vi lära oss hur man bygger en sida som innehåller frames!

Först talar vi om att vi vill göra frames:

<FRAMESET ROWS="60,*">

FRAMESET är startkoden för frames. ROWS="60,*" (rader) talar om att vi vill ha två fönster ovanför varandra och att det övre ska vara 60 pixlar högt och det nedre ska uppta resten av skärmen (*). Hade vi velat ha två lika stora fönster hade vi skrivit ROWS="50%,50%". Då tar varje fönster upp halva skärmens höjd. Vill man ha fönster bredvid varandra kan man i stället för ROWS skriva COLS (kolumner). ROWS och COLS går att kombinera så att skärmen delas upp i många fönster. Har man för många fönster kan det bli rörigt.

Vi fortsätter med att beskriva det första (övre) fönstret:

<FRAME SRC="lektion7.htm" SCROLLING="no" NAME="huvud">

FRAME är startkoden för ett fönster. Koden SRC talar om vad vi vill visa i fönstret när det laddas. lektion7.htm är sidan med Lycos sökmaskin. När framesidan laddas kommer vi alltså att se sidan med sökmaskinen i det övre fönstret. Med SCROLLING="no" talar vi om att det inte ska finnas några rullningslister i fönstret. Förutom no kan man välja yes eller auto. Om man utelämnar SCROLLING helt blir det auto. NAME="huvud" döper fönstret till "huvud". Jag ska strax förklara varför man döper fönstren.

Vi går vidare till nästa fönster:

<FRAME SRC="lektion6.htm" NAME="visa">

SRC="lektion6.htm": när fönstret laddas visas sidan vi skapade i lektion 6. NAME="visa": fönstret döps till "visa".

Det som återstår nu är att avsluta sektionen med frames:

</FRAMESET>

Ingen överraskning direkt. Här ä hela koden fö våra frames:

<FRAMESET ROWS="60,*">
<FRAME SRC="lektion7.htm" SCROLLING="no" NAME="huvud">
<FRAME SRC="lektion6.htm" NAME="visa">
</FRAMESET>

Vi skapar en ny sida och lägger in koden:
<HTML> <HEAD> <TITLE>Min första hemsida</TITLE> </HEAD> <FRAMESET ROWS="60,*"> <FRAME SRC="lektion7.htm" SCROLLING="no" NAME="huvud"> <FRAME SRC="lektion6.htm" NAME="visa"> </FRAMESET> </HTML>
Vad kommer den, vars Internetläsare inte kan visa frames, att se? En tom sida. Vad kan vi göra åt det? Vi kan lägga till en kod som heter <NOFRAMES>. Det som står mellan <NOFRAMES>-koderna visas på de webbläsare som inte kan visa frames. Vi ska vara hövliga och lägga till det i vår frames-sida:
<HTML> <HEAD> <TITLE>Min första hemsida</TITLE> </HEAD> <FRAMESET ROWS="60,*"> <FRAME SRC="lektion7.htm" SCROLLING="no" NAME="huvud"> <FRAME SRC="lektion6.htm" NAME="visa"> <NOFRAMES> Den här sidan kräver att man har en internetläsare som kan visa s k "frames". <P> Du som inte har det kan titta <A HREF="lektion6.htm">här</A> </NOFRAMES> </FRAMESET> </HTML>
Spara sidan under namnet "lektion8.htm".

Innan vår hemsida fungerar som den ska måste vi lägga till en kod i sidan vi skapade i lektion 7. Det är meningen att när vi gör en sökning med sökmaskinen, ska svarssidan hamna i det nedre fönstret. På det sättet har vi kvar sökmaskinen i det övre fönstret även efter sökningen. Så här gör vi:

<HTML>
<HEAD>
<BODY BGCOLOR="#FFFF99" TEXT="#000080" LINK="#8080FF" 
VLINK="#FF0000" ALINK="#FFFF80">
</HEAD>
<BODY>
<CENTER>
<FORM ACTION="http://www.lycos.com/cgi-bin/pursuit" 
TARGET="visa">
Sök med Lycos: <INPUT NAME="query">
<INPUT TYPE="submit" VALUE="Sök!">
</FORM>
</BODY>
</HTML>

Med TARGET-koden kan man tala om för webbläsaren i vilket fönster man vill visa någonting. Vi vill att svaret på sökningar ska visas i det nedre fönstret som vi döpte till "visa". Det är därför man namnger de olika fönstren i frames. TARGET-koden kan man använda i vanliga länkar också, exempelvis <A HREF="html.htm" TARGET="visa">. Den länken öppnar sidan "html.htm" i det fönster vi döpte till "visa". Spara nu sidan och glöm inte att den ska heta "lektion7.htm".

Nu kan vi titta på sidan.

Tycker du att det är krångligt med frames? Vi gör ett exempel till med lite fler fönster i.

Här är koden till den sidan:

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="*,*,*">

       <FRAMESET COLS="*,*">

       <FRAME SRC="x.htm" NAME="1"> <FRAME SRC="x.htm" NAME="2">

       </FRAMESET>

       <FRAMESET COLS="*,*">

       <FRAME SRC="x.htm" NAME="3"> <FRAME SRC="x.htm" NAME="4">

       </FRAMESET>

       <FRAMESET COLS="*,*">

       <FRAME SRC="x.htm" NAME="5"> <FRAME SRC="x.htm" NAME="6">

       </FRAMESET>

</FRAMESET>
</HTML>

Vi stuvar om bland koderna och ritar ut några hjälplinjer så att det blir lite tydligare:

Beskrivning av frames

Man börjar med att ange hur många rader frame-sidan ska ha, och hur höga de ska vara. Det görs med <FRAMESET ROWS="*,*,*">. Sen måste vi, för varje rad, tala om hur många kolumner den ska innehålla och hur breda de ska vara. Det gör vi med <FRAMESET COLS="*,*">. Därefter talar vi, för varje fönster i raden, om vilken sida vi vill visa i fönstret och vad det ska heta (FRAME SRC...). Till sist avslutar vi raden med slutkoden </FRAMESET>.

Vi fortsätter på samma sätt med rad 2 och 3. Frame-sidan avslutas med </FRAMESET>.

Visst blev det lite tydligare så?!

[Visa fördjupningsavsnitt]

Lektion 9: Tips & tricks

Tjäna pengar på din hemsida

Varje gång en besökare klickar på någon av dina länkar kan du tjäna pengar. Låter inte det bra? Det är inte särskilt svårt heller. Allt du behöver göra är att besöka Tradedoubler, fylla i din e-postadress i fältet där det står "Din email" och trycka på knappen "LOGGA IN". Därefter kan du själv välja vilka företag du vill länka till.

Bakgrundsbilder

Bakgrundsfärg och textfärg är några sätt att ge sin hemsida ett visst utseende. Ett annat sätt är att använda bakgrundsbilder. Man behöver en bild:

Enkel, men den duger i utbildningssyfte. HTML-koden för bakgrundsbilder är ganska lik den för bakgrundsfärg.

BACKGROUND="rand.gif"

Man talar helt enkelt om vilken bild man vill ha som bakgrund. Om bilden inte ligger i samma katalog som HTML-dokumentet måste man ange sökvägen, exempelvis: BACKGROUND="bild/rand.gif".

Nu lägger vi till koden i dokumentet från lektion 6:

<HTML>
<HEAD>
 <TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BACKGROUND="rand.gif" BGCOLOR="#FFFF99" 
TEXT="#000080" LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<HR WIDTH="80%">
<P>
<FONT SIZE=4>
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å kommer du att bli rikligt belönad!
</FONT>
<P>
<CENTER>
<H4>Här är mina idoler:</H4>
<P>
<IMG SRC="vacker.jpg" ALT="Skönheter" BORDER=1> 
</CENTER>
<P>
<CENTER>
<H4>Mina favoritlänkar:</H4>
<P>
<A HREF="http://www.netscape.com"> 
<IMG SRC="netscape.gif" ALT="Netscape" BORDER=1> </A>
<P>
<A HREF="http://www.microsoft.com"> 
<IMG SRC="microsft.gif" ALT="Microsoft" BORDER=1> </A>
</CENTER>
<P>
<CENTER>
<TABLE BORDER=2 WIDTH="80%">
 <TR> 
  <TH COLSPAN=2>
   Fler favoritlänkar:
  </TH> 
 </TR>
 <TR> 
  <TH>
   Länk
  </TH> 
  <TH>
   Kommentar
  </TH> 
 </TR>
 <TR>
  <TD> 
   <A HREF="http://monkeytoys.com/htmlkurs/html.htm">
    HTML på svenska
   </A>   
  </TD>
  <TD> 
   En enkel kurs i konsten att göra hemsidor 
  </TD>
 </TR>
 <TR>
  <TD> 
   <A HREF="http://monkeytoys.com/javascript/script.htm">
    Introduktion till JavaScript!
   </A>                            
  </TD>
  <TD> 
   En svensk översättning av Stefan Kochs 
   Introduktion till JavaScript                                              
  </TD>
 </TR>
</TABLE>
</CENTER>
<HR WIDTH="80%">
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:htmlps@nkls.net">htmlps@nkls.net</A>
</FONT>
</CENTER>
</BODY>
</HTML>

Som du ser ska BACKGROUND ligga innanför samma <> som BODY. Tänk på att stora bakgrundsbilder tar längre tid att läsa in. Så här ser sidan ut nu.

Specialtecken - character entities

Å, ä och ö är specialtecken som ingår i den svenska teckenuppsättningen, men som inte finns i t ex den amerikanska. Det betyder att specialtecken kommer att visas som helt andra tecken hos dem som har en annan teckenuppsättning än vi. Därför finns det HTML-koder (character entities) som man kan (bör) använda i stället för specialtecken. Koden för å är å. Man skiljer på stora och små bokstäver: Å heter Å. Här är en lista över fler character entities:

Tecken Character entity

å å

Å Å

ä ä

Ä Ä

ö ö

Ö Ö

< <

> >

& &

" "

æ æ

Æ Æ

ø ø

Ø Ø

Det finns fler, men detta är några av de mest användbara med svensk teckenuppsättning. Att ersätta specialtecken med character entities kan vara ganska tidsödande. Det är faktiskt ett jobb som en enkel ordbehandlare kan hjälpa till med. De flesta ordbehandlare har en funktion som heter någonting i stil med "sök - ersätt" (find - replace). Den kan man använda till att säga "sök alla å och ersätt med å" o s v. Då går det ganska fort. Den som är duktig på att bygga makron i t ex Microsoft Word kan lätt sätta ihop ett macro som ersätter alla specialtecken med character entities.

Glöm inte inte att ändra alla specialtecken på din hemsida!

Listor

Ibland vill man ställa upp saker i punktform. Det finns några funktioner i HTML som är till för just det. Det enklaste är <LI> (list item). Det finns en slutkod (</LI>), men den behöver man inte använda. Vi gör en enkel lista:

<LI>Rad ett i vår lista
<LI>Rad två i vår lista
<LI>Rad tre i vår lista
<LI>O s v...

Så här ser ovanstående rader ut:

Om man sätter <UL> och </UL> i början respektive slutet av listan får man listan inflyttad en bit från vänstermarginalen:

<UL>
<LI>Rad ett i vår lista
<LI>Rad två i vår lista
<LI>Rad tre i vår lista
<LI>O s v...
</UL>

<UL> betyder onumrerad lista (unnumbered list). Så här ser den ut:

Rad ett i vår lista
Rad två i vår lista
Rad tre i vår lista
O s v...

Vi går vidare och gör en lista med flera nivåer. Det går till på det viset att man lägger flera listor i varandra:
<UL> <LI>Rad ett i första nivån <LI>Rad två i första nivån <UL> <LI>Rad ett i andra nivån <LI>Rad två i andra nivån <UL> <LI>Rad ett i tredje nivån <LI>Rad två i tredje nivån </UL> </UL> </UL>
Förskjutningen i nivå två och tre gjorde jag bara för att det skulle vara lättare att se vad som händer. Ovanstående kod ser ut så här:

Rad ett i första nivån
Rad två i första nivån
- Rad ett i andra nivån
- Rad två i andra nivån
  - Rad ett i tredje nivån
  - Rad två i tredje nivån

Eftersom <UL> betyder onumrerad lista är det lätt att gissa att det finns numrerade listor också. <OL> (ordered list) fungerar precis på samma sätt som <UL>. Skillnaden är att i stället för punkter och fyrkanter börjar raderna med nummer:

Rad ett i första nivån
Rad två i första nivån
1. Rad ett i andra nivån
2. Rad två i andra nivån
  1. Rad ett i tredje nivån
  2. Rad två i tredje nivån

Det finns en del andra sätt att definiera listor, men vi nöjer oss med det vi har gått igenom. Det kommer man långt med.

Interna länkar

I stora sidor är det ofta bra att kunna hoppa snabbt mellan olika ställen inom sidan. Det gör man med interna länkar. För att kunna hoppa till ett ställe inom sidan måste man sätta ett så kallat "ankare" på den plats man vill kunna hoppa till. Ett ankare kan se ut t ex så här:

<A NAME="ankare">

När man har ett ankare är det lätt att göra en länk till den platsen på sidan:

<A HREF="#ankare">

# betyder att länken refererar till ett ankare. Nu gör vi en riktig länk och ser hur det fungerar.

Hoppa till ankare!

Klicka på länken och se vad som händer.

Som du ser blev du förflyttad till den rad där jag visade hur ett ankare kan se ut. Interna länkar kan även användas för förflyttning från en sida till ett namngivet ställe på en annan sida. En sådan länk kan se ut så här:

<A HREF="annan_sida.htm#ankare">

eller om den ligger i en annan domän:

<A HREF="http://annan.domän.se/annan_sida.htm#ankare">

Ett bra användningsområde är innehållsförteckningar. Dår kan man göra länkar från de olika innehållsposterna till rätt plats på sidan.

"Satelliter"

När man är klar med sin hemsida hoppas man att någon ska komma och titta på den. Tyvärr brukar det inte hända av sig själv. Det krävs oftast lite marknadsföring (och ibland räcker det inte med lite heller). Ett bra sätt att börja sin marknadsföring, är att registrera sidan i några av alla de sökmaskiner som finns.

När man söker i sökmaskinerna brukar det första man ser vara sidornas titel. Därför är det viktigt att titeln beskriver sidans innehåll.

"- Men jag kan inte beskriva hela min sidas innehåll i en titel!"

Håller du med? Lyckligtvis finns det små knep man kan ta till för att hjälpa fler att hitta sidan. Man kan göra sidor vars enda uppgift är att locka folk till huvudsidan. Jag kallar dem för satelliter. Hittade du 'HTML på svenska' genom en sökmaskin? Då är sannolikheten stor att du kom hit via en av mina satellit-sidor.

Här kan du se hur en satellit-sida fungerar.

Nu ska jag förklara vad du ska tänka på när du gör dina satellit-sidor.

Låt oss säga att en sida innehåller information om Porsche 356, rockgruppen ZZ-Top och länkar till olika HTML-kurser. Man kan givetvis skriva "Porsche 356, ZZ-Top och HTML-kurser" i titeln på den sidan, men om man har fler ord som man vill att sidan ska förknippas med kan det lätt bli långa titlar. I stället gör vi tre sidor med titlarna "Porsche 356", "ZZ-Top" och "HTML-kurser". Sidorna behöver inte innehålla något annat än en länk till huvudsidan. Vi gör en sida:

<HTML>
<HEAD>
<TITLE>Porsche 356</TITLE>
</HEAD>
<BODY>
<H1>
<CENTER>
<A HREF="minsida.htm">Välkommen</A>
</CENTER>
</H1>
</BODY>
</HTML>

Så här långt är det inga nyheter. Det viktiga är en bra titel och en länk till huvudsidan.

Nu är det dags för någonting nytt! Metakoder. De kan användas till lite av varje, men jag ska gå igenom ett användningsområde. Vi börjar med att lägga till en metakod på sidan:

<HTML>
<HEAD>
<TITLE>Porsche 356</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="3; 
URL=http://www.mindomän.se/minsida.htm">
</HEAD>
<BODY>
<H1>
<CENTER>
<A HREF="http://www.mindomän.se/minsida.htm">Välkommen</A>
</CENTER>
</H1>
</BODY>
</HTML>

Den här metakoden kommer att öppna sidan http://www.mindomän.se/minsida.htm efter 3 sekunder. Jag ska inte gå in på detaljerna i metakoden utan bara tala om vilka variabler du kan ändra och vilka effekter det får. Siffran (3) i CONTENT="3; URL=http://www.mindomän.se/minsida.htm" anger hur många sekunder som ska förflyta innan sidan http://www.mindomän.se/minsida.htm öppnas. Du kan byta ut trean mot vilken siffra som helst och på det sättet styra hur lång tid det ska dröja innan en annan sida ska laddas. http://www.mindomän.se/minsida.htm kan du byta ut mot adressen till vilken sida som helst.

Anledningen till att vi satte en länk på sidan är att en besökare med en webbläsare som inte stöder metakoder ska kunna hitta rätt.

Den här metakoden kan man använda till annat också. Du skulle till exempel kunna göra en guidad tur genom ett antal sidor där besökaren inte behöver klicka på några länkar utan bara kan sitta tillbakalutad och titta.

När du har gjort dina satelliter får du inte glömma att registrera dem i olika sökmaskiner!

Här kan du registrera dem i AltaVista. Skriv hela adressen till sidan och tryck på 'Registrera':

[Visa fördjupningsavsnitt]

Fördjupningsavsnitt

Vanliga frågor om första hemsidan

Jag har fått några "kinesiska tecken" eller liknande längst upp på min sida. Vad beror det på och hur får jag bort dem?

Det vanligaste felet är att man använder en ordbehandlare när man skriver sidan och glömmer att spara den i textformat. Då lägger ordbehandlingsprogrammet till en del styrkoder som kan få sidan att se väldigt ful ut. Ibland går det inte att läsa den alls. Använd helst en enkel text-editor eller se till att spara sidan som "text".

Vad är det för skillnad mellan *.htm och *.html?

Skillnaden på *.htm och *.html är endast den att i t ex Windows 3.1 kan man bara använda tre tecken i filtillägget. Funktionen är densamma oavsett vilket man använder.

Jag har hört att det finns ställen där man kan lägga ut hemsidor gratis. Var kan jag göra det?

Ja, det finns många ställen där man kan lägga ut sina sidor gratis. Här är några:

Passagen http://www.passagen.se/

Torget http://www.torget.se/

Geocities http://www.geocities.com/

Om jag vill ha ett eget domännamn, hur skaffar jag det?

Det finns många sätt att skaffa det. Själva registreringen brukar man kunna få hjälp med av web-hotell. När man har namnet behöver man en server som namnet är kopplat till. Det är inte nödvändigt att ha sin hemsida på samma server som domännamnet utan man kan ha en så kallad "forwardingtjänst" (vidarebefordring) som innebär att alla som går till www.din_domän.com hamnar på din hemsida på Passagen, Geocities eller någon annanstans. En sådan tjänst hittar du på http://www.forward.nu/. De kan även hjälpa till med registrering av domännamn.

Hur gör jag för att lägga ut min hemsida på nätet?

Hur man går till väga beror på var man ska lägga sin sida. Det är olika på olika ställen. I nedanstående tabell hittar du adresserna till de största web-hotellens supportsidor.

Värd Supportsida

Passagen http://www.passagen.se/funktioner/hjalp/
hemsida/hemsida_dok/ftp.html

Algonet PC: http://www.algonet.se/support/web/
hur_skicka_filer_med_ftp.cgi
Mac: http://www.algonet.se/support/web/
hur_skicka_filer_med_ftp_mac.cgi

Tele2 http://home.swipnet.se/support/ftp.html

Torget Ingen uppgift

KTH Ingen uppgift

Canit Ingen uppgift

Geocities Ingen uppgift

Angelfire Ingen uppgift

[ Åter till kursen ]

Tjäna pengar på din hemsida!

Vanliga frågor om textformatering

Jag vill ha ett annat typsnitt. Hur ändrar man det?

Än så länge är det inte många som bryr sig om typsnitten. För att bestämma ett typsnitt skriver du t ex <FONT FACE="namn_på_typsnittet">. Ersätt "namn_på_typsnittet" med det typsnitt du vill ha. Exempel på användbara typsnitt är Arial, Courier och Verdana. Slutkoden för <FONT FACE> är </FONT>. En förutsättning för att besökaren ska se din sida i de typsnitt du anger är att han eller hon har typsnitten installerade på sin dator. Det går att ange flera alternativa typsnitt genom att skilja dem åt med kommatecken (<FONT FACE="Arial,Courier">). Vill du veta mer om typsnitt på Internet kan du titta på http://www.microsoft.com/truetype/. Vad du bör tänka på är att inte alla Internetläsare stöder dessa koder. Bland de som stöder dem finns Netscape Navigator 3.0 och Microsoft Internet Explorer 3.0.

Hur gör jag en enkel radmatning? Med <P> (nytt stycke) blir det ju en blankrad.

Enkel radmatning får man med koden <BR> (break).

Om man vill att flera ord eller siffror ska hamna på samma rad, hur gör man då?

Det finns en kod som heter <NOBR> (no break). Den har slutkoden </NOBR> och gör att texten mellan koderna inte delas upp på olika rader. Om man t ex skriver ett tal (100 000 000 000 000 000 000 000) är det inte så snyggt om det delas upp på flera rader. Då kan man vara glad att <NOBR> finns.

[ Åter till kursen ]

Vanliga frågor om färger och horisontella streck

Kan man ha länkar i olika färger på en sida?

Svaret är ja och nej. Netscape klarar av att visa länkar i olika färger medan Internet Explorer inte kan det. Koden för att ändra länkfärg är densamma som den för textfärg.

Kan man ändra färgen på det horisontella strecket?

Ja, det kan man göra, men bara för dem som har Internet Explorer 3.0. Du ändrar färgen med koden "COLOR". <HR COLOR="#FF0000"> skapar ett rött streck. Du kan använda samma färgkoder som för till exempel bakgrundsfärg.

Kan man använda vilka färger som helst på sin hemsida?

Det går att använda alla färger, men alla kan inte se alla färger. De flesta har en skärm som kan visa 256 färger. Därför kan det vara bra att hålla sig till dem. Om du använder en färg som besökarens skärm inte kan visa kommer den att ersättas av en färg som webbläsaren tycker liknar den du har angivit. Detta är inte alltid en färg som det mänskliga ögat tycker liknar ursprungsfärgen. En orange färg kan t ex i vissa webbläsare ersättas med gult och i andra med brunt. Om du håller dig till de "säkra" färgerna vet du att besökaren ser din sida så som du vill att den ska se ut. Här är en lista över de färger du bör hålla dig till. Detta med färger gäller både bilder, bakgrundsfärger och text.

[ Åter till kursen ]

Vanliga frågor om länkar

Jag har en fil som jag vill att besökaren ska kunna läsa ner från min sida. Hur gör jag då?

Det är inte svårt. Vi tar ett exempel. Det finns en zip-fil med hela "HTML på svenska" som den som vill kan läsa ner. Filen heter htmlps.zip och ligger i en underkatalog som heter "ftp". Om vi gör en länk till den ser den ut så här:

<A HREF="ftp/htmlps.zip">HTML på svenska i zip-fil</A>

Det ser alltså ut som vilken länk som helst. När besökarens webbläsare ser att det inte är ett HTML-dokument kommer den att fråga vad man vill göra med filen, d v s spara det på disken eller öppna det med något program.

Jag har gjort flera sidor som jag vill länka till varandra. Hur ska länkarna se ut?

Om vi till att börja med utgår ifrån att alla dina sidor ligger i samma katalog och att den sida du vill göra en länk till heter "min_sida.htm" ska länken se ut så här:

<A HREF="min_sida.htm">Länk</A>

Nu gör vi ett exempel där "min_sida.htm" ligger i en underkatalog som heter "underkatalog". En sådan länk ska se ut på detta vis:
<A HREF="underkatalog/min_sida.htm">Länk</A>
Det var väl inte heller så svårt att förstå?

I det sista exemplet ligger "min_sida.htm" i en annan katalog på samma nivå som den katalog vi befinner oss i. Den katalogen heter "katalog". Länken ska se ut så här:

<A HREF="../katalog/min_sida.htm">Länk</A>

Här kan en förklaring vara på sin plats. "../" betyder att vi ska gå upp ett steg i katalogstrukturen. "katalog/min_sida.htm" talar om att vi sen vill hoppa ner i katalogen "katalog" och öppna sidan "min_sida.htm". Om man vill hoppa upp flera steg i katalogstrukturen sätter man flera "../" efter varandra:
<A HREF="../../../katalog/min_sida.htm">Länk</A>
Nu kan du allt om länkar till egna sidor också!

[ Åter till kursen ]

Vanliga frågor om bilder

Bilderna visas inte på min hemsida. Vad är det för fel?

Att bilderna inte visas beror vanligtvis på en av följande två saker:

Antingen har du skrivit fel namn i koden till bilderna eller också ligger inte bilderna på rätt ställe. Namnet måste vara EXAKT rätt. Stora och små bokstäver också. GIBSON.JPG är inte samma sak som gibson.jpg i Internetvärlden . Kontrollera att det är rätt. Annars är det bilderna som inte ligger på rätt ställe. Om du inte har skrivit annat ska de ligga i samma katalog som HTML-dokumentet.

Hur sparar man en bild som man hittar på Internet?

För att spara en bild från Internet i sin dator klickar man med höger musknapp på bilden och väljer alternativet "Spara bild som..."/"Save picture As...". Tänk på att be om lov innan du använder någon annans bild på din hemsida.

Hur gör man animerade gif-bilder?

Bildbehandling hör visserligen inte till HTML, men jag ska i alla fall göra ett försök att förklara hur man kan göra animerade gif-bilder.

Det påminner lite grann om att göra tecknad film. Man ritar den ruta för ruta och sätter sedan ihop dem till en serie bilder. Därefter talar man om hur länge varje bild ska visas och hur många gånger bildserien ska visas (för tillfället kan man bara välja mellan en eller ett oändligt antal gånger).

Detta behövs: Ett ritprogram som kan spara bilder i gif-format och ett gif-animerigsprogram, t ex "Gif Construction Set" av "Alchemy Mindworks Inc". Det är ett shareware-program som finns att hämta på: http://www.mindworkshop.com/.

Så här går du tillväga:

Öppna ditt favorit-ritprogram, exempelvis Paintshop Pro

Rita bilderna, en efter en. Ofta kan man använda samma bild med små modifikationer och spara dem mellan varje ändring. När du sparar bilderna är det ofta enklast att numrera dem. Döp t ex bilderna till bild1.gif, bild2.gif o s v i den ordning de ska visas.

Nu är det dags att sammanfoga bilderna till en "film". Det gör du i Gif Construction Set, "GifCon", som du ska öppna nu.

Börja med att öppna ett nytt dokument (Ctrl + N).

Därefter infogar du bilderna, en efter en. Tryck Ctrl + I och välj "Image". Leta reda på den första bilden i serien, markera den och tryck OK. Om du får ett meddelande med rubriken "Palette" kan du klicka bort det med OK. Nu är första bilden infogad.

Kontrollera att det står samma storlek (A x B) på raden "HEADER" som på raden "IMAGE". Det gör det antagligen inte och i så fall ska du ändra i "HEADER" genom att dubbelklicka på den raden och ändra "Screen width" och "Screen depth" till samma värden som på raden "HEADER". Raden "HEADER" talar om hur stor den animerade gif-bilden ska vara och normalt vill man inte att den ska vara större än de bilder den bygger på. Om det t ex står (640 x 480) betyder det att bilden ska vara lika stor som en skärm med 640 x 480 pixlars upplösning.

Nu ska resten av bilderna infogas. Det gör du på samma sätt som med den första bilden.

Därefter ska du lägga in en fördröjning mellan varje bild så att den slutliga bilden inte rör sig för fort. Markera raden med den första bilden och välj infoga (Ctrl + I) och "Control". Nu ser du att en rad som heter "CONTROL" infogades. Dubbelklicka på den. Här ser du de olika inställningar du kan göra i kontrollen. Ändra i rutan "Delay" så det antal hundradels sekunder du vill att bilden ska visas står där. Klicka på OK. Gör om detta moment med alla bilder.

Slutligen ska vi lägga in en loop, så att bildsekvensen visas om och om igen. Markera nedersta raden och välj infoga (Ctrl + I) och "Loop".

Nu är bilden klar. Du kan titta på den genom att trycka Ctrl + W. Spara bilden med Ctrl + S.

Det tar lång tid att läsa in bilderna på min hemsida. Kan man göra något åt det?

Det finns en del knep när det gäller bilder. Det allra enklaste är att ange bildens storlek så att internet-läsaren slipper räkna efter själv. Det gör man med koderna WIDTH och HEIGHT. Vi gör några exempel:

Bilden är 300 pixlar bred och 184 pixlar hög. Det betyder att vi kan skriva koden så här:

<IMG SRC="pic/vacker.jpg" WIDTH=300 HEIGHT=184>

Man kan även använda WIDTH och HEIGHT till att ändra storleken på bilder:
<IMG SRC="pic/vacker.jpg" WIDTH=200 HEIGHT=200>
Fotomodeller

En annan sak som gör bilder mindre och därmed snabbare att läsa ner, är att välja rätt bildformat på bilderna. En tumregel är att använda jpg-format för fotografiska bilder och gif-format för ritade bilder. Vi gör några exempel på det också:

JPG-format GIF-format

7 kByte 12 kByte

HTML på svenska

20 kByte 3 kByte

Jag tycker att siffrorna talar ganska tydligt för sig själva.

Jag har en bild som jag skulle vilja konvertera från gif- till jpg-format. Hur gör jag det?

Att konvertera bilder från ett format till ett annat är ganska enkelt. Det gäller bara att ha ett bildprogram som klarar av konverteringar. Jag kan rekommendera ett program som heter "Lview Pro" och som finns på http://www.shareware.com/ (Paintshop Pro går naturligtvis också bra att använda). Med det öppnar man den bild som ska konverteras och väljer "Save As..." under "File"-menyn. I en rullist nertill kan man välja önskat format.

[ Åter till kursen ]

Vanliga frågor om tabeller

Kan man göra en bakgrundsfärg på en tabell?

Ja, visst kan man göra det. Det går även bra att bestämma bakgrundsfärgen på varje enskild cell. Koden är densamma som när man bestämmer bakgrundsfärgen på hemsidan. Vi gör ett exempel med en tabell med fyra celler.

<TABLE>
<TR>
 <TD>Cell 1</TD><TD>Cell 2</TD>
</TR>
<TR>
 <TD>Cell 3</TD><TD>Cell 4</TD>
</TR>
</TABLE>

Den ser ut så här innan vi har färglagt den:

Cell 1 Cell 2

Cell 3 Cell 4

Koden för bakgrundsfärg heter, som du kanske kommer ihåg från lektion 3, BGCOLOR. Vi vill att tabellen i vårt exempel ska ha gul bakgrundsfärg och att den övre vänstra rutan ska ha röd bakgrundsfärg. Vi lägger till den kod vi behöver i tabellen vi nyss skapade:

<TABLE BGCOLOR="#FFFF00">
<TR>
 <TD BGCOLOR="#FF0000">Cell 1</TD><TD>Cell 2</TD>
</TR>
<TR>
 <TD>Cell 3</TD><TD>Cell 4</TD>
</TR>
</TABLE>

Så här ser det ut:

Cell 1 Cell 2

Cell 3 Cell 4

Det fungerar inte i äldre versioner av Netscape och Internet Explorer.

Hur bestämmer man storleken på en tabell?

Det gör man med WIDTH och HEIGHT. Man kan ange bredd och höjd i pixlar eller som en procentsats i förhållande till skärmen. Vi börjar med att skapa en tabell med fyra rutor.

<TABLE BORDER=1>
<TR>
 <TD>Cell</TD><TD>Cell</TD>
</TR>
<TR>
 <TD>Cell</TD><TD>Cell</TD>
</TR>
</TABLE>

Sen bestämmer vi att den ska vara 300 pixlar bred och 300 pixlar hög.
<TABLE BORDER=1 WIDTH=300 HEIGHT=300> <TR> <TD>Cell</TD><TD>Cell</TD> </TR> <TR> <TD>Cell</TD><TD>Cell</TD> </TR> </TABLE>

Cell Cell

Cell Cell

Det går också att bestämma storleken på cellerna. De två cellerna till vänster får vara 50 pixlar breda och de högra får vara 100 pixlar breda:

<TABLE BORDER=1 WIDTH=150 HEIGHT=150>
<TR>
 <TD WIDTH=50>Cell</TD><TD WIDTH=100>Cell</TD>
</TR>
<TR>
 <TD WIDTH=50>Cell</TD><TD WIDTH=100>Cell</TD>
</TR>
</TABLE>

Cell Cell

Cell Cell

Vi sätter höjden på cellerna när vi ändå håller på:

<TABLE BORDER=1 WIDTH=150 HEIGHT=150>
<TR>
 <TD WIDTH=50 HEIGHT=50>Cell</TD><TD WIDTH=100 HEIGHT=50>Cell</TD>
</TR>
<TR>
 <TD WIDTH=50 HEIGHT=100>Cell</TD><TD WIDTH=100 HEIGHT=100>Cell</TD>
</TR>
</TABLE>

Cell Cell

Cell Cell

[ Åter till kursen ]

Vanliga frågor om sökmaskiner

Du har visat hur man gör formulär för Lycos sökmaskin, men hur gör man om man vill ha någon annan?

Om du vill lägga in andra sökverktyg fungerar det ungefär så här:

Titta på koden till sökverktyget du vill ha. Leta efter en del som börjar med <FORM...> och slutar med </FORM>. Kopiera hela stycket till din sida. I den inledande <FORM>-koden står det någonting i stil med <FORM ACTION="/search.gw" METHOD=GET>. Efter "ACTION" ska du lägga till adressen till sökverktyget. I det här exemplet blir det http://www.excite.com, d v s koden ska se ut så här: <FORM ACTION="http://www.excite.com/search.gw" METHOD=GET>. Nu är koden för sökverktyget på din hemsida klar. Det fungerar på ungefär samma sätt med samtliga sökverktyg. Nedan följer koden för några andra.

AltaVista:

<FORM METHOD=GET TARGET=visa 
ACTION="http://www.altavista.digital.com/cgi-bin/query">
<INPUT TYPE=hidden NAME=pg VALUE=q>
<B>Sök på 
<SELECT NAME=what>
<OPTION VALUE=web SELECTED>hela Internet
<OPTION VALUE=news >Nyhetsgrupper
</SELECT>
och visa resultatet 
<SELECT NAME=fmt>
<OPTION VALUE="." SELECTED>i standardform
<OPTION VALUE=c >i kompakt form
<OPTION VALUE=d >i detaljerad form
</SELECT>
</B>
<BR>
<INPUT NAME=q size=30 maxlength=200 VALUE="">
<INPUT TYPE=submit VALUE="Sök med Altavista!">
</FORM>

Tjäna pengar på din hemsida!

Vanliga frågor om "frames"

Min sida med frames har två fönster. Det ena heter "A" och det andra heter "B". När jag klickar på en länk i "A" vill jag att den länkade sidan ska visas i "B". Hur gör jag då?

I länken använder du koden TARGET. I exemplet ska det vara så här:

<A HREF="länksida.htm" TARGET="B">Länk</A>

Det finns andra sätt att använda TARGET också. Ibland vill man t ex att den länkade sidan ska visas i ett nytt fönster. Då kan man skriva:
<A HREF="länksida.htm" TARGET="_blank">Länk</A>
TARGET="_blank" betyder att den länkade sidan ska visas i ett nytt tomt fönster. Den här koden kan du också använda i länkar på sidor som inte innehåller frames om du vill att de ska visas i ett eget fönster.

Om den länkade sidan ska visas i hela det ursprungliga fönstret skriver man TARGET="_top".

Vad är "flytande frames" för något?

Floating frame eller "flytande frames" är något som Microsoft har infört i version 3.0 av Internet Explorer. Det ger möjlighet att skapa ett frame-fönster var som helst på skärmen. Eftersom Netscape inte stöder det kommer nedanstående fönster inte att synas för de som använder Netscape.

Koden för fönstret ser ut så här:

<IFRAME SRC="home.html" WIDTH=400 HEIGHT=200>
</IFRAME>

IFRAME är initieringskoden för flytande frames. SRC="htmlps.htm" anger vad vi vill visa i fönstret. WIDTH och HEIGHT bestämmer bredd och höjd på fönstret. Slutkoden </IFRAME> är obligatorisk.

[ Åter till kursen ]

Vanliga frågor om allt möjligt

Vad är META-koder bra för?

Förutom att, som i lektion 9, läsa in en ny sida efter en viss tid, kan man bl a använda META-koder för att hjälpa en del sökmaskiner att indexera en sida. Om jag har en sida som innehåller information om Porsche 356, rockgruppen ZZ-Top och länkar till olika HTML-kurser kanske jag vill att sökning på orden Porsche, ZZ-Top och HTML ska ge en träff på min sida. Då kan jag använda:

<META name="keywords" content="Porsche, ZZ-Top, HTML">

name="keywords" betyder att det är en definition av "nyckelord" och content="Porsche, ZZ-Top, HTML" säger att nyckelorden är Porsche, ZZ-Top och HTML. Det fungerar inte i alla sökmaskiner, men t ex AltaVista läser META-koder.

Om man vill styra vad som står om sin sida i sökmaskiner kan man också använda META-koder. I stället för name="keywords" använder vi då name="description" och efter content= skriver vi vad sidan har för innehåll:

<META name="description" content="Det här är den slutgiltiga 
sidan om Porsche 356, ZZ-top och HTML-kurser!">

I stället för de första raderna på sidan kommer det att stå "Det här är den slutgiltiga sidan om Porsche 356, ZZ-top och HTML-kurser!" när någon söker och får träff på den. Bra va´?

Jag vill ha bakgrundsljud på min hemsida. Hur gör jag det?

Bakgrundsljud kan man lägga in på sin hemsida. Tyvärr har inte Microsoft och Netscape kunnat enas om en HTML-kod för det utan de har varsin. I Internet Explorer ser koden ut så här:

Det fungerar med .wav-, .mid- och .au-filer. I Netscape ser koden ut så här:

Det fungerar endast med .mid-filer.

Om du vill att både Internet Explorer-användare och Netscape-användare ska kunna höra bakgrundljudet får du lägga in båda koderna.

[ Åter till kursen ]

Avslutning

Om du har gått igenom hela kursen har du förhoppningsvis lärt dig ganska mycket om HTML och hur man bygger hemsidor. Har jag lyckats bevisa att det inte är svårt? Har jag missat några viktiga bitar? Är någonting dåligt förklarat? Det vore trevligt att veta vad du tycker! Skriv några rader:

Den här kursen är ingen komplett HTML-manual och den är inte heller tänkt så. Vill du lära dig mer finns det tusentals ställen på nätet där du kan hitta information. Det mesta är på engelska. Jag har gjort en lista över några platser som jag tycker förtjänar ett besök.

HTML

Superstars of HTML Den första riktigt bra svenska sidan om HTML. Här hittar du det mesta. Jag rekommenderar ett besök!

HTML-nybörjarguide En ny riktigt bra svensk HTML-guide.

Svenska Skoldatanätet - HTML-kurs Lite torr, men ganska innehållsrik sida om HTML.

HTML Nybörjarguide En svensk översättning av 'NCSA--A Beginner's Guide to HTML'.

JavaScript

När du har gjort en hemsida kanske du vill lägga till lite mer avancerade funktioner. Ett sätt är att använda JavaScript, ett enkelt scriptspråk. Stefan Koch har skrivit en mycket bra introduktion till JavaScript. Jag tycker att den är så bra att jag har översatt den till svenska (efter Stefan Kochs medgivande). Den svenska översättningen hittar du här.

Vill du göra en länk från din hemsida till HTML på svenska?

Skriv så här:

<A HREF="http://monkeytoys.com/htmlkurs/"> <IMG SRC="http://monkeytoys.com/pic/heads.gif" BORDER=0></A>

så får du en liten icon med en länk:

Tack för hjälpen!!

Lycka till med hemsidebyggandet!

Niklas Johansson

htmlps@nkls.net

Vad behöver man för att göra hemsidor?

SITT NER OCH VAR TYST, NU BÖRJAR KURSEN!

Inledning

Lektion 1: "Min första hemsida"

Lektion 2: Textformatering

<H1>

<H2>

<H3>

<H4>

<H5>

<H6>

Lektion 3: Färger och horisontella streck

Lektion 4: Länkar

Lektion 5: Bilder

Lektion 6: Tabeller

Lektion 7: Sökmaskiner

Lektion 8: "Frames" - Flera fönster

Lektion 9: Tips & tricks

Tjäna pengar på din hemsida

Bakgrundsbilder

Specialtecken - character entities

Listor

Interna länkar

"Satelliter"

Fördjupningsavsnitt

Vanliga frågor om första hemsidan

Vanliga frågor om textformatering

Vanliga frågor om färger och horisontella streck

Vanliga frågor om länkar

Vanliga frågor om bilder

Vanliga frågor om tabeller

Vanliga frågor om sökmaskiner

Vanliga frågor om "frames"

Vanliga frågor om allt möjligt

Avslutning

JavaScript

Vill du göra en länk från din hemsida till HTML på svenska?

Välkommen åter!