Code 201: Class 05 Images, Color, and Text

Read: HTML Text Chapter 5 pp 94-125

Adding Images

<img> empty tag that must carry the following 2 attributes
src Source path to location of image, typically a relative location
alt Alt Text provides a description of the image if you cannot see it
title Title provides additional info about the image when user hovers over it with mouse
height specifies the height of a picture in pixels, typically set with CSS not html
width specifies width of picture in pixels, now typically set with CSS not html
<figure> tag to contain an image with its caption
<figcaption> add a caption to an image so they are associated with one another

3 Rules of Creating Images

Choose the right file type
- jpeg
  - good for pictures with many different colors
- gif
  - good for images with only a few colors or flat colors like a logo
- png
  - good for images with only a few colors or flat colors like a logo
Save at the right size
- save at the same size as is intended for the web display
- measure images in pixel dimensions
Vector images
- Benefit is that they can be scaled without quality loss
Animated gifs show a sequence of static images that appear to have basic animation
Transparent gif
- Can be used if edges are straight and normal to the browser window if the transparent portion is 100% transparent
Transparent PNG
- Must be used if transparent edges are diagonal, round, shadowed, or not 100% transparent

To determine current dimensions of an image on the web right click open in new tab, the dimensions will be displayed in the tab

Read: HTML Text Chapter 5 pp 246-263

Color the color: property allows you to specify text color in an element

RGB Values *express colors in terms of how much red, green, and blue are used rgb(100,100,90)
Hex Codes express the color using six-digit code representing amount of red, green, and blue in a color preceded by a #, example: #ee3e80
Color Names there are 147 predefined named colors, example: DarkCyan

CSS Comments developer notes that will not effect the code

Place comments between /*comment*/

Background Color background color is set to transparent by default, most browsers show white, but not always

body {
    background_color: rgb(200,200,200):}

Online Color Picking Tool Color Scheme Designer

Opacity allows developer to set the opacity of an element and its children, values from 0.0 to 1.0

To set opacity, indicate a color in rgba, example: rgba(231,112,56,0.5)

HSL Colors defines a color in three terms: hue, saturation, and lightness

Hue colloquial idea of color, often shown as a color wheel indicated by degrees 0-360
Saturation amount of gray in a color, 100% is full saturation, 0% is a shade of gray
Lightness amount of white or black in a color, 0% Lightness is black, 100% Lightness is white, 50% is normal. AKA Luminosity
HSLA adds the alpha value for transparency from 0 to 1.0

Read: HTML Text Chapter 5 pp 264-299

Typeface Terminology

Serif detail on bottom of letters thought to make longer text easier to read, but require higher resolution than most screens
Sans-Serif with lower resolution screens, easier to read
Monospace font that uses letters that all take up the same width, used by many code editors because it lines up well

Default text size in browser is 16px. Can use percentages to scale the text based on 16px = 100%

@font-face allows you to use a font that is not installed on the browsing computer

@font-family {
    font-family: 'ChunkFiveRegular';
    src: url('fonts/chunckfive.eot');
}
h1, h2 {
    font-family: ChunkFiveRegular, Georgia, serif;}
}

font-family specifies the name of the font
src path to the font
format format that the font is supplied in

Free font sources

www.fontsquirrel.com
www.fontex.org
www.openfontlibrary.org
www.typekit.com
www.kernest.com
www.fontspring.com
www.google.com/webfonts

Upper and Lowercase

text-transform: uppercase; turns all letters to uppercase
text-transform: lowercase; turns all letters to lowercase
text-transform: capitalize capitalizes first letter in each word

Return to reading-notes Deployed Site

Return to reading-notes Mark Down