WEB ontwikkeling & design BLOG

WEB ontwikkeling & design BLOG

Waarom ?

Deze blog biedt een platform om informatie te delen over HTML & CSS, JavaScript, PHP, (My)SQL, ... .
Niet alleen voor de cursisten en lesgevers uit de afdeling WEB ontwikkeling & design van het SCVO-ENCORA, Grote Steenweg 226 te Berchem - Antwerpen, maar met en door iedereen die geïnteresseerd is in de ontwikkeling van het internet

Form formating

HTML & CSSGeplaatst door Micky 30 jan, 2017 16:19:11
Formulieren zijn lastig om netjes te formatteren. Niet alle velden zijn even lang en/of hoog.
Een oplossing zou kunnen zijn om de lengte van de verschillende velden even groot te houden zonder het aantal characters te beperken. De gebruiker ziet enkel een "window" van zijn input, maar ons formulier ziet er wel netjes uit.
Deze oplossing is niet echt aanvaardwaar, UX, is en blijft een van de belangrijkste factoren waar we rekening mee houden als we onze user-interface ontwerpen.

We moeten dus naar andere oplossingen kijken, CSS transformaties bijvoorbeeld.
de code achter deze link geeft een voorbeeld van een mogelijke elegante oplossing voor ongelijke input-velden.
Laat eens weten wat jullie hiervan vinden

  • Reacties(1)//www.webontwikkeling.info/#post27

Article versus Section

HTML & CSSGeplaatst door Micky 16 jun, 2016 15:10:37

Een groot deel van de vragen die opduiken op forums, StackOverflow ,Twitter , e.d., in verband met HTML5, gaan over het gebruik van “<article>” of “<section>"

Heel vaak is het antwoord "geen van beiden, gebruik <div>".

Deze twee HTML5 tags, article of section, zijn niet zo gemakkelijk om te gebruiken omdat ze ons dwingen om na te denken over wat we aan het schrijven zijn en de manier waarop we onze inhoudgaan presenteren.

We moet nadenken op een manier die we nog niet eerder hadden bij het opmaken van een HTML-pagina. En terwijl dit een goede zaak, het vereist wel inspanning.

<div>

Als je gewoon een deel van je site wil stijlen, zonder dat de ingesloten elementen een structurele link met elkaar hebben, gebruik dan <div> .

<section>

Een sectie is een generiek deel van een document of toepassing.

Een deel, in deze context, is een thematische groepering van inhoud, meestal met een titel.

Laten we als voorbeeld een krant nemen.

Een krant is opgedeeld in verschillende secties: een sectie binnenland, een sectie buitenland, een sport-sectie, cultuur pagina’s ,…. .

Elk van deze secties staan op zichzelf en bestaan uit een aantal artikels.

<article>

Een article is specifiek deel van een sectie in die zin dat het een een op zichzelf staand (self-contained) deel van een document, pagina, applicatie of website is.

Dus met behulp van de bovenstaande kranten analogie zal de sport-sectie, enkel artikels bevatten die over sport gaan maar die volledig op zichzelf staan (self-contained).

Nesting

Om alles nog wat ingewikkelder te maken mag je “<article>” en “<section>” zoveel nesten als je wil. Voor HTML5 is het allemaal om het even

Voorbeeld:

<section>

<h1>Sport</h1>

<article>

<h1>Voetbal</h1>

<section>

<h3>Antwerp</h3>

</section>

<section>

<h3>Anderlecht</h3>

</section>

</article>

</section>

Conclusie

“<article>” of “<section>” dwingen ons om na te denken over de onderlinge samenhang van de verschillende onderdelen van onze web-paginas.

Indien er geen hiërarchisch verband is tussen de verschillende onderdelen kan je werken met enkel secties, met enkel artikels ofwel gebruik je gewoonweg <div>.



  • Reacties(2)//www.webontwikkeling.info/#post21