3RD Quarter Lesson HTML
Presentation
•
Computers
•
12th Grade
•
Practice Problem
•
Medium
Honey Fate Joy Villegas
Used 5+ times
FREE Resource
66 Slides • 86 Questions
1
HTML Favicon
By Honey Fate Joy Villegas
2
HTML Favicon
By Honey Fate Joy Villegas
A favicon is a small image displayed next to the page title in the browser tab.
3
How To Add a Favicon in HTML
You can use any image you like as your favicon. You can also create your own favicon on sites like https://www.favicon.cc.
Tip: A favicon is a small image, so it should be a simple image with high contrast.
4
A favicon image is displayed to the left of the page title in the browser tab, like this:
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".
Next, add a element to your "index.html" file, after the
5
Example
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
6
Favicon File Format Support
The following table shows the file format support for a favicon image:
Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
Edge | Yes | Yes | Yes | Yes | Yes |
Chrome | Yes | Yes | Yes | Yes | Yes |
Firefox | Yes | Yes | Yes | Yes | Yes |
Opera | Yes | Yes | Yes | Yes | Yes |
Safari | Yes | Yes | Yes | Yes | Yes |
7
Multiple Choice
In which HTML element is the Favicon defined?
1
The <img> element
2
The <body> element
3
The <link> element
4
The <style> element
8
Fill in the Blank
Which HTML tag is used to handle the favicon (the little image to the left in the browser tab); < ______rel="icon" type="image/x-icon" href="/images/favicon.ico">?
9
Multiple Choice
True or False. Favicons must have the .ico file extension.
1
true
2
false
10
Add Favicon
We use the HTML tag to attach a favicon to the document. For example,
<link rel="shortcut icon" href="/images/favicon.ico">
<head> <title>Programiz: Learn to Code for Free!</title> <link rel="shortcut icon" href="favicon.png"> </head>
Let us look at how this would look on a real site. For example, programiz.com might have something like this in their code,
11
Here the favicon.png is being displayed from the tag in the program site where:
rel - defines the type of document linked, i.e. a shortcut icon
href - defines the URL for the icon
Note: You can use almost any image for the favicon. However, a simple, easy-to-recognize, small (usually 16px X 16px) image is recommended. Most websites use their logo or a smaller version of the logo as the favicon.
12
Welcome to my websiteGeeksforGeeks
Debugging Activity: HTML Favicon Troubleshooting
Instructions:
Review the HTML code below.
The favicon is not appearing in the browser tab.
Find and correct all the errors related to the favicon setup.
Write the corrected code after debugging.
13
<!DOCTPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>My Webpage</title>
<!-- Favicon setup -->
<link rel="icons" type="images/x-icon" href="favicons.ico">
<style>
h1 {
color: white;
background-color: white;
font-size: 30px;
}
</style>
</head>
<body>
<h1>It's nice to meet you Ma'am Honey</h1>
</body>
</html>
14
Open Ended
Review the HTML code below.
The favicon is not appearing in the browser tab.
Find and correct all the errors related to the favicon setup.
Write the corrected code after debugging.
15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
<!-- Correct Favicon setup -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style>
h1 {
color: black;
background-color: transparent;
font-size: 30px;
}
</style>
</head>
<body>
<h1>It’s nice to meet you Ma'am Honey</h1>
</body>
</html>
Answer key
16
Summary of Errors
# | Error Location | Error Description | Correct Version | Effect of the Error |
1 | <!DOCTPE html> | Misspelled DOCTYPE declaration ( | <!DOCTYPE html> | May cause inconsistent page rendering |
2 | <meta charset="UTF8"> | Missing hyphen in character encoding | <meta charset="UTF-8"> | Can cause character display problems |
3 | <meta name="viewport" content="width=device-width, initial scale=1.0"> | Missing hyphen between “initial” and “scale” | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | Makes the page unresponsive or improperly scaled |
4 | <link rel="icons" ...> | Wrong attribute value ( | <link rel="icon" ...> | Favicon not recognized by browser |
5 | type="images/x-icon" | Typo in MIME type ( | type="image/x-icon" | Favicon won’t load |
6 | href="favicons.ico" | Wrong file name ( | href="favicon.ico" | Browser can’t find the favicon file |
7 | CSS | Same text and background color | Use contrasting colors, e.g. | Text appears invisible on the page |
| | | | |
17
18
19
20
21
22
23
24
25
26
27
28
Multiple Choice
Why is the DOCTYPE declaration important at the beginning of an HTML document?
1
It makes the text appear in bold
2
It tells the browser which version of HTML is being used
3
It creates the title of the webpage
4
It makes the page load faster
29
Multiple Choice
Which statement best explains why the head tag contains "metadata"?
1
The head tag makes text appear larger
2
The head tag contains information about the page, not the actual page content
3
The head tag is where all images go
4
The head tag makes the page load in a new window
30
Multiple Choice
If you wanted visitors to see "My School Project" in their browser tab, where would you place this text?
1
Inside the body tag
2
Inside an h1 tag
3
Inside the title tag within the head section
4
At the very top of the document
31
Multiple Choice
Why can't you just write text directly inside the HTML tag without using head and body tags?
1
The browser won't know whether the text is information about the page or actual page content
2
The text will appear too small
3
The page will load too slowly
4
The text will appear in the wrong color
32
Multiple Choice
If you wanted to add more information about your webpage (like the author's name), where would this information most likely belong?
1
In the body tag with the visible content
2
In the head tag as metadata
3
Before the DOCTYPE declaration
4
After the closing HTML tag
33
🧩 HTML Debugging Activity Activity Title: Debugging a Basic HTML Page Objective: Identify and correct the errors in the HTML code to make the webpage display correctly.
<!DOCTPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>My Webpage<title>
<link rel="icons" type="images/x-icon" href="favicons.ico">
</head>
<body background-color="lightblue">
<h1>Welcome To My Webpage<h1>
<p>HTML is the standerd markup language for creating Web pages<p>
<img src="image.jpg" alt="My Image" widht="300" heigth="200">
<a href="www.google.com" target="blank">Visit Google<a>
</body>
</html>
34
Open Ended
Identify and correct the errors in the HTML code to make the webpage display correctly.
35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>HTML is the standard markup language for creating web pages.</p>
<img src="image.jpg" alt="My Image" width="300" height="200">
<a href="https://www.google.com" target="_blank">Visit Google</a>
</body>
</html>
Answer key
36
Error | Correction | Explanation |
|---|---|---|
<!DOCTPE html> | <!DOCTYPE html> | The DOCTYPE declaration was misspelled. It must be DOCTYPE to tell the browser it’s an HTML5 document. |
<meta charset="UTF8"> | <meta charset="UTF-8"> | The correct character encoding is UTF-8, not UTF8. The dash is required. |
initial scale=1.0 | initial-scale=1.0 | In the viewport meta tag, property names must use hyphens. |
<title>My Webpage<title> | <title>My Webpage</title> | The closing tag was missing a slash /. |
<link rel="icons" type="images/x-icon"> | <link rel="icon" type="image/x-icon"> | rel="icon" and type="image/x-icon" are the correct attributes. |
body background-color="lightblue" | Added <style> block | You can’t set background color directly as an HTML attribute; use CSS instead. |
<h1>Welcome To My Webpage<h1> | <h1>Welcome to My Webpage</h1> | Missing closing tag / and corrected capitalization for readability. |
<p>...<p> | <p>...</p> | Paragraphs must be properly closed with </p>. |
widht, heigth | width, height | Attribute names were misspelled. |
href="www.google.com" | href="https://www.google.com" | URLs must include a protocol (https://) to be valid links. |
target="blank" | target="_blank" | The underscore is required before blank to open links in a new tab. |
37
38
39
40
41
42
43
44
45
46
HTML Table Borders
HTML tables can have borders of different styles and shapes.
47
HTML Table Borders
Example
table, th, td {
border: 1px solid black;
}
48
49
HTML Table Borders
50
HTML Table Borders
Example table, th, td { border: 1px solid black; border-collapse: collapse; }
51
Style Table Borders
If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:
52
Style Table Borders
Example
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
53
Round Table Borders
With the border-radius property, the borders get rounded corners:
54
Skip the border around the table by leaving out table from the css selector:
Example th, td { border: 1px solid black; border-radius: 10px; }
55
Dotted Table Borders
With the border-style property, you can set the appearance of the border.
56
Dotted Table Borders
Example
th, td {
border-style: dotted;
}
57
Border Color
With the border-color property, you can set the color of the border.
58
Border Color
Example
th, td {
border-color: #96D4D4;
}
59
HTML Table Sizes
HTML tables can have different sizes for each column, row or the entire table.
Use the style attribute with the width or height properties to specify the size of a table, row or column.
60
HTML Table Width
To set the width of a table, add the style attribute to the <table> element:
Example
Set the width of the table to 100%:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the element.
61
HTML Table Width
To set the size of a specific column, add the style attribute on a <th> or <td> element:
Example
Set the width of the first column to 70%:
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the element.
62
HTML Table Row Height
To set the height of a specific row, add the style attribute on a table row element:
Example
Set the height of the second row to 200 pixels:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
63
64
Multiple Choice
Which of the following tag is used to begin creating a table in an HTML document?
1
<table>
2
<tbl>
3
</table>
4
</tbl>
65
Multiple Choice
Which of the following creates a table row?
1
<tr>
2
<row>
3
<trow>
4
<rw>
66
Multiple Choice
Which of the following will create a column in an HTML table?
1
<col>
2
<td>
3
<tcol>
4
<data>
67
Multiple Choice
Which of the following tags is used to create a heading within an HTML table?
1
<h1>
2
<head>
3
<th>
4
<h2>
68
Multiple Choice
Which opening and closing tags are used to define a cell in an HTML table element?
1
<td> </td>
2
<cell> </cell>
3
<tc> </tc>
4
<td> <td>
69
Multiple Choice
Which is the extension for HTML files?
1
.exe
2
.doc
3
.excel
4
.html
70
Multiple Choice
Which of the following can be added to an html document?
1
Tables
2
Hyperlinks
3
Lists
4
All of these
71
Multiple Choice
What does this tag do:
<a href = “ “ > … <a/>
<a href = “ “ > … <a/>
1
Links to an image saved in your work area
2
Links to an image from a website
72
Multiple Choice
The default link color for hyperlinks:
1
green
2
blue
3
purple
4
red
73
Multiple Choice
Which tag is used to create a hyperlink?
1
<a>
2
<href>
3
<b>
4
<i>
74
Multiple Choice
What is the correct CSS property for styling the border of a table?
1
table style
2
table border
3
border
75
Multiple Choice
What is the correct CSS code to turn this table:
1
border-span: single;
2
border-collapse: collapse;
3
border-implode: implode;
76
Fill in the Blank
Use the correct CSS border values to create a solid black 3-pixels border on a table element.
77
Multiple Choice
What is the correct CSS property for styling the width of a table?
1
size
2
table size
3
width
78
Multiple Choice
To specify a table width, you are only allowed to use percentages as a value.
1
True
2
False
79
Multiple Choice
What is a favicon?
1
A social media platform
2
A video streaming service
3
A type of browser extension
4
A small icon that identifies a website
80
Multiple Choice
Where do most browsers display a website's favicon?
1
Left side of the address bar
2
Right side of the address bar
3
Below the URL
4
Above the URL
81
Multiple Choice
Which browser only displays favicons in the page tabs?
1
Firefox
2
Internet Explorer
3
Safari
4
Google Chrome
82
Fill in the Blank
Use CSS styles to make the table 300 pixels wide.
=
"
:
;
"
83
🧩 HTML Debugging Activity: Tables
Activity Title: Debugging an HTML Table
Objective: Identify and fix the HTML table errors to correctly display the data in a well-formatted table.
<!DOCTPE html>
<html>
<head>
<title>Student Grades</title>
</head>
<body>
<h2>Student Grade Table<h2>
<table border="1" cellpadding="5" cellspacing="5"
<tr>
<th>Student Name
<th>Subject
<th>Grade
</tr>
<tr>
<td>Maria Santos</td>
<td>Math</td>
<td>95
<tr>
<td>Juan Dela Cruz
<td>Science</td>
<td>89</td>
<tr>
<td>Ana Reyes</td>
<td>English</td>
<td>92</td>
</table>
</body>
</html>
84
Open Ended
85
Answer Key
86
HTML Table Headers
Sometimes you want your cells to be table header cells. In those cases use the tag instead of the tag:
th stands for table header.
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Let the first row be table header cells:
Example
87
HTML Table Tags
Tag | Description |
|---|---|
Defines a table | |
Defines a header cell in a table | |
Defines a row in a table | |
Defines a cell in a table | |
Defines a table caption | |
Specifies a group of one or more columns in a table for formatting | |
Specifies column properties for each column within a <colgroup> element | |
Groups the header content in a table | |
Groups the body content in a table | |
| |
88
Multiple Choice
What is the correct tag name for a table-cell in HTML?
1
<tc>
2
<td>
3
<tr>
89
Multiple Choice
What is the correct tag name for a table-row in HTML?
1
<tr>
2
<td>
3
<th>
90
Multiple Choice
What is the correct tag name for a table-row in HTML?
1
<tr>
2
<td>
3
<th>
91
Open Ended
Add a table row at the end of the table, with two table cells.
The two table cells should have the value "Eve Jackson" and "94".
92
HTML Table Padding & Spacing
HTML tables can adjust the padding inside the cells, and also the space between the cells.
93
HTML Table - Cell Padding
Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:
Example
th, td {
padding: 15px;
}
94
HTML Table - Cell Padding
To add padding only above the content, use the padding-top property.
Add padding to the other sides with the padding-bottom, padding-left, and padding-right properties:
Example
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
95
HTML Table - Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property on the table element:
Example
table {
border-spacing: 30px;
}
96
Multiple Choice
What is the correct CSS property for styling the padding inside table cells?
1
padding
2
table-padding
3
cell-padding
97
Multiple Choice
What is the correct CSS property for styling the space between the table cells?
1
spacing
2
table-spacing
3
border-spacing
98
Fill in the Blank
.table td { ___________ : 15px; }
99
HTML Table Colspan & Rowspan
HTML tables can have cells that span over multiple rows and/or columns.
100
HTML Table - Colspan
To make a cell span over multiple columns, use the colspan attribute:
Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
101
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:
Example
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
102
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:
Example
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
103
104
Multiple Choice
What is the correct HTML attribute for specifying how many rows a cell should span?
1
span
2
rowspan
3
spanning
105
Multiple Choice
What is the standard file format for favicons?
1
.png
2
.ico
3
.jpg
4
All of the above
106
Multiple Choice
Which attribute specifies the favicon file path in ?
1
href
2
src
3
link
4
file
107
Multiple Choice
What does this code do:
1
Adds a page title
2
Adds a favicon
3
Creates a table
4
Sets a background
108
Multiple Choice
Which rel attribute is used for a favicon?
1
stylesheet
2
icon
3
shortcut
4
favicon
109
Multiple Choice
Can a favicon be in .png format?
1
Yes
2
No
3
Only .ico
4
Only .jpg
110
Multiple Choice
Which HTML section must the for favicon appear?
1
2
3
4
111
Multiple Choice
What happens if no favicon is specified?
1
browser displays default icon
2
page will not load
3
html shows an error
4
browser shows blank
112
Multiple Choice
Which of these is a valid favicon path?
1
images/favicon.ico
2
favicon.ico
3
Both A and B
4
None
113
Multiple Choice
What does this code do:
1
adds a favicon for older browsers
2
adds a page title
3
creates a table
4
sets background color
114
Multiple Choice
Why is it recommended to have multiple favicon sizes?
1
for seo purposes
2
for responsive display
3
to load faster
4
to add animation
115
Multiple Choice
Which size is commonly used for a favicon?
1
16x16 pixels
2
32x32 pixels
3
48x48 pixels
4
All of the above
116
Multiple Choice
A website's favicon doesn’t appear. What might be the reason?
1
Wrong file path
2
Wrong rel attribute
3
Browser cache
4
All of the above
117
Multiple Choice
A company wants the same favicon on all pages. What is the best practice?
1
Include on every page
2
Include favicon in CSS
3
Include favicon only on homepage
4
None of the above
118
Multiple Choice
You need a transparent favicon. Which format should you choose?
1
.ico
2
.png
3
.jpg
4
.gif
119
Multiple Choice
Favicon works in Chrome but not Safari. What is likely the issue?
1
File format compatibility
2
Missing in
to support favicon3
Both A and B
4
Browser does not support favicon
120
Multiple Choice
To ensure favicons load on all devices, what should a developer do?
1
Use multiple sizes and formats
2
Only use .ico format
3
Only use .png format
4
Only include on homepage
121
Multiple Choice
What does the page title appear as in a browser?
1
Browser tab text
2
Webpage content
3
Footer
4
Favicon
122
Multiple Choice
Can a page title include special characters?
1
Yes
2
No
3
Only letters
4
Only numbers
123
Multiple Choice
Is it possible to have multiple
2
3
Both A and B
4
Title
125
Multiple Choice
What happens if
2
3
title.document =
4
document.head.title("Home")
135
Multiple Choice
A blog site has multiple articles. Which title format is the best?
1
Article Title – Blog Name
2
Blog Name – Article Title
3
only Blog Name
4
only Article Title
136
Multiple Choice
A developer wants the title to change based on user login. Which method should be used?
1
JavaScript document.title
2
CSS title property
3
HTML
4
137
Multiple Choice
The homepage of an e-commerce site is missing a title. What is likely the impact?
1
SEO ranking decreases
2
Users may have difficulty navigating tabs
3
Browser shows URL as tab text
4
All of the above
138
Multiple Choice
A website uses same title for all pages. What could be the problem?
1
Poor SEO
2
Confusing browser tabs
3
Both A and B
4
No problem
139
Multiple Choice
Which attribute sets the border thickness of a table?
1
border
2
style
3
cellpadding
4
cellspacing
140
Multiple Choice
What does colspan="2" do?
1
Merge two rows
2
Merge two columns
3
Add two columns
4
Add two rows
141
Multiple Choice
What does rowspan="3" do?
1
Merge three columns
2
Merge three rows
3
Add three columns
4
Add three rows
142
Multiple Choice
How does the use of meta descriptions impact SEO?
1
They are only for social media sharing
2
They have no effect
3
They improve click-through rates
4
They only affect mobile SEO
143
Multiple Choice
What is the purpose of the tag?
1
To add a favicon
2
To set the page title
3
To define the character encoding
4
To link to stylesheets
144
Multiple Choice
What happens if a page title is too long?
1
It causes a loading error
2
It improves SEO
3
It has no effect
4
It gets truncated in search results
145
Multiple Choice
What is the purpose of the tag?
1
To link external stylesheets
2
To add a favicon
3
To control layout on mobile browsers
4
To set the character encoding
146
Multiple Choice
How can you specify a fallback for older browsers that do not support ?
1
There is no fallback
2
Use a