Välkommen till whr.se, recensioner av webbhotell. I denna avdelning publicerar vi guider och artiklar runt webbteknik, programmering och marknadsföring på Internet bland annat.

Lär dig HTML

Bokstäverna HTML står för HyperText Markup Language och är ett sätt att presentera text, bilder etc. på Internet. Allt du behöver för att göra en egen hemsida är en textredigerare som Word, Anteckningar eller liknande.

Taggar
Beskrivningen av hemsidan görs med olika HTML-kommandon, så kallade taggar (tags på engelska), vilka markeras med < >. För att kunna avgöra var en funktion/text börjar och slutar finns det en starttagg < > och en sluttagg</>. Själva funktionen/texten anges inne i taggen.  Taggar anges alltid i par, och det måste (nästan) alltid finnas en sluttagg som ”stänger” en starttagg.

Grunden i ett HTML-dokument

<HTML>

<HEAD>

<TITLE>Titeln på din hemsida</TITLE>

</HEAD>

<BODY>

Här skriver du in all kod och text för hemsidan .

</BODY>

</HTML>

Strukturen ovan måste alltid finnas i ett HTML-dokument i precis rätt ordning för att sidan ska kunna visas på Internet. Titeln kommer att synas allra överst i webbläsaren när din hemsida visas.

Ett bra tips när du gör din hemsida är att rita upp strukturen på papper först, så du vet var på sidan text, länkar och bilder ska placeras. Spara din förstasida som index.html.

Formatering
Med HTML kan du formatera text på samma sätt som i ett ordbehandlingsprogram. Omge texten med olika taggar för att få önskad effekt.

<B></B>        Fetstil
<I></I>        Kursiv
<U></U>        Understruken

Man kan även kombinera flera kommandon.
<B><I>Jag vill ha fet kursiv text!!</B></I>  –  Jag vill ha fet kursiv text!!
<I>Jag vill ha <B>bold</B> i fetstil.</I> – Jag vill ha bold i fetstil .

Font
Beskrivningen av hur din text ska se ut görs i taggen <FONT>. Storlek, färg och typsnitt läggs till som attribut i denna tagg.

SIZE=”..”        Textstorlek (1-7)
COLOR=”#..”        Textfärg
FACE=”..”        Typsnitt

Textstorleken anges med en siffra 1-7. Färg anges i hexkod baserat på RGB. Läs mer om det här: http://sv.wikipedia.org/wiki/RGB.

Alla attribut kan läggas i samma tagg:
<FONT  SIZE=”4″ COLOR=”#FF0000″ FACE=”Arial”>Denna text är röd, av storlek 4 och har typsnittet Arial.</FONT> – Denna text är röd, av storlek 4 och har typsnittet Arial.

Stycken, rubriker och bilder
Rubriker genereras med bokstaven H och en siffra  mellan 1-6 för storleken på rubriken, där 1 är största och 6 är minsta storleken.  För att infoga en bild anges bildens namn, exempelvis ”Bildnamnet.jpg” , som attributvärde. Det du måste tänka på när det gäller bilder är att ange det EXAKTA filnamnet och sökvägen till bilden, annars syns den inte.

<P></P>        Markerar ett stycke i en text.
<BR>            Radbrytning. Behöver ingen sluttagg.
<H1></H1>          Rubrik (1-6)
<IMG SRC=”..”>    Infoga bild

Tabeller
För att få en snyggt strukturerad sida är det enklast att lägga in text och bilder i en tabell, där <TR> skapar en rad och <TD> en cell.

<TABLE>
<TR> //Rad 1   <TD>Cell 1 på rad 1</TD> <TD>Cell 2 på rad 1</TD>   </TR> //Rad 1 avslutas
<TR> //Rad 2   <TD>Cell 1 på rad 2</TD> <TD>Cell 2 på rad 2</TD>   </TR> //Rad 2 avslutas
</TABLE>

Tabellattribut:
WIDTH=”..”        Tabellbredd anges i procent eller punkter.
HEIGHT=”..”        Samma gäller höjden.
BORDER=”..”        Ram runt tabellen. Tjockleken anges i punkter (siffror)
CELLPADDING=”..”    Ökar avståndet mellan cellerna.
CELLSPACING=”..”    Ökar utrymmet mellan innehållet i cellen och cellkanten.

Justering
ALIGN=”..”        center, right, left

ALIGN justerar text, bilder, tabeller etc enligt önskemål. Du kan centrera allt innehåll på din hemsida genom att lägga ALIGN=”center” i BODY-taggen.

Bakgrund och länkfärger
Bakgrundsfärg, text- och länkfärg definieras redan i BODY-taggen. Alla färger anges med hexkod. Se här http://tommy.tommy-jonsson.se/color.htm för olika färgkoder.

BGCOLOR=”#..”    Bakgrundsfärg på sidan.
TEXT=”..”        Färg på brödtexten.
LINK=”..”        Färg på obesökta länkar.
ALINK=”..”        Färg på länkar när du klickar på dem.
VLINK=”..”        Färg på besökta länkar.

Exempel:
< BODY BGCOLOR=”000000″ TEXT=”#000099″ LINK=”#006600″ ALINK=”FF0033″ VLINK=”#FFFF00″>
Du kan även använda en bild som bakgrund.

BACKGROUND=”..”    Ger bakgrundsbild. Filnamnet anges som attributvärde.

Exempel:
<BODY BACKGROUND=”Bildnamnet.jpg”>

Länkar
<A></A>        Länk
HREF=”..”        Pekar på vart länken ska gå

Länk till annan hemsida:
<A HREF=”www.facebook.com”>Denna länk går till Facebook!</A> – Denna länk går till Facebook!
Länk till email:
<A HREF=”mailto:musse.pigg@hotmail.com”>Maila mig!</A> – Maila mig! (När man klickar på länken öppnas användarens e-postklient.)
Länk till intern sida:
<A HREF=”sida2.htm”>Se nästa sida!</A> – Se nästa sida!  (Länken går till den sida du döpt till sida2.htm på din hemsida. Glöm inte ange rätt sökväg!)

Du har nu grunden för att skapa din egen hemsida.
Lycka till!

Publicerad 2010-01-02. Kategori Bygga hemsida, Guider.


Skriv en kommentar eller en fråga

This blog is kept spam free by WP-SpamFree.