Computer

Programming 9
QUARTER 1

MODULE

6 HTML5 List, Table and Image

Introductory Message tutorial.net/htmlbasics/lists/
-

For the facilitator:

Welcome to the Computer Programming for the ICT Module on HTML5 List, Table
https://html5tutorial.net/tables/basics-of-tables/
and Image!

This module was collaboratively designed, developed and reviewed by educators from Accessed July 2, 2020 11:50:56am
Schools Division Office of Pasig City headed by its Officer-In-Charge Schools Division https://www.w3schools.com/html/html_images.asp
Superintendent, Ma. Evalou Concepcion A. Agustin in partnership with the Local
Government of Pasig through its mayor, Honorable Victor Ma. Regis N. Sotto.
Accessed July 2, 2020 11:59:01am.
The writers utilized the standards set by the K to 12 Curriculum using the Most
https://html5tutorial.net/html-basics/images/
Essential Learning Competencies (MELC) while overcoming their personal, social,
and economic constraints in schooling.

This learning material hopes to engage the learners into guided and independent
learning activities at their own pace and time. Further, this also aims to help learners
acquire the needed 21st century skills especially the 5 Cs namely: Communication,
Collaboration, Creativity, Critical Thinking and Character while taking into
consideration their needs and circumstances.

In addition to the material in the main text, you will also see this box in the body of
the module:

Notes to the Teacher

This contains helpful tips or strategies that
will help you in guiding the learners.

As a facilitator you are expected to orient the learners on how to use this module.
You also need to keep track of the learners' progress while allowing them to manage
their own learning. Moreover, you are expected to encourage and assist the learners
as they do the tasks included in the module.
 POST TEST For the learner:

Welcome to the Computer Programming for the ICT Module on HTML5 List, Table
and Image!
Instructions: Identify what is being asked in the following statements below.
Write your answer on the space provided. The hand is one of the most symbolized part of the human body. It is often used to
depict skill, action and purpose. Through our hands we may learn, create and
_____________ 1. An attribute of the ordered list tag that reverses the order of the list. accomplish. Hence, the hand in this learning resource signifies that you as a learner
is capable and empowered to successfully achieve the relevant competencies and
_____________ 2. This attribute defines a number or letter to start the list with. Its
skills at your own pace and time. Your academic success lies in your own hands!
value is always an integer.
This module was designed to provide you with fun and meaningful opportunities for
_____________ 3. This tag in the table markup is where the actual content is.
guided and independent learning at your own pace and time. You will be enabled to
_____________ 4. An attribute that serves as the URL for the picture you want to process the contents of the learning material while being an active learner.
display.
This module has the following parts and corresponding icons:
_____________5. This attribute provides an alternate text for an image.
Expectation - These are what you will be able to know after
completing the lessons in the module

Pre-test - This will measure your prior knowledge and the concepts
KEY TO CORRECTION to be mastered throughout the lesson.

Recap - This section will measure what learnings and skills that
you understand from the previous lesson.

Lesson- This section will discuss the topic for this module.

Activities - This is a set of activities you will perform.

Wrap Up- This section summarizes the concepts and applications of

the lessons.

Valuing-this part will check the integration of values in the learning

competency.

REFERENCES Post-test - This will measure how much you have learned from the
entire module. Ito po ang parts ng module.

https://www.dummies.com/web-design-development/sitedevelopment/how-
to-create-lists-in-html5/
 EXPECTATION Now thru the use of List, classify the shuffle given item below in accordance with
their genre. And classify what genre it is pertaining to, and attach image if available.
Do it in HTML Program...
The students should be able to: Narra Action Grapes

1. Identify the use of list. Papaya Banana Horror

2. Enumerate the different tags used in HTML5 lists. Ilang-ilang Fantasy Orange
3. Know why the table tag should only be used for rendering data that
naturally belongs in a grid. Comedy Anahaw Sci-fi
4. Appreciate the importance of using images in an html document. Lagundi Romance Makahiya
5. Use the list and image syntax in an html document.
Strawberry Melon

PRE TEST

Instruction: Select the letter that corresponds to the correct answer. VALUING
1. Which of the following refers to the tag that defines a list item?
A. <ol> B. <ul> C. <dl> D. <li> Instructions: Read the questions carefully. Write your answers on the space
provided. Use a separate sheet if needed.
2. As a default mark, this list uses bullet points.
1. How do you think your knowledge in using different list tags can help you as
A. List B. Ordered List C. Unordered List D. Description List
a future web developer?
___________________________________________________________________________
3. Which of these is used for rendering data that naturally belongs in a grid? ___________________________________________________________________________
A. Form B. Table C. Ordered List D. Unordered List ___________________________________________________________________________
2. In your own opinion, why do web designers use tables for layout of HTML
4. Which of the following tags is not an HTML Table related tag? pages even though they should not have been used that way?
A. <tc> B. <td> C. <tr> D. <table>
___________________________________________________________________________
___________________________________________________________________________
5. What is the correct tag for HTML images?
___________________________________________________________________________
A. <pic> B. <img> C. <gif> D. <jpg>
3. Why do you think it is necessary to include images in building a website?
(Answer in 2 to 3 sentences)
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
 ACTIVITIES
R ECAP
Create an HTML page that uses both list and table syntax. Include images to make it more
appealing. Consult with your subject teacher about the content of your web page. Submit a
soft copy or printed copy of the syntax with image of the expected output to your teacher. HTML5 follows a structured syntax to avoid errors. Provide a short description
This guide serves as basis for scoring, in-line with simple html file activity. about the structure of HTML syntax. What are the errors that you usually encounter
Needs work Developing Meets Standard Score in creating a program?
Information and Information and Information and
Differentiate links and hyperlinks.
images are not images are images are
Content relevant somewhat relevant
relevant.
10 points 15 points 20 points

With syntax and Syntax is correct There are no

logical errors. but with logical logical and syntax
Code errors. errors. LESSON
10 points 20 points 30 points
Output is not well- Output is needs Output is well- HTML5 List
structured. improvement. organized and Are you familiar with a table of contents on a page of a book? Or a telephone
appealing and address directory? Have you visited a page in the Wikipedia showing a list of
Visual something like TV shows? Did you notice how organized it was?
Design
As teenagers, we often look for the exact data that we are searching for. Often
10 points 15 points 20 times we skip out on reading other paragraphs and go directly to look for the list of
information that we need. Every once in a while a list can be very handy.

A lot of web designers use the list to create their menus and navigations as
the navigation very often is a set of related links.
Total /50
How to Create Lists in HTML5
The web pages you create with HTML5 are often about data, and data is often
organized into lists, which can stand alone or nest within each other. The items in
your lists can either be numbered (an ordered list) or unnumbered (unordered).

WRAP UP This figure shows an unordered, or bulleted, list; an ordered, or numbered,

list; and a combination nesting list:
List, Table and Image are very useful in-line with HTML creation. Also, mostly use in
classifying a such object that tends to be appreciate more if there is/are visual image
attach.
 <p>If a browser cannot find the
image, it will display the
alternate text:</p>

<img src="wrongname.gif"
alt="Flowers in Chania">

Figure 7:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_wrongname

The style Attribute : Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

<img src="logo.jpg" alt="School logo" style="width:500px; height:600px;">

You can also use the width and height attributes.

<img src="logo.jpg" alt="School logo" width="500" height="600">

Figure 1: https://www.dummies.com/web-design-development/site-development/how-to-create-lists-in-html5/
Images in another Folder
Lists, like most HTML5 elements, are quite easy to build:
If you have your images in a sub-folder, you must include the folder name in
1. Designate the beginning of the list with <ul> or <ol>. The <ul> tag indicates the src attribute:
an unordered (bullet) list, and the <ol> tag describes an ordered (numbered)
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px; height:128px;">
list. Generally the unordered list has black circles as bullet points you can
Images on Another Server
actually change how the bullet points should look, using CSS.
Some web sites store their images on another server. Actually, you can access
2. Surround each item in the list with an <li></li> pair.
images from any web address in the world.
3. (Optional) Nest lists inside each other. The <li> of one list can contain an entire
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Scho
new list. Just be sure to close off one list before beginning a new one. ols.com">

Image as a Link

HTML List Tags To use an image as a link, put the <img> tag inside the <a> tag.
Tag Description <a href="default.asp">
<ul> Defines an unordered list <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag. The list items will be marked with bullets (small black circles) by default:
HTML Images Syntax <h2>An unordered HTML list</h2>
<ul>
The HTML <img> tag is used to embed an image in a web page. Images are <li>Grade 1</li>
not technically inserted into a web page; images are linked to web pages. The <img> <li>Grade 2</li>
tag creates a holding space for the referenced image. The <img> tag is empty; it <li>Grade 3</li>
contains attributes only, and does not have a closing tag. </ul>

The <img> tag has two required attributes: Figure 2:

https://www.w3schools.com/html/html_lists_unordered.asp

src - Specifies the path to the image Ordered HTML List

alt - Specifies an alternate text for the image
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The src Attribute The list items will be marked with numbers by default:

The value of the src attribute is the url for the picture you want to display. The url Attributes of Ordered List
points to where the picture is stored which would normally be on your server. Note:
When a web page loads; it is the browser, at that moment, which gets the image from
Type - Defines how the list is numbered You can use the following value
a web server and inserts it into the page. Therefore, make sure that the image actually
for this attribute o default value; uses numbers o Value =
stays in the same spot in relation to the web page, otherwise your visitors will get a
uses lowercase letters o Uses uppercase letters o
broken link icon. The broken link icon is shown if the browser cannot find the image.
- Uses lowercase Roman numerals o - Uses
The alt Attribute uppercase Roman numerals
The required alt attribute provides an alternate text for an image, if the user for some <h2>An ordered HTML list</h2>
reason cannot view it (because of slow connection, an error in the src attribute, or if
the user uses a screen reader). The value of the alt attribute should describe the <li>Step one</li>
image. <li>Step two</li>
<h2>Alternative text</h2> <li>Step three</li>
<li>Step four</li>
<p>The alt attribute should </ol>
reflect the image content, so
users who cannot see the Figure 3:
image gets an understanding https://www.w3schools.com/html/html_lists_ordered.asp

of what the image

contains:</p> Start - Defines a number to start the list with. You can use any integer
for the value. Syntax is: <ol
<img src="img_chania.jpg" Reversed - Reverses the order of the list. No value required.
alt="Flowers in Chania" > Description Lists

A description list is a list of terms, with a description of each term. The <dl>
tag defines the description list, the <dt> tag defines the term (name), and the <dd>
Figure 6: https://www.w3schools.com/tags/att_img_alt.asp tag describes each term.

If a browser cannot find an image, it will display the value of the alt attribute.
 <h2>Description List</h2> </tr>
<dl> <tr>
<dt>Web</dt> <td>Row 2, cell 1</td>
<dd>The part of the Internet that <td>Row 2, cell 2</td>
contains websites and <td>Row 2, cell 3</td>
web pages</dd> </tr>
<dt>HTML</dt> <tr>
<dd>A markup language <td>Row 3, cell 1</td>
for creating web pages</dd>
<td>Row 3, cell 2</td>
<dt>CSS</dt>
<td>Row 3, cell 3</td>
<dd>A technology to make HTML
</tr>
look better</dd>
<tr>
</dl> Figure 4: https://www.w3schools.com/tags/tag_dl.asp
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
HTML5 Table </tr>
</table>
HTML tables should only be used for rendering data that naturally belongs in
a grid. Tables have previously been used for the layout of HTML pages but this is not
how it should have been. A lot of web designers used the tables for the layout, but
there are two main reasons not to do it:

It is semantically incorrect.

Figure 5: https://www.w3schools.com/tags/tag_dl.asp
The elements of tables are pretty comprehensive, but the first you will need to
know is the <table> element. This is the first element and defines that the following As you can see, the <td> tags are nested inside the <tr> tags, and thins means,
markup is inside a table. that every cell in a row must be inside the <tr> element. Note, that the attribute
border to the <table> tag is added to actually see the table borders when you execute
When structuring tables, the HMTL markup is basically structured with row the codes, but you should never do this when you are writing your markup table
and cells (note, that there are no tags for columns, just rows). The tag for rows is <tr> border is a job for CSS!
(abbreviation for table row) and the tag for each cell is <td> (which stands for table
data, and this is where the actual content is. Before writing the markup for the table, HTML5 Image
you need to know exactly what it should look like this will make it a lot easier for
you. Can you picture out a web page without any images? Imagine Facebook but
<table border="1" width="100%">
unfamiliar type of herb but without image, would you be able to tell otherwise? With
<tr>
that said images help us visualize the product or an item.
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td> Web pages are not so different; images help to make the site more appealing.
<td>Row 1, cell 3</td> Images can improve the design and the appearance of a web page.

In HTML images are defined with the <img> tag. The image tag is an empty
element as it only contains attributes and therefore has no closing tag. The simplest
way of using the <img> tag is with the src attribute (src is an abbreviation of source).