Scribd
Upload
303 views

Lesson 6 - HTML Lists and Links

This document provides an introduction and learning objectives for a lesson on HTML lists, links, and graphical elements. It discusses using different types of lists like ordered, unordered, and definition lists. It covers adding hyperlinks using tags like <a> and attributes like href. Images can be used as links by placing the <img> tag inside an <a> tag. Links can also be made to email addresses or used to make buttons into links. Key concepts covered include the different types of lists in HTML and various elements and attributes used to create hyperlinks. An enrichment activity is assigned that involves creating a webpage about interests and hobbies using lists and other HTML tags.

Uploaded by

Daniel Talion
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
303 views

Lesson 6 - HTML Lists and Links

This document provides an introduction and learning objectives for a lesson on HTML lists, links, and graphical elements. It discusses using different types of lists like ordered, unordered, and definition lists. It covers adding hyperlinks using tags like <a> and attributes like href. Images can be used as links by placing the <img> tag inside an <a> tag. Links can also be made to email addresses or used to make buttons into links. Key concepts covered include the different types of lists in HTML and various elements and attributes used to create hyperlinks. An enrichment activity is assigned that involves creating a webpage about interests and hobbies using lists and other HTML tags.

Uploaded by

Daniel Talion
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Science, Technology, Engineering and Mathematics

(Empowerment Technologies)
SY 2021 – 2022

Unit 2: Web Programming-Hypertext Markup Language


Lesson 6: HTML List, links, and graphical elements

Introduction

Hi students! As we learn more about HTML, we want


users to interact with and be informed by our websites. This
module looks at how you can add lists to your webpages and
make it more interactive with hypertext links, which allow
you to link multiple documents to each other and to link your
website with other websites. We’ll also look at how you can
embed lists into your HTML document.

Learning Objectives

After studying and completing this module with 80%-100% accuracy, and to earn a grade with at
least 12 points in the activity you are expected to:

a. Use of the different types of HTML lists in a web page activity.


b. Embed related or appropriate HTML links; and
c. Create interactive links using images and text.

Pre-requisite Skills / Review

Compare picture 1 from picture 2.

1. What is the difference between the grocery lists?


2. If you are asked to do the grocery for your family, which list are you going to use and why?

Page 1 of 8
Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

Lesson 1.1 - Lists


▪ One of the tools in HTML that help organize content.
▪ Used within paragraphs and body sections of the document.
▪ Uses the <LI> </LI> tags for the list’s items.
Three defined list types in HTML
• Bulleted/Unordered: This will list items using plain bullets.
• Numbered/Ordered: This will use different schemes of numbers to list your items.
• Description/Definition: This arranges your items in the same way as they are arranged in a
dictionary.
A. HTML Unordered Lists
o This list is created by using HTML <ul> tag.
Example:
Input the following syntax as follows:

This will produce the following result:

Type Attribute in Unordered Lists


o Allows the changing of the bullets used in the list.
Type Result
disc ●
square ▪
circle ○

Example:
Input the following syntax as follows:

Page 2 of 8
Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

This will produce the following result:

B. HTML Ordered Lists


o This list is created by using <ol> tag.
Example:
Input the following syntax as follows:

This will produce the following result:

Type Attribute in Ordered Lists


o Used to change the number or letter style for the ordered list.

Type Numbering Style Result


1 Arabic numbers 1,2,3…
a Lower-alpha a, b, c…
A Upper-alpha A, B, C…
i Lower-roman i, ii, iii…
I Upper-roman I, II, III…

Page 3 of 8
Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

Example:
Input the following syntax as follows:

This will produce the following result:

The start Attribute


o You can use start attribute for <ol> tag to specify the starting point of numbering you need.

Example:
Input the following syntax as follows:

This will produce the following result:

C. Definition Lists
o HTML supports a list style which is called definition lists where entries are listed like in a
dictionary or encyclopedia.
o Definition List makes use of following three tags.
➢ <dl> − Defines the start of the list
➢ <dt> − A term
➢ <dd> − Term definition
➢ </dl> − Defines the end of the list

Page 4 of 8
Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

Example:
Input the following syntax as follows:

This will produce the following result:

Lesson 1.2 – Links


▪ HTML links are hyperlinks.
▪ You can click on a link and jump to another document.
▪ When you move the mouse over a link, the mouse arrow will turn into a little hand.
▪ The HTML <a> tag defines a hyperlink. It has the following syntax:

A. HTML Links - The target Attribute


▪ By default, the linked page will be displayed in the current browser window. To change this,
you must specify another target for the link.
▪ The target attribute specifies where to open the linked document.
target Attribute

_self Default. Opens the document in the same window/tab as it was


clicked
_blank Opens the document in a new window or tab
_parent Opens the document in the parent frame
_top Opens the document in the full body of the window
Example:
Input the following syntax as follows:

This will produce the following result:

Page 5 of 8
Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

Major types of hyperlinks


1. Internal Links point to a page or resource within the same website or domain.
2. Local Links point to a page or resource within a client’s computer, usually denoted by common
computer directories instead of domain or website locations.
3. External Links point to a page or resource outside of the website or domain, usually located
within another website or domain.

B. HTML Links - Use an Image as a Link

▪ Instead of text, you will use an image to insert a hyperlink.


▪ To use an image as a link, just put the <img> tag inside the <a> tag.
Example:
Input the following syntax as follows:

This will produce the following result:

C. Link to an Email Address


▪ Use mailto: inside the href attribute to create a link that opens the user's email
program, and it will let you send a new email.
Example:
Input the following syntax as follows:

This will produce the following result:

D. Button as a Link
▪ To use an HTML button as a link, you must add some JavaScript code.
▪ JavaScript allows you to specify what happens at certain events, such as a click of
a button.
Example:
Input the following syntax as follows:

This will produce the following result:

Page 6 of 8
Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

Key Concepts

➢ HTML Lists are one of the tools in HTML that help you organize your webpage’s
content.
➢ Three defined list types:
• Unordered/Bulleted Lists
• Ordered/Numbered Lists
• Definition lists.
➢ HTML links are hyperlinks.
➢ To insert a hyperlink, you can use the following elements and attributes:
• <a> element to define a link.
• href attribute to define the link address.
• target attribute to define where to open the linked document.
• <img> element (inside <a>) to use an image as a link.
• mailto: scheme inside the href attribute to create a link that opens the user's
email program.

Enrichment Activity

I. Day 1: Post-test in Canvas (Check-out Activity)

Direction: Create a web page showing your interest and hobbies with the following content.
Also integrate the use of other HTML tags to make your webpage attractive and presentable.

1. Using ordered/numbered or unordered/bulleted list, list down 10 of your most favorite


music/songs.

2. Present your favorite band, artist or group using definition list to give a brief description
about their background and other information.
Study Questions:

1. What is the significance of using lists in creating a webpage?


2. Does integrating hyperlinks will make your webpage interactive? Why?

II. Day 2: Post-test in Canvas (Check-out Activity)


Direction: Create a web like album page of your favorite genre of movies using HTML lists,
links and graphical elements tags and attributes.
Sample Genre:
1. Action 4. Crime/Gangster 7. Horror 10. War
2. Adventure 5. Drama 8. Musical/Dance 11. Westerns
3. Comedy 6. Epics/Historical 9. Sci-Fi

Page 7 of 8
Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

Sample Output:

YouTube Videos

Here are some YouTube videos you can watch for you to have a better understanding about the
lesson.

• HTML Lists and Images


https://www.youtube.com/watch?v=DRdGWLZEuxw
• HTML Anchor Links
https://www.youtube.com/watch?v=oSq5FlmYyCQ
• How to add a link to a web page
https://www.youtube.com/watch?v=CA3b0a4u9sY

References
Larsen, R. (2013). Beginning HTML and CSS. Wrax. Retrieved from
https://learning.oreilly.com/library/view/beginning-html-and/9781118416518/
Willard, W. (2006). HTML: A beginner's guide, 3rd edition. Berkeley, Calif:
Osborne/McGraw-Hill.

For online simulation of codes:


https://www.tutorialspoint.com/html/index.htm
https://www.w3schools.com/

Page 8 of 8

You might also like