HTML,en oversikt over utvalgte tagger

Her følger en oversikt over de vanligste taggene, og kort om hvordan de brukes. Dette er ikke en komplett liste, det kan du finne bl a i the Bare Bones Guide to HTML.

Hovedinndeling

<html> ... </html>: angir begynnelse og slutt på filen.
<head> ... </head>: - header, en topptekst. Inneholder beskrivende informasjon og stiler for formatering.
<body> ... </body>: - kropp, hovedtyngden av dokumentet. Her kommer all tekst, bilder, tabeller osv.
<title> ... </title>: angir en tittel for dokumentet. Denne skal plasseres i head-delen.

Hovedinndelingen av et html-dokument vil ofte bli slik:

<html> <head> <title> ... </title> </head> <body> ... (Her kommer all tekst, bilder, lenker osv.) ... </body> </html>

Strukturelle tagger

<p> ... </p>: Avsnitt (paragraph). Den vanligste tekst-inndelingen.
<h1> ... </h1>, <h2> ... </h2>, ..., <h6> ... </h6>: Overskrifter. Angir logiske inndelinger i opptil 6 nivåer.
<div> ... </div>: division: Inndeling. Angir en sammenhengende del av dokumentet, med linjeskift før og etter. Blir normalt et rektangulært område. Brukes primært sammen med stilark (CSS).
<span> ... </span>: span: Omfang. Angir en sammenhengde del av dokumentet. Har ingen synlig virkning uten samtidig bruk av stilark (CSS).
<blockquote> ... </blockquote>: Brukes for å angi lengre sitater. Gir vanligvis innrykk både på venstre og høyre side.

Tagger for formatering

<big> ... </big>: gir en større skrift.
<small> ... </small>: gir en mindre skrift.
<b> ... </b>: Bold; gir fet (uthevet) skrift.
<i> ... </i>: Italic; gir kursiv skrift.
<sup> ... </sup>: Superscript; gir en liten, hevet skrift.
<sub> ... </sub>: Subscript; gir en liten, senket skrift.
<tt> ... </tt>: typewriter; gir "skrivemaskin-skrift", en ikke-proporsjonal skrift (monospace).
<pre> ... </pre>: Preformatted; gjengir "hvite" (mellomrom og linjeskift) slik som i kilden, bokstavlig. Her blir også skriften normalt ikke-proporsjonal. Kan brukes til tabellariske oppsett o.l.
<br />: Break; linjeskift. Tvinger frem et linjeskift i teksten. br-taggen har ikke separat slutt-tagg og har derfor den spesielle angivelsen med /.
<center> ... </center>: Sentrerer (midtstiller) tekst, bilde eller annet element. (center-taggen anbefales ikke lenger, bruk heller stilark, CSS.)
<font size="3"> ... </font>: Angir skriftens størrelse. Verdien kan gå fra 1 til 7. (font-taggen anbefales ikke lenger, bruk heller stilark, CSS, til å formatere teksten.)
<font color="farge"> ... </font>: Angir skriftens farge. Fargen angis med navn (f eks blue) eller hexadesimale verdier (f eks, #FFCC99).
<font face="navn"> ... </font>: Angir skrifttype. Skrifttypens navn angis.
font-taggen kan vilkårlig kombinere attributtene size, color og face (f eks, <font color="#BB3366" face="Arial" size="4"> ... </font>).
<p align="left"> ... </p>: Teksten i et avsnitt kan gis en bestemt justering. I stedet for left, kan du velge en av disse: center, right, justify. (align-attributtet anbefales ikke lenger, bruk heller stilark.)
<h2 align="left"> ... </h2>: Overskriftene kan også gis en justering. alternativene er her: left, center, right. (align-attributtet anbefales ikke lenger, bruk heller stilark.)
<div align="left"> ... </div>: div-inndelinger kan også justeres med samme alternativer som for P. (align-attributtet anbefales ikke lenger, bruk heller stilark.)

Lenker og grafikk

<a href="referanse"> ... </a>: merker av en lenke til en referanse. Referanse kan være den fullstendige URL-en til et hvilket som helst dokument på internett:
<a href="http://home.no.net/krev/index.html">,
det kan være filnavnet til et dokument som befinner seg på samme sted som den refererende filen: <a href="html.html">, det kan være navnet på et bokmerke i den samme filen: <a href="#hoved">, eller et bokmerke i en annen fil: <a href="html.html#tags">.
<a name="navn"> ... </a>: merker av et bokmerke i dokumentet. Taggen blir ikke synlig i nettleseren, men vil angi et punkt i dokumentet som kan refereres med en lenke. Navnet angis uten #.
<a href="mailto:adressat"> ... </a>: merker av en lenke som aktiverer et program som sender en e-post-melding til adressat. Adressat er en fullstendig e-post-adresse, f eks kristian@trell.org.
<img src="kildefil">: Image; tag som viser et bilde. (src; Source.) Kildefil kan være en lokal fil, eller en hvilken som helst bildefil bå internett. img-taggen har ikke slutt-tagg
<img src="kildefil" alt="alternativ tekst" width="999" height="888">: img-taggen anbefales med disse attributtene. alt-attributtet angir en alternativ tekst som vises før bildet blir lastet, evt hvis bildet ikke blir lastet. width- og height-attributtene angir bildets fysiske bredde og høyde i pixeler og gir bl a raskere visning av siden. (Bytt ut tallene 999 og 888 med bildets virkelige størrelser.)

Lister

<ul> <li> ... </li> </ul>: Unordered list; Punktmerket liste. li angis for hvert enkelt punkt.
<ol> <li> ... </li> </ol>: Ordered list; Nummerert liste. Som ul.
<dl> <dt> ... </dt> <dd> ... </dd> </dl>: Definition list; Liste med ulike innrykk. Punkter som angis med dd får innrykk, punkter som angis med dt, gjør det ikke. (dt,definition term, dd,definition description)

Tabeller

<table> ... </table>: Tabellens begynnelse og slutt.
<table border="9" width="999"> ... </table>: border angir kantlinje for tabellen i antall pixeler, width angir tabellens bredde, enten i pixeler (absolutt) eller i prosent som en andel av skjermens bredde. Eksempler: width="120", width="65%".
<tr> ... </tr>: table row; Angir en tabell-rad. Dette tag-paret omslutter tag-par(ene) for tabell-celler.
<td> ... </td>: table data; Angir en celle (rute) i tabellen. Én eller flere slike tag-par kan befinne seg inne i tr-tagg-paret. td-tagg-paret omslutter tekst, bilder, nye tabeller eller andre elementer.
<td align="left" valign="top"> ... </td>: Teksten i en tabell-celle kan justeres. alternativene for align er left, right og center. alternativene for Valign (vertikal justering) er top, middle og bottom.
<th> ... </th>: table header; Overskrifts-celle, inneholder tekst som beskriver innholdet i cellene under.
<caption align="top"> ... </caption>: Tittel for hele tabellen. align-attributtet er valgfritt og angir plassering av tittel/beskrivelse i forhold til tabellen. align har alternativene top, bottom, left og right.
<td colspan="9">: angir at cellen strekker seg over et antall kolonner.
<td rowspan="8">: angir at cellen strekker seg over et antall rader.

Også for tabeller anbefales det å bruke stilark (CSS) til formatering, og ikke attributter som width, border, align osv.

Skjemaer

<form action="url" method="post"> ... </form>: Begynnelse og slutt for skjemaet. url angir nett-adressen til en tjeneste som utfører den aktuelle behandlingen av skjemaet, i dette tilfellet, post. Eksempel på en slik url: action="http://www.sn.no/cgi-bin/mailit".
<input type="type" size="99" value="verdi" name="navn">: Angir et felt hvor brukeren kan gi inn data på ulik måte. De vanligste verdiene for type er: text, checkbox, radio, hidden, submit og reset. size angir feltets bredde, angitt i antall tegn som er synlige. Verdi angir en en forhåndsgitt verdi som feltet vil få, normalt blir denne verdien synlig i feltet på skjermen. size og value brukes normalt ikke sammen. Navn angir feltets navn. Dette kommer frem i den posten som mottas.
<input type="hidden" name="mailto" value="kristian@trell.org">: Eksempel på bruk av hidden og value. Siden name her er "mailto", vil her value være e-post-adressen til den som skal ha det ferdig utfyllte skjemaet. hidden skjuler feltet for brukeren.
<input type="text" name="Kommentar" size="37">: Eksempel på et felt hvor brukeren kan skrive inn sin kommentar. Feltet blir 37 tegn bredt. Mottakeren av e-posten får denne kommentaren etter tittelen "Kommentar".
<input type="submit" value="Send skjema">: submit-typen frembringer en knapp til å trykke på. Når brukeren trykker denne knappen, sendes e-posten. value er i dette tilfellet en tekst som kommer til syne på knappen.
<input type="reset" value="Slett alt">: reset-typen frembringer en knapp som blanker hele skjemaet.
<textarea name="Tekst" rows="5" cols="50"></textarea>: Eksempel på et textarea-tagg-par. Dette produserer et rektangulære område på skjermen hvor brukeren kan skrive inn tekst. rows og cols angir områdets størrelse i rader og kolonner.
<input type="checkbox" name="Reklame" value="Jeg ønsker å motta reklame">: Eksempel på en avkrysningsboks. Attributtet checked kan angi at den skal være krysset av i utgangspunktet.
<input type="radio" value="1" name="Antall" checked> <input type="radio" value="2" name="Antall"> <input type="radio" value="3" name="Antall">: Eksempel på "radio-buttons", avkrysnings-sirkler hvor man kan velge én av flere. De tre feltene har her det samme navnet, noe som sikrer at man bare kan krysse av én. Skjemaet vil returnere den verdien som da blir valgt. Her er det første valget krysset av i utgangspunktet. Når flere "radio-knapper" deler det samme navnet, så blir brukeren tvunget til å velge maksimum én.
<input type="radio" value="Mann" name="Kjønn"> <input type="radio" value="Kvinne" name="Kjønn">: Et eksempel til på "radio-buttons", her med bare to mulige verdier.

Et eksempel på et skjema som sender noen personopplysninger som e-post.

<form action="http://www.sn.no/cgi-bin/mailit" method="post"> <p> <input type="hidden" name="mailto" value="kristian@evensen.nu"> Fornavn: <input type="text" name="fornavn"><br /> Etternavn: <input type="text" name="etternavn"><br /> e-mail: <input type="text" name="email"><br /> <input type="radio" name="kjønn" value="Mann"> Mann<br /> <input type="radio" name="kjønn" value="Kvinne"> Kvinne<br /> <input type="submit" value="send"> <input type="reset"> </p> </form>

Rammer

<frameset cols=".."> ... </frameset>: Rammesett i hoveddokument. Rammene er i kolonner.
<frameset rows=".."> ... </frameset>: Rammesett i hoveddokument. Rammene er i rader.
<frame src=".." name="..">: Den enkelte ramme innenfor et rammesett. Etter src angis filnavnet for filen som skal vises i rammen. Hoveddokumentet skal bare inneholde frameset og frame-tagger.
<iframe src=".." width=".." height=".." frameborder=".." scrolling="..">(alt. tekst)</iframe>: iframe betyr Inline frame, det er en ramme som kan settes inn hvor som helst i en tekst. src angir navnet på filen som skal vises i rammen, width og height angir rammens størrelse, frameborder kan være 1 eller 0 og angir om det skal være en kantlinje rundt rammen og scrolling kan være yes, no eller auto og angir om det skal være rullefelt i rammen. Iframe brukes i vanlige HTML-tekster og ikke i frameset-hoveddokumenter. (alt. tekst) er den alternative teksten du vil skal vises hvis nettleseren ikke kan vise rammer. (Her er det vanlig å legge inn en lenke til rammefilen.)

Et eksempel på et hoveddokument som inneholder to rammer i to kolonner ved siden av hverandre, den venstre kolonnen er 20% av bredden:

<html> <head> <title> HOVEDDOKUMENT </title> </head> <body> <frameset cols="20%,*"> <frame src="meny.html" name="meny"> <frame src="tekst.html" name="hoyre"> </frameset> </body> </html>

Diverse tagger og tegn

<style> ... </style>: style sheets; Stilark plasseres mellom dette tag-paret. style-taggen skal være i head-seksjonen. For stilark etter CSS-standarden skal følgende attributt angis: <style type="text/css"> ... </style>. Du kan lese om CSS-stilark i HTML - bruk av stilark (CSS) og CSS - en oversikt over utvalgte egenskaper
<hr />: Horisontal rule; En vannrett linje.
<hr size="9" width="99" align="left" />: En eller flere av disse attributtene kan være med. size angir linjens tykkelse i pixeler, f eks size="3". width angir linjens bredde, enten i pixeler eller i prosent av tilgjengelig plass, f eks width="80%". align angir justering og kan ha disse verdiene: left, right eller center. hr kan også ha attributtet noshade som frembringer en linje uten det tredimensjonale utseendet. hr-taggen har ikke separat slutt-tagg og har derfor den spesielle angivelsen med /. Det anbefales å bruke stilark (CSS) for å formatere linjer, ikke HTML-attributtene.
<body style="background-color:farge" text="farge" link="farge" vlink="farge" background="filnavn">: body-taggen kan ha ingen, én eller flere av disse attributtene. Farge angir en fargekode i hexadesimale tall (f eks #00dd66) eller navnet på en farge (f eks yellow). bgcolor angir bakgrunnsfarge for hele dokumentet. text angir tekstfargen. link og vlink angir farger for lenker som hhv ikke har og har vært besøkt. background angir filnavnet til et bilde som kan danne bakgrunn for hele dokumentet. (I stedet for disse attributtene kan stilark benyttes.)
 : Non-breaking space : Angir et mellomrom (space) som forhindrer linjeskift. Tegnet kan også benyttes for å tvinge frem flere suksessive mellomrom.
<: < : Tegnet for "mindre enn".
>: > : Tegnet for "større enn".
&: & : Tegnet for ampersand.
En fullstendig liste over spesialtegn kan du finne her: http://www.uni-passau.de/%7Eramsch/iso8859-1.html

Fargekoder

Fargekodene er bygget opp av tre verdier, én verdi for hver av tre fargekomponenter. Den første verdien gir metningsgraden av rødt, den andre av grønt og den tredje av blått (derfor RGB!). I HTML-tagger gis de tre verdiene som tre hexadesimale tall "skjøtet" sammen, f.eks. slik: #FFEEDD. Her er rød-verdien FF (255 desimal), grønn-verdien EE (238) og blåverdien DD (221). Er tallet 0, er ikke fargen tilstede, er tallet 255, er fargen maksimalt mettet. #00FF00 er eksempelvis tallene 0,255,0 og gir en ren grønn farge og den er så sterkt grønn som den kan bli.

I tabellen nedenfor finner du mange av de vanligste fargene med hexadesimale koder. (Husk tegnet # som en del av koden!) I tillegg er RGB-verdiene listet med desimaltall. Desimaltallene kan brukes i stilark (CSS).

Farge kan brukes som bakgrunnsfarge med attributtet bgcolor i body, table, tr og td. Tekstfarge kan angis med attributtet color i font og med text i body. Ved bruk av stilark kan de fleste elementer gis forgrunns- og bakgrunnsfarge (color og background-color).

Fargenavn	RGB hex	RGB desimal
aliceblue (lyseblå)	#F0F8FF	240,248,255
antiquewhite (antikkhvit)	#FAEBD7	250,235,215
aqua (akvamarin)	#00FFFF	0,255,255
aquamarine	#7FFFD4	127,255,212
azure (asurblå, himmelblå)	#F0FFFF	240,255,255
beige	#F5F5DC	245,245,220
bisque (lyst gulgrå el. gråbrun)	#FFE4C4	255,228,196
black (sort)	#000000	0,0,0
blanchedalmond (mandel)	#FFEBCD	255,235,205
blue (blå)	#0000FF	0,0,255
blueviolet (blåfiolett)	#8A2BE2	138,43,226
brown (brun)	#A52A2A	165,42,42
burlywood (trebrun)	#DEB887	222,184,135
cadetblue (kadettblå)	#5F9EA0	95,158,160
chartreuse (likørfarge)	#7FFF00	127,255,0
chocolate (sjokolade)	#D2691E	210,105,30
coral (korallrød)	#FF7F50	255,127,80
cornflowerblue (kornblå)	#6495ED	100,149,237
cornsilk (kornsilke)	#FFF8DC	255,248,220
crimson (høyrødt)	#DC143C	220,20,60
cyan (cyanblå)	#00FFFF	0,255,255
darkblue (mørk blå)	#00008B	0,0,139
darkcyan (mørk cyan)	#008B8B	0,139,139
darkgoldenrod (mørk gullris)	#B8860B	184,134,11
darkgray (mørk grå)	#A9A9A9	169,169,169
darkgreen (mørk grønn)	#006400	0,100,0
darkkhaki (mørk kaki)	#BDB76B	189,183,107
darkmagenta (mørk magentarød)	#8B008B	139,0,139
darkolivegreen (mørk olivengrønn)	#556B2F	85,107,47
darkorange (mørk oransj)	#FF8C00	255,140,0
darkorchid (orkidéfiolett)	#9932CC	153,50,204
darkred (mørk rød)	#8B0000	139,0,0
darksalmon (mørk laks)	#E9967A	233,150,122
darkseagreen (mørk sjøgrønn)	#8FBC8F	143,188,143
darkslateblue (mørk skiferblå)	#483D8B	72,61,139
darkslategray (mørk skifergrå)	#2F4F4F	47,79,79
darkturquoise (mørk turkis)	#00CED1	0,206,209
darkviolet (mørk fiolett)	#9400D3	148,0,211
deeppink (dyp rosa)	#FF1493	255,20,147
deepskyblue (dyp himmelblå)	#00BFFF	0,191,255
dimgray (matt grå)	#696969	105,105,105
dodgerblue (skiltblå)	#1E90FF	30,144,255
firebrick (murstein)	#B22222	178,34,34
floralwhite (blomsterhvit)	#FFFAF0	255,250,240
forestgreen (skogsgrønn)	#228B22	34,139,34
fuchsia (fuksiarød)	#FF00FF	255,0,255
gainsboro (grå)	#DCDCDC	220,220,220
ghostwhite (spøkelseshvit)	#F8F8FF	248,248,255
gold (gull)	#FFD700	255,215,0
goldenrod (gullris)	#DAA520	218,165,32
gray (grå)	#BEBEBE	128,128,128
green (grønn)	#008000	0,128,0
greenyellow (grønngul)	#ADFF2F	173,255,47
honeydew (honningdugg, melon)	#F0FFF0	240,255,240
hotpink (mørk rosa)	#FF69B4	255,105,180
indianred (indianerrød)	#CD5C5C	205,92,92
indigo	#4B0082	75,0,130
ivory (elfenben)	#FFFFF0	255,240,240
khaki	#F0D58C	240,230,140
lavender (lavendelgrå)	#E6E6FA	230,230,250
lavenderblush (lavendelgrå)	#FFF0F5	255,240,245
lawngreen (gressgrønn)	#7CFC00	124,252,0
lemonchiffon (sitrongul)	#FFFACD	255,250,205
lightblue (lys blå)	#Add8E6	173,216,230
lightcoral (lys koralrød)	#F08080	240,128,128
lightcyan (lys cyanblå)	#E0FFFF	224,255,255
lightgoldenrodyellow (lys gullris)	#FAFAD2	250,250,210
lightgreen (lys grønn)	#90EE90	144,238,144
lightgrey (lys grå)	#D3D3D3	211,211,211
lightpink (lys rosa)	#FFB6C1	255,182,193
lightsalmon (lys laks)	#FFA07A	255,160,122
lightseagreen (lys sjøgrønn)	#20B2AA	32,178,170
lightskyblue (lys himmelblå)	#87CEFA	135,206,250
lightslategray (lys skifergrå)	#778899	119,136,153
lightsteelblue (lys stålblå)	#B0C4DE	176,196,222
lightyellow (lys gul)	#FFFFE0	255,255,224
lime (ravgul)	#00FF00	0,255,0
limegreen (ravgrønn)	#32CD32	50,205,50
linen (lerretgrå)	#FAF0E6	250,240,230
magenta (magentarød)	#FF00FF	255,0,255
maroon (rødbrun)	#800000	128,0,0
mediumaquamarine (middels akvamarin)	#66CDAA	102,205,170
mediumblue (mellomblå)	#0000CD	0,0,205
mediumorchid (middels orkidéfiolett)	#BA55D3	186,85,211
mediumpurple (mellompurpur)	#9370DB	147,112,219
mediumseagreen (middels sjøgrønn)	#3CB371	60,179,113
mediumslateblue (middels skiferblå)	#7B68EE	123,104,238
mediumspringgreen (middels vårgrønn)	#00FA9A	0,250,154
mediumturquoise (mellomturkis)	#48D1CC	72,209,204
mediumvioletred (middels rødfiolett)	#C71585	199,21,133
midnightblue (midnattblå)	#191970	25,25,112
mintcream (myntekrem)	#F5FFFA	245,255,250
mistyrose (sløret rosa)	#FFE4E1	255,228,225
moccasin	#FFE4B5	255,228,181
navajowhite (navajohvit)	#FFDEAD	255,222,173
navy (marineblå)	#000080	0,0,128
oldlace (kniplingshvit)	#FDF5E6	253,245,230
olive (oliven)	#808000	128,128,0
olivedrab (lys oliven)	#6B8E23	107,142,35
orange (oransje)	#FFA500	255,165,0
orangered (rødoransj)	#FF4500	255,69,0
orchid (orkidéfiolett)	#DA70D6	218,112,214
palegoldenrod (blek gulbrun)	#EEE8AA	238,232,170
palegreen (blek grønn)	#98FB98	152,251,152
paleturquoise (blek turkis)	#AFEEEE	175,238,238
palevioletred (blek rødfiolett)	#DB7093	219,112,147
papayawhip (melonkrem)	#FFEFD5	255,239,213
peachpuff (ferskenfarge)	#FFDAB9	255,218,185
peru (barkbrun)	#CD853F	205,133,63
pink (rosa)	#FFC0CB	255,192,203
plum (plomme)	#ddA0dd	221,160,221
powderblue (pulverblå)	#B0E0E6	176,224,230
purple (fiolett)	#800080	128,0,128
red (rød)	#FF0000	255,0,0
rosybrown (brunrosa)	#BC8F8F	188,143,143
royalblue (kongeblå)	#4169E1	65,105,225
saddlebrown (sadelbrun)	#8B4513	139,69,19
salmon (laks)	#FA8072	250,128,114
sandybrown (sandbrun)	#F4A460	244,164,96
seagreen (sjøgrønn)	#2E8B57	46,139,87
seashell (skjellhvit)	#FFF5EE	255,245,238
sienna (brent jord)	#A0522D	160,82,45
silver (sølv)	#C0C0C0	192,192,192
skyblue (himmelblå)	#87CEEB	135,206,235
slateblue (skiferblå)	#6A5ACD	106,90,205
slategray (skifergrå)	#708090	112,128,144
snow (snøhvit)	#FFFAFA	255,250,250
springgreen (vårgrønn)	#00FF7F	0,255,127
steelblue (stålblå)	#4682B4	70,130,180
tan (gyllenbrun)	#D2B48C	210,180,140
teal (mørk blågrønn)	#008080	0,128,128
thistle (tistlefiolett)	#D8BFD8	216,191,216
tomato (tomatrød)	#FF6347	253,99,71
turquoise (turkis)	#40E0D0	64,224,208
violet (fiolett)	#EE82EE	238,130,238
wheat (hvete)	#F5DEB3	245,222,179
white (hvit)	#FFFFFF	255,255,255
whitesmoke (røykhvit)	#F5F5F5	245,245,245
yellow (gul)	#FFFF00	255,255,0
yellowgreen (gulgrønn)	#9ACD32	154,205,50

En mer fullstendig oversikt over farger med navn og koder kan du finne her: RGB to color name Mapping (triplet and Hex) og her: RGB to color name Mapping (triplet and Hex). En annen oversikt gir de fargene som nokså pålitelig blir gjengitt likt i ulike nettlesere (browsere): Webmonkey color Codes.

Det er ikke noe i veien for å eksperimentere med egne farger. Hvis du benytter de hexadesimale tallene 00, 30, 70, CC og FF hvor hver av RGB-komponentene, så vil du få farger som blir greit gjengitt i alle nettlesere.

Tilbake til HTML - en kort innføring