📄 http:^^s9000.furman.edu^workshops^pchomepage.html
字号:
Content-length: 26085
<html>
<head>
<title>Authoring World Wide Web Home Pages (PC users)</title>
</head>
<body bgcolor="ffffff">
<center>
<h1>Authoring World Wide Web Home Pages on a PC</h1>
<p>
</center>
<h4>This page is maintained and supported by <a
href="/people/treu.html">Kevin Treu</a> of the <a
href="/index.html">Department of Computer Science</a>. Please feel free
to write at <a
href="mailto:treu_kevin/furman@furman.edu">treu_kevin/furman@furman.
edu</a> with questions and/or suggestions.</h4>
<center>
<table border=6 width=60%>
<th align=center>
Overview<tr><td>By this time you have probably had some experience with basic
"Web surfing" using Netscape, and thus can appreciate the amount of
information that is "out there" and easily accessible. What makes the
Web truly exciting, however, is the ease with which we can contribute
to it. In this workshop, we will explore firsthand the basics of the
HyperText Markup Language (HTML) used to create home pages, see
how to include digitized images and find out how to load pages so that
they are accessible to the entire Internet community.
</table>
</center>
<p>
<hr>
<center><h3>1. Introducing the concept of HTML</h3></center>
<p>
The process of producing pages for the Web is surprisingly simple. Once you
become familiar with some of the basic concepts, you'll find document preparation for the
Web as easy as you presently find word processing. (Hopefully that's a good thing!)
Home page authoring employs the <i>Hypertext Markup Language (HTML)</i>. We'll
address the meaning of the "hypertext" part shortly. The "markup" part is the key to the
simplicity of HTML. What it reveals is the fact that documents are created by merely
adding special characters--called <i>tags</i>--to basic text files. That is, by "marking them
up."
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
a. To begin, start up Netscape and find any page of interest. The page you go to first will
do. Select <i>Source</i> from the <b>View</b> menu. You will suddenly find
yourself looking at a screen full of characters, some of which probably look familiar to
you, others of which probably do not. What you are looking at is the HTML file which
is processed by the Netscape program to create the page you were looking at when you
executed the <i>Source</i> command. Our goal is for this page to make perfect sense
to you by the end of the workshop.
</table>
</center>
<p>
Let's start to explore this language. In the first part of our workshop we'll create a
sample personal page on your diskette. (Alternatively, you can work on the hard disk of
your computer, but for obvious reasons you shouldn't do this in a public lab.)
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
b. Create a subdirectory on your diskette called <i>Web</i>. Use the Windows utility
<i>NotePad</i> to begin editing your home page. Save it in the <i>Web</i> directory
under the name <b>index.htm</b>, for reasons that will be explained later. (Save it
on your diskette, not on the hard drive in the lab.) The contents should be simple text,
including:
<p>
<ul>
<li>your name on the first line
<li>your class year and major on the second
<li>your campus address, phone number and e-mail address on subsequent lines
<li>a list of your classes for this term
<li>a paragraph describing your extracurricular activities and interests
</ul>
</table>
</center>
<p>
<b><i>Note:</i></b> Any word processor would be suitable for this purpose, as
long as you can save files in text-only (ASCII) format. The key is that you not have all of
the special control characters which regulate margins, indenting, fonts, styles, etc. in a
word processor, but have no meaning on the Web.
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
c. When you are through editing the file, save it and start up Netscape. (Note that you can
keep both Netscape and NotePad running at one time. Just use the <b>alt-tab</b>
key sequence to toggle between running applications.) Now we'll see what the
fledgling home page looks like. Go to the <b>File</b> menu and select <i>Open
File</i>. The resulting dialog box permits you to open any file on your PC disk as an
HTML document. Navigate to your diskette and open <b>index.htm</b>.
</table>
</center>
<p>
Kind of a mess, right? Notice that Netscape ignores all tabs, carriage returns,
sequences of spaces, etc. It simply takes the characters you have produced and runs them
all together. So what is to be done next? Marking up the text with tags, of course!
<p>
Before we proceed, we should discuss the fact that HTML is indeed a limited
language at the present time. Don't expect to be able to do all kinds of fancy formatting like
you can with a word processor. That's just not what HTML is for, at least in its current
incarnation. (Version 3.0 of HTML, due out soon, will have some pretty nice new features
though.) However, as you probably already know from your Web explorations, some
fairly eye-catching presentations can be created. Let's start to see how.
<p>
<hr>
<center><h3>2. Beginning HTML tags</h3></center>
<p>
Almost all HTML tags have the following format:<p>
<center><tt><tag> text, possibly including other tags
</tag></tt></center><p>
As we'll see, there are some notable exceptions, but in general you should always think of
tags as coming in pairs. The first set of tags we'll consider are general <i>structure
tags</i>. These are used to identify certain parts of your document. Though not strictly
required by all browsers, they reflect good HTML style and so we'll start with them
briefly. The structure tags include:
<p>
<ul>
<li><i>html:</i> used to bracket your entire document
<li><i>head</i>: identifies the prologue of your file, typically including the title
<li><i>body</i>: identifies the main content of your document
</ul>
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
d. Change the context from Netscape to NotePad to edit your file. Edit it so that it looks
like this:
<p>
<menu>
<tt><html><br>
<head><br>
</head><br>
<body><br>
<i>what you've written so far</i><br>
</body><br>
</html></tt><p>
</menu>
</table>
</center>
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
e. Next, add a title. Every Web page needs a brief, descriptive title. This is what
becomes accessible to various Web searchers, identifies pages stored in
<i>Bookmarks</i> lists and the <b>Go</b> menu, and is displayed at the top of the
Netscape window when accessed. This uses--you guessed it--the <i>title</i> tag
(<tt><title> <i>title of your page </i> </title></tt>). It is placed between the
<i>head</i> tags. Edit your file to include an appropriate title, such as "Jane Doe's
Personal Page". Don't forget to save the file.
</table>
</center>
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
f. Switch back to Netscape to view the page again. When you are in Netscape, click on
the <b>Reload</b> button. This will cause the changes you have made to take
effect. You won't notice much different this time, except that now the title is included
at the top of the Netscape window.
</table>
</center>
<p>
Now let's start making the page a bit more presentable. To start with, we would
certainly like to separate logically related passages of text from one another, probably
identifying them with appropriate subtitles. (Just like in an outline of a paper.) The
<i>heading</i> tags (<i>h1</i>, <i>h2</i>, ..., <i>h6</i>) take care of this nicely.
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
g. Surround both your name and class year with a <i>h1</i> tag pairs, for example:<p>
<menu>
<tt><h1>Jane Doe</h1><br>
<h1>Junior, English Major</h1></tt><p>
</menu>
Proceed by placing subtitles in your document for each section using <i>h2</i>
headers:<p>
<menu>
<tt><h2>Address Information</h2><br>
<i>address stuff you wrote before</i><br>
<h2>Class Schedule</h2><br>
<i>class stuff you wrote before</i><br>
<h2>Activities and Interests</h2><br>
<i>activity stuff you wrote before</i></tt><p>
</menu>
Save your file and use Netscape once again to check out your document. (Use the
<b>Reload</b> button.) That's a little better! Note that the heading tags are
numbered according to size, with the "level one" (<i>h1</i>) tags the largest and the
"level six" (<i>h6</i>) tags the smallest. Effective outline-style presentations can be
easily constructing using these. Try experimenting with some different sizes.
</table>
</center>
<p>
Turning our attention to the specific contents of each section of our document, we
would at least like to separate lines of text from those we intended to be on different lines.
Two tags--both notable examples of tags which do not come in pairs--are used for this.
They are the <i>p</i> (paragraph) and <i>br</i> (line break) tags. Whereever they are
placed in a document, they cause the character immediately following to begin on a new
line. In the case of the paragraph tag, there is a blank line inserted before the next character
is displayed. The line break tag simply causes the new text to be on the very next line.
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
h. Insert line break tags after each line of your address/phone number information, and
after each of your classes. After the last item in each section, insert a paragraph tag.
For example:<p>
<menu>
<tt><i>Room Number</i><br><br>
<i>Box Number</i><br><br>
<i>Phone</i><br><br>
<i>E-mail address</i><p></tt><p>
</menu>
Once again, check out the file with Netscape. Things are shaping up! (Note: Do not do
this with your class or activity information. We'll get to those shortly.)
</table>
</center>
<p>
<hr>
<center><h3>3. Adding links to other documents</h3></center>
<p>
So far we've only seen HTML as a not-very-good word processor. What makes it
special, though, is the ability to include <i>hypertext links</i> in the Web pages it
produces. These are the highlighted words (and images) on a page that can take you
somewhere else on the same computer, or halfway around the world with a single click.
<p>
Fortunately, these links are very simply implemented in HTML. They employ tags
just like we have already seen. The general format of a link is:<p>
<center><tt><a href=<i>"resource URL"</i>>text or
image</a></tt></center><p>
It's that easy! Now, a basic familiarity with Universal Resource Locators (URLs) has been
assumed for this workshop. In brief, however, a URL such as this one:<p>
<center><tt>http://s9000.furman.edu/~treu/cheers.html</tt></center>
<p>
breaks down as follows:<p>
<menu>
<b>http://</b> -- identifies the resource to be accessed as a hypertext
page<br>
<b>s9000.furman.edu</b> -- identifies the machine address in the
Internet<br>
<b>~treu/cheers.html</b> -- identifies the <i>path</i> to the
resource<p>
</menu>
There can be numerous variations of URLs. The resource identifier may be other things
besides "http" for instance. (You should notice some other options in your net travels.)
Sometimes the path may be omitted, as well as the file name. This is because certain paths
and file names are accepted as defaults by Netscape and other Web browsers. We'll soon
see what those defaults are for our system.
<p>
It is important at this point to note that URLs come in two forms: <i>absolute</i>
and <i>relative</i>. The easier of the two to understand is the absolute form. In short, an
absolute URL is one that is fully specified, including <b>http://</b> (or another resource
identifier) and the machine name. The previous example is an absolute URL.
<p>
Specification of URLs can sometimes be simplified by using the <i>relative</i>
form. This is possible whenever a link to another resource on the same computer is to be
included. In short, the resource identifier and machine address can be omitted in this case.
As long as Netscape can figure out where a resource is--based on where you currently
"are"--what you need to specify in terms of a URL is minimal. For example, if I am
currently accessing a page in my own directory (<b>~treu</b>) and want to access the
<i>Cheers</i> page, the relative URL simply reduces to <p>
<center><tt>cheers.html</tt></center>
<p>
To simplify matters, just remember this: use <i>relative</i> URLs when you are
creating links to pages of your own, and use <i>absolute</i> URLs when you are creating
links to pages elsewhere on the Web.
<p>
Let's add a link or two to your home page.
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
i. Many people include a list of interesting Web sites on their personal pages. Let's start
such a list on your sample page. Near the end of the file (before the
<tt></body></tt> tag) insert the following:<p><menu>
<tt><h2>Links to check out</h2><br>
<a href="http://cool.infi.net/">Cool Site of the
Day</a><br>
<p></tt><p></menu>
Use Netscape to open the file. You should see the words "Cool Site of the Day"
highlighted in blue. You have created your first link! Clicking on this text should take
you to an interesting Web site which you have visited before. Try it out.
</table>
</center>
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
j. Find and write down the URLs of other interesting pages and add new links to your
list. You can also make a link out of any text on your page. See if you can find a Web
page dedicated to one of your activities or interests and make a key word in your
"activity paragraph" into a link to that page.
</table>
</center>
<p>
Presumably you will go on to create more pages of your own. All you need to do
is create a file that ends in <b>.htm</b> in your <i>Web</i> directory and create a link to
it. For instance, say you create a page containing information about your favorite band.
Just store this page as <b>band.htm</b> in the same directory as your
<b>index.htm</b> file. To create the link, all you need is something like this:<p>
<center>
<tt><a href="band.htm">My Favorite Band</a></tt><p>
</center>
Compare this use of a <i>relative</i> URL to the <i>absolute</i> form you have used thus
far. Much simpler, right? That is because <b>band.htm</b> is stored in the same place
as <b>index.htm</b>.
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
k. Try this. Create a new page ending in <b>.htm</b> using NotePad and save it in
your <i>Web</i> directory. The contents of the page are unimportant. Create a link to
this new page in your <b>index.htm</b> file and try it out.
</table>
</center>
<p>
We'll soon see that images, and not just text, can be made into links as well.
<p>
<i>The e-mail link</i><br>
A popular Web page feature is to have a link which allows someone to quickly and
easily send e-mail to the author of a particular page. Add one of these to your page.
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
l. Surround your e-mail address with a tag using the "mailto" indicator. If your name
were Jane Doe, you would add:<p>
<tt><a
href="mailto:doe_jane/furman@furman.edu">doe_jane/furman@furman.edu</a></
tt>
</table>
</center>
<p>
<hr>
<center><h3>4. A bit more HTML</h3></center>
<p>
Before moving on to the inclusion of images in your document, lets apply a bit
more polish using additional features of HTML.
<p>
<i>Horizontal rules</i><br>
You have already separated the different segments of your page using subtitles.
Often a non-text separator is also desirable. It is for just this purpose that HTML includes a
facility for including horizontal rules as dividers. These are implemented using another
non-pair tag, <i>hr</i>, which stands for "horizontal rule."
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
m. Prior to each level two heading (<tt><h2></tt>), include the tag
<tt><hr></tt>. Check the effect using Netscape.
</table>
</center>
<p>
<i>Lists</i><br>
It is probably clear from your Web travels and from this workshop so far that
information is often best organized into succinct lists. HTML provides tags for the
implementation of three majors types of lists: <i>unnumbered</i>, <i>numbered</i> (or
<i>ordered</i>) and <i>descriptive</i>. We'll implement the first two today, and leave
the third to your reading and experimentation.
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
n. Make your list of classes into an unnumbered list. The basic tag for such lists is
<i>ul</i>. An additional tag for each list item is required also, and as you might
expect, this tag is <i>li</i>. Make changes as follows:<p>
<menu>
<tt><ul><br>
<li> <i>class 1</i><br>
<li> <i>class 2</i><br>
<li> <i>class 3</i><br>
</ul></tt><p>
</menu>
</table>
</center>
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
o. Next make your list of interesting links a numbered list, using the tags <tt><ol>
... </ol> </tt> Check out the page using Netscape.
</table>
</center>
<p>
<i><b>Note</b></i> at this point that there is no problem applying new tags (for the
list) around the tags you already used to indicate links. In general, any number of tags can
be applied to the same text, as long as it makes sense to do so.
<p>
<i>Character formatting</i><br>
Some rudimentary character formatting abilities are provided in HTML, but we
won't spend much time on them. Try experimenting with <tt><i>...</i></tt>
and <tt><b>...</b></tt> tags for italic and bold text, respectively. Another
popular feature is the ability to center text.
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
p. Center your level two headers by enclosing them in the tags
<tt><center>...</center></tt>.
</table>
</center>
<p>
<hr>
<center><h3>5. Venturing onto the Internet</h3></center>
<p>
Thus far your page really hasn't been accessible to anyone but you (and that's
probably just the way you want it right now!) because it is stored on your diskette, which
is not accessible from the Internet (since it isn't running a Web server). To change this,
you will have to "upload", or copy, your page to a computer which does have a Web server
running on it. In the next activity you will learn how to do this. For the moment,
however, we'll keep things simple and keep them on your diskette.
<p>
<hr>
<center><h3>6. Using images</h3></center>
<p>
Finally, let's add an image to your page. Images that are interspersed with your
text are called <i>in-line images</i>. (More on other types of images later.) A special kind
of tag, called <i>img</i>, is used to include these. This tag uses the following basic
format:<p>
<center><tt><img src=<i>"URL for
image"</i>></tt></center>
<p>
Let's add a picture to the beginning of your page, just before your name.
<p>
The first thing you will need, of course, is a digitized image of some kind.
Fortunately, these are easy to come by. Any image that you find displayed on the Web can
be downloaded to your diskette and re-used. To see how it's done, let's get a copy of the
Furman masthead from the Furman University Home Page.
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
q. First use Netscape to access the Furman home page
(<tt>http://www.furman.edu/</tt>). The masthead image is at the top of the page.
To get a copy of it, simply click on it using the right mouse button and hold the button
down. A menu will pop up on the screen. Select <i>Save This Image As</i>. You
will then be presented with a dialog box like those you have seen before. Navigate to
your <i>Web</i> directory and save the image. It's as simple as that!
</table>
</center>
<p>
Now add the image to your own page using the <i>img</i> tag described above.
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
r. Edit <b>index.htm</b> to include the line<p>
<menu><tt><img src="furman.gif"><br></tt><p></menu>
right after the <tt><body></tt> tag. Once again, open your page using <i>Open
File</i> in Netscape to check out the new image.
</table>
</center>
<p>
<i><b>Note:</b></i> Other options for the <i>img</i> tag include <b>align</b>
and <b>alt</b>. The former defines how an image is to be positioned relative to
surrounding text if they are interspersed. The latter defines a textual substitution for the
image in the event your page is being read by a text-only browser, such as Lynx. In the
interests of time, we'll omit these options today. Consult an HTML text or ask me if you'd
like to know more though.
<p>
<i>Other sources of images</i><br>
There are numerous sources of "generic" images that you can use to make your
pages more visually appealing. These include buttons, icons, fancy lines, backgrounds,
etc. Remember that anything that you can view using Netscape-- anywhere in the world--
can be downloaded and use in your own pages. Take advantage of this!
<p>
In addition, you can create your own original digitized images using a drawing or
painting tool. Finally, you can digitize existing images with the use of a scanner. An
accompanying workshop describes how to make use of this technology.
<p>
As mentioned earlier, hypertext links need not always be text. We can make the
Furman masthead image into a link to the Furman home page simply by including the URL
for the image inside the tag for a link.
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
s. Modify the <i>img</i> line you just added to read<p>
<menu>
<tt><a href="http://www.furman.edu/"><img
src="furman.gif"></a></tt><p>
</menu>
Test the "image link" using Netscape.
</table>
</center>
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
t. Repeat the image-copying exercise by copying an interesting separator-line image from
the Web. Two good sources for these are<p>
<tt>http://www.widomaker.com/~spalmer/lines/solid/index.html</tt><p>
and<p>
<tt>http://www.widomaker.com/~spalmer/lines/textured/index.html</tt><p>
Pick one and copy it to your directory. To use it, replace the <i>hr</i> tags (horizontal
rules) in your file with the appropriate HTML line. (This is a good test of whether or
not what you've done so far makes sense.)
</table>
</center>
<p>
In general, in-line images should be used with careful thought. Cluttering your
pages with too many images can not only be unattractive, but a source of considerable
inefficiency for those trying to access your page.
<p>
<i>Backgrounds</i><br>
Suitable images can be used as backgrounds to your pages to make them more eye-
catching. Repositories of these images can be found all over the Web.
<p>
<center>
<table border=4 width=85%>
<tr>
<td>
u. Access the location<p>
<tt>http://www2.netscape.com/assist/net_sites/bg/backgrounds.html</tt><p
>
Select one of the background patterns and copy it to your diskette as you've done twice
before. For a file called <i>background.gif</i>, change the <i>body</i> tag in
<b>index.htm</b> to read<p>
<menu>
<tt><body background="background.gif"></tt><p>
</menu>
Use Netscape to see the effect of this simple change.
</table>
</center>
<p>
<hr>
<center><h3>7. Advanced topics</h3></center>
<p>
Though we have (hopefully) laid a strong foundation for understanding HTML and
writing multimedia, hypertext Web pages today, there is a lot to HTML and the Web that
we are omitting, including the use of images, sounds and movies as external resources,
writing fill-out forms and "clickable" imagemaps, incorporating other Internet tools such as
e-mail, FTP, Gopher and News, along with various and sundry small features of HTML.
Maybe we will have a follow-up lab to cover some of these topics, but in the meantime you
have access to various HTML textbooks and the best teacher of all--the Web itself.
<p>
Just as we can access images from other pages, we can access HTML ideas too.
Use the <i>Source</i> option of the <b>View</b> menu regularly. If you see
something interesting and you would like to know how to accomplish it, you know how to
get a look at the HTML code itself! If you see an appealing page layout somewhere, save a
copy of the HTML source to use as a template, filling in your own information where
appropriate.
<p>
There is no substitute for experience and experimentation when it comes to learning
HTML. We'll try to build some more experience in our afternoon session today, but I
hope that you'll continue to explore after this workshop concludes.
<p>
<hr>
<center><h3>8. HTML Editors</h3></center>
<p>
You will not always have to do your Web authoring using the "gory details" of
HTML as described in this lab. Already there exist several <i>HTML editors</i> which,
like word processors, allow you to create Web pages using the "what you see is what you
get" concept. As your interest in creating Web pages grows, you may want to check some
of these out. Ask me about finding a good editor if you like.
<p>
<hr>
<center><h3>9. More information</h3></center>
<p>
With this workshop (and maybe a suitable textbook), you have a great deal of
information about HTML and the Web to digest. A lot more can be found on the Web
itself. Just to point you in a couple of productive directions, I suggest you look up the
following:
<p>
<i><!WA0><a href="http://www.ncsa.uiuc.edu/demoweb/html-primer.html">NCSA
Beginner's Guide to HTML </a></i><br>
<b>http://www.ncsa.uiuc.edu/demoweb/html-primer.html</b><br>
<i><!WA1><a href="http://gagme.wwa.com/~boba/masters1.html">Bob Allison's
Webmaster's Page</a></i><br>
<b>http://gagme.wwa.com/~boba/masters1.html</b>
<p>
There are many others as well. I have found these two to be particularly helpful as starting
points in my own learning process, however.
<p>
<hr>
<center><h3>Next: <!WA2><a href="http://s9000.furman.edu/workshops/pcinstall.html">Putting Your Home Page on the
Web</a></h3></center>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -