Ik kan nog goed herinneren dat we in 1995 onze eerste internet aansluiting kregen. We gingen het internet op met Netscape 1.0 of Internet Explorer 2.0. De meeste websites waren een simpele pagina met zwarte tekst op een witte achtergrond. Als je mazzel had stond er een foto op met 256 kleuren. Tenminste, als je de optie afbeeldingen weergeven had in geschakeld in je browser. Ik typte het adres van de website in en moest dan 5 á 10 minuten wachten voordat de pagina geladen was over mijn mega snelle 33.6k modem. Er is sinds die tijd een hoop veranderd.

Geschiedenis

HTML was in het begin ontwikkeld voor wetenschappers die hun onderzoeken wouden delen. Het was een simpele taal om de tekst te kunnen definiëren. Wat is deze zin? Is het een koptekst, een citaat, of deel van een paragraaf? Niets was gericht op ontwerp. Ze hadden gewoon een medium nodig om de informatie te delen. Toen de World Wide Web werd ontdekt als commercieel platform kwam er ook de behoefte om websites ook visueel aantrekkelijk te maken. Men wilde meer dan alleen die zwarte tekst op een witte achtergrond en een komische geanimeerde GIF. Dus begon men te kijken naar de visuele weergave van de HTML elementen in plaats van naar de definitie van deze elementen. Tabellen werden gebruikt voor de lay-out, om kolommen te maken of afbeeldingen te positioneren. Als je de tekst wou laten inspringen gebruikte je <blockquote>. De betekenis van de HTML werd verloren, alleen de visuele waarde bleef over. Maar omdat HTML hier niet voor was ontwikkeld schoot het als ontwerp taal al snel tekort. Er rees een behoefte naar een taal die geschikt was om te ontwerpen om HTML terug te laten keren naar zijn originele taak, de inhoud definiëren. Men zocht een taal die ontwerpers de vrijheid bood om het ontwerp over de HTML te laten vloeien. Cascading Style Sheets of CSS was het antwoord

CSS power

CSS geeft ontwerpers de macht om de weergave en gedrag van elk HTML element te bepalen. Men kan niet alleen elk verschillend element anders opmaken, je kan zelfs met behulp van ID’s, class en omringende elementen het zelfde element in een andere situatie anders opmaken. We kunnen zelfs een stap verder gaan. Als je een extern CSS bestand gebruikt kan je alle HTML bestanden er aan koppelen en continuïteit in het ontwerp creëren over de gehele website. De voordelen van externe CSS bestanden worden pas echt duidelijk wanneer je iets wilt wijzigen in een bestaande website. Stel je hebt een website met 50 pagina’s die elk een stuk of tien alinea’s hebben. De alinea’s zijn opgemaakt met Times New Romans en je wilt deze veranderen naar Arial. Wanneer deze zijn opgemaakt in HTML met het element: <font face=”Times New Roman, Times, serif”> dan zou je deze in elk van de 10 alinea’s op alle 50 pagina’s moeten wijzigen naar <font face=”Arial, Helvetica, sans-serif”>. Maar als de opmaak met CSS is gemaakt, hoef je alleen maar het CSS bestand te openen en p { font-family: “Times New Roman”, Times, serif; } te veranderen in: p { font-family: Arial, Helvetica, sans-serif; }. Ja ja dat is alles, maar één verandering op één plek.

Waarom niet?

Het is dus heel erg duidelijk dat het scheiden van inhoud en presentatie verre weg de meest praktische en minste tijd rovende techniek is om websites te ontwerpen. Dus waarom niet? Waarom zijn er nog zoveel beginner HTML cursussen die het nog op oude manier leren. Waarom zijn er nog steeds zoveel zakelijke websites die nog tabellen gebruiken voor de Lay-out. Waarom scheiden ze de presentatie niet van de inhoud? Waarom niet?

C$$

De tijd die je spaart met het volgen van de W3C aanbevelingen, zelfs al moet je alles over doen, is meer waard dan het geld in je zak. Het maakt een eind aan de oneindig herhalend coderen, spaart je ontelbaar veel uren van controleren op continuïteit in het ontwerp op de verschillende pagina’s, laat die frustraties liggen veroorzaakt door ingeklapte tabellen die je voor lay-out gebruikt. Als je door krijgt tot welke graad deze scheiding jou creativiteit stimuleert en hoeveel deuren naar innovatieve ontwerpen open gaan, zal je nooit meer een pagina op de oude mannier schrijven.

Wat is een DOCTYPE en waar is hij goed voor? Heb ik zo’n DOCTYPE überhaubt nodig?

Er is niet maar één type HTML, er zijn er zelfs een heleboel: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict, en nog vele anderen. Al deze typen van HTML zijn gedefinieerd in hun respectievelijke W3C specificaties, maar ze zijn ook gedefinieerd in een door machine leesbare taal die de juiste structuur, elementen en atributen van een type HTML specificeren. Zo’n definietie heet de “Document Type Definition”, of, afgekort, DTD.
~ Olivier Thereaux

Deze wordt gebruikt om de browser te laten weten welke versie van HTML je gebruikt. Als je hem niet gebruikt of verkeerd gebuikt, gaat de browser ervanuit dat je niet weet waar je mee bezig bent en zet hij zichzelf in ‘quirks mode’, die dingen niet rendert zoals het hoort. Het zou minder ‘kritiesch’ moeten zijn maar is eigenlijk lijkt het erg willekeurig en verwarrent. Het hoofdletter gebruik moet zijn zoals in het voorbeeld hier onder (met de in hoofdletters ‘DOCTYPE’). Hij wordt niet als andere tags afgesloten.
~ Patrick Griffiths – HTML Dog

Example

Vergeet niet dat de DTD grote invloed heeft op hoe je de code die erop volgt moet formuleren. Somige DTD’s vereisen dat extra tags in je document zet. Om het wat makkelijker voor je te maken heb ik een lijstje van DTD’s opgesteld.

HTML

HTML 4.01 Transitional

HTML 4.01 Strict

HTML 4.01 Frameset

XHTML

XHTML 1.0 Transitional

XHTML 1.0 Strict

XHTML 1.0 Frameset

XHTML 1.1

Het World Wide Web Consortium (W3C) ontwikkelt de standaard die regel geeft op het Internet. Jammer genoeg zijn er enkele bedrijven die van deze standaard afwijken bij het ontwikkelen van hun software. Het zal u wellicht niet verrassen als ik zeg te menen dat Microsoft één van deze bedrijven is. Alle versies van MS Internet Explorer tot en met versie 6 hebben grote problemen in de ondersteuning van CSS2. De nieuwe IE7 is een drastische verbetering, maar er zijn nog steeds verschillen in hoe CSS code wordt vertaald in verhouding met andere browsers. Microsoft schrijft ook eigen niet gestandaardiseerde code die alleen door Internet Explorer kan worden vertaald. Waneer je met MS Frontpage een website bouwt zijn er een redelijk aantal opties die zonder pardon of vermelding deze code gebruikt die door geen andere browser wordt ondersteund dan IE.

Persoonlijk geloof ik dat Firefox de browser is die meest conform de W3C standaard is ontwikkeld. Het is daarom ook de referentie browser voor deze website. Het zou dwaas zijn om de IE gebruikers te negeren, hoewel ik niet veel energie zou investeren om alles voor IE6 te optimaliseren. Het is niet redelijk om van webmasters te verwachten rekening te houden met verouderde versies van IE wanneer Microsoft zelf deze producten niet meer ondersteund. Browsers zijn in de regel gratis te downloaden. De automatische update van Windows XP installeert de upgrade naar IE7 en Vista wordt met IE7 geleverd. Op het moment van dit schijven zijn de helft van alle IE6 gebruikers al over op IE7. Natuurlijk als blijkt dat het gros van de bezoekers uit landen komen waar Windows 98 met IE5 nog gangbaar is, moeten wel degelijk stappen ondernomen worden om het voor deze mensen toegankelijk te maken. Vergeet niet, de bezoeker is koning.

Oké, je hebt gelezen dat je veel tijd en moeite kunt besparen als je de inhoud (HTML) en de presentatie (CSS) scheid. Maar hoe doe je dat in de praktijk? Hoe voorkom ik dat ik dat ik mijn HTML documenten toch gewijzigd moeten
worden als ik het ontwerp van de website wil veranderen? Het antwoord is eigenlijk veel makkelijker dan dat veel mensen denken. Als je continuïteit wil hebben in het ontwerp van je pagina moet die continuïteit ook in de XHTML zitten. De XHTML moet het raamwerk vormen waar de CSS – de stilering en lay-out, aan wordt opgehangen. In meeste gevallen bestaat een pagina uit een kop, inhoud, navigatie (links) en een voet. Je zou het kunnen vergelijken met een vrouw en hoe ze zich kleed. De vrouw zelf is de XHTML en haar kleding, make-up, accessoires en schoenen zijn de CSS. Mocht een vrouw dit lezen, wil ik duidelijk maken dat ik de term kop niet gebruik om beledigend te zijn maar om verwarring te vermeiden met het hoofd element (<head>) in de pagina. Deze vergelijking slaat op wat zich binnen het <body> element bevind. De navigatie links moet je hier zien als een accessoire omdat die niet een vaste plek heeft op het lichaam. Soms worden de navigatie links tussen de kop en de inhoud geplaatst en steeds vaker tussen de inhoud en de voet of helemaal op het eind. De verschillende onderdelen worden elk tussen <div> elementen geplaatst en krijgen elk een uniek "id" zoals in het volgende voorbeeld.

Voorbeeld

Dit maakt het mogelijk om gelijkwaardige elementen in de verschillende <div>‘s een andere opmaak te geven. Om extra controle te geven over de pagina in zijn geheel plaats je all deze <div>‘s binnen een andere <div> zodat de het XHTML document er als volgt uitziet.

XHTML

Het CSS bestand zou er dan zou uit kunnen zien.

CSS

In andere artikels wordt in gegaan waarom men dit op deze wijze doet.

VanBerghem.com gaat veranderen. Het design wordt vernieuwd en de indeling zal ook veranderen. We doen ons best om ervoor te zorgen dat de huidige links blijven bestaan zodat alle bladwijzers of favorieten blijven werken. Hou de website in de gaten om te zien waar we allemaal mee bezig zijn. Als u opzoek bent naar meer informatie over hoe websites op de juiste wijze worden gemaakt zult u blij zijn met de veranderingen die er aankomen.

De onderscheidende factor van deze website blijft de “Waarom” factor. Het is vaak makkelijker om dingen te leren en over te nemen wanneer er begrepen wordt wat de achterliggende gedachte is. Wanneer het duidelijk is waarom dingen op een specifieke wijze worden gedaan dan kunt u uw voordeel eruit halen en websites bouwen die sneller zijn, minder onderhoud nodig hebben en meer bezoekers trekken.

De artikelen die u hier binnenkort kunt lezen zijn bedoeld om u aan het denken te zetten en hopelijk af en toe een “aha!” moment te geven. Op veel websites staan stap voor stap handleidingen maar vaak wordt het concept niet uitgelegd waaruit u kunt leren hoe de techniek gebruikt kan worden voor uw eigen doeleinden. Dit concept is wat wij altijd proberen te integreren in onze artikelen.

Tot nu toe kon u over de onderwerpen (X)HTML CSS en WordPress lezen. Deze onderwerpen worden nu uitgebreid met o.a. PHP, HTML5, Google Adwords, Google Analytics en marketing. Wij willen al de verschillende facetten behandelen van het maken van succesvolle websites, en niet enkel blind staren op de code alleen. De reden waarom de website geheel vernieuwd wordt is omdat VanBerghem.com nu onderdeel is van Van Berghem Communications en Clean Creative Communications.

We hopen dat u blij bent met de veranderingen en de nieuwe koers die we gaan varen.

This website will go through some major changes. The design is going to change and so will the structure of the site. We will do our best to keep the old links working so any bookmarks you may have made won’t break. Please check back regularly to see what we’re doing. If you like more information about how make websites the right way you will like the changes we are going to make.

One element which will stay dominant on this website is the “why” factor. It is often much easier to learn and adopt the right way to do things when you understand the reason behind it. When you understand the intended purpose of doing things a certain way, you&quo;ll be able to use it to your advantage and make your websites faster, easier to maintain and draw more visitors.

The articles posted here will push you to think and hopefully give you some “aha” moments. Many website will show you step by step tutorials but don’t explain the concept behind it and this is what we will try to include in our articles.

So far our articles have been limited to (X)HTML, CSS and WordPress. Soon we will add other topics to this site such as PHP, HTML5, Google Adwords & Analytics, marketing and more. We want to focus on all different elements needed to make a successful website and not only the technical or code side.

The reason for all these changes is because VanBerghem.com is now part of Van Berghem Communications and Clean Creative Communications.

We hope you’ll enjoy the changes and the direction this website is going to take

Okay, so you read that separating the content (XHTML) from the presentation (CSS) can save you lot’s of time. But how do you turn that theory into practice? How do I avoid having to open my XHTML files when I want to change the design? The answer is actually a lot simpler than many may think. If you want continuity in your design, your content, the XHTML, will need continuity as well. The XHTML forms the framework to which you attach the styling and the layout. Most web pages are made up of several parts; a heading, main content, navigation links, and a footer. You could compare it to a woman and how she dresses herself. The XHTML is the woman itself and the make-up, clothes, accessories, and shoes are the CSS. The navigational links would fall in the category accessories because they don’t have a fixed place in the XHTML. Sometimes they’re placed between the heading and the main content but it’s becoming more common to place them between the main content and the footer or completely at the end. You’ll want place each of these parts inside <div> tags giving them each a unique "id" as shown in the example.

Example

This will make it possible to format the same elements differently within each <div> tag. To get more control over the page as a whole we place all these <div>’s within a container div so that the XHTML looks somewhat like this:

XHTML

The CSS attached to the XHTML could look something like this.

CSS

The in’s  and out’s on how it’s done this way is covered on other posts

I remember way back in 1995 we got our first Internet connection. I visited the web with Netscape 1.0 or Internet Explorer 2.0. Most websites had a white background with black text. Sometimes I was lucky and the site had an image on it with 256 colors. That is if I had the load images option enabled in my browser. I would type the address of the site and wait for five to ten minutes for the page to load over the mega fast 33.6k modem. A lot has changed since then.

History

When HTML was first written it was designed for scientist to share their research papers. It was a simple language to markup or to define the text. What is this sentence? Is it a header, a quote, part of a paragraph? Nothing was aimed at design. They just needed a way to share information. Once the World Wide Web was discovered as a commercial platform, there came a need to make websites attractive. People wanted more than just black text on a white background and a funny animated GIF. So the different HTML tags started being used for what they looked like in a browser instead of what meaning they had. Tables were used for layout, to create columns or position graphics. If you wanted an indented block of text you used <blockquote>. The meanings of the tags were lost, only their presentational value remained. Since HTML was never intended for this use, many shortcomings quickly became apparent. There emerged a need for a language that contained the design, allowing HTML to return to its original purpose of defining the content, a language that would give designers the freedom of letting the design flow in layers over the page, a sheet that would let the style cascade over the HTML. Cascading Style Sheets or CSS was the answer.

CSS power

CSS provides the designer with the power to define the look, feel and behavior of every HTML element. Every HTML tag can not only be styled differently but different styles can be defined for the same tag depending on their ID, class or HTML element they are embedded in. But you can take it a step further. When you keep the CSS styles in an external style sheet it gives you the ability to link the styles to all the HTML files creating a continuity of style across all of the sites pages. The true benefit of working with external style sheets becomes obvious when a change in design is needed. For example: You have a website with fifty pages. Each page has on average ten paragraphs. If you decide you want to use the Arial font instead of the Times New Romans font for your paragraphs and the font type of your paragraphs is specified with the tag <font face="Times New Roman, Times, serif"> in HTML, you would have to change the tag to <font face="Arial, Helvetica, sans-serif"> on each of the ten paragraphs in all fifty pages. That’s five hundred tags you have to change. If you had styled the paragraphs in an external style sheet, all you would have to do is open the style sheet and change p { font-family: "Times New Roman", Times, serif; } into p { font-family: Arial, Helvetica, sans-serif; }. Yes that’s right just one tag in one place, that’s all.

Why not?

It is clearly obvious that separating the style from the content is by far the more practical and time saving technique of designing websites. So why not do it this way? Why are there still so many beginner HTML courses that teach you the old way first? Why are there still so many corporate websites out there that still use tables for layout? Why aren’t they separating the content and the presentation? Why not?

C$$

The time you save by following the W3C recommendations, even if you have to redo the lot, is better than money in your pocket. It can put an end to miserable tedious and repetitive coding, save those countless hours checking the continuity in design across the different pages of your site, and lay to rest those frustrations caused by collapsing tables that you’re using for the layout. Once you realize to which degree this separation will stimulate your creativity and how many doors to new designs it opens, you’ll never code a page in any other way.

So what is a DOCTYPE and what is it good for? What does the DOCTYPE do anyway?

There is not just one type of HTML, there are actually many: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict, and many more. All these types of HTML are defined in their respective W3C specifications, but they are also defined in a machine-readable language specifying the legal structure, elements and attributes of a type of HTML. Such a definition is called a “Document Type Definition”, or, for short, DTD.
~ Olivier Thereaux

This is used to let the browser know what version of HTML you are using. If you don’t use it, or if you get it wrong, the browser will assume you don’t know what you’re doing and switch to ‘quirks mode’, which will not render things as they should be. Apparently it’s more ‘forgiving’ but it actually seems to be quite random and confusing. The case must be like that in the example below (with upper case ‘DOCTYPE’). It does not close like other tags.
~ Patrick Griffiths – HTML Dog

Example

Do note that the DTD greatly influences how you need to formulate your code that follows it. Some DTD’s require extra tags in your document. To make it easy for you, here’s a list.

HTML

HTML 4.01 Transitional

HTML 4.01 Strict

HTML 4.01 Frameset

XHTML

XHTML 1.0 Transitional

XHTML 1.0 Strict

XHTML 1.0 Frameset

XHTML 1.1

The World Wide Web Consortium (W3C) develops the standards that govern the internet. Unfortunately some companies do not follow and implement all standards and guidelines in their software. It probably won’t come as a surprise when I tell you that I think Microsoft is one of these companies. All versions of MS Internet Explorer up to, and including version 6 have major support issues with CSS2. The new IE7 is a major improvement but still interprets some of the CSS code in a different way than most other browsers. Microsoft has also written their own non-standardized code that can only be rendered in Internet Explorer. When creating a website with MS Frontpage, quite a few features will use this code without any notification that it isn’t supported by any other browsers than IE.

It is my opinion that Firefox is the browser that is best implemented conform the W3C standards. It will therefore be the reference browser for this website. It would be foolish to ignore IE users however I will not go through great lengths of effort to optimize it for IE6. It is not reasonable to expect webmasters to be mindful of previous versions of IE when the author, Microsoft, no longer provides any support on these products. Browsers are downloadable for free. Windows XP Automatic Update will upgrade to IE7, and Vista has IE7 preinstalled. At the time of this writing, more than half of the IE6 users have already upgraded to IE7. Naturally If most of your visitors are from countries where most users are still running Windows 98 with IE5, you must make sure it is presentable and accessible to these people. Remember, the visitor is king.