Maintaining the content on your own site is a great way to save money on site maintenance. Generally, all you need to understand is a little bit about how a web page is structured. This is defined with HTML. Before you start to despair, and wax verbose on your lack of ability to program, let me assure you that learning HTML is not learning how to program, it is far easier, and pretty much just defines different areas within your content. These areas include paragraphs, lists, content areas, images, bold text, headers, tables, etc.
Still not sure? Remember, you don’t need to memorize everything, just try to understand the concept behind HTML, and the specifics you can look up as you need them. A cheat sheet is provided at the end. So go ahead and read the rest of the article, and see if it’s not really pretty easy. After all, what’ve you got to lose?
The basics
<p> </p> <b> </b> <i> </i>Figure 1. Tag Pairs
HTML, as mentioned earlier, is all about defining different areas of content, such as paragraphs, so that your browser knows how to lay out the web page. In order to define these areas, we make use of “building blocks” called tags. With few exceptions(which we’ll discuss later), every tag is actually a pair of tags. One is placed at the beginning of the content area, and a matching tag is placed at the end of the area. Some example tag pairs are shown in Figure 1.
As you can see, tags are defined by <, and >, with the name of the tag being included within those symbols. You will also notice that the name of the closing tag begins with a forward slash (/). Other information can be included within a tag, besides just it’s name, which we will cover later, once we look at some of the most used tags.
<img /> <br />Figure 2. Unique Tags
Just like everything in life, there are exceptions to the general rule of tag pairs. These tags define their own content, or effect(such as an image or forcing a new line). These tags without a closing tag will have the forward slash at the end of the tag info. Examples are shown in Figure 2.
Now let’s look at some of the most used tags for defining content.
Popular Tags (A.K.A. The Rockstars of HTML)
| Tag Pair | Usage | Example |
|---|---|---|
| <div> </div> | Division of content, or a box containing content | <div>This is a content area, possibly with a header, couple of paragraphs, lists, etc.</div> |
| <p> </p> | Paragraph | <p>This could be an eloquent paragraph about your Pomeranian cat.</p> |
| <b> </b> | Bold | <b>Makes text bold.</b> |
| <i> </i> | Italics | <i>Surprisingly, this italicizes text.</i> |
| <img /> | Defines an image. Requires an attribute called src, which tells the browser where the image is located on the server | <img src=”http://andrewtrivette.com/images/header.jpg” /> |
| <br /> | Line-break | This is a sentence.<br />This sentence will start on the next line. |
| <a> </a> | Anchor (Link) Requires an attribute called href, which tells the browser where to go. | <a href=”http://www.andrewtrivette.com”>This text is a clickable link</a> |
| <h1> </h1>
<h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> |
Header Tags 1-6, These display in decreasing size, used to demonstrate hierarchy in your content(titles, subtitles, section titles, etc.) | <h1>Important Title</h1> |
These tags cover probably 70% of the HTML you will need to know to create/edit your own content. Many, many more exist, and can be found in various references online, as needed.
Notably missing from this list is tables, and lists, to be discussed in Part 2.