Enkle html-koder

Utseende på teksten på internettsider ordnes med såkalt html-kode. For å få til de helt grunnleggende ting, trenger man egentlig bare lære seg et fåtall koder. De vil bli gjennomgått her.

Koden består av såkalte "tags". En tag sarter med <og slutter alltid med >. Ettersom hva som står inne i < > gjør koden forskjellige ting med den som følger etter tagen. Når man skal avslutte det starttagen gjør, setter man inn en sluttag som ligner på starttagen, bare at den har / som første tegn i tagen.

La oss ta et eksempel samtidig som vi lærer en tag. Tagen for stor overskrift er <h1> (heading 1). Den av sluttes med </h1>.
Det finnes overskrifter i forskjellige størrelser. Jo større tall man har bak "h"-en, jo mindre blir overskriften.:
<h1>Kjempestor overskrift</h1> blir:

Kjempestor overskrift

<h2>Litt mindre overskrift</h2>blir:

Litt mindre overskrift

<h3>Enda litt mindre overskrift</h3> blir:

Enda litt mindre overskrift

Sluttegnet for overskrift, fx </h1>, med fører alltid at neste tekst kommer på ny linje med luft foran. Dette kan man få til hvor man vil også. Da setter man inn avsnittstragen som ser slik ut: <p> (engelsk: "paragraph")

Hvis man bare vil ha linjeskfit uten luft foran, setter man inn <br> (engelsk: "break")

Understrekning: <u>Denne teksten blir understreket</u>

Fet skrift: <b>Dette teksten blir fet</b>

Kursiv: <i>Denne teksten blir skråstilt</i>

Klikkbare lenker til andre internettsider lager man med tagen <a href="nettadressen">tekst som skal være klikkbar</a>. La oss ta et eksempel:
<a href="http://www.aftenposten.no">Aftenposten</a> blir til:
Aftenposten

Bilder settes inn med tagen <img src="nettadressen til billedfilen">. Denne tagen har altså ingen sluttag. La oss igjen ta et konkret eksempel:
<img src="http://www.dmmh.no/~ses/basic/tronderen.jpg"> gir

Kuleliste består av to sett tager der den ene definerer selve listen <ul> ... </ul>, og den andre enkeltlinjene <li> ...</li>:

<UL>
<LI>Kule 1</LI>
<LI>Kule 2</LI>
</UL>

Ovenstående kode gir:

• Kule 1
• Kule 2

Automatisk nummerert liste lages tilsvarende med  <ol> ... </ol> som listedefinisjon;  <li> ...</li> for enkeltlinjer som over.

TIl slutt litt om tabeller. Her er det snakk om tre typer tagpar som skal flettes i hverandre på en riktig måte. Rekkefølgen er pinlig nøyaktig, ellers blir det bare ball av det, eller teksten framstår som vanlig tekst uten særskilt tabellformatering.
Ytterst setter man et tagpar som definerer selve tabellen: <table> .... </table>
Dernest et tagpar som definerer en linje i tabellen: <tr> ...</tr> (engelsk: table record)
Så et tagpar for hver kolonne i denne linjen: <td>celleinnholdet</td> (engelsk: table data).
Eksempel:

<table>
<tr>
<td>celle 1</td><td>celle 2</td>
</tr>
<tr>
<td>celle 1 i linje 2</td><td>celle 2 i linje 2</td>
</tr>
</table>

gir
 
 

Man ser ikke at dette er en tabell annet enn ved at innholdet i kolonne 2 er plassert rett under hverandre. Slik koden er lagtet her, i sin helt enkle form, er det ikke angitt at tabellopprutingen skal synes. Det kan man få til ved å legge inn litt tilleggsinformasjon i tabelldefinisjonen, nemlig <table border="1">. Da blir tabellen slik:
 

Det finnes mange andre ting som kan legges inn i tabelldefinisjonen, men det fører det alt for langt å ta opp her. Nærmere interesserte i dette og andre finesser, kan lese i noe av de nedenstående - hvis engelsk ikke er noe hinder for deg.

Videre lesing om html-koding

w3-organisasjonens egen tutioral
More advanced features

Svein Sando, 29.5.00
 

Denne artikkelen er vist 10119 ganger