Scribd Logo
Upload

Welcome to Scribd!

  • 54 views

    E Book HTML Tutorial

    Uploaded by

    naveenmsn2
    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    E Book HTML Tutorial

    Uploaded by

    naveenmsn2
    54 views8 pages
    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.

    Original Description:

    Original Title

    e Book HTML Tutorial

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as doc, pdf, or txt
    54 views8 pages

    E Book HTML Tutorial

    Uploaded by

    naveenmsn2
    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as doc, pdf, or txt
    of 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 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 &#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: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 &#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: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 &#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