How To Write Basic HTML for Absolute Beginners

By CorexpandCX on February 17, 2012

As your customers and prospects visit your website, there may be times that you want to emphasize a certain idea or have a particular idea attract a little more attention.

One simple way to do that is by altering your text. The way to do that is by employing the right HTML code. For those of you who don’t have your own IT department, or want to save a little money hiring a developer for small jobs like that, here is a little primer on HTML.

It’s not as hard as you might think, so check it out and have some fun while you’re at it.

HTML is a kind of webpage programming language (HTML stands for Hyper Text Markup Language). While the name sounds complicated, working with it is really pretty simple.

Basic Concepts

Let’s start with some basic concepts.

1) HTML works with something called tags. Tags are the basic building blocks of webpages.

2) Tags contain keywords that tell your web page to perform certain actions on the content of your page.

3) The basic structure of a tag is – <TAGNAME>items or content to be acted upon here</TAGNAME>

It’s important to note here that HTML is a “language” for webpages. And just like any other language, you have to use the right “words” or characters to communicate what you want (programming language is often referred to as “syntax”). Therefore, the brackets and the slash are an important part of each tag.

Creating Your First Tag

Let’s start with an ordinary sentence and turn it into some “fancy” HTML:

The quick brown fox jumped over the lazy dog’s back.

If you were to place that sentence on a webpage, it would display just the way you see it above.

But suppose you wanted to bold the word “jumped” in that sentence. How would you do it?

You would rewrite the sentence adding the STRONG tag from HTML (exactly as you see it below):

HTML:      The quick brown fox <STRONG>jumped</STRONG> over the lazy dog’s back.

RESULT:             The quick brown fox jumped over the lazy dog’s back.

Note that the tags won’t actually print on the page – just the result of the tags.

The opening tag (<STRONG>) instructs your browser to start creating bold characters until it encounters the ending tag (</STRONG>).

Now suppose you want to turn the entire sentence into one big headline. You would simply rewrite it using the HTML heading tag like this:

HTML:
<H1>The quick brown fox jumped over the lazy dog’s back.</H1>

RESULT:

The quick brown fox jumped over the lazy dog’s back

Tags are placed at the beginning and the end of whatever you want the tag to affect. The <H1> tag tells your browser to start treating the characters that follow like a big header. The </H1> end tag tells it to stop. The tags H2, H3, H4, and H5 (remember the proper syntax!) create decreasingly smaller headings.

For example, this is how it looks with h3 tags:

HTML:<H3>Your Heading Text</H3>

RESULT:

Your Heading Text

Working With Color

Next let’s make the word brown print using the color brown.

To create color, you’ll need to use a <SPAN > tag with the STYLE property of that tag. A property modifies what a tag does or how it does it. The <SPAN> tag is a kind of container that allows us to modify everything inside of it. Look at our sentence now:

HTML:
<H1>The quick <SPAN style=”color:brown;”>brown</SPAN> fox jumped over the lazy dog’s back.</H1>

RESULT:

The quick brown fox jumped over the lazy dog’s back.

Notice that we wrapped the SPAN tag only around the word “brown” and used the style color property setting it to brown.

The style property can be used with many different HTML tags. We’ve used it here with the SPAN tag because the SPAN tag is a kind of generic container tag. Later you’ll discover where you can go to learn more about the various properties of tags.

Notice that the STYLE property is placed within the beginning SPAN tag (<SPAN>) not the ending SPAN tag. The double quotes and colon of the style property are necessary.

How would you rewrite the style property we just created to change the color to red? (Hint: style=”color:red”).

Now by extension, if we wanted to make the entire headline red, we could add the STYLE property to our H1 tag like this:

HTML:
<H1 style=”color:red”>The quick <SPAN style=”color:brown”>brown</SPAN> fox jumped </H1> over the lazy dog’s back.

The quick brown fox jumped

over the lazy dog’s back.

The default text color your browser uses to draw text on a webpage is black, so any text that isn’t modified by a style property will print on your webpage as black.

(Note: There is a <FONT> tag with a color property in HTML that could be used to change the color, but that tag is being removed in all future versions of HTML as it is considered obsolete.)

So, the HTML encoded sentence we created above will do ALL of the following:

* Create a large header – like a headline (H1 tag)
* Make the entire header red (except for the word “brown”) (STYLE property of the H1 tag)
* Make the word “brown” the color brown while keeping the rest of the header red (STYLE property of the inner SPAN tag)
* Print the rest of the text in the color black using the default font.

Here’s a link to some of the different color names you can use when changing the colors of things:

http://www.w3schools.com/tags/ref_colornames.asp

Centering Our Headline

Now if we wanted to center our new headline evenly across the page from left to right, we’d add another style property in the H1 tag.  In this case the result we want is for our headline to align itself in the center of the page horizontally:

HTML:
<H1 style=”color:red;text-align:center”>The quick <SPAN style=”color:brown”>brown</SPAN > fox <STRONG>jumped</STRONG> over the lazy dog’s back.</H1>
RESULT:

The quick brown fox jumped over the lazy dog’s back.

Note: You can also change the STYLE property ‘center’ to be left, right and justify.

Changing The Font

When browsers were created, the designers also created a font that would be easy to read online. That font was called ARIAL and it really is pretty easy on the eyes – it’s also great for headlines. So let’s make sure our headline displays using the ARIAL font.

Note: Studies have shown that most people respond to the GEORGIA font when you want them to purchase something.

To change the font of some text, we can use yet another style property. And it turns out that we can combine different style properties by separating them with a semi-colon. So to change the font of our headline we’d first use the “font-family” style like this:

HTML:
<H1 style=”text-align:center;font-family:arial”>The quick <SPAN style=”color:brown”>brown</SPAN> fox <STRONG>jumped</STRONG> over the lazy dog’s back.</H1>

RESULT:

The quick brown fox jumped over the lazy dog’s back.

But notice that our color red is no longer there. The headline will once again print in the default color of black. To make our headline print using the color red again, we’ll simply add a semi-colon followed by our color style to the H1 tag like this:

HTML:
<H1 style=”text-align:center;font-family:arial; color:red“>The quick <SPAN style=”color:brown”>brown</SPAN> fox <STRONG>jumped</STRONG> over the lazy dog’s back.</H1>

RESULT:

The quick brown fox jumped over the lazy dog’s back.

Remember to put everything between the double quotes just like you see it above.

Where To Go From Here

You now have enough knowledge to make some sense of HTML, and to do some pretty cool things. There are several good websites where you can learn more about HTML if you’d like to continue your education. Here are three good ones:

www.w3schools.com/html/html_intro.asp

http://www.htmlgoodies.com/primers/html/article.php/3478131/If-you-know-nothing-about-HTML-this-is-where-you-start.htm

http://www.w3.org/MarkUp/Guide/

Here are a few bonus tags to play with in the meantime:

<EM></EM> (creates italic text)
<U></U> (creates underlined text)
<HR> (draws a horizontal line across the page)
<BR> (creates a line break)
<P></P> (surrounds an entire paragraph)

style=”font-size:10pt” (changes the font size to 10 point)
style=”background-color: aqua” (changes the color behind the text to aqua)
style=”border: 2x dashed black” (creates a 2 pixel thick dashed black border)
style=”border: 1x solid orange” (creates a 1 pixel thick solid orange border)
style=”border: 1x solid orange; padding: 3px” (creates a 1 pixel thick solid orange border with 3 pixels of padding)

We hope this has been informative, and maybe a little fun too. Don’t be afraid to play around with it. It’s in the practice that you’ll get comfortable enough to go into your site and make changes at will.

Having this skill will help you keep your content fresh for your visitors. That means you can quickly and easily make simple changes to your site to promote different items, announce upcoming events/sales, and to generally communicate with your customers/prospects in a more personal way.

Good luck, and have fun!

Tagged with:
Posted in Sellers Corner, SEO and Web Design Tips, Tips & Tricks