HyperText Markup Language for dummies

Ga meteen naar: Altijd, Koppen, Regels, Nadruk, Aangepast, Tekens, Plaatjes, Links, Lijstjes, Tabellen, Kunst, Kleuren, Scripts, Styles, Etc.

Wanneer gebruik je wat? Voorbeeld van de HTML-code Hoe het er dan uit komt te zien
Altijd Dit hoort minimaal op elke HTML-pagina te staan. <html><head><title>De naam</title>
      </head>
      <body>De inhoud.
      </body>
</html>
De inhoud.
Koppen Als je een kop ergens boven wilt, dan kun je kiezen uit zes groottes. <h1>De grootste</h1>

De grootste

<h2>Een grotere</h2>

Een grotere

<h3>Een grote</h3>

Een grote

<h4>Een kleine</h4>

Een kleine

<h5>Een kleinere</h5>
Een kleinere
<h6>De kleinste</h6>
De kleinste
Regels Als je een nieuwe regel wilt, dan gaat dat niet vanzelf. Spaties     <!--opmerkingen--> en
nieuwe regels verdwijnen zomaar.
Behalve als je een<br>hard regeleinde gebruikt.
<p>Of als je er een echte alinea van maakt.</p>
Of als je ergens een<hr>streep onder zet.
Spaties en nieuwe regels verdwijnen zomaar. Behalve als je een
hard regeleinde gebruikt.

Of als je er een echte alinea van maakt.

Of als je ergens een
streep onder zet.
Nadruk Als je een woord of regel extra wilt laten opvallen. Tekst in <strong>vette</strong> <em>schuine</em> of <u>onderstreepte</u> letters doe je zo. Tekst in vette schuine of onderstreepte letters doe je zo.
Aangepast Tekst kan ook op andere manieren worden veranderd. Bijvoorbeeld: <big>een <big>beetje <big>grotere</big></big></big> of <small>kleinere</small> letters en <sup>super</sup>script of <sub>sub</sub>script. Bijvoorbeeld: een beetje grotere of kleinere letters en superscript of subscript.
Tekens Accenten en speciale tekens zijn ook mogelijk. &amp;, &lt;, &gt; en &quot; &, <, >, en "
&euro; 9,95 € 9,95
&plusmn; 10% ± 10%
-5&deg; C -5° C
&frac14; + ( 3 &times; 2&frac12; ) - ( 12 &divide; 2 ) = 1&frac34; ¼ + ( 3 × 2½ ) - ( 12 ÷ 2 ) = 1¾
&larr;, &uarr;, &rarr; en &darr; ←, ↑, → en ↓
&spades;A, <font color="#FF0000">&diams;5</font>, &clubs;7 en <font color="#FF0000">&hearts;V</font> ♠A, ♦5, ♣7 en ♥V
&bull; en &hellip; • en …
brede&emsp;spatie, smalle&ensp;spatie, harde&nbsp;spatie, afbreek&shy;streepje, smal&ndash;streepje en breed&mdash;streepje brede spatie, smalle spatie, harde spatie, afbreek­streepje, smal–streepje en breed—streepje
&copy; Hans Marks, 2003 © Hans Marks, 2003
(Hoofd)letters met accenten &Agrave;, &Aacute;, &Acirc;, &Atilde;, &Auml;, &Aring;, &Ccedil;, &Egrave;, &Eacute;, &Ecirc;, &Euml;, &Igrave;, &Iacute;, &Icirc;, &Iuml;, &Ntilde;, &Ograve;, &Oacute;, &Ocirc;, &Otilde;, &Ouml;, &Oslash;, &Ugrave;, &Uacute;, &Ucirc;, &Uuml;, &Yacute; en &agrave;, &aacute;, &acirc;, &atilde;, &auml;, &aring;, &ccedil;, &egrave;, &eacute;, &ecirc;, &euml;, &igrave;, &iacute;, &icirc;, &iuml;, &ntilde;, &ograve;, &oacute;, &ocirc;, &otilde;, &ouml;, &oslash;, &ugrave;, &uacute;, &ucirc;, &uuml;, &yacute; (Hoofd)letters met accenten À, Á, Â, Ã, Ä, Å, Ç, È, É, Ê, Ë, Ì, Í, Î, Ï, Ñ, Ò, Ó, Ô, Õ, Ö, Ø, Ù, Ú, Û, Ü, Ý en à, á, â, ã, ä, å, ç, è, é, ê, ë, ì, í, î, ï, ñ, ò, ó, ô, õ, ö, ø, ù, ú, û, ü, ý
Griekse (hoofd)letters &Alpha;, &Beta;, &Gamma; tot en met &Omega; en &alpha;, &beta;, &gamma; tot en met &omega; Griekse (hoofd)letters Α, Β, Γ tot en met Ω en α, β, γ tot en met ω
Plaatjes Als je het mooi wilt maken. <img src="surfer.gif" align="right" alt="Surfer!">
Surf 's up dudes..!
Surfer! Surf 's up dudes..!
Links Wat is nou een web-pagina zonder links? Niets! Klik <a href="andere.html">hier</a> om naar een andere pagina te gaan, Klik hier om naar een andere pagina te gaan,
klik <a href="#andere"><img src="hand.gif" border="0" alt="hier"></a> om naar een andere plek op deze pagina te gaan klik hier om naar een andere plek op deze pagina te gaan
en klik <a href="mailto:imac@xs4all.nl">hier</a> om mij een E-Mailtje te sturen. en klik hier om mij een E-Mailtje te sturen.
Lijstjes Voor een opsomming met of zonder automatische nummering. <ol><li>Aap</li>
    <li>Noot</li>
    <li>Mies</li>
</ol>
  1. Aap
  2. Noot
  3. Mies
<ul><li>Wim</li>
    <li>Zus</li>
    <li>Jet</li>
</ul>
  • Wim
  • Zus
  • Jet
Tabellen Wil je alles keurig op z'n eigen plek zetten? Gebruik dan vooral een tabel. <table><tr><th>Aap</th>
           <th>Noot</th>
           <th>Mies</th>
           <th>Wim</th>
           <th>Zus</th>
           <th>Jet</th>
       </tr>
       <tr><td>Teun</td>
           <td rowspan="2">
               Vuur Does
           </td>
           <td>Gijs</td>
           <td>Lam</td>
           <td>Kees</td>
           <td>Bok</td>
       </tr>
       <tr><td>Weide</td>
           <td>Hok</td>
           <td>Duif</td>
           <td colspan="2">
               Schapen
           </td>
       </tr>
</table>
Aap Noot Mies Wim Zus Jet
Teun Vuur Does Gijs Lam Kees Bok
Weide Hok Duif Schapen
Kunst Als het belangrijk is dat alle letters even breed zijn en dat spaties en regels bewaard blijven. <pre>

    ('<           |\      _,,,---,,_
   ,',)           /,`.-'`'    -.  ;-;;,_
  ''<<           |,4-  ) )-,_..;\ (  `'-'
-----""-------  '---''(_/--'  `-'\_)  fL  ---
</pre>

    ('<           |\      _,,,---,,_
   ,',)           /,`.-'`'    -.  ;-;;,_
  ''<<           |,4-  ) )-,_..;\ (  `'-'
-----""-------  '---''(_/--'  `-'\_)  fL  ---
Kleuren Als je het vrolijk wilt maken. <font color="#FF7F7F">licht rood</font>
<font color="#FFFF7F">licht geel</font>
<font color="#7FFF7F">licht groen</font>
<font color="#7FFFFF">licht cyaan</font>
<font color="#7F7FFF">licht blauw</font>
<font color="#FF7FFF">licht magenta</font>
licht rood licht geel licht groen licht cyaan licht blauw licht magenta
<font color="#FF007F">rose</font>
<font color="#FF0000">rood</font>
<font color="#FF7F00">oranje</font>
<font color="#FFFF00">geel</font>
<font color="#7FFF00">appelgroen</font>
<font color="#00FF00">groen</font>
<font color="#00FF7F">zeegroen</font>
<font color="#00FFFF">cyaan</font>
<font color="#007FFF">staalblauw</font>
<font color="#0000FF">blauw</font>
<font color="#7F00FF">paars</font>
<font color="#FF00FF">magenta</font>
rose rood oranje geel appelgroen groen zeegroen cyaan staalblauw blauw paars magenta
<font color="#7F0000">donker rood</font>
<font color="#7F7F00">donker geel</font>
<font color="#007F00">donker groen</font>
<font color="#007F7F">donker cyaan</font>
<font color="#00007F">donker blauw</font>
<font color="#7F007F">donker magenta</font>
donker rood donker geel donker groen donker cyaan donker blauw donker magenta
<font color="#FFFFFF">wit</font>
<font color="#BFBFBF">licht grijs</font>
<font color="#7F7F7F">grijs</font>
<font color="#3F3F3F">donker grijs</font>
<font color="#000000">zwart</font>
wit licht grijs grijs donker grijs zwart
<table bgcolor="#FF0000" border="8" bordercolor="#0000FF">
       <tr><td><font color="#FFFFFF">
                     rood, wit &amp; blauw
               </font>
           </td>
       </tr>
</table>
rood, wit & blauw
De andere plek op deze pagina. Klik <a name="andere" href="#link">hier</a> om weer terug te gaan. Klik hier om weer terug te gaan.
Scripts Als je een klein beetje kunt programmeren, dan kun je jezelf met JavaScript vaak een hoop dom tikwerk besparen. <p>Tafel van zeven...</p>
<p><script type="text/javascript">
   <!--
   function tafel(n){
            for(var i=1;i<=10;i++){
               document.write(i+'&times;'+n+'='+(i*n));
               if(i<10){
                  document.write(', ');
               }
            }
   }
   tafel(7);
   
//-->

   </script>
</p>
<p>... en van honderddrieentwintig en een kwart</p>
<p><script type="text/javascript">
   <!--
   tafel(123.25);
   
//-->

   </script>
</p>

Tafel van zeven...

... en van honderddrieentwintig en een kwart

Deze pagina is bijgewerkt op
<script type="text/javascript">
<!--
var maand='januari,februari,maart,april,'
         +'mei,juni,juli,augustus,'
         +'september,oktober,november,december';
var modified=new Date(document.lastModified);
document.write(modified.getDate()+' '
              +maand.split(',')[modified.getMonth()]+' '
              +modified.getFullYear()
              );
//-->

</script>.
Deze pagina is bijgewerkt op .
<script type="text/javascript">
<!--
var tijd=new Date();
var dagdeel;
if(tijd.getHours()<6){
  dagdeel='nacht';
}
else{
  if(tijd.getHours()<12){
    dagdeel='morgen';
  }
  else{
    if(tijd.getHours()<18){
      dagdeel='middag';
    }
    else{
      dagdeel='navond';
    }
  }
}
document.write('Goede'+dagdeel+'!');
//-->

</script>
<script type="text/javascript">
<!--
function element(id){
         if(document.getElementById){
           return document.getElementById(id);
         }
         else{
           return document.all[id];
         }
}
function plaatje(id,src){
         element(id).src=src;
}
//-->

</script>
Beweeg de muis over dit plaatje...<br>
<img id="iig" src="iig2.gif" alt="Wie is wat?" onmouseover="plaatje(this.id,'iig.gif');" onmouseout="plaatje(this.id,'iig2.gif');">
Beweeg de muis over dit plaatje...
Wie is wat?
Styles Als je pagina's echt mooi wilt opmaken, kun je het beste Cascading Style Sheets gebruiken. <style type="text/css">
.papier{
   background-color:#FFFF3F;
   font-family:"Brush Script MT",cursive;
   font-size:16pt;
   padding:12px;
   border-style:solid;
   border-width:1;
   margin-top:-8px;
   margin-left:-8px;
}
.schaduw{
   position:absolute;
   top:360px;
   left:480px;
   width:240px;
   z-order:1;
   background-color:#BFBFBF;
   padding:4px;
}
</style>
<div class="schaduw">
     <div class="papier">
          Een geel briefje ergens op plakken?
          Met <a href="#style">CSS</a> kan het...
     </div>
</div>
Maar pas een beetje op!
Want nog niet alle browsers zijn zo modern dat het altijd meteen helemaal goed gaat.
Een geel briefje ergens op plakken? Met CSS kan het...
Maar pas een beetje op! Want nog niet alle browsers zijn zo modern dat het altijd meteen helemaal goed gaat.
Etc. Wil je alles weten? Dan vind je hier het laatste woord.

De standaard

Controleer je eigen pagina's!