Die website die we vorige week gemaakt hebben. Die is nog al... kaal.
Deze week gaan we deze opvrolijken met afbeeldingen. Zoek op internet een aantal plaatjes en zet deze op jouw persoonlijke website. Je mag zelf kiezen wat voor plaatjes: bijvoorbeeld een foto van jezelf, van iets waar je trots op bent of van je favoriete muziekgroep.
Zorg ervoor dat alle plaatjes ook netjes een alt attribuut hebben.
We gaan de pagina uitbreiden met een contactformulier. Maak hiervoor een aparte pagina naast de pagina die je al hebt. Zet wel een linkje op je homepagina zodat bezoekers daarop kunnen klikken als ze naar je contactformulier willen komen.
Gebruik op je contactformulier minstens de input elementen die in de screenshot te zien zijn. (helaas werken nog niet alle input types in alle browsers, in Chrome zou het wel allemaal moeten werken.)
Je contactformulier hoeft niet ook echt iets te verzenden als je op de verzendknop klikt, die functionaliteit gaan we in een volgend vak maken.
Het wordt nu al een echte webpagina, we gaan je persoonlijke pagina uitbreiden met nog een derde pagina waarin je rooster komt te staan. Voeg een linkje toe naar deze pagina vanaf je homepagina naar deze rooster pagina.
Gebruik een tabel om deze pagina te maken. Vind je tabellen nog moeilijk? Maak dan eerst de eerste twee oefeningen op de tabellen pagina.
Veel uren zullen in je tabel waarschijnlijk dubbel voorkomen. Gebruik colspan en rowspan om van deze uren mooi een enkele cel te maken.
Heb je al eerder een HTML formulier gemaakt? Dan waren de tags en attributen bij de formulier opdracht vast niet nieuw voor jou.
Maar er zijn nog een aantal tags die in het dictaat niet behandeld zijn die jij vast nog niet kent. Zoals <fieldset>, <legend> en <optgroup>. Zoek op internet op hoe deze tags werken en pas ze toe op je formulier.
Het is ook mogelijk om alleen gedeeltes van een afbeelding te laten linken naar een andere pagina. Dit kan je doen door een zogenaamde image map te koppelen aan een afbeelding met de <map> tag.
Zoek op internet op hoe image maps werken en maak een pagina met een image map voor deze afbeelding. Zorg ervoor dat als je op een figuurtje klikt dat je naar zijn homepagina gaat.
Gebruik zowel een poly, rect als een circle area type
