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
