• Like
  • Save
Class4
Upcoming SlideShare
Loading in...5
×
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
455
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
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