HTML                        Lesson 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" mus...
• browsers also read commands between the  "&" and ";" (that is, between the ampersand  and semicolon)• Ampersand commands...
• popular symbols and their ampersand    commands that work in all browsers                                               ...
Exercises• Switch to Notepad               http://www.htmltutorials.ca/lesson5.htm
CREATING A LISTThere are three types of lists:  1. UNORDERED LISTS (uses bullets)  2. ORDERED LISTS (uses numbers)  3. DEF...
CREATING AN UNORDERED LIST• Unordered Lists are bulleted lists.• You use the opening tag <UL> to indicate the  beginning a...
CREATING AN UNORDERED LIST<HTML>  <HEAD> <TITLE>SAFETY TIPS </TITLE> </HEAD>     <BODY>           <H2 ALIGN="CENTER">SAFET...
CREATING AN UNORDERED LIST WITHIN A LIST<HTML> <HEAD> <TITLE>SAFETY TIPS</TITLE> </HEAD>  <BODY>   <H2 ALIGN="CENTER">SAFE...
• for each <UL>tag, you need a </UL> tag.• If you want lists within lists within lists, just  remember to follow the LIFO ...
CREATING AN ORDERED LIST (A NUMBERED LIST)• You treat an Ordered List in the same way as  an Unordered List, except that y...
<HTML>  <HEAD> <TITLE>SAFETY TIPS</TITLE> </HEAD>   <BODY>     <H2 ALIGN="CENTER">SAFETY TIPS FOR       CANOEISTS</H2>    ...
COMBINING UNORDERED AND ORDERED LISTS<HTML>  <HEAD> <TITLE>SAFETY TIPS</TITLE> </HEAD>   <BODY>    <H2 ALIGN="CENTER">SAFE...
CREATING A DEFINITION LIST (NO BULLETS OR NUMBERS)<HTML>  <HEAD> <TITLE>TRIP PLANNING</TITLE> </HEAD> <BODY>  <H2 ALIGN="C...
• DL stands for Definition List• <DL> denotes the beginning of a of a  Definition List and </DL> denotes the end of  a Def...
• The DT tag has an optional end tag (</DT>)• DD stands for Definition Description.• Note that the second tier is indented...
• DD may contain block-level elements as well  as text-level elements.• There are two types of elements in the BODY  secti...
• Elements that generate a new paragraph such  as a header tag (for example <H1>) or a  paragraph tag (<P>), are called bl...
Exercise• Try to copy the format of this example                http://www.htmltutorials.ca/lesson5.htm
CHANGING THE STYLE OF YOUR BULLETS AND NUMBERS• CHANGING THE APPEARANCE OF BULLETSHere is the way to change your bullets t...
• You can also change the appearance of your  bullets to hollow or open bullets with:  – <UL TYPE="circle">• To get the ro...
CHANGING THE APPEARANCE OF AN ORDERED LIST • We can also change the ordered list to   something other than Arabic numbers ...
• <OL TYPE="i"> for lower case Roman  Numerals (i, ii, iii, iv, and so on).  <OL TYPE="A"> for capital letters (A, B, C, a...
• The START attribute is used to begin an Ordered  List with any number or letter. For example,• <OL START="3">• as in:• <...
• Also, try the following if your browser  supports these attributes:  – <OL TYPE="I" START="3">    will begin numbering w...
• The following example numbers the statements  in the list as 1, 2, 3, 7, 8 as shown below the  document.• <OL>  <LI>This...
Upcoming SlideShare
Loading in...5
×

Lesson 5 indenting and creating spaces

435

Published on

Published in: Technology, Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
435
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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 &lt;BR&gt; tag is needed as each new LI command forces a line break before printing the next item.
  • 3rd year
  • Lesson 5 indenting and creating spaces

    1. 1. HTML Lesson Five –Indenting and Creating Spaces with &nbsp; and Creating Lists http://www.htmltutorials.ca/lesson5.htm
    2. 2. &nbsp;• 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" http://www.htmltutorials.ca/lesson5.htm
    3. 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
    4. 4. • popular symbols and their ampersand commands that work in all browsers Quote " &quot;Non-breaking space &nbsp; Apostrophe ' Copyright © &copy; Cent ¢ ¢ Trademark ™ ™ Euro € &euro; or € Registered ® &reg; or ® One quarter ¼ ¼ One half ½ ½ Less Than < &lt; Three quarters ¾ ¾ Greater Than > &gt; Degrees ° ° Ampersand & &amp; Larger middle dot • • http://www.htmltutorials.ca/lesson5.htm
    5. 5. Exercises• Switch to Notepad http://www.htmltutorials.ca/lesson5.htm
    6. 6. CREATING A LISTThere 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. 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. 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>Dont stand up or move around <LI>Dont overexert yourself <LI>Use a bow light at night </UL> </BODY></HTML> http://www.htmltutorials.ca/lesson5.htm
    9. 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>Dont 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>Dont overexert yourself <LI>Use a bow light at night </UL> </BODY></HTML> http://www.htmltutorials.ca/lesson5.htm
    10. 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. 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. 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>Dont stand up or move around <LI>Dont overexert yourself <LI>Use a bow light at night </OL> </BODY></HTML> http://www.htmltutorials.ca/lesson5.htm
    13. 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>Dont 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>Dont overexert yourself <LI>Use a bow light at night </OL> </BODY></HTML> http://www.htmltutorials.ca/lesson5.htm
    14. 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. 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. 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. 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. 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. 19. Exercise• Try to copy the format of this example http://www.htmltutorials.ca/lesson5.htm
    20. 20. 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> http://www.htmltutorials.ca/lesson5.htm
    21. 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. 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. 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. 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. 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. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×