Een klontje html, voor bij de koffie

knippen en plakken!

UPDATE: aangepaste versie, met correcties vanuit de reacties hier en op Twitter.

De redacteurs op het werk, noch het lief thuis, noch vriend en kennis die aan het bloggen slaat, hebben zin of moed om zich in de talrijke en uitgebreide html-tutorials op het web te verdiepen.

Nee, ze willen gewoon ergens een link zetten, een euroteken in een tekst, tussentitels, een afbeelding toevoegen, … Simpele dingen, maar niet als je html niet in de vingers hebt zitten.

Voor hen heb ik een heel erg beknopt overzichtje gemaakt dat je als een blokje op je buro kan leggen, om snel even te bekijken als je ’t nodig hebt.

Ik wil nog even benadrukken dat dit héél beknopt is, de puristen onder jullie zullen vloeken en tieren dat het een aard heeft over alle heel erg belangrijke dingen die op geen van de zes zijden te vinden zijn. Het was voor mij ook moeilijk, da’s alles wat ik kan zeggen.

Het is ook geheel en al gratis, en gelieve het door te geven en te verspreiden. Ik vraag enkel om het niet voor commerciële doeleinden te gebruiken en mijn gegevens er niet af te halen.

Download de kubus als PDF

Aan degenen voor wie dit bedoeld is

Dit is de allereerste versie, waarschijnlijk nog niet perfect. Het is mijn bedoeling om hier een handige referentietool van te maken voor op het buro van online-redacteurs en bloggers-met-beperkte-html-kennis.

Om dat te verwezenlijken, graag jullie respons op volgende vragen:

  • Snap je de inhoud?
  • Wat ontbreekt er volgens jou nog?
  • Wat is er volgens jou overbodig?

Aan degenen voor wie dit niet bedoeld is

Aan jullie (nerds, that’s your cue) wil ik toch even vragen om het te bekijken en eventueel een antwoord te geven op volgende vragen:

  • Moet er iets van CSS op? En zo ja, wat dan? Want daar kan ik volgens mij nóg een heel blokje mee vullen.
  • Die html entities, is dat stilaan niet wat overbodig?
  • Aandacht voor semantische code? Komt op dit niveau eigenlijk vooral neer op het correct gebruik van H-tags, denk ik.
  • Welke gigantische kemel heb ik geschoten? Welk gapend hiaat heb ik laten zitten?

6 reacties op “Een klontje html, voor bij de koffie”

  1. Mooi initiatief, maar toch een paar opmerkingen:

    * Als je één maal aanhalingstekens gebruikt voor de attributen in je html-tags, doe dat dan consequent overal (img tag).

    * De opdeling gif/png/jpg is een pak complexer dan dat. Ook als vuistregel klopt de opdeling niet, ik zou het er gewoon af laten.

    * ol en ul kan je beter de semantische benamingen geordende lijst en ongeordende lijst geven (ordered list en unordered list)

    * Hetzelfde geldt voor de h1 t.e.m. h6-tags: "van groot naar klein" klopt niet. Het gaat "van het hoogste niveau naar het laagste niveau." Anders leg je de nadruk op de bepaalde esthetiek van de titels (grootte) en dat klopt niet.

    * Je uitleg van html kan volgens mij ook beter: het gaat niet om opmaak in de gebruikelijke zin van het woord, wat voor verwarring kan zorgen. Beter zou zijn "html is een metataal die dient om je tekst te structureren."

    * Typografisch dingetje: je kan misschien beter straight quote marks gebruiken in plaats van curly quote marks om je attributen te omgeven.

    Doe zo verder! 😉

  2. @Xavier:

    Waardevolle opmerkingen, maar in de praktijk zit het 'Ms-Word-denken' toch serieus ingebakken, daar heb ik rond proberen werken.

    Je document rendert perfect als je niet consequent overal aanhalingstekens gebruikt, dus hoewel dat zeer doet, ga ik daar geen punt van maken.

    gif/png/jpg ga ik er af zwieren. Al te veel zever meegemaakt met CMYK jpegs en zo. Ik wilde alleen even aangeven dat je geen .bmp kan invoegen. Maar de meesten hebben extensies uitstaan dus die zien dat geeneens. Lost cause.

    Lijstjes pas ik aan, is inderdaad beter. Misschien wel tussen haakjes 'meestal genummerd' bij de geordende lijst vermelden.

    Ik bedoelde niveaus, maar ik schreef van groot naar klein. Zal ik aanpassen.

    Ik wilde die html uitleg zo begrijpelijk mogelijk maken. De kubus is bedoeld voor mensen die dat verschil nog nooit hebben ervaren en het ook niet zien. Die zijn Word gewoon. Een titel is vetjes en vetjes is een titel. Ik wil ze niet wegjagen met woorden als 'metataal', hoewel dat inderdaad juist is en 'opmaak' eigenlijk niet helemaal klopt.

    Illustrator doet die quotes, ik ga ze proberen vervangen. Uiteindelijk worden die door de bedoelde gebruiker meestal ergens via een CMS ingegeven en stelt dat probleem zich niet zo vaak.

  3. Je onderschat het verstandelijk vermogen van je doelgroep volgens mij, maar het zij zo ;). Misschien kan je metataal gewoon weglaten en zeggen dat html dient om je tekst inhoudelijk te structureren? In de overweging begrijpelijkheid vs. verkeerde informatie geven vind ik het laatste toch de minder interessante piste.

    Dat je document perfect rendert zonder aanhalingstekens vind ik geen argument. Conformisme in html is er net om problemen nu en in de toekomst te vermijden. Maar laat me even mijn gebruikershoed opzetten: ik vind dat verwarrend. Want waarom staan er eerst wel aanhalingstekens en dan niet meer?

    De opmerking van die lijstjes vind ik wel terecht, "meestal genummerd" lijkt me een goede verwoording daarvoor!

  4. Ik werk aan een barcamp-presentatie over net dat fenomeen. Ik doe mijn best om niemand te onderschatten, maar 'k wil het ook niet moeilijk maken. Watch this space. 😉

    'Inhoudelijk structureren' vind ik wel een goeie. Argument dat daarin bij mij al succesvol is geweest is dat je automatisch inhoudsopgaven en zo kan genereren. Dat kan iedereen zich voorstellen.

    Point taken ivm die aanhalingstekens. 'k Zal dat aanpassen en/of eventueel wat verder duiden. Als er plaats is.

  5. Grappig, ik heb in mijn blog ook al een tijdje een artikel in draft staan over hetzelfde fenomeen. Ik zwier je feed bij deze in m'n reader en ik ben benieuwd naar die presentatie!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *