Deze handige HTML code voorbeelden helpen webredacteuren die zich ergeren aan de slechte vormgeving op de website waar ze aan werken. Soms wil je de weergave snel even verbeteren. En dit artikel met vele, bruikbare HTML codes is dan een goede HTML handleiding om voor elkaar te krijgen wat nodig is. Je vindt hier HTML codes voor tabellen, knoppen en plaatje linken e.d. Kortom, goede HTML voorbeelden om in je broncode te plakken. Je kunt HTML en CSS leren via deze online cursus.

Handige HTML code voorbeelden

Waar kun je deze HTML code voorbeelden inplakken?

Binnen WordPress websites kun je onderstaande HTML code voorbeelden in de broncode plakken.

HTML toevoegen Classic editor:

De classic editor, deze heeft twee tabs (rechtsboven), genaamd ‘Visueel’ en ‘Tekst’. Als je op ‘Tekst’ klikt, zit je in de modus waarin je HTML kunt plakken. Het is ook de plek in WordPress waarin je de Iframe code van Youtube kunt plakken. Bij sommige andere contentmanagementsystemen (CMS), vindt je de HTML modus onder het symbool: <>.

HTML toevoegen Gutenberg block editor:

In Gutenberg editor kun je een speciaal blok kiezen als (custom) HTML element. Je kunt HTML erin plakken.

Welke HTML code moet ik ook alweer gebruiken voor…:

Een stukje HTML code kan problemen met weergave van webcontent snel oplossen. In dit artikel:

    • HTML tekstlink invoegen:
    • HTML plaatje linken
    • HTML knop invoegen, blauw, met vrije, aanpasbare tekst
    • HTML ankerlinks aanleggen: snelmenu binnen pagina voor verspringen
    • HTML opsomming met ankerlinks boven aan een pagina
    • HTML video embedden met YouTube iframe embed code
    • HTML Mailchimp knop maken met ‘Lees verder’ en embedden
    • HTML link naar WhatsApp maken, zie ook onder.
    • Lettertype, fontgrootte en kleur instellen via HTML (zonder CSS)
    • Kleuren kiezen en aanpassen via HTML
    • HTML opsomming maken (ongesorteerde lijst maken)
    • HTML TABEL – Standaard tabel maken in HTML code (traditionele tabel)
    • Extra witruimte toevoegen via HTML
    • Klikbaar emailadres HTML
    • Klikbaar telefoonnummer HTML
    • Mailchimp HTML code (zie apart bericht erover, via Zoeken)

Zie uitwerking:

HTML tekstlink invoegen (voorbeeld):

HTML code tekst voor klikbaar maken via hyperlink (= HTML modus WordPress):

arbo werkplek inrichten thuis bol com kopen

<p>Meer weten over HTML? Goede uitleg over HTML tags,  vind je op de <a href=”https://www.w3schools.com”>W3schools</a> website.</p>

Uitkomst (wat je dus ziet)(=Visueel modus in WordPress)
Meer weten over HTML? Goede uitleg over HTML tags,  vind je op de W3schools website.

HTML plaatje linken (voorbeeld van gemaakt klikbaar plaatje, volgt nu):

HTML code voor plaatje linken via hyperlink:

<a href=”https://www.gerbengvandijk.nl”><img class=”alignnone” src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/07/favicon.png” alt=”trefwoord1-trefwoord2″ width=”196″ height=”196″ align=”left” /></a> Dit is de bijbehorende tekst.</a>

Uitkomst
Weergave van hoe het HTML code voorbeeld toont:

trefwoord1-trefwoord2 Dit is de bijbehorende tekst.

Hoe klikbare WhatsApp link op je website maken?

De hyperlink naar WhatsApp heet ook wel ‘Click to Chat’-link, ‘Stuur ons een appje’-link of ‘app ons’-link.

Whatsapp link op website, basis: zonder ingevulde tekst

HTML WhatsApp link:

https://wa.me/316XXXXXXXXX

Whatsapp link voor website; met een standaard berichttekst

HTML WhatsApp link met tekst:

https://wa.me/316XXXXXXXXX?text=Ik%20wil%20informatie%20over%20html%20link%20Whatsapp%20maken%20WordPress

HTML knop invoegen, blauw, met vrije, aanpasbare tekst (voorbeeld volgt nu):

Hoe een HTML-knop maken die werkt als een link? Dus als je op de knop klikt, wordt webbezoeker doorgestuurd naar een pagina. Welnu, deze HTML code heb je dan nodig:

<p><a href=”https://czo.us11.list-manage.com/subscribe?u=3ebf40372c34964b6c3ab6199&amp;id=9614948969″><span style=”padding: 7px; border-radius: 4px; color: #ffffff; text-decoration: none !important; border-bottom-color: #004782; border-bottom-width: 3px; border-bottom-style: solid; box-shadow: 0px 3px 7px rgba(0,0,0,0.4); background-color: #0066cc;”>Nieuwsbrief volgen</span></a></p>

Uitkomst:
Nieuwsbrief volgen

HTML ankerlinks: snelmenu binnen pagina voor verspringen

Wil je weten hoe je ankerlinks kunt maken in HTML? Hier heb ik al een apart artikel over gemaakt met 4 HTML codes voor zelf anker links maken in WordPress.

HTML video embedden met YouTube iframe embed code (voorbeeld volgt nu):

Weergave van hoe het HTML code voorbeeld toont, knip/plak de HTML programmeercode eronder.

HTML code van bovenstaande video, het gaat om een Ifram die via YouTube (delen via insluiten) is verkregen, zo plak je deze in:)

<p><iframe src=”https://www.youtube.com/embed/KzGOASxvVcU” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>

(tegenwoordig plak je gewoon de YouTube link in het venster van WordPress, video wordt dan automatisch geembed, zonder dat je iframe hoeft te gebruiken of in te voeren)

HTML Mailchimp knop maken met ‘Lees verder’ en embedden

Weergave van hoe het HTML code voorbeeld toont, knip/plak de HTML programmeercode eronder.
Zie ook mijn artikel over Mailchimp knop maken die altijd werkt op gerbengvandijk.nl

HTML code van bovenstaande ‘Lees verder’ knop: (host dit plaatje voortaan vanaf je eigen website/upload deze naar media!)

<!– Start code – Knop met vaste tekst ‘Lees meer’ –><a href=”&quot;https://www.gerbengvandijk.nl””><img style=”width: 110px; margin: 0px 15px 15px opx;” src=”http://czo.nl/sites/default/files/button-lees-verder-mailchimp-czo-3.jpg” align=”left” hspace=”0″ vspace=”15″ />

aaa

Lettertype, fontgrootte en kleur instellen via HTML (zonder CSS, voorbeeld:)

Titel via HTML kleurcode, of hoe je zwarte letters blauw maakt

HTML code van bovenstaand tekst/titel in blauw uitgevoerd:

<h3><span style=”color: #1f4aa7; font-family: Tahoma; font-size: x-large;”>Toezichthouder kwaliteit zorgopleidingen</span></h3>

Kleuren kiezen en aanpassen via HTML

RGB/HEX kleuren kiezen/vaststellen, kan via de website:

  • Zie het Adobe kleurenwiel, gebruik het 5 kleuren palet in het “Adobe colorwheel”.

RGB kleur naar HEX omzetten/vertalen, kan via de website:

HEX kleur naar RGB omzetten/vertalen, kan via de website:

HTML opsomming maken (ongesorteerde lijst maken)

Weergave van hoe het HTML code voorbeeld toont, knip/plak de HTML programmeercode die eronder staat, nu het voorbeeld:

Het online vakgebied valt, bij wijze van voorbeeld, uiteen in vier gebieden:

  • online communicatie
  • online marketing
  • SEO en linkbuilding
  • pr- en persvoorlichting
  • usability- en gebruikersonderzoek

HTML code behorende bij bovenstaande opsomming, hierbij de HTML code om dergelijke lijst zelf te maken in WordPress:

<p><strong>Het online vakgebied valt, bij wijze van voorbeeld, uiteen in vier gebieden:</strong></p>
<ul>
<li>online communicatie</li>
<li>online marketing</li>
<li>SEO en linkbuilding</li>
<li>pr- en persvoorlichting</li>
<li>usability- en gebruikersonderzoek</li>
</ul>

Standaard SEO* tabel maken in HTML code

* SEO tabel HTML: deze HTML tabel is geoptimaliseerd voor de Google zoekmachine

Weergave van hoe het HTML code voorbeeld toont, knip/plak de HTML programmeercode eronder.
Zie ook de w3c school website over tabellen maken in HTML. Dit is het HTML voorbeeld:

Tabel: Besparingen en kosten per maand

In het voorjaar van 2018 zijn er besparingen gerealiseerd, waar ook kosten voor gemaakt zijn.

De relatie tussen kosten en opbrengsten, = caption voor Google

Binnentitel die aandacht trekt
MaandBesparingenKosten
januari€95€70
februari€90€80
maart€195€110

HTML tabel code voorbeeld: (Zie ook: tool Tableizer voor via Excel HTML tabel maken)

<p><h2>Tabel: Besparingen en kosten per maand</h2>
<p>In het voorjaar van 2018 zijn er besparingen gerealiseerd, waar ook kosten voor gemaakt zijn.</p>
<!– Start tabel – dit is een html commentaarregel –>
<table border=”1″ summary=”besparingen en kosten overzicht kwartaal 1, 2018″ width=”100%” cellspacing=”0″ cellpadding=”5″ align=”left”>
<caption><h4>De relatie tussen kosten en opbrengsten, = caption voor Google.</h4>
</caption>
<table summary=”<!–lange omschrijving in trefwoorden –>”>
<thead>
<tr>
<th colspan=”3″>Binnentitel die aandacht trekt</th>
</tr>
</thead>
<tbody>
<tr>
<th align=”left”><h3>Maand</h3></th>
<th align=”center”><h3>Besparingen<h3></th>
<th align=”center”><h3>Kosten</h3></th>
</tr>
<tr>
<td>januari</td>
<td align=”center”>€95</td>
<td align=”center”>€70</td>
</tr>
<tr>
<td>februari</td>
<td align=”center”>€90</td>
<td align=”center”>€80</td>
</tr>
<tr>
<td>maart</td>
<td align=”center”>€195</td>
<td align=”center”>€110</td>
</tr>
</tbody>
</table>
<!– Einde tabel, deze opmerking of commentaarregel binnen deze HTML code kun je bijvoorbeeld verwijderen –></p>

NB. Lees ook het voorbeeld van HTML tabel met sponsoren (en logo,s) maken.

Extra witruimte invoegen via HTML

Witruimte toevoegen aan regels of pagina via HTML kan zo:

Lege regel tussenvoegen (paragraaf)(geheugensteuntje dat ik hier zelf bij gebruik: “EightNotherBlankSPaceforDotSake”)
<p>&nbsp;</p>

Halve paragraaf tussenvoegen (break):
<br> of <br />

Voorbeeld regel afbreken via HTML:

Dit is<br>een paragraaf<br>met regelafbrekingen.

Combinatie van beide HTML tags: woorden/zinnen afbreken via HTML:
<p>Deze zin loopt niet helemaal door, want wordt <br>
onderbroken door een break</p>

Klikbaar emailadres HTML maken

Het verzenden van een e-mail via een hyperlink, kan door deze HTML link in te voegen:

Emailadres linken via HTML (eenvoudig)

<a href=”mailto:[email protected]”>[email protected]</a>

HTML hyperlink voor email sturen met onderwerp (mailto link)

<a href=”mailto:[email protected]?subject=Reactie via de website”>Stuur reactie</a>.

Emailprogramma openen link HTML (2 x CC, 1 x BCC&subject)

<a href=”mailto:[email protected][email protected], [email protected]&[email protected]&subject=Reactie via de website”>Stuur reactie</a>.

Klikbaar telefoonnummer HTML

Hoe maak ik een telefoonnummer klikbaar via HTML, zodat smartphone of mobiele gebruikers een telefoonnummer bellen door een hyperlink te drukken. HTML code tel:
Zie ook meer voorbeelden voor weergave telefoonnummer als link via Stackoverflow.com:

<a href=”tel:+31623661106″>(+31) 06 23 66 1106</a> of

arbo werkplek inrichten thuis bol com kopen

<a href=”tel:030-3661106″>030-3661106</a>

Tot zover de HTML voorbeelden, voel je vrij om jouw voorbeelden naar gerbengvandijk.nl toe te mailen, dan komen ze hierbij voor andere webredacteuren.

Gerben G van Dijk online specialist en SEO uit regio Utrecht46% procent van alle pagina's op deze blog staan in de top 10 van Google (2021). Denk jij erover je Google SEO uit te besteden, maar niet aan een SEO agency? Vanuit de regio Utrecht doe ik een contentanalyse via Google Search Console, SE-Ranking en Google Ads (SEA). Samen met uw organisatie werk ik toe naar toegankelijke, begrijpelijke én bruikbare content. In de vorm van SEO teksten, fotografie en ook video. Kwaliteitsgericht en op de lange termijn. Zodat uw organisatie voortaan aan de weg timmert met hogere online zichtbaarheid. Benieuwd wat ik voor jouw organisatie kan betekenen? Mail dan  [email protected] of bel even: 06 – 23661106.