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 (voorbeeld volgt nu):

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 (voorbeeld volgt nu):

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

”trefwoord1-trefwoord2 Dit is de bijbehorende tekst.

Dit is de HTML code van bovenstaand plaatje dat klikbaar is:

<a href=”https://www.gerbengvandijk.nl”>”trefwoord1-trefwoord2HTML knop invoegen, blauw, met vrije, aanpasbare tekst (voorbeeld volgt nu):

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

Nieuwsbrief volgen

Dit is de HTML code waarmee bovenstaande knop is gemaakt:

<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

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>

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

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>

 

 

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 *