HTML en zo voor beginners deel 2

In deel 1 hebben we de concepten HTML, Webserver, Webbrowser en HTTP aangestipt. In dit deel gaan we iets dieper in op HTML …. en wat eruit volgde: een hele batterij verbeteringen: CGI, Server Side scripting (PHP), Client Side Scripting (JavaScript), CSS en nog veel meer.


HTML

Nadat Tim in 1989 zijn memo maakte met het voorstel om een tag gebaseerd document te gebruiken als communicatie middel, het HTML document, gingen veel verschillende groepjes hier mee aan de slag. Allemaal kwamen ze met eigen inbreng en eigen zelf bedachte tags.

Kortom: het werd chaos en er werd gezocht naar een standaard lijstje van tags die iedereen moest gebruiken. Handig, want zo kon ook een web-browser gestandaardiseerd worden. Rond 1995 kwam er beweging in. De originele tag taal werd met terugwerkende kracht HTML 1.0 genoemd en er werd vergaderd over welke tags wel en welke tags niet in HTML 2.0 zouden moeten worden opgenomen.

Mocht je nog geen ervaring hebben met een HTML document: copy en paste het volgende in een text document (bijvoorbeeld met notepad) en save / bewaar het document als “index.html”. Als je dit bestand dubbelklikt zal het openen in je browser.

<html>
<head>
<title>dit is de titel van het document</title>
</head>
<body>
<p>En hier is het HTML document !</p>
</body>
</html>

Elk HTML bestand begint met de tag <HTML> en eindigt met </HTML>. Binnen zo’n document heb je 1 gedeelte voor de meta data in de <HEAD> … </HEAD> en een gedeelte voor de content tussen <BODY> … </BODY>.

In 1995 werd een HTML working group gecreeerd die de standaarden voor HTML 2.0 vastlegde. De standaard werd vastgelegd in het request for comments (rfc) document nummer 1866. Als je dit document doorbladert zul je de tags (‘elementen’) zien terugkomen.

Direct daarna werden “Forms” toegevoegd waarmee je files kunt uploaden in formulier formaat. Er werden tabellen toegevoegd en client-side image maps (die niet meer gebruikt worden).

Tegenwoordig zitten we op HTML 5 dat door de meest moderne browsers ondersteund wordt.

Als je HTML wilt leren kun je dit het beste gewoon DOEN. Er zijn miljoenen websites die overzichten geven van HTML elementen en je kunt er lang mee zoet zijn om het compleet te masteren.

Belangrijker is dat je het concept door hebt. Het zijn tekst documenten die volgens een bepaalde standaard worden vormgegeven.

Een bekende site met meer HTML lessen en voorbeelden is http://www.w3schools.com/html/default.asp

Dynamisch documenten en CGI

Al voor 1994 begon men te werken met dynamische documenten. Bij een dynamisch document wordt het HTML document niet getypt door een gebruiker maar door een computer programma.

Dat werd dus veel gebruikt om back-office koppelingen te maken, de input van formulieren te verwerken en om allerlei applicaties te koppelen.

De interface tussen de server en programma die dynamische documenten genereren is gedefinieerd in de Common Gateway specification (CGI). (RFC 3875).

Dat betekende dat je programma’s kon maken, “CGI Scripts” die in elke mogelijke programmeertaal kunnen worden geschreven (Perl, C) enz… al rond 1995 kon je zo bijvoorbeeld onder Windows in Visual Basic programma’s schrijven om Windows DLL’s aan te roepen. Ik zelf schreef mijn CGI scripts meestal in Perl, nog steeds een van mijn favoriete talen.

De webserver roept dus het CGI script aan en geeft zowel omgevings variabelen door als de standaard input stroom door (d.w.z. de standaard communicatie). Het CGI script spuwt vervolgens de HTML uit die weer geretourneerd wordt naar de browser.

Als je in Google een woord typt en vervolgens op zoeken drukt zie je een lange rij van karakters in de browser, bijvoorbeeld: http://www.google.nl/search?aq=f&sourceid=chrome&ie=UTF-8&q=weblog

Het gedeelte vanaf het vraagteken (afspraak) is de “query string”, telkens als er dan een & staat heb je een paar gegevens dat “aan de achterkant” wordt doorgegeven.

Dus in het voorbeeld hierboven aq=f EN sourceid=chrome EN ie=UTF EN q=weblog. Wat die gegevens betekenen mag elke applicatie zelf bepalen.

Net zoals de querystring hierboven als afspraak is bepaald zijn er nog meer standaard variabelen die over en weer worden doorgegeven een ervan is het CONTENT_TYPE wat aangeeft in welk formaat de content is, bijvoorbeeld een HTML document of een JPG/PNG/GIF plaatje.

Je zult later zien dat je in WordPress met al deze zaken kunt spelen.

SERVER SIDE SCRIPTING

Na verloop van tijd kwam het idee om niet zozeer losse CGI scripts te hebben die aan de achterkant dynamisch HTML pagina’s maakten maar… om direct in de HTML pagina’s zelf code te plaatsen, gewoon tussen de HTML code door.

Er zijn erg veel server side scripting talen. Wellicht heb je gehoord van ASP en later ASP.NET van Microsoft of server-side Javascript of Perl of TCL server side script.

imageEchter WordPress maakt gebruik van “PHP”. Het is dus belangrijk om naast HTML iets van PHP te weten.

PHP werd ‘bedacht’ door een jongen genaamd Rasmus Lerdorf in 1995 voor zijn eigen prive website. Hij codeerde in Perl wat statements en kon zo handiger en sneller zijn website genereren.

Na verloop van tijd kwamen Zeev Suraski en Andi Gutmans hem helpen en herschreven het in C wat de basis vormde van versie 3. Ze vormden toen het bedrijf ZEND technologies wat nog steeds innig verbonden is met PHP.

Tegenwoordig zitten we op versie 5.3 en binnenkort komt versie 6.0 van PHP uit.

Als je een willkeurige bestand van WordPress opent zul je zien dat het compleet PHP is of PHP met HTML tags erdoorheen.

Een voorbeeld:

<?php

echo "hello world";

?>

Een PHP document begint altijd met <?php , vervolgens de code van PHP (“echo” betekent bijvoorbeeld dat de bijbehorende tekst op het scherm gezet moet worden) en dan een PHP end tag (“?>”) wat weer gevolgd kan worden door een stukje HTML wat weer gevolgd kan worden door een stuk PHP.

Een voorbeeld uit een WordPress thema:

<?php

/**
 * The Template for displaying all single posts.
 
   *
 * @package WordPress
 
   * @subpackage Twenty_Ten

   * @since Twenty Ten 1.0

   */


get_header(); ?>

		
<div id="container">
			
<div id="content" role="main">

			
<?php
			
/* Run the loop to output the post.
			
 * If you want to overload this in a child theme then include a file
			 
* called loop-single.php and that will be used instead.
			 
*/
			
get_template_part( 'loop', 'single' );
			
?>

			
</div>
<!-- #content -->
		
</div>
<!-- #container -->


<?php get_sidebar(); ?>

<?php get_footer(); ?> 

Net zoals HTML is PHP een kwestie van genoeg van die “tags” tegen komen en desnoods opzoeken. Hoe meer je er bent tegengekomen hoe beter je de taal begrijpt.

De belangrijkste site om meer informatie te zoeken is : http://php.net/ ; als je specifieke cases tegenkomt die je wilt vragen is: http://stackoverflow.com/ een heel goede vraag en antwoord site.

Een beetje basis kennis van PHP is handig om te weten hoe je kleine wijzigingen in je thema of in een plugin kunt maken van je website. Als je er beter in wordt kun je zelf thema’s en plugins gaan maken. Als je er heel goed in wordt kun je meehelpen aan de source code van WordPress.

CLIENT SIDE SCRIPTING

Bijna tegelijkertijd met het idee van server side scripting kwam het idee om ook aan de kant van de browser (dus bij de eindgebruiker) programmeer code toe te voegen aan de HTML pagina’s.

imageHet voordeel hiervan is dat er aan de kant van de client allerlei bewerkingen kunnen worden uitgevoerd zonder de server te belasten. Brendan Erich van Netscape kwam met zo’n taal genaamd Mocha wat later LiveScript ging heten en nog later JavaScript (1995). De standaardizatie naam is ECMAScript.

Client-side javascript heeft dus geen toegang tot de server en wordt gewoon meegeleverd in de code die je kunt zien als je op een willekeurige webpagina klikt op “view source”. Meestal echter wordt er een referentie gemaakt naar losse bestanden waarin de javascript code te vinden is.

Een voorbeeld is de Google Analytics code die je veel tegenkomt:

<script type="text/javascript"> 
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script> 
<script type="text/javascript"> 
    try {
        var pageTracker = _gat._getTracker("UA-306232-1");
        pageTracker._trackPageview();
    } catch(err) {}</script> 
	

Er zijn veel websites die je stukjes javascript code geven om in te voegen in je website om functionaliteiten uit te voeren zoals widgets.

Maar JavaScript is enorm gegroeid. Tegenwoordig zijn er initatieven als node.js waarin programma’s als webservers geschreven kunnen worden. Het is een grote wereld geworden waar je full-time in zou kunnen werken.

Dynamic HTML

Zoals we besproken hebben bestaat HTML uit een evenwichtige structuur. Je zou een hele HTML webpagina kunnen tekenen in een boom structuur. Die boomstructuur wordt de DOM genoemd. Het Document Object Model. Een web browser representeert elk HTML document als DOM om mee te werken. In zowel Google Chrome als Firefox als Internet Explorer vindt je een optie om die DOM te zien van elke willekeurige webpagina.

Als je nu client-side Javascript gebruikt om die HTML pagina aan de browser kant te manipuleren (bijvoorbeeld ‘plaats een sterretje als de gebruiker een verplicht veld niet heeft ingevuld’). dan spreek je over Dynamic HTML.

Let op: je zou net zo goed dat document naar de server kunnen sturen, daar laten controleren en dan opnieuw kunnen retourneren MET het sterretje maar het grote verschil is dus dat er geen round-trip naar de server wordt gedaan. Alle validaties zitten in dit geval aan de client-kant. In de HTML pagina zelf dus.

Een bekend voorbeeld destijds waren de Dynamische HTML menu’s. Hier kun je wat voorbeelden vinden. (tegenwoordig is het meer trendy om hiervoor CSS te gebruiken).

AJAX

Rond 2005 kwam langzaam de trend op om vanuit de client-side scripted pagina’s toch calls te doen naar de server maar wel op zo’n manier dat de server niet elke keer een nieuwe HTML pagina hoefde te retourneren. Bekende termen hierin zijn XMLHttpRequest, XM-RPC en JSON.

WordPress maakt hier veelvuldig gebruik van. Probeer maar eens een nieuw widget te “draggen” naar een sidebar, je zult zien dat je dit kunt doen zonder pagina verversingen. “onder water” stuurt de client-side javascript gegevens naar de server en krijgt gegevens terug, dus zonder dat de pagina ververst hoeft te worden via “requests”.

Vrijwel alle grote websites gebruiken nu “AJAX” en aanverwante technieken om de gebruiker een gebruikers interface te geven die meer lijkt op die van een desktop applicatie.

CSS

Iets heel anders is CSS. Binnen de programmeerwereld bestaat het geloof dat de “gebruikersinterface” altijd los moet staan van de code aan de achterkant.

Dat is bijna een heilig iets wat terugkomt in allerlei vormen en gedaantes.

Het idee is dat een grafisch team zich kan focussen op de GUI en een programmer team op de achterkant zonder elkaar in de weg te zitten.

Het idee is ook dat je dan eenvoudig de gebruikers interface kan aanpassen (bijvoorbeeld een andere achtergrondkleur) zonder dat je daarvoor programmeercode hoeft aan te passen of de content maar ook die gebruikers interface anders weergeven naargelang de gebruiker bijvoorbeeld in braille-vorm voor blinden of in printervorm voor een printer.

CSS (cascading style sheets) is een standaard die alleen gaat over de GUI.

Voorbeeld:

h1 { color: white; background-color: orange !important; }
h2 { color: white; background-color: green !important; }

Hiermee maken we de achtergrond van header1 oranje en de achtergrond van header2 groen.

Deze css ‘code’ kan in het HTML document zelf geplaatst worden of wederom in hierin gelinkte losse stylesheet bestanden (meestal met extensie .css).

In elke WordPress thema is er altijd een stylesheet.css waarin de regels zijn opgenomen voor de vormgeving van het thema. Dus alles wat te maken heeft met kleuren, lettertypes en vormgeving.

Java

De programmeer taal Java wordt niet gebruikt binnen WordPress behalve als je zelf Java applets of andere functionaliteit (zoals e.g. integratie met een java application server) gebruikt in je eigen thema.

Daarom skippen we Java in onze beschrijving.

Java is een programmeertaal die nu beheert wordt door het bedrijf Oracle.

Let op: Java is iets heel anders dan Javascript.

4 thoughts on “HTML en zo voor beginners deel 2

    1. Ik zal proberen het tempo laag te houden. Laat me weten welke zaken niet duidelijk zijn dan zal ik ze aanvullen.

  1. Zal met hulp van deze workshop uit-eindelijk een WordPress blog/site gaan maken. Heb gelijk 2 vragen.

    Bij sommige HTML Tags maakt het niet uit hoe je het schrijft, bijvoorbeeld: [br]
    of [/br] of [br /] het werkt allemaal… of is er toch een verschil?

    CGI scripts maak je als doorsnee-gebruiker niet zelf maar je kan er gebruik van maken door naar te verwijzen in je HTML document. Zijn er standaard CGI scripts die altijd exact hetzelfde doen ongeacht provider? En is de verwijzing naar zo’n CGI-script altijd hetzelfde of zijn er ook hier weer attributen?

    Keep up the good work, zal deze workshops blijven volgen.

    Gr. Surfbob

    1. Alleen [br /] is juist. Dat de overige varianten werken komt omdat je browser toch onjuiste HTML uitvoert omdat de HTML pagina in kwestie niet gedefinieerd is als strict. Ik heb dat niet genoemd maar je kunt in een HTML pagina opgeven hoe strict er gecontroleerd moet worden. Je kunt het zelf controleren door een validatie uit te voeren op je code. Dus, zoals genoemd in de posting: er bestaan alleen oftewel tag paren oftewel de gesloten vorm die dan direct eindigt op [ ... /].

      CGI-scripts: ik denk dat je in je hoofd een klein simpel perl scriptje hebt dat “iets uitvoert” vanuit een FORM. En dat je dit als “verwijzing ziet”. Ik vermoed dus dat mijn verhaal niet helemaal duidelijk is.

      CGI is alleen de gateway. Dat betekent dat elke pagina van elke applicatie inclusief WordPress en Joomla enz… “zo’n” applicatie is. Ik weet niet hoeveel applicaties er zijn maar ik denk dat je bijna op een oneindig aantal uitkomt, dus ik weet niet wat je als standaard ziet maar op elk domein zijn er wel “populaire oplossingen”. Elke pagina van elke website die niet uit puur HTML bestaat KAN als cgi aangeroepen worden. Het is een tijd mode geweest om modules in de webserver te hebben draaien die die calls afhandelen maar we zien nu weer een trend om elke call weer als cgi af te handelen.

      En ja… WordPress kun je bij elke provider draaien EN op je eigen laptop zolang je maar PHP geïnstalleerd hebt. Zodra je zelf een letter verandert (bijvoorbeeld een andere logo via een wijziging in de PHP code) heb je zelf je eigen “CGI” applicatie aangepast dus het hele doel van deze reeks is om juist wel doorsnee-gebruikers zelf deze applicaties aan te laten passen.

      De verwijzing… ik vermoed dat je wijst op de toevoeging op HTML 2.0 in 1995 om vanuit formulieren velden en waardes door te geven aan de achterkant naar een specifiek script (wat dus een php pagina kan zijn of een perl script) en dan via een HTTP request die informatie door te geven. De gehele lijst hierboven genoemd van AJAX tot PHP tot “roepen” applicaties aan de achterkant aan op veel wijzen anders dan louter “formulieren posten”. ELKE php applicatie en elke pagina daarbinnen kun je laten afhandelen als CGI. Dus ELKE php pagina fungeert als “CGI script” (ter vergelijking). Dus op ELKE pagina van je Joomla of WordPress of Google of Nu.nl: zodra je iets nieuws op je scherm krijgt… heb je potentieel zo’n aanroep gedaan. Dat betekent dus dat als je “aweblog.net” typt in je browser en je krijgt deze pagina dan heb je een CGI aanroep gedaan (omdat mijn PHP als CGI runt). Dus je moet denk ik de term “verwijzing” vergeten. ELKE hyperlink is namelijk potentieel zo’n verwijzing.
      Het is moeilijk om te spreken van een standaard verwijzing. Het is wel zo dat CGI een aantal standaarden definieert zoals de querystring: een lijst van waarden die altijd op dezelfde manier worden doorgegeven, op die manier kun je vanuit je PHP pagina of je Perl script die waarden opvangen en er iets mee doen. Maar let op: in deze tijden van AJAX roep je ook datzelfde PHP script aan maar dan bijvoorbeeld via een XMLHttpRequest in de pagina zelf in een stukje javascript. Die PHP pagina kan dan aangeroepen worden als CGI maar dat heeft niets meer te maken met een formulier o.i.d. Bekijk het veel breder dan een formulier en zie het meer als een manier om calls te doen naar applicaties die op de server draaien oftewel via HTTP oftewel via een AJAX call wat een mooie aanzet is tot mijn volgende blogpost :)

Leave a Reply