module5 html - list and link tags answercms.dt.uh.edu/faculty/ongards/cs1305/labs/module5... ·...

Unit 2: Web Technologies, pages 1 of 7

<html>

<head>

<title>List Webpage</title>

</head>

<body background=exampleBG.jpg>

<h3><font color=blue>Stir-fried Spicy Shrimps</font></h3>

<h4>Ingredients:</h4>

<ul>

<li>Ten medium to large fresh peeled shrimps</li>

<li>One half cup of sliced white onion</li>

<li>Two or three jalapenos</li>

<li>One half cup of okra cut in half</li>

<li>Two cloves of chopped garlic</li>

<li>One half cup of sliced fresh mushroom</li>

<li>Two table spoons of cooking oil</li>

<li>One quarter cup of water</li>

<li>One half teaspoon of salt</li>

<li>One half teaspoon of ground black pepper</li>

</ul>

<h4>Direction:</h4>

<ol>

<li>Heat cooking oil in a pan with medium high heat.</li>

<li>Stir fry garlic and white onion together till garlic turns light brown.</li>

<li>Add okra and stir till almost soft.</li>

<li>Add shrimp, mushroom and jalapenos then stir them together.</li>

<li>Sprinkle salt and black pepper. Then add water and stir all ingredients back

and forth. Once the shrimps turn pink, it is ready to be served.</li>

</ol>

</body>

</html>

Department of Computer and

Mathematical Sciences

CS 1305 Intro to Computer

Technology 5

Module 5: HTML -- List and Hyperlink Tags Objectives:

− Learn how to use HTML tags to create lists in webpage.

− Learn how to use HTML tags to create internal and external hyperlinks in webpage.

Task 1: Creating lists with HTML Code

There are two types of list used in HTML code:

1. A numbered or ordered list: A numbered or ordered list is a list in which items labeled

with numbers in increasing order. The numbered list tags are <ol> </ol>.

2. An un-numbered or un-ordered list: An un-numbered or un-ordered list is a list in which

items are not labeled with numbers. The un-numbered list tags are <ul> </ul>.

Each item is enclosed in the list tags <li> </li> no matters an ordered list or un-ordered list

is being used.

Activity 1.1: Create a new webpage by opening Notepad editor from All Programs file menu.

Save this file under the name

ListPage.html on your

USB/flash drive. Don’t

forget to change the file type

in Save as type box to All

files. The title of Notepad

window will change to

ListPage – Notepad after the

file is saved. Then type

HTML code shown in

Figure 1 in the document

and save it.

Activity 1.2: You can view ListPage webpage that you created in Activity 1.1 using Microsoft

Internet Explorer. Your webpage should display as in Figure 2.

Figure 1: HTML Code in ListPage.html


Figure 2: ListPage Webpage in Microsoft Internet Explorer

Activity 1.3: Numeric entity and character entity Observe that in the word jalapenos, the letter n should have tilde ~ on top. In HTML code, this

letter ñ is a special character. The HTML codes for these special characters are defined by

numeric entity. Some numeric entities have character entities associated with, so either numeric

entity or character entity can be used. For example, HTML code for the word André will either

be Andr&#233 or Andr&eacute in the HTML document so that the browser will know how to

interpret exactly André on the display. &#233 is numeric entity for é and &eacute is character

entity for é.

Use either the numeric entity or the character entity for ñ to modify the letter n in the word

jalapenos to ñ. The numeric entity of ñ is &#245 and the character entity of ñ is &ntilde. Do

not forget to save your document. Then view the modified ListPage webpage using Microsoft

Internet Explorer. You should see the word jalapeños on the display instead of jalapenos. If

the display is correct, print out the HTML code in Activity 1.3 to be turned in at the end of this

module.

Task 2: Horizontal Rule in Webpage

In HTML code, the horizontal-rule tag <hr> generates the horizontal rule. Horizontal rules can

be used to explicitly separate sections. The horizontal-rule tag <hr> has attributes that control

the look of horizontal lines.

• Default – The default, that is <hr> without any attribute, horizontal rule appears with a

slight shadow to make it appear three-dimensional.

• noshade – Inserting noshade attribute in the horizontal tag <hr>, <hr noshade>,

will change the horizontal rule appearance to two-dimensional.

• width – The default horizontal rule is almost as wide as the page, it is about 90 percent.

It will maintain the width proportional to the width of the window. The width attribute

controls the width of the horizontal rule. There are two types of values for the width

attribute.

Module 5: HTML--List and Hyperlink Tags, page 3 of 7

1) Percentage value: controls the width relative to the width of the page. For

example, <hr width=60%> will display the horizontal rule with the width of

60%.

2) Number of pixels: controls the width with the number of pixels. The word pixels

stands for picture elements. A pixel is basically a tiny dot on the screen. For

example, <hr width=60> will display the horizontal rule with the width of 60

pixels long.

• size – size attribute controls the thickness of the horizontal rule. For example, <hr

size=4> will display the horizontal rule with of 4 pixels thick. The default thickness of

the horizontal rule is approximately 2 pixels.

• align – align attribute controls the position of the horizontal rule. There are three values

for the align attribute:

1) left

2) center, The default value is center.

3) right

For example, <hr align=left> will display the horizontal rule with left justify.

Activity 2.1 Modify the ListPage.html that you created in Task 1 by inserting the horizontal

rule tag <hr> in two places as shown:

<h3><font color="blue">Stir-fried Spicy Shrimps</font></h3>

<hr>

<h4>Ingredients:</h4>

and </ul>

<hr>

<h4>Direction:</h4>

Do not forget to save your document.

Activity 2.2 Use the Microsoft Internet Explorer to view the above page. Do you get the display

as in Figure 2?

Figure 3: ListPage Webpage with Horizontal Rules


Activity 2.3 Adding width attribute

Modify the ListPage in Activity 2.1 by adding the width attribute with the value 60% in the first

horizon rule tag and the value 120, that is 120 pixels, in the second horizontal rule tag. Then use

Microsoft Internet Explorer to view the modified ListPage webpage.

Activity 2.4 Adding size attribute

Modify the ListPage in Activity 2.3 by adding the size attribute with the value 10 in the first

horizon rule tag and the value 20 in the second horizontal rule tag. Then use Microsoft Internet

Explorer to view the modified ListPage webpage.

Activity 2.5 Adding noshade attribute

Modify the ListPage in Activity 2.4 by adding the noshade attribute in the second horizontal

tag. Then use Microsoft Internet Explorer to view the modified ListPage webpage.

Activity 2.6 Adding align attribute

Modify the ListPage in Activity 2.5 by adding the align attribute with the value right in the first

horizon tag and the value left in the second horizontal tag. Then use Microsoft Internet

Explorer to view the modified ListPage webpage. Turn in this code at the end of this module.

Task 3: Hyperlink in a Web page

Links on a Web page are called hypertext. Hypertext is a text that is connected or hyperlinked to

other information on the same page, another page on the same site, or another page on a different

site. We use the anchor tags <a> </a> to set up a hyperlink. It has attributes such as:

• href attribute – href stands for hypertext reference. Its value indicates the location

that will be connected to.

• name attribute – Its value marks the location where it will be referred or linked to.

Activity 3.1: Link to a location on the same page

We will first learn how to set up hypertext links to locations on the same page. A hypertext link

to a location on the same page can be created as follows:

1) Mark a location by enclosing the text at the location where the hyperlink will connect to

with the anchor tag <a> </a>. For example, a location at the words This location.

2) Assign the value to name attribute for the anchor tag <a> in the Step 1. For example, <a

name=“LocationA”>This location </a>, that is, assigning LocationA to the

name for the location (words) This location.

3) Create a hypertext link by enclosing the text that will be used as the link to connect to the

location in Step 2 with the anchor tag <a> </a>.

4) Set the value of href attribute for the anchor tag <a> in the Step 3 to the value in the Step

2 preceded with a # character. For example, <a href=“#LocationA”>My

Link</a>. This will be linked to the location that was setup in the Step 2, the words

This location.

Create a new webpage from the existing ListPage.html file by opening Notepad editor from All

Programs file menu and open ListPage.html file by selecting Open command from File menu.

Then save this file under the name AnchorPage.html on your USB/flash drive. Don’t forget to


<html>

<head>

<title>Anchor Webpage</title>

</head>

<body BACKGROUND=exampleBG.jpg>


<hr>

<a href="#Ingredients">Ingredients</a><BR>

<a href="#Direction">Direction</a>

<hr>

<h4><a name=”Ingredients”>Ingredients:</a></h4>

<ul>











</ul>

<a href="#top">Go back to the top</a>

<hr>

<h4><a name=”Direction”>Direction:</a></H4>

<OL>

<li>Heat cooking oil in a pan with medium high heat.</li>

<li>Stir fry garlic and white onion together till garlic turns light brown.</li>


<li>Add shrimp, mushroom and jalapenos then stir them together.</li>

<li>Sprinkle salt and black pepper. Then add water and stir all ingredients back

and forth. Once the shrimps turn pink, it is ready to be served.</li>

</OL>

<a href="#top">Go back to the top</a>

</body>

</html>

change the file type in Save as type box to All files. The title of Notepad window will change to

AnchorPage – Notepad after the file is saved.

Undo all the modifications

on the horizontal rule

<hr> tag in Activities 2.3 –

2.6. That is leaving the

horizontal rule <hr> tags

as in Activity 2.1, using

default attributes. Then

modify the document by

inserting Horizon Rule tag

<hr> and Anchor tags

<a> as shown in Figure 4.

Note that we use Line

Break tag <br> to

separate Ingredients and

Direction hyperlinks. Save

the above document.

Activity 3.2 Use Microsoft Internet Explorer to view the above page. Resize Internet

Explorer window so that the window will show only the top of the page and the Ingredients:

section as shown in Figure 5. Do you get the display as in Figure 5?

Figure 5: AnchorPage Webpage with Hyperlinks

Activity 3.3: Click on each link to see the effects of the hyperlinks that you created in Activity

3.1. Do not maximize the window of the Internet Explorer. If all the links work, print out the

HTML code in Activity 3.1 and turn in at the end of this module.

Figure 4: HTML code for AnchorPage.html


<html>

<head>


</head>



<hr>

<a href="Ingredients.html">Ingredients</a><bR>

<a href="Direction.html">Direction</a>

<hr>

</body>

</html>

<html>

<head>

<title>Ingredients Webpage</title>

</head>


<h4><a name=”Ingredients”>Ingredients:</a></h4>

<ul>











</ul>

<a href=”AnchorPage2.html”>Back to main page</a>

</body>

</html>

<html>

<head>

<title>Direction Webpage</title>

</head>


<h4><a name=”Direction”>Direction:</a></h4>

<ol>

<li>Heat cooking oil in a pan with medium high

heat.</li>

<li>Stir fry garlic and white onion together till

garlic turns light brown.</li>


<li>Add shrimp, mushroom and jalapenos then stir them

together.</li>

<li>Sprinkle salt and black pepper. Then add water and

stir all ingredients back and forth. Once the

shrimps turn pink, it is ready to be served.</li>

</ol>

<a href=”AnchorPage2.html”>Back to main page</a>

</body>

</html>

Activity 3.4: Link from one page to another page

In this activity, we will learn how to create hypertext links to the internal Web pages. A

hypertext link to another page can be created by setting the value of href attribute in the anchor

tag <a> to the file name that contains the content to be linked to or to be displayed. For example,

<a href=“Introduction.html”>Introduction</a>.

The following Activities: 3.4, 3.5 and 3.6 will separate the HTML code in Activity 3.1 into three

parts with three different files. Follow the steps in the following instructions to obtain these three

files, AnchorPage2.html, Ingredients.html, and Direction.html.

Open Notepad editor from All Programs file menu and open AnchorPage.html file by selecting

Open command from File menu. Then save this

file under the name AnchorPage2.html on your

USB/flash drive. Don’t forget to change the file

type in Save as type box to All files. The title of

Notepad window will change to AnchorPage2 –

Notepad after the file is saved. Then modify the

document as shown in Figure 6 and save it.

Activity 3.5: Create Ingredients.html

In Notepad editor, open AnchorPage.html file

by selecting Open command from File menu.

Then save this file under the name

Ingredients.html on your USB/flash drive.

Don’t forget to change the file type in Save as type box to All files. The title of Notepad window will change to Ingredients – Notepad

after the file is saved. Then modify the


Activity 3.6: Create Direction.html

In Notepad editor, again, open

AnchorPage.html file by selecting Open

command from File menu. Then save this file

under the name Direction.html on your

USB/flash drive. Don’t forget to change the file

type in Save as type box to All files. The title of Notepad window will change to Direction –

Notepad after the file is saved. Then modify the


Figure 7: HTML Code for Ingredients.html

Figure 6: HTML Code for AnchorPage2.html

Figure 8: HTML Code for Direction.html


<html>

<head>


</head>


<h3><font color=blue>My Favorite Links</font></h3>

<hr>

<a href="http://www.yahoo.com">Yahoo</a><br>

<a href="http://www.Sony.com">Sony</a><br>

<a href="http://www.uhd.edu">University of Houston-

Downtown</a><br>

<a href="http://www.Continental.com">Continental

Airlines</a><br>

<a href="http://www.google.com">Google</a><br>

<a href="http://www.youtube.com">YouTube</a>

<hr>

</body>

</html>

Activity 3.7: Use Microsoft Internet Explorer to view AnchorPage2.html. Do you get the

display as shown in Figure 9? Click on each link to see the effects of the hyperlinks that you

created in Activity 3.4-3.6. If all the links work, print out the HTML code in Activity 3.4, 3.5,

and 3.6, and turn in at the end of this module.

Figure 9: AnchorPage2 Webpage with Internal Hyperlinks

Activity 3.8: Link to pages in other sites

In this activity, we will explore how to set up hypertext links to other remote web pages. A

hypertext link to another page can be created by setting the value of href attribute in the anchor

tag <a> to the URL name that contains the content to be linked to or to be displayed. For

example, <a href=“http://cms.dt.uh.edu”>Computer and Mathematical

Sciences</a>.

Open Notepad editor from All Programs file

menu and save this file under the name

AnchorPage3.html on your USB/flash drive.

Don’t forget to change the file type in Save as

type box to All files. The title of Notepad

window will change to AnchorPage3 – Notepad

after the file is saved. Then type the following

in the document as in Figure 10 and save it.

Activity 3.9: Use Microsoft Internet Explorer to view the above page in Figure 10. Do you get

the display as in Figure 11? Click on each link to see the effects of the hyperlinks that you

created in Activity 3.8. If all the links work, print out the HTML code in Activity 3.8 and turn in

at the end of this module.

Figure 11: AnchorPage3 Webpage with External Hyperlinks

Turn in HTML code from Activity 2.6, 3.1, 3.4-3.6 and 3.8

Figure 10: HTML code for AnchorPage3.html

module5 html - list and link tags answercms.dt.uh.edu/faculty/ongards/cs1305/labs/module5... ·...

Documents