http://monkeytoys.com/htmlkurs/

    Senast uppdaterad: 1997-04-16 klockan: 19.00

    HTML på svenska

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

     

    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 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
    å &aring;
    Å &Aring;
    ä &auml;
    Ä &Auml;
    ö &ouml;
    Ö &Ouml;
    < &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!

    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:

  • Rad ett i vår lista
  • Rad två i vår lista
  • Rad tre i vår lista
  • 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>
    <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:

    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.

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

    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! 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':


    [ Lektion 8 ] - [ Visa fördjupningsavsnitt ] - [ Frågesidan ] - [ Avslutning ]

     

     

     

    -- HTML på svenska © Niklas Johansson --
    -- HTML på svenska © Niklas Johansson --


    Copyright © 1996-1997 Niklas Johansson