Learn how to create Paragraph in HTML.

1. Computer
Programming
Quarter 2 – Module 1
CREATING A NEW PARAGRAPH

2. COMPUTER PROGRAMMING
CREATING A NEW PARAGRAPH
___
Module 1
RUPERT GARRY C. TORRES
Subject Teacher

3. Paragraphs appear more often than any
other text block in web pages. Remember, though,
that HTML browsers don’t recognize hard returns
that you enter when you create your page inside
an editor. You must use a <p> tag to tell the
browser to package all text up to the next closing
</p> tag as a paragraph.
INTRODUCTION

4. CREATING A NEW PARAGRAPH
It’s about time to start writing paragraphs to put in some content on it. In HTML, there
are tags for writing paragraphs. Yes, it’s a container tag and it is the <p></p>.
To create a paragraph, follow these steps:
1. Add <p> in the body of the document.
2. Type the content of the paragraph.
3. Add </p> to close that paragraph.

5. Here’s what it looks like: Here’s the output in the browser:

6. Aligning a Paragraph
You can align a paragraph by using the paragraph tag pair <p align=left>, <p align=left>
or <p align=center>.
Here’s the output in the browser:

7. Aligning a Paragraph

8. Quoting Passages
You can place quotes in indented form and shrink them to be set apart from the main
paragraph by using the tag pair <blockquote> </blockquote>.
Here’s the output in the browser:

9. Ordered List
You can present data in
enumerated format or list. The first type
of list is the ordered list or more
commonly known as the numbered list.
This is the type of list where each item is
numbered usually starting at 1 (but can be
changed using the start attribute). The
ordered list uses container tag <ol></ol>.
Each item in this list is specified by the
empty tag <li>.

10. Ordered List
You can present data in
enumerated format or list. The first type
of list is the ordered list or more
commonly known as the numbered list.
This is the type of list where each item is
numbered usually starting at 1 (but can be
changed using the start attribute). The
ordered list uses container tag <ol></ol>.
Each item in this list is specified by the
empty tag <li>.
Here’s the output in the browser:

11. Ordered List
Notice that the value for the start attribute in the last list is 4 and since that list is to
enumerate the items using lowercase Roman Numerals, it started its count on iv. The ordered list has
different types of numbering and can be specified value for the type attribute:
• 1 for regular numbering (1, 2, 3, 4, etc.)
• a for lowercase alphabet (a, b, c, d, etc.)
• A for uppercase alphabet (A, B, C, D, etc.)
• i for lowercase Roman Numeral (i, ii, iii, iv, etc.)
• I for uppercase Roman Numerals (I, II, III, IV, etc.)

12. Unordered List
If there’s an ordered or
numbered type of list, there is also an
unordered type of list. This type of list
that enumerates each item is not
numbered but rather bulleted. The type
attribute of <ul> is obsolete in HTML 4.01.
Instead, use the CSS syntax <ul
style=”list-style-type: . . . “> </ul>.

13. Unordered List
If there’s an ordered or
numbered type of list, there is also an
unordered type of list. This type of list
that enumerates each item is not
numbered but rather bulleted. The type
attribute of <ul> is obsolete in HTML 4.01.
Instead, use the CSS syntax <ul
style=”list-style-type: . . . “> </ul>.
Here’s the output in the browser:

14. Unordered List
The unordered list has different types of bullet to be used and can be specified by keying the
specified value for the type attribute:
• disc for filled, round bullets, for example <ul style=”list-style-type:disc”>
• circle for unfilled, circular bullets, for example <ul style=”list-style-type:circle”>
• square for square bullets, for example <ul style=”list-style-type:square”>

15. Nesting Lists
Did you ever think of what could
possibly happen if you put an ordered list
within an unordered list? Lists can actually be
nested, meaning a list can be put inside
another list. For example, you can put an
ordered list within an unordered list in order
to create a multiple-level list.

16. Nesting Lists
Did you ever think of what could
possibly happen if you put an ordered list
within an unordered list? Lists can actually be
nested, meaning a list can be put inside
another list. For example, you can put an
ordered list within an unordered list in order
to create a multiple-level list.
Here’s the output in the browser: