Mijn-eigen-website.nl

Websitebouw voor doe-het-zelvers

Hoe kan ik zelf mijn website ontwerpen?

Weet je nog (bijna) niets van HTML en CSS, begin dan hier als je zelf je website wilt ontwerpen.

Heb je er de tijd en de interesse voor, dan is niets zo leuk als helemaal zelf je website ontwerpen. Maar wat als je een beginner bent en je zoiets nog nooit hebt gedaan? Op deze pagina vertel ik hoe je het beste van start kunt gaan.

Download een html-editor

Begin met een html-editor te downloaden. Dat is een simpel programmaatje, net zoiets als een teksteditor. Het voordeel van een html-editor is alleen dat je daarin veel duidelijker het verschil ziet tussen jouw tekst en de html-code. Beide tekstsoorten krijgen namelijk een verschillende kleur. En zo maak je veel minder gauw een fout. Voor de prijs hoef je het niet te laten, want er bestaan goede, gratis html-editors voor zowel Windows, Mac als Linux.

Leer over HTML en CSS

HTML en CSS liggen aan de basis van elke webpagina: HTML gebruik je om de structuur van een pagina vast te leggen en CSS gebruik je voor de lay-out. Dus wil je zelf een website ontwerpen, dan ontkom je er niet aan om iets over HTML en CSS te leren.

(De meeste webpagina’s hebben trouwens de extensie .php in plaats van .html. Toch zijn het nog gewoon pagina’s die geschreven zijn in HTML, alleen om sommige toepassingen binnen die pagina’s mogelijk te maken, is de programmeertaal php gebruikt. Op een andere pagina geef ik meer uitleg over het verschil tussen html- en php-pagina’s.)

Door de verschillende pagina’s op deze site te lezen kun je veel over HTML leren en over vormgeven met CSS. Of bekijk bijvoorbeeld deze voorbeeld HTML-code om de ‘achterkant’ van een webpagina te zien. (En weet je niet wat bepaalde begrippen betekenen, bekijk dan eerst even deze video waarin ik uitleg over veelgebruikte website-termen geef.)

Waar ik zelf veel van heb geleerd toen ik begon met het ontwerpen van websites, is van het bekijken van de broncode van pagina’s die ik mooi vond, of waarvan ik een bepaald onderdeel mooi vond. De onderliggende code van een webpagina kun je via elke browser inzien. En door te kijken hoe iemand anders iets heeft gedaan, kom je veel aan de weet over hoe HTML en CSS werken. Het meeste leer je altijd door dingen zelf te doen en uit te proberen, en niet door een boek te bestuderen.

Maak je website responsive

Met de term responsive wordt niets anders bedoeld dan dat de layout van je website verandert al naar gelang het toestel waarop hij bekeken wordt. Dus bekijk je een drie-koloms website op een smartphone, dan zijn die drie kolommen ineens ineengeschoven tot één kolom, en komt het menu misschien pas te voorschijn als je op een knop tapt. De templates zijn bijvoorbeeld allemaal responsive.

Maar er zijn nog meer manieren waarop je een website geschikt voor mobiel kunt maken. Welke manier voor jouw site de beste is, hangt van meerdere factoren af. Maar welke manier je ook kiest, met het grote aantal smartphone- en tablet-gebruikers van tegenwoordig, kom je er niet meer onderuit om je site ook voor hen zo aantrekkelijk mogelijk te maken.

Controleer en test

Wat je niet moet vergeten voordat je je website online zet, is je pagina’s te controleren op foutjes. Een foutje is snel gemaakt. Niet elke fout is even ernstig, maar je wilt natuurlijk wel dat je pagina’s er goed uitzien in de belangrijkste browsers. Laat daarom altijd de pagina’s van je website controleren door een zogenaamde validator (en je stylesheet(s) eventueel ook).

En ten slotte bestaan er niet alleen verschillende browsers, maar ook verschillende browserversies, verschillende besturingssystemen, en verschillende beeldschermresoluties. En samen leveren die enorm veel verschillende combinaties op. De kans dat al die combinaties consequent hetzelfde beeld opleveren, is praktisch nihil. Om erachter te komen hoe je site eruitziet in de belangrijkste combinaties van browser(versies), besturingssystemen en resoluties kun je een online browser test laten uitvoeren.