Ports and Input Devices

To be filed under

WEB DEVELOPMENT

WEB Lesson Four

·  In this lesson, you will learn:

1.  How to create an ordered and unordered list on your web page.

2.  How to link to other web pages and create a web site that contains multiple pages.

Creating Lists

HTML provides the capability to create both ordered (or numbered) and unordered (or unnumbered) lists.

Example of an unordered list

The following tags are used to create these types of lists:

Opening Tag

Closing tag

Purpose

TRY IT

1.  Open your Booksellers.htm file for editing.

2.  Enter the following code after the last line of text in the BODY:

<OL>

<LI> Dave Barry</LI>

<LI> Stephen King</LI>

<LI> Dr. Seuss</LI>

</OL>

3.  Save and check your changes in the browser.

4.  Now change the <OL> and </OL> tags to <UL> and </UL>. Save and check your changes in the browser. The ordered list should change to an unordered list.

Creating Local and Remote Links

One of the most powerful features of HTML is that of linking to other web pages.

Ø  Remote Link = linking to another person’s web page on the Web.

Ø  Local Link = linking to another web page you created.

When you create multiple pages and place links between them, you are evolving your web page into a web site. There is one HTML tag that allows you to create both local and remote links:

Opening Tag

Closing tag

Purpose

Remote Link Example:

The code below will create a remote link to Amazon’s web site. You MUST use the http:// in the link.

<A HREF=”http://www.amazon.com”> Click here for Amazon </A>

Local Link Example:

Assume you create a second web page for your personal site and you name it MyHobbies.htm. You could link to this new page from your original page (or home page) by using the following code…

<A HREF=”MyHobbies.htm”> Check out my hobbies </A>

TRY IT

1.  Open Booksellers.htm for editing and add the following line of code to the BODY after the ordered list:

<A HREF=”http://www.amazon.com”>Amazon’s Online Store</A>

2.  Check your changes in the browser and click on the link to ensure it works correctly.

3.  Create a new HTML file named Directions.htm and save it in your Booksellers folder (if you need to, reference Lesson 1 for the basic tags to get started.) Add the following code in the BODY of Directions.htm:

We are located on I-35 South, next to the Super Wal-Mart in Round Rock.

<P>

<A HREF=”Booksellers.htm”> Back to the Home Page </A>

4.  Switch back to editing Booksellers.htm and add the following code below the Amazon link:

<P>

<A HREF=”Directions.htm”> Directions to our Store </A>

5.  SAVE YOUR CHANGES TO BOTH FILES and open the Booksellers page in the browser. Test out the links. You should be able to link back and forth between the Booksellers page and the Directions page you just created.

CHECK FOR UNDERSTANDING EXERCISE # 4

Ø  Continue working on your Personal web page that you started in Lesson One.

Ø  Add the following elements to your web page:

1.  An ordered list.

2.  An unordered list.

3.  Three remote links.

4.  Local links to three new web pages that you create.

a.  Think about how you will navigate your multi-page web site now. You will want to add local links to allow you to get to and from each page in the site. This means you will most likely end up with 3 local links ON EACH page in your web site. You can use ordered list to make a navigation bar.

b.  Remember, this is your personal web site, so feel free to add whatever content you would like to the new pages, but please keep the content appropriate for school.

3