Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Separate content and design
  • demo
  • Pt for print 72pt=1inch
  • Class4

    1. 1. Class 4<br />
    2. 2. Reviews: Tags<br />Tags we have covered:<br /><u><br /><ul><li>Paragraph
    3. 3. Single line break
    4. 4. Heading
    5. 5. Strong emphasis
    6. 6. Emphasis
    7. 7. Bold
    8. 8. Italicize
    9. 9. Underline
    10. 10. Anchor (link)
    11. 11. Unordered List
    12. 12. List Item
    13. 13. Ordered List
    14. 14. Insert Image with alternative text</li></ul><p><br /><a><br /><br/><br /><ul><br /><h1><br /><li><br /><strong><br /><ol><br /><em><br /><imgsrc=“” alt =“”><br /><b><br /><i><br />
    15. 15. Reviews: Inserting an Image<br /><imgsrc=“image location” alt=“image description”/><br />index.html<br />1<br />images/stuart.jpg<br /><imgsrc=“________________” alt=“stuart”/><br /><imgsrc=“__________________” alt=“murdoc”/><br />images<br />2<br />images/murdoc.jpg<br />1<br />2<br />stuart.jpg<br />murdoc.jpg<br />
    16. 16. Logical VS Physical Markups<br />logical markup tags describe the role a piece of text plays (in line with XML)<br />Physicalmarkup describes the appearance of a piece of text.<br />
    17. 17.’s guideline for HTML 5<br /><b><br /><i><br />
    18. 18. More Tags<br />align=“ ”<br />left: text lines are rendered flush left.<br />center: text lines are centered.<br />right: text lines are rendered flush right.<br />justify: text lines are justified to both margins.<br />Ex) <h1 align="center"> How to Carve Wood </H1> <br />
    19. 19. blockquote<br /><blockquote> indents left and right margins<br />Non-breaking space<br />&nbsp;<br />More Tags<br />
    20. 20. More Tags<br /> <dl><br /> <dt><strong>Hobbies</strong></dt><br /> <dd>jump over fences</dd><br /> <dd>tip over alpacas</dd><br /> <dt><strong>Favorite Food</strong></dt><br /> <dd>grass on bush</dd><br /> <dd>bush on grass</dd><br /> <dd> <a href="recipe.html">click here to see the recipe for both</a><br /> <dt><strong>Favorite Band</strong></dt><br /> <dd>Alpacaz</dd><br /> <dd><a href="coldpacaz.html">Coldpacaz</a></dd><br /> </dl><br />Definition List <DL><br />Definition Title<DT><br />Definition Data<DD><br />
    21. 21. More Links<br />Absolute link<br />Relative link<br />Email link<br /><a href="">Contact me</a><br />
    22. 22. Using Color on Web Pages<br />Computer monitors display color as intensities of red, green, and blue light<br />RGB Color<br />The values of red, green, and blue vary from 0 to 255.<br />Hexadecimal numbers (base 16) represent these color values.<br />10<br />
    23. 23. Hexadecimal Color Values<br /># is used to indicate a hexadecimal value<br />Hex value pairs range from 00 to FF<br />Three hex value pairs describe an RGB color<br />#000000 black #FFFFFF white<br />#FF0000 red#00FF00 green<br />#0000FF blue #CCCCCC grey<br />11<br />
    24. 24. Web Color Palette<br />A collection of 216 colors<br />Display the most similar on the Mac and PCplatforms<br />Hex values: 00, 33, 66, 99, CC, FF<br />Color Chart<br />12<br />
    25. 25. Making Color Choices<br />How to choose a color scheme?<br />Monochromatic<br /><br />Choose from a photograph or other image<br /><br />Begin with a favorite color<br />Use one of the sites below to choose other colors<br /><br /><br /><br />
    26. 26. Accessibility & Color<br />Everyone is not able to see or distinguish between colors<br />Information must be conveyed even if color cannot be viewed<br />According to Vischeck<br />1 out of 20 people experience some type of color deficiency<br />Color choice can be crucial<br />Avoid using red, green, brown, gray, or purple next to each other<br />White, black, and shades of blue and yellow are easier to differentiate.<br />Simulation:<br />
    27. 27. Configuring Text with CSS<br />CSS properties for configuring text:<br />font-weight <br />Configures the boldness of text<br />font-style<br />Configures text to an italic style<br />font-size<br />Configures the size of the text<br />font-family<br />Configures the font typeface of the text<br />
    28. 28. The font-size Property<br /><ul><li>Accessibility Recommendation:
    29. 29. Use em or percentage font sizes – these can be easily enlarged in all browsers by users
    30. 30. Em and Percentage are relative</li></li></ul><li>The font-family Property<br />Not everyone has the same fonts installed in their computer<br />Configure a list of fonts and include a generic family name<br /><p style=“font-family: Arial,Verdana, sans-serif”}<br />
    31. 31. Assignment<br />Create an ‘About Me’ page and name it first_lastname_index.html<br />Make sure to include the following:<br />Inline style<br />Definition List<br />Image (source from image folder)<br />External link<br />Relative link (to recipe.html or band.html)<br />Contact link<br />Compress (zip) the package into and upload it to the discussion board.<br />
    32. 32. Next Week Class 5<br />Assignment<br />Pop Quiz<br />Practice on p.56 of your book<br />