Web voor gevorderde beginners...

Na mijn webpagina voor beginners gelezen te hebben, en een eerste web page te hebben gemaakt, wil je misschien verder. Op deze pagina nog wat tips en onderwerpen.

Uitleg nodig over HTML, CSS etc?

Een index

De beschrijving op de pagina voor beginners gaat goed voor het maken van een verzameling losse pagina's, maar hoe maak je hier een samenhangend geheel van? Stel, je hebt een groep HTML files, hoe maak je daar een mooie index voor? Je hebt bijvoorbeeld de files '1.html' tot en met '5.html', en je wilt hierbij een file 'index.html' hebben vanwaaruit je naar die files kunt klikken. Kijk hiervoor op mijn pagina met meer details over hoe ik dat zelf doe: Hoe doe ik het.

De layout (opmaak) via CSS

Wat ik zelf van belang vind (en wat ook de oorspronkelijke bedoeling is van HTML, al houd niet iedereen zich hieraan) is het scheiden van de inhoud en de vormgeving. Dit is een van de redenen dat ik NVU (en eerder Frontpage Express) gebruik: deze voegt niet al die layout rotzooi toe die nieuwere frontpage versies hebben. Gewoon recht-voor-z'n-raap HTML.

Lettertypes (fonts)

Let op, lang niet alle fonts zijn op alle computers geïnstalleerd. Dus als je een apart lettertype uitzoekt kan het best zijn dat dat op andere computers er helemaal niet (zo) uit ziet. Zie Combined font survey results voor een overzicht van de meest voorkomende fonts (op die site nog veel meer nittige info over dit onderwerp).

De opmaak (kleuren, lettertypes, enzo) doe ik apart via een CSS style sheet. Het grote voordeel is ook dat als ik bijvoorbeeld de kleuren op mijn hele site wil wijzigen dit in maar één css-file hoef te doen (moerman.css) in plaats van in alle HTML files. Ander voordeel: je kan voor verschillende doeleinden verschillende css'en gebruiken, bijvoorbeeld bij printen een andere dan voor op het scherm. Kan je zorgen dat de navigatiebalk bij printen niet op het papier komt (zit niemand op te wachten). Bekijk maar eens het afdrukvoorbeeld bij deze pagina (via het File menu).

Ik moet eerlijk toegeven dat ik ook nog niet alles met CSS doe. Zo is de grove layout van de pagina (links kolom met navigatielinks, rechts de tekst) nog met een tabel gedaan, hoewel dat tegenwoordig ook goed met CSS gaat (zie bijvoorbeeld dit artikel over kolommen via CSS). Maar de meeste zaken zijn nu toch via CSS gedaan (ook bijvoorbeeld het 'op deze pagina'-blokje rechts bovenaan).

Valid CSS!Mijn site heeft geldige CSS styles, volgens de CSS validator van W3C.

Frames: waarom niet?

Waarom gebruik ik geen frames? Het nadeel hiervan is dat je mensen geen bookmarks (favorieten) kunt laten zetten naar een bepaalde pagina, alleen maar naar je startpagina (waar je top-level frame staat). Daarom maak ik liever allemaal aparte pagina's, meer gebruiksvriendelijk.

Bovendien raad het officiële webconsortium W3C het gebruik van frames tegenwoordig af. Het is eigenlijk een verouderd feature, en zou niet meer in nieuwe sites gebruikt moeten worden.

Het probleem is dan uiteraard: hoe krijg ik dan toch op elke pagina een navigatiekolom? Het is bij mij niet zo dat iedere pagina tijdens het maken al bijvoorbeeld de navigatiebalk links heeft. In de versie die ik bewerk is deze nog niet aanwezig, die voeg ik er pas later automatisch aan toe. Je kan zeggen dat ik thuis wel in frames denk en werk, maar de gebruiker niet met de 'nadelen' hiervan lastig val (in plaats daarvan gebruik ik kolommen). Zie ook bij Hoe doe ik het.

Files (MP3, exe) kunnen downloaden of weergeven vanaf je site

Als je wilt dat mensen files kunnen downloaden vanaf je site, dan moet je die files eerst zelf uploaden naar je provider, en dan in je HTML page er een link naar opnemen, net zoals je naar andere web pages zou doen. Mensen kunnen dan de files downloaden door op de link te klikken. Bijvoorbeeld (in HTML):

       <A HREF = "mijn_muziek.mp3">Dit is mijn muziek</a>.

Zet wel niet zo maar MP3 files of programma's van anderen op je site (in verband met copyrights en illegale kopiën).

Wil je muziek niet laten downloaden, maar automatisch laten afspelen, bijvoorbeeld als achtergrondmuziekje op je site, dan moet je het 'embedden' op je pagina, en hier zitten weer eens subtiele verschillen tussen diverse browsers... Heb een keer bij iemand de volgende HTML code gezien die goed lijkt te werken, in ieder geval met FireFox 1.0 en IE6 (kan mogelijk alleen met midi en .wav files? Nog eens testen):

<script language="JavaScript">
<!--
  if(navigator.appName=="Netscape")
  { document.write(
    '<embed src="mijn_muziek.mid" autostart="true" loop="1" hidden="true"></embed>');}
  else if(navigator.appName=="Microsoft Internet Explorer")
  { document.write(
    '<embed src="mijn_muziek.mid " autostart="true" loop="1" width=70 eight=25></embed>');}
  else
  { document.write(
    '<embed src="mijn_muziek.mid " autostart="true" loop="1"></embed>');}
//-->
</script>
<noscript><embed src="mijn_muziek.mid" autostart="true" loop="1"></embed></noscript>

Voor flash vide kan je iets soortgelijks gebruiken, kijk eens naar de vrij uitgebreide (Engelstalige) uitleg over de gratis flow player, hiermee kan je flash video files embedden in je web pages.

Scripting

Je hoort tegenwoordig veel over scripts. Java scripts, Perl, PHP, CGI, ... Scripts worden gebruikt wanneer je inhoud hebt die dynamisch moet veranderen, bijvoorbeeld voor het weergeven van gegevens uit een database, of van pull-down menu's. Die waarden kan je niet al van tevoren in je HTML zetten, maar moeten op ieder moment recent zijn.

Flash: ja of nee?

Flash is een veelgebruikte mogelijkheid voor bijvoorbeeld spelletjes, of mooie effecten. Pas op; lang niet alle computers ondersteunen Flash, de nieuwe iPad van Apple doet dit bijvoorbeeld expliciet niet! Altijd zorgen dat je pagina ook werkt zonder dit soort technieken.

Belangrijk hier onderscheid te maken tussen 'server-side' scripts en 'client-side' scripts:

  • Server-side scripts draaien op de server. Hiervoor moet je provider wel toestemming geven scripts op zijn server te installeren. Lang niet elke provider doet dat! Het voordeel hiervan is dar de server ook gegevens kan onthouden op de server (databases, guestbooks, etc) en kan delen over meerdere gebruikers. Server-side scripts worden typisch geprogrammeerd in Perl of PHP (maar kan ook in b.v. C), en worden ook wel CGI scripts genoemd (maken gebruik van CGI, Common Gateway Interface). Ik heb nu een pagina met wat uitleg over Perl CGI scripts.
  • Client-side scripts draaien in de browser van de gebruiker, en worden typisch geschreven in Java of JavaScript (maar kan ook in b.v. Flash). Is nuttig voor zaken die direct met de gebruiker samenwerken, zoals menu bars en spelletjes. Moet de gebruiker wel JavaScript aan hebben staan (wat in deze door virussen geplaagde tijd niet altijd het geval is). Bovendien is de ene browser de andere niet (Internet Explorer versus NetScape versus Mozilla/FireFox), en hebben ze allemaal hun eigenaardigheden: het schrijven van cliënt-side scripts die bij iedere gebruiker werken is dus best een klus.

JavaScript is een van de meest gebruikte client-side scripting talen. Simpele Nederlandstalige uitleg is te vinden op hccnet Home Cursussen (Nederlandstalig), goede (Engelse) uitleg op WDVL JavaScript Tutorial for Programmers maar wil je de diepte in kijk dan op DevGuru javascript. En ook de JavaScript voorbeelden op HowToCreate vind ik erg handig.

Er zijn heel veel sites met kant-en-klare scripts te vinden, zoals Matt's Script Archive met veel CGI (dus server-side) scripts, of leejoo's webhebbies met allerlei scripts en hints voor nieuwe web-makers (web-masters). Voor zowel cliënt- (nieuws-scrollers, menus, ...) als server-side scripts kijk op hotscripts.com. Voor voorbeelden met uitleg over JavaScript, DOM, etc zie ook BrainJar.

Mijn Sites

Enkele voorbeelden van sites die door mij gemaakt zijn (de meeste zijn 'onzichtbaar', b.v. die op het werk):

Meer info

Zie de lijst bovenaan deze pagina voor links naar pagina's met meer informatie over web-page ontwerpen, of kijk op mijn hobby-links pagina.