HTML cursus basis
Deze basis HTML cursus bestaat uit een verzameling tags die
beschrijven hoe de layout van een pagina eruit moet zien.
Deze pagina geeft een overzicht van de eenvoudige tags waarmee je een eerste pagina kunt maken. Bewaar frames en formulieren voor later. De meeste tags hebben veel meer opties dan hier worden weergegeven. De set die hier staat is voor de beginner geschikt. Als je dan deze basis onder de knie hebt, is het voornamelijk een kwestie van spieken en afkijken om meer te leren.
Een tag is bijna altijd een paar:
<tag>tekst</tag>
Tussen de tags ( dus op de plaats waar boven tekst staat plaats je dan de gewenste tekst. Die tekst kan ook weer andere tags bevatten:
<font color=red>Rode tekst die voor een deel <b>vet</b> is</font>
Een tag kan extra velden hebben:
<font color=red>tekst</font>
<font size=2>tekst</font>
Als een tag meerdere extra velden gebruikt worden die gecombineerd: Dus:
<body color=red bgcolor=green>
en niet
<body color=red><body bgcolor=green>
De Basis
<html></html>
Definieert het html document
<head></head>
Definieert de kop van het html document, de title en andere informatie die niet weergegeven wordt op de pagina zelf.
<title></title>
Titel van het document. Komt op de bovenste rand van de browser te staan
<meta>
Zie Website Meta Tags over het gebruik van deze tags
<body></body>
Definieert het zichtbare deel van de pagina
<body bgcolor=kleur>
Achtergrond kleur van een pagina
<body text=kleur>
Geeft de kleur van de tekst
<body link=kleur>
Geeft de kleur van een link
<body vlink=kleur>
Geeft de kleur van een link die al bezocht is.
<body alink=kleur>
Geeft de kleur van een link op het moment
dat deze geklikt wordt.
De <html>, <head> en <body> tags staan altijd in een vaste volgorde in
een document:
<html>
<head>
<title>titel</title>
<meta>
</head>
<body>
Je pagina
</body>
</html>
Tags
<pre>tekst</pre>
Geeft aan dat tekst al een layout heeft. De tekst wordt in een andere stijl weergegeven, en nieuwe regels worden weergegeven zoals ze in de tekst voorkomen. In gewoon html zal
Regel 1
Regel 2
Leiden tot: Regel 1 Regel 2 Als er <PRE></PRE> omheen staat zal deze tekst op twee aparte regels weergegeven worden:
Regel 1 Regel 2
<hl>tekst</hl>
Tekst wordt weergegeven in de stijl heading 1, dit is de grootste kop.
<h6>tekst</h6>
De kleinste kop.
<b>tekst</b>
Geeft tekst vet weer
<i>tekst</i>
Geeft tekst scheef weer (italics)
<tt>tekst</tt>
Tekst
in een
typemachine achtig
lettertype.
<cite>tekst</cite>
Citaat stijl, meestal italic
<em>tekst</em>
Benadrukte tekst, zal meestal lijden tot vette tekst
<strong>tekst</strong>
Benadrukte tekst, zal meestal lijden tot vette tekst
<font size=#>tekst</font>
Hiermee kun je een lettertype groter weergeven. #=1 to 7
<font color=kleur></font>
Geeft de kleur van een lettertype.
Links
<a href="URL">tekst</a>
Maakt een hyperlink van tekst
<a href="EMAIL"></a>
Een email link, als de gebruiker hierop klikt wordt een email programma gestart. Je kunt ook een onderwerp meegeven <a href="EMAIL?subject=onderwerp"></a>
<a name="NAME"></a>
Creëert een bookmark op een pagina
<a href="#NAME">tekst</a>
Link naar een bookmark op deze pagina (zie de URL hierboven)
<a href="URL#NAME">tekst</a>
Link naar een bookmark op een andere pagina
Layout
<p>tekst</p>
Paragraaf
<p align=?>tekst</p>
Uitlijnen van een paragraaf: left,right of center
<br>
Begin een nieuwe regel
<blockquote>tekst</blockquote>
Tekst die link en recht ingesprongen is.
<dl></dl>
Een definitie lijst
<dt>
Een definitie term
<dd>
Een definitie
<ol></ol>
Een lijst waarbij de elementen genummerd zijn
<ul></ul>
Een lijst waarbij de element een bullet hebben
<li></li>
Elementen in een lijst, met nummer of bullet
Voorbeelden lijsten:
<dl>
<dt>term 1</dt>
<dd>definitie 1</dd>
<dt>term 2</dt>
<dd>definitie 2</dd>
</dl>
<ol>
<li>element 1</li>
<li>element 2</li>
</ol>
<ul>
<li>element a</li>
<li>element b</li>
</ul>
<hr>
Een horizontale lijn. <hr size=#> Hoogte van de lijn <hr width=#> Breedte van de lijn, kan absoluut ( 60px voor 60 pixels) of relatief (50% voor de halve pagina) <hr noshade> Lijn zonder schadow <center>tekst</center> Centreer de tekst.
Grafisch
<img src="URL">
Voeg een plaatje toe
<img src="name" align=?>
Uitlijnen van het plaatje: left, right, center; bottom, top, middle
<img src="name" border=#>
Geeft aan of er een rand om het plaatje moet, 0 (nul) is geen rand. Dit zie je met name als het plaatje in een href staat:
<A HREF=URL><IMG SRC=URL2></a>
Tabelen
<table></table>
Maak een tabel
<tr></tr>
Een regel in een tabel
<td></td>
Een cell in een tabel
<th></th>
Een header-cell, vette tekst en gecentreerd
<table border=#>
Geeft de dikte van de randen in een cell
<table cellspacing=#>
Geeft aan hoeveel ruimte er tussen de cellen moet zijn
<table cellpadding=#>
Geeft aan hoeveel ruimte er moet zijn tussen de rand van een cell en de inhoud van een cell
<table width=# or %>
De breedte van een cell in pixels of relatief
<tr align=?> or <td align=?>
Geeft het uitlijnen binnen een cell in horizontale richting: left, right of center
<tr valign=?> or <td valign=?>
Verticaal uitlijnen (top, middle, of bottom)
<td colspan=#>
Geeft aan of een cell meerdere kolommen breed moet zijn
<td rowspan=#>
Geeft aan of een cell meerdere rijen hoog moet zijn
<td nowrap>
Voorkomt dat lange regels automatisch afgebroken worden.
Tabel voorbeeld:
<table border="1" width="100%">
<tr>
<th>Header Cell</th>
<th align="left">Header Cell align=left</th>
<th align="right">Header Cell align=right</th>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td rowspan="2">Rowspan=2 valign=middle</td>
</tr>
<tr>
<td colspan="2">Colspan=2</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
URL
Een URL (of URI of Link) geeft een verbinding tussen pagina's of wordt gebruikt om een plaatje op een pagina weer te geven.
- pagina2.html – deze link is relatief ten op zichte van de locatie van de huidige pagina
- /index.html – deze link is relatief ten op zichte van het domein
- http://tropischetuin.pagina.nl – Link naar een andere site
Gegeven de pagina http://www.brambring.nl/directory/pagina.html , met de URL’s zoals die hierboven staan moet pagina2.html staan in http://www.brambring.nl/directory/pagina2.html , en index.html in http://www.brambring.nl/index.html .