HTML5 en Webdesign

Werkwijzer 3, afbeeldingen

Op bladzijde 3.40 staat een voorbeeld van het opnemen van een afbeelding op een pagina. Het image-element  <img>  heeft geen sluittag, maar wel een vijftal attributen, waarvan er twee verplicht zijn:

In volgend voorbeeld kun je spelen met de breedte, hoogte en de tooltip.
Als je maar één van de attributen width en height opgeeft, wordt de afbeelding automatisch geschaald.
Een afbeelding kun je ook gebruiken als een hyperlink. Je moet deze dan nesten tussen de tags <a href="..."> en </a>, bijvoorbeeld:
<a href="http://www.google.nl/images?q=huis">
  <img src="huis1.gif" alt="Het huis van Roger." title="Dit is mijn 
  huis" width="150" height="188">
</a>

Werkwijzer 3, afbeeldingen / "clickable maps"

Maar ook kun je delen van een afbeelding 'aanklikbaar' maken, je gebruikt het attribuut usemap.
Elders op de pagina zet je in het map-element tussen <map> en </map>  een overzicht met coördinaten:

<img src="huis1.gif" alt="Het huis van Roger." title="Dit is mijn 
huis" width="150" height="188" usemap="#map_van_het_huisje">

<map name="map_van_het_huisje">
   <area shape="rect" coords="0,70,150,110" alt="Dak" title="Dak" 
     href="http://www.google.nl/images?q=dak">
   <area shape="rect" coords="65,140,85,188" alt="Deur" title="Deur" 
     href="http://www.google.nl/images?q=deur">
</map>
Meer over deze Clickable maps vind je hier,

Werkwijzer 3, lijsten

Op bladzijde 3.46 wordt een voorbeeld gegeven van drie verschillende lijsten:

De opgesomde list-items geef je aan met het element  <li> en </li> bij de eerste twee lijsten.
Bij de definitielijsten doe je dat met het element  <dd> en </dd>
Niet in het boek vermeld, maar wel handig om te weten is dat je ook het soort opsommingsteken kunt aangeven met het attribuut type, bijvoorbeeld:
Ongeordende lijsten:  <ul type="disc">,  <ul type="circle">  en  <ul type="square"> 
Geordende lijsten <ol type="1">,  <ol type="a"> ,  <ol type="i">  ,  <ol type="A"> en  <ol type="I"> 

Experimenteer eens met deze verschillende soorten opsommingstekens.

Werkwijzer 3, tabellen

Op bladzijde 3.46 en verder staat een voorbeeld van een eenvoudige tabel. Merk op, dat de lay-out van de html-code hier erg belangrijk is.
Zorg dat je de betekenis begrijpt van het table-element, het rij-element en het cel-element:
<table> en <table>,   <tr> en <tr>,   <td> en <td>,   <th> en <th>:
Het is een gewoonte om een een tabel de bovenste cellen in een iets andere opmaak weer te geven. Daartoe dient dit laatste head-element.
Tabellen en cellen kennen ook een aantal attributen, bijvoorbeeld het border-attribuut  <table border="1">

Het samenvoegen van twee (of meer) cellen tenslotte, gaat met de attributen <rowspan="2"> en <colspan="2">
(zie voorbeeld1 en voorbeeld2).

Werkwijzer 3, audio en video

Deze paragrafen over het audio-element, video-element en embed-element spreken voor zich.
Op het iframe-element komen we later terug.



<audio controls src="carnaval.mp3#t=20,30">geen geluid</audio>