CLASS-05
HTML IMAGES
For images we use the <img> tag. It is an empty element, does not need a closing tag. We also use the attributes src, alt and title. (e.g)
<img src="images/quokka.jpg" alt="A family of quokka" title="The quokka is an Australian marsupial." />
It is recommended to save images at the size they will be used.
Three rules for creating images:
- Save them in the right format.
- Save them at the right size.
- Measure images in pixels.
JPEG vs PNG vs GIF
- JPEG: For photos where the variation in color and intensity is smooth.
- PNG: For images with text or objects with sharp contrast edges like logos.
- GIF: For images with animations.
<figure> and <figcaption> elements are used to add captions to the images.
CSS COLOR
Different ways to specify color values in CSS:
- RGB VALUES: Colors in terms of how much Red, Green and Blue is used. (e.g.) rgb(100.100.90)
- HEX CODES: Six digit codes that represent how much Red, Green and Blue are in a color.(e.g) #ee3e80
- COLOR NAMES: Predefined colors. There are 147 color names recognized by browsers.
- HSL COLOR: Color determined based on their Hue, Saturation and Lightness values.(e.g.) hsl(0, 0%, 78%)
Alpha: Extra value added for opacity in RBG or HSL. (e.g) RBGA, HSLA
color: Specifies the color of text inside an element
background-color: Sets the color of the background of a box.
TEXT
CHOOSING A TYPEFACE
- Serif: Have extra details on the end.
- Sans-Serif: Have straight ends.
- Monospace: Every letter has the same width.
- Cursive: Have characteristics like handwriting style.
- Fantasy: They are usually decorative fonts often used for titles.
There are different properties to control weight, style and spacing.
Units of type size: Pixels(px), Percentages(%) and EMS(em)
The space between lines of text, letters and words can be adjusted.
Text can be aligned to the left, right, center or justified. It can also be intended.
Things I want to know more about
- To manipulate complex images.