Scribd
Upload
93 views

E Book HTML Tutorial

This tutorial is to give you a basic, hands-on exercise in creating a simple web page. You first need to open up some type of text editor, such as NOTEPAD. Make sure word wrap is turned on in notepad, it can be found in the Edit Menu.

Uploaded by

naveenmsn2
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
93 views

E Book HTML Tutorial

This tutorial is to give you a basic, hands-on exercise in creating a simple web page. You first need to open up some type of text editor, such as NOTEPAD. Make sure word wrap is turned on in notepad, it can be found in the Edit Menu.

Uploaded by

naveenmsn2
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 8

HTML Tutorial

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 [email protected].</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 [email protected].</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 [email protected].</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 [email protected].</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:[email protected]">[email protected].</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:[email protected]">[email protected].</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:[email protected]">[email protected]</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:[email protected]">[email protected].</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:[email protected]">[email protected].</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:[email protected]">[email protected]</a>
<hr>
<center>Copyright &#169 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:[email protected]">[email protected]</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 &#169 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:[email protected]">[email protected]</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 &#169 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. Good luck!!!

You might also like