WordPress Website Tutorials for Beginners

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

Replace the quotation marks and add your own

List of HTML codes

1. Hover over an image and display hidden text.
This little square can change your life

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.

 

Title

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
List of html codes

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
List of html codes

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
List of html codes

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.
visit my profile page

affiliate disclosure

(Visited 64 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>