toppbanner

Hovedemner

Kurs, studiemetode

Religion og livssyn

Kirkehistorie og konfesjonskunnskap

Etikk og filosofi

Pedagogikk

IKT

Realfag

CV og publikasjoner

Diverse

Søk i nettstedet:

Velg artikler ut fra sjanger:

V Fagartikkel, essay
A Andre artikler
U Undervisningsmateriell, forelesningsmanus
O Oversikter og tabeller
S Sitater
F Lesefrukter
K Læreboksammendrag
T Tale, preken
L Lenker
P Nettportal
D Diverse
G Grublerier og notater
Alle artikler, kronologisk
Alle artikler, alfabetisk

Mine nettsteder:

Non Aliud faglig
Semaforen jernbane
Viadukten modelljernbane

Administrativt:

Pålogging
Redigering
Red. artikkel

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
http://www.dmmh.no/~ses/basic/tronderen.jpg

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
 
 

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

Ett tilfeldig blant 12 av mine antatt bedre bilder jeg har tatt selv:
menyadm/pix1/galleri/e1217.jpg

I dag 90 treff på nonaliud, og 2149266 totalt siden 20.04.2004 08:25. Dagsgjennomsnitt: 378 treff ·

© Svein Sando, førsteamanuensis (associate professor) DMMH  - tlf. 73 80 52 26 - fax: 73 80 52 52 - e-post: seserstatt dette bildet med tegnet krøllalfadmmh.no               
Startside · Start page (Eng.) · Statisk meny · Visningsmåter: Standard · Uten meny: Arial · Times · Times luftig · Stor ·    

Innholdet på denne nettsiden er underlagt Åndsverklovens beskyttelse og er opphavsmannens eiendom. All offentlig gjengivelse av innholdet, helt eller delvis, kan kun skje etter forutgående forespørsel til opphavsmannen. Kortere sitater i artikler, studentoppgaver o.l. kan imidlertid skje dersom kilden oppgis. Denne nettsiden kan føres opp i referanselista (APA-stil) slik:

Sando, S. (2000). Enkle html-koder. Dronning Mauds Minne Høgskole. Lastet ned 12.11.2019 fra http://www2.dmmh.no/~ses/index.php?vis=85&nid=1


Valid HTML 4.01!