<html> ... </html>
Tags in the Head Section
- The <html> tag must be the VERY FIRST tag that appears in any HTML file. <html> tells the Web browser that
this is the beginning of an HTML document and the </html> tag tells the browser that the HTML file is finished. The tags
with slash "/" respresent a closing tag.
<head> ... </head>
- The <head> and </head> tags defines that part of the document containing information about the page. This
section includes the TITLE of the document.
<title> ... </title>
- This tag surrounds the TITLE of your document. Note: The TITLE appears at the top of your browser window.
For example, look at the top of this page.
Structure in the head section of your HTML file:<html>
<title> ... </title>
This is the section where your creativity will distinguish you from other homepages around the Web. Experiment with the many
tags that will be introduced to you and have fun.
Tags in the Body Section
<body> ... </body>
- The <body> tag usually comes immediately after the </head> tag that ended your HEAD section. The </body>
tag comes before the </html> tag at the end of the document.
<hx> ... </hx>
These tags are used to create headings. There are six different sizes with <h1> being the largest and <h6> being
- This tag signals the end of one paragraph and the beginning of the next. There is supposed to be a closing tag </p>
tag. One thing to keep in mind is that web browsers cannot indent the first word of a paragraph, so this tag leaves a blank
space between two paragraphs; however, multiple <p> tags will NOT result in multiple blank lines.
- This tag represents a line break. It also does not have a closing tag. The optional argument CLEAR in conjunction with
aligned images is useful. I.e.,
<IMG src="filename" ALIGN=right>
The text that is to be next to the image.
after a right-aligned image.
This the horizontal rule tag. It instructs the browser to insert a paragraph break into the content with a line separating
the paragraphs. The browser will automatically adjust the line to fill the witdth of the display window.
A default grey line is created with just the <hr> tag. To get a little fancier, you can make the line solid black
with the tag <hr NOSHADE>. A SIZE and WIDTH option can be added to the <hr
NOSHADE> tag. The thickness of a line is specified in this format SIZE="x" as in <hr SIZE="x">.
The width is represented by WIDTH="xx%" as in <HR WIDTH="xx%">.
<i> ... </i>
<b> ... </b>
- The text between these tags will be in italics. The <em> ... </em> tag will also
make the text look italic.
- The text between these tags will be bold. The <strong> ... </strong> tag
usually does the same thing.
- SIZE and WIDTH are known as attributes. They are added to a tag to give your content a bit more pizzazz. Another attribute
used a lot is the ALIGN attribute. The values for this attribute are "right", "left", and "center". Many of the tags can use
the ALIGN attribute, such as the <p>, <hr>, <hx> ... </hx>, and the <img src> tags. The <img
src> tag will be shown later.
<blockquote> ... </blockquote>
- This tag is used to distinguish material from an external work. The text is shown as a papargraph with wider right and
<address> ... </address>
- The address tag is used for signatures, addresses, and other authorship information usually appearing at the top or bottom
of the page. The text between the address tags is shown on-line in italics.
<address>Prepared by: Brenda Karp</address>
There are three types of lists that can be done with HTML: unordered lists, ordered lists, and definition lists.
Tags for Lists
<ul> ... </ul>
- The ul tag specifies an unordered type list. By default, the list items are preceded by a round bullet. With the TYPE
attribute you can specify what type of bullet you want. Values for this attribute are "circle", "square", and "disc" and are
incorporated in the ul tag in this fashion: <ul type="square">. Within the ul tags, each item in a list
is preceded with the list item tag, <li>. For example, if I wanted to list oranges, apples, and pears
on-line, your html file would look like this:
<ol> ... </ol>
The ol tags represent the ordered type lists. It is set up in your html file like the ul tags. By default, the list is
ordered by numbers; however, you can change this by using the TYPE attribute. Letters can be uppercase [type="A"],
lowercase [type="a"], small roman numerals [type="i"], or large roman numerals [type="I"]. An ordered list with lowercase
letters would look like this:
<dl> ... </dl>
The definition list is set up a little differently than the ordered and unordered lists. Instead of using a list item tag,
<li>, to separate the list items, the <dt> or the <dd> tags can be used. The <dt> or definition
term tag does NOT indent the item. The <dd> or definition description tag indents the item. For example, if I wanted
to use the fruit items list from earlier, it would look like this:
<dt>My favorite fruits</dt>
- My favorite fruits
"My favorite fruits" would not be indented whereas oranges, apples, and pears would be indented. In setting up for this
tutorial, I used the <dl> and <dd> tags.
<a href="filename"> </a>
This is the tag in HTML that creates a hyperlink to another Web page. The a is known as an anchor and it
has one prime attribute, href or Hypertext REFerence. The href attribute has one value and that is the
URL or Uniform Resource Locator. Whatever comes before the </a> tag, be it text or an image, is the blue clickable
part that takes you to your destination, or the URL specified;
If you are going to create a link to a file in another directory, you need to specify where the file is located by
doing one of the following.
There are four general types of links distinguished by the location of the file you are linking to:
- Specifying a URL for a file in the same directory:
<a href="filename.html">Text you want user to see</a>
The previous code produces a link that appears as: Text you want user to see
- Specifying a URL for a file in a subdirectory:
<a href="subdir/filename.html">Text you want user to see</a>
- Specifying a URL elsewhere on the same server:
<a href="/visitor/directions/">How to get here</a>
Note: the URL above links to a file "index.html", but the default behavior for the server when no file is indicated is
to open "index.html" if it exists. If no file "index.html" exists in that directory then a list of files in that
directory is returned.
The previous code produces a link that appears as: How to get here
- Specifying a URL for a file on another web server:
<a href="http://www.theregister.co.uk/2002/05/19/ms_in_peruvian_opensource_nightmare/"> M$ in Peruvian
The previous code produces a link that appears as: M$ in Peruvian open-source
nightmare from The Register.
- The a href tag is also used to link to postscript and pdf files:
- Linking to a postscript file:
<a href="../nlpaper.ps"/>Nonlinear Model Reduction Using Hankel-norm Approximations</a>
Here are a few things to keep in mind when using graphics on your WWW pages.
Tags for Images
There are two ways an image file can be displayed, inline or as a link to a Web page.
1. Graphics take time to load.
2. As you start using graphics on your Web pages, you may see a graphic that you want to use on someone else's page.
Welcome to the ambiguous world of Internet copyright law. If you do decide to use someone else's, chances are that you
will not get in trouble for using the graphic as long as you use it respectfully. However, there are sites on the Web that
purposely house icons, bullets, and inline images for public use.
3. Attributes for the IMG tag include:
SRC - The source attribute is a must for this tag. Its value is the URL of the file containing the image that you are
ALIGN - "top", "middle", "bottom", "center", "right", and "left" are the values for this attribute. The "right" and
"left" values allow for text to be wrapped around the image.
ALT - This attribute is for those viewers who have browsers that have no graphics capability. With this attribute you
need to specify a text string that can be displayed.
BORDER - This attribute allows you to place a border around your image. The value of this attribute is "n", where n
stands for a number that represents the thickness of the border, the default = "0"
To create an inline image use the following tag in this fashion:
<img src="filename.gif" alt="image description">
You can also use an image as a link to another Web page:
<a href="http://che.www.ecn.purdue/"><img src="images/griffin.gif" alt="link uses an image of a
Getting images off Netscape
- If you are planning on getting an image from a particular page, there is an easy way to do this with Nescape©. Bring
your cursor onto the image and click on the image with the right mouse button. A Netscape Commands menu will
appear. While the button is still depressed, bring your cursor to Save this Image As.. option and you will be
able to save the .gif file into your home directory. Be sure to get permission to use photographs.
This section of the tutorial is for those "Webbers" who want to add a bit of spice to their Web pages.
Adding a Little Color ...
Changing the background color of your Web page is specified in the BODY tag. To display a one-color background, the BODY
tag with the bgcolor option will look like the following:
where the xxxxxx stands for the RGB hexadecimal number that specifies a certain color. For example:
Bright Red = #FF0000
Dark Cyan = #004040
Medium Yellow = #7F7F00
Not all colors display correctly in Netscape (and Netscape compatible browsers). A list of the 216 Netscape safe colors
and their hexadecimal numbers can be found at:
Other options you have with this tag include :
- TEXT - controls the color of the text
- LINK - controls the color of the unvisited link
- VLINK - controls the color of the visited link
- ALINK - controls the color of the active link
For example a BODY tag using all of these options looks like the following:
<body bgcolor="#00FFFF" TEXT="#FF00FF" LINK="#855E42" VLINK="#000000" ALINK="#FF6EC7">
This is the tag you use if you want to display an image as a background.
You may use programs such as 'gimp' or 'xv' to modify an existing image.
This URL will get you to a page of different backgrounds.
Last Modified: Tuesday, 14-Jun-2011 16:52:16 MDT