Hur gör man en hemsida med Html?

1. Inledning

På den här sidan får du lära dig de praktiska grunderna i hur man gör en hemsida. Du hittar en mer översiktlig text på sidan Olika sätt att göra hemsidor. Gå dit >

Jag har även en sida som jag kallat 100 frågor och svar, där du hittar svaren på många frågor. Gå dit >

2. Skapa hemsidor grafiskt eller med kod?

För att koda hemsidor krävs egentligen bara en vanlig, enkel textredigerare, som Anteckningar. Men det finns gott om mycket bra program som hjälper till med att skriva koden för dig, rätta fel och liknande. Länkar till olika program >

På den här sidan kommer jag att beskriva handgreppen för att koda en enkel hemsida.

Det finns idag program som du kan göra hemsidor i utan att kunna någon kod alls. Sådana program är oftast grafiska, dvs du ser sidan så som den kommer att se ut i webbläsaren. Koden slipper du titta på men du kan ta fram den när du vill.

Vill ha fet stil och koda den för hand, skriver du texten och omgärdar den med Html-kod, t.ex <b> och </b> för fet stil. Denna metod kallar jag kodmetoden. Jämförelsen ser du också nedan:

Vill du bara göra hemsidor med den grafiska metoden hittar du lämpliga sidor här:

• Netscape Composer >
• Dreamweaver >
• GoLive >

Det förstnämnda programmet är gratis, medan de andra två är lite dyrare. Det finns också shareware, alltså program som är billigare och enklare. Jag listar en del sådana program på mina sidor med surftips om olika program. Läs mer om olika program >

Man kan även göra hemsidor i andra program, t.ex Word och Excel. Antingen är detta möjligt tack vare att tillverkaren försökt få med allt i programmet (som i Word), men resultatet blir värdelöst. Eller så har man lagt in fiffiga funktioner som går att använda (som i Excel), men då är användningen alltför specialiserad. Därför lämnar jag sådana program utanför här.

Först dock lite mer om vad koden är för något.

3. Vad är Html-kod?

Html-kod är den vanligaste typen av kod för att skapa hemsidor. Den finns i lite olika varianter och standarder och den kod jag visar här följer Html-standarden som har versionsnummer 3.2. Den går fortfarande att använda och är (relativt) enkel att förstå sig på.

På andra sidor i den här sektionen visar jag hur Html-standard 4.0 fungerar. Har man för avsikt att koda hemsidor på allvar bör man dock försöka följa en ny standard som kan kallas Html version 5, men som har det tekniska namnet Xhtml. Läs mer om den på en särskild sida. Gå dit >

Html står för "HyperText Markup Language". På svenska blir det ungefär "Markeringsspråk för hypertextning". En hypertext är en som innehåller länkar. Med länkar kan man nämligen knyta ihop olika sidor efter deras innehåll, vilket är något unikt för all läsbar media. En bok eller tidning knyts snarare samman genom att sidorna kommer i en bestämd ordning efter varandra.

Man använder alltså Html för att tillverka hemsidor. Html är rena textfiler, som har ändelsen .html eller .htm.

Det är sådana sidor som webbläsaren kan förstå, tolka och visa på skärmen.

Html består av ett stort antal element. Det är dessa som bestämmer vad webbläsaren skall visa. Varje element består av ett antal delar, som du ser på bilden: taggar och elementnamnet. Förvirrande nog kallar många också själva elementen för "taggar".

Nästan alla element måste avslutas för att sluta gälla. Avslutningen skrivs in likadant som ett vanligt element, men med ett snedstreck framför elementnamnet.

Bilden visar att ett element också kan ha olika attribut, som preciserar elementets funktion, t.ex att ändra textfärgen. Attributen skrivs innanför elementets taggar, alltså inne i elementet. På det viset vet webbläsaren vilka attribut som hör till ett element.

Alla elementnamn är unika, med samma attribut kan förekomma i många element, t.ex inställningar för bredd och höjd.

Till varje attribut brukar det finnas olika värden. I bilden syns en färgkod. Den står innanför citationstecknen och börjar alltid med ett #-tecken. Sedan kommer sex bokstäver och siffror, som bestämmer värdet. En färgkod är uppbyggd enligt systemet röd-grön-blå och skrivs med något som kallas hexadecimalkod. Du kan läsa mer om färger på sidorna om grafik och bilder. Gå dit >

Varje Html-kodad sida består av ett "huvud" och en "kropp". På Html-språket kallas de HEAD respektive BODY.

HEAD-sektionen innehåller information till webbläsaren och söktjänsterna. Där lägger man sånt som vem som skrivit sidan och om det finns några andra filer som ligger koppade till sidan, t.ex en stilmall.

I BODY-sektionen finns allt som skall synas på skärmen, t.ex bilder, rubriker och brödtext. Text skriver man alltid in i själva Html-dokumentet, men bilder anger man bara en sökväg till, så att webbläsaren hittar dem.

4. Grundkoden för en sida

Det jag menar med grundkoden för en sida är den kod som måste finnas för att din webbläsare skall förstå vad som skall visas. Jag berättade lite om kod på sidan om vad hemsidor är, i stycket om hemsidors uppbyggnad. Läs mer >

Grundkoden för en hemsida ser ut så här:

<HTML>
<HEAD>
<TITLE> Här skriver man hemsidans titel </TITLE>
</HEAD>

<BODY>

Här finns allt som skall synas på bildskärmen!

</BODY></HTML>

All text och alla koder skrivs mellan BODY-elementen. Vissa specialfunktioner läggs in mellan HEAD-elementen och detta kan du läsa om på andra sidor på den här webresursen.

Koden skrivs alltid i textfiler eftersom de är oformaterade och därför kan läsas utan problem av de flesta program. När koden lagts in i en textfil sparar man den med ett lämpligt namn och lägger till ändelsen .html eller .htm. Därefter kan man öppna den i webbläsaren.

Koden ovan innehåller dock ingenting som skapar något synligt innehåll - annat än ett tomt fönster på skärmen. Därför skall vi nu titta lite mer på hur man skapar innehåll.

5. Styckeformatering

Det här avsnittet tar upp hur man formaterar texten. Texten blir rörig om man skriver den i en enda stor klump. Använd därför gott om mellanslag och gör nytt stycke före varje nytt element. Då blir det lättare för dig att läsa texten i texteditorn. Och tänk på att webbläsaren inte bryr sig om dina radbrytningar, om du inte använder kod för detta.

a) Nytt stycke och ny rad

<P>

Paragrafelementet används för att markera nytt stycke. Webbläsaren gör automatiskt ett nytt stycke när den hittar ett <P>. Avslutningen </P> behövs inte i Html 3.2 eller 4.0, även om det finns undantag. Ett annat viktigt element är det som ger radbrytning och skrivs:

<BR>

b) Centrera texten

<CENTER></CENTER>

Talar om för webbläsaren att texten (eller vad det nu är du vill ha centrerat) skall placeras i mitten. Kommandot </CENTER> avslutar centreringen. Så här blir det:

Tips!
Det spelar inte någon roll om du skriver <CENTER> eller <center>, dvs om du använder små eller stora bokstäver. Däremot måste man vara konsekvent, dvs använder du <P> och skall avsluta måste du göra det med </P> och inte med </p>.

För att centrera en text kan man också använda sig av ett attribut till <P>, som skrivs så här:

<P align="center"></P>

Detta skapar också centrering av texten. Observera att du måste avsluta <P> för att inte resten av texten skall påverkas:

c) Indrag

Indrag (indent på engelska) innebär att en rad eller ett stycke flyttas åt höger. Sådant är vanligt i böcker, där första raden i ett nytt stycke ofta börjar ett par mellanslag längre in än resten av stycket. Det finns emellertid olika slags indrag och ni som arbetar med ordbehandling känner t.ex till uttrycken "indrag av första raden", "hängande indrag", m.m.

I Html finns i princip bara två slags indrag, nämligen det där första raden eller hela stycket är förskjutna. Vi tar dem i ordning:

Man kan inte bara göra mellanslag (blanksteg) i början av e n rad för att skapa ett indrag av första raden. Anledningen är att ett mellanslag ignoreras av webbläsaren. Därför måste mellanslaget översättas med en kod. &nbsp; eller &#160; är sådana, som gör samma sak. Man skriver alltså:

Ett annat sätt att skapa ett lite större indrag på (för den som inte vill skriva en massa &nbsp;) är att använda någon av de inbyggda funktionerna för indrag, som finns i Html:

<BLOCKQUOTE></BLOCKQUOTE>

Detta element ger ett fint indrag och som dessutom passar alldeles utmärkt för långa citat. Som namnet antyder blir texten dessutom presenterad som ett särskilt block eller stycke. Avslutningen måste finnas för att inte resten av texten skall få samma indrag.

Ett annat sätt är att lägga in texten i en tabell och lämna en eller ett par kolumner tomma. Tabeller beskriver jag mer om på en separat sida i den här sektionen. Proffsen använder oftast stilmallar för att styra koden. Det är ett tillägg till Html, som jag berättar mer om pi en särskild sektion. Läs mer >

6. Rubriker

Det finns sex förinställda rubriker: <H1>, <H2>, <H3>, <H4>, <H5> och <H6>. "H" står för "Heading" som betyder just "rubrik" på engelska. Jag brukar sällan använda mig av fler än de tre första. De övriga ger en lite för liten stil för att jag skall vara nöjd. Det går dock att styra rubrikernas utseenden via stilmallskod, men det berättar jag inte om här.

Här är exempel på de olika rubrikerna:

Varje kommando måste avslutas, annars fortsätter den genom hela dokumentet. Alla avslutningar har ett snedstreck i sig, t.ex </H1>, som talar om för webbläsaren att den skall avsluta <H1>:

7. Logisk eller fysisk stil?

Texten kan förändras på två olika sätt: antingen logiskt eller fysiskt. Att förändra logiskt innebär att man anger ett värde för hur mycket grundinställningen skall ändras, medan en fysisk förändring innebär att man anger ett värde för hur texten faktiskt skall se ut.

Det vi gjorde i förra avsnittet var att ange en logisk förändring. Vi angav nämligen bara att det skulle vara en rubrik av en viss typ och sedan lät vi webbläsaren avgöra hur stor denna skulle bli. Idag är det vanligast att man använder sig av logiska förändringar, eftersom dessa går att påverka med stilmallar. Som nybörjare kan det dock vara enklare att förstå de fysiska förändringarna.

En fysisk förändring är t.ex att tala om att en viss text skall ha en viss teckenstorlek, vara kursiv, fet eller nedsänkt. I det här avsnittet kommer du att få reda på hur man skapar sådana kommandon.

a) Kommandon för fysisk stil

<B></B>

Ger fet stil (bold)

<i></i>

Ger kursiv stil (italics)

Obs!
Kursiv stil syns väldigt dåligt på de flesta skärmar och bör därför inte användas till vanlig löpande text. Kan dock användas till rubrikerna H1, H2 och H3. Själv brukar jag kursivera H3, för att få fram en intressant förändring av texten:

<H3><i>Detta är ett exempel!</i></H3>

Som blir:

Detta är ett exempel!

Här fungerar det inte alltid om <i> skrivs före <H3>. Sådant upptäcker man när man kontrollerar texten i webbläsaren. Tänk också på att inte "nästla" elementen, dvs du bör inte skriva elementen så här:

<H3><i>Detta är ett exempel!</H3></i>

Då kan det nämligen bli felaktigt i webbläsaren. Avsluta alltså alla element i den ordning de introduceras i koden!

<U></U>

Understruken text; visas dock inte alltid av webbläsare och bör användas med viss försiktighet, eftersom länkar också är understukna.

<TT></TT>

Ger en fast bredd och som du ser här ser det lite lustigt ut! I vissa webbläsare ger detta element en skrivmaskinsliknande text.

y<SUP>x</SUP>

Ger en exponent: y^x.

P<SUB>n</SUB>

Ger nersänkt text: P_n.

b) Kommandon för logisk stil

Det är viktigt att komma ihåg att en logisk förändring kan se olika ut i olika webbläsare, beroende på hur de är inställda. En logisk förändring är alltså inget man skall använda om man vill att texten skall se ut på ett visst, bestämt sätt (såvida man inte använder stilmallar, som jag redan nämnt).

Här är några exempel:

<BIG></BIG>

Ökar textens storlek med ett steg. Detta är styrt med BIG.

<SMALL></SMALL>

Minskar textens storlek med ett steg.Detta är styrt med SMALL.

<DFN></DFN>

För ord som skall definieras; ger normalt kursiv stil.

<EM></EM>

Förstärkning (emphasis); visas kursivt eller med fet stil.

Tips!
det kan vara svårt att se kursiv stil på skärmen, så därför kan du med fördel använda fet stil i stället!

<CITE></CITE>

Citering, används t.ex för boktitlar; visas kursivt.

Inom Html använder man många kommandon som ger samma resultat på skärmen. Onödigt med både DFN, EM och CITE kan tyckas, då de (på min dator i alla fall) ger samma resultat på skärmen. Men ju fler kommandon man har desto större valfrihet får man när man skriver sin kod.

<KBD></KBD>

Används för datorkod; visas i fixerad font. Variationer förekommer.

<CODE></CODE>

Samma som KBD, men ger ofta en lite annan font. Variationer förekommer.

<SAMP></SAMP>

Samma som KBD och CODE men med annan font igen. Variationer förekommer.

<STRONG></STRONG>

Stark förstärkning (strong emphasis); visas i fetstil (bold).

<VAR></VAR>

Variabel; visas kursivt. Variationer förekommer.

8. Teckensnitt och färger

Det finns också ett antal andra kommandon för att formatera texten. Ett av de vanligaste och också mest användbara är FONT-elementet. Det har några olika attribut för att förändra teckensnittet, teckenstorleken och teckenfärgen, som jag nu skall berätta om:

<FONT face="Comic Sans MS, Arial, Helvetica, sans-serif">

Detta är ett exempel!

Används för att styra vilket teckensnitt som skall användas på sidan. Det skrivs före den text man vill ha förändrad. Webbläsaren letar då i typsnittsmappen i datorn, först efter Comic Sans MS, sedan efter Arial eller Helvetica och om dessa saknas väljer den i stället något annat teckensnitt som saknar seriffer.

Men någon absolut styrning går inte att åstadkomma, eftersom besökaren kan ställa in webbläsaren efter en egen mall. Ibland väljer webbläsaren också ett teckensnitt som finns i grundinställningen (kallas också "default").

Tips!
Ange alltid ett alternativt teckensnitt, ifall webbläsaren saknar det du angivit.

Man avslutar alltid med </FONT> för att stänga av en förändring. Vill man att hela texten skall ha detta typsnitt behöver man inte använda någon avslutning. Tänk dock på att FONT-elementet inte fungerar om man använder tabeller. Då måste man skriva ett nytt FONT-kommando i varje tabellcell. Därför rekommenderar jag alla att använda stylesheets i stället, åtminstone när man börjar bli lite varm i kläderna.

<FONT size="1-7">

FONT är elementnamnet och "size" kallas för ett attribut. (Även "face" ovan är alltså ett attribut.) Kommandot förändrar fontens storlek där värdet "1-7" används om du vill ange en viss fysisk storlek mellan 1 och 7. Som du ser finns 6 olika steg, som motsvarar rubrikstorlekarna. Men titta här på följande rubriker:

Rubrik med H1

Rubrik med FONT

Den första rubriken är skriven med <H1>, men i den andra använder jag <FONT size="7">. En stor skillnad, eller hur?!

Du kan också i "size" ange ett värde mellan -4 och +4, om du vill ange en storlek i förhållande till default, alltså ett logiskt värde. Märk att 7 och +4 är lika stora. Observera också att det är viktigt att värdet skrivs inom citationstecken!.

Använder man </FONT> kan man förändra en del av en text. Utan avslutning förändras all efterföljande text.

Exempel: Man kan ändra storleken på hela ord/stycken eller enskilda bokstäver

<FONT color="#FF0000">

Det här får bli lite överkurs: du kan förändra textens färg med hjälp av kommandot ovan. Koden FF0000 betyder att texten skall vara röd. Jag förklarar mer om färger och deras koder i sektionen om färger, som du hittar från startsidan. Pröva dig fram!

Tips!
Eftersom face, size och color är attribut, behöver du bara använda ett enda FONT-element. I stället för att skriva

<FONT face="Comic Sans MS, Arial, Helvetica, sans-serif"><FONT size="+3"><FONT color="#FF0000">

skriver du helt enkelt bara:

<FONT face="Comic Sans MS, Arial, Helvetica, sans-serif" size="+3" color="#FF0000">

På så sätt blir koden smidigare!

9. Skapa länkar

Det finns flera olika sätt att skapa länkar, beroende på om du vill hamna på en e-mailadress, en webbsida med annan URL (s.k absolut länk), en sida inom samma URL (relativ länk), eller på en viss plats på samma sida (named tag).

Alla länkar har kommandot:

<A href="länkens adress">länkens text</A>

A står för "anchor" och anger att det är en länk. Attributet href anger vilken adressen är. Avslutningen </A> är viktig för att inte all efterföljande text skall göras till en länk.

Länk till en e-postadress:

<A href="mailto:jonas@domän.se">Mejla!</A>

som blir: Petter Niklasson

När du klickar på den länken tror webbläsaren att du vill skicka ett e-mail och öppnar förmodligen ditt e-postprogram. För att skicka e-post utan att detta händer (så som jag har det på min webresurs) måste man använda sig av lite mer avancerad programmering, samt ett särskilt program på den server där man har sina sidor. Ett bra webbhotell erbjuder denna tjänst till ett rimligt pris.

Man kan på det här sättet även länka till flera adresser samtidigt, genom att använda ett kommatecken mellan e-postadresserna:

<A href="mailto:petter@domän.se, anders@domän.se">Petter Svensson och Anders Karlsson</A>

Det går även att skicka kopior och dolda kopior med cc och bcc:

<A href="mailto:namn_1@domän.se? cc=namn_2@domän.se& bcc=namn_3@domän.se">Skicka mejl </A>

Allting skrivs i en följd och utan mellanslag. Ett frågetecken inleder strängen med nya kommandon, dvs ?cc=. På motsvarande sätt måste man ha med ett & när man skriver in ännu fler kommandon, dvs man skriver &bcc=. Vill man använda flera mailto, cc och bcc går det bra. Skilj dem åt med ett kommatecken, som jag visade tidigare.

Man kan även lägga in ett ämne (subject på engelska) så här:

<A href="mailto:namn_1@domän.se? cc=namn_2@domännamn.com & bcc=namn_3@domännamn.net& subject=Meddelandetexten skriver man här!">Skicka oss ett brev!</A>

Skriv i en följd utan mellanslag och testa för säkerhets skull att det funkar.

Länk till annan URL:

<A href="http://www.namn.domän">Länkens text</A>

Alltså samma princip som för "mailto:". Med "annan URL" avses alltså sådana sidor som ligger på andra adresser än den man befinner sig på. Denna sortens länk kallas "absolut" och ser ut så här: Länkens text.

Länk inom samma URL:

<A href="filnamn.html">länkens text</A>

Kallas också "relativ" länk, eftersom man länkar till andra Html-filer på sin egen hemsida. I stället för en URL anger man således ett filnamn, som alltid måste ha extensionen ".html" (vissa undantag finns). Observera att å, ä, ö, mellanslag och andra konstiga tecken alltid skall undvikas i filnamn. Dessutom bör man ge akt på att stora och små bokstäver i filnamnet också måste skrivas så i länken. Detta gäller för övrigt också vid all annan filhantering.

Om man länkar till andra filer i samma mapp räcker det normalt med att ange filnamnet. Men om man vill länka till dokument i andra mappar, är det nödvändigt att tala om sökvägen för webbläsaren. Skall man neråt i hierarkin anger man mappens_namn/filens_namn.html. Skall man uppåt måste man använda kommandot ../ för varje steg uppåt i hierarkin. Exempel: Jag skall länka tillbaka till index-sidan, från en fil i undermappen med texter. Jag skriver då

<A href="../index.html"</A>

Länk till viss plats i ett dokument:

Man kan länka till en viss plats på en sida. Funktionen kallas "named tag". Normalt använder man detta som jag har gjort ovan, nämligen så att man kan klicka på texten i innehållsförteckningen så att man kommer till en plats längre ner på sidan.

Länken skapas i två steg. Först går man till den plats dit man vill komma, d.v.s dit länken skall leda. Man skriver där:

<A name="ankarets namn">

Därefter skapar man en länk till detta namn, t.ex i innehållsförteckningen, med kommandot:

<A href="#ankarets namn">texten</A>

#-tecknet betyder ungefär: "Använd det här namnet". Det markerar också att den efterföljande texten skall visas längst uppe till vänster på skärmen.

Den här metoden kan naturligtvis även användas för att länka till andra dokument och även till sidor på andra URL:er. Det enda som krävs är att det finns ett namn (<A name="namn">) definierat och att du känner till det. Du skriver då bara <A href="adress/filnamn#ankare"</A>. Observera att det inte skall vara något snedstreck framför #-tecknet.

Länkfärger

Det går att ändra färgerna på länkarna, som jag nämnde tidigare. Man skriver ändringarna som attribut inne i BODY och det finns tre sådana attribut:

link används för länkar man ännu inte klickat på.
alink används för länkar man just klickat på och som är aktiva.
vlink används för länkar man besökt.

Här är ett exempel som blir ganska snyggt:

<BODY bgcolor="#FFFFFF" text="#333333" link="#000099" alink="#000099 vlink="#990000">

Man skall försöka välja länkfärger som harmoniserar med bakgrunden och med den övriga layouten. Dessutom är det en allmänt vedertagen standard att "oklickade" länkar är blå, att aktiva länkar är blå eller lila och att besökta länkar är röda. Använder du andra färger bör du försöka göra dem lätta att förstå. Riktigt dumt är det t.ex att välja rött för obesökta länkar och blått för besökta!

10. Avgränsare

Avgränsare är användbara för att skilja två avsnitt från varandra. Skrivs <HR> och ser ut så här:

Man använder inget avslutningselement! Avgränsaren kan också justeras på lite olika sätt:

<HR width="*" size="*">

Attributet "width" bestämmer avgränsarens bredd horisontellt över skärmen; "size" bestämmer tjockleken. Default är att avgränsaren är 1 pixel tjock och sträcker sig i hela skärmens bredd (100%). Man kan alltså använda både pixelvärden och procentvärden. Använder man kortare varianter än 100% brukar de ibland lägga sig till vänster och ibland centreras. Därför kan man göra följande tillägg:

<CENTER><HR width="50%" size="5"></CENTER>

som blir:

Attributet "noshade" ger en avgränsare utan skugga:

<HR width="50%" size="5" noshade>

som blir:

I Internet Explorer kan man göra färgade avgränsare, med attributet color:

<HR color="#FF0000">

som blir:

11. När din sida är färdig

Innan du kan lägga upp dina sidor på internet är det några saker du bör göra.

Läs igenom din sida (sidor) och kolla stavfel och länkar.

Ladda in sidan i olika webbläsare: använd minst någon tidig version av Netscape och Explorer. Då ser du om du använt kommandon som äldre webbläsare inte förstår.

När du är nöjd, dina sidor laddas som de skall och alla länkar fungerar, skall du ladda upp dina sidor på internet. För att kunna göra det behöver man först och främst ett webbhotell. Antingen har man tillgång till en sådan genom sitt internetabonnemang, eller använder man sig av en gratistjänst. Alla frågor om hur man skaffar sig ett konto brukar besvaras på den hemsida, där den server man vill använda finns.

Du måste i vissa fall använda ett särskilt FTP-program för att skicka upp dina sidor. Internetleverantörernas hemsidor, webbservrarnas hemsidor och datortidningarnas CD-ROM-skivor är nedlusade med bra FTP-program. Ta i första hand kontakt med din leverantörs support för frågor om detta. Jag har samlat länkar till bra FTP-program på sidan med surftips. Läs mer >

FTP-programmet konfigureras på ungefär samma sätt som webbläsaren. När du öppnar FTP-klienten (=programmet) ringer det upp och loggar in på ditt konto. Nu kan du skicka upp dina sidor, ta bort inaktuell information, o.s.v.

Har du väldigt många sidor kan du eventuellt utnyttja de valideringstjänster som finns på nätet och som hjälper dig att kolla att filerna är korrekt kodade, att inga länkar är brutna, m.m; se i länksamlingen nedan.

Sedan kan du lägga en räknare på din sida. Här skall du höra med din leverantör, som med största sannolikhet kan erbjuda olika slags räknare och annat smått och gott.

Självklart skall du tala om att du finns! Skicka e-post till alla dina vänner (och ovänner) och meddela din URL (webbadress). Anmäl din sida hos de olika söktjänsterna: skriv där det står "submit URL". Jag berättar mer om detta på mina sidor om marknadsföring. Gå dit >