Aan de slag met HTML5

We werken aan het blok footer

De nu in HTML5 nieuwe tag footer (<footer>) staat over het algemeen onder aan de pagina. Het is de tegenhanger van <header>. Vaak staan er nog wat afsluitende links. Ook kan <footer> een kenmerkende afbeelding bevatten, zoals een afbeelding met een mailadres. Het plaatsen van meerdere footers is mogelijk, maar vaak niet zo logies!

Bij de eerste opzet werkten we hier voor het eerst met afbeeldingen in HTML5. Nu staan er bijna overal afbeeldingen. Onze test-afbeelding (<img>) is een foto in banner-formaat. Het onderwerp is een strandafbeelding met een mailadres. We proberen voor de nieuwe lay-out de zelfde formaten als in de oude site te gebruiken.

*

Deze standaard maat is voor de breedte 340 pixels. De hoogte dient daarbij een even aantal pixels te zijn. Het voordeel van een mail-adres in een plaat is, dat we zo minder last krijgen van spam; pas op! Geef alt slechts een sterretje, want anders kunnen bots het te gemakkelijk vinden voor beeldherkenning. Helaas komt met de verbetering van de beeldherkenning, hier in de overzienbare toekomst een einde aan. Misschien moeten we tegen die tijd, wel een soort rebus bedenken.

De eerste poging <footer> te plaatsen ging, zoals gewoonlijk weer mis. De oplossing is dan de kleur in het CSS tijdelijk in geel of een andere lichte kleur te veranderen (background-color:yellow;). Het effect wordt dan zichtbaar! Deze keer was het toevoegen van float:left de oplossing. Bekijk dit door de opdracht tijdelijk uit een eigen test-CSS te verwijderen. Nu gaan we verder met het verhaal over section.