JoddddComputerscienceChaptter_5.pptx.pdf
ankitayadavay123
3 views
16 slides
Mar 05, 2025
Slide 1 of 16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
About This Presentation
Good for education
Slide Content
Organizing Information with Lists
Institute of Technical Education and Research (ITER),
Siksha 'O' Anusandhan University (SOA University)
Modern Web Development Workshop - 1
Institute of Technical Education and Research (ITER),
Siksha 'O' Anusandhan University (SOA University)
Modern Web Development Workshop - 1
➢Lists are a general-purpose container for collections of
things.
➢HTML lists allow web developers to group a set of related
items in lists.
➢HTML offers three ways for specifying lists:
○HTML Unordered List or Bulleted List
■Using html <ul> & <li> tag
○HTML Ordered List
■Using html <ol> & <li> tag
○HTML Description List
■Using <dl>, <dt> & <dd> tag
HTML Lists
things.
➢HTML lists allow web developers to group a set of related
items in lists.
➢HTML offers three ways for specifying lists:
○HTML Unordered List or Bulleted List
■Using html <ul> & <li> tag
○HTML Ordered List
■Using html <ol> & <li> tag
○HTML Description List
■Using <dl>, <dt> & <dd> tag
HTML Lists
<!DOCTYPE html>
<html>
<head>
<title>Lesson-5 Example-1</title>
</head>
<body bgcolor=cyan>
<p>Dante’s Divine Comedy consists
of three books:</p>
<ul>
<li>The Inferno</li>
<li>The Purgatorio</li>
<li>The Paradiso</li>
</ul>
</body>
</html>
HTML Unordered List or Bulleted List
<html>
<head>
<title>Lesson-5 Example-1</title>
</head>
<body bgcolor=cyan>
<p>Dante’s Divine Comedy consists
of three books:</p>
<ul>
<li>The Inferno</li>
<li>The Purgatorio</li>
<li>The Paradiso</li>
</ul>
</body>
</html>
HTML Unordered List or Bulleted List
➢Unordered lists can be customized using the type attribute or the list-style-type
property
○disc—A disc or bullet; this style is the default.
○square—Obviously, a square rather than a disc.
○circle—As compared with the disc, which most browsers render as a filled
circle, this value should generate an unfilled circle
<ul style=“list-style-type: disc”>
<li>DAT - Digital Audio Tapes</li>
<li>CD - Compact Discs</li>
<li>Cassettes</li>
</ul>
<ul style=“list-style-type: square”>
<li>DAT - Digital Audio Tapes</li>
<li>CD - Compact Discs</li>
<li>Cassettes</li>
</ul>
<ul style=“list-style-type: circle”>
<li>DAT - Digital Audio Tapes</li>
<li>CD - Compact Discs</li>
<li>Cassettes</li>
</ul>
Customizing Unordered Lists
➔the type attribute is no longer valid for HTML5
property
○disc—A disc or bullet; this style is the default.
○square—Obviously, a square rather than a disc.
○circle—As compared with the disc, which most browsers render as a filled
circle, this value should generate an unfilled circle
<ul style=“list-style-type: disc”>
<li>DAT - Digital Audio Tapes</li>
<li>CD - Compact Discs</li>
<li>Cassettes</li>
</ul>
<ul style=“list-style-type: square”>
<li>DAT - Digital Audio Tapes</li>
<li>CD - Compact Discs</li>
<li>Cassettes</li>
</ul>
<ul style=“list-style-type: circle”>
<li>DAT - Digital Audio Tapes</li>
<li>CD - Compact Discs</li>
<li>Cassettes</li>
</ul>
Customizing Unordered Lists
➔the type attribute is no longer valid for HTML5
➢Ordered lists are lists in which each item is numbered or labeled with a
counter of some kind (like letters or roman numerals)
➢Use numbered lists only when the sequence of items on the list is
relevant.
HTML Ordered List (Numbered Lists)
<h1>How to Boil an Egg</h1>
<ol>
<li>Put eggs in a pot filled with cold
water</li>
<li>Bring the water to a boil</li>
<li>Take the pot off the heat, cover it, and let it
sit for 12 minutes</li>
<li>Remove the eggs from the hot water and
cool them by running water over them or
placing them in a bowl of ice water to cool
off</li>
<li>Peel and eat</li>
</ol>
counter of some kind (like letters or roman numerals)
➢Use numbered lists only when the sequence of items on the list is
relevant.
HTML Ordered List (Numbered Lists)
<h1>How to Boil an Egg</h1>
<ol>
<li>Put eggs in a pot filled with cold
water</li>
<li>Bring the water to a boil</li>
<li>Take the pot off the heat, cover it, and let it
sit for 12 minutes</li>
<li>Remove the eggs from the hot water and
cool them by running water over them or
placing them in a bowl of ice water to cool
off</li>
<li>Peel and eat</li>
</ol>
➢Ordered lists are lists in which each item is numbered or labeled with a
counter of some kind (like letters or roman numerals)
➢Use numbered lists only when the sequence of items on the list is
relevant.
➢There are two ways to change the numbering style: the CSS property
list-style-type, and the type attribute, which is obsolete in HTML5.
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Customizing Ordered Lists
counter of some kind (like letters or roman numerals)
➢Use numbered lists only when the sequence of items on the list is
relevant.
➢There are two ways to change the numbering style: the CSS property
list-style-type, and the type attribute, which is obsolete in HTML5.
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Customizing Ordered Lists
➢If you’re creating a new ordered list, you should always use the CSS
property.
<ol style=“list-style-type: lower-alpha;”>
Customizing Ordered Lists
<h1>The days of the week in French</h1>
<ol style=“list-style-type: upper-roman;”>
<li>Lundi</li>
<li>Mardi</li>
<li>Mercredi</li>
<li>Jeudi</li>
<li>Vendredi</li>
<li>Samedi</li>
<li>Dimanche</li>
</ol>
property.
<ol style=“list-style-type: lower-alpha;”>
Customizing Ordered Lists
<h1>The days of the week in French</h1>
<ol style=“list-style-type: upper-roman;”>
<li>Lundi</li>
<li>Mardi</li>
<li>Mercredi</li>
<li>Jeudi</li>
<li>Vendredi</li>
<li>Samedi</li>
<li>Dimanche</li>
</ol>
➢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.
Customizing Ordered Lists
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>The Last Six Months of the Year (and the
Beginning of the Next Year):</p>
<ol style=“list-style-type: upper-roman;” start=“7”>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
<li style=“list-style-type: lower-roman;”>January</li>
</ol>
counting from a specified number, you can use the start attribute.
Customizing Ordered Lists
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>The Last Six Months of the Year (and the
Beginning of the Next Year):</p>
<ol style=“list-style-type: upper-roman;” start=“7”>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
<li style=“list-style-type: lower-roman;”>January</li>
</ol>
➢As with the type attribute, you can change the value of an entry’s
number at any point in a list. You do so by using the value attribute
in the <li> tag. Assigning a value in an <li> tag restarts numbering
in the list starting with the affected entry.
➢Suppose that you wanted the last three items in a list of ingredients
to be 10, 11, and 12 rather than 6, 7, and 8. You can reset the
numbering at Eggs using the value attribute, as follows:
Customizing Ordered Lists
<h1>Cheesecake Ingredients</h1>
<ol>
<li>Quark Cheese</li>
<li>Honey</li>
<li>Cocoa</li>
<li>Vanilla Extract</li>
<li>Flour</li>
<li value=“10”>Eggs</li>
<li>Walnuts</li>
<li>Margarine</li>
</ol>
number at any point in a list. You do so by using the value attribute
in the <li> tag. Assigning a value in an <li> tag restarts numbering
in the list starting with the affected entry.
➢Suppose that you wanted the last three items in a list of ingredients
to be 10, 11, and 12 rather than 6, 7, and 8. You can reset the
numbering at Eggs using the value attribute, as follows:
Customizing Ordered Lists
<h1>Cheesecake Ingredients</h1>
<ol>
<li>Quark Cheese</li>
<li>Honey</li>
<li>Cocoa</li>
<li>Vanilla Extract</li>
<li>Flour</li>
<li value=“10”>Eggs</li>
<li>Walnuts</li>
<li>Margarine</li>
</ol>
➢ The default value is outside, and the only alternative is inside.
Use of use the list-style-position and list-style
<ul style=”list-style-position: inside;”>
<li>Always use Pillsbury’s Best Flour.</li>
<li>Sift flour twice before adding to cakes or
breakfast cakes.</li>
<li>Make all measurements level by using edge
of knife to lightly scrape off from top of cup or
spoon until material is even with the edges.</li>
<li>Use same sized cups or spoons in measuring
for the same recipe.</li>
<li>Before starting to make recipe, read through
carefully, then put on table all the materials and
tools needed in making that particular recipe. </li>
</ul>
➢You can specify three values for list-style: the list style type, the list style
position, and the URL of the image to be used as the bullet style.
<ul style=“list-style: circle inside URL(/bullet.gif)”>
<li>Example</li>
</ul>
Use of use the list-style-position and list-style
<ul style=”list-style-position: inside;”>
<li>Always use Pillsbury’s Best Flour.</li>
<li>Sift flour twice before adding to cakes or
breakfast cakes.</li>
<li>Make all measurements level by using edge
of knife to lightly scrape off from top of cup or
spoon until material is even with the edges.</li>
<li>Use same sized cups or spoons in measuring
for the same recipe.</li>
<li>Before starting to make recipe, read through
carefully, then put on table all the materials and
tools needed in making that particular recipe. </li>
</ul>
➢You can specify three values for list-style: the list style type, the list style
position, and the URL of the image to be used as the bullet style.
<ul style=“list-style: circle inside URL(/bullet.gif)”>
<li>Example</li>
</ul>
➢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.
➢Definition lists usually are formatted in browsers with the terms
and definitions on separate lines, and the left margins of the
definitions are indented.
➢The HTML definition list contains following three tags:
○<dl> tag defines the start of the list.
○<dt> tag defines a term.
○<dd> tag defines the term definition (description).
HTML Definition or Description Lists
term.
➢The <dl> tag defines the description list, the <dt> tag defines the
term (name), and the <dd> tag describes each term.
➢Definition lists usually are formatted in browsers with the terms
and definitions on separate lines, and the left margins of the
definitions are indented.
➢The HTML definition list contains following three tags:
○<dl> tag defines the start of the list.
○<dt> tag defines a term.
○<dd> tag defines the term definition (description).
HTML Definition or Description Lists
<dl>
<dt>Basil</dt>
<dd>Annual. Can grow four feet high; the scent of its tiny white flowers is
heavenly</dd>
<dt>Oregano</dt>
<dd>Perennial. Sends out underground runners and is difficult to get rid of once
established.</dd>
<dt>Coriander</dt>
<dd>Annual. Also called cilantro, coriander likes cooler weather of spring and fall.</dd>
</dl>
HTML Definition or Description Lists
<dt>Basil</dt>
<dd>Annual. Can grow four feet high; the scent of its tiny white flowers is
heavenly</dd>
<dt>Oregano</dt>
<dd>Perennial. Sends out underground runners and is difficult to get rid of once
established.</dd>
<dt>Coriander</dt>
<dd>Annual. Also called cilantro, coriander likes cooler weather of spring and fall.</dd>
</dl>
HTML Definition or Description Lists
➢A list created within another list is known as Nested List. HTML also
allow nesting of lists within one another to generate a complex document
structures.
HTML Nested Lists
<h1>Peppers</h1>
<ul>
<li>Bell</li>
<li>Chile</li>
<li>
<ul>
<li>Serrano</li>
<li>Jalapeno</li>
<li>Habanero</li>
<li>Anaheim</li>
</ul>
</li>
<li>Szechuan</li>
<li>Cayenne</li>
</ul>
allow nesting of lists within one another to generate a complex document
structures.
HTML Nested Lists
<h1>Peppers</h1>
<ul>
<li>Bell</li>
<li>Chile</li>
<li>
<ul>
<li>Serrano</li>
<li>Jalapeno</li>
<li>Habanero</li>
<li>Anaheim</li>
</ul>
</li>
<li>Szechuan</li>
<li>Cayenne</li>
</ul>
CSS Properties
1.Is it possible to change the amount that list items are indented, or remove
the indentation entirely?
2.Write html code to generate following output.
3.Use nested lists to create an outline of the topics covered in this book so
far.
4.Use nested lists and the list-style-type CSS property to create a
traditional outline of the topics you plan to cover on your own website.
Assignment and Quiz
the indentation entirely?
2.Write html code to generate following output.
3.Use nested lists to create an outline of the topics covered in this book so
far.
4.Use nested lists and the list-style-type CSS property to create a
traditional outline of the topics you plan to cover on your own website.
Assignment and Quiz
Thank You
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 3
- Slides 16
- Age 292 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
45 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
47 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
42 views
14
Fertility awareness methods for women in the society
Isaiah47
40 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
38 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
41 views