HTML Commands

John Pickering & Denise Lim
University of Georgia
25 February 2005

Discover Life | Education | Training Guides | Building Web Pages | HTML Commands
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.

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

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

Index

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>


Index

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> use to 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.

Index

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:

  • <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

Index

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".

Index

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".

Index

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.
    In particular, you should use tables (<table> </table>) which are very useful in formating pages.

  • There are also many other HTML guides available on the web

Discover Life | Education | Training Guides | Building Web Pages | HTML Commands

Last updated: 25 February, 2005