Lab #12
CS 2351
UNIX Operating System
Name
__________________________________
Section
______________________
|
This lesson will cover learning how to make a Web
page and put it in your public_html directory on your Computer Science
department account. You and anyone
else should be able to see these on the Internet. You will create the Web pages using MS
FrontPage 2002 so you don’t have to learn the HTML code. You will also use FTP to transfer the file
from your special directory to your Computer Science account. |
Probably one of the most
exciting advancements in computing has been the introduction of Web browsers
and the Internet. It has allowed many people
of all ages who would not normally use computers to be able to access
information from around the world in a short amount of time. They also don’t have to be very knowledgeable
about computers.
The World Wide Web is part
of the Internet and consists of a very large collection of documents stored on
computers around the world. These
consist of the following:
Web Server - A
Web server is a computer that stores Web pages and makes the pages available on
the Web for other people to view.
Web Site
– A Web site is a collection of Web pages created and maintained by a college,
university, government agency, company, organization or individual.
Web Page – A Web page is a document on the
Web. Web pages can include text, images,
sound, and video.
URL – Each Web page has a unique address, called a
Uniform Resource Locator (URL). You can
display any Web page if you know its URL.
Links – Web pages contain links, which are highlighted
text or images on a Web page that connect to other pages on the Web. You can select a link to display a Web page
located on the same computer or on a computer across the city, country, or
world.
Web Browsers – A Web browser is a program
that allows you to view and explore information on the Web.
HTML – Hypertext Markup Language (HTML) is a computer
language used to create Web Pages. These
consist of text and special instructions called tags. A Web browser interprets the tags in an HTML
document and displays the document as a Web page.
People create Web pages for
the following reasons:
Personal – To share information
about their families, pets, vacations or favorite hobbies. Some people also create a resume for
potential employers. This would
certainly be useful when you are looking for a job.
Share Knowledge – Many
scientists and business professionals make their work available on the
Web. You can make Web pages to share
that knowledge.
Entertain Readers – Many people
create Web pages to display collection of jokes or humorous stories.
Promote Interests – You can create Web pages to display information
about an organization or club that you belong to. You can include a schedule of events and
detailed information about the goals of the organization.
Provide Information – Companies
place pages on the Web to provide information about their businesses and the
products and services they offer.
Shopping – Many companies create
Web pages that allow readers to order products and services over the
Internet. Companies can display
descriptions and pictures of products to help readers determine which products
they want to purchase.
Job Listings – Many companies
use Web pages to advertise jobs that are available within the company. Some companies allow readers to submit their resumes
on their Web sites.
Contact Information – Companies
can display their office addresses, e-mail addresses and phone numbers on their
Web pages.
In
this assignment you will design some Web pages using MS FrontPage 2002. You will not need to know the HTML language
in order to make a Web page. In order to put Web pages on
the Internet so they are available all of the time, you must have access to a
computer that is connected to the Internet at all times. Many of the Internet Service Providers have
space on their machines where you can keep Web pages. A certain amount of space
is given to all customers. The
computer needs to be connected by telephone line or other connection at all
times.
Some people dedicate a
certain PC in their business where all Web pages are kept. This particular
machine will be connected to the Internet all the time. If you own a PC, it would need to be
connected to a telephone line all of the time in order for others to have
access to your Web pages. This would mean that you need to have an extra
telephone line for the PC or you would need a DSL (Digital Subscriber Line)
telephone line that allows you to use the Internet and also receive calls at
the same time.
When you look at pages on the
Internet, you see lots of information in print.
You may also see graphics. People
also have colorful backgrounds in their pages.
In the early days of Web page design, people had to have a basic
knowledge of HTML in order to make Web pages.
This meant that it was not easy to develop web pages. However, now many word processors can be used
for designing web pages. Actually, all
of the Microsoft products now allow you to save information so you can put it
on the Web. You can use Word to make
Web pages. You can save Excel, PowerPoint, and Access files in a Web format so
you can put them on the Web without retyping them. However in this lesson, you will use
FrontPage 2002.
The page that you design
will contain special formatting, background themes, bulleted lists, underlined
links, horizontal lines that separate elements on the page, and a heading
displayed in a larger font. You will
also add a table and a graphic to your Web page. Making Web pages can be very creative and
lots of fun.
HTML
Web page files are simply
text files written using HTML
(HyperText Markup Language). HTML is a tag language. This means that tags
(special character strings) are intermingled with the text of the Web page to
apply formatting to the text. HTML
contains relatively few different tags.
Because of its simplicity, HTML is somewhat limited in the formatting
that it can do on the text of a Web page.
We will not use all of the
tags defined in HTML for this assignment, but feel free to experiment with the
other tags. If you wish to pursue HTML
documents beyond the bounds of this assignment, you can find some excellent
tutorials by connecting to a web page located at http://www.cs.okstate.edu/cs1003/webpages.html. All HTML tags begin and end with the characters
“<” and “>”, respectively. These
are called angle brackets. This is how HTML distinguishes tags from Web page
text. Most of the tags appear in pairs
at the beginning and at the end of the formatted text. The ending code is preceded by a slash.
Many of the machines that are
used to keep Web pages are UNIX machines.
Unix machines were some of the first machines that had the capability to
do networking. Probably one of the
reasons many people still use Unix machines is because of their capability to
set up web sites. You will learn how to
set up your own directory on a Unix machine.
The CS department allows
faculty, staff, and current CS graduate students to have Web pages on the Sun
MicroSystems SunFire V880 machine. At
this time, undergraduates cannot keep Web pages on the departmental
computer. However, you will be given the
opportunity to fix up a directory and make Web pages for this class. At the end of the class, these directories
will disappear. The purpose of the CS
Department computer is for faculty research and assigned student course
work. There is some other information
on our departmental Web pages at http://www.cs.okstate.edu/facilities/FAQ/webpages.html.
Finding your Special “H:”
drive in the Computer labs
Before we start making the Web pages, you need to find
a place to save your pages when you first make them in FrontPage 2002. You could save them to your “C:” drive on the
computer you are using in the lab.
However, there is no guarantee that you will get that computer
again. The University also deletes
information from the C: drive.
Sometimes Web pages get too large if you have graphics in them and you
cannot save them on a floppy disk. OSU
furnishes each student with a special directory, the H: directory. When you save anything to this directory, you
can then access it from any of the labs on campus.
1. Follow these instructions:
o
Double click on
the My Computer icon on the desktop.
o
You will see the
My Computer window with various selections.
These are the various
directories that are available to you.
You should see one with your Login id on it. This should be your special drive where you
can save files that will be available to you all over campus.
o
Double click on
the Login id that is yours. You should
now get your directory on the screen.
Unless you have already used this directory, you should not have
anything in the directory except a few directories such as Netscape.
o
This is where you
will save the Web pages you make and the graphics that you obtain in order to
make your Web pages.
o
Close this
directory now.
Saving Images obtained
from the Internet
There
are times when you see an image on the web that you would like to use
elsewhere. For example, you may see a
bullet, button, line, icon, picture, or cartoon that would look nice on your
own Web page. There are several sites
that have graphics that you can copy. Of
course, you will also find more places that want you to pay for them. After you have found them, there is an easy
way to save a copy of an image for use later. You are now going to look for
some graphics on the Internet. Do the
following:
2. Click on the Internet Explorer icon on the main menu page.
o When you are on the system, go look at the various
locations that are listed with graphics in the “Web Page Handout” that is
located at http://www.cs.okstate.edu/graphics/webpages.html.
At the bottom of this page are some addresses to places where you can get
graphics. Some of them are
animated. It is lots of fun to try out
these different locations. It also can
be very frustrating because you get sent from one location to another and it is
difficult to get to the graphics sometimes.
You also can find some pages that will give you different colors you can
use for backgrounds or fonts.
o However, for this first graphic, your instructor has made
a page with pictures or icons that are related to OSU. These were found on some of the University
web locations. You may want to use one or two of these for your web page.
o Go to URL http://www.cs.okstate.edu/graphics/test.graphs.html
.
o You will see a number of pictures with OSU logos on
them and also a couple of Pistol Pete.
Some of the rules for copying graphs from other locations at OSU are
that you can use them as long as you are not using them to advertise or sell
something for your own benefit that is not related to OSU. There are also some
bullets and some lines, some backgrounds that are available. There are also
some departmental graphs.
¨ Choose one of the OSU logos or a picture of Pistol Pete. Move the mouse cursor onto the image, click the right mouse button, and a menu pops up.
¨ Click (the left mouse button) on the pop-up menu item labeled SAVE PICTURE AS..., and a save as… dialog box appears. Remember that files are arranged into directories or folders on a disk. If you want to save an image to a disk, you must specify the disk onto which the image is to be saved, the folder into which it is to be saved, and the name of the image file that will be saved. The image or file also can be saved to a special directory on a computer.
¨ However, what if you want to save the file into a different folder? To do this, click on the drive & folder dropdown list arrow, immediately to the right of the current folder name, and a scrollable, dropdown list of the drives and folders on the computer will be displayed.
¨ Click on YOUR own directory—the H: directory.
The name of the file to be saved is in the file name text box. When this save
as… text box appears, there is already a name in the file name text box, but you can change it.
The type of file is determined by how the file is
stored and used. For example, in Figure
4, the file is a JPG file, which is a kind of image file. Other image files may have GIF
added to the end of their name. These are two types of graphics extensions
that are used on the Web. If
you click on the SAVE
button of the dialog box, the image will be saved with the name shown in the
current folder. (We will see save as… dialog boxes in other programs,
as well.)
3. Perform the following steps to complete the
process of saving an image on to your own personal folder.
o The save as…
dialog box should still be visible.
Click on the downward-pointing arrow to the right of the current folder
name.
o Scroll through the list until you find a drive with
your login id on it. This is the name
that you use when you logon to the system.
It should look similar to the example above.
o When you find it, click on your name. It should now appear as the current folder,
and its contents should be displayed in the center of the dialog box. You may not have anything in the box yet if
you have not used it. You possibly may
have one folder in it that says “Netscape”.
This will be the file where your bookmarks will be stored.
o The file name of the image is already filled in, so
click on the SAVE
button from the dialog box. After a few
moments of activity, the dialog box should disappear and the image is saved.
o Exit from Internet Explorer or Netscape.
Starting Your Web Page
4. First, go to START/PROGRAMS/ Microsoft
Office XP/Microsoft FrontPage and
open FrontPage.
o
The Menu bar and tool bars are
all similar to MS Word. Take a look at the
different menus, and formatting tool bars.
o
Next, type in the following information enclosed in the box below on
the first page of FrontPage. The first
page is known as your Home page.
This is the first page people see when they visit your Web site. It should consist of:
§
A Summary that gives your purpose of your Web pages.
§
Table of Contents that lists the information contained in your Web site. (This means you have more than one
page.) You can include links to other
information.
o
When you see information in parentheses and in italics, you are to type
in your own information—such as in the spot for your name. In the spot where
you are asked for your major, if you don’t have one yet, you can put
“undecided”. You will make changes
after you complete this first part of the assignment.
o
Notice that you will be inserting a table in the middle of this
document. It will make it easier when you insert a graph. When you are typing
in the list of items, every time you press the ENTER key, you will leave a
blank line before you type in the next item.
These extra spaces in the list will disappear when you add bullets to
this list.
|
Welcome to( your name’s) Home Page I am a student at I am enrolled in CS 2351 – UNIX Programming
for the (type in current semester-such
as Fall 2004)semester. We are
learning how to make Web pages in this class. This is my first attempt at
making a Web page. Some of the other
items that we are learning in the class are: (START A TABLE HERE—IT
SHOULD CONTAIN 2 COLUMNS AND 1 ROW—TYPE IN THE FOLLOWING IN THE LEFT SIDE OF
THE TABLE. )
You can contact me
at: ( your e-mail address). |
o
Click and highlight all of the items listed in the table.
o
Click on the Bullets button to
add bullets to your document.
o
Highlight the title. Center and bold the title. Keep the title highlighted.
o
Click on the Font color
button on the formatting tool bar. Pick
a color for the font of the title.
o
Next, go to the font size box.
This is the box on the right of the Font box (it should say “default
font”) in the formatting tool bar. The
font size box should have “Normal” in it.
Use the drop down arrow to choose 5 (18 pt) .
Saving Document
Normally, FrontPage will store all your Web pages on your computer in a folder called “My Webs”. The My Webs folder contains a separate folder for each Web site you create. FrontPage will store a new Web page in the folder for the current Web site. It is assumed that you will use your computer and connect to the Internet to display your Web pages. However, we will not save it to the Web folder.
5. You will
now save the file.
o
Click on the SAVE button. Since
you have not named this page yet, you will get the Save As menu. Click on the drop down menu in the Save In
box. Find your H directory.
o
When you are in your H directory, Type in: homepage.mine in the File Name box.
o
Click on the Save
button.
Adding some other features
6. You can now add a few other features to your
document such as horizontal bars and a time stamp.
o
Click at the end of the first paragraph (at the end of OSU). Click on INSERT menu. Click on Horizontal
line to insert a horizontal rule at the end of the paragraph. Add a horizontal line before the last line of
the document--your e-mail address.
o
Customize the horizontal lines. You do this by double clicking on the
horizontal line. You will then get a Horizontal
line Properties dialog box.
Change the color and size of the line.
If you make changes in one line, that will be the default the next time
you add a line unless you change it.
You also can obtain different horizontal lines on the Internet that can
be copied as a graphic.