MFL 195 - Integrating Technology
into Foreign Language Education
Preparing a Basic Web Page
What an HTML Document Is
HTML (or Hyper-Text Markup Language) documents are plain text
files that can be created in any simple text editor such as
Notepad. HTML editors are also available, but it is useful to
know at least the basics of html before trying out various editors.
An HTML document is created with TAGS. A tag consists
of a left angle bracket (<), a tag name, and then a right angle
bracket (>). Some tags may contain further refinements
within them, such as indicating the border width of a table.
Most tags are closed with a slash (</tagname>). In most
cases, HTML tags are not case sensitive; that is, <HTML> is
the same thing as <html>.
The Start of a Document
Let's create a basic webpage. At the Windows95 Desktop, open Notepad by clicking
on START, PROGRAMS, ACCESSORIES, NOTEPAD. We'll begin with the required
tags for all minimal html documents. Type in the following code:
<html>
<head>
<title>My Home Page</title>
</head>
|
- The <HTML> tag announces that this is an HTML file.
We will close it off (</HTML>) at the very end of our document.
- The <HEAD> tag denotes the head of the document,
the thin strip at the very top of the Netscape screen.
- The <TITLE> tag indicates that the title
of the page goes here. The words "My Home Page" will appear in the
head of the Netscape screen. Notice that any text that is within
brackets is code and will not appear on the screen. Any text that is
not within brackets will appear on the screen. After we type in "My Home
Page, we will close the title tag (</TITLE>) and close the head tag
</HEAD>
It is wise to work a little bit at a time, then test out what
we've done to make sure it looks like what we think it should before going any further.
So, at this point, we'll pause and save our file (click on FILE -
SAVE). When the dialogue box pops up, choose the A drive to save
onto your floppy, and name your file INDEX.HTM. All html
files must have the .htm extension. The basic page you create
must be named "index.htm." When you have named your file,
indicated the drive and directory, click on OK.
Now let's have a look at what we've got. First, minimize
Notepad by clicking on the single down arrow in the upper
right hand corner of the screen. You will notice that in
Windows95, there will be a bar at the bottom of the screen
indicating that Notepad is still running. Leave it there.
Now double-click on the Netscape icon to open Netscape. Once
Netscape is up and running, in the upper left-hand corner on
the tool bar, click on FILE, OPEN FILE (or Open File
in Browser if you are using Netscape Gold). A dialogue box
will pop up asking you to select the file to display. Click
on the A drive, then select your file by highlighting it (single
click). Then click OK. Your file will magically appear.
Let's reflect a moment on what's going on here. First of all,
you are creating ONE file. You TYPE the code in Notepad, but
VIEW the results in your browser (Netscape, in this case, but it
could just as well be Internet Explorer or AOL). You're looking
at the SAME file in two different places--first as text,
in Notepad, then as a web page in the browser. The file is now
residing on your A drive, whether you pull it up in Notepad or
Netscape--it's still the same file. Eventually, it will reside
on a web server, but for now, we'll keep it on the A drive.
Second, when you view your file in Netscape, you're probably
saying--"Where is it? There's nothing here except a blank
gray (the default color for Netscape) screen." Oh, yes, there is
something there. Look at the very tippy top of the screen, above
the tool bar. There are the words "My Home Page." This is the
title of your page. These words should be descriptive of
what's on the page, since these are the first words that search
engines will pick up when indexing new web pages. For now,
"My Home Page" is just fine, but later you will want your title
to be more descriptive of the page.
We're ready to move on, but before we do, minimize Netscape (click
on the small down arrow in the upper right-hand corner). Next bring
Notepad back up on the screen by clicking on the small bar at
the bottom of your screen that says "Notepad."
Now for the Good Stuff - The Body
Type in the following code, and then we'll explain what's happening:
<body>
<center>
<h1>My Home Page</h1>
<p>
<hr>
</center>
<p>
|
- BODY announces that the body of the document is
about to begin. At the end of our document, we will
turn this command off with </BODY>.
- CENTER will center text or images on a page. To stop
centering, we use </CENTER>.
- H1 begins a heading. HTML has seven levels of
headings, with 1 being the largest and H7 being the
smallest. "My Home Page" is the text that will
appear centered at the top of the page, in the
largest size heading. I turn off the heading
with </H1>.
- The <P> command tells the computer to insert
a blank line of space here. You can't just hit "ENTER"
in Notepad and expect an html document to know what that
means. Basically, they're dumb dudes and you have to
spell everything out for them. So, every time you want
some blank space, put a <P> command in.
- The <HR> command inserts a line (a horizontal rule)
across the page to mark off a section. Later, we'll get a little
jazzier and use a graphic to do this instead of the boring gray
horizontal line. Notice that the HR will be centered, because we
are still within the center command.
- The last thing to do is turn off the center command (</CENTER>
and put some more space in with a <P> command
Let's pause here to check our code. First, save your file again
(click on FILE - SAVE (the only time you use "Save AS"
is the first time, when you have to name your file. Once it's been
named, just click on SAVE). Each time you make changes to
your file, you will need to save it before viewing those changes
in Netscape.
OK, let's check it out in Netscape. Minimize Notepad, and
bring Netscape back up. Oops - it looks the same as before!
Why doesn't the new stuff show up? It's because you need to
refresh Netscape. On the button tool bar at the top, click
on RELOAD and voilą -- there's the new stuff on your page.
Once you get used to it, the FILE-SAVE-MINIMIZE-MAXIMIZE-RELOAD routine becomes
just that--routine!
Entering Text
Okay, let's put some content into this page. We're going to
put some info about ourselves first. Type this code:
<h2>About Me</h2>
Type your name here <br>
Type your school's name here<br>
Type the name of the language that you teach here<br>
|
- Not much new here. We are using the second level
heading (<H2>), which is smaller than the first.
- The <BR> command is the only new item. BR
(or break) inserts a line break in the page. In other words,
it forces the text to jump to the next line. Text will wrap
automatically in html documents, but if we want to start a new
line, we have to say so. Notice the difference between the
<P> command (which starts a new line AND places a
space in between) and the <BR> command, which merely
begins a new line with no intervening space.
Entering hotlinks
One of the defining characteristics of a web document is the
ability to create links to other documents. This is what
creates the branching, non-linear effect of the WEB and is
one of its most endearing charms. We're now going to add
to your web page that list of "TOP TEN" sites you searched so hard for.
Type the following code:
<h2>My Top Ten Sites in Spanish/French</h2>
<a href="filename">Name of site</a><br>
<a href="filename">Name of site</a><br>
|
The new tag here is < A HREF="...">. We always begin
a link with A (anchor) HREF (hypertext reference) to signal
the computer that we are opening a link. This is always followed
by a an equal sign (=). Then we have to enter the filename of the link.
There are two types:
- The first is a link to a document that resides in the
SAME directory as your INDEX.HTM file.
In this case, you can simply insert the name of the
file, for example: "mypage2.htm".
- The second is a link to a file in a directory OTHER THAN
the one in which your INDEX.HTM file resides.
(Actually, that's not completely true, but for now,
we'll keep things simple and stick to the distinction
of "My directory" and "Any other directory". For links
to pages you did not create yourself, you must include
the complete path, for example: "http://www.furman.edu/~pecoy/
mfl195/index.htm".
Notice that the filename must be in quotation marks. Failure to open or
close quotation marks results in a broken link--it won't work. Then type
the name of the site. To end the link, add </a>. On your web
page, everything between <a href="...> and </a> will
show up in blue type rather than black, and will be underlined. This blue
underlined type is the conventional way to show a link on the web.
When you give a list of sites, it is a good idea to give a brief, one-line
description of the site so that the reader has some notion of whether he
wants to spend time exploring it or not. Let's go back and add a brief
annotation to each of the ten sites we listed. We're going to revise the
code we just wrote by adding the annotation:
<h2>My Top Ten Sites in Spanish/French</h2>
<a href="filename">Name of site</a> - Annotation<br>
<a href="filename">Name of site</a> - Annotation<br>
|
Numbered and Bulleted Lists
We've just created a list, but let's jazz it up a bit. We've got ten
great sites, so lets number them. Go back to your code on the top ten
sites, and make the following changes:
<h2>My Top Ten Sites in Spanish/French</h2>
<ol>
<li><a href="filename">Name of site</a> - Annotation
<li><a href="filename">Name of site</a> - Annotation
</ol>
|
- The command to begin a numbered or ordered list is
<OL>. This tells the computer a numbered
list is about to begin.
- To indicate each item in the list, we use the command
<LI>. Notice that I have removed the BR
command from the end of the line. The reason is that each
time you being a new list item, it will automatically begin
on a new line. I no longer need the BR command.
I do not need to turn off this command with a </LI>
command.
- When I get to the end of my list, I signal that I have reached the
end with the </OL> command.
Now let's assume that you would rather have a bulleted list than a numbered
list. Go back to your code and make the following changes:
<h2>My Top Ten Sites in Spanish/French</h2>
<ul>
<li><a href="filename">Name of site</a> - Annotation
<li><a href="filename">Name of site</a> - Annotation
</ul>
|
The only difference here is that instead of using the
<OL> command for a numbered list, we change to <UL>
for an unnumbered, or bulleted, list. Nothin' to it, right?
Let's Call It a Day - Finishing Up
We've done enough for one day, so let's tidy up and finish the
document. Type in the following code:
<p>
<hr>
<p>
<center>
Type your name here<br>
E-mail: <a href="mailto:youremailaddress">Your email address</a>
</center>
</body>
</html>
|
- We're going to insert another horizontal rule HR to indicate the
end of a section.
- Next, we want to center (<CENTER>) what follows.
- You should always sign your web pages, so type your name in next.
- Finally, give your readers a way to communicate with you. Provide
a link to the e-mail function in Netscape. You do this first with the
link command (a href="...") and then by inserting a new command,
MAILTO. MAILTO is always followed by a colon and then your e-mail
address (ex:john.doe@furman.edu). It may seem redundant to type your
e-mail address twice, but remember that whatever is inside the angle
brackets is code and does not appear on the page; you must type your
e-mail address again outside of the angle brackets to make it show up
on the page. When you view your file in Netscape, your e-mail address
should be in blue type and underlined. Go ahead and click on it to see
what happens.
- For the grand finale, you must now close the CENTER command,
the BODY command that you opened at the beginning of your document
and last but not least, the HTML command you began with. Ta da.
Patricia L. Pecoy
MFL 195
This page was last updated on July 13, 1997.