Taggar/Attribut: Fakta om taggar och attribut

JavaScript.nu / HTML-kurs / Taggar och attribut

Taggar och attribut

I detta kapitel:
Taggar och attribut
Taggar utan attribut
Taggar utan avslutningstagg
�ndra koden
Taggar som inte beh�ver avslutningstagg
Stor och liten bokstav
Taggar i r�tt ordning
Citationstecken
Test

I de senaste kapitlen l�rde du dig dels vad taggar och attribut �r. Vi l�rde oss dock bara lite allm�nt om vad en tagg och vad ett attribut �r f�r n�got. I detta kapitel ska vi mer grundligt g� genom vad en tagg och vad ett attribut �r f�r n�got. Detta �r grundl�ggande kunskaper du kommer att beh�va inf�r framtida studier av spr�ket HTML.
L�t oss nu p� l�tt svenska beskriva vad taggar och attribut �r f�r n�got:
T�nk dig att du ska s�ga �t en m�lare att m�la en tavla. S�g �t denna att m�la ett hus. Detta hus kan se ut p� tusen olika s�tt. Vill du sedan specificera dig lite mer m�ste du beskriva vad du vill ha utf�rligare. Ist�llet f�r att bara s�ga att du vill ha ett hus kan det vara klokt att beskriva husets storlek, takets f�rg, v�ggarnas f�rg och husets typ (h�ghus/radhus/villa?).
P� samma s�tt m�ste du beskriva hur din hemsida ska se ut f�r webbl�saren. Den f�rsta sida du skapade (kapitel 2) inneh�ll bara en tom BODY-tagg. D� blev din sida helt vit och med svart text. Dvs, webbl�sarens standardf�rger. I kapitlet efter det (kapitel 3) hade du tv� attribut (BGCOLOR och TEXT) som beskrev f�r webbl�saren vilken bakgrundsf�rg och textf�rg du ville att din sida skulle ha.
Man kan enkelt s�ga att m�laren �r din webbl�sare, huset som m�laren m�lade �r din tagg och husets storlek och f�rg �r dess attribut (attributen beskriver taggen, p� samma s�tt som husets beskrivning beskriver huset).

Alla taggar har inte attribut. Om du t.ex. vill att webbl�saren ska skriva en text med fet text beh�ver du inte "f�rklara" n�got extra f�r webbl�saren. Det r�cker med att du anv�nder en tagg (som f�r�vrigt skrivs <B>fet text</B> (B = Bold, eng. "fetstil")) f�r att webbl�saren ska f�rst� hur du vill ha din text ("den ska vara fet"). Fast om du t.ex. vill ha en bild p� din sida m�ste du ha dels en tagg f�r sj�lva bilden (som �r <IMG> (IMG = IMaGe, eng. bild)), dels kan du ocks� ha attribut som beskriver vart p� internet bilden finns, hur bred bilden �r och hur h�g bilden �r.
Att l�ra sig alla taggar och attribut som finns i spr�ket HTML �r v�ldigt sv�rt. Du kommer att l�ra dig allt fler vartefter du g�r genom denna kurs. Att "plugga in" alla �r helt on�digt.

Du har tidigare l�rt dig att en tagg �ven kan ha en avslutningstagg. T.ex:
Starttagg: <TITLE>
Avslutningstagg: </TITLE>

Alla taggar har dock inte en avslutningstagg. Om du t.ex. ska infoga en bild p� din hemsida kr�vs ingen avslutningstagg. Webbl�saren infogar en tagg en bild d�r du har en bild-tagg (<IMG>). Det beh�vs ingen tagg som "avslutar" bilden. Har du ist�llet anv�nt en "fet text"-tagg (<B>) s� m�ste webbl�saren veta vart du vill avsluta ditt skrivande med fet text. Du b�rjar allts� med en starttagg, t.ex. <B>, d�r du vill b�rja skriva med fet text, och d�r du vill sluta skriva med fet text skriver du </B>. </B> avslutar allts� <B>. En bild (<IMG>) beh�ver som sagt inte "avslutas", varf�r det inte finns n�got som </IMG> i HTML.

L�t oss ta ett konkret exempel p� detta. �ppna din hemsida och uppdatera den med koden nedan:

<HTML> <HEAD> <TITLE>Rubrik p� din sida</TITLE> </HEAD> <BODY BGCOLOR="green" TEXT="red"> Hej, detta �r <B>min f�rsta</B> hemsida! </BODY> </HTML>

Resultat blir som man kan f�rv�nta sig:
F�rsta hemsidan med fet text

F�r att g�ra r�tt f�r oss ska det ocks� n�mnas att det finns vissa taggar som man kan, men inte beh�ver, avsluta. Ett exempel p� en s�dan tagg �r <P>, som st�r f�r paragraph, dvs. stycke. Det �r inte "fel" att anv�nda </P> efter att du anv�nt <P>, fast du beh�ver inte g�ra det.

Du kanske lagt m�rke till att samtliga taggar jag skrivit har skrivits med stor bokstav. �r detta ett m�ste? Svaret �r kort och gott nej. Du kan skriva taggar och attribut med s�v�l stora som sm� bokst�ver. Du kan t.o.m. blanda stora och sm� bokst�ver. B�da dessa alternativ �r allts� giltiga:
<BODY BGCOLOR="green" TEXT="red">
<BodY BgCOloR="grEEn" tEXT="reD">

Det �r helt upp till dig hur du vill skriva dina taggar och attribut. Vad tycker du blir snyggast, stora eller sm� bokst�ver? H�r visas n�gra olika stilar som �r vanliga hos olika webbdesigners:
<BODY BGCOLOR="GREEN" TEXT="RED">
<BODY BGCOLOR="green" TEXT="red">
<BODY bgcolor="green" text="red">
<body bgcolor="green" text="red">

Alla varianter �r sj�lvklart "lika r�tt". Fram�ver kan du v�lja den stil som passar just dig.

Liksom de flesta andra regler s� har denna regel undantag. Vissa attributv�rden (attributv�rde �r det v�rde attributet har, t.ex. green eller red) skiljer mellan stora och sm� bokst�ver. D� �r det skillnad p� att skriva "HEJSAN" och "hejsan". Detta �r dock �verkurs, s� vi tar inte upp det h�r. Du kan med andra ord v�lja om du vill skriva de taggar/attribut vi fram�ver ska anv�nda med stora eller sm� bokst�ver.

Vartefter som du l�r dig fler taggar och du anv�nder m�nga olika taggar s� m�ste du t�nka p� i vilken ordning du skriver dem.
Om du t.ex. ska anv�nda sig av taggarna CENTER (centrerar text) och H2 (g�r texten st�rre) s� m�ste du se till att du har r�tt ordning p� taggarna. Dessa tv� s�tt �r korrekta:
<CENTER><H2>TEXT</H2></CENTER> <H2><CENTER>TEXT</CENTER></H2>

Detta exempel �r inte r�tt:
<CENTER><H2>TEXT</CENTER></H2>

Du m�ste allts� ha taggarna p� ett s�dant s�tt s� att den tagg du startar f�rst �ven avslutas sist. Har du f�rst <CENTER> och sedan <H2> s� m�ste du efter TEXT f�rst avsluta </H2> och d�refter </CENTER>.
Ibland kan det fungera utan problem �ven om du inte g�r detta, fast ha som vana att g�ra r�tt fr�n b�rjan!

Det jag nu t�nker skriva om �r lite �verkurs, s� om du inte begriper dig p� vad som menas med detta, hoppa �ver det.
Hittills har alla attribut vi anv�nt haft citationstecken (") runt sitt v�rde. Detta �r dock inte n�dv�ndigt i de fall vi anv�nt citationstecken. B�da dessa skrivs�tt �r allts� precis lika korrekta:
<BODY BGCOLOR="green" TEXT="red"> <BODY BGCOLOR=green TEXT=red>

Fast ibland, i vissa attribut, m�ste man ha med citationstecken runt sina attributv�rden. D� kan man allts� inte "strunta" i att ta med citationstecken. Mallen nedan beskriver n�r du m�ste ha med citationstecken (annars �r det frivilligt, dvs., vill du s� kan du ha det, annars har du inte med citationstecken).

N�r du har ... i attributens v�rde ska du ha citationstecken

Exempel

+ (plus)
<FONT SIZE="+2">

- (minus)
<FONT SIZE="-1">

% (procent)
<TABLE WIDTH="80%">

, (komma)
<FRAMESET COLS="20,*,29%">

/ (slash)
<A HREF="http://www.adress.com/">

en text (en ALT-attribut)
<IMG ALT="En text" SRC="bild.gif">

fil_namn.xxx (en SRC-attribut)
<IMG SRC="bild.gif">

�, �, �, � etc. (inte Aa-Zz)
<IMG ALT="Detta �r en �" SRC="gotland.gif">

Detta betyder att du inte beh�ver ha citationstecken p� t.ex. <P ALIGN=left> eller <TABLE BORDER=5> men d�remot p� t.ex. <A HREF="http://www.adress.com/"> och <IMG SRC="bild.jpg" ALT="En fin bild">.
Jag personligen f�redrar att alltid ha citationstecken, f�r det kan aldrig skada att ha citationstecken.
Om du n�gonsin tvivlar om du ska ha citationstecken eller inte b�r du ha det!

Test

I slutet av varje kapitel i HTML-kursen finns n�gra fr�gor som du ska svara p� f�r att testa dina kunskaper inom HTML. Om du har f�tt alla r�tt s� �r det bara att g� vidare, fast har du haft n�got fel kan det kanske vara klokt att f�rs�ka lista ut vad som kan ha varit fel. Givetvis kan du g� vidare �ven om du inte svarar r�tt p� alla fr�gor.

Vad �r ett attribut?
Samma sak som en tagg
N�got som beskriver en tagg
N�got som beskriver hemsidans f�rg
Vilken HTML-snutt �r korrekt?
<BODY bgcolor="GREEN" text="red">
<IMG></IMG>
<B><H2>Fet text</B></H2>
Vad �r en avslutningstagg?
En tagg som avslutar den motsvarande start-taggen
Den sista taggen man har i ett HTML-dokument
En tagg som avslutar alla start-taggar
Vilken av dessa taggar tror du m�ste avslutas och som d�rf�r har en avslutningstagg?
En tagg som g�r texten kursiv (<I>)
En tagg som g�r en ny rad (<BR>)
En tagg som drar ett horisontellt streck tv�rs �ver sidan (<HR>)
Vilken av dessa taggar tror du saknar attribut?
En tagg som visar en bild (<IMG>)
En tagg som g�r en ny rad (<BR>)
En tagg som anv�nd d� man skapar en l�nk (<A>)
(�verkurs:) Vilket av dessa attribut skulle kunna skrivas utan citationstecken?
SRC="bild.gif"
WIDTH="300"
ALT="�pple"