HTML-tips

33 tips om hur du utnyttjar sökmotorer, lurar spamrobotar, får snyggare tabeller, gör texter mer läsvänliga och får en hemsida som fungerar bättre.

Använd en knapp som länk

Placera koden där du vill ha knappen. Ändra "länk" till den länkade sidans URL och "Gå till min bildsida" till den text du vill ha på knappen.

Kommentera för sökrobotar!

Ibland vill man ge sökrobotar chansen att hitta ord som inte visas på sidan. Du kan åstadkomma detta genom att kommentera texten:

<P>Mor- och farföräldrarna passar gärna barnen.</P>

<P>Den gamla Bubblan fungerar fortfarande men får numera bara komma ut under sommaren.</P>

Sökrobotarna hittar även kommentarerna, men de visas inte på sidan.

Ett textblock med rak högermarginal kan vara mycket snyggt

Du åstadkommer det så här:

<P ALIGN="justify">Texten ...</P>

Men tänk på att stora textblock med raka marginaler kan vara tröttsamma att läsa. Den här taggen passar bäst till relativt korta textavsnitt, som kan bilda en trevlig kontrast till den övriga texten med dess böljande" högermarginal.

Metataggar

Metataggar är dolda taggar som kan göra att din sida får en bättre placering hos vissa sökmotorer. De båda följande metataggarna är de viktigaste:

En del sökmotorer använder innehållet i CONTENT för att presentera din sida, så se till att det viktigaste hamnar först i texten. Annars finns det risk för att det viktiga blir bortklippt av "..."

Innehållet i KEYWORDS skall vara relevant för hur man söker på Internet. Skriver du "gratisprogram" utan att din sida verkligen innehåller gratisprogram, kommer du bara att reta besökarna så att de inte kommer tillbaka.

Metataggarna skall ligga i HEAD-elementet.

Ange alltid storlek på bilderna som skall laddas

Det gör att webbläsaren redan från början ser hur mycket plats bilderna kräver och var, så att laddningen av sidan inte behöver avbrytas för omladdning när det blir dags för bilderna.

Tänk på sidlängden

Om man måste scrolla mer än 4 skärmhöjder för att komma till slutet på din sida, är den troligen för lång. En sida bör inte vara mer än 3 skärmhöjder lång, helst färre. Ju längre sidan är, desto längre tid tar det att ladda den. Och ju längre tid det tar, desto större är risken för att besökarna skall tröttna.

Den här regeln har naturligtvis undantag, till exempel när du presenterar långa listor som skall hänga ihop som en enhet.

Länka till startsidan

Du bör ha en länk till "startsidan" på varje sida i din webbplats. Du vet aldrig varifrån besökaren kommer till en bestämd sida. Finns det ingen länk till startsidan missar du chansen att få en besökare som utforskar resten av din webbplats.

Längst ned på varje sida kan du dessutom placera din webbadress, så att besökaren hittar tillbaka även från en utskriven sida.

Textbaserad webbkarta

Lägg en textbaserad webbkarta högst en länk från startsidan. Det ökar chansen att sökmotorerna skall indexera hela webbplatsen.

En del sökrobotar går bara en eller ett par nivåer från startsidan när en webbplats indexeras. Med en webbkarta som innehåller länkar till alla dina sidor ser du till att hela webbplatsen kommer med i sökrobotens resultat. Ju fler av dina sidor sökroboten har indexerat, desto större är chansen att besökarna skall hitta till din webbplats.

Felstavningar

Ta med vanliga felstavningar av orden bland KEYWORDS i metataggarna och glöm inte de vanligare felslagen. Om man skriver snabbt är det lätt hänt att till exempel "människa" blir "männiksa" eller "bakgrund" blir "bakrund".

Motverka spam

Dra ditt strå till stacken för att döda spamrobotarna. Skapa en sida som bara innehåller felaktiga e-postadresser, som 12345@villeville.ful. Gör flera hundra adresser av den sorten – du kan kopiera och klistra, och bara ändra siffrorna i början. Spara sidan som till exempel ingenspam.html. På startsidan skapar du sedan en dold länk till den här sidan. Den kan se ut så här:

När spamroboten som letar efter e-postadresser kommer till din webbplats samlar den in alla de felaktiga e-postadresserna och förhoppningsvis slipper du att få mer än ett e-brev från spammaren.

Blanksteg

Ett alltför förbisett kommando är   som förhindrar radbrytning och kan göra det betydligt enklare att sköta vissa webbsidor. Kommandot sätter in ett "blanksteg" och ser till att raden inte bryts just där. Nedan några exempel på var det kan användas:

Du vill skriva 1 000 med blanksteg före de avslutande nollorna, men du vill inte att 1 skall stå på en rad medan 000 hamnar på nästa. Skriv då 1 000 i koden.

Du vill göra ett indrag i början av ett nytt stycke, i stället för att lägga in en blankrad. Inled då den nya raden med    Texten ...

Du skriver in ett namn och vill inte ha radbrytning mitt i. Skriv till exempel Jan Erik Olsson.

Rullgardinsmeny

En enkel rullgardinsmeny som är lätt att anpassa – du lägger den direkt i BODY-elementet där du vill att den skall visas:

<FORM NAME="hitta" METHOD="POST">
<SELECT NAME="val" SIZE="1">
<OPTION VALUE="index.html"> Startsidan </OPTION>
<OPTION VALUE="linkar.html"> Länkar </OPTION>
</SELECT>
<INPUT TYPE="button" ONCLICK="location = '' + document.hitta.val.options[document.hitta.val.selectedIndex].value;" VALUE="Gå dit!">
</FORM>

Textflöde runt en bild

För att få text att flöda runt en bild använder du bildtaggens ALIGN-attribut. Exempel:

Det lägger bilden längst till höger och låter texten flöda till vänster om bilden. För att texten inte skall hamna för nära bilden lägger du till HSPACE- och/eller VSPACE-attributet. HSPACE ger ett horisontellt mellanrum mellan bild och text, medan VSPACE lägger till luft upptill och nedtill. Placera dessa attribut efter ALIGN i bildtaggen. Exempel:

Talet 10 anger mellanrummets storlek i pixlar och du kan ändra det som du vill.

Där du vill avbryta textflödet sätter du in en radbrytning med attribut. Exempel:

Därmed hamnar nästa textrad nedanför bilden.

Förklara orden

Använder du ord som "vanligt folk" inte förstår? Utnyttja ett JavaScript för att förklara. Exempel:

... receptet på den <A HREF='javascript:alert("Det som är ultimativt kan inte bli bättre.");'>ultimativa</A> marängtårtan ...

När besökaren klickar på ordet "ultimativa" kommer det upp en skylt med texten "Det som är ultimativt kan inte bli bättre."

Förklara länkar

Förklara dina länkar med en liten popup-skylt. Exempel:

<A HREF="semester/bilder.html" TITLE="Här finns bilderna från klassresan till Antarktis">Kalla bilder</A>

När besökaren pekar på länken "Kalla bilder" visas en liten skylt med texten "Här finns bilderna från klassresan till Antarktis".

Banners med måtta

Banners i all ära, men håll antalet nere. Man lägger in reklambanners på hemsidan i hopp om att tjäna litet pengar, men ingen besökare orkar vänta på att 50 banners skall laddas! Än mindre kommer besökaren att klicka på någon av länkarna.

Några få banners som laddas snabbt ger dig fler "träffar", så i själva verket kan två banners som används ge större inkomst än tio som inte används.

Se upp för pekpinnar

"Den här webbsidans visas bäst i ..." Gå inte i den här fällan. Om du lägger den här texten på hemsidan riskerar du att besökare med "en annan" webbläsare än den som förordas känner att du anser att han eller hon är korkad. Gör i stället webbsidor som fungerar i alla de stora webbläsarna!

Java-appletar

Har du en mängd Java-appletar på hemsidan? Risken är stor att du skrämmer bort dina besökare. Java är bra till mycket, men det tär på besökarens systemresurser. Om besökaren redan från början har för låga systemresurser, kanske därför att han eller hon har många andra program öppna, kan din Java-applet leda till att datorn kraschar. Den besökaren kommer garanterat inte tillbaka.

Om du ändå vill använda Java-appletar, bör du avstå från att placera dem på startsidan. Där kan du däremot lägga en varning om att det förekommer Java-appletar på de andra sidorna. Varningen kan du eventuellt placera tillsammans med länken till Java-sidan.

Den inledande texten

Ta en närmare titt på de första kanske 200 orden på din startsida. Dessa skall innehålla en bra presentation av din webbplats – i annat fall utnyttjar du inte sökrobotarna på rätt sätt.

Sökrobotarna ändrar sökmetoder då och då, men just innehållet i det eller de första styckena på startsidorna har behållit sin betydelse. Om de viktigaste nyckelorden finns i denna text, kommer du att få en högre placering i söktjänsterna.

Bakgrundsbild

Har du en bakgrundsbild på webbsidan? Det kan vara snyggt, men hur ofta kommer man inte till sidor där texten är oläslig fram till dess att bakgrundsbilden är laddad. Den besökare som har stängt av bildvisningen kommer kanske aldrig att kunna läsa din text. Därför bör du, utöver bakgrundsbilden, alltid ange en bakgrundsfärg i BODY-taggen. Exempel:

Se till att den valda bakgrundsfärgen ligger så nära bildbakgrundens dominerande färg som möjligt och att textfärgen står i tydlig kontrast mot bakgrundsfärgen.

Orörlig bakgrund

Vill du att bakgrundsbilden skall stå stilla medan besökaren scrollar över sidan? Lägg till egenskapen "fixed" i BODY-taggen. Exempel

Hexadecimala färgvärden med Kalkylatorn

Använd kalkylatorn för att hitta det hexadecimala värdet för färger, när du redan känner till RGB-värdet.

Öppna Kalkylatorn via Start/Program/Tillbehör och Klicka på Visa/Avancerat. Upptill, under sifferfönstret, har du nu en grupp med 4 radioknappar till vänster och en grupp med 3 till höger. Klicka i Dec till vänster och i Grader till höger.

Låt oss nu säga att du har en färg med RGB-värdet 163,118,111. Skriv in R-värdet (det röda värdet) 163 och klicka i Hex i den vänstra radioknappsgruppen. Värdet i sifferfönstret ändras nu till A3.

Markera Dec igen och skriv in G-värdet(grönt) 118. Klicka på Hex och du får 76. Gör likadant med B-värdet (blått) 111 och du får 6F som svar.

Sätt samman de tre resultaten i samma ordning som ovan och du har fått det hexadecimala färgvärdet A3766F.

Slumpvalda texter

Med ett enkelt JavaScript visar du slumpvalda meddelanden när besökaren kommer till sidan. Lägg följande JavaScript i HEAD-elementet:

<SCRIPT LANGUAGE="JavaScript">
function nyText(len) {
for (var i = 0; i < len; i++) this[i] = null;
this.length = len;
}

ccs = new nyText(4);
ccs[0] = "Den första texten";
ccs[1] = "Den andra texten";
ccs[2] = "Den tredje texten";
ccs[3] = "Den fjärde texten";

function rand(n) {
seed = (0x015a4e35 * seed) % 0x7fffffff;
return (seed >> 16) % n;
}

var now = new Date()
var seed = now.getTime() % 0xffffffff
</SCRIPT>

Du kan lägga till fler texter genom att fylla på med fler "ccs[3] = "Den fjärde texten";" och "räkna upp" värdet både i ccs[ ] och i "ccs = new nyText(4);". Nästa skall alltså heta "ccs[4] = "Den femte texten";" och du ändrar dessutom till ccs = new nyText(5); – observera att JavaScript räknar med 0 som första värde.

Se till att varje ny text hamnar på en egen rad. Radbryt inte texten – då får du ett skriptkörningsfel.

I HEAD-elementet, där du vill att texten skall visas, lägger du följande kod:

<SCRIPT LANGUAGE="JavaScript">
document.write(ccs[rand(ccs.length)])
</SCRIPT>

Om texterna är långa bör du placera skriptet i en tabell med fast bredd.

Gör din sida till startsida

Lägger du den här koden på sidan kommer besökaren med Internet Explorer att kunna göra din sida till sin startsida. Det här fungerar i IE. I Netscape syns ingenting alls. Hela koden från "onClick" till och med </A> skall ligga på samma rad – annars får du ett skriptkörningsfel.

Reklam i signaturen

De flesta e-postprogram har en funktion för att lägga till signaturer efter själva meddelandet. Du kan utnyttja det till att göra reklam för din hemsida. Tänk dock på att göra signaturen kort och koncis, så att den inte får motsatt verkan genom att den uppfattas som spam.

Var försiktig med musik

Jaga inte bort besökarna från hemsidan – det är vad du gör om sidan spelar musik som inte går att stänga av på annat sätt än genom att man vrider ned volymen på högtalarna! Många surfar på jobbet och vill varken störa andra eller bli störda själva. Själv brukar jag lyssna på behaglig musik medan jag surfar. Jag vill inte ha Mozart avbruten av någon stressad rappare. Då lämnar jag sidan och kommer inte tillbaka.

Lägg in midifilen med koden nedan, så ger du besökaren möjlighet att stänga av musiken. Tabellen är precis lagom stor för mediaspelaren.

Om du ändrar AUTOSTART till "false" får besökaren i stället möjligheten att själv sätta i gång musiken.

Internet Explorer/Netscape och CSS

Du vill skapa en stilmallsregel som gör ett textblock 18 punkter högt och visar grön text. Kanske använder du då följande stilmall:

<DIV ALIGN="center" STYLE=" font-size: 18 pt; color: green ">
18 punkter hög text i grönt
</DIV>

Det borde ju fungera – eller? Enligt CSS-specifikationen får man inte skriva så. Standarden tillåter inte blanksteg mellan talet och enheten. Det är alltså OK att skriva "18pt" men inte "18 pt".

I Internet Explorer visas texten rätt oavsett hur du skriver. Men Netscape är grinigare – webbläsaren struntar i stiltaggen och visar texten som vanligt i stället.

Det här är en av många anledningar till att jag brukar rekommendera att man kontrollerar sida sidor i båda de stora webbläsarna.

Ange 0-bredd på tabellramen

Defaultvärdet för rambredd på tabeller, när det inte finns något värde angivet i koden, är 0, men alla webbläsare klarar inte det. Därför bör du alltid använda attributet BORDER="0" om du inte vill ha en ram.

En annan anledning är att Netscape lägger till extra vitt utrymme runt varenda cell om BORDER inte är satt till 0.

För litet kod ger för lång laddningstid

Ofta råkar man ut för att en långsam webbsida till synes står helt still. Ingenting händer, den laddas inte färdigt och till slut tröttnar man och klickar på Stopp. Plötsligt dyker då webbsidan upp! Det här är ett praktexempel på när för litet kod ger längre laddningstid.

Det tar tid att ladda bilder. Om du inte har angett bredd och höjd på bilderna, kan webbläsaren inte avsätta utrymme för dem och fortsätta med laddningen av resten av sidan.

Detsamma gäller för höjd och bredd i tabellernas TABLE- och TD-taggar. Webbläsaren måste ladda ned hela innehållet innan den kan rendera sidan.

Ange dessa värden med HEIGHT="..." och WIDTH="..." i respektive taggar.

Det som händer när du klickar på Stopp är att webbläsaren visar det innehåll som den har hunnit hämta hem, men du ser inte hela sidan som den var tänkt.

Begränsa radlängden

Om dina sidor innehåller mycket text, bör du begränsa radlängden så att texten blir lättare att läsa. Det finns studier som visar att en rad inte bör vara längre än 50-80 tecken. Om raderna är kortare måste ögat vandra fram och tillbaka för mycket. Är de längre blir det svårt att flytta blicken till rätt "nästa rad".

Ju mer text du har på sidan, desto viktigare blir det att ta hänsyn till det här. Även om HTML-koden inte tillåter begränsning av radlängden, kan du åstadkomma det på annat sätt. Placera texten i en tabell och centrera tabellen på sidan. Sätt tabellens bredd till ett bestämt antal pixlar – 480 pixlar ger utrymme för ungefär 75 tecken i Arial 10 eller drygt 60 i Arial 12.

Bygg inte en webbsida – bygg en webbplats

Slå dig ned med penna och papper och planera din webbplats. Du sparar oändligt mycket tid på att göra det här från början i stället för att senare gå igenom alla sidorna och ändra det som blev fel.

Se till att layouten blir konsekvent på alla dina sidor – den blir då till ett slags varumärke för just dig, så att bsökarna känner igen sig och framför allt könner sig hemma. Även om du bygger webbplatsen bara för ditt höga nöjes skull, blir det roligare om besökarna uppfattar dig som "proffsig".

Men inte bara det – du gör det dessutom betydligt enklare för dig när du vill ändra stilen på sidorna. Om du har samma bakgrundsbild på alla sidor och vill byta, räcker det med att du ändrar bakgrundsbilden och sparar den under samma namn som den gamla!

Ett annat sätt att åstadkomma konsekvens är att använda globala stilmallar som du kopplar alla sidor till. SupportData.Nets webbplats består av mellan tummen och pekfingret ungefär 1200 HTML-sidor. Jag kan ändra utseendet på alla samtidigt genom att ändra i sammanlagt tre stilmallsfiler.

Be om kritik

Om du verkligen vill veta vad andra tycker om dina sidor, lägger du en e-postlänk eller ett formulär på hemsidan, så att besökarna kan maila sina synpunkter till dig. Du kommer att få både ris och ros, men ta "riset" för vad det är: En möjlighet att se vad som behöver förbättras!

Den viktiga informationen först

Innehåller dina sidor viktig information som besökarna bara måste läsa? Se då till att den syns redan från början, så att besökaren inte behöver scrolla för att hitta den.

Många surfare bryr sig aldrig om att scrolla vidare – om de inte ser något som kan locka dem vidare. För sådana besökare känns troligen en sida som bara visar en företagslogga och ett "Enter" tämligen meningslös. Besökaren surfar vidare och företaget går miste om en potentiell kund.