reading-notes

Reading Notes for Codefellows!

---

Project maintained by AlanYHung Hosted on GitHub Pages — Theme by mattgraham

Code 201

Reading 05

(All My Notes are attributed/sourced from the Resources directly preceding them.)

HTML & CSS

Images (pp. 94-125)

• <img> is used to add images to Web Pages and has 2 Required Attributes
  1. src is required to tell the Browser where to find the picture
  2. alt is required to tell what the img is about
• Images ideally should be saved in the size needed for the Web Page and in the appropriate img format
  • Photographs are best saved as .jpg
  • illustrations or logos with flat colors are best saved as .gif
• There are optional Attributes to help with positioning and sizing of images.
  1. height - adjusts size of image vertically
  2. width - adjusts size of image horizontally
  3. align - used to indicate how other parts flow around image
• <figure> is a container created in HTML 5 to contain images and their caption
• <figcaption> is a container created in HTML 5 to contain any author comments for the image.

Color (pp. 246-263)

• Color brings your site to life, coveys mood, and evokes reactions.
• 3 ways to designate color in CSS
  1. RGB Values
  2. Hex Codes
  3. Color Names
• Color Pickers (using Web Browser Search Engine) can help you find the values for the colors you want.
• Contrast between text color and background color is important for legibility sake
• CSS3 has created a new Opacity parameter
  • RGBA
  • HSLA

Text (pp. 264-299)

• You can control font properties
  1. Font Type
     • Suitable for Long passages of text
       1. font-family (p. 271)
       2. font-face (p. 271)
       3. Service based font-face (p. 271)
     • Suitable for Short passages of text
       1. Images (p. 272)
       2. SIFR (p. 272)
       3. CUFON (p. 272)
  2. font-size
  3. font-weight (normal/bold)
  4. font-style (normal/italic/oblique)
  5. text-transform (uppercase/lowercase/capitalize)
  6. text-decoration (underline/overline/line through/blink)
  7. line-height
  8. letter-spacing
  9. text-align
  10. vertical-align
  11. text-indent
  12. text-shadow
• There are a limited number of fonts that can be assumed is installed on all machines
• There are a wide range of typefaces that can be used, but licenses are required for the use
• Psuedo classes can be used to change the style of text when an user hovers over, clicks on, or has visited a link.
  • :first-letter / :first-line
  • :link
  • :visited
  • :hover
  • :active
  • :focus
• Attribute Selectors can be used to create rules on specific elements (p. 292)
  • EXISTENCE - []
  • EQUALITY - [=]
  • SPACE - [~=]
  • PREFIX - [^=]
  • SUBSTRING - [*=]
  • SUFFIX - [$=]

<– Back