HTML är en förkortning för 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 start-kod och en slut-kod. Start-koden är omgiven av <> och slut-koden är omgiven av </>, som t ex slut-koden för fetstil: </B>. Koden för kursiv stil är <I> (italics) och </I> är slut-koden 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å.

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 kan adressen till den sida man vill länka. Det går naturligtvis även bra att göra länkar mellan sina egna sidor, eller t o m inom en sida. Det går att använda länkar till annat också. Det ska vi snart titta på.

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 Referens) 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 avslutnings-koden:

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

Klart!

Lite bilder kan lätta upp en hemsida. För att du ska kunna visa en bild på hemsidan måste det vara en bild 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 Internet-program 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 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 tabell. En tabell med bara en ruta:

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 punkter 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>

<TABLE BORDER=2>
<TR>
<TD>
En ruta med ram runt

<TABLE BORDER=2>
<TR>
<TD>
En ruta med ram runt
</TD>
</TR>
</TABLE>

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

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>

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å:

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:

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>

Ibland kan det vara roligt att sätta 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://lycos-tmp1.psc.edu/cgi-bin/pursuit">

FORM talar helt enkelt om att här börjar formuläret. ACTION="http://lycos-tmp1.psc.edu/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 slut-koden 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://lycos-tmp1.psc.edu/cgi-bin/pursuit">
<INPUT NAME="query">
<INPUT TYPE="submit" VALUE="Sök!">
</FORM>

"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. En med länkarna och en där den länk man väljer visas.

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".

Å, ä och ö är specialtecken som ingår i den svenska teckenuppsättningen, men som inte finns i t ex den amerikanska. Det betyder att om vi använder specialtecken i en hemsida som någon med en annan teckenuppsättning än vår ska se kommer de att ersättas av andra tecken. 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 &aring;. Man skiljer på stora och små bokstäver: Å heter &Aring;. Här är en lista över fler character entities:

Tecken	Character entity
å	å
Å	Å
ä	ä
Ä	Ä
ö	ö
Ö	Ö
<	&lt;
>	&gt;
&	&amp;
"	&quot;
æ	&aelig;
Æ	&AElig;
ø	&oslash;
Ø	&Oslash;

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 &aring;" 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!

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 slut-kod (</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...

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>

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

<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>

• 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:

1. Rad ett i första nivån
2. 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.

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:

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 brukar krävas lite marknadsföring (och ibland räcker det inte med lite heller). Ett bra ställe 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.

Det vanligaste felet är att man använder en ordbehandlare när man skriver sidan och glömmer att spara den i text-format. 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: