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.

Example:

<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:

<html>

<head>

</head>

</html>

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.

Content

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

<html>

<head>

<title>Your Name Student Page</title>

</head>

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

</html>

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 google.com 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>.

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

Colors

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

To change color of all text on your page

Step 11. Add the following code after the heading,

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.

<hr>

Inserts a horizontal rule

Sets size (height) of rule

Sets width of rule, in percentage or absolute value

Creates a rule without a shadow

Code example:

<hr>

Inserts a horizontal rule

Sets size (height) of rule

Sets width of rule, in percentage or absolute value

Creates a rule without a shadow

Sets the rule color

This is just a sample of possible colors. A good online reference for color is http://hotwired.lycos.com/webmonkey/reference/color_codes/

Links

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 ….”

<br>

Web sites: <a href=” http://www.lonestar.edu/universitypark.htm”>LSC-University Park</a>

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

Lists

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

<ol>

<li>January

<li>February

<li>March

</ol>

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

Sets the background color, using name or hex value

Sets the text color, using name or hex value

Sets the color of links, using name or hex value

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

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>