Globale linker

HTML

<html>

HTML står for Hypertext Markup Language og er et sett med forhåndsdefinerte koder som brukes for å presentere (eller strukturere) innhold på en internett-side. World Wide Web Concortium, bedre kjent som W3C, er organisasjone som står bak definisjonene av html.

<basis html-dokument>

Et basis HTML-dokument består av kun noen få tagger:

<html>
<head>
<title>Sidetittel</title>
</head>
<body>
<!-- sideinnhold -->
</body>
</html>

Men skal du følge standarden i dag må et (X)HTML-dokument inneholde følgende basis-kode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no" lang="no">
<head>
<title>vindustittel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<body>
alt innholdet som vises i browseren ligger mellom body-taggene
</body>
</html>

Hele dokumentet er omsluttet av <html> og </html>-taggene. Omsluttet av <html>-taggene finner vi <head> og <body>-taggene. Og mellom <head>-taggene finner vi <title>-taggene. Sånn er det alltid!

<xhtml>

Etter hvert har vi i tillegg til HTML også fått XML, som ofte brukes til å transportere data. For at HTML skal kunne brukes i XML, har HTML utviklet seg fra versjon 4.01 til XHTML 1.0. De ser ganske like ut, bortsett fra at XHTML er strengere enn HTML hva syntax eller gramatikk angår.

Gjennom presentasjonen av HTML-taggene på de påfølgende sidene vil jeg benytte gjennomstreking på tagger som er utgått i XHTML, og vil også opplyse om hvilke attributter som er utgått. Når det gjelder utgåtte tagger og attributter er det anbefalt at man bruker CSS istedet.

Det at tagger og attributter er gått ut betyr ikke at dagens browserene ikke støtter dem, men vi kan risikere at fremtidige nettlesere ikke vil støtte dem. Sjekk sidene til W3C for liste over utgåtte tagger og attributter.

XHTML krever <!DOCTYPE> (se under)

<tag>

0 + 1 pictureHTML-kodene, eller taggene, bestemmer hvordan en HTML-side skal se. En tag består av et element og et eller flere attributter med sine verdier.
Det første ordet i en tag er et element, som forteller oss hva vi har med å gjøre. Påfølgende ord er attributter med sine verdier som forteller oss hvordan elementet skal se ut, f.eks:   <table width="100%" border="0">.....</table>.

Skulle vi for eksempel tagge opp en t-skjorte ville den kanskje sett slik ut:

<t-shirt color="white" size="xxl" type="VNeck">My parents visited Florida and all I got was this lousy t-shirt </t-shirt>

Analyserer vi denne taggen blir den som følgende:
<t-shirt (=element) color="white" (attributt=verdi).....> Teksten mellom åpningstaggen og avsluttningstaggen kan være skriften på t-skjorten.</t-shirt (avslutningstag)>

Element er altså gjenstanden, attributt er egenskapen(e). Element og attributt adskilles med et mellomrom. Hvis det er fler attributter adskilles disse også med et mellomrom.

Et tag-sett har en åpningstag (<t-shirt>) og en avslutningstag (</t-shirt>), hvor det som skiller disse taggene er slash-tegnet ( / ).Åpningstaggen forteller nettleseren at her kommer et eller annet og avslutningstaggen forteller nettleseren at her slutter det.
Attributtene gjentas ikke i avslutnings-taggen, kun elementet.

En tag skal alltid avsluttes. Såkalte åpne tagger avsluttes i åpningstaggen, f.eks <br />.

Og pass på å avslutte taggene i den rekkefølgen de ble startet. Startet du en tag inni en annen, skal den også avsluttes før den andre.
Feil: <b><i>fet skråstilt tekst</b></i>
Riktig: <b><i>fet skråstilt tekst</i></b>

Før vi går igang med <body>-taggen skal vi se litt på hva som foregår i <head>.

<!DOCTYPE>

HTML 4.01 spesifiserer tre typer DTD'er (regler for HTML):

XHTML 1.0 spesifiserer tre typer DTD'er (regler for XHTML):

DOCTYPE deklarasjone må ligge før rot elementet (<html>). Rot-elementet i dokumentet må inneholde en xmlns deklarasjon. F.eks:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

hvor lang og xml:lang spesifiserer språket som blir brukt på siden.

<head>

I hodet av et HTML-dokument legger vi inn ting som

<title>

Mellom <head>-taggene legger vi altså inn tittelen på HTML-siden. Tittelen er den teksten som står øverst i det blå feltet i browseren. I tillegg til at den viser tittelen på siden, brukes <title>-taggen av søkemotorene som et av de viktigste elementene i indeksering av sidene.

Titler skal på hjemmesiden (førstesiden) bestå av firmanavn og et «slagord», for eksempel: Kool Elektronics - Norges største innen underholdningselektronikk. Dette gjør det lettere å oppfatte hva sidene handler om når du får treff på søkemotorene. Sjekk selv på søkemotorene hvor dårlig mange er til å bruke titlene effektivt.

Tittelen er også det som blir brukt som standard tekst når du velger å bokmerke en side. Derfor er det viktig at sidene har en god tittel som starter med firmanavnet og ikke f.eks: Velkommen til Kool Elektronics, som da vil bli bokmerket under bokstaven V og ikke bokstaven K som den burde.

De resterende sidene skal også inneholde firmanavn, pluss en kort beskrivelse av hva siden inneholder, for eksempel: Kool Electronics - DVD spillere.

<meta>

<Meta>-tagger er data om data, eller informasjon om dokumentet om du vil. De kan fortelle noe om systemvariabler, som hvor lang tid det skal gå før siden lastes på nytt, om sidene skal lagres i minnet på maskinen. Eller det kan være brukervariabler som forteller noe om nøkkelord, beskrivelse eller forfatter.

Systemvariablene gjenkjennes ved at det brukes atributtet http-eqiuv. Eksempler kan være:

<META http-eqiuv="Refresh" content="5;url=http://www.google.com/" />
som vil sende brukeren videre til Google om 5 sekunder.

<META http-equiv="Pragma" content="no-cache" />
som vil hindre at siden blir lagret i cachen.

<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT" />
som vil sørge for at siden vil måtte lastes på nytt og ikke ligge i cachen på maskinen lenger enn til datoen angitt.

Brukervariablene gjenkjennes ved at det brukes atributtet name. Eksempler kan være:

<META name="description" content="Best prices on pet exotic frogs anywhere on the internet." />
som er er kort beskrivelse av hva nettstedet inneholder. Denne teksten brukes av søkemotorene under tittelen på søketreff. Ikke bruk for mange ord i beskrivelsen, mellom 20-60 er anbefalt.

<META name="keywords" content="frog white's tree frog pet frog for sale online sales online order pet exotic frog" />
som er nøkkelord du kan få treff på hos søkemotorene. Ikke bruk for mange nøkkelord heller, prøv å plukke ut de som virkelig beskriver innholdet på nettstedet.

Se ellers siden om meta-tagger for mer informasjon

SearchEngineWatch inneholder en del tips om hvordan søkemotorene virker.

Neste sideGå videre til neste side hvor vi skal se på <body>-taggen.