Advantages of Hiring UIUX Design Service Providers for Your Business
Lesson 5 indenting and creating spaces
1. HTML
Lesson Five –
Indenting and Creating Spaces with and Creating Lists
http://www.htmltutorials.ca/lesson5.htm
2.
• the nbsp stands for
– non-breaking space character
• simply known as the space character
• Note that the "nbsp" must be in lower case
letters.
•   will not work.
• The character "&" is pronounced
"ampersand"
http://www.htmltutorials.ca/lesson5.htm
3. • browsers also read commands between the
"&" and ";" (that is, between the ampersand
and semicolon)
• Ampersand commands are used to create
special characters not found on the keyboard
such as the copyright symbol, the trademark
symbol, the symbol for degrees, etc.
http://www.htmltutorials.ca/lesson5.htm
6. CREATING A LIST
There are three types of lists:
1. UNORDERED LISTS (uses bullets)
2. ORDERED LISTS (uses numbers)
3. DEFINITION LISTS (no numbers or bullets).
NOTE: Break and paragraph tags can still be use
http://www.htmltutorials.ca/lesson5.htm
7. CREATING AN UNORDERED LIST
• Unordered Lists are bulleted lists.
• You use the opening tag <UL> to indicate the
beginning and </UL> for the end of an
Unordered List.
• Each item in your bulleted list must begin with
the tag <LI>
• <LI> stands for List Item.
http://www.htmltutorials.ca/lesson5.htm
8. CREATING AN UNORDERED LIST
<HTML>
<HEAD> <TITLE>SAFETY TIPS </TITLE> </HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY TIPS FOR
CANOEISTS</H2>
<UL>
<LI>Be able to swim
<LI>Wear a life jacket at all times
<LI>Don't stand up or move around
<LI>Don't overexert yourself
<LI>Use a bow light at night
</UL>
</BODY>
</HTML>
http://www.htmltutorials.ca/lesson5.htm
9. CREATING AN UNORDERED LIST WITHIN A LIST
<HTML>
<HEAD> <TITLE>SAFETY TIPS</TITLE> </HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2>
<UL>
<LI>Be able to swim
<LI>Wear a life jacket at all times
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe
<LI>Use the canoe for support and
<LI>Swim to shore
</UL>
<LI>Don't overexert yourself
<LI>Use a bow light at night
</UL>
</BODY></HTML>
http://www.htmltutorials.ca/lesson5.htm
10. • for each <UL>tag, you need a </UL> tag.
• If you want lists within lists within lists, just
remember to follow the LIFO principle (Last In,
First Out principle)
http://www.htmltutorials.ca/lesson5.htm
11. CREATING AN ORDERED LIST (A NUMBERED LIST)
• You treat an Ordered List in the same way as
an Unordered List, except that you use <OL>
instead of <UL>.
• OL stands for Ordered List.
http://www.htmltutorials.ca/lesson5.htm
12. <HTML>
<HEAD> <TITLE>SAFETY TIPS</TITLE> </HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY TIPS FOR
CANOEISTS</H2>
<OL>
<LI>Be able to swim
<LI>Wear a life jacket at all times
<LI>Don't stand up or move around
<LI>Don't overexert yourself
<LI>Use a bow light at night
</OL>
</BODY></HTML>
http://www.htmltutorials.ca/lesson5.htm
13. COMBINING UNORDERED AND ORDERED LISTS
<HTML>
<HEAD> <TITLE>SAFETY TIPS</TITLE> </HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY TIPS FOR
CANOEISTS</H2>
<OL>
<LI>Be able to swim
<LI>Wear a life jacket at all times
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe
<LI>Use the canoe for support and
<LI>Swim to shore
</UL>
<LI>Don't overexert yourself
<LI>Use a bow light at night
</OL>
</BODY></HTML>
http://www.htmltutorials.ca/lesson5.htm
14. CREATING A DEFINITION LIST (NO BULLETS OR NUMBERS)
<HTML>
<HEAD> <TITLE>TRIP PLANNING</TITLE> </HEAD> <BODY>
<H2 ALIGN="CENTER">TRIP PLANNING</H2><HR>
<DL>
<DT>Winter
<DD>Write for maps and travel brochures
<DD>Read camping books
<DD>Prepare budget and equipment list
<DT>Spring
<DD>Visit camping shows
<DD>Buy essential items
<DD>Make reservations
<DT>Day before trip
<DD>Load vehicle
</DL>
</BODY></HTML>
http://www.htmltutorials.ca/lesson5.htm
15. • DL stands for Definition List
• <DL> denotes the beginning of a of a
Definition List and </DL> denotes the end of
a Definition List.
• DT stands for Definiton Term.
• The DT tag may only contain text-level
elements (definition of text-level elements
given below).
http://www.htmltutorials.ca/lesson5.htm
16. • The DT tag has an optional end tag (</DT>)
• DD stands for Definition Description.
• Note that the second tier is indented from the
first tier and that the second tier describes the
items in the first tier.
• That is, the second tier is a description of the
first tier.
http://www.htmltutorials.ca/lesson5.htm
17. • DD may contain block-level elements as well
as text-level elements.
• There are two types of elements in the BODY
section of a web page
1. block-level elements
2. text-level elements.
http://www.htmltutorials.ca/lesson5.htm
18. • Elements that generate a new paragraph such
as a header tag (for example <H1>) or a
paragraph tag (<P>), are called block-level
elements.
• Text-level elements are elements that do not
generate a new paragraph (examples are
<EM> and <STRONG>).
http://www.htmltutorials.ca/lesson5.htm
19. Exercise
• Try to copy the format of this example
http://www.htmltutorials.ca/lesson5.htm
20. CHANGING THE STYLE OF YOUR BULLETS AND NUMBERS
• CHANGING THE APPEARANCE OF BULLETS
Here is the way to change your bullets to
SQUARE bullets: <UL TYPE="square">
<LI>item 1
<LI>item 2
<LI>item 3
</UL>
http://www.htmltutorials.ca/lesson5.htm
21. • You can also change the appearance of your
bullets to hollow or open bullets with:
– <UL TYPE="circle">
• To get the round solid bullets back again
(which is the default value), use:
– <UL TYPE="disc">
http://www.htmltutorials.ca/lesson5.htm
22. CHANGING THE APPEARANCE OF AN ORDERED LIST
• We can also change the ordered list to
something other than Arabic numbers (1, 2, 3,
etc.). For example, to change to a capitalized
Roman Numeral numbered list, it is:
– <OL TYPE="I">
<LI>item 1
<LI>item 2
<LI>item 3
</OL>
http://www.htmltutorials.ca/lesson5.htm
23. • <OL TYPE="i"> for lower case Roman
Numerals (i, ii, iii, iv, and so on).
<OL TYPE="A"> for capital letters (A, B, C, and
so on).
<OL TYPE="a"> for lower case letters (a, b, c,
and so on).
http://www.htmltutorials.ca/lesson5.htm
24. • The START attribute is used to begin an Ordered
List with any number or letter. For example,
• <OL START="3">
• as in:
• <OL START="3">
<LI>item 3
<LI>item 4
<LI>item 5
</OL> ,
http://www.htmltutorials.ca/lesson5.htm
25. • Also, try the following if your browser
supports these attributes:
– <OL TYPE="I" START="3">
will begin numbering with Roman Numeral III.
– <OL TYPE="i" START="3">
will begin numbering with Roman Numeral iii.
http://www.htmltutorials.ca/lesson5.htm
26. • The following example numbers the statements
in the list as 1, 2, 3, 7, 8 as shown below the
document.
• <OL>
<LI>This is List Item 1
<LI>This is List Item 2
<LI>This is List Item 3
<LI VALUE="7">This is List Item 7
<LI>This is List Item 8
</OL>
http://www.htmltutorials.ca/lesson5.htm
Notes de l'éditeur
the bullets are round and solid each item in the list has been indented 3 or 4 spaces from the left side of the screen no <BR> tag is needed as each new LI command forces a line break before printing the next item.