HTML - Demo Class
HTML - Demo Class
Markup Language
Learning
Outcomes
Students would be able to:
1.Revise the topics taught in the class.
2.Understand the different Lists in HTML.
3.Understand and Learn the tags used in
Lists.
4.Attempt the Quiz at the end of the topic
Recapitulate
Basic Structure of HTML
<!doctype HTML>
<HTML>
<.........> 1
<TITLE> My Web Page <...........> 2
</HEAD>
<........> 3
<H1> Good Morning<.......> 4
</BODY>
<.......> 5
Lists in HTML5
Description List in HTML5
Unordered List
Ordered List
An unordered list in HTML is a list of
items where the order of the items
HTML Ordered List or Numbered List doesn't matter. It's also known as a
displays elements in numbered bulleted list because the items are
format. The HTML <ol> tag is used for marked with bullets.
ordered list. We can use ordered list to To create an unordered list in HTML,
represent items either in numerical you use the <ul> tag to start the list
order or alphabetical order, or any and the </ul> tag to end it.
format where an order is emphasized.
Description List
Description lists are used to define terms on a
page, organize information, or create glossaries.
Elements
The HTML elements used to create a description list
are:
<dl>: Defines the description list
<dt>: Defines the term (name)
<dd>: Describes each term
Ordered List
<!doctype HTML>
<HTML>
<HEAD>
<TITLE> Ordered List Example</TITLE>
</HEAD>
<BODY>
<H1>Ordered List Types</H1>
<OL>
<LI> Orange </LI>
<LI> Mango </LI>
<LI> Banana </LI>
<LI> Apple </LI>
</OL>
</BODY>
</HTML>
To change default marking to letters and Roman
numerals:
<OL type=”a”>
Unordered List
<!doctype HTML>
<HTML>
<HEAD>
<TITLE> My Web Page</TITLE>
</HEAD>
<BODY>
<H1>Unordered List</H1>
<UL>
<LI> HTML </LI>
<LI> CSS </LI>
<LI> Java </LI>
<LI> Apple </LI>
</UL>
</BODY>
</HTML>
To change default marking to square or circle:
<UL type=”square”>
Description List
<!doctype HTML>
<HTML>
<HEAD>
<TITLE> My Web Page</TITLE>
</HEAD>
<BODY>
<H1>Description List</H1>
<DL>
<DT> CSS </DT>
<DD>Cascading Style Sheet</DD>
<DT> DTD </DT>
<DD>Document Type Definition</DD>
<DT> WWW</DT>
<DD>World Wide Web</DD>
<DT> XML</DT>
<DD> eXtensible Markup
Language</DD>
</DL>
</BODY>
</HTML>
Quiz Time
CLICK HERE