BCSE203E
Web Programming
[Link] N
1
Syllabus
[Link] 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)
[Link] 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> [Link] N 4
Unordered Lists
[Link] 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:
[Link] N 6
Unordered HTML List - Choose List Item Marker
[Link] N 7
Nested Unordered Lists
[Link] 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>
[Link] N 9
Ordered Lists or Numbered List
[Link] N 10
Ordered Lists - The Type Attribute
• The type attribute of the <ol> tag, defines the type of the list item marker:
[Link] N 11
Ordered Lists - The Type Attribute
[Link] N 12
Nested Ordered/Unordered Lists
[Link] N 13
Task-6
[Link] N 14
34
Task-7
[Link] N 15
Task-8
[Link] 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> [Link] N 17
HTML Definition Lists
[Link] N 18
HTML Definition Lists
[Link] N 19
Task-9
[Link] N 20
<del> and <ins> tags
[Link] 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.
[Link] N 22
<nav> tag
[Link] 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.
[Link] N 24
<section> tag
[Link] 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.
[Link] N 26
<div> tag
[Link] 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
[Link] N 28
<span> tag
[Link] N 29
Task-10
Reference for first letter selector
30
Task-11
31
[Link] N 32
