Lesson: HTML Lists, Paragraphs, and Text Styling

1. Introduction to HTML Lists

HTML lists allow you to group related items in an organized way. There are three main types of lists in HTML:

a. Ordered Lists (<ol>):
An ordered list is used when the sequence of items matters. Each item in the list is marked with a number or letter.

Syntax:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Output:

1. Item 1
2. Item 2
3. Item 3

b. Unordered Lists (<ul>):
An unordered list is used for items where the order doesn’t matter. Each item is marked with a bullet.

Syntax:

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

Output:

• Item A
• Item B
• Item C

c. Definition Lists (<dl>):
A definition list is used for terms and their descriptions.

Syntax:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Output:
HTML: HyperText Markup Language

CSS: Cascading Style Sheets

1. HTML Paragraphs (<p>)

Paragraphs are used to define blocks of text in HTML. Each paragraph is enclosed within <p> tags.

Syntax:

<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>

Features of Paragraphs:

• Text inside <p> is automatically separated with some space from other elements.
• Text wraps within the browser window.

1. Text Styling in HTML

HTML provides a variety of tags for styling text.

a. Basic Formatting Tags:

• Bold (<b> or <strong>):

  <b>This is bold text.</b>
  <strong>This is important bold text.</strong>

• Italic (<i> or <em>):

  <i>This is italic text.</i>
  <em>This is emphasized italic text.</em>

• Underline (<u>):

  <u>This is underlined text.</u>

• Strikethrough (<s>):

  <s>This is strikethrough text.</s>

b. Superscript and Subscript:

• Superscript (<sup>):

  E = mc<sup>2</sup>

• Subscript (<sub>):

  H<sub>2</sub>O

c. Text Alignment (using CSS):
Text alignment can be adjusted with the style attribute.

Example:

<p style="text-align: center;">This text is centered.</p>
<p style="text-align: right;">This text is right-aligned.</p>

1. Combining Lists, Paragraphs, and Text Styling

You can combine these elements for more complex layouts and content presentation.

Example:

<p><strong>Steps to Learn HTML:</strong></p>
<ol>
  <li><b>Understand Basics:</b> Learn about tags, attributes, and structure.</li>
  <li><i>Practice:</i> Build small projects to improve skills.</li>
  <li><u>Explore Advanced Topics:</u> Dive into forms, tables, and multimedia.</li>
</ol>
<p style="text-align: center;">Happy Coding!</p>

1. Exercise

   1. Create an ordered list of your top 3 hobbies.
   2. Write a paragraph describing why you want to learn HTML.
   3. Style a sentence using bold, italic, and underline tags.

Let me know if you have any questions or want to share your exercise results!