One of the programming questions we often get asked here at Art Unlimited is “How do I make my page content look better?”  When writing blog posts or editing page content there is often a need to format the content to make it stand out.  Bold text, italics and stylized headings are just a few examples of the types of formatting needed.  Thankfully, most of these basic edits are available in the visual editor mode as seen below.

mikesimg1

This blog post series is for those who would like to know a bit more about what is going on behind the scenes and try some basic HTML coding for themselves.  Once you learn the basics of coding, you will find that it opens up many possible options for your content formatting.

 

Basic HTML coding 101

HTML defines the structure of your site content. Your web browser “reads” the HTML and displays the web page based on that coding.

Here are a few rules that you will need to follow when you start using HTML code:

Every element of the site content is surrounded by HTML code elements called “tags”. 

Here is the HTML code tag that denotes a paragraph:

Notice that the “p” (that stands for paragraph) is surrounded by a “<” and a “>”. Every HTML tag must have these brackets around it.

As mentioned before, your site content is surrounded by these tags. Most of these HTML code tags are required to have an opening tag and a closing tag.

EXAMPLE:
<p>This is your site content paragraph.</p>

In the example above, there is an opening tag “<p> “.  This tells the browser that a paragraph is starting.  There is also a closing page “</p>”.  This tag, with the “/” included tells the browser that the paragraph is ending.  Pretty simple, right?

It is also important to know that tags can be placed inside of tags.  For instance:

<p><i>This is your site content paragraph in italics.</i></p>

Notice that if you do place a tag within a tag (known as nesting) they need to be closed in the same order that they were opened. 

Some tags do not need a separate closing tag like this </p>.  These are tags that stand alone and open and close themselves.  Here is an example that we will discuss in more detail later:

<hr/>

Notice this tag has a “/” after the hr (which stands for horizontal rule).  This tag can stand alone and does not surround content.  So, it does not need the </hr> closing tag.

The last thing we will mention here is that tags can also contain attributes that give more formatting options for that tag.  In the example below, the style attribute further defines some options for the paragraph tag.

<p style=”color: blue;”>This will make your site content paragraph colored blue.</p>

These are the basic rules for HTML coding and styling.

Where do I enter my code?

Now that you know some basic coding rules, you will need to know how to enter this into your page or post.

If you are going to be adding HTML code for your page or post in WordPress, you will need to select the text tab at the top of your editor box.

mikesimg2

This is important because HTML coding will not work properly from the visual editor.

Now you know the basics of HTML coding.  Be watching for upcoming posts on some basic tags you can use on your WordPress site.

 

10essentialitemscta

Share this post:
Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInEmail this to someone