Life's Better When You Build Your Future Online ยป START HERE!

It’s only recently that you’ve been able to “build” a WordPress based website, and NOT know anything about “coding” at all. It’s really amazing what page builder software, like Elementor, can do! And even the “Visual Editor” within WordPress is getting pretty good at WYSIWYG (What You See Is What You Get) editing of page and post content!

Coming from a 20-year history of using real “code” to build websites… it certainly makes MY life as a web designer a lot easier, even if I still tend to spend a lot of time in the text editor ๐Ÿ™‚

But…

There are times when YOU really DO need to “tweak” some content ever so slightly! So you will need to click on the TEXT tab and get down and dirty with the raw code! Everyone really should have a basic understanding of what the common HTML codes actually DO!

And it’s not that hard to do, so don’t panic too much! I’m not suggesting you get stuck right into it and start a coding empire… although you never know what might happen LOL

General Tags

First up, it’s useful to know that every paragraph of text is created with a paragraph tag at the start of the paragraph, like this: <p>

So the previous paragraph would look like this…
<p>First up, it's useful to know that every paragraph of text...

If you need to add a break at the end of a line, then simply type the </br>
tag where you want the line to move down.

I like the <center></center> tag which puts the text in the center of the row, just like this:

Center this text.

And every now and then, you might want to use the horizontal rule tag <hr> to put a… well a horizontal line between paragraphs, just like this:


Content Emphasis

Knowing how to emphasise certain bits of text us very useful as it can break up row upon row of boring text, and adds elements like headings, bold, italics etc.

Headings come in many different sizes… as in:

<h1>Heading 1 – in the main pageheading</h1>

<h2>Heading 2 – the MOST important sub heading</h2>

<h3>Heading 3 – the next most important sub heading etc</h3>

<h4>Heading 4 – etc</h4>

<h5>Heading 5 – etc</h5>
<h6>Heading 6 – etc</h6>

Note: these actual sizes (and text colours) are set by the theme you are using.

If you want to make a word or phrase bold then you simply type a “tag” <strong> and then type the word or phrase you want bolded, and then “close” the tag </strong>

So… Make this bold! would look like
<strong>Make this bold!</strong>

As you can see, in this case, the tag for bolding surrounds the bit you want!

Similarly, you can use
<em>for emphasis / italics</em>for emphasis / italics
<u>for underline</u>for underline

List Items

If you ever need to make a list of items, then you can use either the Unordered <ul> list <li> tag which displays a bullet next to each item like this:

<ul>
<li>first item in the list</li>
<li>next item</li>
</ul>

which shows this:

  • first item in the list
  • next item

OR you can use the Ordered <ol> list <li> tag, which shows numbers next to each item, like this:

<ol>
<li>first item in the list</li>
<li>next item</li>
</ol>

which shows this:

  1. first item in the list
  2. next item

Getting Harder Now…

Now we’re up to two special HTML tags, which are probably the MOST complicated ones you need to know…

These are the tags which are used to create LINKS, and to display an IMAGE.

The Anchor (Link) Tag

The Anchor (or “A”) tag <a></a> is made up of several components, which provide these essential pieces of information:

  • the starting <a tag.
  • href="URL"> the actual ADDRESS/URL of the item you want to link to (href = hypertext reference), and
  • possibly some text or an image which the user can “click” on, and then
  • the closing </a>tag.

For example, a link to the YBI home page, could look something like this…

<a href="https://yourbrilliantidea.com">Your Brilliant Idea</a>

And a few more examples…

<a href="https://www.google.com">link to Google</a> link to Google
<a href="https://wordpress.org">link to WordPress</a> link to WordPress

The Image Tag

Finally, you probably also need to recognise what an image tag looks like and how it works…

  • the starting <img tag.
  • src="imageURL"> the actual source ADDRESS/URL of the IMAGE you want to display,
  • the dimensions of the image in pixels (width and height),
  • a description of the image in the alt part of the tag, and then
  • the closing part of the tag >

<img src="https://yourbrilliantidea.com/wp-content/uploads/candle-600sq-150x150.png" width="150" height="150" alt="candle" >

and here’s the end result for that:
candle

Well, now you know just enough to be “dangerous” ๐Ÿ™‚

Or at least you hopefully understand a little bit more about what might be going on behind the scenes on those pages that don’t want to behave properly.

Play with the HTML code from time to time… It’s fun. And good luck with it all.

Stephen Spry

Well, this is where I'm supposed to say how great I am :) So if you didn't know that already... In a nutshell, I've been online full-time since 1995 as a web designer and publisher. I am now a "digital nomad" enjoying life on the road in Australia, and bringing you this great training as I travel!!!

Close Menu