Wapen van de familie Bentein-Debaere in heraldische kleuren

Familiewebstek - Site Web de la famille - Family Website

Bentein - Debaere



Blogs

HTML lay-out

Introductie van het "probleem"

Vroeger was een beginneling in het opstellen van een HTML-pagina redelijk snel weg met het ontwerpen ervan. Je leerde een aantal "tags" en je kon aan de slag. Het enige medium waarop je pagina zou verschijnen was het scherm van een PC. Web browsers waren toen nog klein in aantal, zodat je niet veel rekening moest houden met kleine verschillen tussen de verschillende browsers.

Tegenwoordig - anno 2016 - is het aantal browsers  en de verschillende versies ervan (oud en nieuw) danig opgelopen dat je het overzicht verliest. Zeker, je kunt je website ontwerpen voor de moderste browsers, maar dan laat je heel wat potentiële "toeschouwers" links liggen. En dan spreek ik nog niet over het feit dat smartphones en tabletten met andere schermgroottes werken. Je voelt het al, het wordt een verhaaltje van het bos en de bomen ... Het ontwerpen van een degelijke webpagina wordt dus geen gemakkelijke klus.

Ik zocht daarom ook wat hulp bij het benaderen van het probleem. Ik vond op de website van W3Schools een zeer handige en compacte analyse. Ik heb het dan ook snel vertaald en aangepast voor later gebruik ...

HTML lay-out volgens W3Schools

1 - HTML lay-out elementen

Websites geven dikwijls "content" weer in meerdere kolommen (zoals in een magazine of krant). HTML5 biedt nieuwe semantische elementen die de verschillende delen van een webpagina definiëren:
<header> - Bepaalt een hoofding voor een document of een sectie
<nav> - Bepaalt een container voor navigatielinks
<section> - Bepaalt een sectie in een document
<article> - Bepaalt een onafhankelijk autonoom artikel
<aside> - Bepaalt "content" naast de gewone "content" (zoals een sidebar)
<footer> - Bepaalt een voet voor een document of een sectie
<details> - Bepaalt bijkomende details
<summary> - Bepaalt een hoofding voor het <details>-element

2 - HTML lay-out technieken

Er bestaan 4 verschillende manieren om multikolom lay-outs te maken.
Elk heeft haar pro's en contra's:
1 - HTML tabellen
2 - CSS "float" eigenschap
3 - CSS frameworks
4 - CSS flexbox
Welke te kiezen?

2.1 - HTML tabellen

Het <table>-element was niet ontworpen als een manier om lay-outs te maken! Het doel van het <table>-element is om getabelliseerde data weer te geven. Gebruik dus geen tabellen voor de lay-out van webpagina's!
Nadelen: tabellen bemoeilijken de code. Na een bepaalde tijd zal het aanpassen van de code zeer moeilijk worden.
Tip: Gebruik GEEN TABELLEN voor de lay-out van webpagina's!

2.2 - CSS frameworks

Wil je snel een lay-out creëren, maak dan gebruik van een framework, zoals W3.CSS of Bootstrap.
Voordeel: snelheid
Nadeel: leercurve (klein bij w3.CSS, groot bij Bootstrap)

2.3 - CSS floats

Het is gebruikelijk om volledige web lay-outs te maken door gebruik te maken van de CSS "float" eigenschap.
Voordeel: "float" is gemakkelijk aan te leren - je moet enkel weten hoe de "float" en "clear" eigenschappen werken.
Nadelen: floating elementen zijn gebonden aan de document "flow", zodat de flexibiliteit kan worden geschaad.

2.4 - CSS Flexbox

Flexbox is een nieuwe lay-out modus in CSS3.
Voordeel: het gebruik van flexbox zorgt ervoor dat elementen zich gedragen op een voorspelbare wijze als de pagina-lay-out moet worden aangepast aan andere beeldschermgroottes en andere toestellen met schermen.
Nadelen: werkt niet in IE10 en vroegere versies.

Besluit

Het lijkt me dat er slechts twee valabele methoden zijn om een moderne lay-out te kunnen maken: een CSS framework gebruiken of de CSS "float" eigenschap gebruiken. Persoonlijk opteer ik voor een framework, maar aan ieder zijn eigen keuze.

 

<< Ga terug naar de vorige pagina

 

 

Bentein - Debaere © 2018 | Design by Maur Bentein | Powered by GetSimple
contact: m_bentein[at]hotmail[dot]com