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
Unit 2: Web Technologies, pages 2 of 7
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é or André in the HTML document so that the browser will know how to
interpret exactly André on the display. é is numeric entity for é and é 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 õ and the character entity of ñ is ñ. 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
Unit 2: Web Technologies, pages 4 of 7
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
Module 5: HTML--List and Hyperlink Tags, page 5 of 7
<html>
<head>
<title>Anchor Webpage</title>
</head>
<body BACKGROUND=exampleBG.jpg>
<h3><font color=blue>Stir-fried Spicy Shrimps</font></h3>
<hr>
<a href="#Ingredients">Ingredients</a><BR>
<a href="#Direction">Direction</a>
<hr>
<h4><a name=”Ingredients”>Ingredients:</a></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>
<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 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>
<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
Unit 2: Web Technologies, pages 6 of 7
<html>
<head>
<title>Anchor Webpage</title>
</head>
<body background=exampleBG.jpg>
<h3><font color=blue>Stir-fried Spicy Shrimps</font></h3>
<hr>
<a href="Ingredients.html">Ingredients</a><bR>
<a href="Direction.html">Direction</a>
<hr>
</body>
</html>
<html>
<head>
<title>Ingredients Webpage</title>
</head>
<body background=exampleBG.jpg>
<h4><a name=”Ingredients”>Ingredients:</a></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>
<a href=”AnchorPage2.html”>Back to main page</a>
</body>
</html>
<html>
<head>
<title>Direction Webpage</title>
</head>
<body background=exampleBG.jpg>
<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 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>
<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
document as shown in Figure 7 and save it.
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
document as shown in Figure 8 and save it.
Figure 7: HTML Code for Ingredients.html
Figure 6: HTML Code for AnchorPage2.html
Figure 8: HTML Code for Direction.html
Module 5: HTML--List and Hyperlink Tags, page 7 of 7
<html>
<head>
<title>Anchor Webpage</title>
</head>
<body background=exampleBG.jpg>
<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