Lesson 5 indenting and creating spaces

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

HTMLLesson Five –

Indenting and Creating Spaces with and Creating Lists


• 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

Non-breaking space

Copyright © ©

Trademark ™

Registered ® ® or ®

Less Than < <

Greater Than > > Ampersand & &

Quote " " Apostrophe ' '

Cent ¢ ¢

Euro € € or €

One quarter ¼ ¼

One half ½ ½

Three quarters ¾ ¾

Degrees ° °

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.


<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


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

CREATING AN UNORDERED LIST WITHIN A LIST


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


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>


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 page1. block-level elements2. 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 BULLETSHere 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>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>

Technology

Lesson 5 indenting and creating spaces