Attributter i HTML-tags

Til tags hører der attributter. Attributter er de settings der er til en tag, f.eks. farve eller størrelse, eller hvis der skal ske et eller andet når man klikker på tag'en. Der er tre typer attributter til en tag: Optional attributes, standard attributes og event attributes. Der vil i gennemgangen af de forskellige tags være en gennemgang af de mest almindelige attributter der anvendes sammen med dem.

Optional attributes, dvs. valgfrie attributter, er grundlæggende et levn fra HTML's barndom. Mange af disse attributter vil man ofte opleve ikke fungerer når man bruger HTML 5 eller 4 strict, og egenskaben kan i reglen laves med STYLE, som er en standard attribute, i stedet.

At kalde attributterne valgfrie er lidt af en misforståelse. Billeder har f.eks. en valgfri attribut der hedder SRC, som er der hvor man skiver navnet på det billede man vil have vist. Hvis vi skal vise den smiley der hedder Laugh.gif, som ligger i det underbibliotek der hedder Graphics, skal vi som minimum bruge billedtag'en IMG og attributten SRC. Koden ser således ud:


På siden ser resultatet således ud:



Derfor: Optional attributes er ikke nødvendigvis valgfrie som navnet indikerer. Hvad de derimod er, er specifikke for tags. Der er selvfølgelig gengangere som f.eks. bredde og højde, som fungerer til adskillige tags, men som udgangspunkt skal de betragtes som attributter som er specifikke for de enkelte tags.

Som udviklingen i HTML-kodning har været, er det en god tommelfingerregel, at hvis man skal bruge attributten og den findes som standard attribute, som det gør med bl.a. bredde og højde, er det bedre at anvende standard attributes i stedet. Det er ikke alle browsere der fortolker optional attributes lige godt... eller ens...

Standard attributes, dvs. standardattributter, er som navnet indikerer en attribut som alle tags har. Man skal være opmærksom på, at det at have en attribut ikke er det samme som at den fungerer i praksis. Det betyder blot at man ikke får en fejlmelding på noget vrøvl, når man verificerer sin kode. Man kan f.eks. give et linjeskift (tag'en <BR>) en farve, men linjeskift har ingen fysisk udstrækning, så man kan aldrig se den. Når man arbejder med style sheets, så er det i virkeligheden bare standard attributes man arbejder med, og de er, et effektivt redskab til at style sine elementer i koden.

Når man skal bruge en standardattribut foregår det med STYLE="", hvor man i ping'erne skriver parametrene. Skal man bruge flere parametre samtidig adskilles de med semikolon. Et stykke tekst der skal være med både fed og kursiv har således standardattributten STYLE="font-weight:bold; font-style:italic".

Et stykke tekst med kursiv og fed skrift, her sat på tag'en SPAN, vil som kode se således ud:


Resultatet bliver:

Event attributes, dvs. hændelsesattributter, er attributter der reagerer på events. Dette er f.eks. når man klikker på et billede, eller teksten skifter farve når musen kører over. Attributterne fokuserer på to områder, forskellige måder at klikke på et objekt, og forskellige reaktioner på at pointeren enten flyttes hen over en tag, eller fjernes igen. Hvor de to andre attributter er lette at gå til og få til at fungere, er event attributes noget man helst skal være lidt øvet i HTML før man går i gang.

Eksemplet der kommer her, er kun til demonstration af attributten. Hvorfor besværgelserne ser ud som de gør, bliver gennemgået under 'Links'.

Hvis vi ser på vores smiley fra før, så kan vi fortælle, at når man peger på billedet med musen, laver den pilen om til en hånd, så man ved at der er et link man kan klikke på. Den attribut hedder ONMOUSEOVER, og til det vi vil lave er koden ONMOUSEOVER="this.style.cursor='pointer'". Dernæst vil vi have den til at gøre noget når man klikker på billedet. Den attribut hedder ONCLICK, og vi vil have den til at åbne billedet ComputerWork.gif i folderen Graphics. Når den åbner billedet skal det være i et nyt vindue i størrelsen 200x100 pixel. Koden til dette hedder ONCLICK="window.open('Graphics/ComputerWork.gif', 'windowname', 'width=200, height=100')"

Den fulde kode bliver så:


Resultatet bliver:


Prøv at holde pointeren over billedet og dernæst klik på det.