Scribd
Upload
2 views

Lesson 5_ HTML Structure and Content Organization Part 2

This lesson focuses on HTML structure and content organization, covering key elements, forms, tables, and responsive designs. It includes practical instructions on adding favicons, creating tables with various styles, and using block and inline elements effectively. Additionally, it discusses the use of classes and IDs for content organization and the implementation of CSS for styling and layout purposes.

Uploaded by

John harold palmera
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Lesson 5_ HTML Structure and Content Organization Part 2

This lesson focuses on HTML structure and content organization, covering key elements, forms, tables, and responsive designs. It includes practical instructions on adding favicons, creating tables with various styles, and using block and inline elements effectively. Additionally, it discusses the use of classes and IDs for content organization and the implementation of CSS for styling and layout purposes.

Uploaded by

John harold palmera
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 104

Lesson 5: HTML Structure and

Content Organization Part 2 &


Interactive and Responsive HTML
Prepared by: Ms. Kianna Dominique D. Alvarez
Learning Objectives
By the end of this lesson, students will be able to:

● Define and explain key HTML elements and their applications.


● Demonstrate the use of HTML structures in creating web pages.
● Implement forms, tables, and responsive designs effectively.
● Identify the differences between block and inline elements.
● Apply classes, IDs, and divisions for better content organization.
● Embed external content using iframes.
HTML Favicon
What is an HTML Favicon?
● A favicon is a small image displayed next to the page title in the
browser tab.

● It helps in branding and makes your website easily recognizable.

● Favicons are typically simple images with high contrast to ensure


visibility.
HTML Favicon
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.
A favicon image is displayed to the left of the page title in the browser
tab, like this:
HTML Favicon
How to Add a Favicon in HTML
1. Prepare Your Favicon Image:

● Use a .ico, .png, or .svg file.

2. Save the Favicon:

● Place it in the root directory or inside an "images" folder.


● Common filename: "favicon.ico".
HTML Favicon
How to Add a Favicon in HTML
3. Add This Code in index.html (inside <head>):
HTML Page Title
What is an HTML Page Title?

● The page title describes the content and meaning of the page.
● Defined using the <title> element inside the <head> section.
HTML Page Title
The title is shown in the browser's title bar:
HTML Tables
HTML tables allow web developers to arrange data into rows and
columns.
HTML Tables
Define an HTML Table

● A table in HTML consists


of table cells inside rows
and columns.
HTML Tables
Table Cells

● Each table cell is defined by a


<td> and a </td> tag.

● td stands for table data.

● Everything between <td> and


</td> is the content of a table
cell.
HTML Table Borders
● HTML tables can have borders of different styles and shapes.

How To Add a Border

● To add a border, use the CSS border property on table, th, and td
elements:
HTML Table Borders
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:
HTML Table Borders
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:
HTML Table Borders
Round Table Borders

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


HTML Table Borders
Round Table Borders

Skip the border around the table by leaving out table from the css
selector:
HTML Table Borders
Dotted Table Borders

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

The following values are allowed:


● dotted
● dashed
● solid
● double
● groove
● ridge
● inset
● outset
● none
● hidden
HTML Table Borders
Border Color

With the border-color property, you can set the color of the border.
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 Sizes
HTML Table Width

● To set the width of a


table, add the style
attribute to the
<table> element:
HTML Table Sizes
HTML Table Column Width

● To set the size of a


specific column, add the
style attribute on a <th>
or <td> element:
HTML Table Sizes
HTML Table Column Width
HTML Table Sizes
HTML Table Row Height

● To set the height of a specific row, add the style attribute on a table
row element:
HTML Table Sizes
HTML Table Row Height

Example

● Set the height of the second


row to 200 pixels:
HTML Table Headers
● HTML tables can have headers for each column or row, or for many
columns/rows.

● Table headers are defined with th elements. Each th element


represents a table cell.
HTML Table Headers
HTML Table Headers
Vertical Table Headers

● To use the first


column as table
headers, define the
first cell in each row
as a <th> element:
HTML Table Headers
Align Table Headers

● By default, table headers are bold


and centered:

● To left-align the table headers, use


the CSS text-align property:
HTML Table Headers
Align Table Headers

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


HTML Table Headers
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:
HTML Table Headers
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:
HTML Table Padding & Spacing
HTML tables can adjust the padding inside the cells, and also the space
between the cells.
HTML Table Padding & Spacing
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:
HTML Table Padding & Spacing
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:
HTML Table Colspan & Rowspan
HTML tables can have cells that span over multiple rows and/or columns.
HTML Table Colspan & Rowspan
HTML Table - Colspan

● To make a cell span over multiple


columns, use the colspan attribute:
HTML Table Colspan & Rowspan
HTML Table - Rowspan

To make a cell span over multiple rows, use


the rowspan attribute:
HTML Table Styling
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:
HTML Table Styling
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:
HTML Table Styling
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.
● Use an rgba() color to specify the transparency of the color:
HTML Table Styling
Combine Vertical and Horizontal Zebra Stripes
HTML Table Styling
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:
HTML Table Styling
Hoverable Table

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


HTML Table Colgroup
● The <colgroup> element is used to style specific columns of a table.

HTML Table Colgroup

● If you want to style the first two 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 get the style.
● The style attribute specifies the style to give the columns.
HTML Table Colgroup
HTML Table Colgroup
HTML Table Colgroup
Multiple Col Elements

● If you want to style multiple columns with different styles, use more
than one <col> element inside the <colgroup>:
HTML Table Colgroup
Empty Colgroups

● If you want to style columns in the middle of a table, insert an


"empty" <col> element (with no styles) for the columns before:
HTML Table Colgroup
Hide Columns

You can hide columns with the visibility: collapse property:


HTML Unordered Lists
● The HTML <ul> tag defines an unordered (bulleted) 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 Unordered Lists
Choose List Item Marker
HTML Unordered Lists
Disc

Circle
HTML Unordered Lists
Square

No List Marker
HTML Unordered Lists
Nested HTML Lists

Lists can be nested (list inside list):


HTML Ordered Lists
● 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 Ordered Lists
The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:
HTML Ordered Lists
Numbers

Uppercase Letters
HTML Ordered Lists
Lowercase Letters

Roman Numbers - Uppercase


HTML Ordered Lists
Roman Numbers - Lowercase
HTML Ordered Lists
Control List Counting

By default, an ordered list will start counting from 1. If you want to start
counting from a specified number, you can use the start attribute:
HTML Ordered Lists
Nested HTML Lists

Lists can be nested (list inside list):


HTML Other 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:
HTML Block and Inline Elements
Block-level Elements

● A block-level element always starts on a new line, and the browsers


automatically add some space (a margin) before and after the
element.
● A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
● Two commonly used block elements are: <p> and <div>.
● The <p> element defines a paragraph in an HTML document.
● The <div> element defines a division or a section in an HTML
document.
HTML Block and Inline Elements
Here are the block-level elements in HTML:

Here are the block-level elements in HTML:


HTML Block and Inline Elements
Inline Elements

● An inline element does not start on a new line.


● An inline element only takes up as much width as necessary.
HTML Block and Inline Elements
Here are the inline elements in HTML:
HTML Block and Inline Elements
The <div> Element

● The <div> element is often used as a container for other HTML


elements.
● The <div> element has no required attributes, but style, class and id
are common.
● When used together with CSS, the <div> element can be used to
style blocks of content:
HTML Block and Inline Elements
The <div> Element
HTML Block and Inline Elements
The <span> Element

● The <span> element is an inline container used to mark up a part of


a text, or a part of a document.
● The <span> element has no required attributes, but style, class and
id are common.
● When used together with CSS, the <span> element can be used to
style parts of the text:
HTML Block and Inline Elements
The <span> Element
HTML Div Element
● The <div> element is by default a block element, meaning that it
takes all available width, and comes with line breaks before and after.
● The <div> element has no required attributes, but style, class and id
are common.
HTML Div Element
<div> as a container

The <div> element is often used to group sections of a web page


together.
HTML Div Element
Center align a <div> element

If you have a <div> element that is not 100%


wide, and you want to center-align it, set the
CSS margin property to auto.
HTML Div Element
Multiple <div> elements

You can have many <div>


containers on the same page.
HTML Div Element
Multiple <div> elements
HTML Div Element
Aligning <div> elements side by side

When building web pages, you often want to have two or more <div>
elements side by side, like this:
HTML Div Element
Float

● The CSS float property was not originally meant to align <div>
elements side-by-side, but has been used for this purpose for many
years.
● The CSS float property is used for positioning and formatting content
and allows elements to be positioned horizontally, rather than
vertically.
HTML Div Element
Float
HTML Div Element
Float
HTML Div Element
Inline-block

● If you change the <div> element's display property from block to


inline-block, the <div> elements will no longer add a line break
before and after, and will be displayed side by side instead of on top
of each other.
HTML Div Element
Flex

● The CSS Flexbox Layout Module was introduced to make it easier to


design flexible responsive layout structure without using float or
positioning.
● To make the CSS flex method work, surround the <div> elements
with another <div> element and give it the status as a flex container.
HTML Div Element
Flex
HTML Div Element
Grid

● The CSS Grid Layout Module offers a grid-based layout system, with
rows and columns, making it easier to design web pages without
having to use floats and positioning.
● Sounds almost the same as flex, but has the ability to define more
than one row and position each row individually.
● The CSS grid method requires that you surround the <div> elements
with another <div> element and give the status as a grid container,
and you must specify the width of each column.
HTML Div Element
Grid
HTML Div Element
Grid
HTML class Attribute
● The class attribute is often used to point to a class name in a style
sheet. It can also be used by a JavaScript to access and manipulate
elements with the specific class name.
● In the following example we have three <div> elements with a class
attribute with the value of "city". All of the three <div> elements will
be styled equally according to the .city style definition in the head
section:
HTML class Attribute
HTML class Attribute
Use of the class Attribute in JavaScript

● The class name can also be used by JavaScript to perform certain


tasks for specific elements.
● JavaScript can access elements with a specific class name with the
getElementsByClassName() method:
HTML class Attribute
Use of the class Attribute in JavaScript
HTML class Attribute
Use of the class Attribute in JavaScript
HTML id Attribute
● The HTML id attribute is used to specify a unique id for an HTML
element.
● You cannot have more than one element with the same id in an
HTML document.
● The id attribute specifies a unique id for an HTML element. The value
of the id attribute must be unique within the HTML document.
● The id attribute is used to point to a specific style declaration in a
style sheet. It is also used by JavaScript to access and manipulate the
element with the specific id.
HTML id Attribute
● The syntax for id is: write a hash character (#), followed by an id
name. Then, define the CSS properties within curly braces {}.
● In the following example we have an <h1> element that points to the
id name "myHeader". This <h1> element will be styled according to
the #myHeader style definition in the head section:
HTML id Attribute
HTML id Attribute
Difference Between Class and ID

● A class name can be used by multiple HTML elements, while an id


name must only be used by one HTML element within the page:
HTML id Attribute
HTML id Attribute
HTML Iframes
An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax

● The HTML <iframe> tag specifies an inline frame.


● An inline frame is used to embed another document within the
current HTML document.

Syntax
HTML Iframes
Iframe - Remove the Border

● By default, an iframe has a border around it.


● To remove the border, add the style attribute and use the CSS border
property:
HTML Iframes
Iframe - Border

With CSS, you can also change the size, style and color of the iframe's
border:
HTML Iframes
Iframe - Set Height and Width

● Use the height and width attributes to specify the size of the iframe.
● The height and width are specified in pixels by default:

Or you can add the style attribute and use the CSS height and width
properties:
HTML Iframes
Iframe - Target for a Link

● An iframe can be used as the target frame for a link.


● The target attribute of the link must refer to the name attribute of
the iframe:
HTML Iframes
Iframe - Target for a Link
HTML Iframes
Iframe - Target for a Link
References:
● https://www.w3schools.com/html/html_favicon.asp
● https://www.w3schools.com/html/html_page_title.asp
● https://www.w3schools.com/html/html_tables.asp
● https://www.w3schools.com/html/html_lists.asp
● https://www.w3schools.com/html/html_blocks.asp
● https://www.w3schools.com/html/html_div.asp
● https://www.w3schools.com/html/html_classes.asp
● https://www.w3schools.com/html/html_id.asp
● https://www.w3schools.com/html/html_iframe.asp

You might also like