HTML - en introduktion

Senast uppdaterad: den 5 Maj 1997
Bo Svensson
Detta dokument är fritt att göra vad Du vill med och jag frånsäger mig härmed alla upphovsrättsliga rättigheter. Informationen i dokumentet är hämtad från olika fria källor på internet och jag tror att informationen är korrekt även om jag inte kan garantera detta. Tycker Du att Du haft användning för dokumentet? Skicka mig ett EMAIL och uppmuntra mig så kanske jag orkar fortsätta att hålla dokumentet uppdaterat. Har Du hittat något som är felaktigt eller något som saknas? Skicka mig ett mail.
bo.svensson@abc.se

Andra källor till information

HTML Writer Mycket bra HTML redigeringsprogram. Fri.
Mag's Big List of HTML Editors
World Wide Web Consortium Generell information.
HTML Nybörjarguide Maxidata

Om du har Microsoft's Internet explorer 2.0 så kan Du ta en titt på denna sida för att få en uppfattning om vad som kan göras.

Innehåll

Att skapa ett HTML dokument
De viktigaste formatmarkeringarna
Stycken
Länkar
Listor
Förformatterad text
Citat
Address
Teckenformatering
Tvingande radbyte
Horisontella linjer
Bilder
Bilder, ljud och animationer
Tabeller
Ytterligare kommandon (head & body)
Koder och deras betydelse

Att skapa ett HTML dokument

HTML dokument är rena textfiler och kan därför skapas med en vanlig text editor eller vilken ordbehandlare som helst som kan spara filer som ren ASCII eller text.

Även om användandet av vanliga ordbehandlare är det vanligaste sättet att skapa HTML sidor så finns också ett antal fristående verktyg som kan göra detsamma. Några som kan nämnas är HotMetal, HTML Edit, HTML Assistant etc.

Det dokument man arbetar på kan man studera med hjälp av en WWW klientprogramvara typ mosaic eller Netscape. I Mosaic använder man bara kommandot Open Local och anger den fil man arbetar med. I Netscape använder man på samma sätt Open file. Microsofts Internet Explorer använder man Open... för att sedan använda Open file...

Arbetssättet innebär nästan alltid att man först editerar sin sida. Öppna den i sin WWW-klient ser saker som man inte är nöjd med. Editerar lite till och återigen tittar på den i klienten tills man är helt nöjd. Det minsta möjliga HTML dokumentet

Nedan visas ett dokument som utgör det minimala HTML dokumentet

<TITLE>Ett enkelt HTML exempel</TITLE>
<H1>Detta är en nivå ett rubrik</H1>
Välkommen till HTML världen. Detta är ett stycke.<p>
Detta är ännu ett stycke.<p>
Detta är en rad<br>
Detta är ännu en rad.<br>

Denna kod visas som:

Detta är en nivå ett rubrik

Välkommen till HTML världen. Detta är ett stycke.

Detta är ännu ett stycke.

Detta är en rad
Detta är ännu en rad.

HTML använder använder speciella markeringar för att tala om för en WWW klient hur texten skall visas. I det ovanstående exempel används:

<TITLE> och den tillhörande </TITLE> som anger dokumentets titel.
<H1> och den tillhörande </H1> som anger en rubrik.
<p> som anger ett styckeslut.
<br> som anger ett radslut.

HTML formatmarkeringar består av ett "mindre än"-tecken följt av formatmarkeringens namn och ett "större än"-tecken. De flesta formatmarkeringarna används i par såsom &ktH1> och </H1> där den första förekomsten anger var det aktuella formatet skall användas ifrån och den sista anger slutpositionen.

För vissa formatmarkeringar finns av naturliga skäl ingen parbildning. Detta gäller t.ex. <p> och <br> eftersom detta inte skulle ha någon vettig betydelse.

Notera att även om formatmarkeringarna i detta dokument skrivs med versaler så är detta inte ett krav. <TITLE> kan lika väl skrivas <title> eller <Title>.

Alla formatmarkeringar kanske inte stöds av en speciell WWW-klientprogramvara. Detta är dock inge problem eftersom den bara bortser från formateringskommandon som den inte förstår.

De viktigaste formatmarkeringarna

Dokumentets Titel <TITLE>

Varje HTML dokument skall ha en title. En title anges normalt separat från ett dokument och används ofta för att identifiera dokumentet i andra sammanhang t.ex. WAIS sökningar. Försök därför att ge dina dokument en titel som beskriver dokumentets innehåll. I många klientprogramvaror visas dokumentets title som det aktiva fönstrets rubrik. Detta gäller både Mosaic och Netscape och de flesta andra andra läsarna.

Rubriker <H1>....<H6>

Sex nivåer av rubriker finns definierade för ett HTML dokument från 1 tom 6 där 1 är den mest betydelsefulla. Den första rubriken i varje dokument skall ha en <H1> rubrik. Rubriker anges alltid på formen

<Hy>Detta är en rubrik </Hy >

där y är ett tal mellan 1 och 6 och anger rubriknivå.

I många dokument brukar den första rubriken vara densamma som dokumentets titel. För dokument som består av flera delar representerar rubriken kapitelrubriken i en bok samt titel representerar bokens namn.

så här ser de olika rubrikerna ut hos din klientprogramvara

Detta är en H1 rubrik.

Detta är en H2 rubrik.

Detta är en H3 rubrik.

Detta är en H4 rubrik.

Detta är en H5 rubrik.

Detta är en H6 rubrik

Stycken

Olikt situationen hos de flesta ordbehandlare som finns på marknaden så är inte vagnretur (radbyte) av betydelse i HTML. En vagnretur kan finnas var som helst i ditt dokument utan att få effekt.

Detsamma gäller också för mellanslag (blanktecken). Många mellanslag i följd läses som ett enda. Här finns dock ett par undantag. Mellanslag som följer <P> eller <Hy> ignoreras.

I vårt första HTML exempel finns två rader med utseendet

Välkommen till HTML världen.
Detta är ett stycke.<P>

Vid första anblicken skulle man kunna tro att dessa båda rader också skulle presenteras på två skilda rader i WWW-klienten. Så är dock inte fallet eftersom ett nytt stycke inte påbörjas förrän <P> påträffas. Det är alltså viktigt att använda <P> för att ange en position där ett nytt stycke skall starta. Detsamma gäller för <br> där man vill ha en ny rad.

Vårt exempel ovan skulle tolkas på samma sätt och resultatet bli detsamma om vi skrivit

<TITLE>Ett enkelt HTML exempel</TITLE><H1>Detta är en nivå ett rubrik</H1>Välkommen till HTML världen. Detta är ett stycke.<P>Detta är ännu ett stycke.<P> osv...

För att göra det enklare att läsa en HTML fil brukar man dock låta rubriker stå på egna rader samt man låter också stycken avskiljas med blanka rader. Notera dock att detta är en endast en konvention för att göra HTML dokumenten mer lättlästa för mänskliga ögon och har inget att göra med hur dokumentet tolkas av WWW-klienten.

Hos NCSA Mosaic och NetScape hanterar <p> genom att starta ett nytt stycke och sätta in en ny tom rad. I en del klienter får <p> samma effekt som <br>.

Hos HTML+, en efterföljare till HTML som håller på att utvecklas, så får </P> också en användning. Funktionen blir i princip identisk med t.ex. <H1></H1>. Dvs ett stycke får följande utseende

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

Är hela detta stycke centrerat så klarar din klientprogramvara av kommando sekvensen.
Denna rad skall också vara centrerad.
Metoden går även att använda för att justera bilder.

Dock är </P> också frivillig att använda även i HTML+.

Den stora fördel man uppnår med denna förändring är att det blir möjligt att t.ex. centrera ett helt stycke

<P ALIGN=CENTER>
Detta är ett centrerat stycke. Det är HTML+, så det går inte att använda ännu.
</P>

Länkar till andra dokument

Möjligheten att skapa länkar från ett dokument till andra dokument är antagligen HTML's största styrka. WWW-klienten markerar dessa regioner (vanligtvis med färg och understrykning) för att markera att detta är hypertext länkar (länkar eller hyper-länkar brukar också användas).

HTML har ett enda hypertext formateringskommando nämligen <A>. 'A' står på engelska för Anchor

För att lägga in en hypertext länk i ditt HTML dokument gör Du på följande sätt.

Starta med <A (ett mellanslag efter 'A'.
Ange det dokument Du vill skapa en länk till genom HREF="filnamn"
Ange den text som användaren ser som länk till detta dokument.
Ange </A> för att avsluta defininitionen av hypertextlänken.

Ett exempel

<A HREF="index.html">Till min hemsida</A>

Denna kod visas som:

Till min hemsida

I ovanstående exempel så presenteras "Till min hemsida" upplyst i WWW-klienten och om användaren klickar på denna text (prova!) så laddas ett nytt dokument in. I detta fall ett dokument som befinner sig i samma bibliotek som huvuddokumentet och som heter index.html. Naturligtvis kan Du specificera länkar till dokument i andra bibliotek genom att ange sökvägen till dokumentet.

En länk till ett dokument resultat.html som finns i underbiblioteket class på din maskin skulle anges som

<A HREF="class/resultat.html">Resultat</A>

Observera dock att "/" används för att separera bibliotek istället för "\" som i MS-DOS.
Genomgående kan noteras att UNIX stil för vägbeskrivningar används.

De ovanstående länkarna kallas relativa länkar. Om Du vill kan Du också använda absoluta länkar.

Relativa länkar kontra Absoluta länkar.

Generellt gäller att man skall använda relativa länkar hellre än absoluta. Detta framförallt därför att

Du får mindre att skriva
Det är enklare att flytta en grupp av dokument från ett bibliotek till ett annat.

Ibland måste man dock använda en absolut länk till ett annat dokument. Detta gäller framförallt när dokumenten inte har någon egentlig relation till varandra.

Ibland ser man referenser på formen

<A HREF="http://www.abc.se/~personlig">Min hemsida</A>

"~" är här en förkortning för vägen till ett "hembibliotek".

Uniform Resource Locator (URL)

WWW använder Uniform Resource Locators (URL's) för att ange var en fil finns på en värdmaskin (server). URL'er inkluderar information om den typ av resurs som man relaterar till (t.ex. gopher, WAIS, ftp), värddatorns adress och filens position i biblioteksstrukturen hos värddatorn.

En URL anges på formen

scheme://host.domain[:port]/path/filename

där scheme är en av

file
och anger en fil på det lokala systemet eller en fil på en FTP server.

http
en fil på en WWW-server.

gopher
en fil på en Gopher server

WAIS
en fil på en WAIS server

news
en Usenet nyhetsgrupp.

telnet
en koppling till en telnet baserad tjänst.

Portnumret kan normalt utelämnas om inte annat anges.

Ett exempel på en fullständig länk till ett dokument på en annan WWW-server har alltså följande utseende

<A HREF = "http://www.sunet.se/General/Internet/WWW/dok.html"> HTML</A>

vilket gör att texten "HTML" länkas till detta dokument på den aktuella värddatorn.

Länkar kan också användas för att förflytta sig mellan olika delar av ett dokument. Detta gör man genom att ge den aktuella sektionen i dokumentet ett namn på följande sätt

Here's <A NAME = "Intressant">valfri text</a>

Vill Du skapa en hypertext länk till denna del i det aktuella dokumentet anger Du den på följande form

<A HREF = "document.html#Intressant">link</A>

och om man klickar på "link" så förs man direkt till dokument.html och det aktuella avsnittet i detta dokument visas. #-tecknet används alltså för att specificera en speciell sektion i det aktuella dokumentet.

Länkar till olika delar av det nuvarande dokumentet

Tekniken är densamma som i exemplet ovan förutom att filnamnet utelämnas. Om man vill göra en länk i det aktuella dokumentet enligt ovan kan man alltså ange

<A HREF = "#Intressant">Intressant länk</A>

och sätter

<A NAME = "Intressant">some text</a>

på det ställe i dokumentet dit man vill att ett klick på länken skall föra läsaren.

Du kan klicka på denna länk för att gå till början av dokumentet.

Fler formateringskommandon.

De format markeringar som angets ovan är tillräckliga för de flesta fall men HTML har formaterings kommandon för flera typer av listor, förformaterade sektioner, utökade citat, teckenformatering och mycket annat.

När ett HTML-dokument börjar bli komplext kan det vara värdefullt att förtydliga med kommentarer:

Kommentaren börjar med . Kommentarer får inte nästlas (kommentar i kommentar).

LISTOR

HTML stödjer onumrerade, numrerade och definitions listor.

Onumrerade listor

En onumrerad lista skapar Du på följande sätt

Starta med <UL>.
Föregå varje listelement med <LI>. Inget avslutande </LI> är nödvändigt.
Avsluta med </UL>

Exempel
en lista med tre element

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

I WWW-klienten får detta utseendet:

äpplen
bananer
apelsiner

Varje listelement kan bestå av flera rader. Separera dem bara med <P>.

Numrerade listor

Numrerade listor eller sorterade listor använder <OL> istället för <UL> för övrigt är handhavandet identiskt med onumrerade listor enligt ovan.

exempel

<OL>
<LI> äpplen
<LI> bananer
<LI> apelsiner
</OL>

I WWW-klienten får detta utseendet:

äpplen
bananer
apelsiner

Definitions listor

Dessa beskrivs bäst genom ett exempel

<DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing Applications,
is located on the campus of the University of Illinois
at Urbana-Champaign. NCSA is one of the participants in the
National MetaCenter for Computational Science and Engineering.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in Ithaca,
New York. CTC is another participant in the National MetaCenter
for Computational Science and Engineering.
</DL>

Hos WWW-klienten visas detta som:

NCSA: NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering.
Cornell Theory Center: CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering.

<DT> och <DD> element kan bestå av flera stycken, listor eller annan definitions information.

Nästlade listor

Listor kan placeras inuti andra listor i hur många nivåer som helst även om detta rent praktiskt lämpar sig i som mest tre nivåer. Du kan också ha ett antal stycken som var och ett innehåller en nästlad lista som en lista.

Ett exempel på en nästlad lista.

   <UL>

    <LI> A few New England states:

        <UL>

        <LI> Vermont

        <LI> New Hampshire

        </UL>

    <LI> One Midwestern state:

        <UL>

        <LI> Michigan

        </UL>

    </UL>

den visas hos WWW-klienten som

A few New England states:
- Vermont
- New Hampshire
One Midwestern state:
- Michigan

Förformaterad text

Använd <PRE> som står för "preformatted" för att behålla texten i en fixerad typsnitts bredd och låta mellanslag, ny rad, tabbar ha betydelse. Dvs flera mellanslag efter varandra visas, radbyten sker på samma ställen som i HTML filen. Detta är t.ex användbart för olika typer av listningar av typ källkod.

Följande exempel

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

visas 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 anges inuti ett <PRE> avsnitt men Du bör undvika att använda andra HTML formateringskommandon.

Notera att eftersom <, > och & har speciell betydelse i HTML så måste man ange koder när man vill använda sig av dessa tecken. Använd nedanstående koder.

< = <
> = >
& = &
® = ®
© = ©

Några andra "specialtecken" som är bra att kunna skriva är:

å = å (Å = Å)
ä = ä
ö = ö
=   (No-break space)
" = "

Citat

Använd <BLOCKQUOTE> för att markera ett avsnitt på skärmen. Många WWW-klienter flyttar in blocket för att separera det från omgivande text.

ett exempel:

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

visas som

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> används i huvudsak för att ange författaren till ett dokument och brukar också innehålla information om hur författaren kan kontaktas (t.ex. en Email-adress). Oftast anges denna information sist i filen.

Teckenformatering

Det är möjligt att formatera enskilda ord och meningar med specifika stilar. Två typer av formateringskommandon används. Logiska och fysiska.

Logiska formateringskommandon formaterar text i hänseende på dess innehåll och fysiska formateringar endast med hänsyn till dess utseende.

Använd logisk formatering om möjligt!
Logisk formatering ger en enhetlighet bland dokument producerade av olika personer.

Logisk formatering

<DFN>
För ett ord som definieras. Typiskt visas det i kursiv stil.

Hos din klient ser det ut så här.

<EM>
något man vill ge uttryck för. Typiskt visas det som kursiv stil.

Hos din klient ser det ut så här.

<CITE>
för titlar på böcker filmer etc. Typiskt visas det som kursiv stil.

Hos din klient ser det ut så här.

<CODE>
för kodfragment. Visas normalt i en font med fast teckenbredd.