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:
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
celle 1 |
celle 2 |
celle 1 i linje 2 |
celle 2 i linje 2 |
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:
celle 1 |
celle 2 |
celle 1 i linje 2 |
celle 2 i linje 2 |
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 |