Webdesign 1: xHTML basics

Wat is xHTML ?

HTML is een afkorting voor Hypertext Markup Language. Zoals de term al zegt is het een opmaak taal, het vertelt je browser door middel van html tags hoe de pagina moet worden weergegeven op het scherm.
HTML is geen programmeertaal zals vaak gedacht wordt. De tags kun je vergelijken met bouwstenen uit een lego-set. Er is een bepaald aantal stenen met een vooraf bepaalde vorm die je naar eigen smaak samen kunt voegen om zo een bouwwerk, in dit geval een webpagina te maken.

In de meeste eenvoudige vorm kan HTML gebruikt worden om tekst in paragrafen onder te verdelen met koppen en stukken tekst die nadruk moeten krijgen. Essentieel is dat HTML hypertekst mogelijk maakt, waardoor in een document verwijzingen kunnen worden ingebouwd naar andere documenten, dit zijn hyperlinks. xHTML (eXtensible Hypertext Markup Language) is een taal die de functionaliteit heeft van HTML, maar een striktere syntaxis.

Daarom zullen we onze webpagina's telkens opbouwen volgens de Strict DTD en valideren (shift + F6).

Lijsten

Lijsten worden onder andere gebruikt voor opsommingen, maar de verschillende navigatie-elementen zullen we ook in een lijst plaatsen (SEO). Er bestaan 3 soorten lijsten. Elke lijst wordt opgebouwd uit verschillende listitems (<li>).

Tabellen

Tabellen worden gebruikt om data te structureren (en dus niet voor de layout!).
Een tabel bestaat uit verschillende rijen of table rows (<tr>) en elke rij is opgebouwd uit verschillende cellen of table data (<td>).

eenvoudige tabelsamenvoegen van cellen
opdeling van een tabeluitgebreide tabel

Commentaar toevoegen

We hebben ook de mogelijkheid om commentaar toe te voegen. Deze commentaarregels zullen in de browser niet getoond worden. Commentaarregels kunnen helpen om de code te verduidelijken.
<!-- dit is commentaar -->

Help en referentiemateriaal

Help en referentiemateriaal In het panel Result, op het tabblad Reference kan je referenties van de verschillende tags in Dreamweaver terugvinden. Wil je meer uitleg over het functioneren van Dreamweaver zelf, dan kan je terecht in de help (F1).

Via attributen kunnen we extra informatie aan de tags meegeven. Attributen krijgen een waarde mee die tussen dubbel quotes geschreven wordt. Via het attribuut href kunnen we de bestemming van de hyperlinks bepalen.

Linken naar een andere webpagina

Via de tag a en basisattribuut href kunnen we een hyperlink leggen naar een andere webpagina. Gebruik hiervoor volgende code.
<a href="http://www.howest.be/pih" >pih site </a>: pih site
<a href="ftp://www.howest.be/pih">ftp pih site</a>: ftp pih site

Linken naar een interne webpagina

Staat het bestand in dezelfde directory als het huidige document, dan hoef je slechts de naam van het bestand op te nemen:
<a href="Oefening2-stap26.htm">index</a>: index

Staat het bestand in een subdirectory van de huidige directory staat, dan geef je eerst de namen van de achtereenvolgende subdirectories met achter elke naam een slash en daarna de naam van het bestand:
<a href="lijsten/orderedList.htm">geordende lijst</a>: geordende lijst

Bevindt het bestand zich in een hogere directory dan de huidige, dan neem je voor elke stap omhoog een slash voorafgegaan door twee punten op:
<a href="../index.htm">test</a>

Linken naar interne bookmarks

We kunnen ook een link leggen in onze pagina zelf, dit zijn bookmarks. Hiervoor moeten we een id of een identiteit meegeven aan de verschillende onderdelen. Op die manier kunnen we via een bookmark linken naar die bepaalde onderdelen.

Om bijvoorbeeld een header een id mee te geven gebruiken we volgende code.
<h2 id="titelHyperlinks">Hyperlinks</h2>

Via een bookmark kunnen we naar dit onderdeel springen:
<a href="titelHyperlinks">Spring naar de titel Hyperlinks</a>: Spring naar de titel Hyperlinks

We kunnen ook verwijzen naar bookmarks op andere webpagina's:
<a href="tabellen/eenvoudigeTabel.htm#rijtitels">Spring naar rijtitels van de pagina eenvoudige tabel<a>: Spring naar rijtitels van de pagina eenvoudige tabel

Mailen naar een emailadres

We kunnen ook een mail versturen. Gebruik hiervoor volgende code.
<a href="mailto:voornaam.naam@howest.be">Mail naar Voornaam Naam</a>: Mail naar Joris De Meyer

Tooltip

We kunnen ook een tooltip toevoegen. Wanneer je met de cursor over het woord of de woorden gaat zal de tooltip tevoorschijn komen. We gebruiken hiervoor terug een attribuut van de tag a, namelijk 'title'.
<a title="dit is een tooltip">tooltip</a>: tooltip

Images

dummy

Oefeningen

Opdeling Tabel