Nadat we in stap 1 de basis hebben gelegd gaan we deze nu uitbreiden met de rest van de HTML.
We beginnen met het toevoegen van het zoek formulier. We gebruiken de zoekfunctie van Google, dus moeten we het doen met de HTML die we van Google krijgen. Na een paar aanpassingen komen we uit op dit:
<form action="http://google.com/custom" method="GET">
<p><label>Zoek in Modern Markup:
<input type="text" name="query"></label>
<input type="hidden" name="domains" value="modernmarkup.com">
<input type="hidden" name="sitesearch" value="modernmarkup.com">
<button type="submit">Zoek</button></p>
</form>Zoals je ziet hebben we ook het hoofdmenu aan de pagina toegevoegd. We hebben
ervoor gekozen om het menu in een lijst te doen, zoals we ook al eerder in het
hoofdstuk Lijsten hebben gedaan. Dit
omdat een menu eigenlijk een collectie
links is. Daarom is het logisch om het menu als één geheel in een lijst te
doen,
zoals uitgelegd in de paragraaf over het opmaken van lijsten. Hieronder volgt
de code die we hebben gebruikt voor het menu:
<ul>
<li id="home"><a href="/" title="Het laatste nieuws over Modern Markup.">Nieuws</a></li>
<li><a href="/html-css/" title="De Modern Markup HTML & CSS handleiding.">HTML & CSS Handleiding</a></li>
<li><a href="/over-ons/" title="Informatie over Modern Markup.">Over Ons</a></li>
<li><a href="/help-ons/" title="Hoe JIJ Modern Markup kan helpen.">Help Ons</a></li>
<li><a href="/contact/" title="Neem contact op met de makers van Modern Markup.">Contact</a></li>
</ul>Als laatste missen we nu het secundaire menu. Hiervoor gebruiken we ook een lijst, maar deze keer een definitielijst. Een definitielijst hoeft namelijk niet altijd te bestaan uit definities en de omschrijving ervan, zoals we zagen in de paragraaf van definitielijsten. Hieronder volgt de code van het secundaire menu:
<dl>
<dt><a href="/html-css/" lang="en-US"><abbr
title="HyperText Markup Language">HTML</abbr> & <abbr
title="Cascading Style Sheets">CSS</abbr> Handleiding</a></dt>
<dd><a href="/html-css/introductie/">Introductie</a></dd>
<dd><a href="/html-css/voorbereiding/">Voorbereiding</a></dd>
<dd><a href="/html-css/html-syntax/" lang="en-US">HTML Syntax</a></dd>
<dd><a href="/html-css/basis-structuur/">Basis Structuur</a></dd>
<dd><a href="/html-css/tekst-structuur/">Tekst Structuur</a></dd>
<dd><a href="/html-css/links-en-afbeeldingen/">Links en Afbeeldingen</a></dd>
<dd><a href="/html-css/css-syntax/" lang="en-US">CSS Syntax</a></dd>
<dd><a href="/html-css/css-basis/">De Basis van CSS</a></dd>
<dd><a href="/html-css/pagina-opmaken/">Pagina Opmaken</a></dd>
<dd><a href="/html-css/je-eerste-website/">Je Eerste Website</a></dd>
<dd><a href="/html-css/lijsten/">Lijsten</a></dd>
<dd><a href="/html-css/formulieren/">Formulieren</a></dd>
<dd><a href="/html-css/tabellen/">Tabellen</a></dd>
<dd><a href="/html-css/geavanceerde-website/">Een Geavanceerde Website</a></dd>
<dt><a href="/html-css/referentie/">HTML & CSS Referentie</a></dt>
<dd><a href="/html-css/referentie/elementen/">HTML elementen</a></dd>
<dd><a href="/html-css/referentie/attributen/">HTML attributen</a></dd>
<dd><a href="/html-css/referentie/eigenschappen/">CSS eigenschappen</a></dd>
</dl>
Nu de HTML code compleet is kunnen we het geheel eruit laten zien zoals op de Modern Markup website. De basis daarvoor wordt gelegt in De basis van de CSS.
Copyright © 2006 Modern Markup. Alle rechten voorbehouden.