HTML-hjälp

Formattering

Mycket av formattering av text i HTML bygger på något som kallas för "taggar" (eng. tag). Formatteringen börjar med en starttag och slutar med sluttag. Texten mellan taggarna får då aktuell formattering. T ex så blir <B>Fetstil</B> = Fetstil.

Fet stil

Starttag: <B>
Sluttatg: </B>
B kommer från engelskans "bold".

Kursiv stil

Starttag: <I>
Sluttatg: </I>
I kommer från engelskans "italic".

Understrykning

Starttag: <U>
Sluttatg: </U>
Använd om möjligt inte denna, då understrykning kan tas för att det är en länk. U kommer från engelskans "underline".

Rubriker

Starttag: <H1>
Sluttag: </H1>
Det finns sju nivåer på rubriker, d v s <H1>, <H2>, ... , <H7>. H kommer från engelskans "headline".

Avancerad formattering

Starttag: <FONT>
Sluttag: </FONT>
Denna tag ger fler möjligheter att ändra utseendet på text. De olika möjlighetrna anges med attribut, de viktigaste finns exempel på nedan.

Exempel:

<FONT face="Arial" size="4" color="ff0000">Typsnittet Arial, storlek 4, röd färg</FONT>

blir:

Typsnittet Arial, storlek 4, röd färg

Typsnittets namn anges efter "face". Viktigt at tänka på är att det inte är säkert att typsnittet man väljer finn spå alla datorer. Säkra typsnitt är bl a Arial, Verdana, Comic Sans MS, Times New Roman, Courier New och Trebuchet MS.

Storleken anges efter "size", och är desamma som gäller för rubriker, det vill säga mellan 1 och 7.

Radbrytning

En radbrytningstag är också en "tag", men med den skillnaden att den inte har någon sluttag.

En radbrytning: <BR>
BR kommer från engelskans "break", eller "line break", d v s radbrytning.

Styckeradbrytning: <P>
P kommer från engelskans "paragraph", d v s stycke.
Motsvarar två stycken <BR>.

Länk

En länk är också en "tag", där man in själva starttagen anger länken:
Starttag: <A href="http://www.glokalasju/index.asp">
Sluttag: </A>
Om filen som man länkar till ligger på samma domän och i samma mapp som filen man länkar från räcker det att ange filens namn. A kommer från engelskans "anchor".

Bild

En bildtag är också en "tag", men med den skillnaden att den inte har någon sluttag.
<IMG src="bildmap/bildfilnamn.gif">
IMG kommer från engelskans "image" och src från engelskans "source"

Listor

Listor finns i två varianter, en med punkter och en numrerad. Numrerade inleds med <OL> ("ordered list") och punktlista med <UL> ("unordered list") betyder att en lista följer; varje listpost/listrad inleds sedan med <LI> (oavsett om det är UL eller OL) och avlutas sedan med </UL> eller </OL>.

Numrerad lista:

<OL>
<LI>Listpost nummer 1
<LI>Listpost nummer 2
</OL>

Blir:

Listpost nummer 1
Listpost nummer 2

Punktlista:

<UL>
<LI>Listpost nummer 1
<LI>Listpost nummer 2
</UL>

Blir:

Listpost nummer 1
Listpost nummer 2

Tabell

Med tabeller börjar en något mer komplicerad HTML. Börja enkelt som nedan och testa dig fram (det som följer  är bara kommentarer och fyller ingen som helst funktion). <TABLE> betyder förstås tabell, <TR> är tabellrad och kommer från Table Row. Kolumner byggs upp med definitionen av celler med taggen <TD> (står för table data). Det antal celler som man anger i en tabellrad blir antalet kolumner i tabellen. Men man måste dock ange dem för varje tabellrad, och det måste vara samma antal (detta går att ändra, men är här överkurs). Notera även hur formateringen koden ställs upp, där en tab motsvarar en nivå i koden (<TABLE> är övre nivån, <TR> nästa nivå, <TD> under den, och sedan sjävla innehållet i cellen).

<TABLE>
        <TR>
                <TD> 
                        Innehåll rad 1, kolumn 1
                </TD>
                <TD> 
                        Innehåll rad 1, kolumn 2
                </TD>
        </TR>
        <TR> 
                <TD> 
                        Innehåll rad 2, kolumn 1
                </TD>
                <TD> 
                        Innehåll rad 2, kolumn 2
                </TD>
        </TR>
</TABLE>

Detsamma utan kommentarer:

<TABLE>
        <TR>
                <TD>
                        Innehåll rad 1, kolumn 1
                </TD>
                <TD>
                        Innehåll rad 1, kolumn 2
                </TD>
        </TR>
        <TR>
                <TD>
                        Innehåll rad 2, kolumn 1
                </TD>
                <TD>
                        Innehåll rad 2, kolumn 2
                </TD>
        </TR>
</TABLE>

Resultat:

Innehåll rad 1, kolumn 1 Innehåll rad 1, kolumn 2

Innehåll rad 2, kolumn 1 Innehåll rad 2, kolumn 2

Det som finns mellan < och > kallas för som tidigare nämnts en "tag". Till dem kan man sedan lägga attribut, som t ex en kolumns bredd (width="200" = 200 pixlar bred). Men använd dig först av taggar utan attribut, och lär dig hur de beter sig som "standard".

Attribut för tabell:

Bredd: width="100" eller width="100%". Första fallet är bredd i pixlar, andra är i procent av sidans bredd (väldigt oexakt då det beror på skärmupplösning och webbläsarens fönsterbredd). Om tabellen är inuti en annan tabells cell utgår den dock från denna cells bredd.
Bakgrundsfärg: bgcolor="ff0000". Färgen anges i hexadecimala tal och består av tre delar. De första två tecknet är talet för röd nyans, det andra grön och det tredje blå (kallas för RGB-systemet). Exemplet ger en röd färg (ff är det högsta talet, man använder sig av basen sexton vilket ger grundtal mellan 0 och f (0, 1 ... 9, a, b .... e, f). Minsta tal är alltså 00, och högsta ff.
Ram: t ex border="1" eller border="0". Första fallet ger en ramlinje med 1 pixels bredd, det andra ingen ram alls.
Ramfärg: bordercolor="ff0000". Se bakgrundsfärg för info om färger.

Attribut för celler:

Bredd: width="100" eller width="100%". Första fallet är bredd i pixlar, andra är i procent av tabellens bredd att det räcker med det i första raden, det påverkar sedan hela tabellen.
Bakgrundsfärg: bgcolor="ff0000". Se tabellen.
Horisontell justering: align="left", "center" eller "right".
Vertical justering: valign="top", "center", "left".