Your SlideShare is downloading. ×
0
Class4
Class4
Class4
Class4
Class4
Class4
Class4
Class4
Class4
Class4
Class4
Class4
Class4
Class4
Class4
Class4
Class4
Class4
Class4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Class4

483

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

    • 1. Class 4<br />
    • 2. Reviews: Tags<br />Tags we have covered:<br />&lt;u&gt;<br /><ul><li>Paragraph
    • 3. Single line break
    • 4. Heading
    • 5. Strong emphasis
    • 6. Emphasis
    • 7. Bold
    • 8. Italicize
    • 9. Underline
    • 10. Anchor (link)
    • 11. Unordered List
    • 12. List Item
    • 13. Ordered List
    • 14. Insert Image with alternative text</li></ul>&lt;p&gt;<br />&lt;a&gt;<br />&lt;br/&gt;<br />&lt;ul&gt;<br />&lt;h1&gt;<br />&lt;li&gt;<br />&lt;strong&gt;<br />&lt;ol&gt;<br />&lt;em&gt;<br />&lt;imgsrc=“” alt =“”&gt;<br />&lt;b&gt;<br />&lt;i&gt;<br />
    • 15. Reviews: Inserting an Image<br />&lt;imgsrc=“image location” alt=“image description”/&gt;<br />index.html<br />1<br />images/stuart.jpg<br />&lt;imgsrc=“________________” alt=“stuart”/&gt;<br />&lt;imgsrc=“__________________” alt=“murdoc”/&gt;<br />images<br />2<br />images/murdoc.jpg<br />1<br />2<br />stuart.jpg<br />murdoc.jpg<br />
    • 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. W3.org’s guideline for HTML 5<br />&lt;b&gt;<br />&lt;i&gt;<br />
    • 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) &lt;h1 align=&quot;center&quot;&gt; How to Carve Wood &lt;/H1&gt; <br />
    • 19. blockquote<br />&lt;blockquote&gt; indents left and right margins<br />Non-breaking space<br />&amp;nbsp;<br />More Tags<br />
    • 20. More Tags<br /> &lt;dl&gt;<br /> &lt;dt&gt;&lt;strong&gt;Hobbies&lt;/strong&gt;&lt;/dt&gt;<br /> &lt;dd&gt;jump over fences&lt;/dd&gt;<br /> &lt;dd&gt;tip over alpacas&lt;/dd&gt;<br /> &lt;dt&gt;&lt;strong&gt;Favorite Food&lt;/strong&gt;&lt;/dt&gt;<br /> &lt;dd&gt;grass on bush&lt;/dd&gt;<br /> &lt;dd&gt;bush on grass&lt;/dd&gt;<br /> &lt;dd&gt; &lt;a href=&quot;recipe.html&quot;&gt;click here to see the recipe for both&lt;/a&gt;<br /> &lt;dt&gt;&lt;strong&gt;Favorite Band&lt;/strong&gt;&lt;/dt&gt;<br /> &lt;dd&gt;Alpacaz&lt;/dd&gt;<br /> &lt;dd&gt;&lt;a href=&quot;coldpacaz.html&quot;&gt;Coldpacaz&lt;/a&gt;&lt;/dd&gt;<br /> &lt;/dl&gt;<br />Definition List &lt;DL&gt;<br />Definition Title&lt;DT&gt;<br />Definition Data&lt;DD&gt;<br />
    • 21. More Links<br />Absolute link<br />Relative link<br />Email link<br />&lt;a href=&quot;mailto:jilee@lagcc.cuny.edu&quot;&gt;Contact me&lt;/a&gt;<br />
    • 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. 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. 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 http://webdevfoundations.net/color<br />12<br />
    • 25. Making Color Choices<br />How to choose a color scheme?<br />Monochromatic<br />http://meyerweb.com/eric/tools/color-blend<br />Choose from a photograph or other image<br />http://www.colr.org<br />Begin with a favorite color<br />Use one of the sites below to choose other colors<br />http://colorsontheweb.com/colorwizard.asp<br />http://kuler.Adobe.com<br />http://colorschemedesigner.com/<br />
    • 26. Accessibility &amp; 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 http://www.vischeck.com/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: http://www.vischeck.com/vischeck/vischeckURL.php<br />
    • 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. The font-size Property<br /><ul><li>Accessibility Recommendation:
    • 29. Use em or percentage font sizes – these can be easily enlarged in all browsers by users
    • 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 />&lt;p style=“font-family: Arial,Verdana, sans-serif”}<br />
    • 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 first_lastname.zip and upload it to the discussion board.<br />
    • 32. Next Week Class 5<br />Assignment<br />Pop Quiz<br />Practice on p.56 of your book<br />

    ×