COMPUTER PROGRAMMING

(.NET TECHNOLOGY) 2
Second Semester
Quarter 1 Module 4 Part 1

HYPERTEXT MARKUP LANGUAGE (HTML) TUTORIAL SERRIES

▶️HTML FAVICON ▶️ HTML LISTS

▶️HTML PAGE TITLE ▶️ HTML BLOCK & INLINE
▶️HTML TABLES

Name of Student:
 Specific Objectives:
WHAT I At the end of the lesson, you should achieve the following objectives:
NEED
TO KNOW 1. Identify the Block and Inline Elements.
2. Understand the different table styles.
3. Comprehend the favicon file formart.

WHAT I KNOW

Elucidate your undertsanding about favicon file.

_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_____________________________________________________________________________________

WHAT’S NEW

Direction: Answer the question below.

Explain the different favcon file format.
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
Purpose of block and inline element.
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

WHAT IS IT

Favicon File Format Support

The following table shows the file format support for a favicon image:

Chapter Summary
Use the HTML <link> element to insert a favicon

1
HTML Link Tag

HTML Page Title

Every web page should have a page title to describe the meaning of the page.
The <title> element adds a title to your page:

2
 The title should describe the content and the meaning of the page.
The page title is very important for search engine optimization (SEO). The text is used by search
engine algorithms to decide the order when listing pages in search results.
The <title> element:
• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search engine-results
So, try to make the title as accurate and meaningful as possible!
HTML Title Tag

HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

3
 Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.

You can have as many rows as you like in a table; just make sure that the number of cells are the
same in each row.
Note: There are times when a row can have less or more cells than another. You will learn about that in
a later chapter.

Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of
the <td> tag:
th stands for table header.

4
 By default, the text in <th> elements are bold and centered, but you can change that with CSS.
HTML Table Borders
HTML tables can have borders of different styles and shapes.

How To Add a Border

When you add a border to a table, you also add borders around each table cell:

To add a border, use the CSS border property on table, th, and td elements:

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to
collapse.
This will make the borders collapse into a single border:

5
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:

Round Table Borders

With the border-radius property, the borders get rounded corners:

Skip the border around the table by leaving out table from the css selector:

6
Dotted Table Borders
With the border-style property, you can set the appearance of the border.

The following values are allowed:

Border Color
With the border-color property, you can set the color of the border.

7
 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.
HTML Table Width
To set the width of a table, add the style attribute to the <table> element:

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 <body> element.

HTML Table Column Width

To set the size of a specific column, add the style attribute on a <th> or <td> element:

8
 HTML Table Row Height

To set the height of a specific row, add the style attribute on a table row element:

9
HTML Table Headers
HTML tables can have headers for each column or row, or for many columns/rows.

HTML Table Headers

Table headers are defined with th elements. Each th element represents a table cell.

Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a <th> element:

10
 Align Table Headers
By default, table headers are bold and centered:

To left-align the table headers, use the CSS text-align property:

Header for Multiple Columns

You can have a header that spans over two or more columns.

To do this, use the colspan attribute on the <th> element:

11
Table Caption
You can add a caption that serves as a heading for the entire table.

To add a caption to a table, use the <caption> tag:

12
HTML Table Colspan & Rowspan
HTML tables can have cells that span over multiple rows and/or columns.

HTML Table - Colspan

To make a cell span over multiple columns, use the colspan attribute:

Note: The value of the colspan attribute represents the number of columns to span.
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:

13
Note: The value of the rowspan attribute represents the number of rows to span.

HTML Table Styling

Use CSS to make your tables look better.
HTML Table - Zebra Stripes
If you add a background color on every other table row, you will get a nice zebra stripes effect.

To style every other table row element, use the :nth-child(even) selector like this:

Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc. instead of 2,4,6 etc.

HTML Table - Vertical Zebra Stripes

To make vertical zebra stripes, style every other column, instead of every other row.

Set the :nth-child(even) for table data elements like this:

Note: Put the :nth-child() selector on both th and td elements if you want to have the styling on both
headers and regular table cells.

Combine Vertical and Horizontal Zebra Stripes

You can combine the styling from the two examples above and you will have stripes on every other row and
every other column.
If you use a transparent color you will get an overlapping effect.

14
Use an rgba() color to specify the transparency of the color:

Horizontal Dividers

If you specify borders only at the bottom of each table row, you will have a table with horizontal
dividers.
Add the border-bottom property to all tr elements to get horizontal dividers:

Hoverable Table
Use the :hover selector on tr to highlight table rows on mouse over:

15
HTML Table Colgroup
The <colgroup> element is used to style specific columns of a table.
HTML Table Colgroup
If you want to style the two first columns of a table, use the <colgroup> and <col> elements.

The <colgroup> element should be used as a container for the column specifications.
Each group is specified with a <col> element.
The span attribute specifies how many columns that get the style.
The style attribute specifies the style to give the columns.

Note: The <colgroup> tag must be a child of a <table> element and should be placed before any other
table elements, like <thead>, <tr>, <td> etc., but after the <caption> element, if present.

Legal CSS Properties

There is only a very limited selection of CSS properties that are allowed to be used in the colgroup:
width property
visibility property
background properties
border properties

All other CSS properties will have no effect on your tables.

16
 Multiple Col Elements
If you want to style more columns with different styles, use more <col> elements inside the <colgroup>:

Empty Colgroups
If you want to style columns in the middle of a table, insert a "empty" <col> element (with no styles)
for the columns before:

Hide Columns
You can hide columns with the visibility: collapse property:

17
HTML Lists
HTML lists allow web developers to group a set of related items in lists.

Unordered HTML 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:

18
 Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:

HTML Description Lists

HTML also supports 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> tag
describes each term:

19
HTML Unordered Lists
The HTML <ul> tag defines an unordered (bulleted) list
Unordered HTML 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:

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker. It can have one of
the following values:

20
 The src Attribute
The required src attribute specifies the path (URL) to the image.
Note: When a web page loads, it is the browser, at that moment, that gets the image
from a web server and inserts it into the page. Therefore, make sure that the image
actually stays in the same spot in relation to the web page, otherwise your visitors will
get a broken link icon. The broken link icon and the alt text are shown if the browser
cannot find the image.

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some
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 image:

If a browser cannot find an image, it will display the value of the alt attribute:

Tip: A screen reader is a software program that reads the HTML code, and allows the user to
"listen" to the content. Screen readers are useful for people who are visually impaired or
learning disabled.

Image Size - Width and Height

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

Alternatively, you can use the width and height attributes:

20
 The width and height attributes always define the width and height of the image in
pixels.
Note: Always specify the width and height of an image. If width and height are not
specified, the web page might flicker while the image loads.

Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.
However, we suggest using the style attribute. It prevents styles sheets from
changing the size of images:

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src
attribute:

Images on Another Server/Website

Some web sites point to an image on another server.
To point to an image on another server, you must specify an absolute (full) URL in the
src attribute:

21
Notes on external images: External images might be under copyright. If you do not get
permission to use it, you may be in violation of copyright laws. In addition, you cannot
control external images; they can suddenly be removed or changed.
Animated Images
HTML allows animated GIFs:

Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:

Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:

Common Image Formats

Here are the most common image file types, which are supported in all browsers
(Chrome, Edge, Firefox, Safari, Opera):

22
 Chapter Summary
Use the HTML <img> element to define an image
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if it cannot be
displayed
Use the HTML width and height attributes or the CSS width and height properties to
define the size of the image
Use the CSS float property to let the image float to the left or to the right

WHAT’S MORE

Direction: Answer the question below.

Explain how you can hide content.
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
______________________________________________________________________________________

WHAT I CAN DO

Direction: Explain the following color vallues.

⏹️ RGB
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

⏹️ HEX
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________

⏹️HSLA
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________

⏹️RGBA
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________

WHAT I CAN SHOW

Expound the function of HTML Links.

_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

21