|
Web
Page Instructions
Instructor: Sharon Bond
Lesson Objectives
To introduce the basic format and commands of HTML
What is HTML
Hyper-text markup language is the "code" that web servers and web browsers
speak.
Hyper-text markup language is the "code" that
web servers and web browsers speak. Somewhat like a computer programming language
it is actually just ascii text with certain sets of symbols representing the
various commands that allow graphics to be sent from the server to the client,
and hyperlinks to be pointed to an entirely different site anywhere else on the
Internet. Because they are not used very often in normal writing HTML uses the
less than, "<" and greater than, ">" symbols to indicate an HTML function. Below
are a couple sample lines of HTML code. The actual commands will be explained in
the other sections of this lesson.
<HTML>
<HEAD>
<!-- Comment statements -->
</HEAD>
<BODY>
<A HREF="www.certifiedinstruction.com">Welcome to Online Learning</A>
<IMG SRC="picture.gif">
</BODY>
</HTML>
For now, let's just look at some of the
common things you'll see in various HTML code. First, notice that the first and
last lines are similar. As a matter of good HTML "style" it is standard to put
a HTML "start" line at the top of the document and a "stop" command at the
bottom. A command by itself is a start of a function. A command with a / in
front of it is the end of a function. In this way, commands can overlap or be
embedded within one another. Notice in line six of the example that a similar
thing is done with the "anchor" (A) function that connects the URL with the text
that is will appear as a hyperlink on the page.
After you have set up your start and end of
your HTML document, you should put in the two major parts, the headers and the
body. The header section (HEAD) is where you place tags which apply to the
entire document. An example is the <TITLE>, which is the site name that is
listed across the top of your browsers window. For instance, for this lesson the
title is "Online Mentoring: Lesson 8." The BODY section, is where you put the
text, graphics, and hyperlinks that appear on the page.
Text paragraphs like the one you are reading
now, are handled by placing a <P> at the beginning of the text, and a </P> at
the end. For example:
<P>For now, let's just look at some of the
common things you'll see in various HTML code. First, notice that the first and
last lines are similar. As a matter of good HTML "style" it is standard to put a
HTML "start" line at the top of the document and a "stop" command at the
bottom.</P
Sometimes you'll want to force line breaks at
certain points in your HTML documents. The <BR> code forces the lines to break
at the places you specify. An address is a good example:
Western Montana College <BR>
710 S. Atlantic<BR>
Dillon, MT 59725<BR>
Otherwise, the text will automatically word wrap to the width of the web browser
being used to look at it.
Finally, you have undoubtedly noticed that
this the examples show the greater than and less than characters and enclosed
functions as text instead of actually acting upon them. This is because HTML
also allows you to use special codes to represent characters that wouldn't
normally be displayed. The code for the greater than symbol is & gt, without the
space in between. The space is inserted because without it you'd end up seeing
the > symbol. Using these codes you can also insert a number of special non-ascii
characters such as the copyright symbol, ©.
Text and Hyperlinks
While you don't have as many options for manipulating text as you do in a word
processor, you do have several different ways of livening your web page's text.
Hyperlink references are how you connect multiple web pages together and point
to other WWW sites from your page.
In
additional to just displaying standard text, HTML allows you to use 6 different
font sizes using the <H1-6> commands. H1 is the largest text, H6 is the standard
sized text. You can also make text bold using <B>, or put it in italics with
<I>. When using any of these commands you have to use "/" version of the command
to end each command at the end of the text. Below are some samples showing a
number of the various options.
size=6 bold italics
size=5 bold italics
size=4 bold italics
size=3 bold italics
size=2 bold italics
size=1 bold italics
Hyperlinks
Hyperlinks are the URL's of the other web pages that you want to point towards.
They can either be other pages that you created or are on your web site, or they
can be any web page anywhere else on the Internet. There are four parts to
hyperlinks. First, an "anchor" (<A>) at the beginning. Then the Hyperlink
reference (<HREF="URL">). Next you need the name, word, or phrase you want to
appear as the hyperlink. Finally, you have the end of the anchor. Below is a
hyperlink with the HTML code below it.
<A HREF="http://www.certifiedinstruction.com">Welcome
to Online Learning</A>
The
examples above do not cover all possible options for manipulating text. For
instance, you can put text or numbers is superscript or subscript, and use a
limited set of fonts. Other options for hyperlinks also exist
Pictures and Graphics
Graphics on web pages can only be GIF or JPEG format images. For more
information on converting images see. Pictures can be aligned so that they
appear on the left or right of the screen, or centered in the middle. Pictures
or graphics are added to web pages using an image source tag. A sample is:
<P ALIGN=CENTER><IMG SRC="smiley.gif"></P>
You
can also put a line of text next to a graphic and have it start at the top,
bottom or middle of the graphic using an ALIGN statement in your IMG SRC tag.
Such as: <IMG SRC="smiley2.gif" ALIGN="middle">
 Don't
worry, be happy!
Backgrounds, Colors, and
Other Nifty Stuff
Backgounds
Backgrounds for web pages come in two different types, solid colors, or images
that are pannelled behind the text and images on the page. Both types fall into
what is called the BODY extensions category. They are called "extensions"
because they are added to your BODY command at the start of your page. To make a
background a single solid color you use the bgcolor tag:
<BODY BGCOLOR=#RRGGBB>
The RRGGBB is a hexdecimal code for the red, green, and blue values of the
color. For instance black is #000000, no color. White is #FFFFFF, pure color.
Pure blue would be #0000FF.
As
with this page though you can also have multicolored backgrounds or even
pictures. This is because you can use any GIF or JPG image as a background
picture using the background tag.
<BODY BACKGROUND="smiley.gif">
If the graphic is smaller than the screen, it will be tiled. That is, another
copy of the picture will be put to the right and another below the first picture
and each subsequent one until the entire "page" is covered. For example, if I
use a smiley face graphic as the background the original graphic may look like:
While the tiled background would look something like:
Of course, for backgrounds you would want a graphic that is lighter in color
than the smiley faces shown above, otherwise they make reading the words of your
web page difficult. For the background of this web page, we used a very thin but
long horizontal stripe with blue at one end. If you were able to expand your
screen wide enough the blue stripe down the side would repeat itself but for
most people it only apears down the left side of the screen.
Text Colors
Once you have your background set, then you may want to change the color of your
text, hyperlinks, or even the color hyperlinks turn after you have visited them.
Colors are also handled with the BODY extensions. The three tags are:
<BODY TEXT=#RRGGBB>
<BODY LINK=#RRGGBB>
<BODY VLINK=#RRGGBB>
Other Nifty Stuff
There are a number of things you can do on your web page. You can allow people
to send you an email message. You can have a blank where they can enter text.
You can have a pop down menu from which they can select an option. You can even
have them run a program using either a cgi-bin script or a java script. As you
can see, HTML, despite its humble ascii format, is a very powerful language.
There are too many options for us to cover all of them here, but the information
we have provided should help you begin creating you own web pages right away. To
learn more about the fancier features there are a number of good online HTML
manuals and several high quality published books as well.
A Sample Page
Now
let's put it all together to make our page:
<HTML>
<HEAD>
<TITLE>Anytown High School</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
 Anytown
High School
<P><H1><IMG SRC="/courses/rfts/images/ahs.gif"
ALIGN=middle>Anytown High School</H1>
Welcome to Anytown High
School,<BR>
This is just a sample page
so don't expect anything fancy. The schools colors are red, white, and blue. Our
sports mascot is the chickadee. Below are a couple of our favorite sites. We
hope you find them enjoyable too.
</P>
<P>
Science
<H3>Science</H3>
NASA Spacelink
<A HREF="http://spacelink.msfc.nasa.gov/">NASA Spacelink</A>
Math
<H3>Math</H3>
The Math Forum
<A HREF="http://forum.swarthmore.edu/">The Math Forum</A>
English
<H3>English</H3>
The Complete Works of William Shakespeare
<A HREF="http://the-tech.mit.edu/Shakespeare/">The Complete Works of William
Shakespeare</A>
Social Studies
<H3>Social Studies</H3>
CNN News Headlines
<A HREF="http://www.cnn.com">CNN News Headlines</A>
</P>
<P>
Thank you for visiting our school. Please stop by again some time. </P>
</BODY>
</HTML>
This
is how the page would publish on the WWW.
One
of the best ways to get started with web pages is to find sites you like on the
Internet and "borrow" their ideas. In Netscape, to see the source code for any
web page you are viewing go to View/Document Source. Look at two or three of
your favorite sites' HTML code and save the source code of at least part of a
page. To save the whole page in Netscape use File/Save As and choose Source.
To save just part of a page, view the source code and then cut and paste into
your word processor. Remember to save the file as text so that you can use it in
your own HTML documents if you like.
Two sites that use many different HTML codes in their documents are:
Yahoo
ERIC
|
