Intro to Web Design Displaying Data in Lists

Displaying Data in Lists

The “Block Quote”
Let’s start off where we left off. Headings are very important to a page because it allows for
differentiation on the page.

We will now take a look at some new code.

Block quotes are commonly used with quoted text or excerpts from other sources. For example,
if you are showing a webpage that may be quoting William Shakespeare, you may want to use a
block quote.

To add a block quote:

Type <BLOCKQUOTE> in front of the text you want to turn into a block quote.

Type </BLOCKQUOTE> at the end of the text

The web browser displays the block quote as inset text on the document page.

<BLOCKQUOTE> But soft! What light through yonder window breaks? It is the East and
Juliet is the sun! Arise fair sun and kill the envious moon. It is the east, and Juliet is the sun."
</BLOCKQUOTE>

----Displays----

But soft! What light through yonder window breaks? It is the East and Juliet is the sun!
Arise fair sun and kill the envious moon. It is the east, and Juliet is the sun."

Notice the Indent of the Text.

Adding a Comment
Comments are important parts of your webpage. They do not appear on the webpage itself, but
are reminders for you in your code. For example, you might leave a comment about a future
editing task, or leave a note to other web developers viewing your HTML code.

To add a comment:

Type <!--Include comment in here -->

The web browser does not display the comment on the page.

Mr. Smith 1 Sachem High School North

Intro to Web Design Displaying Data in Lists

Creating Lists
Lists are easy ways to stay organized on your page. You can use numbered lists in your web
page to display all kinds of ordered lists. For example, you can use numbered lists to show steps
or prioritize items.

Numbered Lists “Ordered List”

To place text in a numbered list:

 Type <OL> above the text you want to turn into a numbered list
 Type <LI> in front of each item in the list
 Type </LI> after each list item
 Type </OL> after the list text

The text will appear in a numbered list on your web page.

To set a number style:

Type <OL TYPE=”?”> (Replacing ? with A, a, I, i, or 1)

For example for Roman Numerals you would type <OL TYPE=I>

The numbered list would show Roman numerals on your web page.

If you want to start with a different number, you must add a START attribute to the <OL>

EXAMPLE: <OL START=”5” TYPE=”1”>

Bulleted Lists “Unordered List”

You can add a bulleted list to your document to set apart a list of items from the rest of the page
of text. Also called an unordered list, you can use bulleted lists when you do not need to show
the items in a particular order. The default bullet will be the solid circle.

To place text in a bulleted list:

 Type <UL> above the text you want to turn into a list
 Type <LI> in front of each item in the list
 Type </LI> after each list item
 Type </UL> after the list text

The text will appear in a bulleted list on your web page.

To set a bullet style:

Type <UL TYPE=”?”> (Replacing ? with “circle”, “disc”, or “square”)

Mr. Smith 2 Sachem High School North

Intro to Web Design Displaying Data in Lists

Definition List
You can use a definition list in your document to set apart text in the format of a glossary or
dictionary.

To create a definition list:

 Type <DL> above the text you want to set as a definition list

 Type <DT> in front of each term and </DT> after each term

 Type <DD> in front of each definition and </DD> after each definition

 Type </DL> after the definition list text

Guided Practice
Create a new HTML Document: LISTABC.html (replacing “ABC” with your initials.)

Include the Following Lists on a Webpage:

Directions:

1. Mix dry ingredients thoroughly.

2. Pour in wet ingredients.
3. Mix for 10 minutes.
4. Bake for one hour at 300 degrees.

Three Types of Lists:

 Ordered List
 Unordered List
 Definitions

Reasons to Try our New Product:

Lower cost
The new version of this product costs significantly less than the previous one!
Easier to use
We've changed the product so that it's much easier to use!
Safe for kids
You can leave your kids alone in a room with this product and they won't get hurt
(not a guarantee).

Mr. Smith 3 Sachem High School North