Zelf een eenvoudige website opzetten Jorrit Groenevelt & Arjan Kraak Juni 2013
1 Inleiding/Doel Een onmisbaar onderdeel van het starten van een bedrijf is het opzetten van een website. Een onderneming kan vandaag de dag niet zonder website. Deze module laat je zien hoe je/jullie zelf een eenvoudige website kunt/kunnen opzetten met maar heel weinig kosten. De module is geschreven voor dummy s. Je weet er nog niets of niet veel van. Stap voor stap wordt uitgelegd wat je moet doen. Aangezien je een website voor je eigen bedrijf bouwt heb je aan het einde van deze module een werkende website in elkaar gezet en staat je bedrijf online! Dat is het doel van deze module. Bovendien is het leuk werk. 2 De eerste stappen. Je begint met het nemen van drie stappen: 1. Kies een provider. 2. Kies een hostingpakket. 3. Kies een domeinnaam en registreer die. 4. Controleer de kosten. 2.1 Kies een provider Een provider is een organisatie (of persoon) die diensten levert op of via het internet. In dit geval gaat het om een hostingprovider, een aanbieder van webruimte en webdiensten, die ervoor zorgt dat je website op het internet komt te staan. Dat is natuurlijk niet gratis maar de kosten zijn gelukkig voor een eenvoudige website laag. De keuze van een hostingprovider maak je zelf, je bent hier volledig vrij in. Slim is wel om van te voren even op Google te zoeken naar recensies betreffende de provider. Anderen hebben vaak al meer ervaring en kunnen ook goed aangeven of iets wel of niet goed werkt. In dit voorbeeld maken wij gebruik van www.pcextreme.nl. 2.2 Kies een hostingpakket Een hostingpakket is noodzakelijk om een eenvoudige website te bouwen. Omdat we als provider voor www.pcextreme.nl hebben gekozen maken we ook gebruik van de pakketten die deze provider aanbiedt. Via https://www.pcextreme.nl/webhosting/hosting-pakketten/ krijg je een goed overzicht krijgen welke mogelijkheden er allemaal zijn. Aan te raden is om minimaal het Dynamic pakket te nemen. Hiermee ben je flexibel genoeg om in te toekomst meer geavanceerdere websites te maken of te laten maken. Dat is handig voor de toekomst. 2.3 Kies een domeinnaam Een domeinnaam (ook wel DNS = domain name system) is een naamgevingssysteem op internet waarmee netwerken, computers, mailservers en andere toepassingen worden geïdentificeerd. Voor je website heb je een domeinnaam nodig. Je weet dat websites dankzij een uniek adres bereikbaar zijn. Je moet nadenken over de naam, het adres dus, van je website. Als je die weet moet deze geregistreerd worden want anders kan iemand anders dat adres gebruiken. Hieronder staan de stappen die je moet nemen. Je moet hiervoor wel ingelogd zijn bij https://www.pcextreme.nl Stappen: - Controleer of de domeinnaam die je in gedachte hebt nog vrij is; - Selecteer de domeinnaam die je wilt gaan registreren. In ons geval het.nl adres. Druk hierna op de knop: Volgende stap ; - Koppel je domeinnaam aan het eerder gekozen webhosting pakket (Dynamic); - Voeg het geheel toe aan je winkelmandje.
2.4 Controle van de Kosten Kosten Hosting Zoals je ziet kost het geheel voor één jaar 38,30 inclusief BTW. Heb je een eigen bedrijfje, dan kan, als je bedrijf blijft bestaan en je je bedrijf registreert bij de Kamer van Koophandel, ook de BTW nog worden verrekend en dalen de kosten tot 31,65 per jaar. De maandelijkse kosten liggen nu echter nog dus rond de: 38,30 / 12 = 3,19. Kosten Domeinnaam Prijzen voor een domeinnaam (bijvoorbeeld:.nl,.com,.org) liggen tussen de 8,00 en 10,00 per jaar. Dit hangt af van de provider.
3 Een website bouwen De programmeertaal HTML (Hyper Tekst Markup language) is de motor waarop websites draaien. Je hoeft daar echt niet veel van te weten om toch goed uit de voeten te kunnen met deze taal. Tegenwoordig gebruikt men vaak HTML5. HTML5 is een multi platform taal. Het werkt goed samen met besturingssystemen van Microsoft (Windows) en Apple (IOS) en natuurlijk ook met Android. Dat betekent dat bezoekers van je website ongeacht of ze via een pc met windows, een BlackBerry of een iphone inloggen, de site goed in beeld krijgen. 3.1 HTML codes Er zijn een aantal basiscodes nodig om je website te kunnen bouwen. Het is handig om daar iets van te weten voordat je begint. Hieronder zie je een lijstje van de basiscodes 1. <!doctype html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>untitled Document</title> 6. </head> 7. <body> 8. </body> 9. </html> Wat betekent deze codes en wat kun je ermee? De codes noemt men ook tags. Een tag geeft aanvullende informatie of een opdracht aan de computer door over het bestand waaraan het gekoppeld is. Daar krijg je niets van te zien maar voor het goed werken van de website is het natuurlijk wel belangrijk. 1. <!doctype html> Deze code is noodzakelijk om servers te laten weten dat je met HTML5 aan het programmeren bent. De webserver weet dan dat het een html bestand is, waardoor hij iets sneller pagina's kan weergeven. 2. <html> Bovenstaande code geeft aan vanaf waar de website begint. 3.<head> 6.</head> Bovenstaande tags geven aan waar het <head> element zich bevind, hierin kun je belangrijke gegevens aangeven, zoals 5.<title>Jouw website naam die weergeven wordt in de browser</title> Ook kunnen in de <head> elementen de codes geplaatst worden voor scripts, icoontjes en opmaak van de pagina. Nummer 4 lijkt nu overgeslagen te worden. Deze tag regelt het gebruik en de weergave van allerlei lettertekens en andere tekens. Daar hoef je niets mee te doen. Er staat feitelijk dat jou website de utf-8 karakterset gebruikt die ca. 100.000 tekens bevat van bijna alle talen ter wereld. 7. <body> </body> Tussen de <body> tags plaats je de inhoud van je webpagina. Teksten, afbeeldingen, muziek, filmpjes, alles wat online moet komen plaats je hier tussen. Uiteindelijk sluit je altijd weer af met: 9. </html>
Je ziet dus dat de tags bijna altijd setjes zijn: <tag> </tag>. Let op de backslash bij de afsluitende tag. <xx> de opdracht begint. </xx> de opdracht wordt afgesloten. Tussen de tags plaats je dus de tekst/het plaatje/enz. waarvoor de opdracht moet worden uitgevoerd. 3.2 Een eenvoudige welkompagina maken met logo en tekst Met het volgende voorbeeld wordt een eenvoudige welkompagina met logo en tekst gecreëerd. Dit is voldoende voor een beginnend bedrijf. De naam van het bedrijf is in dit voorbeeld Entreprenasium Winkel X. Dit zie je terug in regel 3. Dit is de koptekst van de website. De verdere inhoud van de site wordt ingevoegd na 4. <body>. Verder is de tekst (in dit voorbeeld): Welkom op onze Winkelpagina : zie regel 9. De tag <h1> </h1> geeft aan dat deze regel na de naam van de website (Entreprenasium Winkel) het belangrijkste is. Zoekmachines zoals Google gebruiken deze z.g.n. headers om snel resultaat te boeken. Verstandig dus om een goede header te kiezen. Wat minder belangrijke headers kun je aangeven met bijv. <h2> </h2> enz. Je kunt niet verder gaan dan 6. Wij verkopen kleine sieraden en maken dit van eerlijke materialen: zie regel 10. De <p> </p> tags geven telkens een nieuwe alinea aan. In dit geval bestaat deze maar uit een enkele zin. De sieraden zijn te koop voor 5 per stuk : zie regel 11 Voor meer informatie mail met 12345@emailadres.nl : zie regel12. Omdat een plaatje of logo onmisbaar is hebben wij die al ingevoegd. Hieronder wordt uitgelegd hoe je dat moet doen. De code zie je staan in regel 5,6 en 7 en 13. Omdat 5 <body> betekent dat daarna de inhoud van de website komt te staan, inclusief het plaatje, sluit je de inhoud van je site af met </body>. Zie regel 13.
1. <html> 2. <head> 3. <title>entreprenasium Winkel X</title> 4. </head> 5. <body> 6. <div align= center > 7. <img src=http://images.videolan.org/images/largevlc.png width= 150px height= 150px ></img> 8. </div> 9. <h1>welkom op onze Winkelpagina</h1> 10. <p>wij verkopen kleine sieraden en maken dit van eerlijke materialen.</p> 11. <p>de sieraden zijn te koop voor 5 per stuk.</p> 12. <p>voor meer informatie mail met 12345@leerlingen.emailadres.nl</p> 13. </body> 14. </html> Hieronder zie je resultaat van de code hierboven: een eenvoudige website. Het plaatje is maar een voorbeeld, Je kunt zelf een logo maken. Figuur - Resultaat code 4.2 (Eenvoudige pagina)
3.3 Een afbeelding plaatsen Om een afbeelding toe te voegen aan je webpagina heb je een speciale tag nodig. Deze tag plaatsen we ook weer tussen de <body></body> tag. 1. <img src= http://www.google.nl/logo.png > </img> Door te werken met een <img>..</img> tag is het mogelijk afbeeldingen op je website te plaatsen. Door het aangeven van http:www.google.nl/logo.nl kan het programma dit plaatje zelf opzoeken en op je website plaatsen. Natuurlijk is het mogelijk andere adressen op te geven. Als je verder niets invoert wordt het plaatje of je logo door het programma in de originele afmetingen op de pagina geplaatst. Bovendien wil je aangeven waar het logo moet staan op de pagina. Aanpassing formaat. Dit wordt gedaan op de volgende manier: 1. <img src= http://www.google.nl/logo.png width= 10px height= 20px ></img> Door het toevoegen van width (breedte) en height (hoogte) kan een afmeting worden aangepast. Als je dit niet doet zal de afbeelding op de originele grootte worden afgebeeld. In het voorbeeld zie je staan: 6.<img src=http://linknaarjelogo.png width= 150px height= 150px ></img> Je geeft daar dus aan waar het logo te vinden is (link naar je logo) en hoe groot het logo moet worden afgebeeld. Hier is dat 150 pixels (px) bij 150 pixels (px). Het uitlijnen. Het plaatje wordt met <div align= center > </div> gecentreerd op je pagina geplaatst. Je kan in plaats van center ook left of right gebruiken, dit zorgt voor uitlijning naar links of rechts.
3.4 Tekstkleur Niet alle teksten op een website hoeven dezelfde kleur te hebben, je kunt deze teksten met de juiste codes voorzien van een ander kleurtje. Dit doe je als volgt: 1. <html> 2. <head> 3. <title>kleuren</title> 4. </head> 5. <body> 6. <font color="blue">blauwe tekst</font><br> 7. <font color="red">rode tekst</font><br> 8. <font color="green">groene tekst</font> 9. </body> 10. </html> Door het gebruik van <font color= kleur > </font> is zijn de kleuren aan te passen.de meeste kleuren worden ondersteund, al moeten ze wel in het Engels opgeschreven worden. Wil je dus rode tekst, dan vul je red in. Figuur - Resultaat code 4.4 (Tekstkleur)
3.5 Meer mogelijkheden om je pagina op te maken Hieronder zie je een korte opsomming van wat meer mogelijkheden om je webpagina op te maken. Zoals gebruikelijk zie je steeds hetzelfde stramien. Elke tag is weer de bekende set <x> </x>. Het is aardig om met een of meerdere tags te experimenteren en te kijken hoe je pagina er dan uit komt te zien. <b> </b> <blockquote> </blockquote> <cite> </cite> <div> </div> <em> </em> <i> </i> <nav> </nav> <span> </span> <strong> </strong> <div align= right > </div> <div align= left > </div> <div align= center > </div> Tekst vet plaatsen. Alleen toepassen als <strong> </strong> niet bruikbaar is in een bepaalde context. Citaten aanduiden. Weergave: ingesprongen tekst. De titel van een bepaald werk aanduiden. Weergave: cursief Met deze tag kan je jouw HTMLdocument verdelen in logische gehelen (div komt van division). Automatisch witruimte boven en onder <div>. Belangrijke tekst benadrukken. Beeld: cursief Tekst cursief plaatsen. Enkel toepassen als <em> </em> niet bruikbaar is in een bepaalde context. Een blok navigatielinks aanduiden. Dient om structuur aan te brengen in je document en informatie te geven aan browsers i.v.m. de navigatie. Vergelijkbaar met <div>. Verschil: <span> zorgt ervoor dat de teksten die gemarkeerd worden op dezelfde regel doorlopen. Geen witruimte boven en onder <span>. Belangrijke tekst benadrukken. Weergave: vet Rechts uitlijnen Links uitlijnen Centreren op de pagina Op het internet is overal te vinden welke tags html5 heeft en wat je daarmee kunt doen. Het is handig om vanuit die behoefte te werken. Er zijn ook complete overzichten van alle tags die gebruikt kunnen worden. Daar zal meestal niet veel behoefte aan zijn.
3.6 Formulier Het is natuurlijk belangrijk om de gegevens van je klanten te weten. Als je die weet kun je ze regelmatig mail sturen. De gegevens komen in een HTML formulier. Klanten kunnen zelf op je website dat formulier invullen. In het volgende voorbeeld wordt een simpel HTML formulier gemaakt. In dit formulier zijn de volgende velden verwerkt: Voornaam Achternaam Straat Postcode Woonplaats Telefoonnummer Het formulier heeft nog geen mogelijkheid om daadwerkelijk de e-mail/gegevens te versturen. Hiervoor is meer geavanceerde code nodig. Deze code dient gemaakt te worden door middel van PHP scripts. Dat valt buiten deze module 1. <html> 2. <head> 3. <title>formulier</title> 4. </head> 5. <body> 6. <h1>persoonlijke data</h1></ br> 7. Voornaam: <input type="text" name="voornaam" value="enter FirstName"/><br> 8. Achternaam: <input type="text" name="achternaam" value="enter LastName"/><br> 9. Straat: <input type="text" name="straat" value="enter Street"/><br> 10. Postcode: <input type="text" name="postcode" value="enter Zip Code"/><br> 11. Woonplaats:<input type="text" name="woonplaats" value="enter Living Place"/><br> 12. Telefoon: <input type="text" name="telefoonnummer" value="enter Phone- Number"/> 13. </body> 14. </html> Figuur - Resultaat code 4.6 (Formulier)
4 Slot Laat het niet bij lezen maar ga vooral aan de slag. Een website bouwen is leuk en ook nog eens belangrijk voor je bedrijf. Tenslotte staan hieronder links naar websites van Entreprenasiasten die een website hebben. Leuk ter inspiratie. www.mepia.nl www.equithic.nl www.brigrafie.nl www.fair42.nl