UNIT III.

BUILD A WEBSITE
WITH HTML5
 UNIT TOPICS

01 02 03

DESIGN FOR INSERTING LISTS SEMANTICS VS

MULTIPLATFORM • ORDERED NON-SEMANTICS
DISPLAY WITH • UNORDERED LISTS ELEMENTS
RESPONSIVE • DESCRIPTION LISTS
DESIGN
Intended Learning Outcomes

1. 2. 3
define semantic and use basic responsive create web pages
non-semantic design techniques, that utilize ordered,
elements in HTML5 and such as viewport unordered, and
provide examples of settings and media description lists to
each. queries, to create a present information
webpage that adapts effectively; and
to different screen
sizes;
Design for multiplatform
display with responsive
design
What is a Cascading Style Sheet?

Cascading Style Sheets, or CSS, is a scripting language used

to characterize the layout of an HTML document. CSS lets
web developers determine how HTML components are to be
viewed on various platforms and screen sizes.
CSS Techniques for Responsive
Design
One of the most essential techniques is the use of media queries,
which allow developers to apply different styles based on the
characteristics of the device, such as its screen size or
Another powerful
resolution. technique in responsive design is the use of
CSS Grid and Flexbox, which help create flexible, fluid layouts.
CSS Grid allows developers to define complex grid structures
that automatically adjust based on the available space, while
Flexbox is ideal for aligning items and creating responsive
containers that adjust to their content.
CSS Example:
body {
background-color: blue;
}
h1{
color: red
text-align: center;
}
Inserting Lists
Inserting Lists
•There are 2 kinds of lists in HTML: unordered or bulleted lists
and ordered or numbered lists.
•The <ul> and </ul> tags are used to create unordered or
bulleted lists.
•The <ol> and </ol> tags are used to create ordered lists or
numbered lists.
•Items in the lists are added by using the <li> and </li> tags.
The <dl> tag defines a description list.
Ordered Lists
An ordered list, sometimes called a numbered list, is useful for
presenting a series of steps that the user should perform in
order. To create an ordered list, you use the <ol> and </ol> tag
pair. The ordered list that you create will consist of two or more
items. To specify each list item, which is an entry within an
ordered or unordered list, you use the <li> and </li> tag pair.
Ordered Lists
By default, when you create an ordered list, your browser can
use the numbers 1, 2, 3, and so on to precede each of the list
items. Depending on the list content, there can be instances
when you have to use letters or even Roman numerals for each
list item. To control the type of numbering the browser uses
within an ordered list, you can use a CSS property list-style-type.
Output
The type attribute
• The type attribute of the <ol> tag defines the list item
marker.
• type=“1” – The list item will be numbered with numbers
• type=“A” – The list item will be numbered with upper
case letters
• type=“a” – The list item will be numbered with lower case
letters.
• type=“I” – The list item will be numbered with upper case
roman numbers.
• type=“i” – The list item will be numbered with lower case
roman numbers.
Output
Output
Output
Creating Unordered List
• An unordered list, often called a bulleted list, contains a list of
items in no particular order, such as a grocery list, features
for a new product, or browsers that support a particular HTML
tag or attribute.
• To create an unordered list within a webpage, you use the
<ul> and </ul> tag pair.
• Again to identify the items within the list, you can use the <li>
and </li> list item tag pair.
The CSS list-style-type property
•The list-style-type property is used to define the style of the
list item marker in unordered lists.
•The disc value sets the list item marker to a bullet.
•The circle value sets the list item marker to a circle.
•The square value sets the list item marker to a square.
•The none value will not display markers on list items.
Output
Output
The CSS list-style-image property
•The list-style-image property used to specify an image as the
list item marker in unordered lists.

<ul style = “list-style-image:url(‘image.jpg’)”>

<li>item 1</li>
<li>item 2</li>
</ul>
The CSS list-style-position
property
•The list-style-position property specifies the position of the list
item marker in unordered lists.
•The outside value means that the bullet points will be outside
the list item. The start of each line of a list item will be aligned
vertically.
•The inside value means that the bullet points will be inside the
list item. The list item will be part of the text and push the text at
the start.
The CSS list Shorthand
Property
•The list-style property is a shorthand property. It is use to set all
the list properties in one declaration:

Example:
<ul style = “list-style: square inside url(‘image.jpg’)”>
Description Lists
• HTML also supports description lists.
• A description list is a list of terms, with a description of each
term.
• The <dl> and </dl> tags define the description list.
• The <dt> and </dt> tags define the term (name).
• The <dd> and </dd> tags describe each term.
Output
LABORATORY EXERCISE 3
Instructions
• Create a new HTML file and save it as Laboratory3.html
• The title should be Laboratory 3.
• Create a <h1> heading that will display “Types of Websites”
• Create another <h1> heading that will display “Research
Chapters”
• Both headings should be written using “Calibri”.
• Using unordered and ordered lists, create a web page that
will display the output given next slide.
• All list items should be written using “Georgia”.
OUTPUT
LABORATORY EXERCISE 4
Instructions
• Create a new HTML file and save it as Laboratory4.html
• The title should be Laboratory 4
• Create a <h1> heading that will display Chapter Definitions
• The heading should be centered in the screen and should be
colored “MediumSeaGreen”.
• All description terms should be colored “Tomato”.
• Using description lists, create a web page that will display the
output given next slide.
OUTPUT
 Semantics vs Non-
semantics Elements
Semantics Elements
Semantic elements are HTML tags that carry specific
meanings about the content they enclose, helping both
developers and search engines understand the structure of
a web page.

Examples of semantic elements include <header>, <article>,

<footer>, <section>, and <nav>
Semantic elements in HTML
• <figcaption>
• <article>
• <section>
• <main>
• <figure>
• <aside>
• <summary>
• <mark>
• <footer>
• <details>
• <time>
• <nav>
• <header>
HTML <section> Element
• The <section> element is used to define distinct sections of
content within a webpage, often with a specific theme or
topic.
• It is commonly used for large portions of content like
chapters, an introduction, or news items.
• For example, a webpage could include sections for the
introduction, main content, and contact information.
HTML <article> Element
• The <article> element specifies independent, self-contained
content that could stand alone and be distributed separately
from the rest of the webpage.
• An article should make sense on its own and it should be
possible to distribute it independently from the rest of the
site.
HTML <footer> Element
• The <footer> element defines a footer for a document or
section, typically containing important information such as
authorship details, copyright information, contact details, a
sitemap, or links to related documents.
HTML <nav> Element
• The <nav> element is designed to contain a set of navigation
links that guide users through a website’s primary sections.
• It is important to note that not all links on a webpage should
be placed inside a <nav> element; only major blocks of
navigation links, such as a site’s menu or table of contents,
belong here.
HTML <aside> Element
• The <aside> element is used to define content that is related
to the surrounding content but can be considered as
secondary or tangential. It is often used for sidebars, pull
quotes, advertisements, or other supplementary content that
enhances the main topic of the page but doesn’t directly
contribute to the primary narrative.
HTML <figure> and <figcaption>
Elements
• The <figure> element is used to represent self-contained
content, such as illustrations, diagrams, photos, or code
listings, that is typically accompanied by a caption.
• The <figcaption> element, which provides a description or
caption for the content inside the <figure> element, can be
placed either at the beginning or the end of the <figure>.
Non-Semantic Elements
• The non-semantic elements do not provide any intrinsic
meaning about the content they contain. These include tags
like <div> and <span>, which are used primarily for layout and
styling purposes rather than to convey content structure.
Thank you