Reading-Notes
Images, Color, Text
Images
Images are the elements that add life to web pages, in order to add an image use the empty tag <img> inside define the image source in <src=""> and a description to your image in <alt="">.
HTML acts differently with the position of the image when it comes to its location relative to a text, adding the img tag at the beginning of a paragraph will locate the image beside the 1’st line of the paragraph, while the paragraph will wrap the img in case the tag is inside the paragraph.
Images Formats
Most common image formats are JPEG (Joint Photographic Experts Group), GIF (Graphics Interchange Format), and PNG (Portable Graphics Format), each has its own use.
| Format | description |
|---|---|
| JPEG | for images containing a lot of colors. |
| GIF | for animated images |
| PNG | low coloring, texts, and sharp edges, good for transparency |
see more in Images,w3schools and Imagekit,Blog
Colors
Colors are used in web pages for texts, borders, background, and many other features. There are different coloring naming systems like RGB, RGBa, HSL, HSLa, Hexa, and regular color names like red, blue,…etc.
Colors are basically combinations of red, green, and blue, with different ratios giving different colors. Color picker sites will make it easier to pick a color, after choosing one, you only have to copy its name no matter what naming system there is, examples for color picker:
Text
Basic font and text features are:
| feature | description |
|---|---|
| font-family | font name (type) |
| font-size | for setting size in px, %, or ems |
| font-weight | normal, bold, or black |
| font-style | normal, italic, or oblique |
| text-transform | uppercase, lowercase, or capitalize |
| text-decoration | none, underline, overline, line-through, or blink |
| text-align | left, right, center, or justify |
Links are also considered texts, there are further styling techniques for links, for active, visited, and hover.
Read more on: Fonts,w3schools