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.

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. Je moet daarvoor de classic editor hebben. 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: <>.

Welke HTML code moet ik ook alweer gebruiken voor…:

  • HTML tekstlink invoegen:
  • HTML plaatje linken
  • HTML knop invoegen, blauw, met vrije, aanpasbare tekst
  • HTML ankerlinks: 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
  • Lettertype, fontgrootte en kleur instellen via HTML (zonder CSS)
  • Kleuren kiezen en aanpassen via HTML
  • HTML opsomming maken (ongesorteerde lijst maken)
  • Standaard tabel maken in HTML code (traditionele tabel)
  • Extra witruimte toevoegen via HTML

Zie uitwerking:

HTML tekstlink invoegen:

Meer weten over HTML? Goede uitleg over HTML tags,  vind je op de W3schools website.

Dit is het HTML code voorbeeld van bovenstaande HTML tekstlink:

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

HTML plaatje linken

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

”trefwoord1-trefwoord2 Dit is de bijbehorende tekst.

HTML code voorbeeld van bovenstaand plaatje dat klikbaar is:

<p><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.</p>

HTML knop invoegen, blauw, met vrije, aanpasbare tekst

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

Nieuwsbrief volgen

HTML code voorbeeld om knop te maken:

<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>

HTML ankerlinks: snelmenu binnen pagina voor verspringen

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

Inschrijven

HTML code voorbeeld van een ankerlink:

<!– Startpunt HTML –><a href=”#snelnaar”>Snel naar Inschrijven</a>
<!– Eindbestemming HTML:–>
<strong><a id=”snelnaar” name=”snelnaar”>Inschrijven</strong></a>

HTML opsomming met ankerlinks boven aan een pagina

Opsomming scoren beter in Google en maken de inhoud overzichtelijk, HTML code voorbeeld:

Inhoudsopgave (=’HTML anker naar top’)

Inleiding
Terug naar top

Doel
Terug naar top

Voorbereiding
Terug naar top

Uitvoering bezoek
Terug naar top

Beoordeling
Terug naar top

Afronding
Terug naar top

Besluit
Terug naar top

HTML code voorbeeld bij deze klikbare opsomming:

<h2><a id=”Top” name=”Top”></a>Inhoudsopgave</h2>
<ul>
<li><a href=”#Inleiding”>Inleiding</a></li>
<li><a href=”#Doel”>Doel</a></li>
<li><a href=”#Voorbereiding”>Voorbereiding</a></li>
<li><a href=”#Uitvoering”>Uitvoering bezoek</a></li>
<li><a href=”#Beoordeling”>Beoordeling</a></li>
<li><a href=”#Afronding”>Afronding</a></li>
<li><a href=”#Besluit”>Besluit</a></li>
</ul>
<a name=”Inleiding”></a>Inleiding en reikwijdte
<a href=”#Top”>Terug naar top</a>

<a name=”Doel”></a>Doel audit
<a href=”#Top”>Terug naar top</a>

<a name=”Voorbereiding”></a>Voorbereiding
<a href=”#Top”>Terug naar top</a>

<a name=”Uitvoering”></a>Uitvoering bezoek
<a href=”#Top”>Terug naar top</a>

<a name=”beoordeling”></a>Beoordeling
<a href=”#Top”>Terug naar top</a>

<a name=”Afronding”></a>Afronding
<a href=”#Top”>Terug naar top</a>

<a name=”Besluit”></a>Besluit
<a href=”#Top”>Terug naar top</a>

HTML video embedden met YouTube iframe embed code

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

HTML code voorbeeld van hoe deze video op deze website is geplaatst:

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

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 voorbeeld Lees verder: (host dit plaatje vanaf je eigen website/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″ />

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

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

HTML code voorbeeld afwijkende vormgeving van titel:

<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 eronder.

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 voorbeeld lijst items weergeven:

<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 tabel maken in HTML code (traditionele tabel)

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
Maand Besparingen Kosten
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>
<thead>
<tr>
<th colspan=”3″>Binnentitel die aandacht trekt</th>
</tr>
</thead>
<tbody>
<tr>
<th align=”left”>Maand</th>
<th align=”center”>Besparingen</th>
<th align=”center”>Kosten</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>

Extra witruimte invoegen via HTML

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

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

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>

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

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

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