Lecture Summary 2
Prepared by: Anthony Larrain
Recap of Last Class
- You should know how to do the following:
- Create folders (directories) and sub folders (sub directories) on your local system.
- View a web page given the URL
- View the HTML code, also called source code, of an existing web page.
- Given an HTML file view the web page through your browser locally.
- Know how to create a simple web page using the following HTML tags:
html head title body h1 p li ul strong
Web Colors
- Your computer monitor is a Cartesian Coordinate System.
- Upper left corner of the screen is the origin, (0,0)
- Positive x increases to your right from the origin, also called the width.
- Positive y increases down from the origin, also called the height.
- The x (width) and y (height) axis are divided into equal parts. For example some monitors:
- Divide the width into 800 equal units, and the height into 600 equal units.
- Divide the width into 1024 equal units, and the height into 768 equal units.
- Divide the width into 1152 equal units, and the height into 864 equal units.
- These divisions create numerous dots on your screen.
- A pixel, which stands for, Picture Element, is the name given to an individual dot.
- Screen Resolution is the number of pixels or dots, your monitor can display. Using the above examples:
- 800 X 600 = 480,000
- 1024 X 768 = 786,432
- 1152 X 864 = 995,328
- Each pixel is used to illuminate a color. Since there are many many pixels so close together we see an image. Think about the lights at a sporting event that displays words.
- Formally - A pixel is the basic unit of the composition of an image on a computer screen.
- On the computer screen the color emanating from a pixel is the composition of the colors Red, Green and Blue.
- Using red, green and blue in various combinations of intensity, it is possible to create over 16 million colors.
- Red, Green and Blue are considered the primary colors of Computer Graphics.
- The intensity of Red is controlled by an integer between 0 and 255. The same for green and blue.
- 0 means that color is not present, 255 means high intensity.
- If they are all 0 that means no color is present, so you would see black.
- If they are all 255, full intensity, you would see white.
- To use colors we can use the colors name. See online documentation or as a 6 digit hexadecimal number that represents the red, green and blue component of the color.
- Hexadecimal number system uses base 16.
- The 16 values used, are:
- An example using a hexadecimal number to represent color:
The first two symbols represent the amount of red, the second two the amount of green and the last two the amount of blue.
F9 = 15 x 161 + 9 x 160 = 15 x 16 + 9 x 1 = 249
C3 = 12 x 161 + 3 x 160 = 12 x 16 + 3 x 1 = 195
A6 = 10 x 161 + 6 x 160 = 10 x 16 + 6 x 1 = 166
This means we would get the color with red 249, green 195 and blue 166.
For example to change the background color of a web page to the above color we do: