Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Chapter 3 class presentation


Published on

Used in Intro to Web Design

Published in: Education
  • Be the first to comment

  • Be the first to like this

Chapter 3 class presentation

  1. 2. <ul><li>Understands the importance and the skills that enhance web pages by being able to: </li></ul><ul><ul><li>Use ordered, unordered lists & definitions with their attributes </li></ul></ul><ul><ul><li>Code formatting tags such as bold, italicize and underline </li></ul></ul><ul><ul><li>Insert the font style tag for web site </li></ul></ul><ul><ul><li>Insert specific non-character codes when applicable </li></ul></ul><ul><ul><li>Check for grammatical problems with a web page </li></ul></ul><ul><ul><li>Combined and use all codes through Chapter 3 </li></ul></ul><ul><ul><li>Define key words given in this chapter </li></ul></ul><ul><ul><li>Use the sections of a website to create the wireframe for major student project </li></ul></ul>
  2. 3. <ul><li>Flag + E : Opens up Computer Dialog box </li></ul><ul><li>Flag + D : Places all documents on the status bar </li></ul><ul><li>Alt + Tab : moves you thru all open documents </li></ul><ul><li>Ctrl + A : Selects an entire document </li></ul><ul><li>Ctrl + C : Copies </li></ul><ul><li>Ctrl + V : pastes </li></ul><ul><li>Ctrl + X: cuts </li></ul>
  3. 4. <ul><li>Ordered lists </li></ul><ul><li>Unordered lists; </li></ul><ul><li>Definition lists. </li></ul>
  4. 5. <ul><li>Use when order of list IS IMPORTANT </li></ul><ul><li>Element & paired tag </li></ul><ul><li>Two kinds of elements for numbered lists: </li></ul><ul><ul><li><ol></ol> specifies that this is a numbered list </li></ul></ul><ul><ul><li><li></li>: marks each item in the list</li> </li></ul></ul>
  5. 6. <ul><li><ol>opening tag for an ordered list </li></ul><ul><li><li>1 st list item</li> </li></ul><ul><li><li>2 nd list item</li> </li></ul><ul><li><li>3 rd list item</li> </li></ul><ul><li></ol>closing tag for an ordered list </li></ul>Numbered List
  6. 7. <ul><li>Attributes need to be in quotation marks (“quote marks”) </li></ul><ul><li>Two ordered list attributes: </li></ul><ul><ul><li>“ start ”=specifies the first number in list (5, 6, 7) </li></ul></ul><ul><ul><li>“ type ”=specifies numbering style for list (A, or a; I or I; etc.) </li></ul></ul>
  7. 8. <ul><li>All ordered lists begin with decimal number “1” </li></ul><ul><li>Place start attribute inside <ol> start tag </li></ul><ul><li>To change starting number: </li></ul><ul><li><ol start=“10”> </li></ul><ul><li><li>List here</li> </li></ul><ul><li><li>List here</li> </li></ul><ul><li></ol>< </li></ul>“ 10”
  8. 9. <ul><li>Consists of one or more items each prefaced by a bullet (big dot or check mark) </li></ul><ul><li>When order is NOT important </li></ul><ul><li>Uses Element & paired tag: </li></ul><ul><ul><li><ul></ul> </li></ul></ul><ul><ul><li><li></li> </li></ul></ul>
  9. 10. <ul><li><ul> </li></ul><ul><li><li>1 st list item</li> </li></ul><ul><li><li>2 nd list item</li> </li></ul><ul><li><li>3 rd list item</li> </li></ul><ul><li></ul> </li></ul>
  10. 11. <ul><li>Three types of bullets: </li></ul><ul><ul><li>Disc : solid circle bullets (default bullet) </li></ul></ul><ul><ul><li>Square : solid square bullets </li></ul></ul><ul><ul><li>Circle : hollow circle bullets </li></ul></ul><ul><li>To specify kind of circle </li></ul><ul><ul><li><ul type =“circle”> </li></ul></ul>
  11. 12. <ul><li>ORDERED LIST </li></ul><ul><li>UNORDERED LIST </li></ul><ul><li><ol> </li></ul><ul><li><li>First line</li> </li></ul><ul><li><li>Second line</li> </li></ul><ul><li><li>Third line</li > </li></ul><ul><li></ol> </li></ul><ul><li><ul> </li></ul><ul><li> <li>First line</li> </li></ul><ul><li> <li>Second line</li> </li></ul><ul><li> <li>Third line</li> </li></ul><ul><li></ul> </li></ul>
  12. 13. <ul><li>ORDERED LIST </li></ul><ul><li>UNORDERED LIST </li></ul><ul><li><ol start=“5”> </li></ul><ul><li><li>First line</li> </li></ul><ul><li><li>Second line</li> </li></ul><ul><li><li>Third line</li > </li></ul><ul><li></ol> </li></ul><ul><li><ul type=“circle”> </li></ul><ul><li> <li>First line</li> </li></ul><ul><li> <li>Second line</li> </li></ul><ul><li> <li>Third line</li> </li></ul><ul><li></ul> </li></ul>
  13. 14. <ul><li>Group terms and definitions into single list </li></ul><ul><li>3 different elements </li></ul><ul><ul><li><dl></dl> </li></ul></ul><ul><ul><li><dt></dt> </li></ul></ul><ul><ul><li><dd></dd> </li></ul></ul>
  14. 15. <ul><li><dl> </li></ul><ul><li><dt>First term name</dt> </li></ul><ul><li><dd>definition for 1 st term</dd> </li></ul><ul><li><br /><br /> (puts 1 space) </li></ul><ul><li><dt>Second term name</dt> </li></ul><ul><li><dd>definition of 2 nd term</dd> </li></ul><ul><li></dl> </li></ul>
  15. 17. <ul><li><strong></strong>: bold : Darkens text so that it stands apart from other text </li></ul><ul><li><em></em>: italicize: Texts slants to the right to separate it from other text. </li></ul><ul><li>< u></u>: underline: Places a line underneath text. </li></ul>
  16. 18. <ul><li>All websites have their own default setting for font style </li></ul><ul><li>Three major font styles are: </li></ul><ul><ul><li>Arial </li></ul></ul><ul><ul><li>Times New Roman </li></ul></ul><ul><ul><li>Helvetica </li></ul></ul><ul><li>Use these three styles to set font on your website </li></ul><ul><li>Use following with the start <body> tag: </li></ul><ul><li><body bgcolor=“green”><font style=“Arial, Times New Roman, Helvetica”> </li></ul><ul><li></font></body> </li></ul>
  17. 19. <ul><li>One special non-character code is: </li></ul><ul><li>&nbsp; </li></ul><ul><li>The code is used as a replacement for <pre></pre> tag </li></ul><ul><li>Not an element or an attribute </li></ul><ul><li>This tag adds white space & does not distort text </li></ul><ul><li>Two “&nbsp;” equals approximately one space </li></ul>
  18. 20. Identification HTML Code Symbol Left & right single apostrophe &lsquo;&rsquo; (It’s) Left & right quotation marks &ldquo;&rdquo; ( “follow”) Fraction &frac12; ½ Copyright &copy; © Hyphen &minus; —
  19. 21. <ul><li>Misspelled words </li></ul><ul><li>Misused words </li></ul><ul><li>Inaccurate use of words </li></ul><ul><li>Complete sentences </li></ul><ul><li>Correct use of punctuation and capital letters </li></ul>