BCSE203E
Web Programming
Dr.Priyanka N
1
Syllabus
Dr.Priyanka N 2
Html Lists
• HTML Lists are used to specify lists of information.
• There are three different types of HTML lists:
➢ Unordered List or Bulleted List (ul)
➢ Ordered List or Numbered List (ol)
➢ Description List or Definition List (dl)
Dr.Priyanka N 3
Unordered Lists
Unordered list element (ul)
Creates a list in which each item begins with a bullet symbol
(called a disc)
li (list item): Entry in an unordered list
Format:
<ul>
<li>….</li>
<li>….</li>
</ul> Dr.Priyanka N 4
Unordered Lists
Dr.Priyanka N 5
Unordered HTML List - Choose List Item Marker
❑ The list-style-type property is used to define the style of the list item marker.
❑It can have one of the following values:
Dr.Priyanka N 6
Unordered HTML List - Choose List Item Marker
Dr.Priyanka N 7
Nested Unordered Lists
Dr.Priyanka N 8
Ordered Lists or Numbered List
• In the ordered HTML lists, all the list items are marked with numbers
by default.
• It is known as numbered list also.
• Format:
<ol>
<li>….</li>
<li>….</li>
</ol>
Dr.Priyanka N 9
Ordered Lists or Numbered List
Dr.Priyanka N 10
Ordered Lists - The Type Attribute
• The type attribute of the <ol> tag, defines the type of the list item marker:
Dr.Priyanka N 11
Ordered Lists - The Type Attribute
Dr.Priyanka N 12
Nested Ordered/Unordered Lists
Dr.Priyanka N 13
Task-6
Dr.Priyanka N 14
34
Task-7
Dr.Priyanka N 15
Task-8
Dr.Priyanka N 16
HTML Definition Lists
A definition list is a list of items, describing each item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in
the list) and <dd> Defines a description of an item in a definition)
Format:
<dl>
<dt>…..</dt>
<dd>…….</dd>
<dt>…..</dt>
<dd>……..</dd>
</dl> Dr.Priyanka N 17
HTML Definition Lists
Dr.Priyanka N 18
HTML Definition Lists
Dr.Priyanka N 19
Task-9
Dr.Priyanka N 20
<del> and <ins> tags
Dr.Priyanka N 21
<nav> tag
• The <nav> html element represents a
section of a page whose purpose is to
provide navigation links, either within
the current document or to other
documents.
• Common examples of navigation
sections are menus, tables of
contents, and indexes.
Dr.Priyanka N 22
<nav> tag
Dr.Priyanka N 23
<section> tag
• A web page may contain many chapters, headers, footers, or
other sections on a web page
• The HTML <section> tag is used to define sections in a document.
Dr.Priyanka N 24
<section> tag
Dr.Priyanka N 25
<div> tag
• The <div> tag is known as the Division tag.
• The div tag is used in HTML to make divisions of content in the web
page like (text, images, header, footer, navigation bar, etc).
• Div tag has both open (<div>) and closing (</div>) tags and it is
mandatory to close the tag.
• The Div is the most usable tag in web development because it helps us
to separate data in the web page.
Dr.Priyanka N 26
<div> tag
Dr.Priyanka N 27
<span> tag
• A <span> element which is used to color a part of a text
• The <span> tag is an inline container used to mark
up a part of a text, or a part of a document
• The <span> tag is much like the <div> element, but
<div> is a block-level element and <span> is an inline
element
Dr.Priyanka N 28
<span> tag
Dr.Priyanka N 29
Task-10
Reference for first letter selector
30
Task-11
31
Dr.Priyanka N 32
