http://monkeytoys.com/htmlkurs/
Senast uppdaterad: 1997-04-16 klockan: 19.00
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 fylla i din e-postadress i fältet nedan och trycka på knappen med texten "skicka". Därefter kan du själv välja vilka företag du vill länka till.
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.
| 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
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
slutkod (</LI>), men den
behöver man inte använda. Vi gör en
enkel lista:
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:
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:
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
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.
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.
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 oftastlite
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.
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:
Listor
<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:
<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:
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:
Interna länkar
"Satelliter"
<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! Meta-koder. 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 Meta-kod 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 internet-läsare som inte stöder Meta-koder ska kunna hitta rätt.
Den här meta-koden 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':
Copyright © 1996-1997 Niklas
Johansson