Lists, formatting, and images

738 views
708 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
738
On SlideShare
0
From Embeds
0
Number of Embeds
269
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lists, formatting, and images

  1. 1. Lists, Formatting, and Images Robert Benard Mott Community College
  2. 2. Lists <ul><li>Are a way for us to display information and get things done. </li></ul><ul><li>We use checklists when we go to the grocery store. </li></ul><ul><li>The index of your text </li></ul><ul><li>Menus, definitions, outlines </li></ul><ul><li>A list is a very important part of our daily lives, as well a very important to web weaving </li></ul>
  3. 3. On the WEB <ul><li>Many sites that we visit on the web have a list of options. </li></ul><ul><ul><li>Left hand edge </li></ul></ul><ul><ul><li>Both left and right edges </li></ul></ul><ul><ul><li>Can be placed at the top or bottom </li></ul></ul><ul><li>If these lists are considered site navigation tools. </li></ul>
  4. 4. Can we make a list without tags? <ul><li>We can try: </li></ul><ul><li>What about the white space we can create with the space bar? </li></ul><ul><li>Will the alignment be the same on </li></ul><ul><ul><li>Explorer? </li></ul></ul><ul><ul><li>Netscape? </li></ul></ul><ul><ul><li>AOL? </li></ul></ul><ul><li>OK …. So how do we create lists with tags? </li></ul>
  5. 5. There remain only three types of lists <ul><li><OL> <UL> and <DL> </li></ul><ul><li><OL> </OL> </li></ul><ul><ul><li>Ordered lists provide us the opportunity to create numbered lists </li></ul></ul><ul><li><UL> </UL> </li></ul><ul><ul><li>Unordered lists generate bulleted lists </li></ul></ul><ul><li><DL> </DL> </li></ul><ul><ul><li>Descriptive lists for all practical purposes provides us with a list without numbers or bullets! </li></ul></ul>
  6. 6. Taking a closer look at <OL> <ul><li>The structure for <OL> and <UL> are quite similar </li></ul><ul><li>Asia </li></ul><ul><li>Europe </li></ul><ul><li>Australia </li></ul><ul><li>Africa </li></ul><UL> <LI>Asia</LI> <LI>Europe</LI> <LI>Australia</LI> <LI>Africa</LI> </UL>
  7. 7. Inserting Sub Lists <ul><li>You can nest lists: </li></ul><ul><li><OL> </li></ul><ul><li><LI>Midwest</LI> </li></ul><ul><li><OL><LI>Michigan</LI> </li></ul><ul><li><LI>Ohio</LI></OL> </li></ul><ul><li><LI>East</LI> </li></ul><ul><li><OL><LI>New York</LI> </li></ul><ul><li><LI>Delaware</LI></OL> </li></ul><ul><li></OL> </li></ul>
  8. 8. Results with: <ul><li>Midwest </li></ul><ul><ul><li>Michigan </li></ul></ul><ul><ul><li>Ohio </li></ul></ul><ul><li>East </li></ul><ul><ul><li>New York </li></ul></ul><ul><ul><li>Delaware </li></ul></ul>
  9. 9. Atributes <ul><li>An ordered list with letters or numerals can be created: </li></ul><ul><li><OL type=“A”> </li></ul><ul><li><OL type=“a”> </li></ul><ul><li><OL type=“I”> </li></ul><ul><li><OL type=“i”> </li></ul><ul><li><OL type=“1”> </li></ul>
  10. 10. Shapes <ul><li><UL type=“DISK”> </li></ul><ul><li><UL type=“CIRLCE”> </li></ul><ul><li><UL type=“SQUARE”> </li></ul>
  11. 11. The Font Property <ul><li>Font-style </li></ul><ul><li>Font-weight </li></ul><ul><li>Font-size </li></ul><ul><li>Font-family </li></ul>
  12. 12. Things we can do to the body <ul><li><FONT color=“blue”> or <FONT color=“red”> </li></ul><ul><li>The CORRECT methodology is to use actual 6 digit hexadecimal numbers to represent colors. <FONT color=“#0000FF”> </li></ul><ul><li>You can use a development tool to get these or there are many resources on the web. </li></ul>
  13. 13. Images <ul><li>Adding images to web pages is very simple. </li></ul><ul><li><img src=“imagename.jpg”> </li></ul><ul><li>This points to an image in the same folder as your page. </li></ul>

×