Your SlideShare is downloading. ×
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

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