Need and html webpage created for the instructions given (only for

HTML Lab Project


To create a simple web page you will need to use a text processor (Notepad) and HTML (hypertext markup language).  Do NOT use Word which can create some problems by automatically formatting your work as a web page.


The tags (items enclosed in < >) from HTML create the special effects that are seen on web pages when using a browser like Internet Explorer.

Note: some tags require a starting and ending tag.  For example: <h1>This is my home page </h1>


Also if multiple tags are used to format a single item, ending tags must be written in reverse order from the starting tags. 


<h1><center> My First Home Page </center></h1>

tag1      tag2                                     endtag2    endtag1


After completing the steps in the tutorial, you should be able to:


1.     Create a Home Page using HTML

2.     Create headings

3.     Place text and graphics in an HTML document

4.     Use attributes such as font color with tags

5.     Create links to other places or documents


Home Pages

The home page of a web site is the starting point that usually describes the purpose of the web site and its categories.  The page typically includes hyperlinks which will take the viewer to other web sites or other places within the same web site.  In planning a home page consider these items

  • Title – this text will appear on the blue title bar of your web page
  • Headings – customarily the first heading is the same as the title; it appears as the first line of your home page.  Each browser displays headings in a unique way, but they allow several levels of headings from H1 to H6.  Heading 1 would be the largest, most noticeable, heading 6 the smallest. In the examples that follow, the first line of each pair shows the HTML tags; the second line is the effect produced.
<h1>H1 headings</h1>

H1 headings

<h2> H2 headings</h2>

H2 headings

<h3>H3 headings</h3>

H3 headings

<h4> H4 headings</h4>
H4 Headings
<h5> H5 headings</h5>
H5 Headings
<h6>H6 headings</h6>
H6 Headings


Content –   Text that explains your home page or special features of the page.

 Create a Sample HTML Page


Step 1.

A.    Open Notepad (Click on Start, Programs, Accessories, Notepad).

B.     Enter the following text:




<title>Your Name Home Page</title>


<h1>Your Name Home Page </h1>



C.     Choose File, Save As.   For the file name, use mysample_Lastname_Firstname.htm in Save As Type, choose All Files, and save to your desktop, or other easy to find location.

(CAUTION: if you neglect to choose All Files, this will be saved as a text file, ending in txt, and will not be available for opening in your browser.

Step 2.

A.    Start your browser (Internet Explorer).  It is not necessary to be online. 

B.     From the menu bar, choose File, Open. 

C.     Browse for the file you just saved on your desktop (mysample_firstname_lastname.htm). 

D.    Choose Open.

E.     You should see only the title bar and a heading on your newly created homepage.

Step 3.

A.    From the menu bar, choose View, then Source. 

B.     A window should appear showing your Notepad file with the HTML coded text.  You can edit your text for the next steps in this window.  Just remember to save the Notepad file each time you make changes.

C.     Use the Refresh button in your browser to see the changes on your web page.


Additional Headings

For your sample page, you’ll create headings for: My Favorites, Headline News, Quote of the Day


Step 4.   

A.    On the line following </h1>, enter the following

<h2> My Favorites </h2>

<h2> Headline News </h2>

<h2> Quote of the Day </h2>

Step 5.

A.    Choose File, Save. 

B.     On the browser file menu, choose Refresh.

            You should see the three level-2 headings which you added in Step 1.




To leave blank lines around a paragraph of text, use the tags      <p> </p>

To start a new line without adding blank lines, use  <br> (Note: no ending tag is needed for a line break)

To identify the body of your text enclose it in the tags <body> </body>


Tags which may be used to enhance your text:

 <b>  </b>                    bold

<center> </center>       centers text

<u> </u>                        underline

<marquee> </marquee>  moves text across the screen


Step 6.

A.    Add the tags shown below in your source file (shaded areas).

B.     Add the <center> tags around your heading.

C.     Add the content after the headings. (Edit your current lines to match what is below.)



<title>Your Name Student Page</title>


<h1><center>Your Name Student Page </center></h1>

<h2> My Favorites </h2>

Food: pizza <br>

Sport: football <br>

Color: blue <br>

Movie: Fellowship of the Ring

<h2> Headline News </h2>

I have a new __________

<h2> Quote of the Day </h2>

Minds are like parachutes; they function only when open.



Step 7.             Save the source file.

Step 8.             Refresh the browser.


Inserting images

To insert a graphic file, it should be one of two formats: either a .gif or .jpg file. 

Gif files may also be animated.  These graphic files look more like drawings or cartoons.

Jpg files are photographs, like the ones taken by digital cameras. 

The simplest way to use graphics is to store them all in the same folder as your Notepad source file.


I suggest you use and then select Images from the Upper left links.


The tags for inserting an image are <img src=”filename” >.  Substitute the name (including the extension: either gif or jpg) of the file you select for “filename”.


Step 9.    Add the following text after the line ending with </h1>.

       <p> <center> <img src= “filename.gif”> </center> </p>


Step 10.   Save your source file.  Refresh the browser.



Colors can add (or detract) from your web page.  Avoid background colors like red or orange which are not easy on the eyes.  Also beware of blue backgrounds which can make link text (also in blue by default) invisible. 

Colors are referred to by code or by name, combining letters and numbers as follows

Green               #00FF00

Red                  #FF0000

Tan                  #DEB887

Turquoise         #19CCDF

Magenta           #FF00FF

Yellow             #FFFF00

Blue                 #0000FF


To change the background color of your web page

            <body bgcolor=colorcode >

To change color of all text on your page

     <body text=colorcode >


Step 11.   Add the following code after the heading,

                        <body bgcolor=#19ccdf   text=#0000ff >

                 Add </body> before the last line </html>.

Step 12.   Save your source file.  View it with the browser.


Horizontal Rule

Horizontal lines are used to off set or segment text on your web page.   They can be either a default grey color or you can specify a color.



Inserts a horizontal rule

<hr size=?>

Sets size (height) of rule

<hr width=?>

Sets width of rule, in percentage or absolute value

<hr noshade>

Creates a rule without a shadow


Code example:


Inserts a horizontal rule

<hr color=#000fff size=50>

Sets size (height) of rule

<hr color=#000fff width=25%>

Sets width of rule, in percentage or absolute value

<hr color=#000fff noshade>

Creates a rule without a shadow

<hr color=#000fff>

Sets the rule color

This is just a sample of possible colors.  A good online reference for color is



Hyperlinks allow the viewer to move to other places in your document or on the web quickly.

To create a hyperlink (or link), enclose the URL of the web page in <a href=”URL”> name of link </a>

            (Note: include all characters of the URL, including http://)


Step 13. Add the following after the text “Minds are like a ….”


Web sites: <a href=””>LSC-University Park</a>

Step 14.    Save your source file.  Refresh the browser.



You can add bulleted lists or numbered lists to your web page with the following tags:






Or for bulleted lists use <ul> and </ul> at the start and end of the list items.


Reference   HTML Cheatsheet


Basic Tags


Creates an HTML document


Sets off the title and other information that isn’t displayed on the Web page itself


Sets off the visible portion of the document

Header Tags


Puts the name of the document in the title bar 

Body Attributes

<body bgcolor=?>

Sets the background color, using name or hex value

<body text=?>

Sets the text color, using name or hex value

<body link=?>

Sets the color of links, using name or hex value

<body vlink=?>

Sets the color of followed links, using name or hex value

<body alink=?>

Sets the color of links on click

<h1><center>Khavansky M. JOhnson Home Page</center></h1><hr><p><center><img src = peacock.gif></center></p>

Place this order or similar order and get an amazing discount. USE Discount code “GET20” for 20% discount