WPD 312004 Manual Practical No.9 Answer
|
| WPD 312004 Manual Practical No.9 Answer |
In this blog post, we work on answers to practical no.9 of the WPD subject in which we learn to Create a web page using Different types of Lists in HTML.
HTML lists are like a way for web developers to organize things on a webpage. They can put similar things together in a list format, which helps make the webpage look nice and organized. It’s like making a list of things you want to remember or things that go together.
Relevant Theoretical Background
- Different List types:
| Tag | Description |
| <ul>…</ul> | An unordered list. This will list items using plain bullets. |
| <ol>…</ol> | An ordered list. This will use different schemes of numbers to list your items |
|
A definition list. This arranges your items in the same way as they are arranged in a dictionary. |
| <dt>…</dt> | Defines a term in a description list. |
| <dd>…</dd> | Describes the term in a description list. |
- Type attribute of Ordered List:
The type attribute of the <ol> tag, defines the type of the list item marker:
| Type | Description |
| type=”1″ | The list items will be numbered with numbers (default) |
| type=”A” | The list items will be numbered with uppercase letters |
| type=”a” | The list items will be numbered with lowercase letters |
| type=”I” | The list items will be numbered with uppercase roman numbers |
| type=”i” | The list items will be numbered with lowercase roman numbers |
Exercises
1) Create an ordered list within an unordered list.
Answer:
<html><head><title>Nested Lists</title></head><body><h1>List Example</h1><ul><li>Fruits<ol><li>Apple</li><li>Banana</li><li>Orange</li></ol></li><li>Vegetables<ol type=”a”> <li>Carrot</li><li>Broccoli</li><li>Spinach</li></ol></li></ul></body></html>
Output:
 |
2) Create an unordered list within an ordered list.
Answer:
<html><head><title>Nested Lists</title></head><body><h1>List Example</h1><ol><li>Project Requirements:<ul><li>Software Requirements Specification (SRS)</li><li>System Design Document (SDD)</li></ul></li><li>Development Phases:<ul><li>Design</li><li>Coding</li><li>Testing</li></ul></li></ol></body></html>
Output:
3) Create an ordered list within an ordered list.
Answer:
<html><head><title>Nested Ordered Lists</title></head><body><h1>List Example</h1><ol><li>Step 1: Planning<ol><li>1.1 Define project goals</li><li>1.2 Identify resources</li></ol></li><li>Step 2: Execution<ol type=”a”> <li>2.1 Develop the product</li><li>2.2 Test and refine</li></ol></li></ol></body></html>
Output:
4) Create an unordered list within an unordered list
Answer:
<html><head><title>Nested Unordered Lists</title></head><body><h1>List Example</h1><ul><li>Shopping List<ul><li>Fruits<ul><li>Apples</li><li>Bananas</li></ul></li><li>Vegetables<ul><li>Carrots</li><li>Broccoli</li></ul></li></ul></li><li>Office Supplies<ul><li>Pens</li><li>Pencils</li><li>Notebooks</li></ul></li></ul></body></html>
Output :
Practical Related Questions
1. State the purpose of type attribute in ordered and un-ordered list.
Answer:
2. Implement a definition list in HTML.
Answer:
<html><head><title>Definition List Example</title></head><body><h1>Astronomy Terms</h1><dl><dt>Galaxy</dt><dd>A massive collection of stars, gas, and dust.</dd><dt>Solar System</dt><dd>Our solar system consists of the sun and the objects gravitationally bound to it, including planets, moons, asteroids, comets, and dust.</dd></dl></body></html>
Conclusion
We successfully performed the Web Page Designing lab manual practical and listed all questions and answers above related to Creating a web page using Different types of Lists in HTML
