to learn the fundamentals of Hyper Text Markup Language (HTML)
to learn how to author HTML pages and examine the differences between
authoring HTML and using a word processor such as MS Word
to introduce Computer Based Instruction (CBI) concepts and to present
these concepts in a well written HTML tutorial
to introduce concepts of how to test and validate a professional
looking web site
to begin the discussion of how to design a web site
to design and author a meaningful Web page, i.e. a resume
Introduction: Writing HTML
HTML is an example of a Standard Generalized Markup Language (SGML). SGML was
developed as a set of standards for creating, editing, and transmitting electronic
documents in order for the government and private industry to do business
in a paper less fashion. The Computer Aided Logistics Systems (CALS) included
many standards, including those for markup languages, Computer Aided Design
(CAD), graphics and imaging, factory automation, and Electronic Document
Interchange (EDI).
HTML, while making use of these standards to define the language, grew
out of an attempt to transmit documents between arbitrary computers with
arbitrary resources and OSs. The early efforts only transmitted text, with
the client machine using a browser to format the document as best it could.
HTML uses "tags," normally in pairs that look like <command></command>
to form containers for text. The command tells the browser how to display
the text in the container, e.g. to make it bold, or italics,
etc.
The HTML standard has gone through four major revisions, each allowing
the HTML author greater control over how text and graphics are displayed.
To comply with these revisions, and to get the full effect from the new
standards, users must upgrade their browsers to correctly interpret these
new changes. Since not everyone does this, many web sites cannot be viewed
by older, non conforming browsers. This in turn leaves the Web author with
many open design issues (i.e., design for the lowest common denominator,
or using the latest and greatest HTML features and multimedia effects).
Early HTML authors had to be able to write the HTML as a text document
and supply all the correct tags to make their work understandable to the
Web's browsers. As time went on, HTML editors were created to make HTML
authoring easier. Today, Web editors have almost reached a point that they
are as sophisticated as word processors. Future labs will allow the student
to use Netscape's Composer to create Web pages in a manner similar to a What
You See Is What You Get (WYSIWYG) editor. MS Word, for instance, is a WYSIWYG
word processor. Newer versions of the major word processors can import and
export HTML as well create and edit it.
Why must this lab be done without an HTML editor?
While editors increase authors' productivity by automating many HTML
tags, a good author must still know the HTML tags and syntax. As
HTML becomes more complex, editors don't always implement all of the new
features, tags, instructions, etc. This simplifies the GUI for the majority
of users, concentrating on about 80% of the market's needs. Again, good
practice stresses the need to learn the basics before the productivity tools
and the computer skills.
The Basic Structure of a HTML
Document
The Hyper Text Markup Language (HTML) document is a collection of text,
data, and tags. The tags tell the user's program called a Browser how to:
display the text data on the computer screen,
render the images and graphics for viewing,
play audio and video data, and
carry on conversations with other computers on the internet called
servers, requesting data, creating links to other HTML documents, and passing
on data gathered interactively through a HTML device called a Form.
The Tag
The Tag is made up of < Command> i.e. an open <
and a close > angle bracket and a Command. The Command which is
usually a single word but can sometimes involve assignment of values to one
or more attributes i.e.
The attributes set the values for how the tag effects the contents of
the container. For instance, sets the color, the size, etc.
The start and stop tags form containers:
Tags normally come in pairs
The open tag < Command>
and a stop tag </Command>, note that the stop tag is indicated
by the " /" which precedes the Command
The text in between the start and stop tag is rendered or displayed according
to the computers capability as required by the command in the tag. We say
that the start tag and the its associated stop tag form a container that
holds and effects everything inside them. Some tags are allowed to contain
other tag contianers. The title tag comes in a start and stop pair but may
not contain other tags:
<TITLE>Sample Text</TITLE>
This results in the words, Sample Text, appearing in the window bar atop
the Netscape browser when it displays the HTML document.
Empty Tags:
The paragraph tag <P> originally was one of a limited number
of tags the did not come in pairs. Tags that do not come in start and stop
pairs are said to be empty tags, i.e. they are not containers. The latest
versions of HTML now also recognizes a paragraph pair <P>
and </P> eventually, this will be the common case. Other examples
of empty tags:
<img> the image tag for linking inline images to the document
<BR> the line break tag, i.e. forces a new line,
<HR> the horizontal rule tag, a printer's term, forces a
line to break the document into sections,
<LI> the List Item tag that is used with lists of items like
this bullet list, etc.
<!-- --> the Comment tag used to add information
and remarks to the source HTML to help make it easier to read
Tag commands are case in sensitive i.e. the Browser will recognize <TITLE>
or <Title> or even <title> as a valid title tag. Failure to correctly
pair the tags; for instance forgetting the "/" in the stop tag can lead
to some strange results. Also, the overlapping of tags can lead to some
browsers failing to produce the intended output. It should be remembered
that not everyone is using the same browser. In fact, some browsers called
text-only browsers can not produce compound documents that include multi media
objects. Therefore, the author of a HTML document can not predict exactly
how a browser will display the document. The tag gives the browser a directive
and the browser interprets it as best it can and still conform to the standard.
The HTML Document Tags and Structure:
The Document Type Tag <!Doctype >:
The <!Doctype> tag should be the first tag on the first line of
the HTML document. The complete tag is: <!Doctype HTML Specification_String>.
The Specification_String is a description of the HTML standard that the
document conforms to and may include the natural language that the document
is written in. Some natural languages, for instance Hebrew, do not conform
to the English and related languages that read from left to right but are
read from right to left.
An Example -- This document's <!Doctype> tag
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
The <HTML></HTML> tags:
The HTML document starts and ends with a <HTML> and a </HTML>
pair that forms the basic container and should have two basic parts or
containers:
the Head <HEAD></HEAD> contains non displayed
information for the use of the author and the browser
the Body <BODY></BODY> contains the text, images,
and data and tags which specify how to browser should be displayed
The Comment Tag <!-- -->:
The Comment tag is used to insert comments and other remarks that the
programmer who created or maintains the source document places in document
to aid in understanding. The comment tag is not used by the Browser in rendering
the document. It is often used by those who write Java Scripts to allow
non-JavaScript Browsers to skip over the scripts. The comment tag's form
looks like:
<!-- your comment goes here -->
Note that the comment tag is another empty tag and may appear in any
part of the document.
The Head:
The Head contains information that give the document's creator a means
of titling it, pointing to the original source if copied, comments, etc.
The Head is not normally displayed but is extremely helpful to both the developer,
the knowledgeable reader who can use the Browser to read the HTML source,
and finally, to the browser. The Head is set off by a <Head>
and </Head> pair and must contain a <Title> inside it.
The Title is always required. The Head can sometimes be inferred by the Browser
but this may lead to unhappy results in the future.
The Body:
The Body section of the document is the portion of the document that is
displayed. It is a container defined by the <Body></Body> tag.
The body may of course contain other containers. The attributes of the <Body>
tag are valid except within containers that over ride the attributes of the
<Body> tag. In general the rule is that for contains inside containers
the inner most container rules its container but the attribute of that container
do no affect the one it is contained, etc.
The Basic Structure:
Thus the Basic HTML document structure looks like:
The basic template for starting a HTML page development
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <HTML> <!-- the head container is for information that is not
displayed but defines style, meta tags, and other information that are
used by the browser to display the document --> <HEAD> <!-- your comment goes here --> <TITLE>Your Title Here</TITLE> <!-- meta tags are used to define the author, abstract
the content of the document and add key words and phrases for the benefit
of search engines. --> <! your style guide goes here --> </HEAD> <BODY> <!-- your document's description and the instructions
on rendering the the author's concept goes here -->.
</BODY> </HTML>
Many HTML Editors use some form of the above structure as the starting
template and the student is advised to create such a template to facilitate
his work. A template is a useful structure that is used as a starting point
for a web page. Templates that layout a resume, or simple home page, or
one that gives a web site a common look and feel and commonly used by beginners
and professionals alike. Later, we shall study how we can use a much more
powerful tool called a style sheet can be used with templates to create
a more refined control of this look and feel.
The <Head></Head> Tag:
Tags of the Head Container
Tag
Attributes
Comments
<Base>
Href = URL
The default reference for relative URLs on the page is the URL of
the current document. The use of the Base tag allows the author to define
the URL upon which the documents relative URLs are referenced from. (see URL section)
Target =
This is used in a frame to target the default frame for the document
that is being linked is to be placed. (see the Frame Lab)
<IsIndex>
Prompt = "String"
Used in early versions of HTML to prompt a viewer to enter a string
that will cause a search of specified data source. The prompt attribute
allows the customization of the prompt message. This tag is deprecated. i.e.
not recommended and may become obsolete.
<Link>
Link creates a link between the web document and another. This is
most commonly used to link the document to an external style sheet.
Href ="URL"
The URL of the document to be linked.
Method =
Method of the process to be gotten.
Name =
Name of the anchor if linked document is to used as one.
Rel =
Relationship between the current page and the linked document, e.g.
style sheet
Rev =
Reverse relationship of the Linked document and the current document.
URN =
Title =
The title of the document that is being linked with.
<Meta>
Meta information is information about information, i.e. information
about the document.
HTTP-EQUIV =
Information used by the response header
Name =
Used to supply information about the document. A tag has either
a name or a HTTP-EQUIV attribute.
The Style tag container allows for the creation of a style sheet
that controls the appearance of the document. (see Lab on HTML
4.0, DHTML)
<Title></Title>
This container should not contain any other tags. The container
holds the text that appears at the top of the browser window.
The <Title></Title> Tag:
Every document is required to have a <Title></Title>
tag. It is the only tag container required in the Head container.
The <Meta> tag:
This tag is used to provide information that be
used to classify for search engines and provide documentation about the documents
history and creator.
The Name attribute:
The <Meta> tag is used by many search
engines to determine what is the nature of the document and how to classify
it. The name can be used to identify the author, give a description used
to describe the document when it is retrieved as the result of a search
query, e. g.
Sample of Meta Name Attribute
<Meta Name= "author" content= "Patrick
Krolak"> <Meta Name= "description' Content= "Tutorial
on HTML and the design of HTML documents with an example of writing a resume
for the web"> <Meta Name= "Keyword" Content= "HTML,
Tutorial, design of web documents, resume">
The HPPT-EQUIV attribute:
The use of the HTTP-Equiv is most often encountered
today when a web site has moved and the author still has a page at the
former ISP to cause you to transfer to the new site. It is called a Client
Side Pull. It is sometimes used to refresh a web page automatically, like
a web cam or stock price update, etc.
Code Snippet:
Placed in the head of a Test.html
<!-- Return to the lab page that called this Test.html in 10 seconds
-->
<Meta HTTP_EQUIL="refresh" Content="10" URL="http://www,cs,uml.edu/~pkrolak/lab3/lab3.html">
The Body tag supports the setting of certain attributes that allow for
a more interesting and colorful web page. This section will show the user
how to:
Determine the Hexadecimal value to achieve a specific color.
Set the color or background pattern for the page.
Set the color of the text.
Set the colors for the various links.
Adjusting the Font's Size.
Colors:
Color values:
The color value of the various attributes of the Body Tag are based
on a color table that uses Hexadecimal arithmetic to assign values for Red,
Green, and Blue which are then mixed to form a final color. The values
for each (R, G, B) go from 0 (decimal) to 255 (decimal) or from 00 to FF
in Hexadecimal. The values of the attributes are set "#RRGGBB" where RR,GG,BB
are the appropriate Hexadecimal values of the color to be used.
A Small Table of Color versus Their Hexadecimal Values:
Common Colors and their Hexadecimal Values are given below in the table
and should provide a starting point for beginner. One can either use Color
table tools: see for instance, HTML Effects 2.0 in the Web Weaver Folder
or by trial and error to get the right colors for an application.. One
can easily select reasonable colors if one remembers that 00 is the absence
of the color, 80 is the middle value, and FF is full saturation. Thus it
follows that:
COLOR TABLE
HTML Color Name versus
Value
Black
"#00000"
Blue
"#0000FF"
Navy
"#000080"
Brown
"#A52A2A"
Cyan
"#00FFFF"
Green
"#008000"
Olive
"#808000"
Lime
"#00FF00"
Teal
"#008080"
Silver
"#C0C0C0"
Gray
"#D02090"
Purple
"#800080"
Maroon
"#800000"
Red
"#FF0000"
Fuchsia
"#FF00FF"
Yellow
"#FFFF00"
White
"#FFFFFF"
Sites for finding Hex color Values:
There are a variety of source that provide tools for determining the
Hex values that go with colors:
Webmaster's Color Laboratory -- http://www.visibone.com/colorlab/
Use the color diagram by placing your mouse over the color and observe
the name and the hex numeric values in the status bar on the bottom of the
window.
Setting a Color for the Background:
The Background can be set to a solid color where we use the previously
described color table based on the HTML Standard Colors or the use
of Hexadecimal color codes. The Body Tag attribute for background color
is Bgcolor. For instance, to set Bgcolor to "Green" or its equivalent
hexadecimal 008000, value for green:
The HTML Code to set the Bgcolor to Green
The Equivalent Result using a Table Cell's Bgcolor attribute
<Body Bgcolor="#008000" >
<Body Bgcolor="Green">
Using a Pattern or image for a Background:
It is sometimes nice to use a tasteful image or pattern as a background
as a change of pace or to make a subtle point. For instance, in this example
page we use a teal textured paper background. To achieve this effect we
set the attribute Background to be equal to the URL. In this case the URL
is in the file folder TestGIF and is the file teal_paper.GIF where TestGIF
and HTML which holds the current document are in the same project Folder.
Thus to achieve the background effect we must write the Body Tag as follows;
<BODY Background="../Test GIF/teal_paper.GIF">
Many different sites offer a variety of Background Patterns.
Setting the Text Color Attribute:
The text color attribute is similar to the background attribute i.e.
Text = Color value. Care must always be taken to make the Text a color that
is in strong contrast to the Background color. As an example, to set the
text to Black:
<Body Text="#000000"> or <Body Text="Black">
Setting the Link, the Visited Link, and the
Active Link Colors:
The Link:
The Link's text (referred to asthe Hot Spot) or the
border of the Icon or Image referred to as the Button is assigned
a color different than the regular text. The viewer can by clicking on the
Hot Spot text or Button link to another document. The browser then transfers
the reader to the associated URL. The color of the hot spot's text or the
button's border is set by the Link attribute. The .Link is assigned a color
to cue the reader; and hence must be easily differentiated from the Background
and the normal text. As an example, to set the Hot Spot text to Blue:
<Body Link="#0000FF"> or <Body Link= "Blue">
The Visited Link:
If the Hot Spot or Button has been visited in a previous session
it is called a Visited Link and has again a different color from the Link
which has not been used. The Visited Link attribute is called Vlink. To set
the Vlink to Purple:
<Body Vlink="#800080"> or <Body Vlink="Purple">
The Active Link:
When the Hot Spot or Button is clicked, it is called an Active Link
and has again a different color from the Link and the Vlink. The Active Link
attribute is called Alink. To set the Alink to Yellow:
<Body Alink = "#FFFF00"> or <Body Alink="Yellow">
Background Resources:
There are numerous sources of background textures to use in the construction
of a web page. To find them use any search engine and type --"background
graphics" OR "background textures". Use the quote strings
to get the best results.
Yahoo List of background resource sites: http://dir.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and_Layout/Graphics/Backgrounds/
Tags for formatting Text:
Headings
As you can see in the chart below, heading tags control the relative
size of the text placed between them. However, headings are not meant simply
to control the size of text; there are other tags for controlling point size.
The correct usage of the heading tag is to indicate the subordination of
sub-sections of text. The H1 tag is reserved for the principle idea or concept.
The H2 tag indicates the major sub-division or sections relating to the principle
idea. Further, H3 is a sub-section of an H2 sub-section, and so on. The correct
use of heading tags allows search engine's location strategies to correctly
classify a Web page for a hit, i.e., to be retrieved in the first 10 listings.
This is due to the fact that the classification strategies prioritize the
words in the title and in the headings over other main body text.
Sample of Headings
HTML Source
Web Browser will Display
<H1>Hello World</H1>
Hello World
<H2>Hello World</H2>
Hello World
<H3>Hello World</H3>
Hello World
<H4>Hello World</H4>
Hello World
<H5>Hello World</H5>
Hello World
<H6>Hello World</H6>
Hello World
Tags that effect the Appearance
of Text:
Heading tags are not the only means of specifying an author's desires
about the appearance and layout of the text on the page. We shall develop
our discussion by first talk about the text style tags as they were introduced
to the standard. As HTML matured the web designer demanded more and more
flexibility and capability to create and specify appearance of the text and
its layout. The web designer must still cope with the knowledge and frustration
that the later additions to the HTML standard are not supported by the browsers
on significant number of users. Hence, much of this later sophistication
is lost as earlier version of the graphic browsers and the text only browsers
will ignore many of these tags defined in later versions of the standard.
In the early developments of HTML tags that affected text styles were broken
down into two types -- the first, called logical styles based on tags being
described through their function, the second being described for what the
author wanted for as a physical appearance.
Logical Style Tags:
The logical style category is made up of tags that have names that describe
the function or role of the text within the document. The standard describe
what the type of appearance each tag was to have and the browser was to
find what font and style carried out this function. THus in the early days
of the standard two browsers on the same machine could produce quite different
approaches to meeting these wishes. The same browser on two different computer/operating
systems could also produce major differences in display.
Logical Style Text Tags
Tag
Resulting display of tag container
The Address Tag <Address>
Hi World
The Blink Tag
<Blink>
Avoid over use of this tag as blinking can
get quite boring.
The Cite Tag <Cite></Cite>
Cite is used as the name implies with citations
as in quotes. (see the <blockquote></blockquote> and
<Q></Q>.)
Hi World
The Code Tag <Code>
Hi World
The Definition Tag <DT>
Hi World
The Emphasis Tag <Em>
Hi World
The Keyboard Tag <KBD>
Hi World
The Sample Tag <Samp>
Hi World
The Strong Tag <Strong>
Hi World
The Variable Tag <Var>
Hi World
Physical Style Tags:
The physical style tags are those give some control over the physical appearance
of the the text.
The Physical Style Tags and Examples
Tags
Example of the display of the tags
The Bold Tag <B>
Hi World
The Italic Tag <I>
Hi World
The Underscore Tag <U>
Hi World
The Big Tag <Big>
Hi World
The Fixed Width (Tele-Type) Tag <TT>
Hi World
The Small Tag <Small>
Hi World
The Strike Through Tag <Strike>
This tag is used to indicate changes in the original
document.
Hi World
The Subscript Tag <Sub>
The i-th variable in a sequence of x's is Xi.
The Superscript Tag <Sup>
X times X is X 2
The Font Tag <Font></Font>:
The font tag <Font></Font>forms a container that must have one
or more attributes set to be meaningful. The introduction of the font tag
allowed the web designer much greater control over the physical appearance
of the text. As we shall see in later labs the movement in HTML is to give
the web designer not only more control over the display process and to
have more confidence that the design that they create will be very faithfully
carried out by the browser that support the latest standards.
Attributes of the Font Tag:
Color:
The color attribute works the same as in the body tag and other tags. The
attribute is set equal to:
Color = "HTML_Color_Name", or
Color = "#RGB" where R, G, and B are each two digit hexadecimal
numbers
Face:
Face defines the type font is desired to be used. Since not all browsers
support the same fonts, nor is every machine loaded with the same fonts or
use the same name for them, it is desirable to set face to a comma separated
list that goes from a specificfont to a more general one that will be available
on all machines. The good designer does not overload the page with many faces.
Pick faces with care.
Size:
The size attribute is limited values from Size ="1" to Size="7". The size
can be relative if a <BaseFont> tag is used to set the normal default
size.
A Table of Values for the Font Size Attribute
HTML Source for Fonts Sizes 1-7
Display of Resulting HTML Document
<Font Size="1">Size 1</Font>
Size 1
<Font Size="2">Size 2</Font>
Size 2
<Font Size="3">Size 3</Font>
Size 3
<Font Size="4">Size 4</Font>
Size 4
<Font Size="5">Size 5</Font>
Size 5
<Font Size="6">Size 6</Font>
Size 6
<Font Size="7">Size 7</Font>
Size 7
Special Characters:
At some point the author may want ot use characters
that used in the HTML source to create a tag such as the right or left
angle bracket, i.e. < or >. To make it clear to the browser that this
part of the text and not a special character involved in the HTML source
we escape the character -- create a special symbol or sequence that the
HTML interpreter recognizes. We do this in the case of the HTML by developing
a sequence that starts with a "&" and ends with a ";" -- for
example, the sequence to be used for the right angle bracket < is the
sequence <
Sequences for Special Characters Note the sequences are case sensitive
Special Character
HTML Sequence
Blank space -- Non Breaking SPace. Use it
to create TABS etc.
In addition to special characters that are involved
in the HTML source, we must deal with the characters that make up the western
European written language and other natural written languages. While the
discussion of this subject is beyond the scope of this material, for those
that deal with multiple languages in constructing their web sites the World
Wide Web Consortium (WIC) has provided a very detailed discussion on this
technical matter. (See W3C Special Characters http://www.w3.org/MarkUp/html-spec/html-spec_13.html and see Special Character Tutorial ).
Block Structures:
Block structure tags like <Div>, the <P>paragraph tag, and Headings
create horizontal space around their container. They also are now defined
with an attribute, align that has three possible values: 1.) left, 2.)
center, 3.) right. The computer science notation to indicate such a choice
is Align="left | center | right". The "|" indicates the allowed choices
that maybe selected. The default is "left" justified. Netscape allows a
fourth choice of Align = "justify" to allow the justification of both the
right and the left side. The use of align is to obsolete the <center>tag
which was not a part of the standard but used in many HTML documents.
The Div Tag <Div></Div>:
The Div tag, <Div>, allows the creation of structures in the document.
Think of the parts of a business letter: the address, the greeting, the
body, etc. These all are separately aligned structures.
The Div tag, can have containers that over ride the div's attributes with
in their own scope.
Example demonstrating <DIV> tag and how tags inside
the container interact
HTML Source
Resulting Display
<Div Align="Right">Date <P align="center">Clyde Fudd<BR>
C_Fudd@student.uml.edu</P> <P Align="left">Hello,<Br>
Yada Yada. and more Yada </P>
Good Bye, </Div>
Date
Clyde Fudd
C_Fudd@student.uml.edu
Hello,
Yada Yada. and more Yada Good Bye,
The Paragraph Tag <P></P>:
The paragraph tag, <P>, originally was a single tag, but
the new standard calls for the use of it use as a pair of tags to form a
container.
Sample Use of the Paragraph Tag <P></P>
Display of the Results
Sample paragraph with the use of a single tag.<P>A second
paragraph with a single tag. <P>
Sample paragraph with the use of a single tag.
A second paragraph with a single tag.
<P>Sample paragraph with the use of a pair of tags.</P><P>A
second paragraph with a single tag. </P>
Sample paragraph with the use of a pair of tags.
A second paragraph with a single tag.
<P align = "center">Sample paragraph with the
use of a pair of tags and the align = "center".</P><P align
= "left">A second paragraph with a single tag and the align = "left".
</P>
Sample paragraph with the use of a pair of tags and the align
= center.
A second paragraph with a single tag and the align = "left".
<P align = "center">A first paragraph with the
use of a pair of tags and the align = "center".</P><P align =
"left">A second paragraph with a single tag and the align = "left".
</P><P align = "right">A third paragraph with
a single tag and the align = "right". </P><P align = "justify">A
fourth paragraph with a single tag and the align = "justify". </P>
A first paragraph with the use of a pair of tags and the align
= center.
A second paragraph with a single tag and the align = "left".
A third paragraph with a single tag and the align
= "right".
A fourth paragraph with a single tag and the align = "justify".
The BlockQuote <Blockquote></Blockquote>:
The Blockquote tag ,<Blockquote>, is used to set off or
separate an extensive quote from the rest of the document. The attribution
to the author is normally done using an address tag container, i.e. <Address></Address>.
The Quote <Q></Q> Tag:
The <Q></Q> tag is used for
short quotes. The browser may or may not add the quote symbol at the beginning
and end.
The Span <Span></Span> Tag:
The <Span></Span> tag is a container
to be used within a paragraph <P></P> where the text in
the container uses a different style than the rest of the paragraph. We will
cover the concept of Style tags and related matters in the laboratory on
Dynamic HTML.
Line Breaks <BR>
The line break tag, <BR>, is used to cause an immediate
line break. The break tag is an empty tag but a highly useful one, forcing
the text to flow to the next line. See Sample:
Sample of the Line Break Tag <BR>
Address with and without line break
Resulting Display
Clyde Fudd<br>61 Dead End Lane <BR>Castle
Grande, AR 00333-0033
Clyde Fudd
61 Dead End Lane
Castle Grande, AR 00333-0033
Clyde Fudd 61 Dead End Lane Castle Grande, AR 00333-0033
Clyde Fudd 61 Dead End Lane Castle Grande, AR 00333-0033
The <BR Clear=Left>, the attribute Clear="Left", will will cause the
text to stop and to begin again at the bottom of the images.
Horizontal Rule <HR>:
The horizontal rule tag, <HR>, forces a horizontal
line to be drawn to break the document into sections. The line can be a simple
line or it can be made to appear as a 3D line with a height as well
as a width. In some cases a long and relatively thin image or drawing called
a bar can be used to simulate a horizontal rule. The authors' use graphic
bars through out the labs to archive a separation between topics or document
sections.
Sample use of the <HR> Tag
Sample HTML Source
Resulting Display on the Browser
Example of a horizontal rule: Note how it breaks this into two separate
sections. <HR height="10" width="200">
New section:
Example of a horizontal rule:
Note how it breaks this into two separate sections.
New section:
Lists:
Lists are a useful means of summarizing materials and ideas. HTML allows
for a variety of methods for generating and displaying lists of items.
The following is a brief description of the different tags used in generating
various lists:
Unordered Lists: <UL type
= disc | square | circle>
Here the "|" indicates a choice of one of these. The notation is read
either this or this, etc.
The unordered list, i.e. un-sequenced list, uses the type parameter to
select the symbol that will proceed each new item in the list. The <UL></UL>
form the container and <LI>, is an empty tag, that is used
for each list item within the container. The List Item tag <LI TYPE=Disc
| Square | Circle> is used for each item in the list and the TYPE
specifies the symbol for this item and those that follow.
Standard -- the default if type is not assigned
a value
Type = Disc
Type = Circle
Type = Square
Ordered Lists: <OL Type=
a| A| I| i Start=?>
The notation Start=? means that the ? is some value in an ordered sequence
of the correct type.
The ordered list, i.e. numerically or alphabetically sequenced, is useful
to rank ideas, order events, etc. In HTML, ordered lists use the type parameter
to assign one of the following indices to the items in the list:
Standard -- the default, numeric order, if type
is not assigned a value
Type = a -- Items ordered alphabetically by lower
case letters
Type = A --Items ordered alphabetically by upper
case letters
Type = I -- Items ordered by large Roman numerals
Type = i -- Items ordered by small Roman numerals
Note: The parameters assigned to Type are case sensitive.
Start is the first value to be assigned to the parameter.
The List element <LI> is defined as:
<LI Type= a| A| I| i Start=?>
where Start is the value for this list item and each succeeding item
is the next value of the given type.
Menus: <MENU> </MENU>
Menu is list of choices (links) where the list items are <LI>.
The menu tag is currently treated as an unordered list by both Netscape
and Internet Explorer as seen in the example:
Example HTML Source on Right Rendered Browser on Left
<Menu>Menu Example
<LI>Item one
<LI>item two
</Menu>
Menu Example
Item two
Directory List: <DIR></DIR>
The directory list is supposed to used for short (24 characters or less)
items that have no other containers (tags). The directory list is also
treated as an unordered list by both Netscape and Internet Explorer as seen
in the example:
Example HTML Source on Right Rendered Browser on Left
<DIR>Directory Example
<LI>Item one
<LI>item two
</DIR>
Directory Example
Item one
Item two
Definition List: <DL></DL>
Definition List are somewhat interesting in that they have two tags for
each item. The Defined Term <DT> tag that specifies the term and the
Defined Definition <DD>. Each of these two terms are empty
containers, i.e. no close tag pair.
Example of Definition List Source on Right Browser Rendering on Left
<DL>Definition List Example <DT>List <DD>A set of related items. </DL>
Definition List Example
List
A set of related items.
Lists maybe Nested
Lists may be nested, but this causes each level of nesting to be indented.
The over use of nesting can lead to ugly looking pages. The author should
be careful about appearance.
Examples:
Ordered Lists:
Ordered List Source Code
Browser Display
<OL>Standard -- default numbers
<LI>Point one
<LI>Point two
</OL>
Standard -- default numbers
Point one
Point two
<OL type="a"> Lower Case Letters
<LI>Point one
<LI>Point two
</OL>
Lower Case Letters
Point one
Point two
<OL type="A">Upper Case Letters
<LI>Point one
<LI>Point two
</OL>
Upper Case Letters
Point one
Point two
<OL type="I">Large Roman Numerals
<LI>Point one
<LI>Point two
</OL>
Large Roman Numerals
Point one
Point two
<OL type="i">Small Roman Numerals
<LI>Point one
<LI>Point two
</OL>
Small Roman Numerals
Point one
Point two
Unordered Lists:
Unordered List Source Code
Browser Display
<UL>Solid Circle -- default
<LI>Point one
<LI>Point two
</UL>
Solid Circle
Point one
Point two
<UL type=Square>Solid Square
<LI>Point one
<LI>Point two
</UL>
Solid Square
Point one
Point two
<UL type=Disk>Solid Circle
<LI>Point one
<LI>Point two
</UL>
Solid Circle
Point one
Point two
<UL type=Circle>Circle
<LI>Point one
<LI>Point two
</UL>
Circle
Point one
Point two
Linking to Other Hypertext Documents and Multi-media:
The Universal Resource Locator, (URL), is a fundamental concept to the
World Wide Web. For every service or protocol requested, the address of
the web server from which the service is requested, has a unique Domain Name
and IP address on the internet, and every file needed for the requested service
has a unique path. Thus the the URL specifies a service and and a unique
address for a file anywhere in the internet. Universal
Resource Locator (URL)
Anchor Tags:
The anchor tag, <A></A>, allows us to construct the familiar
hypertext link to documents, multi media, or to other services like email,
ftp, or telnet. The anchor tag has a HREF (Hypertext REFerence) attribute
that is set to an absolute URL or relative URL.
HTML Samples for Anchor Tag Links
Display of HTML Samples
Example of an absolute URL: <A href=" http://www.learnthenet.com/english/html/16addrss.htm
">Your Link Text Goes Here</A>
A named anchor allows the web page designer to create a place inside
a document that other documents can use as a reference or target. This feature
is quite handy if the HTML is large or complicated the viewer can be taken
to the exact spot immediately and unambiguously.
How does a named anchor work?
The named anchor is place in the document using the <A> tag with
a attribute name set to some meaningful name. For instance to refer the
head of this section of the document -- Named Anchor Tags: we would:
<A Name="Named_anchor">Named Anchor Tags:</A>
To make a hyper text transfer to a specific named anchor in any document,
we use the document's normal URL and append a "#" symbol followed by the
name of the anchor.
Examples of how to refer to a named anchor
Type of URL
Example
Absolute URL:
<A HREF="http://www.cs.uml.edu/~pkrolak/lab3/lab3.html#Named_anchor">
To reference this section from another document
</A>
Relative URL -- to document in the same directory or subdirectory
as the current page.
<A HREF="lab3.html#Named_anchor">
To reference this section from another document in the same directory
</A>
Inline images are images that linked to the document and appear in the
normal flow of the HTML code. The original versions of HTML browser interpreted
the code in the order that it was read. Once placed on the page, the document
was fixed or static. The newest version, HTML 4.0, shall allow a dynamic
document that the author can insert or change material in the document after
it has been loaded.
Attributes of <IMG> Tag:
Image <Img> Tag Attributes
Attribute
Comment
SRC ="URL"
The URL specifies the location of the image source file.
Alt = "Descriptive text"
The alt attribute is required in order for viewers with reduced
vision or for text only browsers. The descriptive text should describe
the image. The alt text will appear when the cursor is placed over the
image.
Lowsrc="URL"
If the image is large (greater that 30kB), it is good practice to
use a lower resolution image to provide the viewer with a preview of the
larger image. This attribute can be used to achieve other visual effects.
Align = Left | Right
Flow text on the Left or Right side of the image
Top|Middle|Bottom
align the image relative to the text, i.e. Top, Middle, or Bottom
Border = 0, no border
N pixel border
For images used as a link (button) a border is used to cue the reader.
Typically blue in color, the default is a border of 1 pixel.
Height = "Number_Pixels"
Pixel height of the image.
Width ="Number_Pixels"
Pixel width of the image.
Vheight = "Number_Pixels"
Space in pixels on top and bottom between text and image.
Vwidth ="Number_Pixels"
Space in pixels on right and left between text and image.
ismap
Indicates a Server Side Imagemap. An imagemap defines areas, hot
spots, that when a mouse is over it, clicked on it, or leaves it creates
an event that triggers an eventhandler. Typically clicking on the area will
cause a hyper text link. See: Imagemap Lab.
usemap ="#Name_of_Map"
Indicates a Client Side Image map, the Name_of_Map is used to locate
the Map tag that defines the regions and the action or links assocaited
with each. See: Imagemap Lab.
The <IMG> tag requires the attribute, SRC="URL" where the URL can
be a relative URL, i.e. specify a path to the image file if it is in the
user's web site. The relative path is similar to a relative Unix path.
Currently images with extensions .gif (GIFs using the 87 or 89a
standard), .jpeg or .jpg (JPEGs), or .png (PNG) are
supported by all major browsers.
Align, align text with the image:
Alt, the Alternative Attribute:
The new HTML 4.0 standard also requires that the alternative attribute,
Alt= "Text description", be used. When filled in, the image description
will appear when the mouse is over the image. This will allow a text only
browser or someone who has set their preferences to not display images to
see what the image depicts. Further those who are vision impaired may use
a text to speech enabled browser to know what the image is. In the future
an <IMG> tag without an Alt attribute will generate an error message.
Example Use of the <IMG> Tag
Source with a Image Tag
Resulting Display
This is an example of an 89: GIF<IMG Src="Email.gif" Alt="Animated
Email Gif">
89 GIFs support animation and transparency.
This is an example of an 89 GIF:
89 GIFs support animation and transparency.
This is an example of a JPEG image.
<Img Src="karen.jpg" Alt="Dancer by Mary Todd of Boston 1999">
This is an example of a JPEG image.
Images as iconic buttons:
Images can be used as buttons to create a link. This quite useful at times
and can break the monotony of the the standard text links. In the examples
below we use an animated email gif to link to the email processor set up
to send email to one of the authors. Try it! The other button is slightly
more complex and uses something called JavaScript to pull off two operations:
the first one is called a rollover, watch image change color when you move
your mouse over it. If you click on it, it will send you back to the last
page that you visited. We will not go into the JavaScript at this time as
some of the magic is hidden in the head of the document. A good magician never
reveals all of his magic at one time.
Images used in variety of applications as iconic buttons
HTML Source
Resulting Display
This is an Email gif that acts like a button. When clicked, it calls
the email client with the to: pkrolak@cs.uml.edu
The email is called inbox_lg_clr.gif
<A Href="mailto:pkrolak@cs.uml.edu">
<IMG SRC="inbox_lg_clr.gif" Alt="Email GIF">For further Information</A><BR>
Check It Out!
This is an Email gif that acts like a button. When clicked, it calls
the email client with the to: pkrolak@cs.uml.edu
The email is called inbox_lg_clr.gif
<!-- Set Up Return to the Last Page -- a Back Button -->
<a href="Javascript:history.back()" onmouseover="filter('a237','a248')"
onmouseout="filter('a237','a233')">
<img SRC="back1.jpg" NAME="a237" BORDER=0 height=42 width=120
Alt="Back Button"></a>
Design issues involving images:
Imagemaps:
An alternative to using the hypertext link is the imagemap. Imagemaps
allow the author to create a special areas or hot spots that when a the viewer
places the mouse over, leave, or click on creates an event. These events
can be as simple as when clicked on create a hypertext link. When combined
with scripting languages such as JavaScript allow the user to create some
exciting user interactions. See: Creating Imagemaps.
Creation, Editing and JavaScript Application of Images:
Images involve many design issues. In later labs we will explore the creation
or generation and editing of digital images and graphics. Advanced topics
such as animation, transparency, and choice of file format and resolution
will also be investigated. See: Creation, Editing,
and JavaScript applications involving images.
Adding Muti media -- Sound and Video:
There are two approaches to adding sound and other media to your HTML
page:
Linking the sound or media file using text, an image or a button,
or a hot spot. To use this approach use the <A></A> container
and set the src attribute to the URL of the sound or media file as you would
any other file. Clicking on the link will result in a new window being opened
up that will play the file if the appropriate plugin is available.
Using a new tag container, the <Embed></Embed> that
will allow the sound or media to be played within the window if the appropriate
plugin player is available.
Embedding sound and multi media into the HTML page:
<Embed></Embed> Examples of Embedded
Sound
Source HTML Code
The Result
A midi sound file --
<EMBED SRC="http://comp.uark.edu/~rlee/midi/clau-all.mid" WIDTH=145
HEIGHT=16 AUTOSTART="false"> Click the arrow icon [Start] button on the
controls to play.
</EMBED>
A midi sound file --
An au sound file --
<EMBED SRC="http://info.fuw.edu.pl/multimedia/sounds/bells.au" WIDTH="145"
HEIGHT="16" AUTOSTART="false">Click the arrow icon [Start] button
on the controls to play.
</EMBED>
An Au Sound file --
A wav sound file --
<EMBED SRC="3beeps.wav " WIDTH="145" HEIGHT="60" AUTOSTART="false">Click
the arrow icon [Start] button on the controls to play.
</EMBED>
A wav sound file --
Adding Background Audio to a Page
Before attempting to add background audio to a page the student should
read the following:
After Reading the above material what we would do is to add both
an <embed> and a <bgsound> to our page so the two most used browsers
could carry out our selection.
<embed SRC="http://plato.digiweb.com/~dlovrien/sousa/mp2/starstrp.mp2"
autostart="true" loop="true" width=200 height=55>
<bgsound SRC="http://plato.digiweb.com/~dlovrien/sousa/mp2/starstrp.mp2"
Loop="50">
To get rid of the player controls add the attribute Hidden = true to both
tags.
The later labs will cover families of tags that will add user interaction,
layout, and advanced features and excitement. For those that need to look
ahead:
The correctly designed Web page reflects a balance of concerns:
Who is the audience, and what is the level of interest in the topic?
What is the average browser used by this audience (if you are targeting
Microsoft Office users you don't use Netscape only tags).
Overusing multimedia that requires minutes to load for a few seconds
of display is not recommended. Tell the audience what they will see and how
long they can expect to wait to see it; then let them make the choice.
The term "clown pants" is used to describe a cluttered page of
clashing ideas, images, and colors. Annoying sounds repeated over and over,
blinking text, and scrolling banners are to be avoided, or at least used
very carefully.
The methods for navigating through a site should be very carefully
planned and consistently applied.
Manners and good taste should always dominate your choices.
The resume is something everyone must learn to write at some time; since
this is almost a rite of passage, we'll use it as an example. The resume
not only serves as an exercise in HTML, but as a design task that requires
you to summarize your experiences and education succinctly. The well designed
resume should present you in a favorable light while not focussing on issues
of age or gender.
Writing Effective Resumes:
Remember the purpose of a resume is to get the writer a first interview.
It should summarize the work experience and the skills of the individual,
but it should also provide enough details and character to standout. If
possible it should match the corporation's needs to the skills and objectives
of the individual. Since the amount of time spent by the reviewer maybe be
only a few minutes and there may be hundreds of applications, the resume
should be short -- approximately a page, well written, with good grammar
and flawless spelling, and laid out in a logical order. The appearance should
be crisp, demonstrate a professional and successful grasp of business presentation
skills, and still have enough individual flair to stand out.
CBI is a rapidly evolving field. Concepts such as self-paced learning,
instant feedback and encouragement of the user, and interactive testing
are all being utilized in government and industry. The HTML tutorial designed
by Eric Meyers of Case Western Reserve University is an outstanding example
of the state of the art. In using this tutorial, you should take the introductory
HTML that covers HTML versions 1.0 and 2.0. Advanced issues such as tables,
forms and CGIs. and dynamic text (HTML 4.0) will be addressed in later labs.
1) read the Pre Lab, and take the self tests in the Case Western Reserve
University's tutorial
2) read the more formal tutorial
3) print and study the Barebones Cheat Sheet
You must read this before attempting the Lab. This tutorial will give
the necessary background in HTML to transform the text of the resume into
a Web page.
Print out a copy of this summary (cheat sheet) and
keep it handy.
Testing and Validating the Web Page
The Internet also offers many useful validation tools for checking:
the estimated loading time of a Web page
whether HTML syntax is correct
whether the links are current or dead
spelling
In Exercise 7, you'll use this web site to try out these tools to check
your work. The reason for using these tools is
1) to check your work for errors
2) to assist you in managing images and other multimedia and load times
3) to determine how many other web sites are linked to your web site
The Web is maturing rapidly into an electronic marketplace. To function
in this marketplace, you will need to verify that your Web pages present
a professional, interesting, and attractive appearance.
The W3C (World Wide Web Consortium) has developed a tool for cheching
your web page link once you have it up on your web site. For a quick check
of your web pages links and the HTML used in it -- http://validator.w3.org/checklink
Sometimes a bad example teaches by demonstrating what can go wrong with
using too much multi media. The exercise in this lab uses:
a flashy background texture that makes the text harder to read and
takes attention away from the content,
a background sound that soon grates on the nerves, is too large
a file for those with limited bandwidth connections to load in a reasonable
time, and
too much glitz to be seen as professional in even the most avant
garde entertainment and advertising shop
In carrying out the resume assignment the student should carefully review
the example resume and avoid these mistakes by replacing the background
texture and audio with more tasteful and suitable ones. The media should
never overwhelm the message. In preparing for this exercise the reader should
also ask whether the information provided is necessary for the reader to
make a judgment about the writer. Does the writer supply an appropriate mechanism
for contact with potential legitimate employers without too much exposure
to unwarranted and/or undesired individuals. Remember the Internet is not
the Wall Street Journal.
an electronic version of your current resume (Microsoft Word 97
or Word 2000). Important save the original copy as reume.doc.
a headset with microphone
a 3 1/2 inch disk (to save copy of the resume as a text document
as resume.html). When you Save_as the resume in format type --TEXT,
Word will complain that you are throwing away all the pretty formatting information.
For this exercise this is OK because we will add it back using our
new found HTML writing skills.
SaveAs the file to your 3 1/2" disk in MS Word format (resume.doc)
Print out resume.doc
SaveAs the file to your 3 1/2" disk in text only format (resume.html).
Do NOT Save it in either HTML or web file type!!
Print out resume.html. Question: What happened?
Answer: In saving the file as text only, you lost all the MS Word formatting
that you did so carefully to make it look nice. So why did you save it
as text only, then?
Bring disk to Lab 3
Exercise 2: Find and capture an email animated
gif and other multimedia
Step 1: Finding an animated gif for the email
button using a search engine
Open Netscape Communicator and go to Alta Vista (type "altavista"
in the Location field).
As a search criteria use: "animated gif"
+ archive. Then click [Search].
This initiates a search for the string "animated gif"; the + requires
the word "archive" also to be on the same page.
This should give
you a number of animated gif archives to examine for email gifs to put on
your Web page. Select one and capture it.
Step 2: Capturing an image or animated
gif
Once you find an object that you want to capture:
Put your mouse on it.
click on your selection with the right mouse button.
A menu will appear; select Save image as.
This will save the object. Save it on your A: drive (the 3 1/2"
disk that you brought to Lab). Remember the file's name and extension
(e.g., mailbox.gif).
Step 3: Capturing a background texture to give your resume a professional
look and feel
The stained glass texture (see below) will serve as a sample. If you find
another texture more to your taste, then please replace the sample with yours.
For a source of background patterns, see the background archives on the
Resource Page of Lab 4. Or, simply surf the 'Net for a background that has
just the right professional look and follow the directions below.
The texture, stained glass, would not be a good background for most resumes.
It is too elaborate, too dark, and too busy. To make the page more readable
(a major design goal of any Web page), the text's color is set to white and
the links are also set to bright colors. The look is very artistic, but
is not quite businesslike.
To capture a texture (background) you like:
Put the mouse on it in an area not occupied by a link, or inline
image, etc.
Click with the right mouse button and choose, SaveAs Background.
Save the background image to your A:/ drive.
Stained Glass Texture
As we have previous pointed out a nice professional look and feel parchment
texture with coordinated web button and bars can be found at:
Note that when you chose a background texture you can make the text difficult
to read. Select the texture to be unobtrusive and pay attention to the
choice of colors defined in the body tag for:
Text
Link -- Unvisted Link, i.e. a link that has not been previously
visited
Alink -- Active Link
Vlink -- Visited Link
If you are unsure of the correct Hex digits for a color use the names
of colors.
Step 4: Capturing an audio clip
This is an audio
clip (hail.wav). An audio clip is a snippet of sound that is recorded
and stored digitally. Sound files can grow quite large if they are high-fidelity
and in stereo. If you choose a clip other than hail.wav for your resume,
then remember to select a small file -- less than 100Kb. In later
material the subject of capturing, recording, storing, and editing audio
will be covered.
Capture the hail.wav audio clip or use your search skills to find a
more appropriate audio clip:
Place the mouse on the link (directly above).
Click with [right mouse button] and choose -- save link as.
Save the clip to the A:/ drive as you would any file.
To hear this sound clip played, plug your headset into the green socket
in the back of lab computer. (To work with sounds, your computer should
have a sound card and speakers or a headset.)
It is strongly recommended that you use sounds that have small file sizes
less than 10KB (10,000 Bytes) is best. Files above 30 KB probably load too
slowly for most phone modems and should not be used.
Exercise 3: Creating the top and bottom of the
page
Using WordPad, open the file on your floppy disk (A: drive) called resume.html.
The text is now very messy because it has lost all the formatting of the
Microsoft Word. Our goal in this exercise is to learn how HTML tags work
to reformat the text so it can be displayed in a uniform fashion on browsers
all over the Web.
To speed the process, you may cut and paste the next two sections to the
top and bottom of the résumé's text.
Step 1: Add to top of resume.html
Note that the red text is where you should make a replacement with your
personal data as appropriate.
The HTML below creates the Head and starts the Body .
Copy and Paste at the top of WordPad window
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<HTML>
<HEAD>
<TITLE> YOUR NAME's Resume</TITLE>
</HEAD>
<!-- use the stainedglass background -->
<BODY TEXT="#FFFFFF" LINK="#FFFF00" VLINK="#FF9900" ALINK="#FF0000"
BACKGROUND="stainglass.jpg">
<!-- Play hail to the chief as the page opens -->
<embed SRC="hail.wav" autostart="true" loop="true" width=140 height=55>
<bgsound SRC="hail.wav"
Loop="50">
This should be followed by your resume material.
Step 2: Add to the bottom of resume.html
Just below the last text of your resume, add the following HTML. Before
you cut and paste, look at the code carefully. Comments have been
added to help you read it.
The creation of an email and a home page link and tags to
close the containers
<!-- Send the visitor to your home page to see what else you have
created. The use of an absolute path to the home page is a good idea, because
if someone saves your document they still can get to the home page -->
<A Href="Your-URL_OF_Your_Home_Page">Back to My Home Page</A><BR>
<!-- This is how to set up a process to send you email from your Web
page using the mailto process. The IMG tag makes your email gif a button
that will start the email process when viewers click on it -->
<A Href="mailto:YOUR_EMAIL_ADDRESS_HERE">
<IMG SRC="THE_NAME_OF _THE_MAILBOX.gif">For further Information</A><BR>
<!-- Close out the Body and HTML container tags -->
</BODY>
</HTML>
COMMENTS
The first code sets up the Head Information.
The latter code sets up a link to the home page (index.html in
your web account). You must edit in your URL for Your-URL_OF_Your_Home_Page
An email link will allow the viewer to send email to your
your email address (e.g. pkrolak@cs.uml.edu). You must replace "YOUR_EMAIL_ADDRESS_HERE" with your email address.
Note that the animated gif you captured will also act like a button and start
the email process to send the message. Replace THE_NAME_OF _THE_MAILBOX.gif with the file name and extension
of your captured animation.
The remainder of the code closes out the body and the HTML document.
Exercise 4: Modify the contents of your
resume to restore the formatting lost when converted to a text only file
Modify the Heading of your Resume
The heading in your resume.html is now unformatted as:
Joe Smith 101 First St. Lowell, MA 01854(978)555-1111 Email: jsmith@cs.uml.edu
Of course, you are not Joe Smith, but your resume should start out with
Full Name, Street Address, (City, State Abbreviation, Zip Code), Phone
Number, and email
This could be quickly modified to HTML as:
Examine your resume and use HTML Tags on your Text as shown
here.
<H1 align="CENTER">Joe Smith</H1>
<P align="Center">101 First St.<BR>
Lowell, MA 01854 <BR>
(978)555-1111 <BR>
<address>Email: jsmith@cs.uml.edu</address> </P>
<HR>
<P align="left">
This will yield a heading centered on the top of the page that looks
like:
Joe Smith
101 First St.
Lowell, MA 01854
(978)555-1111
Email: jsmith@cs.uml.edu
The H1 tag is used to set off the name, which is the central theme,
or Header, of this page.
The <br> tag creates a new line.
The <address> tag sets off the email address nicely.
The <HR> tag is the Horizontal Rule or Break to separate
the heading form the body of the resume content
Note the use of the "align" attribute to center the heading and
to establish the major categories of the resume on the left.
Formatting the remaining material with HTML tags
The remaining material demonstrates the simple concept of a list.
Say your first category is called Education, and currently
looks like:
Education: 1992-1996 Ridgemont High School Ridgemont NJ
1997-2000 University of Massachusetts Lowell Department of Computer Science
Lowell MA
The category Education is a secondary heading; thus, we use
a <H2> tag and Unordered List <UL> tag and List items <LI>
tags to create:
<H2>Education:</H2>
<UL>
<LI>1992-1996 Ridgemont High School, Ridgemont, NJ
<LI>1997-2000 University of Massachusetts Lowell,
Department of Computer Science,
Lowell MA
</UL>
This will yield the following:
Education:
1992-1996 Ridgemont High School Ridgemont, NJ
1997-2000 University of Massachusetts Lowell, Department of Computer Science,
Lowell, MA
It is often a good idea to link items that the reader of the resume may
want more information on, such as your school or department. You should
link your resume to your school or department to give the reader a chance
to become familiar with them.
For example, in the Education section of the resume, you can modify the
second item as follows:
<LI>1997-2000 <A Href="http://www.cw.uml.edu/">University
of Massachusetts Lowell Department of Computer Science Lowell MA </A>
Note: the HREF attribute of the anchor tag <A> is set to a Universal
Resource Locator (URL). The URL in this case is an absolute link giving
the full three parts.
The first part is called the "method," and is separated from
the two other parts by " ://". The method in this case is the hyper
text transfer protocol, (http). Other common methods are ftp, archie,
gopher.
The second part gives the location of the computer resource
that will process the request. As stated in Lab 1, computers have both a
domain name and an IP address, either of which will allow the Domain
Named Server (DNS) to locate and route data to them in an efficient
manner. Some computers have special mailboxes called "ports" that receive
messages. The domain name or IP address will then have a # followed by a port
number.
The third part is the path from the Web directory to the
file. The default, /~user-id for Unix, is the Home Page (index.html)
in the student's public_html directory .
Exercise 5: Modify your home page (index.html)
to link to the new Web page (resume.html)
Step 1: Open WordPad and Copy and Paste this revised index.html
into it.
Revised index.html
<html>
<! -- The angle brackets enclose html tags -->
<! -- The normal HTML doc has two parts or containers -- the head and
the body-->
<! -- head tags are paired: head and /head. The first tells the Browser
that the
head is starting and the second indicates the end -->
<head>
<title>insert your name here's Web
Site</title>
</head>
<body bgcolor="red">
<center><h1>insert your name here's
Web Site</h1></center>
<!-- This is how to set up a process to send email to you from
your Web page using the mailto process. The IMG tag makes your email gif
a button that will start the email process when you click on it -->
<A Href="mailto:YOUR_EMAIL_ADDRESS_HERE">
<IMG SRC="THE_NAME_OF _THE_MAILBOX.gif">For
further Information</A><BR>
<A Href="resume.html">See My
Resume </A>
</body>
</html>
Step 2: If you have made extensive changes to your index.html, then find
the point in the file before </BODY> and add the following:
<A Href="mailto:YOUR_EMAIL_ADDRESS_HERE">
<IMG SRC="THE_NAME_OF _THE_MAILBOX.gif">For
further Information</A><BR>
<A Href="resume.html">See My Resume
</A>.
What is the effect of this?
We used the anchor tag, <A> to create a link to the file resume.html.
The URL used is a relative URL. The link is between two files in the same
directory. Thus, when you transfer your work from your working directory
to your Unix Web directory (public_html) THE FILE
MUST ALSO BE IN THE SAME DIRECTORY!
Open your floppy disk (A:) and SaveAs this file as
index.html, text only file type.
Exercise 6: Save your
work to the Web Site
Start the program Ws_ftp (use the shortcut, the FTP icon on the
desktop, or click on Start/Programs/Ws-fpt/Ws_fpt.le). Follow the instructions
in the Ws_ftp tutorial and transfer all the new files from the A:
drive into your ceweb account directory.
Log into ceweb.uml.edu using your user ID and password.
On the left side (your current computer) go to [-a-] and
double click.
You should see a list of the 4 files you have just created, i.e.
resume.html,
any image files that you captured (email gifs or jpgs), the background
and the email animation,
and the audio clip, (hail.wav).
On the right side you should see the files and directories of your
home directory. If not, you probably did not connect to the CS computer.
Check for error messages and log in again. Assuming you now see the
CS machine and your home directory, find the public_html directory.
Click on it (only once) and click on Chgdir. After a few seconds you
should see the contents of public_html (it should have at least one file --
index.html created and moved to this directory during Lab 2). Assuming
you see it, you are ready for the last step. If not, review the Ws_ftp tutorial.
On the left side, find your new files again.
One at a time:
highlight each one (click on it and it should turn color)
click on the right arrow in the center column
examine the public_html directory to see if the file was transferred.
If not , make sure that you are still connected to the CS machine,
and then repeat the operation.
index.html is a special case. The current file in the public_html
is the old version, and must be removed before the new version is transferred.
Double check to see that the old and new versions are in the right and
left sides respectively. Then click (again only once) to highlight
the old version (right side) and hit the delete button. After the old version
is removed, then transfer the new index.html to the right side.
Finally, using the Netscape browser, check your work by going to
your web site; in the URL window, type http://ceweb.uml.edu/USER-ID, where, of course,
USER-ID is your
own user ID. Now examine the resume, test its links and check appearance,
images, etc.
A special remark:
The file on your A: drive (index.html) is a new
version of the one in public_html. If you transfer it over to the
ceweb side without deleting or renaming the Unix version, you will
have a serious problem -- a confused Unix computer. To resolve this, make
sure you have found both versions, then highlight both of them. If you are
sure you have a valid version on the A: drive, delete the old copy on the
Unix side (hit the [delete] button on the right side of the screen).
The computer will ask "are you sure?" Answer yes. Now you can
safely transfer the new version of index.html. If you are ever unsure,
then rename the old version by hitting the [rename] button. Rename
it something like "index-old.html." After that, transfer the new version.
Once you have it working, delete the old file.
You need to transfer
all the images, sounds, and any other files that you captured and used
on the page, as well as the HTML pages you created.
Exercise 7: Test your work visually and
formally!
Step 1: Do a Visual Check
of Your Work Using the Netscape Browser
Using Netscape Communicator, click on FILE
then Open Page or use Ctrl- O.
A pop-up menu will ask you to [ChooseFile].
Go to the A: drive and chose index.html.
You need to click on [open] in the file menu and again in the Pop-up
Menu when it appears.
The index page (Home Page) will open in the browser.
Now begin inspection of your work.
You should see your modified home page.
You should see the link to your resume. Click on it.
You should see your resume. Examine carefully for mistakes.
Make sure that all links in the resume work.
When you click on the link to return to home page, you should now return
to the home page.
Correct any mistakes using WordPad and repeat the
above steps until there are no more errors.
Step 2: The Formal Validation
Once resume.html and the related files are moved (should have been done
in Example 6), you are ready to formally test resume.html.
Note: the URL of resume.html after it has been moved to the web
site is
For the CS 91 113 Day Students
http://www.cs.uml.edu/~user -id/resume.html
where user-id is your real user ID.
For Cyber Ed CS 91 113
http://ceweb.uml.edu/user -id/resume.html where user-id is your real user ID.
Using the link to the validation site pick Dr. Html and click on single
page analysis. Carefully follow the directions to use the software to validate
your new index.html and resume.html. The program will examine the HTML tags
to see if they are used correctly and review the text content of the containers.
How did you do? Did the report find any errors that you missed in
the visual inspection? If so, then go back to WordPad and correct them.
Did the validation process find anything you felt you did correctly?
How do you propose to resolve the difficulty? Answer: Go back to the
Barebones Cheat Sheet and see if you are correct.
Once you have received a validation report that is satisfactory, then
Save the report.
With the report displayed in the browser, Click File/Edit Page.
This brings up Composer, a WYSIWYG HTML editor, Click File/SaveAs.
Go to the A: drive.
Create a Folder (directory) call it, HTMLreport.
Open the Folder, and
Name the file, resreport.html. Click Save. The computer
will save the HTML document and all the images associated with the page.
Now, since Lab 3 is nearly over we shall cheat (Using Composer
is covered in Lab 4).
Click the Open
icon. Find the A: drive and open, index.html.
The index.html page will appear on the screen.
Find the text, See My Resume, place your mouse to the right of it and click.
Hit enter. This should place the locator under
the text below the S.
Click the Link icon. A dialog box will appear.
In the Enter Text window,
type "See the Validation Report on My Resume."
In the Link window area,
find and Click [Choose File].
Find
the A: drive.
Open
the new folder, HTMLreport. Open the
new file, resreport.html..
The Link dialog box will appear. Click [Apply] and
[Close].
The dialog box will close and the text will now appear in your home page
as a link.
Save index.html to the A: drive.
Test your new home page. Click [Preview]. The browser will come up. Click
the new link called See the Validation Report on My
Resume. The validation report should appear.
Follow instructions in Exercise 6 and move the Folder and the new index.html
over to you web site.
See also
this helpful HTML validation site.
Glossary of new terms:
animated gif -- a series of images stored in the GIF 89 image standard.
The images are played in an order and timing set by the image animator.
background -- an image used as a texture or background image upon which
the HTML text and other materials are displayed.
gif -- a graphic image file format developed by Compuserve. GIF uses compression
techniques developed and patented by UNISYS. For a time, this threatened
to prevent images from being stored on the Web using this format.
jpeg or jpg -- the Joint Photographic Experts Group (JPEG) file format
standard for storing images.
png -- Portable Network Graphics (PNG), pronounced
"ping", was developed as alternative to GIF to avoid royalty issues. It is
also used in place of TIFF images. While it was developed as an alternative
to .gif it is still not as universally supported by browsers.
search engine -- a program that uses keywords and concepts supplied by
the user to order the Web pages that match these inputs.
tiff -- Tag Image File Format (TIFF) a ISO standard used in the prepress
printing industry and often is the standard used by flat bed scanners.
wav file -- a format for storing sound.
W3C -- World Wide Web Consortium, the standards
group for the web.
Email 
For further Information
