Reading-Notes

My journal for Code Fellows

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

Images, Color, Text

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

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

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