HTML Nybörjarguide


Detta är en bearbetning av A Beginner's Guide to HTML. Arbetet är gjort av Johan Svensson, ECSDG.
Du kan skicka kommentarer och synpunkter på detta dokument till <Mosaic-Swe@ecsdg.lu.se>.
Detta är en introduktion i att producera 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 att beskriva dokumentmärkningsspråk. (Kontakta mig om du kommer på en bättre översättning av "markup language"!)
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 World Wide Web dokument.



Vad denna introduktion inte tar upp

Denna introduktion förutsätter:




Att skapa HTML-dokument

HTML-dokument består av ren (även känt som ASCII) text format och kan skapas av vilken text-redigerare (editor!) (t.ex. Emacs eller vi på UN*X maskiner). Ett antal Web-klienter (tkWWW för X Windows maskiner 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 titta på slutresultatet av ett HTML-dokument under redigering i NCSA Mosaic (och några andra Web-klienter). Välj Öppna lokalt dokument... under the Arkiv menyn.

Efter det att du redigerat HTML-filen, spara ändringarna. Å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 (se orginal PÅ ECSDG)

HTML använder 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änster-vinkelparantes (<), (ett "mindre än" tecken för matematiker), följt av namnet på märket samt en avslutande höger-vinkelparantes (>). 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 påbörjande förutom att ett snedstreck (/) föregår märkets text. I examplet 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 grundläggande undantaget för "par-regeln" är <P> märket. Det finns inget märke som </P> i HTML.

NOTERA: HTML skiljer inte på gemener/versaler. <title> är helt ekvivalent 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 är normalt inte visad tillsammans med dokumentets text och används främst för identifiering av dokument i andra sammanhang (t.ex. vid WAIS-sökning). Välj normalt fem till tio ord för att beskriva dokumentets innehåll och syfte.

I X-Windows och Microsoft Windows versionerna av NCSA Mosaic, finns Dokument Titel fältet ö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 på fönstret.

Rubriker

HTML har sex rubriknivåer, numrerade från 1 till 6, där 1 är den mest prominenta. 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å.

Till exempel, kodningen av "Rubriker" rubriken ovan är


    <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 varsomhelst i ditt HTML-dokument och flera mellanslag och tabbar tolkas som ett enda mellanslag. (Det finns vissa undantag; mellanslag som följer <P> eller <Hy> märkningar t.ex., är ignorerade.) 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 en <P> märkning.

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 är beskrivet nedan.) Till exempel kommer följande att rendera i ett identiskt utseende 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 bra läsbarhet av HTML filer bör rubriker finnas på egna rader och stycken separerade av blankrader (förutom <P> märkning...:-).

NCSA Mosaic hanterar <P> genom att avsluta det aktuella stycket och infoga en blankrad.

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 </P> avslutande märket alltid utesluts. (D.v.s. om en klient ser en <P>, vet den att en </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 hypertext länkar (ofta förkortade som hyperlänkar eller kort och gott länkar).

HTMLs enda hypertext-relaterade 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 . (Där är ett mellanslag efter A.)
  2. Specificera det dokument som skall refereras till genom att skriva in HREF="filnamn" följt av en avslutande höger-vinkelparantes: >
  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 hypertext-referens:


    <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. T.ex., en länk till en fil NJStats.html som befinner sig i underbiblioteket AtlanticStates kommer 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 standard UN*X syntax.

Relativa länkar och absoluta sökvägar

Generellt bör du använda relativa länkar av en del orsaker:
  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 i 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.

Uniform Resource Locator (URL)

World Wide Web använder Uniform Resource Locators (URLer) 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 en av

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

port numret kan normalt uteslutas. (Det betyder att om ingen sagt något annat - ange inte 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 till att förflytta sig 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 Jabberwocky ankaret från samma dokumentfil (Dokument B), använd


    Detta är <A HREF = "#Jabberwocky">Jabberwocky länk</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 citeringar, tecken formatering, m.m.



Listor

HTML stödjer onumrerade, numrerade och definitionslistor.

Onumrerade listor (UL)

För att skapa en onumrerad lista,

  1. Börja med den öppnande list <UL> märkningen.
  2. Skriv in en <LI> märkning följt av ett individuellt listobjekt. (Ingen avslutande </LI> märkning, alltså.)
  3. Avsluta med den avslutande </UL> märkningen.

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 <P> styckeseparatorn.

Numrerade listor (OL)

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


<OL>

   <LI> bapelsiner

   <LI> persikor

   <LI> vindruvor

</OL>

får detta utseendet:

  1. bapelsiner
  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.

<DT> och <DD> märkningarna kan innehålla flera stycken (separerade med <P> stycke märkningen), 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 även ha ett antal stycken, var 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 <PRE> märket (som står för förformaterat [preformatted]) för att generera text i ett typsnitt med fast breddstorlek 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 teckenkodningarna (&lt;, &gt; och &amp; för respektive tecken) för att använda dessa tecken. Läs även avsnittet Speciella Tecken för mer information.




Utökade citeringar

Använd <BLOCKQUOTE> märkningen för att infoga citeringar 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

<ADDRESS> märket 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. Se avsnittet Explicita radbrytningar om hur du formaterar postadresser.




Teckenformatering

Du kan koda individuella ord eller meningar med speciella stilar. Det finns två klasser av stilar: logisk eller fysisk. Logiska stilar märker text efter dess innehåll, medan Fysiska stilar specificerar utseendet av ett avsnitt. 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 ändra rubriker av första nivån att visas 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. Hursomhelst är 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 är typiskt visade i kursiv stil. (NCSAMosaic är en World Wide Web klient.)
<EM>
för "eftertryck". Dessa är avsnitt typiskt visade i kursiv stil. (Se upp för ficktjuvar.)
<CITE>
för titlar på böcker, filmer, etc. Typiskt visade i kursiv stil. (A HTML Nybörjarguide)
<CODE>
för delar och exempel på programkod. Visad med ett typsnitt med fast breddsteg. (<stdio.h> är en s.k. header-fil)
<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 status meddelanden 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 namn filnamn.)

Fysiska stilar

<B>
fet (bold) text
<I>
kursiv (italic) text
<TT>
skrivmaskins- (typewriter) text, till exempel med typsnitt med fast breddsteg.



Att använda teckenkodning

För att använda en teckenkodning,

  1. Börja med <märke>, där märke är det önskade tecken-formateringsmä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 (escape)

Fyra tecken ur ASCII-tabellen -- vänster-vinkelparantes (<), höger-vinkelparantes (>), ampersand ("och") (&) och dubbelcitat (") -- har var och en speciell innebörd i HTML och kan därför inte rakt upp och ner i text. (Vinkelparanteserna används för att markera början och slut av HTML-märken, ampersand-tecknet används för att markera början av en tecken-kommandosekvens [escape].)

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

&lt;
tecken-kommandosekvensen för <
&gt;
tecken-kommandosekvensen för >
&amp;
tecken-kommandosekvensen för &
&quot;
tecken-kommandosekvensen för "

Övriga tecken-kommandosekvenser stödjer accenterade tecken. Exempel:

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

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

NOTERA: Till skillnad från resten av HTML, är tecken-kommandosekvenser 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 <P> "nytt stycke" märket 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

<HR> märket 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) som är i X Bitmap (XBM) eller GIF format. 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 på 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.

Använd ALIGN=TOP valet 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 topp-justering ä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. ALT valet tillåter dig att visa text istället för en bild, då 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 text-information 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 för varje bild.




Externa bilder, ljud, och videos

Ibland vill du 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ändbar när du inte vill att användaren skall få vänta för länge med att ladda ner 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 videos 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 bitmap bild
.xbm
JPEG bild
.jpg or .jpeg
PostScript fil
.ps
AIFF ljud
.aiff
AU ljud
.au
QuickTime video
.mov
MPEG video
.mpeg eller .mpg

Förvissa dig om att den tilltänkta publiken har de nödiga externa programmen för visning av olika slags data. De flesta UN*X arbetsstationer kan t.ex. inte spela upp QuickTime videos, medan många Macintosh datorer 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>

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 element mä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 av dokumentet. Således finns ingen vettig anledning att hitta en <H1> inuti en lista.

Tecken-formaterings märkningar är generellt inte additativa. Du kan förvänta dig att


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

skulle bli 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 

    hypertext lä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

    breddsteg: <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.(se orginal på ECSDG)

Förutom de märkningar som redan är diskuterade, visar detta exempel även <HEAD>... </HEAD> och <BODY> ... </BODY> märken, vilka separerar dokumentet i introducerande information om dokumentet och huvudtexten av dokumentet. Dessa märken ändrar inte utseendet av det formaterade dokumentet överhuvudtaget, men är användbart av flera andra orsaker (NCSA Mosaic för Macintosh 2.0 tillåter dig till exempel att läsa endast header 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 diskutersts här är ifyllnadsformulär, vilka låter användarna skicka iväg information till Web-servern. Information om ifyllnadformulär finns i Fill-out Forms Overview (se orginal på ECSDG)

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


EkonomiCentrum Software Development Group , <Mosaic-Swe@ecsdg.lu.se>

Johan Svensson, <Web-Master@ecsdg.lu.se>, 1994-11-22

Lokalt ansvarig <lwidmark@hh.umu.se>