HTML nybörjarguide

Det här dokumentet täcker en idag gammal, men giltig, version av HTML. Den täcker inte nya funktioner i HTML. /OJ 98-10-01

En svensk guide till HTML plus
Detta är en svensk översättning av A Beginner's Guide to HTML . Översättningen är gjord av Johan Svensson, ECSDG <Web-Master@ecsdg.lu.se> och bearbetad av Viggo Kann, NADA, KTH.
Detta är en introduktion till hur man producerar dokument i språket HyperText Markup Language (HTML), språket som används i World Wide Web.

Vanliga förkortningar

WWW
World Wide Web (även Web, WWW, W3...).
SGML
Standard Generalized Markup Language -- detta är en standard för beskrivning av dokumentmärkningsspråk.
DTD
Document Type Definition -- detta är ett specifikt dokumentmärkningsspråk som baseras på SGML.
HTML
HyperText Markup Language -- HTML är ett exempel på en SGML DTD. I praktiken är HTML en samling av stilar (indikerade av märkkommandon) som definierar de olika komponenterna av ett WWW-dokument.

Vad denna introduktion inte tar upp

Denna introduktion förutsätter:

Att skapa HTML-dokument

HTML-dokument består av ren text (även känt som ASCII) och kan skapas av vilken textredigerare (editor) som helst (t.ex. Emacs eller vi på UN*X-maskiner). Ett antal Web-klienter (t.ex. tkWWW för X-windowsmaskiner och CERNs Web-klient för NeXT-datorer) inkluderar enkla HTML-redigerare i en WYSIWYG (What You See Is What You Get)-miljö. Det finns även ett gäng WYSIWIG-redigerare tillgängliga nu (t.ex. HotMetal för Sun Sparcstation, HTML Edit för Macintosh). Du kanske vill prova någon av dem innan du gräver ner dig i detaljerna kring HTML.

Du kan under redigering titta på ett HTML-dokument i NCSA Mosaic (och några andra Web-klienter). Välj Öppna lokalt dokument... under menyn Arkiv.

Spara ändringarna efter det att du redigerat HTML-filen. Återgå till NCSA Mosaic och Återladda dokumentet. Ändringarna kommer nu att synas på skärmen.

Ett minimalt HTML-dokument

Här är ett barskrapat HTML-dokument: 

    <TITLE>Det enklaste HTML-exemplet</TITLE>
    <H1>Detta är en rubrik av första nivån</H1>
    Välkommen till HTMLs värld. 
    Detta är ett stycke.<P>
    Och detta är ett annat.<P>
Det finns även en formaterad version av det minimala exemplet.

HTML använder speciella HTML-märkkommandon för att ge Web-klienten instruktioner om hur den skall visa texten. Ovanstående exempel använder:

HTML-märken består av en vänstervinkelparentes (<), (ett "mindre än"-tecken för matematiker), följt av namnet på märket samt en avslutande högervinkelparentes (>). Märken förekommer i de allra flesta fall i par, t.ex. <H1> och </H1>. Det avslutande märket ser precis likadant ut som det inledande förutom att ett snedstreck (/) föregår märkets text. I exemplet talar <H1> om för Web-klienten att börja formatera en rubrik av första nivån; </H1> talar om att formateringen skall avslutas.

Det främsta undantaget för "parregeln" är märket <P>. Det finns inget avslutande märke </P> i HTML.

NOTERA: HTML skiljer inte på gemener och versaler. <title> är helt likvärdigt med <TITLE> eller <TiTlE>.

Alla märken är tyvärr inte giltiga i alla Web-klienter. Om en klient inte känner till ett märke skall den helt enkelt ignorera det.

Grundläggande märken

Titlar

Varje HTML-dokument bör ha en titel. En titel visas normalt inte tillsammans med dokumentets text utan används främst för identifiering av dokument i andra sammanhang (t.ex. vid WAIS-sökning). Välj som titel mellan fem och tio ord som beskriver dokumentets innehåll och syfte.

I X-windows och Microsoft Windows-versionerna av NCSA Mosaic finns fältet Dokumentets titel överst i fönstret, alldeles nedanför menyraden. I NCSA Mosaic för Macintosh, visas text märkt med <TITLE> som programrubrik längst upp i fönstret.

Rubriker

HTML har sex rubriknivåer, numrerade från 1 till 6, där 1 är den största och viktigaste. Rubriker visas i större och/eller fetare typsnitt än normal brödtext. Den första rubriken i varje dokument bör märkas med <H1>. Syntaxen för rubrikmärkning är:

<Hy>Rubriktext</Hy>

där y är ett nummer mellan 1 och 6 som specificerar rubrikens nivå.

Rubriken "Rubriker" ovan kodas exempelvis som 

    <H3>Rubriker</H3>
Titeln och första rubriken

I många dokument är den första rubriken identisk med titeln. För dokument i flera delar bör texten i den första rubriken vara passande för en läsare som redan läser relaterad information (t.ex. titeln på ett kapitel), medan titelmärkningen bör identifiera dokumentet i ett vidare sammanhang (t.ex. inkludera både bokens och kapitlets titel, fastän detta ibland kan bli lite väl långt).

Stycken

Till skillnad från dokument i de flesta ordbehandlare är vagnreturer i HTML-filer utan betydelse. Radbrytning kan ske var som helst i ditt HTML-dokument och flera mellanslag och tabbar tolkas som ett enda mellanslag. (Det finns vissa undantag; t. ex. ignoreras mellanslag som följer märkningarna <P> eller <Hy>.) Notera att i det minimala exemplet ovan är det första stycket kodat som 

    Välkommen till HTMLs värld.
    Detta är ett stycke.<P>

I källkoden finns en radbrytning mitt i första stycket. En Web-klient ignorerar denna radbrytning och börjar ett nytt stycke först då den når ett <P>-märke.

Viktigt: Du måste separera stycken med <P>. Klienten ignorerar alla indragningar eller blanka rader i källkoden. HTML litar nästan blint på HTML-märkningar för att formatera text, och utan <P>-märkning kommer dokumentet att se ut som ett enda stort stycke. (Undantaget är text märkt som "förformaterad", vilket beskrivs nedan.) Till exempel kommer följande kod att ge exakt samma resultat som det första minimala HTML-exemplet: 

    <TITLE>Det enklaste HTML-exemplet</TITLE><H1>Detta är en
    rubrik av första nivån</H1>Välkommen till HTMLs värld. Detta är ett 
    stycke.<P>Och detta är ett annat.<P>

För att erhålla god läsbarhet av HTML-filer bör rubriker finnas på egna rader och stycken separeras av blankrader (förutom <P>-märkning...:-).

NCSA Mosaic hanterar <P> genom att det aktuella stycket avslutas en blankrad infogas.

I HTML+, en efterträdare till HTML under utveckling, kommer <P> att bli en "textbehållare", precis som texten i en rubrik av första nivån är inhyst mellan <H1> ... </H1>: 

    <P>
    Detta är ett stycke i HTML+.
    </P>

Skillnaden är att det avslutande märket </P> alltid utesluts. (D.v.s. om en klient ser <P>, vet den att </P> kommer att avsluta stycket.) Med andra ord, i HTML+ börjar <P> ett stycke.

Fördelen med denna förändring är att man kan specificera speciell formatering för ett stycke. I HTML+ kan du till exempel centrera ett stycke så här: 

    <P ALIGN=CENTER>
    Detta är ett centrerat stycke.
    Detta är HTML+ så du kan inte göra det än....:-(

Denna förändring kommer inte att påverka dina befintliga HTML-dokument och de kommer att se ut precis som vanligt med kommande HTML+ klienter.

Länkar till andra dokument

Den övergripande styrkan med HTML är att man kan länka textregioner (och även bilder) till andra dokument. Klienten markerar dessa regioner (vanligtvis med färg och/eller understrykningar) för att indikera att de är hypertextlänkar (ofta förkortade som hyperlänkar eller kort och gott länkar).

HTMLs enda hypertextrelaterade märkning är <A>, vilket står för ankare. För att inkludera ett ankare i ditt dokument:

  1. påbörja ankaret med <A följt av ett mellanslag,
  2. specificera det dokument som skall refereras till genom att skriva in HREF="filnamn" följt av en avslutande högervinkelparentes: >,
  3. skriv in texten som skall stå för hypertext länken i det aktuella dokumentet,
  4. skriv in det avslutande ankarmärket: </A>.

Här är ett exempel på en hypertextreferens: 

    <A HREF="Stats.html">Statistik</A>

Denna sats gör "Statistik" till en hyperlänk till dokumentet Stats.html, vilket pekar på filen Stats.html i samma bibliotek. Du kan länka till dokument i andra bibliotek genom att specificera relativ sökväg från det aktuella dokumentet till det länkade dokumentet. En länk till en fil NJStats.html som befinner sig i underbiblioteket AtlanticStates kommer t.ex. att bli: 

    <A HREF="AtlanticStates/NJStats.html">New Jersey</A>

Dessa kallas relativa länkar. Du kan även använda absoluta sökvägar till vilka filer du vill. Sökvägar anges med vanlig UN*X-syntax.

Relativa länkar och absoluta sökvägar

Generellt finns det två skäl till att använda relativa länkar:

  1. Du behöver inte skriva så mycket.
  2. Det är enklare att flytta en grupp av dokument till en annan plats, eftersom relativa länkar fortfarande kommer att vara giltiga.

Använd dock absoluta sökvägar när du länkar till dokument som inte är direkt relaterade. Ta som exempel en samling dokument som utgör en användarhandbok. Länkar inom denna samling bör vara relativa. Länkar till andra dokument (kanske en referens till relaterad mjukvara) bör däremot vara absoluta, fullständiga sökvägar. Med detta förfaringssätt kan du flytta användarhandboken till ett annat bibliotek utan att behöva uppdatera en enda länk.

URL (Uniform Resource Locator)

World Wide Web använder URLer (Uniform Resource Locators) för att specificera sökvägen till filer på andra servers. En URL innehåller typ av resurs som man vill komma åt (gopher, WAIS etc.), adressen till servern och sökvägen till filen. Syntaxen är:

schema://värd.domän[:port]/sökväg/filnamn

där schema är ett av

file
en fil på ditt lokala system, eller en fil på en (anonym) FTP-server,
http
en fil på en World Wide Web-server,
gopher
en fil på en Gopherserver,
WAIS
en fil på en WAIS-server,
news
en nyhetsgrupp i Usenet News,
telnet
en förbindelse till en Telnet-baserad service.

Portnumret port kan normalt uteslutas. (Det betyder att om ingen sagt något annat bör man inte ange portnumret.)

För att inkludera en länk till detta introduktionsdokument i ditt eget dokument kan du använda 

    <A HREF = "http://ecsdg.lu.se/HelpDocs/HTMLPrimer.html"> 
    HTML nybörjarguide</A>

Detta kommer att göra texten "HTML nybörjarguide" till en hyperlänk till detta dokument.

För mer information om URLer, titta på

Länkar till specifika avsnitt i andra dokument

Länkar (eller ankarmärken) kan även användas för förflyttning till ett specifikt avsnitt i ett dokument. Antag att du vill göra en länk från dokument A till ett specifikt avsnitt i dokument B. (Vi kallar denna fil dokumentB.html.) Först måste du definiera ett namngivet ankare i dokument B. För att definiea ett ankare med namnet "Jabberwocky" till dokument B, skriv in 

    Här är <A NAME = "Jabberwocky">någon text</a>

Nu när du skall skapa länken i dokument A, räcker det inte med att du specificerar filnamnet - du måste även ange det namngivna ankaret, separerat med en "brädhög" (#). 

    Detta är min <A HREF = "dokumentB.html#Jabberwocky">länk</A> till dokument B.

Om du nu klickar på "länk" i dokument A blir du direkt kopplad till texten "någon text" i dokument B.

Länkar till specifika avsnitt i aktuellt dokument

Denna teknik fungerar på samma sätt som ovan förutom att filnamnet är uteslutet.

För att länka till Jabberwockyankaret från samma dokumentfil (dokument B), använd 

    Detta är <A HREF = "#Jabberwocky">Jabberwockylänken</A> från aktuellt Dokument B.

Andra märkkommandon

Det föregående är tillräckligt för att skapa enkla HTML-dokument. För mer komplexa dokument har HTML märkkommandon för olika typer av listor, förformaterade avsnitt, utökade citat, teckenformatering, m.m.

Listor

HTML stödjer onumrerade, numrerade och definitionslistor.

Onumrerade listor (UL)

För att skapa en onumrerad lista:

  1. börja med märket <UL>,
  2. skriv in märket <LI> följt av ett individuellt listobjekt (inget avslutande </LI>-märke alltså),
  3. avsluta med märket </UL>.

Nedan följer en sådan lista med två listobjekt: 

    <UL>
    <LI> äpplen
    <LI> bananer
    </UL>

Utseendet blir:

Ett listobjekt <LI> kan innehålla flera stycken. Separera bara styckena med styckeseparatorn <P>.

Numrerade listor (OL)

En numrerad lista (kallas även sorterad lista [Ordered List], varifrån märkkommandots namn kommer) är identisk med en onumrerad lista, förutom att den använder <OL> istället för <UL>. Listobjekten är märkta med <LI> på samma sätt. Följande HTML-kod 

    <OL>
    <LI> apelsiner
    <LI> persikor
    <LI> vindruvor
    </OL>

får detta utseende:

  1. apelsiner
  2. persikor
  3. vindruvor

Definitionslistor (DL)

En definitionslista består vanligen alternerande av en definitionsterm (förkortad till DT) och en definition (förkortad till DD). Web-klienter formaterar normalt definitionen på en ny rad.

Här är ett exempel på en definitionslista: 

    <DL>
    <DT> ECSDG
    <DD> ECSDG (EkonomiCentrum Software Development Group),
         har sitt säte vid Ekonomihögskolan i Lund. ECSDG har som
         huvudsyfte att förenkla användningen och spridandet av
         informationsverktyg på Internet.
    <DT> Ekonomihögskolan i Lund
    <DD> Ekonomihögskolan i Lund ingår i Lunds Universitet och
         består i huvudsak av Institutionen för Ekonomisk Historia,
         Företagsekonomiska Institutionen, Nationalekonomiska Institutionen,
         Institutionen för Informatik, Institutionen för Statistik,
         Institutionen för Handelsrätt, Institutionen för Ekonomisk Geografi,
         Institutet för Ekonomisk Forskning och Stiftelsen EFL (Executive
         Foundation Lund). Här finns även Ekonomiska Biblioteket med bl.a. ett
         stort urval av litteratur för forskare och studenter.
    </DL>

Detta får utseendet:

ECSDG
ECSDG (EkonomiCentrum Software Development Group), har sitt säte vid Ekonomihögskolan i Lund. ECSDG har som huvudsyfte att förenkla användningen och spridandet av informationsverktyg på Internet.
Ekonomihögskolan i Lund
Ekonomihögskolan i Lund ingår i Lunds Universitet och består i huvudsak av Institutionen för Ekonomisk Historia, Företagsekonomiska Institutionen, Nationalekonomiska Institutionen, Institutionen för Informatik, Institutionen för Statistik, Institutionen för Handelsrätt, Institutionen för Ekonomisk Geografi, Institutet för Ekonomisk Forskning och Stiftelsen EFL (Executive Foundation Lund). Här finns även Ekonomiska Biblioteket med bl.a. ett stort urval av litteratur för forskare och studenter.

Märkningarna <DT> och <DD> kan innehålla flera stycken (separerade med <P>), listor, eller annan definitionsinformation.

Listor i flera nivåer

Listor kan nästlas godtyckligt, även om du i praktiken bör begränsa antal nivåer till tre. Du kan också ha flera stycken, vart och ett bestående av nästlade listor, i ett och samma listobjekt.

Ett exempel på listor i flera nivåer (nästlade listor): 

    <UL>
    <LI> Några institutioner vid Ekonomihögskolan:
        <UL>
        <LI> Institutionen för Ekonomisk Historia
        <LI> Företagsekonomiska Institutionen
        <LI> Nationalekonomiska Institutionen
        </UL>
    <LI> Några organisationer som inte är institutioner:
        <UL>
        <LI> Ekonomiska Biblioteket
        <LI> EFL (Executive Foundation Lund)
        <LI> Stiftelsen för Ekonomisk Forskning
        </UL>
    </UL>

Listorna kommer att se ut så här:

Förformaterad text

Använd märket <PRE> (som står för förformaterat [preformatted]) för att generera text i ett typsnitt med fast bredd och använda mellanslag, radbrytningar och tabbar precis som det står skrivet. (Det betyder att flera mellanslag ser ut som flera mellanslag och radbrytningar uppträder på samma ställen som i HTML-koden.) Detta är användbart för såväl programlistningar och stora textavsnitt som man inte orkar formatera. De följande raderna 

    <PRE>
      #!/bin/csh                           
      cd $SCR                             
      cfs get mysrc.f:mycfsdir/mysrc.f   
      cfs get myinfile:mycfsdir/myinfile   
      fc -02 -o mya.out mysrc.f           
      mya.out                              
      cfs save myoutfile:mycfsdir/myoutfile 
      rm *                                
    </PRE>

ser ut som 

      #!/bin/csh                           
      cd $SCR                             
      cfs get mysrc.f:mycfsdir/mysrc.f   
      cfs get myinfile:mycfsdir/myinfile   
      fc -02 -o mya.out mysrc.f           
      mya.out                              
      cfs save myoutfile:mycfsdir/myoutfile 
      rm *

Hyperlänkar kan användas inuti <PRE>-avsnitt. Du bör emellertid undvika HTML-märkning inuti <PRE>-avsnitt.

Notera att eftersom <, >, och & har speciella betydelser i HTML måste du använda teckenkoderna (&lt;, &gt; och &amp; för respektive tecken) för att använda dessa tecken. Läs även avsnittet om speciella tecken för mer information.

Utökade citat

Använd märket <BLOCKQUOTE> för att infoga citat som ett separat stycke på skärmen. De flesta klientprogram gör normalt en indragning för att separera det från omgivande text.

Ett exampel: 

    <BLOCKQUOTE>
    I still have a dream. It is a dream deeply rooted in the
    American dream. <P>
    I have a dream that one day this nation will rise up and 
    live out the true meaning of its creed. We hold these truths 
    to be self-evident that all men are created equal. <P>
    </BLOCKQUOTE>

Resultatet blir:

I still have a dream. It is a dream deeply rooted in the American dream.

I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.

Adresser

Märket <ADDRESS> används normalt av författaren till ett dokument när han/hon vill visa hur man kontaktar vederbörande (t.ex. en email-adress). Detta görs vanligtvis i slutet av en fil.

De sista raderna av online-versionen av originalet till denna introduktion är 

    <ADDRESS>
    A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
    </ADDRESS>

Resultatet blir

A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu

NOTERA: <ADDRESS> används inte för postadresser. Läs om hur du formaterar postadresser i avsnittet explicita radbrytningar.

Teckenformatering

Du kan koda individuella ord eller meningar med speciella stilar. Det finns två klasser av stilar: logiska och fysiska. Logiska stilar märker text efter dess innehåll, medan fysiska stilar specificerar ett avsnitts utseende. I den föregående meningen var orden "Logiska stilar" märkt som en "definition". Samma effekt (att formatera orden i kursiv stil), hade kunnat uppnås med annan märkning som helt enkelt säger "skriv dessa ord kursivt".

Fysisk och logisk märkning: Använd logisk märkning när du kan

Om nu fysiska och logiska stilar producerar samma resultat på skärmen, varför finns båda till? Vi kommer att komma fram till, i de följande avsnitten, filosofin bakom SGML, vilken kan summeras: "Lita på din Web-klient!".

I den ideala SGML-världen, är innehållet skiljt från presentationen. Således märks en rubrik av första nivån i SGML som en rubrik av första rang, men det specificerar inte att en rubrik av första nivån skall visas i, till exempel, 24-punkters fet Times centrerad överst på en sida. Fördelen med detta koncept (det liknar begreppet "formatmall" i många ordbehandlare) är att om du bestämmer dig för att visa rubriker av första nivån med 20-punkters vänsterjusterad Helvetica är allt du behöver göra att ändra definitionen av rubrik av första nivån i din presentationsapparat (d.v.s. din Web-klient).

Den andra fördelen med logisk märkning är att den hjälper dig att hålla en övergripande layoutstandard på dina dokument. Det är lättare att märka någonting med <H1> än att komma ihåg att rubriker av första nivån är 24-punkters fet Times eller vad det nu skall vara. Samma sak gäller för teckenstilar. Ta till exempel <STRONG>-märkningen. De flesta läsare visar sådan stil som fet text, men det fullt möjligt att en läsare visar sådana avsnitt i röd text istället! Logiska stilar erbjuder denna flexibilitet.

Logiska stilar

<DFN>
för ett ord som är en definition. Dessa visas typiskt i kursiv stil. (exempel: NCSAMosaic är en World Wide Web-klient.)
<EM>
för "eftertryck". Dessa visas typiskt i kursiv stil. (Se upp för ficktjuvar.)
<CITE>
för titlar på böcker, filmer, etc. Typiskt visade i kursiv stil. (HTML nybörjarguide)
<CODE>
för delar och exempel på programkod. Visad med ett typsnitt med fast breddsteg. (<stdio.h> är en s.k. headerfil)
<KBD>
för inmatning från användarens tangentbord. Bör visas i ett fett typsnitt med fast breddsteg, men många Web-klienter visar den med ett normalt typsnitt med fast breddsteg. (Skriv in passwd för att ändra ditt lösenord.)
<SAMP>
för statusmeddelanden från datorer. Visas med ett typsnitt med fast breddsteg. (Segmentation fault: Core dumped.)
<STRONG>
för starkt "eftertryck". Typiskt visat med ett fett typsnitt. (Viktigt!)
<VAR>
för en "metasyntaktisk" variabel, där användaren skall byta ut variabeln med ett specifikt uttryck. Typiskt visat kursivt. (rm filnamn tar bort filen med namnet filnamn.)

Fysiska stilar

<B>
fet (bold) text
<I>
kursiv (italic) text
<TT>
skrivmaskinstext, till exempel typsnitt med fast bredd.

Att använda teckenkodning

För att använda en teckenkodning,

  1. börja med <märke>, där märke är det önskade teckenformateringsmärket för att indikera början av en märkt text,
  2. fyll i den markerade texten,
  3. avsluta passagen med </märke>.

Speciella tecken

Speciella kommandosekvenser

Fyra tecken ur ASCII-tabellen - vänstervinkelparentes (<), högervinkelparentes (>), ampersand ("och") (&) och citattecken (") - har vart och ett speciell innebörd i HTML och kan därför inte användas rakt upp och ner i text. (Vinkelparenteserna används för att markera början och slut av HTML-märken, ampersandtecknet används för att markera början av en teckenkommandosekvens [escape].)

För att använda ett av dessa tecken i ett HTML-dokument måste du skriva in dess teckenkommandosekvens istället:

&lt;
teckenkommandosekvensen för <
&gt;
teckenkommandosekvensen för >
&amp;
teckenkommandosekvensen för &
&quot;
teckenkommandosekvensen för "

Övriga teckenkommandosekvenser stödjer accenterade tecken. Exempel:

&ouml;
teckenkommandosekvensen för ett gement o med två prickar (umlaut) över: ö (vad vi kallar "lilla ö" i Sverige)
&ntilde;
teckenkommandosekvensen för ett gement n med tilde: ñ
&Egrave;
teckenkommandosekvensen för ett versalt E med en grav accent: È

Du kan hitta mer information om detta samt en komplett lista över teckenkoder i dokumentet Special Characters hos ECSDG.

NOTERA: Till skillnad från resten av HTML är teckenkommandosekvenser känsliga för gemener/versaler. Du kan till exempel inte använda &LT; istället för &lt;.

Explicita radbrytningar

<BR> märket forcerar en radbrytning utan extra mellanrum mellan raderna. (Som kontrast använder de flesta Web-klienter märket <P> med en extra tom rad för att indikera början av ett nytt stycke lite tydligare.)

En vanlig användning av <BR> är vid formatering av adresser: 

    ECSDG<BR>
    c/o Husdatornämnden vid Holger Crafoords Ekonomicentrum<BR>
    Box 7080<BR>
    220 07 LUND<BR>

Horisontell regel

Märket <HR> producerar en horisontell linje med samma bredd som fönstret i din Web-klient. Används ofta för att skilja helt olika stycken åt i ett dokument. T.ex. om man vill skilja av fotnoterna längst ner i ett dokument från resten av dokumentet.

Infogade bilder

De flesta grafiskt orienterade Web-klienterna kan visa infogade bilder (d.v.s. bilder vid texten) i formaten X Bitmap (XBM) och GIF. Varje bild tar tid att bearbeta och drar ner på hastigheten på visningen av ett nyöppnat dokument. Därför bör du undvika att infoga för många, för stora och/eller för komplicerade bilder.

För att inkludera en infogad bild, använd 

    <IMG SRC=bild_URL>

där bild_URL är URLen för en bildfil. Syntaxen för IMG SRC-URLer är identisk med den som man använder i en ankar-HREF. Om bildfilen är en GIF-fil, måste filnamnets del av bild_URL sluta med .gif. Filnamn till X Bitmap-bilder måste sluta med .xbm.

Som standard är nederdelen av en bild justerad i förhållande till texten som visas med detta stycke.

Gör tillvalet ALIGN=TOP om du vill att läsaren skall justera efterföljande text till överdelen av bilden som visas i detta stycke. Den fullständiga infoga-bild-märkningen med toppjustering är: 

    <IMG ALIGN=top SRC=bild_URL>

ALIGN=MIDDLE justerar texten till mitten av bilden.

Alternativ text för Web-klienter som inte kan visa bilder

Några Web-klienter, främst sådana som körs på VT100-terminaler, kan inte visa bilder. Tillvalet ALT låter dig visa text istället för en bild när denna inte kan visas. Exempel: 

    <IMG SRC = "/images/back.gif" ALT = "Bakåt">

där /images/back.gif är bilden av en pil som pekar åt vänster. Med NCSA Mosaic och andra grafiskt orienterade Web-klienter, kan användaren se denna grafik. Med en VT100-klient, som t.ex. lynx, ser användaren ordet "Bakåt" istället. Som du förstår bör du inte använda för många bilder med vital textinformation i, om en inte försumbar del av användarna använder sig av teckenbaserade Web-klienter. Åtminstone bör du ange tillräcklig information i den alternativa texten till varje bild.

Externa bilder, ljud, och videor

Ibland vill man ha en bild öppnad som ett separat dokument när en användare aktiverar en länk till ett ord eller till en mindre infogad version av bilden. Detta anses då vara en extern bild och är användbart när du inte vill att användaren skall få vänta för länge på nedladdning av ett dokument med stora infogade bilder.

För att infoga en referens till en extern bild, använd 

    <A HREF = bild_URL>länk ankare</A>

Använd samma syntax för länkar till externa videor och ljud. Den enda skillnaden är filändelsen på den länkade filen. Till exempel,

<A HREF = "QuickTimeVideo.mov">länk ankare</A>

specificerar en länk till en QuickTime video. Några vanliga filtyper och deras ändelser är:

Filtyp
Filändelse
Ren text
.txt
HTML-dokument
.html
GIF-bild
.gif
TIFF-bild
.tiff
XBM-bitmapbild
.xbm
JPEG-bild
.jpg eller .jpeg
PostScriptfil
.ps
AIFF-ljud
.aiff
AU-ljud
.au
QuickTimevideo
.mov
MPEG-video
.mpeg eller .mpg

Förvissa dig om att den tilltänkta publiken har de nödvändiga externa programmen för visning av olika slags data. De flesta UN*X arbetsstationer kan t.ex. inte spela upp QuickTimevideor, medan många Macintoshdatorer kan.

Felsökning

Undvik överlappande märkning

Se på detta HTML-fragment: 

    <B>Detta är ett exempel på <DFN>överlappande</B> HTML-märkning.</DFN>

Ordet "överlappande" befinner sig både inom <B> och <DFN> märkningarna. Hur skall en Web-klient tolka detta? Det vet du inte förrän du provat, och olika läsare kommer troligen att visa det olika. Generellt sett bör du undvika överlappande märkning.

Infoga ankare och teckenkodning, men inget annat

Det är acceptabelt att baka in ankare i andra HTML-element: 

    <H1><A HREF = "Destination.html">Min rubrik</A></H1>

men baka inte in en rubrik eller annat HTML-element inuti ett ankare: 

    <A HREF = "Destination.html">
    <H1>Min rubrik</H1>
    </A>

Fastän de flesta läsare för närvarande kan hantera detta exempel, är det "olagligt" enligt de officiella HTML- och HTML+-specifikationerna, och kommer troligen inte att fungera i framtida klienter.

Teckenmärkningar modifierar utseendet på andra märkningar: 

    <UL><LI><B>Ett fett listobjekt</B>
        <UL>
        <LI><I>Ett kursivt listobjekt</I>
    </UL>

Hursomhelst bör du undvika att baka in andra typer av HTML-elementmärkningar. Det kan t.ex. vara frestande att baka in en rubrik inuti en lista för att göra typsnittet större: 

    <UL><LI><H1>En stor rubrik</H1>
        <UL>
        <LI><H2>Något lite mindre</H2>
    </UL>

Fastän några läsare, t.ex. NCSA Mosaic för X Windows, formaterar detta exempel ganska elegant, är resultatet oförutsägbart (därför att det är odefinierat) i andra läsare. För att erhålla kompatibilitet med andra läsare bör du helt undvika sådana konstruktioner.

Vad är skillnaden mellan att baka in <B> inuti en <LI>-märkning och att baka in <H1> inuti en <LI>? Detta är återigen en fråga om SGML. Den semantiska innebörden av <H1> är att det är huvudrubriken i ett dokument och att den bör följas av innehållet i dokumentet. Således finns ingen vettig anledning att skriva en <H1> inuti en lista.

Teckenformateringsmärkningar är generellt inte additativa. Du kan förvänta dig att 

    <B><I>lite text</I></B>

skulle ge fet och kursiv text. I vissa läsare blir det så; andra läsare tolkar bara den innersta märkningen (kursivt i detta exempel).

Kontrollera dina länkar

När en <IMG>-märkning pekar på en bildfil som inte existerar kommer en i läsaren intern bild att visas. När detta händer, kontrollera att bildfilen verkligen existerar, att hyperlänken har korrekt information i URLen, och att filrättigheterna är lämpligt satta (läsbar av alla).

Ett längre exempel

Här är ett längre exempel på ett HTML-dokument: 

    <HEAD>
    <TITLE>Ett längre exempel</TITLE>
    </HEAD>
    <BODY>
    <H1>Ett längre exempel</H1>
    Detta är ett enkelt HTML-dokument. Detta är det första
    stycket. <P>
    Detta är det andra stycket, som innehåller några specialeffekter.
    Detta är ett ord i <I>kursiv</I> stil.
    Detta är ett ord i <B>fet</B> stil.
    Här är en infogad GIF-bild: <IMG SRC = "/images/ecsdg.gif">. 
    <P>
    Detta är det tredje stycket, som demonstrerar länkar.  Här är en 
    hypertextlänk från ordet <A HREF = "underbib/minfil.html">något</A>
    till ett dokument kallat "underbib/minfil.html". (Om du 
    försöker följa denna länk kommer du att få ett felmeddelande på skärmen.)
     <P> 
    <H2>En rubrik av andra nivån</H2>
    Här kommer ett avsnitt som skall visas med ett typsnitt med fast
    bredd: <P>
    <PRE>
        On the stiff twig up there
        Hunches a wet black rook
        Arranging and rearranging its feathers in the rain ...
    </PRE>
    Här är en onumrerad lista med två listobjekt: <P>
    <UL>
    <LI> vinbär
    <LI> blåbär
    </UL>
    Detta är slutet på mitt exempeldokument. <P>
    <ADDRESS>Mig (Mig@mindator.domän.land)</ADDRESS>
    </BODY>
Du kanske hellre vill se den formaterade versionen.

Förutom de märkningar som redan diskuterats visar detta exempel även märkena <HEAD>... </HEAD> och <BODY> ... </BODY>, vilka separerar dokumentet i introducerande information om dokumentet och huvudtexten av dokumentet. Dessa märken ändrar inte utseendet på det formaterade dokumentet överhuvudtaget, men är användbara av flera andra orsaker (NCSA Mosaic för Macintosh 2.0 tillåter dig till exempel att läsa endast HEAD-delen av ett dokument innan du beslutar dig för att eventuellt ladda resten av dokumentet), och du rekommenderas att använda dessa märkningar.

För mer information

Denna guide är bara en introduktion till HTML och ingen komplett referens. Nedan följer referenser till andra informationskällor.

Ifyllnadsformulär (Forms)

En användbar möjlighet som inte diskuterats här är ifyllnadsformulär, vilka låter användarna skicka iväg information till Web-servern. Information om ifyllnadformulär finns i .

Stilguider

De följande länkarna ger tips om hur man skriver "bra" HTML:

Andra introduktionsdokument

Nedanstående länkar ger information liknande den i detta dokument:

Andra referenser

Johan Svensson 1994-09-04 
<Web-Master@ecsdg.lu.se>