Een website voorbereiden
Websites bestaan uit verschillende delen, o.a. verschillende pagina's, logo's, afbeeldingen en tekst. Om te beginnen schrijf je op papier best even een structuur uit voor je globale website; welke onderdelen moeten online komen te staan? Je hebt bijvoorbeeld een pagina nodig met informatie en/of een pagina met producten en/of reeds geleverd werk,... allemaal afhankelijk van de doelstelling van jouw website.
TIP: terwijl je neerschrijft wat er allemaal op je webpagina dient te komen, houd altijd een structuur in het achterhoofd. Met structuur wordt bedoeld: Geef elke webpagina een naam, wat moet er op elke specifieke pagina komen? En vooral: hoeveel pagina's heb je nodig? Heb je niet veel te vertellen, dan is soms één pagina veel beter dan tien pagina's met onnodige inhoud. Een goede structuur is zeer belangrijk, zodat de bezoekers weten waar zij zijn, hoe zij naar een andere gewenste pagina kunnen gaan en zodat bezoekers alle nodige informatie snel kunnen vinden.
Je begint met een verzamelmap
Als je zelf je site gaat maken, dan maak je ergens op je eigen computer een map met dezelfde naam als jouwdomeinnaam. Alles wat in deze map geplaatst wordt, zal daarna ook online komen, en zichtbaar worden voor andere mensen.
Je ziet dat je nu over een map genaamd images (afbeeldingen) en bestanden genaamd index.html en style.css beschikt:
De icoontjes voor de bestanden kunnen anders zijn, en mocht je geen extensies zien (.html en .css) is er uitleg over hoe je deze kan inschakelen op de pagina met extra informatie
De index.html en style.css zijn belangrijk! De map images is dat niet zo zeer. Als er iemand naar je site gaat geeft die persoon het domein in en dan wordt hij doorverwezen naar dat bestand index.html. De startpagina op een website heet dus altijd zo! Anders kan de browser niets weergeven.
Het bestand index.html is dus de welkomstpagina op jouw website. Elke webpagina op het internet is een apart bestand: uiteindelijk zal je in deze map zeer veel html-bestanden maken, elk met een andere titel en andere inhoud.
Je logo's en afbeeldingen die op de site zullen komen plaats je in die map genaamd images (afbeeldingen). Het is leuk om te weten dat elke afbeelding maar éénmaal bewaard moet worden, maar oneindig veel gebruikt kan worden, op elke pagina opnieuw. Hoe we dat doen zien we vanaf de volgende cursuspagina, webpagina's maken.
Om dit onderdeel af te sluiten volgt de opmerking dat geen enkele bestandsnaam van een online bestand een hoofdletter mag bevatten! De bestanden index.html en style.css, de map images en de bestanden die zich daar in bevinden zijn allemaal in kleine letters geschreven. Werk enkel met kleine letters, getallen en underscores ( _ ). Vroeger was dat een conventie. Hoewel meer en meer browsers met een hoofdletter overweg kunnen, kan je dat beter niet gebruiken. Zo ben je zeker dat er zo weinig mogelijk bezoekers problemen zullen ondervinden op je webpagina's.
Kies een html editor
Om een webpagina te maken en te bewerken kies je een programma dat met html overweg kan. Designers gebruiken bijvoorbeeld dreamweaver van Adobe of SharePoint van Microsoft. Dit zijn tamelijk dure producten, maar je kan op Windows ook verder o.a. Notepad++, en op de Mac met Xcode. Je kan altijd online zoeken naar nog andere programma's. Deze programma's dienen om te programmeren, en zullen niet enkel de webpagina tonen, zoals een webbrowser dat doet, maar zij tonen ook de code waarmee de webpagina is opgebouwd.
Sommige hosts, zoals One.com geven ook de mogelijkheid om je bestanden online te maken en te bewerken. Wil je dit doen, dan zoek je even op of jouw host die mogelijkheid biedt. Extra info kan je terugvinden op de pagina online werken.
Bekijk je site regelmatig!
Je hoeft de site niet online te plaatsen om te zien hoe die er uit ziet. Open gewoon het bestand index.html met je webbrowser. Dit kan door een rechtermuisklik op het bestand waarna je kiest Openen met en uit de lijst die verschijnt kies je jouw browser. Op dit moment ziet de site er als volgt uit:
Vanaf de volgende pagina wordt er uitgelegd hoe html werkt, en hoe je jouw webpagina kan aanpassen.