Eindopdracht HTML/CSS: hovenier

Transcriptie

1 Eindopdracht HTML/CSS: hovenier De eindopdracht is verplicht voor wie de opleiding Applicatie Ontwikkelaar wil gaan doen. Het is de bedoeling dat je zo veel mogelijk individueel werkt. Als je samenwerkt moet je dat vermelden. Je moet alle code kunnen toelichten. Opdracht 0: Project Hovenier Maak een nieuwe projectmap Hovenier voor alle bestanden van het project. Maak in de projectmap drie submappen: 1. map www voor alle html, css, afbeeldingbestanden waaruit de website gaat bestaan 2. map documentatie waarin je alle testrapporten plaatst 3. map sources voor alle andere bestanden die je nodig hebt voor het maken van de site. Opdracht 1: html Maak html-pagina jouwnaam-formulier.html met een webformulier volgens het voorbeeld: Geef in de form tag attribuut action de waarde../cgi-bin/formmail.pl en geef hierbij attribuut method de waarde get zodat je de query string die naar de server wordt gestuurd kunt controleren in de adresbalk. (Later verander je de method naar post.) Gebruik fieldset en legend tags volgens het voorbeeld. Gebruik voor ieder veld het juiste type. Zoek op w3schools.com bij html input types. Geef ieder veld een id en name attribuut met herkenbare waarde. Gebruik waar mogelijk de label tag en zorg hierbij voor de juiste waarde van het for attribuut Gebruik placeholder tags, volgens het voorbeeld. Gebruik bij veld woonplaats een datalist (kopieer de lijst van de Marathonsite) Zorg ervoor dat alle Persoonlijke gegevens (Uw gegevens) verplicht ingevuld moeten worden. Test je formulier in Chrome, Firefox en Internet Explorer. Gebruik de W3C Markup Validation Service om je HTML5 te laten controleren. Een werkend formulier met bovenstaande inhoud. Documentatie over de query string die naar applicatie formmail.pl op de server wordt verstuurd. De HTML is gevalideerd en verbeterd met de W3C vallidator. 1

2 Opdracht 2: CSS Voeg aan jouwnaam-formulier.html een link toe naar stylesheet formstijl.css Maak formstijl.css volgens het voorbeeld. Aanwijzingen: Het Lettertype is verdana, lettergrootte 14 pixels De Achtergrondkleur is #222 en tekstkleur is #ccc Het formulier is 400 pixels breed. De fieldset heeft onder een marge van 15px en een padding van 10px. Stel voor de labels display:block in zodat ze vanzelf op een nieuwe regel komen en geef de labels een marge boven onder van 9px en links rechts 0px Stel voor select en alle inputvelden met uitzondering van checkbox, radio en submit, achtergrondkleur zwart en tekstkleur wit in, een rand (kleur:#666), de hoogte, tekstuitlijning en een marge van boven en links 0px en onder en rechts 5px. Geef inputvelden type checkbox, radio en submit een marge boven+onder van 10px en links+rechts 0px De breedte van velden Nummer en Postcode is 60px, van velden Straatnaam en Woonplaats 280px, van velden en Telefoon 355px. Bedenk zelf welke css nodig is om de submit button te stylen volgens het voorbeeld. Gebruik de W3C Markup Validation Service om je CSS3 te laten controleren. Een gestyled formulier Documentatie m.b.t. testrapporten W3C vallidaties van CSS en HTML Laat het resultaat aan de docent zien en geef indien gevraagd een toelichting. 2

3 Opdracht 3: webpagina met contactformulier Plaats het contactformulier in webpagina contact.html volgens het voorbeeld hieronder. Gebruik je eigen gegevens en foto bij de hovenier. De afbeeldingen van het logo en de achtergrondafbeelding met de bloemen kopieer je van i4learning.nl/html. Volg de onderstaande aanwijzingen: Pas bestanden jouwnaam-formulier.html (dat wordt contact.html) en formstyle.css aan: Zet de bloemenafbeelding als achtergrondafbeelding in een div element. Geef dit div element een breedte van 100% en een hoogte van 193px. Geef dit div element position absolute, boven in het body element. Zoek op hoe je de background-size moet instellen zodat de bloemenafbeelding altijd het hele vlak opvult. Voeg binnen de body een section tag toe met breedte 960px en een uitlijning links-rechts auto en boven-onder 0px. Alle content valt binnen deze section: Maak een header met het logo, een h1 met JOUWNAAM HOVENIERSBEDRIJF en de navigatie <nav> tag. Maak in de <nav> een ongeordende lijst <ul> met de navigatie items volgens het voorbeeld. Gebruik voor de styling van deze elementen onder andere float:left. Bedenk zelf de rest. Gebruik #0d0e0f als achtergrondkleur voor de body en voor de logotekst JOUWNAAM. 3

4 Onder het <header> element en voor <form> komt een <h1> CONTACT en een <p> met de tekst. Na het form element voeg je een aside element toe met je foto en contact gegevens. Het aside element is 350px breed. De regelhoogte is 200%. De tekst is rechts uitgelijnd. Zorg dat de onderkant van het aside element gelijk valt met de onderkant van het form element. Als jouw webpage er uitziet als hierboven, voeg dan een footer toe volgens het volgende ontwerp: Geef de footer achtergrondkleur #222 en een breedte van 100% en hoogte van 80px; De tekst van de footer plaats je in een element met een breedte 960px en marge links-rechts auto. Dit footer element moet altijd onderaan op de pagina blijven. Hoe dat moet zoek je op internet how to keep footer on bottom of page Gebruik de W3C Markup Validation Service om zowel je HTML als je CSS3 te laten controleren. Een gestylde webpagina met formulier Testrapporten van zowel HTML als CSS Laat het resultaat aftekenen door de docent voordat je aan de volgende opdrachten begint. 4

5 Opdracht 4: Pagina s Tuinontwerp, Tuinaanleg en Tuinonderhoud Voor de Pagina s Tuinontwerp, Tuinaanleg en Tuinonderhoud gebruik je als uitgangspunt de pagina met het contactformulier. De tekst voor deze pagina s vind je op de volgende pagina (kopiëren). Pas zo nodig bestand formstyle.css aan. Plaats voor ieder van de tuinpagina s steeds de betreffende tekst links, in plaats van het contactformulier. Aan de rechterkant plaats je een bijbehorende afbeelding (zoek op internet) van een tuinontwerp, -aanleg en iets wat met tuinonderhoud te maken heeft. Zorg dat de tekst 400 pixels breed wordt weergegeven. Gebruik een afbeelding van 400 pixels breed en 500 pixels hoog. Bewerk zo nodig de afbeelding (bijsnijden en/of schalen / comprimeren) bijvoorbeeld met het programma pixlr.com of het simpelere programma imageoptimizer.net Zorg dat de navigatie, zowel in de header als in de footer correct werkt. Gebruik de W3C Markup Validation Service om zowel je HTML als je CSS3 te laten controleren. Een complete website voor een hovenier bestaande ontwerp.html, onderhoud.html, aanleg.html, formulier.html. Alleen de homepage ontbreekt. W3C gevalideerde HTML en CSS 5

6 ==================================================================== Tuinontwerp Een goed tuinontwerp is de basis van een mooie tuin. Uw wensen vormen de belangrijkste inspiratiebron om tot een mooie leefruimte te komen. Een juiste combinatie van vorm, materiaalgebruik en beplanting groeit uiteindelijk tot een harmonieus geheel. Weet u al precies wat u wilt en heeft u geen behoefte aan een (uitgebreid) ontwerp? Een gesprek over uw wensen, vertaald in een schets is vaak ook al voldoende om mee aan het werk te gaan. Heeft u geen behoefte aan een andere tuin maar wilt u weten waar welke planten geplant moeten worden? Dan is een beplantingsplan voldoende. advies of offerte aanvragen voor uw tuinontwerp? Neem contact op of bel: ==================================================================== Tuinaanleg Uw tuin is het visitekaartje van uw woning. Ik zorg voor de vertaling van uw wensen in de aanleg van uw tuin. Daarvoor is vakmanschap nodig. Alleen al om ervoor te zorgen dat de investering in uw tuin toekomstbestendig en duurzaam is. Met ruim 20 jaar ervaring als hovenier breng ik de benodigde vaardigheden mee. Ik heb oog voor detail en adviseer u graag over de mogelijkheden. Tuinaanleg, passend bij uw plannen. Als hovenier heb ik ruime ervaring met o.a. grondwerk, het leggen van bestrating, het aanleggen van waterpartijen en vijvers, het bouwen van tuinhuisjes, het aanleggen van beplanting, Wanneer u uw tuin volledig wilt laten renoveren of opnieuw wilt laten aanleggen ben ik u graag van dienst. Hetzelfde geldt voor kleine veranderingen in uw bestaande tuin. Advies of offerte aanvragen voor uw tuinaanleg? Neem contact op of bel: ==================================================================== Tuinonderhoud Uw tuin blíjft mooi door vakkundig en regelmatig onderhoud. Of het nu gaat om een strak geknipte haag, een gemaaid gazon, het bemesten van uw planten, een border zonder onkruid, allemaal elementen die bijdragen aan een tuin met uitstraling en dus aan uw woonplezier. Wilt u dit onderhoud aan uw tuin vakkundig en regelmatig laten uitvoeren? Ik bied u de onderhoudsvorm die het beste bij u en uw tuin past! Mogelijke opties zijn bijvoorbeeld: Voor- en najaarsonderhoud; Jaarlijks verticuteren van het gazon; Periodiek vijveronderhoud; Snoeiwerk; Volledig onderhoud. Een eenmalige onderhoudsbeurt behoort ook tot de mogelijkheden, evenals tuinonderhoud met een andere frequentie zoals bijvoorbeeld twee keer per jaar, een keer per kwartaal of iedere maand. advies of offerte aanvragen voor uw tuinonderhoud? Neem contact op of bel: