Developer

A crash course in HTML, part 3

In this lesson in HTML 101, find out how to format lists and tables, among other cool tricks.


Welcome to the third and final lesson in our crash course in HTML. In case you missed the first two lessons, follow this link to read part 1 and this one to read part 2.

What we've covered so far
In the first lesson, we discussed the basic outline of an HTML document—the head and the body. We showed you how to insert comments and how to use a picture as the background for a Web page. In the second lesson, we looked at formatting text inside the BODY of the HTML document.

Tackling lists
Lists make an attractive addition to a Web page. Fortunately, they are also easy to create. There are two types of lists in HTML—an ordered list (numbered) and an unordered list (bullets). The tag for an ordered list is <ol>. The tag for an unordered list is <ul>. Between the point where you open the list and where you end it, simply place the list items to be displayed in between the list item tags <li> and </li> like this:
<ol>
 <li>list item 1</li>
 <li>list item 2</li>
 <li>list item 3</li>
</ol>

<ul>

 <li>list item 1</li>
 <li>list item 2</li>
 <li>list item 3</li>
</ul>

Linking to other pages
Of course, one thing you must know how to do is link to other Web sites. To link to another HTML document or another Web site, you’d use something like this sample code:
<a href="this is where you place the URL or HTML file name"> this is what will appear in the browser window</a>

An actual line of code might look like this:
<a href="page2.html">Click here</a>

Displaying an image
Of course, you can’t just put up a page of flat text and expect to impress your friends, family, and coworkers. You can display an image on your Web page by using this sample code:
<img src="Image file name goes here">

In this case, img src stands for “image source.”

Here is what that code might look like:
<img src="pic1.gif" width="250" height="200">
  • Note: You can specify the exact height and width of the image. It is recommended, however, that you alter the dimensions of the image in an image editor and exclude the width and height parameters. Otherwise, the image might become distorted.

  • Displaying an image that links to another page
    If you would like to be able to click on an image and have it take you to another HTML document or another Web site, simply embed the image source tag inside the hyperlink tag like so:
    <a href="page2.html"><img src="next.gif"></a>

    Fun extras
    Here are some additional tips for formatting your HTML document that are sure to come in handy.

    Indented text or lists. You can indent an entire paragraph or list inward into the Web page by using the blockquote tag <blockquote>.

    Scrolling marquee. You can place a non-JavaScript scrolling marquee board on your Web page by using the <marquee> tag. You can even alter the appearance of the text and the background color. The following line of code would result in a marquee with a red background and yellow words (displayed in bold):
    <b><font color="yellow"><marquee bgcolor="red">Type the message you wish to be displayed here.</marquee></font></b>

    Putting your HTML on the table
    Now that we’ve covered the basics of HTML formatting, you should be able to design a Web page to suit your needs. However, there is a lot more to HTML than meets the eye. For this short lesson, I saved the best for last. Once you’ve mastered formatting techniques discussed in this three-part series, you’re ready to tackle tables.

    Tables can be used for a variety of different purposes. First and foremost, it is extremely easy to organize charts using simple tables. You can also use tables to insert graphics with captions in convenient places within your text. You can even design some very attractive layouts with the use of tables.

    But, enough about what tables are good for (I’ll leave that to your creative imagination), and on to how tables work. Here is the HTML that creates a simple table with two rows and three columns. I’ll discuss the tabs below.
    <table border="0">
     <tr>
     <td> This is text in column 1 row 1</td>
     <td>This is text in column 2 row 1</td>
     </tr>
     <tr>
     <td>This is text in column 1 row 2</td>
     <td>This is text in column 2 row 2</td>
     </tr>
     <tr>
     <td>This is text in column 1 row 3</td>
     <td>This is text in column 2 row 3</td>
     </tr>
    </table>

    Table anatomy
    Each table consists of rows and columns. You must start coding the table by opening the table tag and defining any parameters. In this example, the table has no border (the default border is 1, a visible, yet thin border line). A table is defined primarily by using rows. You must open the table row tag <tr> and within that tab, define the columns. The sample code above will result in the table shown in Figure A.

    Figure A
    Here’s what our sample table looks like.


    If you would like to change the style of the text within the table, you can open a font tag before you open the table. If you would like to center the table horizontally on a Web page, open the center tag before opening the table and close it afterwards. If you would like to center the information in the individual cells, open the center tag after the <td> and end the center tag before the </td>.

    In addition to centering tables horizontally, you can align the table to the right. Doing so makes it easy to insert a graphic and text all along the side of it—just like in magazine page layouts. For example, the following section of code placed within the body of an HTML document will result in the aesthetically pleasing layout shown in Figure B.
    <table border="0" align="right">
     <tr>
     <td><img src="me.jpg"></td>
     </tr>
    </table>
    <p>Here is some sample text. Here is some sample text. Here is some sample text.
     Here is some sample text. Here is some sample text. Here is some sample text.
    </p>
    <p>Here is some sample text. Here is some sample text. Here is some sample text.
     Here is some sample text. Here is some sample text. Here is some sample text.
     Here is some sample text. Here is some sample text. Here is some sample text.
    </p>

    Figure B
    Here’s our revised sample table with a picture of your HTML tutor!


    Class dismissed
    Once you’ve completed all three HTML 101 lessons, you’re ready to take your test: Design a Web page using the information that you have learned here. Fill it up with all the HTML you know. Doing so will help you better understand how all the tags are supposed to be used.

    Editor's Picks

    Free Newsletters, In your Inbox