4. HTML Basics > Images
The img tag requires the src attribute, which
tells the browser where to find the image to be
placed. The alt attribute is a best practice.
<img src=”logo.png” alt=”alternate text” />
6. HTML Basics > Images
relative vs. absolute paths vs. full URL
<img src=”images/logo.png” alt=”” />
<img src=”/images/logo.png” alt=””>
<img src=”http://keebla.com/images/logo.jpg” alt=”” />
7. HTML Basics > Images
alt attribute
<img src=”logo.png” alt=”alternate text” />
~ file not found
~ screen readers
~ validation (best practice)
8. HTML Basics > Images
Three main image file formats”
.gif (“It’s pronounced ‘JIF’”)
.jpg (.jpeg)
.png
9. HTML Basics > Images
.jpg
~ no transparency
~ can be stored at different compression levels
~ varying amounts of "lossy-ness"
~ typically the best format for photos
~ balance between photo quality and file size
10. HTML Basics > Images
.gif
~ supports transparency
~ ideal for logos, icons, tiles backgrounds
11. HTML Basics > Images
.png
~ supports transparency
~ ideal for logos, icons, tiles backgrounds
~ preferable to .gif format
19. Intro to CSS
Hex Colors (BASE 16)
0123456789ABCDEF
#FFFFFF (white) -- “blinded by the light”
#000000 (black) -- “absence of light”
20. Intro to CSS
RGB Color Values
rgb(0,0,0)
~ each value can range from 0 to 255
~ 00 to FF in base 16
21. Intro to CSS
RGB Color Values
rgb(0,0,0) -- black
rgb(255, 255, 255) -- white
rgb(255, 0, 0) -- red
green? blue?
22. Intro to CSS
RGBa Color Values
~ fourth value is called alpha
~ value between 0 and 1
~ used to determine a color’s opacity
0 = completely transparent
1 = completely solid
23. Intro to CSS
RGBa Color Values
rgba(0, 0, 0, .25)
~ black at 25% opacity
rgba(255, 255, 255, .80)
~ white at 80% opacity
24. Intro to CSS
HSL and HSLa Color Values
~ Hue
~ Saturation
~ Lightness
Explanation at W3Schools
HSL Color Picker
