Je wil een website bouwen in HTML. Voor je aan een website kan beginnen zijn er enkele dingen die verondersteld worden gekend te zijn.

Basis computervaardigheden

Gezien websites computermedia zijn moet je de basisvaardigheden van je besturingssysteem onder de knie hebben. Daarmee bedoelen we dan dingen als bestanden openen en sluiten, bestanden bewaren, mappen aanmaken, navigeren doorheen je bestanden en mappen, ...

Websites worden bekeken in een browser zoals Microsoft Explorer, Mozilla Firefox, Opera, Safari of Google Chrome, om maar meteen de belangrijkste te noemen.

Ook van je browser ken je best al op voorhand de meest elementaire functies :

• -de adresbalk waar je de URL ( Uniform Resource Locator - het adres van de site ) ingeeft
• -de refresh-knop ( heel belangrijk om veranderingen in je ontwerp te bekijken nadat je de code hebt aangepast )
• -de 'bron weergeven' functie ( waarmee je de code kan bekijken die de browser op dat moment gelezen heeft.
• -enz..

BENODIGDHEDEN

Om een website te maken in HTML heb je een paar programma's nodig op je computer : een browser om je website te bekijken en een teksteditor zoals Notepad of Wordpad waarin je de code van je website aanmaakt.

Een website bestaat uit een aantal pagina's die onderling met elkaar verbonden zijn door links in de pagina's. De browser is het programma om al die pagina's te bekijken, en die dus als je op een link in een pagina klikt de volgende pagina laat zien.

De HTML-pagina's zijn in principe gewoon pagina's tekst opgesteld in HTML-code ( Hyper Text Markup Language ). Hierdoor krijgt de tekst (en de tekeningen) in de pagina een bepaalde lay-out. De browser vertaalt de (onzichtbare) HTML-codes in de zichtbare lay-out.

Als je je site online wil plaatsen heb je ook nog een internetverbinding nodig, een server ( aka webspace) ( aka hosting) om je website toegankelijk te maken op het internet, en tenslotte software om je bestanden mee te verzenden naar je server : een FTP-client ( FTP-software met andere woorden).

Alle info over hosting en FTP vind je ook op deze site

HTML met een teksteditor

Een teksteditor is een tekstverwerkingsprogramma dat best geen opmaakmogelijkheden heeft. Programma's die je kan gebruiken zijn dus bijvoorbeeld Notepad ( kladblok ) of Wordpad ( zitten beiden in je bureau-accessoires ), of TextWrangler voor de MAC. In dit programma schrijf je de HTML-code. Je slaat de pagina's dan op als .htm of .html.

Let goed op dat je de pagina's niet als .txt opslaat, maar wel als .htm of .html !

De browser leest de .htm en .html formaten als pure tekst. Als je bijvoorbeeld in Word een HTML-pagina opslaat, zouden veel opmaakelementen verloren gaan. Word kan namelijk sommige Tags lezen, net als een browser, en voert ze uit in plaats van ze gewoon te laten staan als code. De volgende keer wanneer je je code bekijkt kan ze hierdoor heel onoverzichtelijk geworden zijn.

Daarom dat je best meteen met een zo simpel mogelijk tekstprogramma werkt, waarvan de enige simpele opmaakelementen die het toelaat (zoals tabs bijvoorbeeld), niet verloren zullen gaan.

In Wordpad heb je wel nog opmaakmogelijkheden die verloren kunnen gaan, maar ook iets uitgebreidere find & replace functies, wat wel handig kan zijn als je 2 pagina's wil maken die maar in een paar kleine repetitieve dingen verschillen die je dan gewoon met de replace functie kan veranderen.

Het nadeel van werken in een teksteditor is dat je alle HTML-codes vanbuiten moet kennen, maar zeker als beginner is het niet slecht om zo lang mogelijk met een teksteditor te werken,om vertrouwd te geraken met alle codes en hun eigenschappen. Een goede HTML-coder kent namelijk gewoon alle codes uit zijn hoofd, en kan dus naar een pagina HTML-code kijken en de eventuele fouten er sneller uithalen.

HTML via software

Er bestaan ook programma's die specifiek dienen om HTML te coden, die zelf voor een overzichtelijke vorm zorgen. Adobe Dreamweaver is zowat het bekendste programma hiervoor. De verschillende code-elementen krijgen automatisch andere kleuren, wat helpt voor de overzichtelijkheid. Je kan ook hele stukken klaargemaakte code invoegen enzovoort.

Als je hiermee een pagina opslaat als .html, wordt die pagina nog altijd omgezet in kleurloze onopgemaakte tekst, maar zodra je de pagina weer in dit programma opent, krijg je weer zicht op je overzichtelijke opmaak.

Net als een browser interpreteren deze opmaakprogramma's de HTML, maar waar een browser de code verstopt, laat een HTML-editor nog steeds de code zien, zij het dan in een overzichtelijk structuur. Met een browser kan je HTML-pagina's ook alleen maar lezen, terwijl een editor je dus ook toelaat de code te veranderen.

HTML met een WYSIWYG editor

Er bestaan ook WYSIWYG-editors (WYSIWYG staat voor What You See Is What You Get), en dit betekent dat je zelf helemaal geen code moet kennen om een webpagina te maken.

Je maakt je pagina's op zoals je in Word zou doen, en wat je op je scherm ziet is ook hoe het er in de browser zal uitzien. Ook in Dreamweaver zit een WYSIWYG-functie, zodat je kan kiezen of je tekstgebaseerd of visueel wil werken. Het nadeel is dat deze programma's soms een overvloed aan code genereren als je bijvoorbeeld sommige elementen op een rare plaats positioneert.

Je code kan dus heel snel heel onoverzichtelijk worden met deze editors.

Goede WYSIWYG-editors zijn Microsoft FrontPage, Adobe Dreamweaver en Adobe Live. Een gratis alternatief is NVU, een editor gemaakt door de Mozilla-gemeenschap.

Wij raden je aan zeker in het begin je pagina's in een teksteditor te maken of om enkel gebruik te maken van de HTML-editor in je meer gevanceerde programma :

• - Als je alle codes zelf moet typen, leer je het snelst hoe HTML in elkaar zit.
• - HTML is ook gewoon té simpel om het niet te kunnen.
• - Je hebt volledige controle over de code, want je schrijft die zelf. Iets aanpassen wordt dus makkelijker, omdat je weet hoe de code in elkaar steekt omdat je die zelf geschreven hebt.
• - Zoals gezegd steken veel programma's overtollige codes in de pagina's, waardoor je pagina langer moet laden en je broncode minder overzichtelijk wordt.

Beginnerstips

Je hebt waarschijnlijk al veel websites gezien en je weet hoe je site er uit moet zien, maar hier zijn enkele tips om een beetje gestructureerd te werken :

• - Maak eerst een plan van je site op papier. Welke pagina's ga je maken, hoe worden de verschillende pagina's aan elkaar gelinkt zijn, wat is ongeveer de inhoud en hoe gaat de navigatie en lay-out er uitzien ?
• - Wanneer je website af is, is het nodig om de hele site te controleren: werken alle links, werken alle scripts, kan de bezoeker op eender welke pagina terugkeren naar de startpagina, worden alle afbeeldingen weergegeven,...?
• - Als de website online staat controleer je je website nogmaals, maar nu online. Let er zeker op dat alle hyperlinks werken en dat alle afbeeldingen worden weergegeven.

Op deze site staat alles wat je moet weten om een website te bouwen. Als je van nul wil leren hoe een website te maken begin dan aan onze Basiscursus HTML.