IT 7360: Technology for Educators
Software Help Sheet
Unit 6: Emerging Technologies
Creating Web Pages
What is HTML? HTML is an acronym for HyperText Markup Language. It allows all types of computers to interpret information on the World Wide Web in the same way. HTML is a series of tags, sometimes called elements, containers, or codes, that surround text much like parentheses or quotation marks. Text in an HTML document can be controlled, just as in word processing, by adding formatting attributes such as bolding. In addition, you can insert graphic images, sound files, and multimedia clips that a Web user can click to access.
What do you need to create a web page? Basically, two things—an HTML file, and a server to store it on that can be accessed by users on the WWW. Also, you need a way to copy that file to that server.
At GSU, we store our web files on the Arachnid server. You access your web space through your Panther account (which you will come to realize is more than your e-mail account).
Ways to go about creating and publishing an HTML document:
Creating Your First Web Page
1. Creating your webspace.
{0}:panther:/gsu03/mst/mstmbs/>webspace
This will create a new directory in your Panther account for your web page. To double check your success, at the Panther prompt:
{0}:panther:/gsu03/mst/mstmbs/>ls
dead.letter local.login mail xit
local.cshrc local.profile public_html
This will list all the directory files in your Panther account. The directory for your web space is called public_html.
To begin working in your web space, you’ll have to change your active directory. At the Panther prompt,
{0}:panther:/gsu03/mst/mstmbs/>cd public_html
A new Panther prompt will appear that looks something like:
{0}:panther:/gsu03/mst/mstmbs/public_html/>
Note: The page that people will view when they dial up your page must be called index.html. So, at the Panther prompt:
{0}:panther:/gsu03/mst/mstmbs/public_html/>pico index.html
A blank text document will occur.
It’s a good idea to plan your web pages out on paper, or a "web storyboard" in advance. For now, follow our class template.
There is a method to web pages. HTML uses "tags" to format your document. Tags are expressed using < > and must be "turned on" and "turned off." Tags tell the browser how to format the information on the screen.
For example, to boldface text, you’d type in
<b> text </b>
turn bold on -- hot zone-- turn bold off (slash = off)
To create your index document, type in the following template:
<html>
<head> <title>your name </title></head>
<body>
Welcome to my home page.
(your name)
(degree program), (major)
Georgia State University
Atlanta, GA
Click here to send me e-mail.
Favorite Links
Link 1
Link 2
Link 3
This site was created November 30,
1998.
</body>
</html>
Launch Netscape.
Enter the URL for your page.
Press Enter and your should get a message telling you that access to the page is FORBIDDEN!
Why? Because your haven’t opened your page for pubic viewing. Back to
Panther to fix it.
{0}:panther:/gsu03/mst/mstmbs/public_html/>chmod
755 index.html
To reload your page, hold down the Shift key and click on the Reload button on the tool bar.
Troubleshooting: If your page does not load, go back to Panther and
make sure your are working in the public_html directory. See your instructor
for assistance.
You can easily edit the appearance eof your page in Composer much like
a word processing document. Many of the typical formatting options appear
on the toolbar in button form, allowing you to bold, center, increase or
decrease font size, etc.
From the menubar, Format-Page Color and Properties. Click on the Colors and Background tab.
Select Use Custom Colors.
To select a background color for your page, click on the colored rectangle preceding Background and select a color. (You could also specify an image to use as your background lower in this dialog box).
Click on OK.
Note: Several background images are available at:
Find an image on a page (use the GSU home page if necessary). Place your mouse on the image and press the right mouse key. Drag down and release on Save Image As, and direct it to your floppy disk.
Place your cursor where you want to insert the image and click.
From the menubar, Insert-Image. Click on the Image tab. At Image Location, click on Choose File.
Direct to the file you saved on your floppy disk and select your image. Click on OK.
A great index site for www clipart is
From the menubar, Insert-Link. Click on the Link tab.
In the blank box after Link to page or location:, type in the GSU homepage address,
http://www.gsu.edu
Click on OK. The page text Georgia State University should change
color to show that it is a link.
From the menubar, Insert-Link. Click on the Link tab.
In the blank box after Link to page or location:, type in
mailto:mshoffner@gsu.edu (use your own address!)
and click on OK.
Save the copy of your page to your floppy disk (just to be safe).
From the menubar, click on Publish.
In the dialog box that appears, make sure the HTML filename is index.html.
In the box after HTTP or FTP Location to publish to:, type in the following:
ftp://gsu.edu/./public_html
For Username, enter your Panther userid.
For Password, enter your Panther password.
Click on OK.
Hopefully, you will receive a message that your files successfully transferred.
To reload your page, hold down the Shift key and press the Reload button on the toolbar.
Troubleshooting: Publishing to your Panther account is unfortunately
a hit or miss thing. Often, it doesn’t work the first time (go figure!).
I’ve found that if I don’t load the images the first time, and then publish
a second time with the images, I’m often successful.
Create your page as you would a word processing document and format as needed, adding links and so forth.
Save and publish your page in the same manner as indicated previously.
Remember, however, you sill have to go into your Panther account and open the page for public access.
Now, create a page for your Web Page Work Sample. Make sure you check the guidelines for what your page needs to include.
