Zelf een eenvoudige website opzetten

Jorrit Groenevelt & Arjan Kraak Juni 2013

Zelf een eenvoudige website opzetten

Zelf een eenvoudige website opzetten

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.

Zelf een eenvoudige website opzetten

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.

Zelf een eenvoudige website opzetten

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. 2. 3. 4. <meta charset="utf-8"> 5. 6. 7. 8. 9. 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. 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.

Bovenstaande code geeft aan vanaf waar de website begint. 3. … 6.

Bovenstaande tags geven aan waar het element zich bevind, hierin kun je belangrijke gegevens aangeven, zoals 5.

Ook kunnen in de 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.

…

Tussen de 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.

Zelf een eenvoudige website opzetten

Je ziet dus dat de tags bijna altijd setjes zijn: …. Let op de backslash bij de afsluitende tag. <xx> de opdracht begint. 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. . Verder is de tekst (in dit voorbeeld): Welkom op onze Winkelpagina : zie regel 9. De tag

…

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.

…

enz. Je kunt niet verder gaan dan 6. Wij verkopen kleine sieraden en maken dit van eerlijke materialen: zie regel 10. De

…

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 [email protected] : 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 betekent dat daarna de inhoud van de website komt te staan, inclusief het plaatje, sluit je de inhoud van je site af met . Zie regel 13.

Zelf een eenvoudige website opzetten

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.

Welkom op onze Winkelpagina

Wij verkopen kleine sieraden en maken dit van eerlijke materialen.

De sieraden zijn te koop voor €5 per stuk.

Voor meer informatie mail met [email protected]

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)

Zelf een eenvoudige website opzetten

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 tag. 1. Door te werken met een .. 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. 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.

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 gecentreerd op je pagina geplaatst. Je kan in plaats van “center” ook “left” of “right” gebruiken, dit zorgt voor uitlijning naar links of rechts.

Zelf een eenvoudige website opzetten

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. 2. 3. 4. 5. 6. Blauwe tekst
7. Rode tekst
8. Groene tekst 9. 10. Door het gebruik van … 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)

Zelf een eenvoudige website opzetten

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> . Het is aardig om met een of meerdere tags te experimenteren en te kijken hoe je pagina er dan uit komt te zien. …

Tekst vet plaatsen. Alleen toepassen als <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