Tags in the Head Section

<html> ... </html>

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>
<head>
<title> ... </title>
</head>

Body Section

</html>

Tags in the Body Section

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.

<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 &lth1> being the largest and <h6> being the smallest.

<h2>Brenda's Homepage</h2>

<p>

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.

<br>

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.
<br CLEAR="RIGHT">
after a right-aligned image.

<hr>

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>

The text between these tags will be in italics. The <em> ... </em> tag will also make the text look italic.

<b> ... </b>

The text between these tags will be bold. The <strong> ... </strong> tag usually does the same thing.

Attributes

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 left margins.

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

Tags for Lists

There are three types of lists that can be done with HTML: unordered lists, ordered lists, and definition 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:

<ul>
<li>oranges</li>
<li>apples</li>
<li>pears</li>
</ul>

Would
look
like:

oranges
apples
pears

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

<dl>
<dt>My favorite fruits</dt>
<dd>oranges</dd>
<dd>apples</dd>
<dd>pears</dd>
</dl>

Would
look
like:

My favorite fruits: oranges; apples; pears

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

Linking to...

<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 open-source nightmare</a>
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>

Tags for Images

Here are a few things to keep in mind when using graphics on your WWW pages.

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 placing on-line.

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"

There are two ways an image file can be displayed, inline or as a link to a Web page.

To create an inline image use the following tag in this fashion:

You can also use an image as a link to another Web page:

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.

Adding a Little Color ...

This section of the tutorial is for those "Webbers" who want to add a bit of spice to their Web pages.

Colors

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:

Netscape Safe Colors

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

Backgrounds

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.

http://wp.netscape.com/assist/net_sites/bg/backgrounds.html

Blue horizontal rule image

Continuing....
Less Basic html	Web Design II A mini-seminar
Advanced html

Last Modified: Tuesday, 14-Jun-2011 16:52:16 MDT