WebThings - by Jan Weijers
Alle hoofdstukken...
Inhoudsopgave
Inleiding
Een eenvoudig HTML document
Afbeeldingen
Lijsten
Links
Tabellen
Frames
Formulieren
Cascading stylesheets
JavaScript
PHP programmeren
Server side includes
CGI & Perl
Speciale tekens
Kleurvoorbeelden
Meer informatie
Software
Recente toevoegingen
Alfabetische index
In dit hoofdstuk...
Over WebThings
Wat heb je nodig?
Meer benodigdheden
Over HTML
Elementen en attributen
Definities

 

 

Language choice...
You have chosen to use Dutch as your preferred language.Nederlands vlaggetje Click here to switch to English.

Inleiding

Dit hoofdstuk begint met wat essentiele informatie over deze gids, legt uit welke software je nodig hebt en eindigt met definities van een paar essentiele begrippen.

Over WebThings

WebThings is tien jaar geleden begonnen als een HTML handboek. Nu is er ook informatie over van alles wat geen HTML is zoals javascript, server side includes, CGI, Perl en informatie over stylesheets bijgekomen. daarom heb ik in 2005 de naam van dit handboek veranderd in WebThings.

Dit handboek presenteert informatie in kleine brokjes en geeft daar steeds voorbeelden bij. Zo kun je makkelijk en snel leren en je nieuwe kennis direct toepassen.

Jouw reactie op dit handboek is van harte welkom. Heb je vragen of suggesties of heb je fouten ontdekt gebruik dan dit formulier om me dat te laten weten.

Ik, Jan Weijers, heb het auteursrecht op deze pagina's. Het ie niet toegestaan ze te kopiëren, vertalen of op een andere manier te publiceren zonder mijn expliciete toestemming. Linken naar deze pagina's mag natuurlijk wel.

Iedere pagina van WebThings heeft dezelfde onderdelen:

overzicht van een pagina

  1. links naar de subkopjes van dit hoofdstuk, als dit hoofdstuk die tenminste heeft
  2. links naar de andere hoofdstukken van WebThings
  3. een link naar de taalkeuze pagina, klik hier om te kiezen tussen Nederlands en Engels
  4. een link naar het formulier om mij vragen, opmerkingen en suggesties te sturen
  5. een link naar het world wide web consortium om te controleren of deze pagina's voldoen aan HTML 4 en CSS 2
  6. aan het eind van elk subkopje staat een link terug naar de bovenkant van de pagina
  7. mededeling auteursrecht

Het schrijven in of vertalen naar het Nederlands van dit soort documenten is altijd wat problematisch. Zo veel van de terminologie is in het Engels dat er zo af en toe "Nederlandse" zinnen ontstaan die voor de helft uit Engelse woorden bestaan. Ik gebruik zoveel mogelijk de Nederlandse woorden en termen.

To the top

Wat heb je nodig?

Om te beginnen heb je software nodig om HTML bestanden te maken. Als je op een Mac werkt raad ik BBEdit aan. Dat wordt gemaakt door Barebones Software. Als je (nog) geen geld uit wilt geven probeer dan eens Taco HTML Edit. Mijn favoriete editor voor Windows is HotDog. Je kunt dat kopen van Sausage Software. Overigens is er heel veel geschikte software van allerlei makers. En in principe kun je ook een gewone tekstverwerker gebruiken om HTML bestanden te maken. Let wel op dat je het bestand bewaart als gewone tekst en nooit als RTF of Word. Kies verder gewoon de software dit jou het best bevalt en die binnen je budget past.

Ten tweede heb je tenminste één webbrowser nodig. Op de meeste computers staan die al, bijvoorbeeld Internet Explorer (Mac en Windows) en Safari (Mac). Het is sterk aan te raden je pagina te testen in meerdere browsers. Liefst ook op meerdere systemen, bijvoorbeeld Mac en Windows. Zo weer je zeker dat je site voor iedereen toegankelijk is. Voor een overzicht van webbrowsers, kijk op de software pagina.

In principe kun je nu aan de slag met HTML. Als je een HTML editor hebt en een webbrowser heb je het minimum wat nodig is. Maak een pagina in de HTML editor en open die in de webbrowser.

Vervolgens heb je ook FTP software nodig. FTP staat voor "File Transfer Protocol" en in de meeste gevallen heb je FTP software nodig om je werk van jouw eigen computer te verplaatsen naar je webserver. Mijn favoriete FTP software voor de Mac is Transmit en voor Windows WS_FTP. Er zijn veel verschillende FTP pakketten met verschillende prijskaartjes dus ook hier geldt: kies iets wat jou bevalt en bij jouw portemonnaie past.

En dat is alles, als je een HTML editor, een webbrowser en een FTP pakket hebt, heb je alle software die nodig is om aan de slag te gaan. Als je niet te kieskeurig bent, kun je alle benodigde software gratis krijgen. Op de software pagina vind je links naar allerlei relevante software.

To the top

Meer benodigdheden

als je wilt gaan experimenteren met CGI scripts is het handig Perl te installeren. Je vindt links naar Perl op de software pagina. Als je Mac OS X of Linux hebt, staat Perl waarschijnlijk al op je computer.

Wellicht wil je ook PHP, de meest gebruikte script-taal installeren. Ook hiervoor vind je de links op de software pagina.

Als je van je eigen computer een volledige webserver wilt maken kun je Apache installeren. Mac OS X en Linux computer hebben waarschijnlijk Apache al staan. In ieder geval staan alle links op de software pagina.

Als je geen eigen webserver hebt, moet je ergens een host voor je site vinden. Als je student bent kun je meestal op de webserver van je universiteit terecht. Als je toegang hebt tot het Internet hoort daar bijna altijd ruimte op een webserver bij. Tenslotte zijn er bedrijven zoals geocities waar je gratis een webpagina kunt plaatsen. Daar worden dan meestal wel advertenties bij gezet. Als je een eigen domeinnaam wilt hebben ge je naar een bedrijf wat gespecialiseerd is in hosting. Je betaalt dan ongeveer vanaf €100,- per jaar.

To the top

Over HTML

HTML staat voor Hypertext Mark-up Language. Dat betekent gewoon dat het een set codes is om teksten op het world wide web te publiceren. HTML werd ook gebruikt om de opmaak van de teksten toe doen maar tegenwoordig gebeurt dat meer en meer door stylesheets.

HTML is eenvoudig te leren. Je kunt bovendien beginnen met hele eenvoudige pagina's en die uitbreiden naarmate je meer leert over HTML, stylesheets en Javascript.

Deze gids is een goed begin voor het leren van HTML en aanverwante zaken. Er is heel veel meer gratis informatie beschikbaar op het web. In het hoofdstuk Meer informatie vind je links naar Nederlandstalige en Engelstalige sites.

Alle broncode in de voorbeelden is geschreven op een lichtgrijze achtergrond in Courier, dus zo:

<B>Vetgedrukt</B>

Het resultaat staat meestal direct na de broncode, met een grijze rand in Times. Zo dus:

Vetgedrukt

Deze pagina's zijn geen volledige gids van alle elementen en attributen. Toch staat er meer dan genoeg in om een mooie website te bouwen. De gids is grotendeels bijgewerkt tot HTML 4.01 (strikt), de laatste versie van HTML. Op de website van het World Wide Web Consortium vind je informatie over HTML, CSS en alle andere standaarden die gelden voor het world wide web.

To the top

Elementen en attributen

Elk HTML element ziet er zo uit:

<ELEMENT> de tekst die wordt gepubliceerd </ELEMENT>

Er is altijd een element dat opent. Hetzelfde element met een "/" sluit de toepassing weer af. Voorbeeld van een element is <P> en </P> die begin en eind van een paragraaf aangeven.

Een attribuut is als het ware een uitbreiding van een element. Bijvoorbeeld:

<P CLASS="warning">

Het attribuut CLASS geeft aan dat dit een paragraaf is van het type "warning". Middels een stylesheet kun je nu een opmaak aan deze paragraaf een alle andere paragrafen met hetzelfde attribuut geven.

HTML 4 maakt op zich geen onderscheid tussen kleine- en hoofdletters. Dus <BR> is hetzelfde als <br>, allebei betekent het een nieuwe regel. Ik schrijf namen van elementen en attributen steeds in hoofdletters omdat ik dat overzichtelijker vind. Afhankelijk van de server die je gebruikt, kunnen namen van bestanden wel onderscheid maken tussen hoofd- en kleine letters. Op een linux computer is Index.html niet hetzelfde als index.html. Let dus goed op de namen van je bestanden. In XHTML moeten elementen overigens wel altijd in kleine letters worden geschreven.

To the top

Definities

Hieronder staan een paar dozijn definities van veel gebruikte termen. Leer ze vooral niet uit je hoofd maar kom nog eens terug naar dit hoofdstuk als je definities nodig hebt.

Afgekeurd elementen en attrributen die niet lang zijn onderdeel uitmaken van HTML. Browsers moeten deze elementen toch ondersteunen zodat lezers oude pagina's, die niet voldoen aan de laatste HTML standaard, toch kunnen blijven lezen (deprecated in het Engels).

Attribuut een uitbreiding van een element element.

Browser de software waarmee je pagina's op het world wide web bekijkt. Bekende voorbeelden zijn Internet Explorer, Firefox en Safari.

CGI Common Gateway Interface, kleine programmaatjes die zorgen voor interactieve webpagina's.

CSS Cascading Stylesheets, zie stylesheets.

Element Een bouwsteen van HTML, bijvoorbeeld A, STYLE en IMG zijn elementen. Worden soms ook tags genoemd.

FTP File Transfer Protocol. dit is een manier om bestanden over het Internet te versturen. Meestal zul je FTP gebruiken om HTML bestanden van jouw computer naar een webserver te kopiëren.

GIF Graphics Interchange Format; een bestandsformaat voor digitale beelden, eigendom van Compuserve. Werd veel gebruikt op het Internet maar is grotendeels vervangen door JPEG.

HTML is de afkorting van Hypertext Mark-up Language. Dat is de set codes die gebruikt wordt om documenten te publiceren op het world wide web. Het bijzondere aan HTML is dat er links tussen documenten gebouwd kunnen worden. De lezer kan van het ene naar het andere document springen door op een link te klikken.

HTTP Hypertext Transfer Protocol. Dit is het protocol wat dient om HTML bestanden van een webserver naar de lezer te sturen.

JPEG is de afkorting van Joint Pictures Expert Group en is et meest gebruikte bestandsformaat voor afbeeldingen op het web en voor digitale camera's.

LAMP Linux-Apache-MySQL-PHP. De combinatie van software of de meerderheid van de servers. Een Linux computer met Apache, MySQL and PHP. Als je een Linux computer hebt, is al deze software er waarschijnlijk al op geïnstalleerd.

Link door een link kan een lezer van jouw pagina naar een ander document springen, zelfs op een andere server. Links kunnen ook dienen om de lezer een e-mail te laten sturen of met een FTP-server te verbinden. Over het algemeen verschijnt een link als onderstreepte tekst maar dat hoeft niet.

MAMP Macintosh-Apache-MySQL-PHP. Ook een veelgebruikte combinatie van server-software. Een Macintosh computer met Apache, MySQL en PHP. Macs hebben Apache altijd geïnstalleerd maar PHP en MySQL zul je zelf moeten installeren.

MySQL Veelgebruikte, gratis database software. In combinatie met PHP kun je MySQL gebruiken om interactieve webpagina's te bouwen.

Pagina Gangbare term voor een HTML document, ongeacht de lengte ervan.

Perl Practical Extraction and Report Language, een relatief eenvoudige programmeertaal om formulieren op websites te verwerken.

PHP Hypertext Preprocessor, de meest gebruikte scripttaal. Je kunt PHP gebruiken om je pagina's interactief te maken en informatie uit databases te halen.

Server is een computer die jouw HTML bestanden beschikbaar maakt op het Internet met het Hypertext Transfer Protocol (HTTP). De meeste mensen hebben geen eigen server maken maken gebruik van een host. Om webpagina's te maken hoef je niets van servers of HTTP te weten.

Site de gangbare term voor een web site of server, een samenhangende verzameling pagina's.

Stylesheets bestanden waarin de opmaak van HTML bestanden opgeslagen is. Eén stylesheet kan gebruikt worden door meerdere HTML bestanden. Op die manier zijn vorm en inhoud gescheiden: vorm in stylesheets en inhoud in HTML bestanden.

Tag onofficiële naam voor element.

URL afkorting voor Uniform Resource Locator. En dat is een manier om Internet adressen zo op te schrijven dat altijd duidelijk is om welk protocol het gaat en waar het bestand te vinden is. Een voorbeeld: http://www.weijers.net/index.php. Eigenlijk staat daar "gebruik het HTTP protocol om het bestand index.php te halen bij de server www.weijers.net."

User agent officiële naam voor een browser.

WAMP Windows-Apache-MySQL-PHP. Een Windows computer met Apache, MySQL en PHP software.

To the top

 

Reacties welkom...

Ik hoor graag je mening over deze gids, informatie die je graag toegevoegd zou willen zien of eventuele fouten die je hebt ontdekt. Klik hier.

 

Open standaarden...

Deze site is volledig conform de open standaarden van het World Wide Web Consortium (W3C). Je kunt op de logo's klikken om dat te verifiëren.

HTML 4 logo

CSS logo

 

 

©1995-2017 Jan Weijers, the Netherlands. All rights reserved.
No reproduction by any means or in any language without prior permission of the author.