Till Startsidan
JavaScript.nu hostas av Ballou.se

Skaffa webbhotell
Från 12 kr/månad.

100 kr rabatt för JavaScript.nu-
besökare.

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"







Copyright © Omid Rouhani 1997-2010; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]