Creating Your Own Home Page: Getting Started

Table of Contents

Web Terms and Acronyms
 Exploring Netscape
Basic Steps to Making a Web Page on MTSU's Server
 Planning a Web Page
 Designing a Web Page: Design Tips
 Creating Your Web Page
UNIX and Pico
 HTML Documents and Tags
A Look at Index.html
 Changing and Updating Your Web Page
 Using Local Editors to Create HTML Files
 Moving Files and Changing Permissions
 Copying Images from Web Pages
 Searching the Web
Return to HTML Workshop Home Page

Web Terms and Acronyms

Bookmark: A feature of Netscape which enables you to mark Web pages of particular interest to you for future reference and easy access.

Browser: A program such as Mosaic or Netscape that helps users work with the World Wide Web by displaying documents and making links between computing sites.

File Transfer Protocol (FTP): A communication standard which allows you to send and retrieve files over the Internet.

Home page: The initial entry point into a Web document. The home page may also serve as a main menu and contain references to related documents.

HTML: Hypertext Markup Language is the method an author uses to markup a document so that it can be displayed on the Web.

http: HyperText Transfer Protocol is used to transfer hypermedia, such as text and audio or text an images.

Hypertext: A method for linking documents together non-sequentially.

Lynx: A text-based Web browser.

Netscape: A graphical Web browser that can display Web documents in hypermedia format; that is, it can be used to view text, images, and video and to listen to audio.

Spider: A program that travels the Web to gather, compile, and index information. A spider indexes the text in Web pages, so it can locate specific Web pages based on their content. The Webcrawler is an example of a spider.

URL: The Uniform Resource Locator is a way of specifying where something is on the Internet. It takes this general form: <method://<host computer>/<pathname>> This first part specifies the access method used to retrieve the document such as FTP, Gopher, Telnet, or http. The host computer identifies a machine and the pathname specifies a directory and filename.

World Wide Web: A vast series of electronic documents called Web Pages or Web Documents that are linked together over the Internet. Also referred to as The Web and W3.

Exploring Netscape

When you start Netscape, the Netscape application window appears. The screen elements allow you to enter, view, and search for information. The following text details each of the Netscape elements and their function.

Basic Steps to Making a Web Page on MTSU's Server

  1. Plan your Web page using useful and unique information, links to other relevant Web pages, and good design techniques.
  2. Create your initial Web page using a local HTML editor.
    Hint: You can get a quick start on your first Web page by running the homepage program on frank. Just type homepage at the frank prompt after you log on.
  3. Upload initial or additional Web pages (files) from personal computer to your account on Frank in public_html subdirectory using FTP program.
  4. Login to Frank account and change to public_html subdirectory and change file permissions of uploaded Web page (file) so that others can read the file.
  5. Using Netscape, view the Web page (file) by inputting the URL.
  6. Make quick changes to Web page (file) by using the Pico editor.
  7. View changes by reloading page in Netscape.

Planning a Web Page

Creating a Web page is just like creating any other kind of document. You need to approach it in a step-by-step manner. In the workshop we will use the following outline to create a home page:

Designing a Web Page: Design Tips

I. Everything Really Works! II. You Can Read It! III. It's Text Browser Friendly! IV. You Don't Have to Wait Long for It to Load! V. It's Unique VI. It Won't Drive You Crazy! VII. Netiquette is Observed

Creating Your Home Page

To get started on your home page, you will run a program called homepage that will automatically do several tasks for you including:

UNIX and Pico

To effectively create and update a Web page, you will need at least a passing acquaintance with a few UNIX commands and a working knowledge of an editor. In this workshop, the editor Pico will be used and discussed. The following table offers an overview of commonly used commands and their functions.

UNIX CommandDescription
llGives a directory listing of files and subdirectories in the current or specified directory
cd (subdirectory name)Changes current subdirectory to specified directory
pwdDisplays your present(current) working directory
mkdir (subdirectory name)Creates a new subdirectory
rmdir (subdirectory name)Removes or deletes a subdirectory
cp (source path and filename) (target path and filename)Copies an existing file to a new file or new location
mv (source path and filename) (target path and filename)Moves an existing file to a new file or new location
rm (source path and filename)Removes or deletes specified file
chmod (group u, g, o, or a) (+ or - attributes r, w, or x) (subdirectory or filename)Changes a group's (u=user, g=group, o=other, or a=all) permissions (r=read, w=write, and x=execute) on specified subdirectory or filename

More on File Permissions

All of the files that you create or upload to your account on Frank have default permissions that allow only you to read them so that your memos, letters, and personal files are protected from other people. However, you want all of your Web page files to have file permissions that will allow anyone and everyone to read them.

The chmod command will allow you to change file permissions (read, write, or execute) for the user, group, others, or for all. To see a file's permissions, user the ll command:

frank $ ll This will list a directory of files in public_html.



The permissions are listed in the first column. The permission list is structured as follows.



-

rwx

r--

r--

The first dash tells you that index.html is a file rather than a directory. If index.html were a directory, a d would appear here. The next three letters show the permissions that the user has on the file. The user can read the file, write to the file and execute the file. The second three characters show the permissions that the group has on the file. The group can only read the file. The file set of characters shows the permissions that others (the world) have on the file. Others can only read the file.



To change a permission on a file, at the frank prompt:

  1. type chmod
  2. space
  3. type the group that you wish to change the permission for (u for user, g for group, o for other, or a for all groups)
  4. type a plus sign (+) if you are giving a permission or a minus sign (-) if you are taking away a permission
  5. type the permission that you are giving or taking away (r for read, w for write, or x for execute)
  6. type the name of the file or the directory you are setting the permissions on or use * (asterisk) for all files and subdirectories in public_html
  7. press enter
  8. check the new file permissions by typing ll at the frank prompt
For example, you wanted to allow everyone in your group to make changes to the file index.html, you would use the following command:

frank$ chmod g+w index.html

To take the write permission away from others in your group, you would enter:

frank$ chmod g-r index.html

Usually, you will want to give read permission to the group and others. If you were giving permission to everyone on the index file, you would enter:

frank$ chmod a+r index.html

Often, you will have uploaded several files and will want to change the permission on all of them. You can use the following wildcard with the chmod command to change the permission of all the files in the public_html directory.

Hint: Be sure that your current directory is public_html before you use this command. You can use the PWD to confirm this.

frank$ chmod a+r *

Pico


You will also need working knowledge of an editor. In this workshop, the editor Pico will be used and discussed. Pico is an easy-to-use full screen editor that is invoked by typing pico (filename). Basic Pico commands and their descriptions are:

Pico Command

Description
^GHelp
^AMove to the beginning of the current line
^EMove to the end of the current line
^VMove forward one page
^YMove backward one page
^WSearch for a test string
^LRefresh the screen
^6Mark the beginning position to select text
^KCut selected text (if no text selected, the current line will be cut)
^UPaste the last cut
^RInsert an external file at the current cursor position
^OSave current buffer to a file
^TCheck spelling
^XExit pico, saving buffer

HTML Documents and Tags

HTML documents are divided into two basic sections, the head and the body. The head contains information about the documentation, such as its title, author, and creation and revision dates. The only head element readily visible to a browser is the title, which appears on the title bar. Body elements are responsible for formatting and activating the information on your page.

The only things that change the appearance of text in a browser are HTML tags, so waste no time getting fancy with spaces, tabs, and carriage returns. An HTML tag is simply a pair of codes enclosed in angle brackets; for example <H1> turns on the Heading Level 1 style. After you entered your text, you end the tag with a forward slash, as in: </H1>. Tags can be in lowercase or uppercase, and must stand alone--you cannot put multiple tags in one set of brackets.

HTML has two types of character tags that act to format text--physical and logical. Physical tags act directly on text--changing its appearance to bold, italics, and so on. Logical tags change a document's physical appearance; logical tags are more equipped to track the types of information therein.

TagsDescription
<HTML> </HTML>First tag in an HTML document. It serves to tell the browser that it's found a real HTML file.
<HEAD> </HEAD>This is the first set of tags in a HTML document. It tells the browser that the information should be handled as header information.
<BODY> </BODY>This is where it all begins. The body tag indicates the beginning of your HTML endeavor. The end tag comes at the bottom of the document before the end HTML tag.
<FONT> </FONT>This tag will allow you to set font sizes. Use as FONT SIZE="number" with number ranging from 1-7. You may also prefix the size by a plus or minus sign (e.g. SIZE="+2" or SIZE="-2").
<H1> </H1>Largest heading size in the page--the next largest heading size is achieved by changing the number (e.g., <H2> </H2>...<H6> </H6>)
<P></P>This tag is often seen used without its closing tag. The <P> tag starts a new paragraph by inserting a blank line
<BR>Another unpaired tag and line break. <BR> forces a new line.
<HR>This unpaired tag inserts a ruler line.
<B> </B>This tag boldfaces text
<I> </I>This tag italicizes text
<U> </U>This tag underlines text
<BLOCKQUOTE> </BLOCKQUOTE>This tag indents a segment of text.
<PRE> </PRE>This tag displays ASCII text as formatted.
<CENTER> </CENTER>One of the Netscape extensions to HTML syntax that centers whatever elements lie within.
<OL> </OL>Creates an ordered (or numbered) list with the browser automatically inserting the numbers for each individual item designated with a corresponding LI command.
<UL> </UL>Creates an unordered list with the browser automatically inserting bullets for each individual item designated with a corresponding LI command.
<DL> </DL>Creates a definition list in which a term is indicated with a
command and a definition uses a DD command.
<IMG> </IMG>The IMG tag lets you load inline images. (Remember the more images a document has, the longer it takes to load.) To load a graphic and control its placement, some ancillary commands are required: ALT: indicates text to be displayed if a browser offers no graphics support. SRC: specifies where the image is loaded. ALIGN: specifies how you want the image aligned relative to the surrounding text. ISMAP: tells the browser that it's dealing with a clickable image map.
<A> </A>The "A" stands for anchor, which means "your hyperlink is here." Like the IMG tag, the anchor tag takes a series of arguments: NAME: creates a bookmark in a document. NAME: "#BOOKMARK" jumps to a bookmark. HREF: specifies a link to another document on your server, a different Web site, or Internet resources like FTP and newsgroups.

A Look at Index.html

To view the HTML that generates the page you see in Netscape, type in the following commands.

Changing and Updating Your Web Page

You will need to make a few changes and additions to the index.html file which will change the appearance of your Web page.

The finished document may be viewed on the Getting Started Project Page.

Creating a Colored Background

You can change the background of your page to a solid color by using the BODY BGCOLOR command along with the appropriate hexa-code (BODY BGCOLOR="#rrggbb">. Note rrggbb is from 000000 to FFFFFF, hexa-code, where rr=red, gg=green, and bb=blue. #000000 is hexadecimal version of RGB (Red Green Blue). Several color charts are available on the Developer's Links Page.

For the workshop project, you will need to change the background color to white. Enter the following command after the head tag.

<body bgcolor="#FFFFFF">

Adding an Image

To add the "Welcome" to your page, you will need to enter the following link to the index.html file. You can obtain a welcome image from the Project Images Page. We will replace the Jane Doe's Home Page heading with the welcome image.

<img alt="Welcome" src="welcome.jpg">

Adding an Introduction and an Anchor to a New HTML Page

To add the text for your introduction, type the following boldface text and paragraph tag. Replace the name Jane Doe with your name.

To establish a link to a new HTML document, add the following anchor tags in the proper location. Note that the perinfo.html file does not yet exist.

<a href="perinfo.html"> Jane Doe </a>

Bolding Text

To bold the text of your name, use the following HTML tags:

<b>Jane Doe</b>

Adding Additional Links

To add a couple of new site links to your list of sites, enter the following text, line entry tags, and anchor tags:

<a href="http://www.mtsu.edu/~htmlclas/">
Creating Your Own Home Page </a>
<a href="http://webcrawler.com/">
Webcrawler Web Search </a>

Using the List Tag to Indent

The list tags, UL=unordered list, OL=ordered list, and DL=definition list, help to set text apart from other text by indenting. When followed by LI tags, lines may be preceded with numbers on ordered lists and bullets on unordered lists. If you don't precede lines with the LI tags, list tags may be used for indention.

For the workshop project, we are going to add two more <ul> tags and two closing </ul> tags after the ones that are already in the index.html file. This will further indent our list. Also, we will delete the <li> tags before each link in the list.

Adding Images as List Bullets

Rather than the simple dot bullet created by the <li> tag, we will add an image that coordinates with our Welcome image (see the Project Images Page). The following image tag will be used before each link in our list.

<img src="button.jpg" alt=" ">

Setting the Font Size

To increase the font size of our list of links, we will use the following font tag before the list with the closing font tag </font> entered at the end of the list.

<font size="+1">

Adding Line Breaks and Paragraph Breaks

You will need to add line breaks <br> after each item of our list of links. The paragraph breaks <p> need to be added at the end of the welcome image and each paragaph.

Changing Text and Adding an Anchor with a Mailto:

To complete your document with a closing statement, modify and enter the following boldface text. Remember to replace the youraccount with your account name.

<i> Thanks for visiting my page. Please send questions and comments to youraccount@frank.mtsu.edu.</i>

To create an automatic mail link, enter the following anchor tags replacing youraccount with your account name.

<a href="mailto:youraccount@mtsu.edu"> htmlclas@frank.mtsu.edu </A>

Using Local Editors to Create HTML Files

Any word processor or editor that can save files as ASCII or text only can be used to create HTML documents. You simply type in the text and add the HTML tags.

Better HTML editors exist however. Easy-to-use GUI editors are available commercially or as freeware or shareware. For the workshop's project, we will use AOLpress. The software can be downloaded from www.aolpress.com. An excellent hypertext tutorial can be accessed on the Web as well.

We will start a new page by selecing New Page from the File Menu. The file will contain the following text (you fill in the blanks with your own information.)

Enter the following text in the specified locations.

When I am not out surfing the Web, I spend my free time -----------. I live in ----------------, TN which is about --- miles from Nashville. I enjoy reading --------------. My favorite author is ------- ------------. Of his/her novels, -------------- was my favorite. I try to catch ------------ on tv whenever I get a chance. Whenever I am -----------, I like to listen to -------------- music.

After typing the text with the blanks completed, you will make changes to the document text and background using AOLpress commands. Theses changes will be made.

  1. Change the background color.
  2. Add a title such as "Jane's Interests".
  3. Add a heading in Heading 1 such as "Jane's Interests".
  4. Add an image to be used as a divider line at the top and bottom of the paragraph. For the project use coordinating lines found on the Project Images Page.
  5. Add two anchors to the document.
  6. Saving the file into my documents subdirectory as perinfo.html.

Moving Files and Changing Permissions

 Your new HTML document is now ready to be moved from its location on your hard disk to your account. To move the file, we will use the Windows FTP Client - WS_FTP.

You have now transferred the perinfo.txt file to your account and renamed it as perinfo.html. Before you can access it, you will need to change the permissions on the file.

Copying Images from Web Pages

Images can be copied from any Web page. Typically, if you wish to have an image appear on your Web page, it is better to copy it to your Frank account than to point to its remote location. (Because if someone changes the remote site page or it is temporarily unavailable, you will not be able to view the image.) To copy an image from a Web page while in Netscape:

Searching the Web

The World Wide Web contains pages on many different types of information. In the workshop, you will use a Web search engine to find pages that relate to your interests. Once you find those pages, you will insert anchors to them in your perinfo.html file.

To begin your search:

To put in the link in your perinfo.html file:

[Return to HTML Workshop Home Page]