Tables

First we’ll look at tables. Tables are created using a combination of four different tags: <table>, <tr>(table row), <th>(Title/heading cell), and <td>(normal table cell). Let’s take this in 3 steps.

Step 1

<table>
  <tr> </tr>
  <tr> </tr>
  <tr> </tr>
</table>

Figure 1.

First we define a table area by using the table tag(<table> </table>). Naturally, everything related to the table is put inside these two tags.

Step 2

Then within this tag we define the rows in our table(See Figure 1). As you can see, we just added three rows to our table.

Step 3

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

Figure 2.

Add the cells within each row(for the example we add three cells to each row). In our first row, we want these cells to show up as headers for each column, so we use the <th> tag. Then in each of the remaining two rows, we’ll use regular table cells(<td>). For the sake of the example I’ve thrown in some numbers as sample content. Figure 2 shows the code, and Figure 3 shows the resulting table.

Lists

Lists can come in two primary different styles: Ordered Lists, and Unordered Lists. Unordered Lists tend to be more popular, and put a bullet in front of each list item. Ordered Lists place a number in front of each list item.

<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

<ul>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 6</li>
</ul>

Figure 4.

The tags used for these lists are <ol>(Ordered Lists), <ul>(Unordered Lists), and <li>(List Item). The <li> tag is used within both list types.

Similar to the table tag, the <ol>, or <ul> tags are used to define a list area, and nested inside them is a group of <li> tags which define each item in the list. Figure 4 shows the code for the lists shown in Figure 5.

Atrributes

As we saw with images and anchor links, sometimes additional information can be included within a tag. These are called attributes and always contain two pieces of information, the name and a value associated with it. They are formatted like this: name=”value” . You can find references online that detail what attributes can be used for any given tag. We will look at one commonly used one, that works with most tags. This will bring you up-to-date on the three most common attributes(src, href, and class).

<p>
  Paragraph 1
</p>
<p class="president">
  Paragraph 2
</p>
<p>
  Paragraph 3
</p>

Figure 6

The class attribute. This one is widely used for design and styling purposes. It can contain any alphanumeric value, with no spaces. Using a class variable assigns an area in your HTML page that a web designer can use CSS(future tutorial!) to apply styles such as colors, text styles, and backgrounds selectively.

Take a look at Figure 6. You will see three paragraphs with some random text in them. The middle paragraph has been randomly assigned a class of president. Now a knowledgeable web developer can style that paragraph differently from the rest. Let’s say he adds a dark background to it and changes the text color to red. The final result would then look something like Figure 7.

Paragraph 1

Paragraph 2

Paragraph 3

Figure7

Summary

Hopefully, this brief tutorial helped you grasp some of the concepts surrounding HTML. Looking at a long page full of HTML markup can seem very intimidating, but it’s important to look at the page not as a whole, but rather as a collection of extremely simple parts. This makes things so much simpler, and easy to understand. Find it slow and painful to create HTML? Slow down! That’s right, sometimes the best way to speed up a slow task is to slow down, develop some good habits, and don’t waste time looking for the shortcuts.

P.S. I’m no hypocrite, this set of articles was coded by hand(and rather quickly to, I might add).

Additional Resources:

Here are few links to a few quality resources on the web to helpfully shove you on your merry way towards HTML nirvana.

• HTML Tags Cheat Sheet
• In depth HTML tutorials
• HTML and attributes reference

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)

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.