The purpose of this tutorial is to give you a basic, hands-on exercise in creating a simple web page. This will give you an exposure to a wide variety of commands.
You first need to open up some type of text editor, such as NOTEPAD. After you hav entered your editor, make sure word wrap is turned on. In Notepad, it can be found in the Edit Menu.
Lesson #1: Creating and Viewing a Web Page
Enter the HTML code in the exact form as you see printed below:
<html>
<head>
<title>My Computer Company</title>
</head>
<body>
<h1>My Computer Company</h1>
<p>My Computer Company, located in Manhattan, Kansas, specializes in software sales and support. In addition, training sessions are available for various software packages, including Microsoft Excel and WordPerfect. For more information, please call 1-800-555-1845 or e-mail to info@mycomputer.com.</p>
<p>My Computer Company also has an ongoing partnership in the Software Engineering field at several universities around the country. Through our John E. Smith Fellowship program, researchers at both the graduate student and faculty/research associate levels can compete for grants of up to $150,000 to be used toward advances in Software Engineering. For more information regarding the Smith Fellowship program, please call 1-800-555-1845 or send e-mail to smithfellow@mycomputer.com.</p>
</body>
</html>
To save your HTMl file
1. Select File, Choose the Save Option
2. Select Drives and change the drive to A
3. Double click in the File name text box and save the file as computer.htm
4. Click Ok
To view the results of your work, open up Netscape. Select the File Menu. Select the Open File in Browser option. Switch to A drive and you should be able to see the file you just created displayed. Select the Open option and you should be able to see the results of your work. When you are done viewing your page, minimize Netscape and return to your document in Notepad.
Lesson #2: Adding Lists to your Web Page
We will next add hard returns and an unordered list to your page.
Place your cursor after the </p> in the second paragraph and add the HTML commands that are indicated in bold.
<html>
<head>
<title>My Computer Company</title>
</head>
<body>
<h1>My Computer Company</h1>
<p>My Computer Company, located in Manhattan, Kansas, specializes in software sales and support. In addition, training sessions are available for various software packages, including Microsoft Excel and WordPerfect. For more information, please call 1-800-555-1845 or e-mail to info@mycomputer.com.</p>
<p>My Computer Company also has an ongoing partnership in the Software Engineering field at several universities around the country. Through our John E. Smith Fellowship program, researchers at both the graduate student and faculty/research associate levels can compete for grants of up to $150,000 to be used toward advances in Software Engineering. For more information regarding the Smith Fellowship program, please call 1-800-555-1845 or send e-mail to smithfellow@mycomputer.com.</p>
<hr>
<h2>My Computer's Manhattan Staff</h2>
<ul>
<li>Jane Smith
<li>John Davis
<li>Hugh Porter
<li>Hillary Lambert
<li>Your Name
</ul>
<hr>
<h2>Current Participants in the John E. Smith Fellowship Program</h2>
<ul>
<li>University of Maryland at College Park
<li>Carnegie Mellon University
<li>MIT
<li>Kansas State University
</ul>
<hr>
</body>
</html>
Save your work once again. Return to Netscape. This time, click the RELOAD button to see the results of your work. When finished viewing, minimize Netscape and return to your document in Notepad.
Lesson #3: Adding Links to your Web Page
Links to your web page can be in the form of a local file, a URL at a remote location, or a mailto reference that will allow someone to e-mail you directly from your web page.
Add the html codes indicated in bold.
<html>
<head>
<title>My Computer Company</title>
</head>
<body>
<h1>My Computer Company</h1>
<p>My Computer Company, located in Manhattan, Kansas, specializes in software sales and support. In addition, training sessions are available for various software packages, including <a href="http://www.microsoft.com">Microsoft </a>Excel and <a href="http://www.wordperfect.com">WordPerfect.</a> For more information, please call 1-800-555-1845 or e-mail to <a href="mailto:info@mycomputer.com">info@mycomputer.com.</a></p >
<p>My Computer Company also has an ongoing partnership in the Software Engineering field at several universities around the country. Through our <a href="fellow.htm">John E. Smith Fellowship </a >program, researchers at both the graduate student and faculty/research associate levels can compete for grants of up to $150,000 to be used toward advances in Software Engineering. For more information regarding the Smith Fellowship program, please call 1-800-555-1845 or send e-mail to <a href="mailto:smithfellow@mycomputer.com">smithfellow@mycomputer.com.</a ></p>
<hr>
<h2>My Computer's Manhattan Staff</h2>
<ul>
<li>Jane Smith
<li>John Davis
<li>Hugh Porter
<li>Hillary Lambert
<li>Your Name
</ul>
<hr>
<h2>Current Participants in the John E. Smith Fellowship Program</h2>
<ul>
<li><a href="http://www.umcp.umd.edu">University of Maryland at College Park</a>
<li>Carnegie Mellon University
<li>MIT
<li><a href="http://www.ksu.edu">Kansas State University</a>
</ul>
<hr>
Please send comments to <a href="mailto:webmaster@mycomputer.com">webmaster@mycomputer.com</a>
</body>
</html>
Save your work once again. Return to Netscape. Click the RELOAD button to see the results of your work. When finished viewing, minimize Netscape and return to your document in Notepad.
Lesson #4: Download a Background
One of the easiest ways to add a background color to your web page is to download it from an existing web page. YOU MUST BE CAREFUL NOT TO DOWNLOAD ANYTHING THAT IS ON A PAGE WITH A COPYRIGHT MARK. THERE ARE SEVERAL WEB PAGES OUT THERE THAT HAVE FREE BACKGROUNDS AND IMAGES FOR YOU TO DOWNLOAD.
REMEMBER, OBSERVE ALL COPYRIGHT LAWS.
Get on Netscape and go to the Internet. Goto the Managment 366 Home Page:
http://www.ksu.edu/courses/fall1997/MANGT/MANGT366A/
You will see that the background color on this page is purple. The color is actually being retrieved from a file. We will now download this file and place it on your disk.
1. Click your right mouse button.
2. Select the Save Background As option
3. Specify the name that you want to save the file as and also specify to save to A drive.
4. Use the name purple.jpg
We also want to download an image. You also download images the same way, by pointing to the picture, right clicking with your mouse, and choosing save image as. One of the best places to get free images to download is a site called "Welcome to the Graphic Station". We will download an image from this site.
http://www.geocities.com/SiliconValley/6603/icon12.htm
Download the gas can or any other image that you want to your disk. Save the file as gas.gif
When finished, return to Notepad.
REMEMBER TO OBSERVE ALL COPYRIGHT LAWS. DO NOT DOWNLOAD AND USE COPYRIGHTED MATERIAL.
Lesson #5: Adding a Background Color and bold to your Page.
Add the html codes indicated in bold.
<html>
<head>
<title>My Computer Company</title>
</head>
<body background="purple.jpg">
<h1><center>My Computer Company</h1></center>
<p><b>My Computer Company</b>, located in Manhattan, Kansas, specializes in software sales and support. In addition, training sessions are available for various software packages, including <a href="http://www.microsoft.com">Microsoft </a>Excel and <a href="http://www.wordperfect.com">WordPerfect.</a> For more information, please call 1-800-555-1845 or e-mail to <a href="mailto:info@mycomputer.com">info@mycomputer.com.</a></p>
<p><b>My Computer Company</b> also has an ongoing partnership in the Software Engineering field at several universities around the country. Through our <a href="fellow.htm">John E. Smith Fellowship program, researchers at both the graduate student and faculty/research associate levels can compete for grants of up to $150,000 to be used toward advances in Software Engineering. For more information regarding the Smith Fellowship program, please call 1-800-555-1845 or send e-mail to <a href="mailto:smithfellow@mycomputer.com">smithfellow@mycomputer.com.</a></ p>
<hr>
<h2>My Computer's Manhattan Staff</h2>
<ul>
<li>Jane Smith
<li>John Davis
<li>Hugh Porter
<li>Hillary Lambert
<li>Your Name
</ul>
<hr>
<h2>Current Participants in the John E. Smith Fellowship Program</h2>
<ul>
<li><a href="http://www.umcp.umd.edu">University of Maryland at College Park</a>
<li>Carnegie Mellon University
<li>MIT
<li><a href="http://www.ksu.edu">Kansas State University</a>
</ul>
<hr>
<img src="gas.gif">Please send comments to <a href="mailto:webmaster@mycomputer.com">webmaster@mycomputer.com</a>
<hr>
<center>Copyright © 1997 My Computer Company, Inc. All Rights Reserved</center>
</body>
</html>
Save your work once again. Return to Netscape. Click the RELOAD button to see the results of your work. When finished viewing, minimize Netscape and return to your document in Notepad.
Lesson #6: Creating an Employee Homepage
We will next create an employee homepage. First, close out your document in Notepad and open a new Notepad document. Make sure word wrap is turned on. Enter the HTML code in the exact form as you see printed below:
<html>
<head>
<title>Your Name - My Computer Company</title>
</head>
<body><center><h1>Your Name</h1>
<h2>Sales Manager, My Computer Company</h2></center>
<hr>
<p>I am a regional sales manager for <b>My Computer Company.</b> My territory includes Philadelphia, Baltimore, Washington D.C., and Richmond. If you reside in one of these areas and would be interested in one of our software purchase and support plans or one of our training programs, please contact me at 1-800-555-1845 ext 311 or e-mail me at <a href="mailto:youremail@mycomputer.com">youremail@mycomputer.com</a>.</p>
<h2>Some Interesting Sites</h2>
<ul>
<li><a href="http://www.whitehouse.gov">The White House</a>
<li><a href="http:// winnie.acsu.buffalo.edu/potatoe">Mr. Potatoe Head</a>
<li><a href="http://www.si.sgi.com/sgistart.htm">The Smithsonian</a>
</ul>
<hr>
<center><a href="computer.htm">Return to My Computer Company, Inc. Home Page</a></center>
<center>Copyright © 1997 My Computer Company, Inc. All Rights Reserved</center>
</body>
</html>
To save your HTMl file
1. Select File, Choose the Save Option
2. Select Drives and change the drive to A
3. Double click in the File name text box and save the file as employee.htm
4. Click Ok
To view the results of your work, open up Netscape. Select the File Menu. Select the Open File in Browser option. Switch to A drive and you should be able to see the file you just created displayed. Select the Open option and you should be able to see the results of your work. Test the Return to Home Page hypertext to make sure that it works.
Lesson #7: Creating a Table
We will next create a table for our employee homepage. Our table will be centered in the middle of our page and it will have a black border.
Minimize Netscape and reopen your document in Notepad. Enter the HTML code indicated in bold.
<html>
<head>
<title>Your Name - My Computer Company</title>
</head>
<body><center><h1>Your Name</h1>
<h2>Sales Manager, My Computer Company</h2></center>
<hr>
<p>I am a regional sales manager for <b>My Computer Company.</b> My territory includes Philadelphia, Baltimore, Washington D.C., and Richmond. If you reside in one of these areas and would be interested in one of our software purchase and support plans or one of our training programs, please contact me at 1-800-555-1845 ext 311 or e-mail me at <a href="mailto:youremail@mycomputer.com">youremail@mycomputer.com</a>.</p&g t;
<h2>Some Interesting Sites</h2>
<ul>
<li><a href="http://www.whitehouse.gov">The White House</a>
<li><a href="http:// winnie.acsu.buffalo.edu/potatoe">Mr. Potatoe Head</a>
<li><a href="http://www.si.sgi.com/sgistart.htm">The Smithsonian</a>
</ul>
<hr>
<center><Table Border Bordercolor "#000000>
<caption><b>Selected Big 12 Conference Schools</b></caption>
<tr><td>Iowa State</td><td>Ames, IA</td></tr>
<tr><td>Baylor</td><td>Waco, TX </td></tr>
<tr><td>Colorado</td><td>Boulder, CO</td></tr>
<tr><td>Kansas</td><td>Lawrence, KS</td></tr>
<tr><td>Kansas State</td><td>Manhattan, KS</td></tr>
<tr><td>Nebraska</td><td>Lincoln, NE</td></tr>
</Table>
<hr>
<center><a href="computer.htm">Return to My Computer Company, Inc. Home Page</a></center>
<center>Copyright © 1997 My Computer Company, Inc. All Rights Reserved</center>
</body>
</html>
Save your work once again. Return to Netscape. Click the RELOAD button to see the results of your work.
This completes the HTML Web Page Tutorial. The only thing that is left is for you to create your own home page and publish it on the Intranet.
