Voor vragen: of mail naar

Transcriptie

1 Welkom bij mijn website tutorial (Deel 7) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista. Als Editor gebruik ik Notepad++, dit word behandelt in Deel 1. Voor vragen: of mail naar Richard3332@gmail.com We gaan in dit deel het volgende leren: Contact formulier maken Afbeeldingen op de website plaatsen Allereerst openen we de contact.html. Hier gaan we een contact formulier maken die dit verstuurd naar adres@provider.nl Dit alles zetten we in een onzichtbare tabel om het mooi gestructureerd te houden. We gaan de volgende code in de div content_text van contact.html zetten: <table border="0" align="left"> </table> <td width="200px">uw naam:</td> <td></td> <td width="200px">uw adres:</td> <td></td> <td width="200px">onderwerp</td> <td></td> <td> </td> <td> </td> <td>uw opmerking/vraag:</td> <td colspan="2"></textarea></td> <td colspan="2" align="right></td>

2 Toelichting: Om een table te maken, start je altijd met het element <table>, hierin kan je wat waarden meegeven zoals de border (0 = niet, 1 = wel) en align (left,right en center). is een nieuwe regel in de tabel. <td> is een nieuwe kolom. We geven de <td> af en toe een width mee om de breedte te bepalen. Colspan, dit is een element waarbij je aangeeft hoeveel kolommen het in beslag neemt. dit is een spatie. Nu gaan we het formulier in de tabel zetten. De volgende code komt onder het <table> statement. <form method="post" action="mailto: adres@provider.nl"> Toelichting: <form> is een statement om een formulier te openen, hier geef je mee de method, action en of target. Hier is de action mailto: adres@provider.nl Hierdoor word het naar dit adres gestuurd als er op de submit button word geklikt.

3 Met <input> kan je verschillende type invulvelden maken, zoals: text, radio, selectbox, hidden. We gebruiken nu text, we gaan namelijk iemand een naam, adres en onderwerp laten invullen. We maken 3 dezelfde type inputs aan: <input type="text" name="naam" /> <input type="text" name=" " /> <input type="text" name="onderwerp" /> Deze komen in de 2 e <td> van elke Ik zal het in het voorbeeld hieronder neerzetten: Nu moeten we nog een tekstvak hebben om de vraag of opmerking in te laten typen Dit doen we met de volgende code: <textarea name="opmerking/vraag" rows="10" cols="41"></textarea> Toelichting: <textarea></textarea> is dus een tekstvak. Rows is het aantal regels in het tekstvak (eigenlijk de hoogte) Cols zijn de aantal characters (eigenlijke de breedte) Deze plaatsen we in de 1 na laatste <td>. Nu moeten we nog een verzend button en een reset button maken Dit doen we ook met het element <input> Code: <input type="submit" value="verzenden" name="verzenden" /> <input type="reset" value="reset" name="reset" />

4 Toelichting: Value = de warden die de button krijgt, wat op de button als tekst staat op de webpagina. Deze buttons zetten we in de laatste <td> Resultaat:

5 We sluiten contact.html en openen informatie_1.html. We gaan hier een tekst tussen de tekst wat afbeeldingen zetten We zetten tussen de 1 e en de 2 e paragraaf de volgende code: <img src="img/lamborghini.jpg" alt="lamborghini Diablo" width="436" height="272" /> Toelichting: <img> zorgt ervoor dat we een plaatje gaan plaatsen. Src, dit statement geeft de directory op van de afbeelding. Alt, dit geeft de tekst weer als je met de muis over afbeelding gaat. Geeft het volgende resultaat:

6 Bedankt voor het volgen van Website Tutorial (Deel 7) door Richard3332 Ik wil graag mijn website hoger gerankt hebben in Google. Jullie kunnen dit mogelijk maken door mijn website aan zoveel mogelijk mensen te vertellen, zo helpen jullie mij weer! Het is natuurlijk niet verplicht! En de tutorials van mij blijven altijd gratis. Bedankt voor jullie waardering! Mail: msn: website: