by

When you are having a WordPress website, you probably know that a lot of codes are stripped.
I have searched for HTML codes which are working on a WordPress template without using CSS or JavaScript.Here is a list of HTML codes which are working fine.
This tutorial will teach you how to hover a text and an image. How to place a border around a text or an image.

Warning: When you copy codes from one website to another, some programs will add extra” Quotation marks or do not recognize the “Quotation marks”. So after pasting the codes, replace these””.

Replace the quotation marks and add your own

List of HTML codes

1. Hover over an image and display hidden text.

This is the code for my picture:

<span style=”color: black;” title=”JOIN the best education online to learn all about affiliate marketing”><a href=”https://workathomefuture.com/getting-started” target=”_blank”>
<img class=”alignnone size-thumbnail wp-image-1266″ src=”https://workathomefuture.com/wp-content/uploads/2014/12/WA11-150×150.png” alt=”This little square can change your life” width=”150″ height=”150″ /></a></span>

This is the code you can copy:

<span style=”color: black;” title=”PLACE HERE YOUR HOVER MESSAGE”><a href=”PLACE HERE YOUR LINK” target=”_blank”>
<img class=”alignnone” src=”PLACE HERE YOUR IMAGE” /></a></span>

2. Hover over a text and display hidden text.

“What is Wealthy Affiliate?

 This is my code:

<p><span style=”color: red;” title=”WA is an open education resource to learn all about affiliate marketing”>”What is Wealthy Affiliate?</span></p>

This is the code you can copy:

<p><span style=”color: red;” title=”PLACE HERE YOUR HOVER MESSAGE”>”PLACE HERE YOUR TEXT</span></p>

3. Place a border around text.

This is the code for Title:

<div id=”page” style=”width: 100px;”>
<h1 style=”border: 2px black solid; font-size: 42px;”>Title</h1>
</div>

As you can see, the letter type is to big, you have to change the width of 100px or the font-size of 42px.

This is the code with a link to Visite my profile page:

<div id=”page” style=”width: 460px;”>
<h1 style=”border: 5px solid green; font-size: 42px;”><a href=”https://my.wealthyaffiliate.com/loes” target=”_blank”>Visit my Profile page</a></h1>
</div>

You can change the width, border px, color,  font-size, link and text.

4. Images and pictures with borders.

Outset Silver

This is my code for outset silver:

<img class=”alignnone wp-image-2169 size-thumbnail” style=”border: 10px outset silver;” src=”https://workathomefuture.com/wp-content/uploads/2015/01/Create-a-website-in-under-30-seconds-150×150.jpg” alt=”Create a website in under 30 seconds” width=”150″ height=”150″ />

This is the code you can copy:

<img style=”border:10px outset silver;” src=”PLACE HERE YOUR IMAGE URL” />

Outset Green

This is my code for outset green:

<img class=”alignnone wp-image-2169 size-thumbnail” style=”border: 10px outset green;” src=”https://workathomefuture.com/wp-content/uploads/2015/01/Create-a-website-in-under-30-seconds-150×150.jpg” alt=”Create a website in under 30 seconds” width=”150″ height=”150″ />

This is the code you can copy:

<img style=”border:10px outset green;” src=”PLACE HERE YOUR IMAGE URL” />
Outset Gold with link

This is my code for outset gold:

<a href=”https://my.wealthyaffiliate.com/loes” target=”_blank”><img class=”alignnone size-thumbnail wp-image-2169″ style=”border: 10px outset gold;” src=”https://workathomefuture.com/wp-content/uploads/2015/01/Create-a-website-in-under-30-seconds-150×150.jpg” alt=”Create a website in under 30 seconds” width=”150″ height=”150″ /></a>

This is the code you can copy:

<a href=”PLACE HERE YOUR LINK” target=”_blank”><img class=”alignnone size-thumbnail wp-image-2169″ style=”border: 10px outset gold;” src=”PLACE HERE YOUR IMAGE URL” /></a>

For different colors you can use all Hexa codes #CC0000

You can also use terms as:

dashed
DarkSlateBlue
groove gold
solid black
double black

Color names can be replaced by, red, green, orange, purple, yellow, etc.

I hope you liked this tutorial and list of Html codes.

Other interesting HTML posts

| Home | Use of Cookies | Privacy Policy | FAQ | Affiliate Disclosure | Contact |

© Loes Knetsch. All rights reserved.

Others also read...

Insert a PDF file on a Web Page

Loes Knetsch © When you put content into an iframe, you can use any information of every website to inform your public thoroughly without duplicating Read more...

Open an URL in a New Tab, Open a Link in a New Tab

  Loes Knetsch © A few months back, I have written a tutorial about how to open a link in a new tab. This tutorial Read more...

by