HTML Commands

John Pickering & Denise Lim
University of Georgia

Anolis carolinensis
Photograph by Athena Anderson
Anolis carolinensis Voigt, 1832
Green anole

Updated: 15 January, 2008

Discover Life | Education | Training Guides | Building Web Pages | Top

Overview

Hyper text markup language--HTML--uses tags to format Web pages. Here we go over the basics of writing Web pages in HTML. This page covers (1) the simple stucture of HTML files, (2) some tags that you can use to format Web pages, and (3) how to edit documents.

Below we use <fuchsia> to show HTML tags and green text to represent data within tags.

You will need to format your Web pages using HTML tags. You can add HTML tags in the following two ways:

  1. Automatically, using a program such as WebWeaver or using the "Save as..." command of some Word Processors.
  2. Manually, using a Word Processor or the vi text editor.

HTML tags are added to documents to format them as Web pages. The tags are included between pairs of < and > symbols.
Some HTML tags are used in pairs.

    For example, the starting command <b>, for bold, is paired with the ending command </b>.

As a convention, you should add ".html" as the extension to files that are html files.

    For example, if you have a file (a document) called "page1.wp" that is a WordPerfect file, after you convert it to html format, call the file "page1.html".

Important Note: the / (forward slash) is used in the ending tag.

Top

HTML File Structure & Name

Put HTML in text files that start with an <html> tag and end with a </html> tag. Within these tags put two main sections within <head></head> and <body></body> pairs of tags. The first section generally contains a <title> and </title> tags. The second section contains information that formats the page's text, images, and links.

Put an .html extension on your filename. For example, "My_home_page.html" works. Avoid putting spaces in filenames. A filename called "My home page.html" will create problems on some systems. Also avoid filenames with strange characters, because they can give some Web servers problems. It is best to use filenames that contain the only following simple characters: a to z, A to Z, 0 to 9, commas, periods, and _underscore. Avoid using filenames that include minus, parentheses, brackets, stars, question marks, etc. On Unix/Linux systems, filenames are case sinsitive. Thus, "this_name.html" and "THIS_NAME.html" are not the same.

A good way to learn HTML is to view the HTML used by others. To do this, pull up a Web page with your browser, then go to "View Page Source" and see the pages HTML tags and text.

Example of an HTML file is:

   <html>
      <head>
         <title>
My Title</title>
      </head>
      <body>

         Your browser will show just this green text.
      </body>
   </html>


Top

Some HTML Commands

  • <br> starts a new line.
  • <p> starts a new paragraph, same as new line but adds a blank line.
  • <b>this text will be bold</b> puts text between the tags in bold.
  • <i>this text will be in italics</i> puts text between the tags in italics.
  • <u>this text will be underlined</u> makes text between the tags underlined.
  • <h1>large heading text</h1> puts text between commands as a large heading.
  • <h3>sub-heading text</h3> puts text as a sub-heading.
  • <div align="center">center text</div> centers text and images on the page.
  • <hr> puts a long line across the page.
  • <hr width="50%"> puts a short line across the page.

Top

Making Lists

  • <ul> starts an un-ordered list and </ul> ends one.
  • <li> starts each list element and </li> ends it.

For example,

   <ul>
      <li>1st element's text</li>
      <li>2nd element's text</li>
      <li>3rd element's text</li>
   </ul>

Yields the following on your browser:

  • 1st element's text
  • 2nd element's text
  • 3rd element's text

  • <ol> starts an ordered list and </ol> ends one.

Thus,

   <ol>
      <li>Start</li>
      <li>Stop</li>
   </ol>

Yields the following on your browser:

  1. Start
  2. Stop

Top

Adding Images

Note: Images need to be .jpg, .gif, or .png files.

  • <img src="images/myphoto.jpg"> is a relative link to an image called "myphoto.jpg" in the "images" directory (folder) that is in the same directory as the HTML file. Relative links depend on the directory of the HTML file in which they are located.
  • <img src="http://www.discoverlife.org/images/Platyphora_bella.jpg"> is an absolute link to Don Windsor's beetle image "Platyphora_bella.jpg" that is in www.discoverlife.org's "images" directory. Absolute links contain "http://" and are independent of where their HTML file is located.

Additional Uses:
To link images to the image zoom software, use the URL http://pick4.pick.uga.edu/mp/20q?act=see_image&img=path. The path is the location of the image onsite relative from home/web/dl.

  • <a href="http://pick4.pick.uga.edu/mp/20q?act=see_image&img=nh/tx/images/myphoto.mx.jpg"><img src="images/myphoto.240.jpg"></a> links "myphoto.240.jpg" in the "images" directory to the image zoom software where viewers can zoom in on the image at the maximum (mx) resolution of the images found in the directory path "home/web/dl/nh/tx/images".

Top

Adding Hypertext Links

External Links with Relative Addresses:
  • <a href="page2.html">Page 2</a> is a relative link that shows the contents of "page2.html" when users click on "Page 2", which will be underlined in blue. This link's address is relative to the directory of the file of the HTML page in which it occurs.

External Links with Absolute Addresses:
  • <a href="http://someSITE/somefile.html">Some Text</a> is an absolute link from "Some Text", underlined in blue, to "somefile.html" that is at "someSITE". Absolute addresses do not depend on the directory of the file in which they occur.

Internal Links:
In long Web pages, it is useful to have a table of contents that link to different sections of the page.
To do this you need to tag fragments of your document and then link to these tags.

  • <a name="Summary"> Put this before your summary to tag it.
  • <a href="#Summary">Go to Summary</a>
    These tags will underline "Go to Summary" in blue as a link.
    This link will send you to the <a name="Summary">: tag in your document.
  • <a href="http://someSite/somepage.html#someFragment">Click Here</a>
    This is an absolute link to a specific fragment of another pages, namely to "someFragment" of "somepage.html" at "someSite".

Top

Adding Tables

  • <table> starts a table and </table> ends one.
  • There are many optional attributes you can include within the <table> tag.

  • <table border="1"> controls the width in pixels of the table borders.
  • <table cellspacing="10"> controls the amount of space between the cells in the table.
  • <table cellpadding="5"> controls the amount of space between the edges of the cell and its contents.
  • <table width="99%"> controls the width of the table on the page, in either exact pixel values or as a percentage of page width.
  • <tr> creates a table row and </tr> ends one.

  • <td> creates an individual cell within a row and </td> ends one. TD stands for table data. You can think of them as columns.
  • <tr align="center"> and <tr valign="top"> can be used to control the alignment of any row or individual cell.
  • <td colspan="3"> allows a cell to span multiple columns, in this case three.
  • <td rowspan="2"> allows a cell to span multiple rows, in this case two.
  • You can place virtually any other HTML element into a table cell. However, tags used in one cell do not carry over to other cells, and tags from outside the table do not apply within the table.

Top

Other HTML Commands

  • "Learning HTML in 24 hours" by Dick Oliver is a good reference guide to add other HTML commands to your Web pages.
  • There are also many other HTML guides available on the web.

Discover Life | Education | Training Guides | Building Web Pages | Top