Tips voor het maken van een eigen webstek

of eerder

Een webstek maken kan op allerlei manieren:

Met een WYSIWYG-hulpmiddel

(WYSIWYG = What you see is what you get -- Wat je ziet dat krijg je ook).
Eén manier is om een programma te gebruiken waarin je de bladzijde ziet als een webpagina, en daarin meteen ook, in hetzelfde scherm, wijzigingen kan aanbrengen. Dit lijkt in het begin makkelijk, maar als er bij een wat grotere site frames, links (verwijzingen), en HTML-bestanden in verschillende subdirectories aan te pas komen, is het vaak toch niet handig, doordat de organisatie van de achterliggende HTML-code niet in beeld is.

Ik heb mijn kinderen bewust gestimuleerd om het wel met zulke tools te proberen, omdat ik ze mijn beroepsmisvormingen als C-programmeur niet wou opdringen. Maar toch werken twee van de drie nu uit zichzelf met tools waarbij je de HTML wel zelf ziet.

Er gaan geruchten dat met WYSIWYG-gereedschappen soms browser-specifieke code ontstaat (die bijvoorbeeld alleen goed werkt met Microsofts Internet Explorer, niet met producten van Netscape of vanaf een computer met Linux of een andere soort UNIX erop, en dat er ook nodeloos ingewikkelde code wordt aangemaakt.

Voorbeelden van zulke hulpmiddelen:

Met een syntaxis-hulpmiddel

Dit zijn teksteditors, maar met ingebouwde hulpfuncties om bepaalde HTML-constructies snel op het scherm te toveren. Je werkt dus rechtstreeks op de HTML-code. Maar ze hebben ook een venster waarin het resultaat, dus de bladzijde zoals die er in een browser gaat uitzien, wordt afgebeeld. Een combinatie dus van WYSIWYG en directe controle over de code.
Er zijn veel voorbeelden van zulke programma's:

Met een editor en een bladerprogramma

Bij deze manier schrijf je rechtstreeks zelf de HTML-code in een programma dat tekstbestanden kan bewerken, en bekijkt het resultaat in een browser (bladerprogramma). Daarvoor is natuurlijk wel wat kennis van HTML nodig.

Als teksteditors komen in aanmerking:

Browsers zijn bijvoorbeeld:

Nadeel van het werken met twee aparte programma's, een browser en een editor, is dat je af en toe moet overschakelen om het resultaat te bekijken. Dit gaat als volgt, bijvoorbeeld bij gebruik van Windows, Word en een browser van Netscape:

Een beetje omslachtig inderdaad, maar het voordeel is dat je de aandacht voor inhoud (de tekst) en vorm (structuur, links, plaatjes, opmaak) wat van elkaar kan scheiden.

HTML

HTML is rond 1991 uitgevonden door Tim Berners-Lee, die toen bij CERN in Genève werkte (hij zit nu ergens in Amerika). Internet, met email, FTP en newsgroeps, bestond toen al veel langer, maar het World Wide Web werd pas mogelijk door HTML en de browsers. Toen pas werd internet bij het grote publiek bekend.

Tegenwoordig is er een speciale organisatie die definities van de HTML-taal (ook de omvattende voorloper SGML, en het nieuwere XML) beheert:
World Wide Web Consortium. Daar is ook een HTML-controleprogramma (validator) te vinden. Zie hierover ook Dan's Web Tips: Validators (in het Engels).

HTML = Hyper Text Markup Language.
"Markup language" wil zeggen opmaaktaal, dus een taal waarin je de tekst kan formuleren, en ook hoe het eruit moet gaan zien, met plaatjes, en met links. Links zijn verwijzingen naar andere pagina's en sites, over de hele wereld; vandaar WWW = World Wide Web: elk document kan naar elk ander verwijzen, (ook naar een genoemde plek in het zelfde bestand) zodat alles als een gigantisch web aan elkaar komt te hangen.
Hyper Text: Het is meer dan tekst, want er zijn ook verwijzingen bij, naar andere teksten en naar plaatjes.

HTML is een tamelijk eenvoudige taal. HTML bestaat gewoon uit tekst, met af en toe wat commando's omsloten door < en >.

Voorbeeld: wat tussen <b> en </b> staat is "bold", dus staat in vetdruk. Dus <b>geeft aan dat "bold" begint, en hetzelfde met de slash /, dus </b>, geeft aan dat het weer stopt.

<i>Dit stuk tekst staat cursief, in het Engels italic, vandaar de i. Hetzelfde commando met de slash erbij stopt het weer.</i>

<u>Underline: onderstreept.</u>

<p>Het commando p heeft het begin en einde van een "paragraph" (Nederlands: alinea), dus wat in een tekstverwerker een harde return is.</p>

<P>Hoofdletters of kleine letters maakt hierbij niet uit, dus P mag ook, en dat geldt ook voor alle andere HTML-commando's.</P> (linknames, bestandsnamen en mapnamen uitgezonderd).

<br> is een break: begin op een nieuwe regel, maar blijf binnen dezelfde alinea.

Binnen HTML mogen naar believen spaties, tabtekens en nieuwe-regeltekens staan, voor het resultaat maar dat niet uit. Dus  ook   met wat extra spaties
of
ieder
woord
op een aparte regel: de browser maakt er wel weer vloeiende tekst van, met een enkele spatie tussen elk woord.

Er zijn cursussen op het web te vinden die alles stap voor stap uitleggen. Ik had er ooit een gevonden van Paul Russel, ergens hier of hier in de buurt. Maar daar staat nu niks meer.

Iets soortgelijks is "A Beginner's Guide to HyperText Markup Language", door Gregg Martin.

Hier is er nog een: Getting started with HTML by Dave Raggett. En deze voor gevorderden: Advanced HTML.

En deze is in het Nederlands.

Verder is het boek "Webdesign in de praktijk" van Peter Kentie (2003 of 2005) aan te raden. Zie ook deze toelichtende notitie.

Ik heb ook veel geleerd door te kijken hoe anderen het doen: als je op een site iets ziet dat lijkt op wat je zelf zou willen maken, dan kan je de browser vragen te brontekst (source code), dus de HTML-code waarmee het gerealiseerd is, te laten zien.

Hier zijn lijsten te vinden met links naar beginnersinfo:
Princeton

Bij een wat grotere site is het verstandig het materiaal te verdelen over meerdere bestanden, en uiteindelijk ook in verschillende subdirectories te plaatsen. Het beginpunt van de site kan het beste index.htm of index.html heten. De meeste webservers (programma bij de ISP dat de opgevraagde gegevens beschikbaar maakt aan de browser) zijn namelijk zo afgericht dat als er geen bestand in de URL (Universal Resource Locator, het webadres dus) genoemd is, maar alleen een domeinnaam of directory en geen bestandsnaam, ze zullen zoeken naar een bestand met de naam index.htm of index.html.
Voorbeeld: ik kan mijn eigen site voluit opgegeven als http://utopia.knoware.nl/~rharmsen/index.htm, maar met alleen maar http://utopia.knoware.nl/~rharmsen/ werkt het ook. (Die laatste slash weglaten geeft meestal ook niet eens problemen, maar laat die voor de veiligheid toch liever maar staan).

Bij gebruik van frames zal het index-bestand een FRAMESET-commando bevatten.

Zolang je met een eerste versie van je site aan het experimenteren bent hoef je hem nog niet zichtbaar te maken voor de hele wereld, dus op het web. Je ziet het resultaat in het bewerkingsprogramma, of je opent in de browser niet een weblocatie, maar een html-bestand op je eigen computer.

Wil je na een tijdje wel iets publiceren dan moeten de HTML-bestanden, en eventuele plaatjes (JPG of GIF en degelijke) overgezet worden naar de computer van de ISP (Internet Service Provider). Je moet dan een plek weten waar ze moeten komen te staan op de computers van de ISP, daar leveren ze gewoonlijk wel instructies voor.
Sommige browsers hebben zelf mogelijkheden voor het overzetten, onder de noemer publiceren. Het is mij niet duidelijk of ze daarbij ook FTP gebruiken, of hoe goed dit werkt als er meerdere bestanden en/of directories zijn.

Zelf gebruik ik een los FTP-programma (FTP = File Transfer Protocol), namelijk CuteFTP. Dit is een shareware-programma.

Vroeger gebruikte ik versie 2.0 van WS_FTP, een gratis programma. Dat was simpeler, maar werkte niet altijd even duidelijk. Tegenwoordig is hier een shareware-versie van, waarschijnlijk ook uitgebreider en beter dan de vroegere. Een probeerversie voor 30 dagen is hier op te halen.

Er zit ook een programma ftp.exe bij Windows 95 (en hoger?) geleverd, maar dat werkt met commando's, die je dan dus eerst moet leren. Voor wie al vertrouwd was een FTP-programma van UNIX (want daar komt het vandaan) kan dat wel handig zijn.

Frames

Met frames verdeel je het scherm in horizontale en/of verticale vlakken. In ieder vlak kan je een andere inhoud laten verschijnen, bijvoorbeeld om een menu en de gekozen onderwerpen steeds tegelijk in beeld te houden.
Voorbeeld van een FrameSet-commando: 

  <FRAMESET cols="40%,60%" framespacing=0 frameborder=1 border=2>
      <FRAME NAME="links"
          SCROLLING="auto"
          SRC="linker.htm">
      <FRAME NAME="rechts"
          SCROLLING="auto"
          SRC="rechter.htm">
  </FRAMESET>

Dit geeft een smaller linkergedeelte en een iets breder rechtergedeelte. De HTML voor elk gedeelte staat in de afzonderlijke bestanden linker.htm en rechter.htm. De namen (in het voorbeeld "links" en "rechts") verschijnen bij sommige tekstgeoriënteerde browsers in een soort keuzemenu op het scherm (zo werkt dat bijvoorbeeld bij Lynx, een niet-grafische browser voor UNIX-systemen), en het is mogelijk om bij verwijzingen (links) elders via de aanwijzing TAG=name te sturen waar de nieuwe pagina overheen moet komen te liggen.

In plaats van een indeling in twee delen is ook een verdeling is drie of meer stukken mogelijk. Op de plaats van een FRAME-instructie kan ook weer een nieuwe FRAMESET staan, zodat een horizontaal schermdeel verticaal verder onderverdeeld kan zijn, of omgekeerd, enz.

Zoals altijd is veel meer over Frames te leren door veel te experimenteren, en te kijken hoe anderen het doen. Het hele World Wide Web is tevens cursusmateriaal!

Copyright © 2000 by R. Harmsen.
Wijzigingen 3 maart 2000; 20 januari 2012: donatielink eruit