Webdesign fundamentals

an extremely concise primer

Introduction

In this tiny primer I'll be specifically referring to a 'user agent' rather than a 'browser' since web pages, though so far mostly viewed in a browser on a screen, should be designed in such a way that they can also be rendered on a cell phone, read aloud by a screen reader or printed out by a printer [which are, in effect, other species of user agent].

At its lowest level, every website or –page therein consists of at least one and at most three different levels:

  1. the Model – the underlying HTML code which lends structure to the page
  2. the View – CSS styling directives which tell the user agent how to present the page
  3. the Controller – scripting instructions which add logic to the page

Of these three, a web designer should know at least the first two.

Structure

Adding structure to a page means telling the user agent the 'meaning' of every element in a page: "This is a paragraph, this is [part of] a sentence, this is tabular data and this is an image, audio or video object". The page itself, as well as each element contained in it, is delimited by a rectangular box shape. If you're using Firefox, try the 'show bordered boxes' alternative stylesheet under the 'View|Page Style' menu to see this demonstrated.

These boxes come in two flavours: those that have their own space on the page preceded and followed by line breaks, such as paragraphs, and those that preserve the flow of the text such as bold or italics. Not surprisingly, the first category are referred to as 'block elements' whereas the second are known as 'in–line elements'. A characteristic of the tags that represent these boxes, is that they have an opening and a closing tag. Everything between the tags is contained 'in the box', so to speak.

Obviously, the user agent must 'know' how to interpret these tags. To do that, it uses a socalled 'document type defintion' or DTD which, ideally, is to be found on the very first line of every page. If none is found, the user agent falls back on its built–in defaults.

Since block elements implicitly dictate white–space, this structure, of and in itself, is enough for a user agent to be able to render the page on its native device. The allocation and amount of white–space, the font–family and –size and the coloring of fore– and background are determined by the user agent's default settings.

Styling

CSS [Cascading Style Sheets] can be used to change those default settings by suggesting alternatives to the user agent: what color is the background, how big is the font, does a particular [class of] box have a border, &c. &c. Styles can also be used to refine the layout of the elements on a page: an element's margins and padding, and its position relative to other elements can be adjusted. Styling instructions can even change the display mode of an element from block to in–line to none and vice versa.

These instructions can be applied directly to an HTML tag [socalled 'in–line styles'] or contained in a style sheet, either in the page itself or linked to from the page.

Scripting

It is sometimes desirable for a page to be able to react to user actions, for example by hiding or showing certain parts. That way, information can be presented concisely and expanded on demand. Another frequent use is the validation of forms before they are submitted to a server: do all required fields have a value, is a submitted email address really an email address.

This presumes a certain degree of 'intelligence' in a page and thus necessitates a programming language. The language of choice for most [if not all] websites is JavaScript. Just as with styling, scripting instructions can either be mixed in with the HTML, contained in the page or included from a separate file.

Conclusion

In the web's early years, when there was no styling mechanism available, HTML was often abused to confer presentational information, to force the user agent to render the page in a certain way. The most glaringly obvious example of this is the use of tables and transparent GIFs for layout. From the above it should be clear, however, that HTML's purpose is strictly structural, not presentational, nor programmatical [if that were even possible]. Therefore, structure should not be mixed with style and/or script.

You are, in other words, ill–advised to use in–line styles or script. This has the added benefit that the style for or the behaviour of a group of pages can easily be adjusted by changing one separate style sheet or included script file.

NB: a look at the source of this page should make the above point abundantly clear:
the layout of the rendered page is almost identical to the structure of the source.

Valid XHTML 1.0! Valid CSS!

Webdesignbeginselen

een zeer beknopte uitleg

Introductie

In deze minieme uitleg zal specifiek worden gerefereerd aan een 'user agent' in plaats van een 'browser', aangezien webpagina's – die in de meeste gevallen worden bekeken in een webbrowser – zodanig zouden moeten zijn ontworpen dat zij ook weergegeven kunnen worden op een mobiele telefoon, voorgelezen door voorleessoftware of geprint door een printer [want dat zijn in feite andere varianten van user agents].

Op het laagste niveau bestaat iedere website of –pagina daarin uit minstens één en maximaal drie niveaus:

  1. het Model – de onderliggende HTML code die structuur aan de pagina geeft
  2. de View – CSS stijlregels die de user agent vertellen hoe de pagina gepresenteerd moet worden
  3. de Controller – scriptinstructies die logica aan de pagina toevoegen

Een webdesigner zou van deze drie op zijn minst met de eerste twee bekend moeten zijn.

Structuur

Door structuur aan een pagina te verlenen wordt de user agent duidelijk gemaakt wat de 'betekenis' van de verschillende delen van de pagina is: "Dit is een paragraaf, dit is [een deel van] een zin, dit zijn tabulaire gegevens en dit is een afbeelding of een audio– of video–object". De pagina – en ieder element op de pagina – wordt begrensd door een rechthoekige doos. Als je deze pagina bekijkt in Firefox, probeer dan het alternatieve 'show bordered boxes' stylesheet onder de 'View|Page Style' menu optie om dit gedemonstreerd te zien.

Deze dozen kennen twee varianten: dozen die worden voorafgegaan en gevolgd door een regelomhaal zoals paragrafen, en dozen die de loop van de tekst niet veranderen zoals vet of cursief. Het zal de lezer niet verbazen dat de eerste categorie als 'blokelementen' worden aangeduid terwijl de tweede bekend staat als 'in–line elementen'. Een kenmerk van de 'tags' die deze dozen vertegenwoordigen is dat zij een openings– en sluittag hebben. Alles tussen de tags zit als het ware 'in de doos'.

De user agent moet uiteraard weten hoe deze tags geïnterpreteerd moeten worden. Hij gebruikt daar een zogenaamde 'document type definition' of DTD voor die idealiter op de eerste regel van iedere pagina gevonden wordt. Als de DTD ontbreekt, valt de user agent terug op ingebouwde regels.

Aangezien blokelementen impliciet de witruimte bepalen is deze structuur op zichzelf voldoende om de user agent in staat te stellen de pagina op zijn daarvoor geëigende apparaat af te beelden. De toewijzing en hoeveelheid witruimte, de korpsfamilie en –grootte en de voor– en achtergrondkleur worden bepaald door de standaardinstellingen van de user agent.

Stilering

CSS [Cascading Style Sheets] kunnen worden gebruikt om deze standaardinstellingen te veranderen door de user agent alternatieven te suggereren: wat voor kleur heeft de achtergrond, hoe groot is het korps, heeft een doos [of een klasse dozen] een kader, &c. &c. Stijlen kunnen ook worden gebruikt om de positionering van de pagina–elementen te verfijnen: de marges en de vulling van een element en de positite ten opzichte van andere elementen kunnen worden aangepast. Er zijn zelfs stijlinstructies die de weergave van een element kunnen veranderen van blok naar in–line naar geen en vice versa.

Deze stijlinstructies kunnen direct op het HTML element worden toegepast [zogeheten in–line stijlen] of worden opgenomen in een stijlblad in de pagina, dan wel een los, extern stijlblad.

Scripts

Het is soms wenselijk dat een pagina kan reageren op handelingen van de gebruiker door bijvoorbeeld bepaalde delen te vertonen of te verbergen. Op die manier kan informatie op beknopte wijze worden gepresenteerd en op verzoek worden uitgevouwen. Een ander veelvoorkomend gebruik is de validatie van formulieren voordat ze naar de server worden gestuurd: zijn alle verplichte velden ingevuld en is een emailadres ook daadwerkelijk een geldig adres.

Dit veronderstelt een zekere mate van 'intelligentie' in een pagina en maakt dus een programmeertaal noodzakelijk. De taal in de meeste [zoniet alle] websites is JavaScript. Net als stijlen kunnen scriptinstructies vermengd worden met de HTML, afzonderlijk in de pagina worden opgenomen of vanuit een extern bestand worden gelezen.

Conclusie

Tijdens de beginjaren van het web, toen er nog geen stijlmechanisme beschikbaar was, werd HTML vaak misbruikt om presentatie–informatie door te geven, om de user agent te forceren de pagina op een bepaalde manier weer te geven. Het meest in het oog lopende voorbeeld hiervan is het gebruik van tabellen en transparante GIFs voor opmaakdoeleinden. Uit het bovenstaande zou echter duidelijk moeten zijn geworden dat HTML alleen voor structurele doeleinden is bedoeld en niet voor presentatie of programmering [als dat al mogeljk zou zijn]. Daarom dienen structuur en stijl en/of script strikt gescheiden te blijven.

Het is, met andere woorden, een bijzonder slecht idee om in–line stijl– of scriptinstructies te gebruiken. Dit heeft het bijkomende voordeel dat de stijl of het gedrag van een verzameling pagina's makkelijk kan worden aangepast door één afzonderlijk stijlblad of scriptbestand te veranderen.

NB: een blik op de broncode van deze pagina zou het voorgaande punt overduidelijk moeten maken:
de opmaak van de afgebeelde pagina is bijna identiek aan de structuur van de broncode.

Valid XHTML 1.0! Valid CSS!