HTML Tags HTML Tables
HTML Forms

JS Form Ex.

Back to
Learning Center

Prof. H's HTML Tutorials -- Basic Tags and Anchors

HTML Tags

HTML tags are commands that are between angle brackets. For example, the <B>bold</B> would be read by the browser as bold. Note in this case (as is almost always true) that we have both and opening tag and a closing tag (which adds the "/" prior to the command).

Many tags have attributes which can further modify the text enclosed in the tag. Attributes and their values are entered right after the tag command and before the > bracket. An example of this would be <P CLASS="main"> which tells the browser to start a new paragraph of the class "main" (where the "main" class has been earlier defined in a style sheet).

Starting Tags

HTML documents typically start off with an opening tag that looks similar to:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0  Transitional//EN">

In this case, we are telling the browser what type of HTML standard we are using and what language it is in. In this case we are using HTML 4.0 transitional version in English. Since different versions support (or eliminate) certain tags, specifying this information up front helps ensure that our text is viewed as intended.

<HTML> is the very next tag which follows the opening tag. Of course, we shouldn't forget the closing </HTML> tag at the end of the document as well.

It should be noted that it is not absolutely essential that these tags are included. However, failing to do so risks the browser misinterpreting the HTML you are attempting to communicate with -- better to add these tags and be safe.

<HEAD> and <META> Tags

After entering the starting tags, we typically set up the HEAD section using the <HEAD> and </HEAD> tags. In the HEAD section we place any META tags (more in a moment), a TITLE tag, BASE tags, and any JavaScript we want to run on the page.

META tags are very useful in that they allow us to add information that is invisible to the viewer, but may either help the surfer to find your page or make such a search more difficult.

For example, this page contains the following META tags:

    <META NAME="generator" CONTENT="BBEdit 5.1.1">
      this tag tells a search engine what software was
      used to create the page.

    <META NAME="author" CONTENT="Professor Larry Heimann">
      this tag tells who the author is.

    <META NAME="copyright" CONTENT="© 1999 C.F. Larry Heimann">
      this tag is a copyright statement (so if you attempt to
      rip anything off, I'll send "Big Al" over to eat you!)

    <META NAME="robots" CONTENT="noindex, nofollow">
      this tag tells a search engine to neither index this page
      nor follow any of its links for indexing.

If I wanted to help a search engine to find my page, I'd add META tags with NAME="keywords" and or NAME="description" (with the appropriate CONTENT) and drop the noindex, nofollow restrictions.

Finally, it should be noted that META tags do not require closing tags.

<BODY> Tag and Page Content

The BODY is the main segment of the HTML document and where most of the page's content lies. Most of the text, images, and other multimedia content that the user is interested in lies in this section. Without any structure, the BODY section is like a large area with sequential text and graphics and is rather unappealing (though functional!). For that reason, the contents of the body are often structured with tables, although style sheets are growing in popularity. (We will spend next lab session on tables and frames in the layout process--this week we'll just worry about content.)

Also note that HTML comments can be added to a page (but not displayed by the browser) by placing them between <!-- and --> brackets.

Formatting Tags

<FONT> tag allows us to edit various attributes (specifically the size, face, and color) of the font. Examples include:

   <FONT FACE="palatino"> changes the font face to Palatino
   -- note that the font may not be available on user's computer

   <FONT COLOR="#rrggbb"> changes the font color to
   the color represented by #rrggbb

   <FONT SIZE="n"> changes the font size to n where
   n is a number between 1 and 7

   <BASEFONT SIZE="n"> sets the basefont size for the document
   -- this tag is used once at the beginning and doesn't apply to headers

<B> tag turns text into bold type. The <STRONG> is less common, but can also be used for the same thing.

<I> tag turns text into italics type. The <EM> is less common, but can also be used for the same thing.

<U> tag underlines text; the <STRIKE> tag strikes through the text.

<PRE> tag creates preformatted text (rather than allow browser to decide where to place it) and is useful for homemade tables and ASCII art.

<P> tag starts a new paragraph. You need to use this tag to get a new paragraph since HTML will not recognize the carriage return entered with a text editor. One nice thing about the <P> tag is that you can use a style sheet to establish different classes of paragraphs, each with their own formatting specifications (font family, size, color, etc.)

<BR> tag adds a line break, but not the extra space of a new paragraph. Note that the <BR> tag does not require a closing tag.

Note that different attributes of the same tag can be combined in a single tag, but multiple tags cannot be combined into a single tag. Multiple tags can be nested, however, as long as one is careful with the ordering of closing tags.


Anchors & Links

Anchors and links are enclosed by <A> and </A> tags. Examples of different links and anchors are shown below.

Absolute links are links to pages outside your own site. In that case, the full URL is included with the HREF attribute. For example,
<A HREF="http://www.theonion.com/">The Onion</A>
is an absolute link to a site outside the 66-272 site.

Relative links are links to pages within your own site. Up above we have a relative link to the 272 labs page which doesn't need the full "http//..."
<A HREF="272-labs.html">272 Labs Page</A>

E-mail links or Mailto links can be added so that a user clicking on the link will be able to automatically send an e-mail to the proper parties. Almost all the pages (save 1) have the following e-mail link at the bottom of the page:
<A HREF="mailto:lheimann@andrew.cmu.edu">Professor H.</A>

Anchors work within a page to speed up a user's efforts to get to a specific section of the page. To place anchors, we use the <A> again, but instead of using the attribute HREF, we use the attribute NAME. To link to that anchor, we use HREF, but in this case HREF="#name" where "name" is the name of the anchor.

An example on this page is found in this section itself. The "Anchors & Links" subtitle is preceded with the anchor <A NAME="anchors"></A>
(I placed nothing in between because I just wanted an anchor to just this point, not the whole phrase.)
To reference this anchor in the side bar there is an item Anchors & Links which is formatted by <A HREF="#anchors">Anchors & Links</A>


 

Lab Assignment

Create a page using HTML which contains the following items:

  1. All necessary introductory tags and a <HEAD> section which includes <TITLE> tag and at least three <META> tags, one of which should be either "keywords" or "description".
  2. At the top of the <BODY> section, three anchors should appear which will allow a user to jump down to the appropriate section. An appropriate amount of white space should appear between each major section.
  3. The first section should be some type of welcome statement and possibly a personal introduction of yourself (or your alter-ego). This is supposed to be a brief one paragraph statement, but you can make it more if you'd like. The title to this section (and all other sections) should be in bold type.
  4. The second section should be some sort of "unusual" statistics section. (Data can even be fictitious.) For at least 5 different stats, list the category or title in italics and follow that up with the statistic itself in plain text. Your favorite or most unusual stat should be both underlined and italicized.

    Examples:
    Number of Klingons present:  at least one!
    Number of bowls of Cap'n Crunch the average person can eat before becoming sick:  2.6375 bowls
  5. The third section -- Links and Such -- should have an absolute link to four of your favorite sites on the web along with a brief commentary on the site. The link to your favorite site should be in red instead of standard blue.

    Examples:
    The Onion: Great Hack News Site! Not for those who are humor-impaired.
    CGI Programming 101: Very nice set of tutorials by Jacqueline Hamilton to help people learn CGI. A great site and a recommended place to start!
  6. Verify that all links and anchors are functioning properly.
    Save document as (first initial)(last name).html
    FTP your page to ... and verify that it is on the web.
    E-mail page as attachment to ... as well as a copy to yourself.
  7. Big Bonus Time: Copy a graphic of your choice from the web and place it at the end of your document. Make the graphic a link back to the site you got it from. Attach the graphic file to e-mail as well.

 

Please note: this site contains relevant information for the Spring 2004 semester only. The site is maintained by Professor H, so any questions or problems with these pages should be sent to lheimann@andrew.cmu.edu.

 

       
  You have been visiting:
http://www.andrew.cmu.edu/course/67-272/html1.html
A link back to the main CMU page
I know, like you really need or care about it.
Just tryin' to be a good CMU citizen here...		 Wonderful hack news site!   Quchta' joH Yahweh HoSwIj.