Web voor gevorderde beginners...

Uitleg nodig over HTML, CSS etc?

• Kijk voor de formele uitleg op de Nederlandstalige Handleiding HTML (en hun CSS handleiding) van de T.U. Delft.
• Of Engelstalig: kijk naar de reference guides van SitePoint: HTML, CSS en JavaScript. SitePoint heeft sowieso veel info over webdesign.
• Je eigen site on-line  checken op correct HTML gebruik: de HTML-checker en de CSS-checker. En: check hoe het er uit ziet zowel in Internet Explorer als in FireFox (of zo), zie vorige pagina!
• Ook handig: Tidy, een programma om (met name de door Microsoft gegenereerde) HTML op te schonen en te checken met de HTML standaard. Down te loaden van www.w3.org. Hier een lijst met configuratie-opties.
• CSS: welke browser ondersteunt welke features? Zie CSS contents and browser compatibility. Hoe krijg je toch op elke browser werkende code? Check strategieen op Cross-browser strategies for CS
• Wat staat er allemaal in de header van een HTML file? Zie mijn header uitleg.
• Mozilla heeft een site voor web developers met veel informatie (Engels).

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.

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).

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.

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):

• Deze site natuurlijk zelf
• God's Vuur web pages (de kerk waar ik lid van was).
• De site van de Healing Rooms Eindhoven.

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.