Lesson 5 indenting and creating spaces

HTML
Lesson Five –
Indenting and Creating Spaces with   and Creating Lists

http://www.htmltutorials.ca/lesson5.htm

 
• the nbsp stands for
– non-breaking space character
• simply known as the space character
• Note that the "nbsp" must be in lower case
letters.
• &NBSP; will not work.
• The character "&" is pronounced
"ampersand"

• 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.


• popular symbols and their ampersand
commands that work in all browsers

Quote " "
Non-breaking space  
Apostrophe ' '
Copyright © ©
Cent ¢ ¢
Trademark ™ 
Euro €
€ or
€
Registered ® ® or ® One quarter ¼ ¼
One half ½ ½
Less Than < <
Three quarters ¾ ¾
Greater Than > > Degrees ° °
Ampersand & & Larger middle dot • 


Exercises
• Switch to Notepad


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


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.


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>


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>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>
</UL>
</BODY></HTML>

• 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)


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.


<HTML>
<BODY>
CANOEISTS</H2>
<OL>
<LI>Be able to swim
<LI>Don't stand up or move around
</OL>
</BODY></HTML>

COMBINING UNORDERED AND ORDERED LISTS
<HTML>
<BODY>
CANOEISTS</H2>
<OL>
<LI>Be able to swim
<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>
</OL>
</BODY></HTML>

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>

• 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).


• 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.


• 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.


• 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>).


Exercise
• Try to copy the format of this example


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>


• 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">


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>


• <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).


• 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> ,

• 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.


• 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 VALUE="7">This is List Item 7
</OL>


Lesson 5 indenting and creating spaces

More Related Content

Similar to Lesson 5 indenting and creating spaces

More from patrick arellano

Recently uploaded

Lesson 5 indenting and creating spaces

Editor's Notes