Reading-Notes
My journal for Code Fellows
Project maintained by RogerMReyes
Hosted on GitHub Pages — Theme by mattgraham
Images, Color, Text
Chapter 5 - Images
- Images can help the feel and style of your page and make it pop/stand out
- Images used in a site should be stored in an images file for it to access
- They are inserted into a webpage with the
<img>
tag
- Inside an image tag it must have the following attributes
src
tells the webpage where to pull the image file from
alt
is a text description for accessability issues
title
provides more information for the image
height
to control the images height
width
to control the images width
- Be sure to save the image in the correct format, at the right size, and account for the resolution change of different users
- JPEG should be used for images with lots of different colors
- PNG should be used for images that are a majority flat color
- Measurements for adjusting size of images should always be done so in reference to pixels
- Vector Images are not affected by resolution and can scale as you adjust their size
- GIFs show several frames of images to create a short ‘video’ snippet
<figure>
is used to contain images and is supplemented with a figcaption
<figcaption>
designates the caption associated with the image
Chapter 11 - Color
color
alters the text color and can be adjusted using RGB, HEX codes, or by color Names
background-color
sets the background of the ‘box’ associated to it
- Contrast between the text and background color should be considered for readability
- HSL is relatively new and stands for Hue, Saturation, and lightness combinations of the three interpret colors
Chapter 12 - Text
- Typefaces - are the formatting of the text. The most common include
- Serif
- Sans-Serif
- Mono-space
- Cursive
- Fantasy
font-family
specifies the typefaces you want to include
font-size
alters the text size
- Text size have a default scaling chart with the main default size being 16pt
font-weight
allows you to bold text
font-style
allows you to italicize text
text-transform
allows you to change the casing of the text
text-decoration
allows you to underline, overline, line through, or make the text blink
line-height
allows more space between text above
text-align
allows you to indicate what location you want the text to align to
text-indent
will indent the text by the given value
Return to Code 201 Table of Contents