WordPress Website Tutorials for Beginners

Tutorial: How to create a HTML Code Block Text on your site.

We start with this basic code. You see the black block and the white text in it.

This is the html code which creates the block.

<div style=”background-color: black; color: white; margin: 20px; padding: 20px;”>
<h2>Wealthy Affiliate</h2>
Wealthy Affilate University gives the best internet course Worldwide, with their 95-99% rating, they have no competition, whatsoever!

</div>

Wealthy Affiliate

Wealthy Affilate University gives the best internet course Worldwide, with their 95-99% rating, they have no competition, whatsoever!

Now I will show you what you can change. You can make the block completely in your own style.
For that, you need different color codes, which you can find here.

 

I will use RED to show you where to put the color codes,

and BLUE for the codes which will change the character.

We are now going to change the colors. The black background color and the white text color.

<div style=”background-color: #CC9933; color: #660033; margin: 20px; padding: 20px;”>
<h2>Wealthy Affiliate</h2>
Wealthy Affilate University gives the best internet course Worldwide, with their 95-99% rating, they have no competition, whatsoever!

</div>

We copy and paste this html code block into the text area and get this result.

Wealthy Affiliate

Wealthy Affiliate University gives the best internet course Worldwide, with their 95-99% rating, they have no competition, whatsoever!

What we are now going to do is change the font.

These are the HTML codes for changing fonts, we use two of them.

Character size – <FONT SIZE=”4″> This letters are size 4</FONT>

Font color – <FONT COLOR=”#FF0000″> Here are RED characters</FONT>

Font color – <FONT COLOR=”#0000FF”> Here are BLUE characters </FONT>

Character types – <FONT FACE=”Arial”> Written in Arial</FONT>

Character types – <FONT FACE=”Purisa”> Written in Purisa</FONT>

<FONT COLOR=”#800080″, SIZE=”6″, FACE=”URW Chancery L”>Here is your adjusted text</FONT>

 

And this is the result from the Html font code above.
Character size – These letters are size 4

Font color – Here are RED characters

Font color – Here are BLUE characters

Character types – Written in Arial

Character types – Written in Purisa

Here is your adjusted text

 

By adding the next code you change 1st line font face in

<FONT FACE=”URW Chancery L”></FONT>

and the 2nd line in

<FONT FACE=”Purisa”></FONT>

<div style=”background-color: #CC9933; color: #660033; margin: 20px; padding: 20px;”>
<h2><FONT FACE=”URW Chancery L”>Wealthy Affiliate</FONT></h2>
<FONT FACE=”Purisa”>Wealthy Affilate University gives the best internet course Worldwide, with their 95-99% rating, they have no competition, whatsoever!</FONT>

</div>

We copy and paste this html code block into the text area and get this result.

Wealthy Affiliate

Wealthy Affiliate University gives the best internet course Worldwide, with their 95-99% rating, they have no competition, whatsoever!

The result is amazing, by just adding some html script there appears a whole different style.

<div style=”background-color: #66ff00; color: #009900; margin: 20px; padding: 20px;”>
<h2><FONT FACE=”URW Chancery L”>Tutorial html code block</FONT></h2>
<FONT FACE=”Purisa”>I hope you liked this tutorial, if you did, please leave a comment below!</FONT>

</div>

We copy and paste this html code block into the text area and get this result.

Tutorial HTML code block

I hope you liked this tutorial, if you did, please leave a comment below!

 I almost forgot to tell you about the marges: margin: 20px; padding: 20px;

When you set them at 5px the block becomes wider and narrower.

<div style=”background-color: #66ff00; color: #009900; margin: 5px; padding:5px;”>
<h2><FONT FACE=”URW Chancery L”>Tutorial html code block</FONT></h2>
<FONT FACE=”Purisa”>I hope you liked this tutorial, if you did, please leave a comment below!</FONT>

</div>

 

Tutorial HTML code block

I hope you liked this tutorial, if you did, please leave a comment below!

 

“HTML Code block” Tutorial

I was able to write these tutorials for you, because of the great course I am following on the

Wealthy Affiliate University.


visit my profile page

affiliate disclosure

(Visited 47 times, 1 visits today)
  1. Ian says:

    Hi Loes, this is one of the best sites I use. If I get stuck on something, I dont spend ages looking around google for an answer. I come straight here. Me and HTML did not get along very well, but with the help available here, I am slowly getting the hang of it. Thanks. Ian.

  2. Martine says:

    Hi Loes,
    Great stuff! This is very nice and helpful, I know many will benefit from your easy to use tutorial, keep up the good work!
    Kind regards
    Martine

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>