Dokumentstruktur

Enkleste versjon(skall)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
  <TITLE>Tittel på dokumentet</TITLE>
  <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>

<BODY BGCOLOR="#ffffff" TEXT="#000000">
  
</BODY>

</HTML>

Den merkelige første linjen <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> brukes til å forklare hva slags dokument man har laget, og hvilken versjon av html man bruker.
Linjen <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> brukes til å forklare hvilket tegnsett som er brukt. iso-8859-1 er tegnsettet vi bruker.
Alt som står i skallet må alltid være med, det man endrer er tittel og farger på tekst og bakgrunn.

Koder

En webside er et tekstdokument som er bygget opp av <TAG>-er. En <TAG> brukes tīl å beskrive utseendet på dokumentet og teksten i det.
Eks. på <TAG>: <TABLE> <- tabell

Tekst - utseende og struktur

Overskrifter

<h1>Stor tekst </h1>

pil_ned

Stor tekst

 <h2>Mindre tekst</h2>

pil_ned

Mindre tekst

 osv <h6>Bitteliten tekst </h6>

pil

Bitteliten tekst

Utseende

<b>Tykk tekst </b> pil Tykk tekst
<i>Kursiv tekst </i> pil Kursiv tekst
<u>Understreket tekst </u> pil Understreket tekst
<s>Overstreket tekst </s> pil Overstreket tekst
<sup>Hevet tekst </sup> pil Hevet tekst
<sub>Senket tekst </sub> pil Senket tekst

<FONT>

<font size=7>Font størrelse 7</font> pil Font størrelse 7
<font color="#00ff00">Font farge</font> pil Font farge
<font color="Green">Font farge</font> pil Font farge
<font face="Courier">Font type</font> pil Font type

Spesialtegn

Æ = &AElig;
æ = &aelig;
Ø = &Oslash;
ø = &oslash;
Å = &Aring;
å = &aring;

> = &gt;
< = &lt;
" = &quot;
& = &amp;

linjeskift = <br>
avsnitt = <p>tekst og kode som skal i kolonnen</p>
mellomrom(SPACE) = &nbsp;

Lister

Usortert liste

a) 
<ul>
  <li>Gul
  <li>Grønn
</ul>
pil
  • Gul
  • Grønn
b) 
<ul type="#">
  <li>Gul
  <li>Grønn
</ul>
der # kan være disc(default), circle eller square 		pil
  • Gul
  • Grønn
  • Gul
  • Grønn
  • Gul
  • Grønn

Sortert liste

a) 
<ol>
  <li>Gul
  <li>Grønn
</ol>
pil
  1. Gul
  2. Grønn
b) 
<ol type="#">
  <li>Gul
  <li>Grønn
</ol>
der # kan være A, a, I, i eller 1(default) 		pil
  1. Gul
  2. Grønn
  1. Gul
  2. Grønn
  1. Gul
  2. Grønn
  1. Gul
  2. Grønn
  1. Gul
  2. Grønn
c) 
<ol start=5 type=i>
  <li>Gul
  <li>Grønn
</ol>
pil
  1. Gul
  2. Grønn

Definisjonsliste

<dl>
  <dt>Gul
  <dd>er min farge
  <dt>Blå
  <dd>er som himmelen
</dl>
pil
Gul
er min farge
Blå
er som himmelen

Tabeller

a) 
<table border=1>
<tr>
  <th>Navn</th>
  <th>Adresse</th>
</tr>
<tr>
  <td>Jens Olsen</td>
  <td>Blomveien 103</td>
</tr>
<tr>
  <td>Eli og Terje</td>
  <td>Portveien 2</td>
</tr>
</table>
pil
Navn Adresse
Jens Olsen Blomveien 103
Eli og Terje Portveien 2

b) 
<table border=1>
<tr>
  <td colspan=4>Årstid</td>
</tr>
<tr>
  <td>Vår</td>
  <td>Sommer</td>
  <td>Høst</td>
  <td>Vinter</td>
</tr>
</table>
pil
Årstid
Vår Sommer Høst Vinter

c) 
<table border=1>
<tr>
  <th rowspan=4>Årstid</th>
  <td>Vår</td>
</tr>
<tr>
  <td>Sommer</td>
</tr>
<tr>
  <td>Høst</td>
</tr>
<tr>
  <td>Vinter</td>
</tr>
</table>
pil
Årstid Vår
Sommer
Høst
Vinter

d) 
<table border=1 cellspacing=10>
<tr>
  <th colspan=4>Årstid</th>
</tr>
<tr>
  <td>Vår</td>
  <td>Sommer</td>
  <td>Høst</td>
  <td>Vinter</td>
</tr>
</table>
pil
Årstid
Vår Sommer Høst Vinter

e) 
<table border=1 cellpadding=10>
<tr>
  <th colspan=4>Årstid</th>
</tr>
<tr>
  <td>Vår</td>
  <td>Sommer</td>
  <td>Høst</td>
  <td>Vinter</td>
</tr>
</table>
pil
Årstid
Vår Sommer Høst Vinter

Bilder

<img src="bilde" alt="bildenavn eller kommentar">

Eksempler

a)
<img src="bilder/sommer.jpg" alt="sommer"> 		pil sommer
b)
<img src="http://www.ia.hiof.no/~elinkaan/GrIT2002/HTMLogCSS/bilder/ball.jpg" alt="ball">
En ball! 		pil ballEn ball!
c)
<img src="bilder/strek.jpg" align="left" vspace=10 hspace=15 alt="strek">
Dette er <br> en test <br> Det er det! 		pil strek Dette er
en test
Det er det!
d)
<img src="bilder/strek.jpg" align="left" alt="strek">
Dette er <br> en test <br clear="all"> Det er det! 		pil strek Dette er
en test
Det er det!

Adresser

<a href="url">Navn på url</a>

Eksempel:
<a href="http://www.vg.no">VG</a><br> = VG
<a href="lokal_side.html">Lokal side jeg har laget</a> = Lokal side jeg har laget

<a href="#navn">Annet sted på siden</a> = Annet sted på siden
<a name="navn">Det andre stedet</a> = Det andre stedet

Eksempel:
<a href="#avsnitt2">Andre avsnitt</a> = Flytt til andre avsnitt
Tekst i avsnitt 1
eller kanskje i innledning eller innholdsfortegnelse
<a name="avsnitt2">Andre avsnitt</a> = Andre avsnitt

Kommentarer og META-informasjon

kommentar= <!-- utkommentert kode eller tekst -->

<META>

Brukes for å gi informasjon om et html-dokument.
Ligger inne i <HEAD>-tagen.

Attributter: name, content, http-equiv, scheme
name: forfatter, publikasjonsdato osv.
http-equiv: innhold kan bli prosessert hvis det er av en kjent type, f.eks. charset content: for å legge inn verdier i name eller http-equiv

Eksempler

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="reply-to" content="billys@soft.no">

<meta name="creation-date" content="12-04-2002">
<meta name="last-update" content="12-06-2002">
<meta name="author" content="Ole Olsen">

<meta name="description" content="text">,
det text kan være f.eks: document, catalog, bibliography eller news release.

KEYWORDS brukes av søkemotorer så man kan fortelle hva som er viktig i dokumentet sitt.
NB! Hvis et stikkord skrives opp mer enn 7 ganger i samme meta name-tag ignoreres hele tagen.
<meta name="KEYWORDS" content="sol sommer ferie">

[Tilbake]