Scribd
Upload
14 views17 pages

Unit 1. HTML 4

Uploaded by

Radhika sushma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
14 views17 pages

Unit 1. HTML 4

Uploaded by

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

CLASS : X

SUBJECT : COMPUTER APPLICATIONS


CHAPTER : HTML
PERIOD : 7 & 8
PREREQUSITE
▶ Structure of HTML document
▶ Creating, editing and accessing the webpage
LEARNING OBJECTIVES
▶ Usage of HTML tags:

▶ List Tag
▶ Unordered list(ul)
▶ Ordered list(ol)
li (list item)
▶ Attributes of ul
(type), ol(type,
start)
▶Definition lists:
dl, dt and dd
List Tag
▶ Lists are used to group together related points of information so they
are clearly associated with each other and easy to read.

▶ HTML offers three ways for specifying lists of information.

 <ul> − An unordered list. This will list items using plain bullets.
 <ol> − An ordered list. This will use different schemes of numbers
to list the items.
 <dl> − A definition list. This arranges items in the same way as they
are
arranged in a dictionary.
 The HTML <li> tag represents a list item in ordered and unordered
lists.
 The <li> tag is placed inside either a <ol> tag or a <ul> to represent
each individual item within that list.
Unordered list(ul) Tag
▶ Unordered lists are used when a set of ▶ An example is a shopping list:
items can be placed in any order(randomly).
• milk
▶ This list appears with a bullet symbol
• bread
(by default)
• butter
▶ It starts with <UL>tag
• coffee beans
▶ Each list item starts with <LI> tag
HTML CODE
▶ It is a container tag
<ul>
▶ Syntax: <ul>
<li>bread</li>
<li>...</li>
<li>coffee beans</li>
<li>...</li>
<li>milk</li>
<li>...</li>
<li>butter</li>
</ul>
</ul>
Attributes of the UL tag
▶ ‘type’ attribute can be used to change the default bullet style for the list items
▶ There can be 3 types of bulleted list:

▶ Disc This is the default style. In this style, the list items are marked with bullets.
Syntax : <ul type = "disc"> or <ul>

▶ Circle In this style, the list items are marked with circle.
Syntax : <ul type = "circle">

▶ square In this style, the list items are marked with square.
Syntax : <ul type = "square“>
Ordered list(ol) Tag An example is a baking process:

1.Gather and mix ingredients


2.Place ingredients in a baking dish
3.Bake in oven for an hour
▶ Ordered lists are used when a set of 4.Remove from oven
items should be placed in a specific 5. Allow to stand for ten minutes
order. 6. Serve
▶ This list starts with <ol>tag and
each HTML CODE
list item starts with <li> tag
<ol>
▶ Displays numbered list (by default)
<li>Gather and mix
▶ It is a container tag ingredients</li>

▶ Syntax: <ol> <li>...</li> <li>Place ingredients in a baking


<li>...</li> <li>...</li> </ol> dish</li>
<li>Bake in oven for an
hour</li>
<li>Remove from oven</li>
<li>Allow to stand for ten
minutes</li>
<li>Serve</li>
</ol>
Attributes of the OL tag
▶ ‘type’ attribute can be used to change the default bullet style for the list items

▶ There can be 3 types of bulleted list:

▶ <ol type = "1"> - Default-Case Numerals.

▶ <ol type = "I"> - Upper-Case Numerals.

▶ <ol type = "i"> - Lower-Case Numerals.

▶ <ol type = "A"> - Upper-Case Letters.

▶ <ol type = "a"> - Lower-Case Letters.


‘start’ attribute of OL
tag
▶ We can use start attribute for <ol> tag to specify the starting point of
numbering we need.

▶ Following are the possible options −

 <ol type = "1" start = "4"> - Numerals starts with 4.


 <ol type = "I" start = "4"> - Numerals starts with IV.
 <ol type = "i" start = "4"> - Numerals starts with iv.
 <ol type = "a" start = "4"> - Letters starts with d.
 <ol type = "A" start = "4"> - Letters starts with D.
HTML CODE HTML CODE
<html> <html>
<head>
<head>
<title>HTML Ordered List</title>
<title>HTML Ordered List</title>
</head>
</head>
<body> <body>
<ol type = "i" start = "4">
<ol type = “A" start = "4">
<li>Beetroot</li>
<li>Beetroot</li>
<li>Ginger</li> <li>Ginger</li> <li>Potato</li>
<li>Radish</li>
<li>Potato</li> </ol> <li>Radish</li> </ol>
</body> </body>
</html> </html>

OUTPUT OUTPUT
iv. Beetroot D. Beetroot
v. Ginger E. Ginger
vi. Potato F. Potato
vii. Radish G. Radish
Definition lists
▶ HTML supports a list style where entries are listed like in a dictionary
or encyclopedia.

▶ The definition list is the ideal way to present a glossary, list of terms,
or other name/value list.

▶ Definition List makes use of following three tags.


 <dl> − Defines the start of the definition list
 <dt> − To display a term
 <dd> − To display term definition
 </dl> − Defines the end of the list
HTML CODE
<html>
<head>
HTML
<title>HTML Definition List</title> This stands for Hyper Text Markup Language
</head> HTTP
This stands for Hyper Text Transfer Protocol
<body>
<dl>
<dt>HTML</dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt>HTTP</dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
RECAP
▶ List Tag help to display data in form of numbered or bulleted lists

▶ There are three types of lists in HTML

▶ Unordered list(ul) – for bulleted list

▶ Ordered list(ol) – for numbered list

▶ Definition list - entries are listed like in a dictionary

li (list item) – Used to represent each individual item within that list.

▶ Attributes of ul (type)

▶ Attributes of ol (type, start)

▶ Definition lists: dl, dt and dd


NEXT CLASS

▶ Insert images: img (attributes: src, width,


height, alt),
▶ Embed audio and video in a HTML page.

You might also like