CMST 385 Creating a Web Page and HTML

Note: Words in blue are defined in the Glossary

Creating a Web Page

Authoring software allows you to create a Web page without having to know any HTML code. There are two categories of authoring software. One is a converter. This type of program takes a normal document and converts it to HTML for you. Word has Save File as an HTML-type feature. Another category is a program that is developed to create HTML code for you in a WYSIWYG environment. FrontPage is an example of one of these programs.

The advantage of using an authoring tool is that you can quickly create a Web page without having to know HTML. The disadvantages are that HTML is a live language, meaning that new tags are being created continuously. Your version of the authoring tool may not have the latest tags. Additionally, programs make mistakes. You may convert or write your page and when you view it in the browser window, it looks strange. Unless you know how to fix the HTML code yourself, you will have to live with the effect.

It is recommended that you learn HTML first, and then use an authoring tool if you wish. One of the most advanced authoring tools is Dreamweaver, but you had better know what you are doing in HTML to use it. Because of the importance of learning HTML before ever using an authoring tool, this class requires straight HTML coding. Although HTML may be written using a plain text editor, do not use a word processing program to write your code. Notepad, which you have on your computer under Start, Programs, Accessories, is a text editor, while Microsoft Word is a word processing program.

To learn HTML, it's best that you use a text editor, such as Notepad, to develop your pages so that you will get hands-on practice. Using a word processor may insert incompatible characters into your HTML document, causing it to view improperly. After you are comfortable with HTML, you can graduate to a more advanced text editor that will, among other things, color-code your HTML and automatically close tags for you. Some of these advanced text editors are available for free on the Internet. The more advanced WYSIWYG editors include Microsoft's FrontPage and Macromedia's DreamWeaver, but nearly any software (especially Microsoft Office applications) can be converted into Web pages by using the Save as Web Page feature.

Please note that in this course, you are required to do your HTML coding by hand, using a text editor. Web-page creation tools such as WYSIWYGs are not permitted. The recommended text editor is Notepad, which can be found under the Accessories category on any computer using a Microsoft Windows operating system.

When using Notepad, you must remember to change the file type from .txt to all files and name the Web page with an .htm or .html extension (preferably .html because some Unix-based servers will not recognize your index page if given an .htm extension.

Organize and Name Your Files Carefully

·         The first page of a Web site is called the home page. Under the basic rules of HTML, that first page should use the name index.html (with a lowercase i and a full .html extension). A Web server will look for the index.html file by default first. If the file does not exist, the Web server will display a directory list of all the file names within the specified folder and not the page as you wish. When you decide which page will be your home page, make sure you rename it to index.html before uploading it to the Web server, if necessary.

·         As you begin writing your HTML files, do not include spaces in your file names. Although Microsoft Windows does allow us to use spaces when naming files, it is not a good practice for online documents. Some browsers may not understand the spaces and others will insert %20 every time a space occurs.

·         Name your files intuitively. Naming your files file1.html, file2.html, or pic2.gif will cause confusion as your site grows. Give your files clearly understandable names such as menu.html or AliciaOnCouch.gif.

·         Keep your naming structure consistent. Normally it is good advice to avoid capitalization when naming your files, but the trick is to be consistent. If you name your picture AliciaOnCouch.gif, be sure to keep the same structure of capitalization to avoid errors in linking your files.

·         Organize your files into folders (directories) when necessary. It is a good practice to keep all of your images together in a "graphics" or "images" or "pics" folder so they aren't scattered around with your other files. Similarly, keep multiple pages of the same category in one folder. For example, because I have syllabi written for numerous courses, I may keep all syllabi in a folder called syllabi and name each course syllabus by its course name, such as CMST385. I know when I go into the syllabi folder, I will have all of my syllabi there.

Local Web Page Development 

When you create your Web pages, you must do so on your local computer and then upload the pages to a remote computer that contains the Web server. Keeping the pages on your computer allows you to narrow down the cause if your Web page does not display properly and to fix errors. You can check your work by looking at your files locally on your browser (by opening your browser, clicking on File, then Open, and then selecting the HTML file). It also gives you a chance to double-check all information before it goes live to the entire world.

Create a folder (directory) on your hard drive that will hold all of your Web project pages, image files, audio clips, and so on. Maintain the exact Web structure on your hard drive Web folder that you will have after uploading your pages to your www directory on your server. You can check your work by looking at your files locally on your browser (by opening your browser, clicking on File, then Open, and then selecting the HTML file). If you can’t see your page locally, then you won't be able to see it remotely after it is uploaded to the server. Fixing your problems now avoids the confusion about whether or not the corrected version of your page has been uploaded.

For example, if your Web page displays properly on your local computer but not on the remote computer, the problem could be with naming, directories, permissions, or the network using different browsers. Hyperlinks may be pointing to local files instead of URLs, but you would know that it isn't a coding issue because the page displays properly on your local computer.

Internet Connection

It is not mandatory to have an Internet connection locally to create a Web site. However, you do need an Internet access to upload your files, set file permissions, and perform other maintenance on your site.

Browser Compatibility

The computer that the viewer of your Web site is using is called the client. You, the Web programmer, do not have control over the client computer. Among other things, the user may change the default fonts, the size of the viewing area, or the decision to show images. When you upload a Web page to a server, you don't know what browser the viewer is using. It is most likely Internet Explorer (IE), but it may be Netscape, or Opera, or some other browser. Today, many people are viewing Web pages using PDAs or cell phones. Each browser shows Web pages differently. Because most of the world is using either IE or Netscape, you should work to ensure that your page can be viewed the same in these two.

Don't use plug-ins that work only with IE or only with Netscape. Before deciding to use a plug-in, check to make sure that it will work in both common browsers.

If you use images for links, you must also have those same links in an easily found location on your page, written as plain text. If the user has turned off the images or the graphic you selected does not show in the viewer's browser, that user will still be able to get to your links.

HTML

HTML stands for hypertext markup language. It is not a programming language; it is a markup, or coding, language. It uses tags to tell the browser what to do. HTML is not static; it is an evolving or changing language that is governed by the W3C.

HTML uses tags and attributes. Tags are commands that tell the browser to do something in a certain way. An attribute changes or modifies a tag. The majority of HTML tags have both an open and closing tag. We call a tag that has an open and close a container tag. The close is designated by typing a / (slash) before the code. Tags are always in brackets: < >. Attributes are always within the specific tag that they modify.

HTML tags can be written in all caps, small letters, or a combination. BODY, body, and Body are all fine; however, it is recommended that you use all small letters for your HTML tags. Later, I will introduce you to writing Web pages using XHTML; the XHTML rules require that all tags are written in small letters. Getting started right now will save you some time later.

To create Web pages in this class, you will write your HTML in Notepad or another simple text editor. You will not use authoring tools like FrontPage or Dreamweaver. The words you type into Notepad are called code or object code. When you view your page using your browser, you are viewing the finished product, called the object code.

Below, I have detailed the steps involved in creating an HTML document. Be aware that if you follow along and type the code shown below, your screen display may be somewhat different, depending on your specific operating system.

1. Below is the basic HTML code necessary to create a Web page. Open Notepad under your Accessories menu and type the following HTML code.

Explanation of the Sample Above

<html> means that the page will be an HTML document.

<head> is like a header. Between the opening <head> and closing </head> tags belongs the code that affects how the page works. JavaScript often goes here, and cascading style sheet code for internal style sheets would go here. The page's title will always go within the header area. Notice that <head> is a container tag. It has a matching close tag, </head>.

<title> is for the title of the page. This title appears in the browser's title area (not on the page). <title> is also a container tag. It has a matching close tag, <title>. In this example, the words that will show in the browser's status bar are title to appear on the blue title bar. Please realize that the title tag is used to show a title in the browser's window. If you try to add tags to show formatting of any kind to the title, they will be ignored. Formatting tags like bold, underline, font colors, and sizes are recognized only if they are in the body of the page.

<body> is used to enclose the body of the page. Everything that goes between the opening <body> and closing </body> tags is seen and displayed by the browser. The body tag is a container tag. It has a matching closing tag, </body>. All of the tags and text you want to use regarding the actual page must be within the opening <body> and closing </body> tags. In this example, the only content that will show on the Web page is the words this is body of my web page.

Now Save the File As a Web File

2. Select File from your menu bar, then select Save As and type in the file name sample and include the .html extension. Change the Save as type from Text Documents (*.txt) to All Files and then save the file in a folder of your choice as follows:

If you do not type in the .html extension or change the file type from text, you will have saved a text file: sample.txt or sample.html.txt (still a text file) rather than an .html file that your Web browser can view.

Viewing Web Pages

To view Web pages, you need a browser. You're using a browser right now to view this page. Notice that you can use your browser to view your Web pages on your local computer too, without a Web server. This is because if you have a Web page that contains only text (HTML, for example), your browser can interpret the page and display it without talking to a Web server.

3. Do not close Notepad. Open your browser. Go to File, Open. Browse to find the sample.html file. Click Open. Click OK.

You should see a page like the own shown below. Notice the title bar and the content of the page:

Additionally, when you create your Web page, it's best to view it using each of the four major browsers—Opera, Mozilla (now FireFox), Netscape, and Internet Explorer—because different browsers may display the Web page differently.

When you are working with your source code, every time you make a change that you would like to see, click on Save in Notepad and then click the Refresh or Reload button in your browser. If the Reload or Refresh doesn't seem to show your changes, try clicking Refresh while holding down the CTRL key if you are an Internet Explorer user, or click Reload while holding down the Shift key if you are a Netscape user.

HINT: Have only two programs open at a time. Open Notepad and open your browser. When a program is open, its name shows on the task bar of Windows (bottom of your screen). To add to the lines of code or to make a change to your Web page, click on the Notepad that you see on the task bar and type what you wish to change. Click on Save. Go back to the browser by clicking on its name shown on the task bar. Click the button Refresh (Explorer) or Reload (Netscape, Firefox). You will instantly see the change(s) that you made in your page.

More HTML Tags and Attributes

A useful resource document is the W3C School's HTML Tutorial.

All of the tags shown in the following sections will be written within the <body> and </body> tags. Realize that the opening <body> and closing </body> tags should appear only once within each page you write. All formatting tags should be within these body tags.

Backgrounds (Attributes of the <body> Tag)

When choosing background colors for your Web pages, you should be aware of the 216 available Web-safe colors that should be used. A Web-safe color is one that will appear as expected if a person is viewing your page using the Internet Explorer browser, the Firefox browser, a PDA, or a cell phone. You never know what browser your viewer will be using, but limiting your colors to these 216 choices will keep your intended design choice somewhat consistent for you and your viewer.

To write the color you wish to use, you can use a word for it, such as red or blue, or you can use the hexadecimal code. Many people refer to hexadecimal codes as hex codes. Hexadecimal codes always start with a # sign and have a six-digit number following. The hex code for red is #FF0000 and blue is #0000FF. Most Web developers prefer to always use the hexadecimal codes for colors. Don't worry—you do not have to memorize 216 hex codes!

We will look at three ways to change the background of a Web page. In all cases you will be using an ATTRIBUTE of the <body> tag. Remember, there is only one opening <body> tag and one closing </body> tag on any Web page. The background color or image changes are always added to the opening <body> tag.

1.      <body bgcolor="#xxxxxx">, where xxxxxx is the hexadecimal color chosen. Notice the pound sign in front of the color code and the use of the quote marks surrounding the color.

• Example: <body bgcolor="#FFD700"> would make the background of the page gold.

You should follow two rules when assigning attributes:

• If you have an equals (=) sign, do not put a space after it.
• If you have an equals (=) sign, what follows should be in quotation marks.

2.      <body bgcolor="color">, where color is the word of the color chosen. Notice that you do not need the pound sign in front of the color if you use the word for the color rather than the hexadecimal code for the color.

• Example: <body bgcolor="pink"> would make the background of the page pink.

3.      <body background="filename.ext">, where filename is the name of the file and .ext is the extension of .gif or .jpg to be used as an image. Notice the use of the quotation marks surrounding the file name.

• Example #1: <body background="starrysm.jpg"> In this case, the image file is in the same directory as the HTML document referencing it.
• Example #2: <body background="images/starrysm.jpg"> in this case, because the image needed is in a subdirectory, the relative pathname must be written.

Text Color of an Entire Page (Attribute of the <body> Tag)

1.      <body text="#xxxxxx">, where xxxxxx is the hexadecimal color chosen. You may also use the color word; this changes all of the text on the page. If you also add font color tags to some text, that font color will override the body text= tag. (The font tag will be discussed later in this module). The default color of text for Web pages is black.

• Example #1: <body text="#660066">
• Example #2: <body text="blue">

Note: You can use the body background or body bgcolor along with the text attribute.

• Example: <body bgcolor="#FFD700" text="#660066">

Note: If you use the body background and the body bgcolor, the image will override the color. However, if the user turned off the images in the browser, the background color will display.

Last Note: Be careful not to choose a background color that is the same as the text color. It is impossible to read black on black.

Heading Tags <h1>–<h6>

The h stands for heading. Headings are usually used for titles and subtitles. There are six possible heading sizes ranging from 1 to 6, with 1 being the largest and 6, the smallest. The heading tag is a container tag. If you use the opening <h1> tag, then you need to use closing </h1>. The heading tag also automatically makes the line bold and places an extra line space following the heading.

• Example: <h1>This is my title!</h1> would display:

This is my title!

Line Breaks and Ending Paragraphs

<p> is the paragraph tag. The paragraph works much like pressing the Enter key at the end of a paragraph in Microsoft Word, except that it automatically places an extra line space between the preceding and following text. In other words, it leaves a blank line and moves to the next line. However, it cannot be used to create extra blank lines on your Web page. In HTML, it is one of the few tags that does not have to be closed. You need not have a </p>. However, in XHTML, you must close the tag, so you may want to consider doing so right from the start.

·         Example: <p>This is a paragraph of text. I can type just like in my word processor and the text will word wrap. HTML is fun and easy!</p> would display as:

This is a paragraph of text. I can type just like in my word processor and the text will word wrap. HTML is fun and easy!

<br> means line break. It can be used to create blank lines in your document or to make a soft return between lines of text. As the <p> tag creates a "return" and a blank line, the <br> tag creates just the "return" to the next line.

To use the <br> tag for blank lines, you would repeat the tag for every blank line you wish to add.

·          Example:    <p>This is a line of text</p>

<br>

<br>

<br>

<p>This is a second line of text</p> would display:

 

               This is a line of text

               This is a second line of text

This is a second line of text

Lists

Using HTML, you can create:

• unordered lists, also known as bulleted lists
• ordered lists, also known as numbered lists
• definition lists

You can also nest lists within a list. However, you must be careful when you nest lists to keep them from getting too complex. The key is to remember to close each tag you open.

Unordered Lists

You create an unordered list by starting the list with the <ul> tag, followed by the <li> and </li> tags for each individual item in the list, and close the list using the </ul> tag.

This is the HTML code for an unordered list (the boldface type is used only to emphasize the HTML tags from the contents):

<ul>
<li>CMST 385</li>
<li>CMST 386</li>
<li>CMST 430</li>
<li>CMST 450</li>
<li>CMST 498F</li>
</ul>

This is how the above code would be displayed in a browser:

• CMST 385
• CMST 386
• CMST 430
• CMST 450
• CMST 498F

Ordered Lists

An ordered list outputs the list in a particular order and each individual item uses the <li> and </li> tags, just like the unordered list. The only difference is that you use <ol> instead of <ul>.

This is HTML code for an ordered list:

<ol>
<li>CMST 385</li>
<li>CMST 386</li>
<li>CMST 430</li>
<li>CMST 450</li>
<li>CMST 498F</li>
</ol>

This is how the above code would be displayed in a browser:

1. CMST 385
2. CMST 386
3. CMST 430
4. CMST 450
5. CMST 498F

Definition Lists

A definition list uses the <dl> and </dl> tags to encapsulate the list, the <dt> tag to designate the definition term, and the <dd> tag to designate the definition description. The definition for each definition term is indented and formatted on a new line.

This is the HTML code for a definition list:

<dl>
<dt>CMST 385</dt>
<dd>Prerequisite: Either CMST 300, IFSM 201, or equivalent</dd>.
<dt>CMST 386</dt>
<dd>Prerequisite: CMST 385 or equivalent</dd>.
<dt>CMST 430</dt>
<dd>Prerequisite: CMST 386 or equivalent</dd>.
<dt>CMST 450</dt>
<dd>Prerequisite: CMST 386 or equivalent</dd>.
<dt>CMST 498F</dt>
<dd>Prerequisite: CMST 386 or equivalent</dd>.
</dl>

This is how the above code would be displayed in a browser:

CMST 385

Prerequisite: Either CMST 300, IFSM 201, or equivalent.

CMST 386

Prerequisite: CMST 385 or equivalent.

CMST 430

Prerequisite: CMST 386 or equivalent.

CMST 450

Prerequisite: CMST 386 or equivalent.

CMST 498F

Prerequisite: CMST 386 or equivalent.

Preformatted Text

If you use spaces, line breaks, or tabs in your HTML code, your browser will ignore them. Spaces, line breaks, or tab spaces are called whitespace. To get the content in your HTML file to display exactly as you type it, you could use the <pre> tag, which stands for "preformatted." The text will be shown in the browser's default font for this tag, usually Courier. The preformat tag does not word wrap paragraphs. If you want a line to show on the next line, you must press Enter. The <pre> tag is used to show content such as programming code.

This is an example of preformatted HTML code:

<html>
<head><title>CMST 385 Example</title><head>
<body>
<pre>

CMST 385

CMST 386

CMST 430

CMST 450

CMST 498F

</pre>
</body>
</html>

This is how the above code would be displayed in a browser:

Alignment

The default alignment for text or objects on a web page is left aligned. Sometimes, you will want to show these things right aligned or center aligned. There are a number of ways to do this.

Using the HTML Center Tag

Although the center tag has been depreciated, it still works for quick and dirty HTML. To use it, you just write the tag as <center> and use the close center tag at the end of whatever you want centered. The tag will be in effect until you turn it off, so do remember to use the close center tag!

Example 1: <center>this text is centered</center>

Example 2: (both the text and the image are centered)

<center>This text is centered

<img src=HTML_files/image010.gif

</center>

Using the Center Attribute

Center can also be used as an attribute to other tags. This is the preferred method of changing the alignment.

Example 1: <p align ="center">this text is centered</p>

Example 2: <h1 align ="center">this title is centered</h1>

Example 3: <p align ="center"><img src="images/picture.gif"></p>

To change the alignment to right, just replace the word center with the word right

Example: <p align="right">this text is right aligned</p>

This is how the above code would be displayed in a browser:

Using the Center Attribute for more than one line

<div align ="center"><p>this title is centered</p>

<p>this title is also centered</p>

<p><img src="images/picture.gif"></p>

</div>

Horizontal Rules

The <hr> tag displays a horizontal line in your browser and is usually used to separate sections of your document

The <hr> tag is one of the HTML tags that does not have a closing tag.

The basic horizontal rule extends across the browser page, but you can add a number of attributes to this tag, including size, thickness, and style.

This is an example of using the horizontal rule HTML tag:

Section 1
<hr>
Section 2
<hr>
Section 3
<hr>

This is how the above code would be displayed in a browser:

Text Tags

HTML has many tags for formatting your output. The three most commonly used ones are the <b>, <u>, and the <i> tags.

Surrounding text in your HTML document with the <b> tag outputs the text as bold. Surrounding text in your HTML document with the <u> tag outputs the text in underline. Surrounding text in your HTML document with the <i> tag outputs the text in italics.

The following HTML code shows how to use these tags within an unordered list:

<ul>
<li><b>CMST 385</b></li>
<li><u>CMST 386</u></li>
<li><i>CMST 430</i></li>
<li><b><u>CMST 450</u></b></li>
<li><b><u><i>CMST 498F</i></u></b></li>
</ul>

This is how the above code would be displayed in a browser:

• CMST 385
• CMST 386
• CMST 430
• CMST 450
• CMST 498F

Notice that the example above is also an example of nesting tags within other tags. The list items are made bold by the additional tags. With nesting, we always open and close the inside tags before closing the outside tags, thus keeping them "nested."

Text Size, Typeface, and Color

We have seen how to format the content of an HTML document to display a particular way in a browser, such as using unordered lists and bolding. You can change the size of the text by using header tags such as <h1> through <h7> with the number 1 being the largest and 7 being the smallest. However, the header tags will display text only in the particular size, typeface, and color that are the default settings for your browser.

If you want more flexibility in how your text is displayed, you can use the <font> tag. The <font> tag allows you to change the size, typeface, and/or color of selected text in your HTML document. To do this, you can use three attributes with the <font> tag:

• size
• face
• color

You can use these attributes alone or in combination with others.

Size: The size of the text can be expressed in seven sizes: 1–7. Seven is the largest and one is the smallest; note that this is the opposite of the header tags.

HTML Tag	Approximate Point Size
h6	8 pt
h5	10 pt
h4	12 pt
h3	14 pt
h2	18 pt
h1	24 pt

Face: The typeface is the style and shape of your text. You can specify any typeface in your HTML document as long as the person who is viewing the document has the typeface loaded on his or her computer.

Times Roman and Arial are two fonts that you can be sure everyone will be able to view, regardless of browser type. If you use other fonts, there are no guarantees. One way to be able to use fancier fonts is to create the words in a graphics program and save them as images. Then you just add the image as you normally do.

Color: Remember that there are two ways to specify color for text—with a name or with a hexadecimal equivalent. For example, orange can be set with <font color = "orange"> or a specific shade of orange with <font color = "#FF9900">. You may go to the VisiBone site for a visual representation of the colors and hexadecimal color codes.

The following HTML code shows how to use these tags:

<html>
<head><title>CMST 385 Example</title></head>
<body>
<font-size = "10pt" font-family = "arial" color = "pink">CMST 385</font></br>
<font-size = "12pt" font-family = "courier new" color = "blue">CMST 386</font></br>
<font-size = "18pt" font-family = "verdana" color = "yellow">CMST 430</font></br>
<font-size = "24pt" font-family = "helvetica" color = "green">CMST 450</font></br>
<font-size = "36pt" font-family = "times new roman" color = "brown">CMST 498F</font></br>
</body>
</html>

This is how the above code would be displayed in a browser:

CMST 385
CMST 386
CMST 430
CMST 450
CMST 498F

Character Entities

Character entities, also known as escape sequences, have two purposes:

• escaping or replacing special characters
• displaying characters you cannot type from your keyboard

For example, the left angle bracket (<) and the right angle bracket (>) have special meanings in HTML; they tell the browser that the text enclosed in the brackets is an HTML command. Therefore, if you want to actually display the brackets in the browser, perhaps to demonstrate some coding, you must "escape" or substitute the characters.

The character entity for the left angle bracket < is &lt; and the character entity for the right angle bracket > is &gt;

You must have the ampersand (&) to start the command and the semicolon (;) to end it. It is one of the only tags that will not be in brackets.

Superscript and Subscript Tags

The <sup> or superscript tag shows text higher than the surrounding text. It is usually used for showing exponents or the trademark symbol: (3²), (Tycho^TM).

The <sub> or subscript tag shows text lower than the surrounding text. It is usually used for showing mathematical forumlas: (16_n).

Graphics

In addition to text, graphics (or images) are also a large part of the Web. Graphics files include, but are not limited to icons, bullets, backgrounds, black-and-white photographs, digital art, clip art, line art, banner ads, and imagemaps.

Three main types of graphics are used on Web pages:

• GIF
• JPEG
• PNG

Your browser can display, if supported, GIFs, JPEGs, and PNGs natively. That is, a browser does not need a plug-in to display the file. In addition, they are inline graphics.

To add graphics to your Web page, you can use the <img> tag; for example:

<img src="images/picture.gif">

When your browser encounters the <img> tag, it is a signal to the browser that it will have to go somewhere, download the image, and display it on the page at the location of the <img> tag. The src (source) attribute tells the browser the location of the image. Like the href in an <a> tag, the src value must specify the appropriate path to the image file. This path can be relative or absolute. As you know, an absolute path specifies the complete URL of the image file; for example:

<img src="http://www.umuc.edu/images/picture.gif">

A relative path specifies that the image can be found on the same server as the page that references the image; for example:

<img src="images/picture.gif">

In the example above, the image file is in a directory called images. For manageability, most Web site builders put all their images in one directory. You can call this directory whatever you want: images, graphics, pics, or whatever.

The <img> tag has other attributes as well. The attributes usually follow right after the src attribute. Image attributes that should always be used are width, height, and alt.

Using height and width tags makes the page load faster because the browser does not have to look to see for itself what size the image is: width is the actual width of the image being used; height is the actual height of the image being used. The browser must load only those size settings and then allow the image to fill the parameters. The width and height attributes are never used to change an image's size—you must use a graphics program to do that. To determine the size of an image, click on the image to open it in a file viewer, right-click on the image, and choose properties. You can also open it in a graphics program and look at image information or properties there.

An alternative view is provided by the <alt> tag, which is used as a text substitute for the image. It describes what is intended to be shown. If I had an image of a flower, I might write the alt attribute within the img src tag as follows:

alt = "This is a picture of a rose"

• Example: <p><img src="images/flower.gif" width="200" height="300" alt="This is a picture of a rose"<p>

You should be aware of two things when you work with online images:

1.      If the Web server cannot find the image or if the browser cannot display the image for any reason, you will see an icon in place of the image. If this happens, the path specified in your <img> tag could be incorrect. That is another reason why it is important to include the alt attribute with the <img> tag. The value of the alt attribute will display if the image does not download. Here is an example of using the alt attribute:

<img src="images/picture.gif" alt="eagle picture">

If the image does not download, the phrase "eagle picture" will appear in its place.

2.      When you download an image from the Internet, you must consider the size of the image. Image files are considerably larger than HTML files. If the image takes a long time to download, the visitor to your site may lose interest and go to another site instead. You must recognize this if you include images on your Web site.

Hyperlinks

Arguably, the most important object on a Web page is the hyperlink. You create hyperlinks by using the URL (each Web page has a unique address called a Uniform Resource Locator, or URL), along with the <a> (anchor) tag and an href (hypertext reference) attribute.

Hyperlinks are rendered in a color different from the text (blue is the default color for a link that has not been used; purple for a visited link) by the browsers to distinguish them from the rest of the text.

An anchor is commonly used to point to somewhere (another site altogether, or another specific point within your site) from the current document. The href attribute stands for hypertext reference and specifies the path or location of the page. Between the opening and closing anchor tags, you type the text that the visitor clicks on to go to the page. Here is an example of the anchor element:

<a href="http://www.umuc.edu">University of Maryland University College</a>

The text on the Web page will read "University of Maryland University College" as a hyperlink. Once clicked, the hyperlink will take the viewer to http://www.umuc.edu, as directed by the code.

Relative and Absolute Links

Hyperlinks on the Web come in two types: relative and absolute. Relative links do not have "http://" or a domain name in front of them; absolute links do. Absolute hyperlinks include the full, complete address of a page, and relative hyperlinks include only the path within your file structure. Relative linking is for internal pages only. Because external pages would not be within your file structure, you must use the full address.

This is an absolute link:

<a href="http://polaris.umuc.edu/~ssmith/mydirectory/mypage.htm">My page is located here.</a>

This is a relative link:

<a href="mydirectory/mypage.htm"> My page is located here.</a>

In the examples above, the first link (an absolute link) uses the full address to access "mypage.html" by leaving your page, going out to the server and then back into your account, to the "mydirectory" folder, and then to "mypage.html." The second link (a relative link) goes from the current page to the "mydirectory" folder and then to "mypage.html." The path in the relative link example will work only if the "mydirectory" folder is under the directory in which the referring page is found.

If the referring page and the referred page are in two directories (folders) at the same level, the HTML code would be written this way:

<a href="../mydirectory/mypage.htm"> My page is located here.</a>

This tells the browser to go up one level and then look for the directory called mydirectory.

The E-Mail Link

The e-mail link allows viewers of your page to click on the link and open an e-mail compose window. The e-mail window that opens comes from the viewer's e-mail. If an e-mail client is not installed on the system, a dialog box may appear asking the user to set up an e-mail client. If an e-mail client is installed, the link opens the e-mail compose window and fills in the To line.

<a href="mailto:emailaddres">Send email</a>

An e-mail link to Tim Berners-Lee would be:

<a href="mailto:[email protected]">Send email to [email protected]</a>

Note: Before you send an e-mail to Mr. Berners-Lee, please read his "Before you mail me."

To have the subject line automatically added, add ?subject=TextToShow directly following the mailto and in front of the closing quote.

<a href="mailto:[email protected]?subject=W3C">Send email to [email protected]</a>

Named Anchors

Named anchors are link tags that jump from one part of your document to another by providing a named anchor is a reference marker for a section of your web page. The internal anchor tags follow a two-part process. First we must name the area to be targeted, then we make a hyperlink to that named target.

To create the area to be targeted, we would type the following, using the "words to link to" as the text we wish to show on the page.

<a name="">words to link to</a>

• <a> is the opening anchor tag.
• Name is the attribute creating a name (bookmark or placeholder) in the file.
• "word" is the value of the name. This can be any word you choose to use as your target.
• The user would see nothing different about the words used as the anchor. The named anchor tags are hidden from the user's view.
• </a> ends the anchor tag.

To link to the named anchor:

<a href="#word">Go to the same place</a>

• <a href> is the anchor and hypertext reference tag.
• "#word"' tells the browser to find the anchor we named word above.
• </a> ends the anchor tag.

The # symbol instructs the Web browser to look through the HTML document for a named anchor called word. When you select or click on the hypertext, it brings the part of the document that contains the named anchor to the top of the screen. The marker name and the link name are case-sensitive. If your anchor name were Top and you used top or TOP instead in the link, the browser would not find the named anchor.

Using Graphics as Hyperlinks

There are three basic ways you can display links from a Web page:

• using text
• using graphics
• using imagemaps

Text is the most common type of hyperlink and consists of a word or group of words. This link will be a different color from other content on the page and is usually underlined, most commonly in blue.

You can also use a graphic as a hyperlink. A border that is the same color as other hyperlinks on the page usually surrounds the image. As with a text hyperlink, you click once on the image to activate the link. To set an image as a hyperlink, you would have to surround the image source tag with the anchor hypertext reference tag:

<a href="http://www.umuc.edu"><img src="UMUCpic.gif"></a>

An additional hyperlink option is an image map. An image map is an image that contains many embedded hyperlinks that are mapped to different URLs, making them "hotspots." An image map must be a .gif or .jpg file. You must also have a program that will "map" the image, noting the specific coordinates to which you assign URLs. One of the most common mapping programs is MapEdit, and it is available free of charge.

In addition to clicking on a link to send a URL to a Web server, you can also:

• type the URL in the browser's address field
• use the browser's drop-down menu to select a URL

Whether you click on a link or use another method to send the URL, the Web browser contacts the Web server that stores the Web page.

As long as you have one of the latest browsers, you do not have to type the prefix (http://) when typing the URL. The browser will supply this part automatically. If you have to type a Web address, it is a good practice to copy and paste the URL to avoid typographical errors.

Sometimes links do not display an underline or border; you must use other ways to determine that it is a hyperlink. One way is to move your cursor over the hyperlink. When you do this, the cursor changes to another shape (depending on your browser settings, the pointer usually becomes a pointing finger) and the URL displays in the lower-left corner of your browser windows.

Comments

Comments are notes that a programmer can make in his or her code. These notes do not appear on the web page itself. They can only be seen by looking at the source code. Examples of comments are to write about copyright issues, to write your name and information (date of creation, etc.), or to add comments explaining the code itself.

To make a comment, <!-- text that is comment -->

Comment tags can be placed anywhere in your code. The browser will not read them.

Creating Tables

If you have ever used a spreadsheet, you are already familiar with the concept of HTML tables. HTML tables were originally intended to present data in a tabular format (rows and columns of words and/or numbers). However, tables are now used to format content such as text and graphics on a Web page. Using tables, you can organize your data and make it more readable and attractive.

You must use at least three tag pairs to make a table:

Tag	Purpose
<table></table>	tells the browsers where to start and stop the table; you can put multiple tables on a page
<tr></tr>	defines the rows that contain the table cells (tr = table row)
<td></td>	defines the table cells in which you put the content, such as text or graphics (td = table data); the td is the column of the table

Table construction begins from the top left, then across the columns of the first row, then to the second row and across all of its columns, and so on. To make your table-building as easy as possible, you should do two things.

• Use the border attribute with the <table> tag, and set it to the value 1. This will allow you to see the cells on the Web page. You can always remove the border attribute later if you do not want your table to have a visible border.
• Always make sure every opening tag has a corresponding closing tag. If you do not, some browsers will not display the table or the Web page at all.

Below, you will find table-building examples.

A Table with One Column and Six Rows

HTML code (the surrounding <html> and <body> tags are assumed):

<table border="1">
<tr><td>Course</td></tr>
<tr><td>CMST385</td></tr>
<tr><td>CMST386</td></tr>
<tr><td>CMST430</td></tr>
<tr><td>CMST450</td></tr>
<tr><td>CMST498</td></tr>
</table>

This is how the above code would be displayed in a browser:

Course

CMST385

CMST386

CMST430

CMST450

CMST498

A Table with Two Columns and Six Rows

HTML code:

<table border="1">
<tr><td>Course</td><td>Course Title</td></tr>
<tr><td>CMST385</td><td>Internet: A Practical Guide</td></tr>
<tr><td>CMST386</td><td>Internet: An Advanced Guide</td></tr>
<tr><td>CMST430</td><td>Web Site Management</td></tr>
<tr><td>CMST450</td><td>Web Design Methodology and Technology</td></tr>
<tr><td>CMST498F</td><td>Web Application Development Using ColdFusion </td></tr>
</table>

This is how the above code would be displayed in a browser:

Course	Course Title
CMST385	Internet: A Practical Guide
CMST386	Internet: An Advanced Guide
CMST430	Web Site Management
CMST450	Web Design Methodology and Technology
CMST498F	Web Application Development Using ColdFusion

A Table with Three Columns and Six Rows

HTML code (notice the use of tabs and line spacing to make the code easier to proofread and edit):

<table border="1">
<tr>
    <td>Course</td>
    <td>Course Title</td>
    <td>Short Course Description</td>
</tr>
<tr>
    <td>CMST385</td>
    <td>Internet: A Practical Guide</td>
    <td>An introduction to the Internet and the World Wide Web.</td>
</tr>
<tr>
    <td>CMST386</td>
    <td>Internet: An Advanced Guide</td>
    <td>A study of advanced applications for the Internet and the World Wide Web.</td>
</tr>
<tr>
    <td>CMST430</td>
    <td>Web Site Management</td>
    <td>An in-depth survey of Web site maintenance for small businesses.</td>
</tr>
<tr>
    <td>CMST450</td>
    <td>Web Design Methodology and Technology</td>
    <td>An in-depth survey of the design and delivery of professional Web content.</td>
</tr>
<tr>
    <td>CMST498F</td>
    <td>Web Application Development Using ColdFusion </td>
    <td>A structured approach to building and maintaining dynamic and interactive Web applications.</td>
</tr>
</table>

This is how the above code would be displayed in a browser:

Course	Course Title	Short Course Description
CMST385	Internet: A Practical Guide	An introduction to the Internet and the World Wide Web.
CMST386	Internet: An Advanced Guide	A study of advanced applications for the Internet and the World Wide Web.
CMST430	Web Site Management	An in-depth survey of Web site maintenance for small businesses.
CMST450	Web Design Methodology and Technology	An in-depth survey of the design and delivery of professional Web content.
CMST498F	Web Application Development Using ColdFusion	A structured approach to building and maintaining dynamic and interactive Web applications.

Formatting Tables

Attributes can also be added to help format the tables. Text color, style, and font; background color; rounded corners; cell spacing and cell padding can all be added.

<table border="4" cellspacing="4" cellpadding="4">

<tr>
    <td bgcolor="yellow"><font color="blue">Yellow background with blue text</font></td>
    <td bgcolor ="#00ff00">Lime background</td>
</tr>

<tr>
    <td bgcolor ="#9900ff">Purple background</td>
    <td bgcolor ="#00ffff">Aqua background</td>
</tr>

</table>

This is how the above code would be displayed in a browser:

Yellow background with blue text	Lime background
Purple background	Aqua background

 

Return to the Top

Return to The Lectures page

Return to Home