basic web page creation tutorial

How Web Pages Work - a little history
Web pages are very simple in concept. They are merely text based documents that when viewed by a particular type of program, interpret the text as graphics and motion. In the beginning, of the WWW revolution the only use for the Internet was to transfer documents and run programs “long distance”. There were no “web pages” as we know them today.
Around the time the general public became interested in the Internet, a company called Netscape developed a “viewer” that could interpret certain types of documents written in a special code called hyper text markup language or HTML. Hypertext was being used widely in help files so this was not a new concept. It was not however widely used in any other application. Thus the birth of the WWW as we know it.
You actually don’t need a fancy program to create web page. In fact you cannot use a standard word processor, unless it supports HTML, because it inserts special codes exclusive to it. You can however use Notepad, which is a text processor that comes with Windows.

Viewers and their effect on your web page
There are two major players in the viewer market, Netscape and Microsoft. We will not discuss here which is better. We will let others “duke it out” and not spend time on a no win situation.
It is important to note that the viewers interpret HTML a little differently and you need to be sensitive to that point. The best way to test the effect of the browsers is to use them on your web page as you create it. This does not mean you have to put your page on the Internet but you should open the page from wherever it is stored on the hard drive. Notice on the viewer menu that you have a file command. If you click on File, Open, you will get the dialog at right and be allowed to browse through your computer for the web page.

HTML Basics:
Basic code and why you need to know it.
Tags
Tags are HTML codes or “commands”. These tags are surrounded by brackets in the shape of greater than and less than symbols, <code>. Some tags are required such as the tags that start and end the web page. The required tags are <HTML>, <HEAD>, <TITLE>, and <BODY>. Additionally these tags must have a related closing tag that begins with a backslash such as </HTML> which incidentally should end every web page. Using the above rules, you could create a crude web page typed as follows:

<HTML>
<head>
<title>my web page</title>
</head>
<body>
The rain in Spain falls mainly on the plain
</body>
</html>

The resulting web page will appear as shown here: As you see the only thing that shows is the text between the tags marked <BODY></BODY>. Note that the text between the TITLE tags shows on the title bar at the top of the application window. Paragraph and line breaks Web viewers are not very smart when it comes to has been placement on the page. If you add spaces or returns to a paragraph of text, the viewer will simply bunch the text together as seen in the next example:

<HTML>
<HEAD>
<TITLE>THE CAYMAN ISLANDS</TITLE>
</HEAD>
<BODY>
Do you want to see sharks, barracuda, and huge stingrays? Do you want to see gentle angels too?

The Cayman Islands were discovered by Christopher Columbus in late 1503 and are located just south of Cuba. The Caymans are the home to about 125,000 year-around residents. However, they welcome approximately 200,000 visitors each year. Each year more and more visitors arrive. Most visitors come with colorful masks and flippers in their luggage ready to go scuba diving.

To cause a line to be inserted between text paragraphs, you must tell the viewer exactly what you want. There are two methods to accomplish this. You can use a <BR> to cause a hard return or line break, or you can insert a <P> which causes a paragraph break. Each of these has similar effects except the <P> inserts an extra line between paragraphs. Another interesting effect is created by the <HR> tag which inserts a horizontal line at the tag point.

Below is a sample of the same document as above including a horizontal line. Note that none of the tags, <HR> <BR> or <P>, require a closing </code> tag.

<HTML>
<head>
<title>The Cayman Islands</title>
</head>
<body>
Do you want to see sharks, barracuda, and huge stingrays? Do you want to see gentle angels too?
<HR>

Exercise 1

Open the text file instructed and format it as a web page using notepad in Windows

Click Start, Programs, Accessories, Notepad
Click File, Open
Open the folder named text documents
Ask the instructor for the name of the document to open.
Add the proper tags to format the document and save it as web page 1.html
It is important to add the extension html or the viewer will not know what to make of it.
Open your favorite browser
Click File, Open
Choose Browse and look for the text file you saved.

Headings

There are three basic heading codes to help differentiate text size and boldness. These are <H1>, <H2>, and <H3>. Theoretically you could use <H4>, <H5> and <H6> but the differences are insignificant. These tags require a closing tag such as </H1>.

Exercise 2

Open the previously saved text file in notepad and add text as titles as follows:
The first title at the top should read “This is my first web page” and should be the largest type text possible.
Before the second paragraph, type “This is the second paragraph of my web page” and use the second largest type available.
Save the file as web page 2.html.
View the web page with your favorite browser and notice the page does not change automatically. You must press the refresh button to see the update.

Using a viewer to see other peoples code

You can see the code used on any web page by simply opening the page and clicking View, Source. This will open the web page in Notepad and show all the code associated with that page. So if you want to see how somebody created a certain effect simply look at the page and view the source.

Linking To other sites

Linking web pages together is the process where you specify a destination using text on the page. This is accomplished by using the <A HREF=http://destination address>Click here to go to destination address</A> The resulting link would say click here to go to destination address in blue.

The <A> stands for anchor and the HREF stands for Hypertext Reference and is called an attribute of the <A> tag. Please note that the reference must be very specific. In other words you must include http: or www in the address of the destination or your link may not work.

Linking To other pages

You can also use relative paths to files on the same server or hard drive. If the link you are going to exists in the same directory as the file you are in, you can simply avoid any long addresses and insert the name of the document you wish to view. All you need is the filename as shown in the following example. To specify a page named “resume.html” in the same folder all you need is the following reference:

Relative addressing

If the pages you are linking do not reside in the same folder but are on the same hard drive but in a different folder, you can specify their location without the absolute (http://www.etc.) address. For example, suppose you are creating a page for your company called mycompany.html in a directory called companyfiles on your hard drive. You want to include a link to a page called jimsmith.html which is in a subfolder named resumes within companyfiles. The link would look like this:

The double dot (..) is a special code which means “the folder containing the current folder.” This has the effect of moving up one level in the directory structure. Also note that if you are accustomed to using the backslash (\) as in DOS to navigate between directories, you will have to fight the urge since the WWW uses the forward slash (/) instead.

To use this structure effectively you must understand the organizational structure of the computer.

<HTML>
<head>
<title>The Cayman Islands</title>
</head>
<body>
Do you want to see sharks, barracuda, and huge stingrays? Do you want to see gentle angels too?
<HR>
The Cayman Islands were discovered by Christopher Columbus in late 1503 and are located just south of Cuba. The Caymans are the home to about 125,000 year-around residents. However, they welcome approximately 200,000 visitors each year. Each year more and more visitors arrive. Most visitors come with colorful masks and flippers in their luggage ready to go scuba diving.

It is important to note here that viewers open the page called index.htm or index.html. So if you wish to view the main page of a website, you do not need to specify a file name in the link.

Some other useful tags for formatting and arranging text.

Bold text	<B>text</B> or <STRONG>text</STRONG>
Italics	<I>text</I> or <EM>text</EM>
Small text	<SMALL>text</SMALL>
Big text	<BIG>text</BIG>
Superscript	<SUPER>text</SUPER>
Subscript	<SUB>text</SUB>
Underline	<U>text</U>
Preserve spaces and formatting	<PRE>text</PRE>
Divides text in sections. Use with the ALIGN=”left/right/center” attribute. Note <CENTER> tag is obsolete.	<DIV>text</DIV>

Font size and color can also be controlled. The tag that follows uses the <FONT> tag and sets the font SIZE to 5. The font size range is from 1 (tiny) to 7 with 3 being the default size. Available COLOR attributes are black, white, green, blue, yellow, aqua, fuchsia, gray, lime, maroon, purple, navy, olive, silver, and teal.

Typeface can also be controlled through the FACE attribute. There is one catch however. The font face used must be on the users system and must be spelled correctly or the user will see the default Times New Roman font!

The <PRE> tag is used when you want to prevent the viewer or browser from taking control of how the user sees the text. It stands for "preformatted" text. Note the example that follows:

<HTML>
<head>
<title>The Cayman Islands</title>
</head>
<body>
<PRE>D   o you want to see sharks,
     barracuda,
     and huge stingrays?
       D      o you want to see gentle angels too?</PRE>
<HR>

Below is the result of the preceding text. The only problem with this tag is you are limited to a specific font.

Lists

Exercise 3

Create a web page using text supplied and format to appear as follows:

The following San Francisco hotels have agreed to offer special discounted rates to all attendees of Computer Expo:

• Fairmont Hotel

• Grand Hyatt

• Holiday Inn: Civic Center

• Hyatt Regency

• King George Hotel

• Mark Hopkins

• Nikko

• Villa Florence

• Westin St. Francis

To register, please follow the following steps:

1. Call the desired hotel

2. Tell them you want to register

3. Give them all your money

My favorite Hotels and why

Best Pool

Grand Hyatt

Best Food

Farmont Hotel

Best Rooms

Villa Florence

Organizing Files and Folders

This section shows you some basic procedures for organizing files and folders on your computer so that they are easier to work with. The following procedures use Windows 95 Explorer, but you can also use My Computer to do these tasks.

1. Double-click Windows 95 Explorer, and then click the drive or folder in which you want to place the new folder.

To move or copy XE "copy:files and folders" a file or folder

1. Start the Explorer, Find the file or folder you want to move or copy, and then click it once.

2. Click Edit. To move the file, click Cut. To make a copy of the file, click Copy.

3. Open the folder where you want to place the file, click Edit, and then click Paste

1. Start the Explorer, Find the file or folder you want to delete, and then click it.

1. Start the Explorer, Find the file or folder you want to copy, and then click it.

2. On the File menu, point to Send To, and then click the drive where you want to copy the file or folder.

Using Drag and Drop XE "Drag and Drop" to Move Information

Sometimes the quickest way to move and copy information is to drag it from one place to another by using your mouse. You can move or copy files and folders to another folder or disk drive.

1. In Explorer, open the folder that contains the file or folder you want to move or copy.

2. Press down the right mouse button and keep the button pressed down as you drag the icon to the folder where you want to move or copy it. Then release the mouse button.

Note: You can move or copy using the left mouse button by following the following rules:

To move, simply right-click & hold on the file you wish to move, drag to the new location and release the mouse button to drop.

To copy, hold down the Ctrl key before you right click, drag to the location you wish to copy the file and release the mouse button

Email Links

At some time you will probably seek feedback from your viewers or you may want to give them a specific person to contact in the event of questions. To incorporate email links the tag used is as follows:

Links within the same page

The efficiency and speed of your website are important. A technique to increase the speed of the site is to create a larger single web page with links within. There is of course a cost associated with this technique. The page will take longer to load at the onset (when they first bring up the page).

To create links within the same page, you must name the location you wish to jump to as follows:

You can also put a named tag at the top of your page to give users the ability to go back to the main section with the links. This will make the page faster because it only has to load once! You can also link to specific named tags on other web pages such as the following example:

Graphics management

By now you are probably wondering how to include graphics in your pages. What makes this topic so interesting is that graphic images do not reside within the web page itself. The images are simply referenced as seen in this example:

The idea is to add text after the reference in case the user has either turned off the graphics on the browser or cannot view graphics for whatever reason. This is what the ALT attribute accomplishes. The image must be in the same directory as the web page or you must use an absolute reference to the image (http://www.domain.com/directory/image.jpg).

You can also use an image as a link to other web pages rather than using text. The following example uses a graphic image as a link to another web page:

Controlling Images

Images are the main contributor to speed. The lower the resolution of the graphic, the faster the load time. Of course the whole idea of the Internet is to display graphics and text together so you must strike a balance.

Once you have selected the images you will use in your web page, remember to put them in the same directory or folder as the main page. If you don’t put the graphics in the same folder, make sure the link refers to the correct path.

Shopping for a graphics program

Using Paint Shop Pro

Graphics Basics

Exercise 4

Create a web page from the text file supplied. The page must load as quickly as possible and contain at least two graphic images. Be sure to include alternate text in the event the user does not have an up to date browser.

The paragraphs must be referred to within the same page as links so the user can navigate through the page. Save the entire web page to your floppy and name it as you would if you were putting this page on a web server.

Include your email address for any questions. If you do not have an email address, make one up.