Scribd
Upload
15 views10 pages

Table and Hyperlink Tag

Uploaded by

Jake Cake
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views10 pages

Table and Hyperlink Tag

Uploaded by

Jake Cake
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

PARANG HIGH SCHOOL

Technology and Livelihood Education


ICT 10- Web Development
HTML WEB LAYOUT:

TABLE TAG
Objectives: INSERTING TABLE
 Use the attributes for a table and
a row;
 design a web page with a table;
 define hyperlink;
 develop a website with hyperlinks.

LET’S EXPLORE!
Differentiate these two pictures according to
your observation.

WHAT I CAN SAY TO THIS PICTURE?

WHAT I CAN SAY TO THIS PICTURE?

DID YOU KNOW?


WHAT WILL YOU DO TO MAKE YOUR WEB
LAYOUT ORGANIZE? Microsoft Excel HAS 1,048,576 Rows
and 16,384 Columns, for a total of 17,
179,869, 184 cells. The last cell
address of a worksheet is

Prepared by: JNVillamor | ICT Teacher


LET’S LEARN
HOW TO START A WEB LAYOUT?
Website is a set of related web pages located under a single domain name,
typically produced by a single person or organization. It is a collection of files
accessed through a web address, covering a particular theme or subject, and
managed by a particular person or organization. Its opening page is called a home
page.
A web page is a document written in hypertext (also known as HTML) that you can
see online, using a web browser. Most web pages include text, photos or videos,
and links to other web pages.

While coding forms the backbone of web development, having a creative flair and
design sensibility can elevate the aesthetic appeal and user experience of websites
and applications. A good developer should possess a keen eye for design and strive
to create visually appealing and intuitive interfaces. In addition, web developer
should maintain a clean and organized coding environment by adopting consistent
coding conventions, documenting their code effectively, and utilizing tools like
linters and code formatters to ensure code readability and maintainability.

Most of the beginners, they use table in HTML to help them organize the layout of
their web page, to understand more about the table, let us know what and how to
use the table tags.

TAGS DEFINITION SAMPLE CODE


These are excellent formats for Example:
displaying certain types of data. <html>
TABLE TAG Using tables provides you with <title>Sample
more control in the placement of Table</title>
<table> text and images. Your page’s <table>
</table>
</table> layout will display more
</html>
consistently and uniformly on
different browsers.
Example:
<html>
It defines as table row. One set of
<title>Sample
TABLE ROW open and close tag of table row Table</title>
means 1 row will appear to the <table>
<tr> </tr> output. <tr>
</tr>
</table>
</html>

Prepared by: JNVillamor | ICT Teacher


Example:
<html>
TABLE <title>Sample
It defines as the header of the Table</title>
HEADING
table. To identify the use of table <table>
heading, the text inside the tags <tr>
<th></th> <th>HELLO</th>
will thicken or turn to bold.
</tr>
</table>
</html>
Example:
<html>
<title>Sample
It defines as table data. All data or Table</title>
content you want to appear to the <table>
TABLE DATA
web should be placed inside table <tr>
<td></td>
data tags including texts, images, <td>I LOVE ICT
videos. CLASS</td>
</tr>
</table>
</html>

LET’S PRACTICE
Instructions: Rearrange the jumbled tags/codes below to get the expected output. Write
the correct coding on the space provided.
EXPECTED OUTPUT

CORRECT CODING JUMBLED CODING

Prepared by: JNVillamor | ICT Teacher


<font color="white">GRADE AND
SECTION:
<tr bgcolor="black">
<th>
</html>
</th>
</tr>
<html>
<td>10-LIKEABLE</td>
<table border="2">
</tr>
<tr>
</font>
</table>

LET’S TRY
HANDS-ON ACTIVITY: Create a webpage that shows 7 columns and 2 rows that shows
your Weekly Plan from Monday to Sunday. Follow the layout below:

 Use the correct and proper table tags and attributes. Apply a border style (10 pts.)
 Use table heading tag for the 1st row. (2 pts.)
 Apply any background color for 2nd row. (4 pts.)
 Apply font styles on the texts. (2 pts.)
 Place the table at the center of the webpage. (1 pt.)
 Save the file as: Surname_TableTag.html (1 pt.)

OUTPUT CODES

Prepared by: JNVillamor | ICT Teacher


(Paste the complete codes
(Screenshot of output)
here)

LET’S TEST!
I. Instructions: Explain clearly your answer about table tags and its attributes.
1. Why do you need to use Table tag in a website?

2. What will happen to your table if you forgot to close the table row tag?

II. Instructions: Read carefully the question and choose the correct answer.
3. What is the attribute to change the background color for table row?
a. <tr background=”red”></tr>
b. <tr style=”background: red”> </tr>
c. <tr bgcolor=”red”></tr>

4. What attribute will you use to change the border style?


a. <table border=”solid”></table>
Prepared by: JNVillamor | ICT Teacher
b. <table border=”black”></table>
c. <table style=”border: 2px solid black”></table>

5. Based on the given codes below, what do you think is the expected output?
<table>
<tr><td>Good</td><td>Better</td><td>Best</td></tr>
</table>
a. GOOD BETTER BEST

b. GOOD BETTER BEST

c. GOOD BETTER BEST

“Organizing is something you do before you do something,


so that when you do it, it is not all mixed up”
A. A. Milne, author of Winnie the Pooh

Prepared by: JNVillamor | ICT Teacher


REFERENCES:
 https://www.gartner.com/en/information-technology/glossary/website#:~:text=A
%20website%20is%20a%20collection,is%20called%20a%20home%20page.
 https://www.vocabulary.com/dictionary/web%20page#:~:text=A%20web%20page
%20is%20a,or%20company%20is%20a%20website.
 https://smartvirtualassistants.com/blog/essential-qualities-of-a-good-web-
developer-to-look-for

Prepared by: JNVillamor | ICT Teacher


PARANG HIGH SCHOOL
Technology and Livelihood Education
ICT 10- Web Development
HTML WEB LAYOUT:

HYPERLINK TAG
Objectives: INSERTING
 Use the attributes for a table and HYPERLINK
a row;
 design a web page with a table;
 define hyperlink;
 develop a website with hyperlinks.

A hypertext document contains element called links that allow users to click their
mouse button on a particular part of the screen and performs some actions.

Hypertext Reference
It identifies the pointer or the pathway to the target of the link which is the URL (Uniform
Resource Locator)

ATTRIBUTES OF HYPERLINK
Each attribute of hyperlink will work only inside the <body> Tag.
NAME DEFINITION EXAMPLE
This a page where the
STANDARD
visitor hasn’t been to yet <body link=”green”>
LINK
(standard color is blue).
This is a page where the
VISITED LINK visitor has been to before <body link=”green” vlink=”yellow”>
(standard color is purple).
The color of the link
<body link=”green” vlink=”yellow”
ACTIVE LINK when the mouse is on it
alink=”orange”>
(standard color is red).

Some reminders in saving a file with Hyperlink.


1. Save all HTML files in one folder and include .html as file extension.
2. Rename the file to identify easily.

LET’S PRACTICE DID YOU


Instructions: Write the correct tags/ elements to make the
codes complete. Refer to the given output below in answering KNOW?
the drill. In 1992, IBM Simon,
first touch screen
phone was launched.

Prepared by: JNVillamor | ICT Teacher


GIVEN OUTPUT:

CODES:
1. __________
2. <title>_______ Hyperlink</title>
3. <body __________="orange" link="_________">
4. <H1>WELCOME TO MY PAGE_______ emsp;&emsp;&emsp;
5. <a href="Home.html">_________</a>&emsp;&emsp;&emsp;
6. <a href="Services.html">SERVICES______&emsp;&emsp;&emsp;
7. <a href="ContactUs________">CONTACT US</a>
8. _______
9. </html>

LET’S TRY!
HANDS-ON ACTIVITY: Create a simple yet creative website that shows the links in a blog.
Use also a table tag to organize the layout of the website. Follow the format below:

1. Make a name of blog (1 point) RUBRICS:


2. Apply background (1 point) 10 points All codes and output are
3. Apply style to the fonts/ texts (1 point) correct.
4. Use table tags (2 points) 8 points Output is correct but few
5. Name of links: codes are incorrect.
 Home (1 point) 6 points Output is working but
 About (1 point) some codes are
 Log in (1 point) incorrect.
6. Save as: HREF TABLE_SURNAME.html 4 points Output is working but
(2 points) most codes are
incorrect.
2 points Output is not working
and needs more
improvement.

Prepared by: JNVillamor | ICT Teacher


OUTPUT CODES

(Paste the complete codes


(Screenshot of output)
here)

“Creativity is seeing what others see


and thinking what no one else evert
thought”
Albert Einstein- Renowned Physicist

Prepared by: JNVillamor | ICT Teacher

You might also like