CREATING WEB PAGES

USING HTML –

INTRODUCTION

Web Page Creation Using HTML: Introduction

1.	Getting Ready

What Software is Needed FourSteps to Follow

2.	What Will Be On a Page Technical, Content, & Visual Issues

3	Creating the HTML Files Structural Tags

Header Tags Formatting Tags Separator Tags List Tags
Three Types of Lists Link Tags

Two Kinds of Links Two Kinds of URLs

4.	Saving Your HTML File

5.	Testing Your Web File Look at File on the Web Viewing the HTML Source Copying the HTML Source

6	Putting Your File on the Server Creating a Web Directory Uploading Your HTML File

Revised 11/01

2

Getting Ready

WWW, World Wide Web, is a system used to find and access different Internet resources. It uses hypertext to cross-reference or link related resources anywhere on the Internet.

HTML (Hypertext Markup Language) is the language used by the Web to define and display its files. These files can contain text, or multimedia. HTML files are ASCII text files that contain the text to be displayed and the markup tags that tell how to display them.

If you have traveled the Internet and searched the Web, then you may be interested in creating and authoring your own web page.

What Software is Needed

The Internet software you will need for web authoring includes:

♦ Web browser to view a web page, such as Netscape, Internet Explorer, Mosaic, or even a text browser like Lynx.

♦ Text editor to create the HTML file; such as Notepad or WordPad, etc.

♦ FTP (File Transfer Protocol) program to upload a page. There are several available for a Mac or a PC.

♦ Graphics editor to create new graphics. This is optional. If you decide you need one there are several available.

3

What Steps to Follow

Creating a page on the Web can be a simple or complex process. However, the steps are always the same:

♦ Decide what information will be on a page and how that information will be arranged on the page.

♦ Create the HTML file with the text and commands using any editor. ♦ Test the page in various browsers and on various platforms.

♦ Finally, upload the HTML file to the Web server.

What Will Be on a Page

Computer Services has recommendations for departmental and for personal pages. The guidelines can be found in Computer Services Memorandum 85 at: www. ohiou .edu/pagemasters/memo85 . Then choose "Preparing files". There are three types of standards to keep in mind when composing a page. They are:

♦ Technical ♦ Content ♦ Visual

Technical Issues

Technical standards define what links a page should have and what HTML tags every page should have.

Example: Every departmental page should have a link back to the Ohio University home page.

4

Content Issues

Content standards describe what items every page should contain.

Example: Every page should contain, the authors name, E-mail address, and the date of creation.

Visual Issues

Visual standards describe what every page should have for appearances.

Example: It describes the graphics, the format, the layout, and suggested colors for the background.

Creating the HTML File

You can use any word processor to compose this file. We will be using Wordpad during the class.

HTML commands or tags are enclosed in angled brackets: <  >.

Some tags stand alone and some come in pairs. In paired tags the ending tag starts with a slash: /.

The Types of HTML Tags

We will cover six basic types of commands:

♦ Structural tags (mandatory) ♦ Formatting tags (optional) ♦ Separator tags (optional)

♦	Heading tags	(optional)	
♦	List tags	(optional)	
♦	Link tags	(optional)	

5

Structural tags:

These are at the beginning and end of an HTML file.

<HTML>	</HTML>	For an HTML document	
<HEAD>	</HEAD>	For the head section	
<TITLE>	</TITLE>	For the title of the bookmark	
<BODY>	</BODY>	For the body section	

Example:	<TITLE> My Personal Page </TITLE>

Headings:

There are 6 levels of Headings. Level 1 is the largest font size.

<H1>	</H1>	Heading level 1	
<H2>	</H2>	Heading level 2	
<H3>	</H3>	Heading level 3	
<H4>	</H4>	Heading level 4	
<H5>	</H5>	Heading level 5	

Example: <H2> This is My Personal Page </H2>

Formatting tags:

These tags affect the format of the word or sentence.

<I>		</I>	For Italic text	
<B>		</B>	For Bold text	
<U>		</U>	For Underlined text	
<STRONG>	</STRONG>	For Bold text	
Example:	<I> My Personal Page </I>		

6

Separators tags:

These tags separate words, or sentences on a page.

<P>	Start printing a new Paragraph

<BR>	Break; breaks up text onto two lines

<HR>	Make a Horizontal Rule (or line)

Example:	<P> This is the beginning of the second paragraph on my Personal Web page.

Types of Lists:

There are three main types of lists. An Ordered List is a list of numbered items. An Unordered List is a list of unnumbered items. A Definition List is used for definitions of terms, say, in a glossary.

Lists:

<UL>	</UL>	Make an Unordered List	
<OL>	</OL>	Make an Ordered List	
<DL>	</DL>	Make a Definition List	
<LI>		Used for each List Item	

Example Tags:    <OL> Here is a list of my hobbies:

<LI> swimming
<LI> hiking
<LI> fishing

</OL>

Example List:  Here is a list of my hobbies:

1.	swimming

2.	hiking
3.	fishing

7

Links:

Hyperlinks are what the Web is all about. Before you create Hyperlinks, you need to understand URLs.

A URL (Uniform Resource Locator) is a Web address. Just as you can have two forms of E -mail address, a long and a short one, you can have two forms of a URL address.

♦ Absolute URL - This is a complete address. Use this if the link refers to a page or file on another server (computer).

♦ Relative URL - This is a shortened address, without the server name. Use this if the link is to a page or file on the same server (computer).

Example Absolute URL: http://home.netscape.com/training/chapter1.html

Example Relative URL: chapter1.html

Type of Links:

There are two main types of hyperlinks we will cover in this class:

♦ Link from the current document to beginning of another document.

8

♦ Link from the current document to a specific spot (anchor) in another document or in the same document.

Link Tags:

<A>	</A>	Create Link to another document	
HREF =	URL	URL of document to be linked	
text		The text to be clicked, usually in blue	

Example Tag with Absolute URL:

<A HREF=“http://www.ohiou.edu/mainmenu.html”>Menu</A>

Example Tag with Relative URL:

<A HREF="mainmenu.html">Menu</A>

Link Tags to an Anchor Spot

To create a link to a specific spot in a second document, there must be an anchor name in the second document. Then you create a link in the first document that points to the anchor in the second document.

<A>	</A>	Create link to a document	
NAME =	name	Name of the anchor spot	

Example Creating an Anchor Name:

<A NAME=“Start_Place”>Table of Contents</A>

Example Referencing an Anchor:

<A HREF="#Starting_Place”>Go To the Contents</A>

9

Saving Your HTML File:

♦ Go to the File menu and choose Save As

♦ Enter any valid file name, with an extension of .html

The first file in your account should be named: index.html ♦ Specify your HTML Directory

♦ In the “Save as Type” specify “All Files”

Testing Your Web Page:

Test the page under various browsers, including Lynx. Test the page under various platforms and with various screen resolutions. Also remember to test all the links on the page. To test our HTML file using Netscape:

♦ Start Netscape

♦ Go to File and choose Open Page or Open File

♦ Type in the complete address or click Choose File. ♦ After selecting the appropriate file, click Open.

10

Viewing the Source on the Web

The best way to learn is through example. If you see a layout or design that is interesting and want to find out how it was coded in HTML, just follow the steps below. This will show you the source code for the entire page.

Go to the View menu

Choose Page Source or Document Source

Copying the Source:

Now you have found the source code of your favorite page and would like to keep a copy of it on disk. Follow the steps below:

♦ Go to the File menu and choose Save As

♦ Specify any valid file name and file extension of .html ♦ Specify any directory

♦ Specify the Format as HTML File in “Save as Type”.

11

Last But Not Least

Now that you have created and tested your HTML file, you are ready to upload the file to your account on the web server. Put all your HTML files in the same folder or directory on your PC or your MAC before uploading.

Your personal Web pages will be uploaded to your personal OAK account. It is recommended that you name your personal home page: index.html. You must first create a directory in your OAK account for your web files.

Creating a Directory on OAK:

Save your HTML file with an extension of .html. Then log on to OAK. The following steps create the proper OAK directory for you, calleded: public_html You still need to upload the files.

♦ choose - Change your Personal Information ♦ choose - Manage a Personal WWW directory ♦ choose - Create a Personal WWW directory
♦ choose - Enable access to Personal WWW directory ♦ Quit OAK

Uploading an HTML File:

At present, your HTML file can only be seen from your computer. In order for anyone on the Internet to see your file, you will have to upload it to the server where you have a personal account or departmental account. You can upload a file with the software listed below.

On a PC use one of the following programs:

MS-KERMIT, CUTCPIP, WS_FTP

On a MAC use one of the following programs:

VersaTerm, MacKermit, FETCH

12

Uploading a Personal Page:

(From your PC to Oak using WS_FTP)

Select and start WS_FTP

for Host name type:	oak.cats.ohiou.edu
for Userid type:	your Oak userid

for Password type:	your Oak password
Click OK

On the left side:   double click on the proper directory

Select	the proper file
Select:	ASCII
On the right side:  double click on the public_html directory

Click	the Right arrow

Click	Close

Uploading a Personal Page:

(From your MAC to Oak using FETCH)

Select and start FETCH

for Host name type:	oak.cats.ohiou.edu
for Userid type:	your Oak userid
for Password type:	your Oak password

the Directory box:	should be empty

Click OK

In FETCH: click on the Public_Html directory Click Put File
In the next box, enter the File Name to be uploaded In the next box, enter the File Name for Oak
Set "Format" to Text for text files; and BixHex or Raw Data for other files Click OK

The URL of your personal web page:

http://oak.cats.ohiou.edu/~userid/filename

13