HTML documents are simple ASCII text files with presentational tags embedded within them. The most convenient word processor to use for this purpose is SimpleText on macintosh or Notepad on Windows, which is a very abridged word processor that is normally installed in all computers (mainly to facilitate Read-Me files and other documents).
Load SimpleText or Notepad.
HTML is a set of ever-changing sblackdards of different universally accepted plain-text codes which are sent over a network and describe the way the finished page should look to the user. An example of one of these codes is <B> which converts the text between the start and end codes into boldface:
The following is text in <B>boldface</B>.
will look like this:
The following is text in boldface.
The tags in HTML which tell the computer what type size to use, the color of type on the screen, or any of the many functions that tags can perform are normally enclosed in <brackets>. The example above uses the command <b> to tell the computer to switch to boldface type. The command </b> tells the computer to stop using bold face.
The following is an example of a simple page that contains the ingredients called for in this exercise. The embedded HTML tags tell the browser how to render the page.
<HTML>
<HEAD>
<TITLE>Simple Sample #2</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFC0" TEXT="#FF0000">
<H1><B><CENTER>Simple <A NAME="name">Sample</B></H1><P>
<H3>By Name</H3>
</A></CENTER><P><HR><HR>
<BLOCKQUOTE>
<H1>This is the way the world
<A HREF="#page">ends</A></H1><p>
<H2>This is the way the world ends</H2><p>
<H3>This is the way the world ends</H3><P><HR>
<A NAME="page"></A>
<HR><HR>
<H4>Not with a <B>bang</B></H4><p>
<P>
<P>
<H5>but a whimper</H5></BLOCKQUOTE><P><HR><HR><HR><HR>
<H5><CENTER>go to <A HREF="http://info.uvic.ca">the University of Victoria
Home Page </A></H5><P>
<HR><HR>
<H5><A HREF="#name""><CENTER>Return to Top of Page</A></H5>
<P>
</BODY>
</HTML>
Hopefully, an explanation of the codes for this simple program follows:
<HTML> - is a command that tells the browser that it is looking at HTML code.
<HEAD> - this tag shows the start of of the heading section of the document.
The document's title usually falls in the heading. Although not required, it should be inserted.
<TITLE> - Title of document reflected in title bar
</HEAD> - This tag denotes the end of the™ heading section.
<BODY> - This tag means the body section of the body follows.
<BGCOLOR=#FFFFC0" - indicates the background color is Light Yellow-TEXT+#FF0000"> -
indicates that the text in the document is Bright Red
<H1> - largest letter size - Letter size is indicated by the letter H followed by a
numeral, H1 being the largest and H6 being the smallest. (Letter size can also be coded <FONT SIZE="=+4">
The size indicated by t + or - and a number)
<CENTER> - centers the text on the screen.
Simple Sample - is the caption printed on the page.
<A NAME="braffet"> - indicates a destination of a link within the document - in this case,
a link to take the user from the bottom of the document to this location, essentially the top of the document
(between Simple and Sample).
<B> - boldface
<P> - Paragraph break (one blank line after break)
<HR> - indicates a horizontal rule
<H2> - indicates smaller type face
By Name - is printed on page
</A> indicates the end of the NAME link.
<BLOCKQUOTE> - for quotes; larger margins
<H1> - larger typeface
<A HREF="#page"> A HREF= indicates a hypertext link to the address in quotes - the # sign indicates
an address within this document and the word "page" indicates which A ADDRESS= it is to link to. Everything
following <A HREF=#page> is printed in blue and underlined to indicated that it is an active link. </A>
indicates the end of the link.
This is the way... - is printed on page
< NAME="page"> indicates a destination within the document. Clicking on the word "ends" which follows
<A HREF="#page"> takes you to this destination.
</BLOCKQUOTE> ends the indented material
<A HREF="http:// info.uvic.ca"> A HREF= - indicates a hyperText Link to the address in quotes.
This link takes you to another Web page outside your Page. You must write the complete aÔddress of
that Web Site, and that address must be enclosed in quotes ("--") Links internal to your page require
only a # sign preceding the word or marker that serves as the destination for your link in quotes.
Everything written after <A HREF="http:// info...">" serves as a link until </A> indicates
the end of the link. Thus the University of Victoria Home Page - is printed in blue, underlined to
indicate that those words serve as a link.
<A HREF="#name">Return to Top of Page</A> the A HREF= is a link. "#braffet" is the destination.
the # indicates a destination within this document. Return to Top of Page is printed in blue, underlined,
indicating that it is an active button. </A> indicates the end of the link.
</BODY" - indicates the end of the body.
</HTML> - indicates the end of the page.
Type out your page using using Simpletext/Notepad as your word processor. Type your title and name and a brief message (a couple of paragraphs or so). Type in the appropriate tags to direct the computer to give you the colors, sizes, etc. that you wish your page to have. Type in a Text Link which will take the user from your home page to another address on the Web. This address needs to be the complete address that you would type in to find that page on the Web.
(Most of the tags shown here are typed in upper case letters, but HTML is not case sensitive in the tag commands inside the brackets.)
When you have your page typed, save it on a personal disk. Open your browser (Internet Explorer or Netscape). When you have the home page of the browser on your screen, go to the File menu and tell it to open your program. If all goes well, your page will appear in the colors and format that you planned and your Text Links when clicked upon will whisk the user to a different part of the document or to another site on the Web to which you wanted your user to go.
Save your work on a personal disc. Label it with your name, your program's name, and the course number.
