Linux - Friheden til at skrive dokumentation: Version 2.7.20040524 - 2020-12-31
forrige		næste

Kapitel 1. HTML

Det er ofte smart at skrive dokumentation i HTML, fordi HTML forstås på alle platforme. Ideen med HTML er, at man skriver en fil i ren tekst og tilføjer nogle mærker der afgrænser elementer i teksten med bestemte typer oplysninger. Det kan for eksempel være overskrifter eller henvisninger til illustrationer. Det er vigtigt at bemærke at HTML principielt slet ikke beskriver hvordan teksten skal vises, men kun hvilken slags tekst der er tale om. Hvis du vil styre hvordan dine HTML-dokumenter skal vises, skal du bruge CSS (stilark).

Da de fleste programmer der viser HTML (primært netlæsere) på hver deres måde forsøger at kompensere for eventuelle fejl i et HTML-dokument, er det vigtigt at man — inden offentliggørelsen — kører sine HTML-filer gennem en egentlig HTML-syntakstjekker for at sikre sig at syntaksen er korrekt og at de forskellige programmer dermed ikke kommer med forskellige gæt på hvad du egentlig mente. "HTML Tidy" er en praktisk HTML-syntakstjekker og -kodepynter. Hvis du ikke allerede har "HTML Tidy" på dit system (det kan du undersøge med kommandoen tidy -v) bør du installere det inden du fortsætter.

Der findes to typer mærker; startmærker og slutmærker. Sammen med teksten mellem mærkerne udgør et start- og et slutmærke et element. Startmærker skrives med et "<" efterfulgt af elementets navn, eventuelle atributter til elementet og et ">". For eksempel:

<p>

eller

<html lang="da">

Slutmærker består blot af "</", elementets navn og ">". For eksempel:

</p>

eller

</html>

Elementernes navne er ikke versalfølsomme, men de bør generelt skrives med småt.

Der er mange muligheder for at lave HTML. Nogle personer skriver HTML i en almindelig tekst-editor og har selv fuld kontrol over alle detaljer. Andre skriver siderne i et grafisk værktøj såsom Netscape eller Mozilla, hvor man sætter mærkerne ind via menuerne.

Figur 1-1. Mozilla kan anvendes til at skrive HTML

Fordelen med at anvende et program som Mozilla er at man med knapperne <HTML>Source og <Normal> nemt kan hoppe frem og tilbage mellem HTML-koden og den grafiske visning af hjemmesiden.

Figur 1-2. Mozilla kan anvendes til at skrive HTML

1.1. Basal HTML

Det første basale HTML-dokument (resultatet kan ses på Figur 1-1) man kan skrive kan se således ud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
  <title>Titel på siden skrives her</title>
</head>
<body>
<h1>Overskrift på siden</h1>
<p>Almindelig tekst skrives efter man har afsluttet overskriften</p>
<h2>En sekundær overskrift på siden</h2>
<p>Almindelig tekst skrives efter man har afsluttet overskriften</p>
</body>
</html>

Det starter med en markering af dokumenttypen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">

Dernæst kommer dokumenthovedet:

<head>
...
</head>

hvor man kan sætte information om f.eks. titel på dokumentet. Selve indholdet af siden sættes i "body"-elementet mellem

<body>

</body>

hvor man med

<h1>OVERSKRIFT</h1>

kan sætte en overskrift ind. Typisk vises denne overskrift med en stor skrifttype. Der findes yderligere fem niveauer overskrifter, "h2", "h3", "h4", "h5" og "h6", men i praksis bør man nok ikke gå længere end til "h3" eller "h4".

Som det vil blive forklaret i Afsnit 1.2 så er det vigtigt at hjemmesiderne skrives uden fejl. Det kræver blandt andet at dokumentet starter med en dokumenttypehenvisning. I dag bruger man typisk overgangsudgaven af HTML 4.0, som man kan henvise til med disse to linjer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">

Den præcise definition af HTML 4.0 kan læses på http://www.w3c.org/TR/html4/.

Mange programmer der skal forestille at gemme HTML-filer har desværre svært ved at sørge for at det er korrekt HTML der bliver gemt. Derfor gennemgår vi dele af selv at skrive HTML.

1.1.1. Henvisninger i HTML

Hvis man ønsker at lave en henvisning (eng. "a link") til et dokument, som ligger på en anden server, bruger man "a"-elementet ("a" står for "anchor"). Man kan for eksempel skrive:

Se mere på <a href="http://www.sslug.dk/">SSLUG's hjemmeside</a>

hvis man vil henvise til http://www.sslug.dk/. Teksten mellem start- og slutmærkerne (i eksemplet mellem <a href="http://www.sslug.dk/"> og </a>) vil være den tekst netlæseren fremhæver som henvisningen. Det kan for eksempel ske ved understregning eller farveskift.

Henvisninger behøver ikke være absolutte. Hvis man har to HTML-filer liggende i samme katalog kan man for eksempel blot bruge filnavnet (nogle gange endda uden ".html") som adresse:

Jeg har også en <a href="bsd.html">BSD-maskine</a>.

(her gik vi ud fra at den anden fil hed "bsd.html")

Hvis dokumentet ligger i et andet bibliotek på serveren skal man huske at gøre opmærksom på det.

Hvis det dokument, som man vil henvise til, ligger i et underbibliotek i forhold til ens eget dokument, skriver man:

Se mere i <a href="underbibliotek/filnavn.html">dette 
dokument</a>.

Hvis det dokument, som man vil henvise til, ligger i et overbibliotek i forhold til ens eget dokument, skriver man

Se mere i <a href="../filnavn.html">dette dokument</a>.

Hvis det dokument, som man vil henvise til, ligger i et andet bibliotek på samme niveau som til ens eget dokument, skriver man

Se mere i <a href="../bibliotek/filnavn.html">dette 
dokument</a>.

Hvis man vil lave en henvisning til et andet sted i ens eget dokument, skal man både lave en henvisning samt navngive det sted, som man ønsker at henvise til. Henvisningen skrives som:

Læs mere om <a href="#cirkus">cirkusteltet</a> senere.

Og man laver et sted der kan henvises til med:

<a name="cirkus">Da vi endelig kom i cirkus var teltet væltet</a>

Det er strengt taget ikke nødvendigt at et "a"-element indeholder tekst, hvis det kun bruges til at henvise til, men det er nok mest anvendeligt sammen med en overskrift:

<h2><a name="bsd">Min BSD-maskine</a></h2>

så folk kommer til starten på et afsnit, når de følger en henvisning.

Man kan kombinere et andet dokuments adresse med et navngivet sted i dette dukument:

<a href="udflugt.html#cirkus">Cirkusforestillingen</a>

Hvis man henviser til et bestemt sted i en anden forfatters dokument, skal man huske være opmærksom på, at forfatteren kan finde på at ændre sin navngivning, så henvisningen ikke længere virker helt som forventet. Dette er på den anden side ikke anderledes end det problem man generelt vil støde ind i, hvis man henviser til materiale på internettet - det har det med pludselig at forsvinde.

1.1.2. Afsnit og tvungne linjeskift

Afsnit markeres med "p"-elementet (for "paragraph") der forhåbentlig er det mest brugte HTML-element:

<p>
 Skåne Sjælland Linux User Group (SSLUG) er en gruppe personer med
 basis i Øresundsregionen og med fælles interesse for styresystemet
 Linux.
</p>

<p>
 SSLUG er non-profit og så vidt muligt non-økonomi. Vi eksisterer via
 fælles arbejde samt hardware donationer fra tid til anden. Vi har
 ikke noget politisk eller religiøst tilhørsforhold, og skelner ikke
 folk på race eller hudfarve. SSLUG bringer ikke reklamer, spam eller
 lignende. SSLUG vil gerne hjælpe firmaer og private med Linux, men
 har som sagt ingen kommercielle eller økonomiske interesser.
</p>

Hvis man af en eller anden grund har behov for at vælge om et afsnit skal venstrestilles, centreres eller højrestilles bruger man atributten "align" med værdien "left", "center" eller "right":

<p align="right">
 Teksten her vil blive højrestillet.
</p>

<p>
 Mens denne vil fremstå som læseren foretrækker det (typisk
 venstrestillet).
</p>

HTML har et element specifikt til at angive tvungne linjeskift. Navnet er "br" (for "line break") og elementet skrives blot:

<br>

Da "br" per definition er et tomt element skal der ikke bruges et slutmærke.

Tilsvarende findes det også et tomt element, der indsætter en vandret linje. Navnet er "hr" og det har mulighed for at man bruger attributten "width" til at angive linjens længde. For eksempel vil:

<hr width="50%">

give en linje svarende til halvdelen af sidens bredde.

1.1.3. Billeder

Det er nemt at indsætte billeder i et HTML-dokument med "img"-elementet. Det er dog vigtigt at være opmærksom på at "img"-elementet er beregnet til såkaldt "in-line"-illustrationer, som for eksempel specielle symboler der skal stå som en del af teksten:

Han skrev en <img src="/logoer/latex.png" alt="LaTeX">-brugsanvisning.

Hvis det er en egentlig illustration man har brug for, og den ikke skal stå indlejret i den løbende tekst, bliver man nødt til at snyde lidt. Der er to muligheder. Den ene er at benytte sig af at "img"-elementet tillader at man bruger attributten "align" til at højre- eller venstrestille billedet, og på den måde trække det ud af den løbende tekst:

<p>
 <img src="/billeder/tux-solskin.png"
      alt="[billede af Tux med solbriller]"
      align="right">
 Skåne Sjælland Linux User Group (SSLUG) er en gruppe personer med
 basis i Øresundsregionen og med fælles interesse for styresystemet
 Linux.
</p>

<p>
 SSLUG er non-profit og så vidt muligt non-økonomi. Vi eksisterer via
 fælles arbejde samt hardware donationer fra tid til anden. Vi har
 ikke noget politisk eller religiøst tilhørsforhold, og skelner ikke
 folk på race eller hudfarve. SSLUG bringer ikke reklamer, spam eller
 lignende. SSLUG vil gerne hjælpe firmaer og private med Linux, men
 har som sagt ingen kommercielle eller økonomiske interesser.
</p>

Den anden er at sætte "img"-elementet alene i et "p"-element:

<p align="center">
 <img src="/billeder/tux-solskin.png"
      alt="[billede af Tux med solbriller]">
</p>

Attributten "alt" er den tekst der skal vises i stedet for billedet, hvis det af den ene eller den anden grund ikke er indlæst. Af hensyn til blinde og søgemaskiner (og lynx-brugere) bør man altså sikre sig at teksten også giver mening, hvis man erstatter billederne med "alt"-teksterne. Hvis billedet ikke er væsentligt (fx fordi det kun anvendes kosmetisk), skal attributten "alt" stadig anvendes. Den skal blot være tom (alt=""), hvilket betyder, at den kan ignoreres.

Hvis man desuden ønsker at bruge billedet som en henvisning til SSLUG's hjemmeside, skal man blot kombinere de forskellige elementer:

<p align="center">
 <a href="http://www.sslug.dk/"><img src="/billeder/tux-solskin.png"
  alt="[billede af Tux med solbriller]"></a>
</p>

1.1.4. Lister

Man kan lave unummererede (uordnede) lister som denne

Element 1
Element 2

med

<ul>
 <li>Element 1</li>
 <li>Element 2</li>
</ul>

Man kan lave nummererede (ordnede) lister som denne:

Element 1
Element 2

med

<ol>
 <li>Element 1</li>
 <li>Element 2</li>
</ol>

Der er ikke noget i vejen for at lave lister inden i lister:

Element 1
- Element 1a
- Element 1b
Element 2

med

<ul>
 <li>Element 1</li>
  <ul>
   <li>Element 1a</li>
   <li>Element 1b</li>
  </ul>
 <li>Element 2</li>
</ul>

Man skal være meget påpasselig, når man indlejrer en liste i en anden. Det er nemt at lave fejl, og ens fejl bliver ikke altid afsløret med det samme i netlæseren (en god grund til at køre sine HTML-filer gennem en syntakstjekker). Man skal altid afslutte sine elementer i den modsatte rækkefølge af den, som man startede dem i.

1.1.5. Tabeller i HTML

Det er forholdsvist enkelt at lave enkle skemaer i HTML, men det bliver hurtigt kompliceret, hvis skemaerne bliver store. Her er et 2x2 skema:

Figur 1-3. Tabel lavet i HTML

som du laver med følgende HTML-kode:

<table>
<tr>
        <td>1. celle</td>
        <td>2. celle</td>
</tr>
<tr>
        <td>3. celle</td>
        <td>4. celle</td>
</tr>
</table>

<table> og </table> omslutter hele skemaet. <tr> og </tr> omslutter den enkelte række. <td> og </td> omslutter den enkelte celle.

Der kan være et vilkårligt antal rækker og celler i et skema, men det er en god idé at sørge for, at der er lige mange celler i alle rækkerne.

Hvis du vil have en ramme om cellerne i skemaet, skal du bruge attributten border="bredde i pixels" i startmærket, <table>.

Figur 1-4. Tabel lavet i HTML

som du laver med følgende HTML-kode:

<table border="1">
<tr>
        <td>1. celle</td>
        <td>2. celle</td>
</tr>
<tr>
        <td>3. celle</td>
        <td>4. celle</td>
</tr>
</table>

Hvis du vil have overskrifter på dine rækker og kolonner, kan du bruge <th> og </th> i stedet for <td> og </td>. Du kan dog opnå stort set funktionalitet med <td> og </td>.

Figur 1-5. Tabel lavet i HTML

Dette laves med følgende HTML-kode:

<table border="1">
<tr>
        <th></th>
        <th>1. kolonne</th>
        <th>2. kolonne</th>
</tr>
<tr>
        <th>1. række</th>
        <td>1. celle</td>
        <td>2. celle</td>
</tr>
<tr>
        <th>2. række</th>
        <td>3. celle</td>
        <td>4. celle</td>
</tr>
</table>

Du kan også lave overskrifter, der spænder over flere rækker eller kolonner med attributterne colspan="antal kolonner" og rowspan="antal rækker".

Figur 1-6. Tabel lavet i HTML

Dette kan laves med følgende HTML-kode:

<table border="1">
<tr>
        <th></th>
        <th colspan="2">Kolonner</th>
</tr>

<tr>
        <th rowspan="2">Rækker</th>
        <td>1. celle</td>
        <td>2. celle</td>
</tr>

<tr>
        <td>3. celle</td>
        <td>4. celle</td>
</tr>
</table>

Bemærk, at du skal fjerne den efterfølgende kolonne og den efterfølgende række. Det er en god idé at lade rækken stå tom i din HTML-kode, så du nemmere kan overskue koden. Husk at din HTML-kode hurtig bliver meget kompliceret, efterhånden som skemaet bliver større og større. Du kan godt lade dine kolonner og rækker spænde over mere end 2 celler.

Hvis du ikke selv sørger for at bestemme bredden og højden på de enkelte celler, vil browseren selv sørge for, at skemaet bliver stort nok. Du kan selv bestemme størrelsen med attributterne width="bredde i pixel" og height="højde i pixel".

Figur 1-7. Tabel lavet i HTML

som du laver med følgende HTML-kode:

<table border="1">
<tr>
        <th></th>
        <th colspan="2">Kolonner</th>
</tr>

<tr>
        <th rowspan="2">Rækker</th>
        <td width="100" height="40">1. celle</td>
        <td width="100" height="40">2. celle</td>
</tr>

<tr>
        <td width="100" height="40">3. celle</td>
        <td width="100" height="40">4. celle</td>
</tr>
</table>

Attributterne width og height er godt nok på vej ud, men du kan ind til videre bruge dem uden problemer.

Du kan også bestemme, om teksten skal være centreret, højre- venstrestillet med attributten align="center, left eller right".

Figur 1-8. Tabel lavet i HTML

som du laver med følgende HTML-kode:

<table border="1">
<tr>
        <th></th>
        <th colspan="2">Kolonner</th>
</tr>

<tr>
        <th rowspan="2">Rækker</th>
        <td width="100" height="40" align="center">1. celle</td>
        <td width="100" height="40" align="center">2. celle</td>
</tr>

<tr>
        <td width="100" height="40" align="center">3. celle</td>
        <td width="100" height="40" align="center">4. celle</td>
</tr>
</table>

forrige	hjem	næste
Typografi		Validering af hjemmesider