Welcome to Read: 05
Read: 05 - “HTML Images; CSS Color & Text”
In this Read: 05, I will have those three topics:
- Images.
- Color.
- Text.
—
Images
Every website you saw until now, I think you release that they are have an images. So, how you can add an image in your webpage.
But before you add an image it should be:
- Be relevant
- Convey information
- Convey the right mood
- Be instantly recognisable
- Fit the color palette
Adding Images
As an example of adding image.
<img src="https://asac.ltuc.com/wp-content/themes/asac/images/logo.png" alt="Kitten"
title="LTUC-Abdul Aziz Al Ghurair School of Advanced Computing" width="200" height="450" />
- To add an image into the page you need to use an
<img>element.srcThis tells the browser where it can find the image file.altThis provides a text description of the image which describes the image if you cannot see it.titleYou can also use the title attribute with the<img>element to provide additional information about the image.widthThis specifies the width of the image in pixels.heightThis specifies the height of the image in pixels.
Three rules for Creating Images
Color
Can you imagine the life without colors, it will be disaster and depressed life. Without colors we cannot live and enjoy in this life, and so that the website, without colors they will be boring webpages.
Foreground Color
The color property allows you to specify the color of text inside an element. You can specify any
color in CSS in one of three ways:
/* color name */
h1 {
color: DarkCyan;}
/* hex code */
h2 {
color: #ee3e80;}
/* rgb value */
p {
color: rgb(100,100,90);}
- rgb values : These express colors in terms of how much red, green and blue are used to make it up. For example: rgb(100,100,90)
- hex Codes These are six-digit codes that represent the amount of red, green and blue in a color, preceded by a pound or hash # sign. For example: #ee3e80.
- Color names: There are 147 predefined color names that are recognized by browsers. For example: DarkCyan.
Background-Color
CSS treats each HTML element as if it appears in a box, and the background-color propert sets the color of the background for that box. You can specify your choice of background color in the same three ways you can specify foreground colors: RGB values, hex codes, and color names. To understand the colors, see the following photo.
Contrast
Opacity
CSS3 introduces the opacity property which allows you to specify the opacity of an element
and any of its child elements. The value is a number between 0.0 and 1.0 (so a value of 0.5
is 50% opacity and 0.15 is 15% opacity).
The CSS3 rgba property allows you to specify a color, just like you would with an RGB value,
but adds a fourth value to indicate opacity.
hsl & hsla
The hsl color property has been introduced in CSS3 as an alternative way to specify colors. The value of the property starts with the letters hsl, followed by individual values inside parentheses for:
hue
This is expressed as an angle
(between 0 and 360 degrees).
saturation
This is expressed as a percentage.
lightness
This is expressed as a
percentage with 0% being white,
50% being normal, and 100%
being black.
Text
Of course, every webpage has a text on it, so how we can do styling to the text. We will show here how you do style to text. See the following.
Typeface Terminology
Choosing A Typeface For Your Website
units of Type Size
Attribute Selectors
—
| Read | Title | ToGo |
|---|---|---|
| Read: 01 | Introductory HTML and JavaScript |  |
| Read: 02 | HTML Text, CSS Introduction, and Basic JavaScript Instructions | |
| Read: 03 | HTML Lists, CSS Boxes, JS Control Flow | |
| Read: 04 | HTML Links, CSS Layout, JS Functions | |
| Read: 05 | HTML Images; CSS Color & Text | |
| Read: 06 | JS Object Literals; The DOM | |
| Read: 07 | HTML Tables; JS Constructor Functions |  |
| Read: 08 | More CSS Layout | |
| Read: 09 | Forms and Events | |
| Read: 10 | JS Debugging | |
| Read: 11 | Assorted Topics | |
| Read: 12 | Docs for the HTML canvas Element & Chart.js | |
| Read: 13 | Local Storage | |
| Read: 14a | CSS Transforms, Transitions, and Animations | |
| Read: 14b | What Google Learned About Teams | |