Lecture Summaries class 4
Prepared by: Anthony Larrain
These notes serve as an outline to the lecture, they are not intended to
be complete. Attend class to get more details.
Before You Leave Today
You should know how to do the following:
- Know how to access COL and upload HW files.
- Upload an HTML file to your students account using SSH . If you are a MAC user
you need to get an FTP program.
- 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:
<![CDATA[
html head title body h1 p br li ul a
]]>
See Recipe.html
Recap of Class 3
- Introduced more HTML tags
<![CDATA[
a font hr i strong h1 h2 h3 h4 h5 h6 ol dl dt dd
]]>
- Attributes Some start tags can contain additional codes, called attributes used to:
supply additional information to the tag
<![CDATA[
<h1 align="center"> My First Page </h1>
<a href="http://www.yahoo.com">Y A H O O</a>
<font color="red">
<body bgcolor="aqua" text="black">
]]>
Adding Colors to Your Pages
- 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 untis, 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 we give 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:
<![CDATA[
0
1
2
3
4
5
6
7
8
9
A --> 10
B --> 11
C --> 12
D --> 13
E --> 14
F --> 15
]]>
- An example using a hexadecimal number to represent color:
<![CDATA[
Consider the number F9C3A6
]]>
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.
When working with hex numbers precede the number with the hash '#' symbol.
For example to change the background color of the body to the above color we do:
<![CDATA[
<body bgcolor="#F9C3A6">
]]>
Although allot of monitors are capable of displaying over 16 million colors, it is considered good practice to use the
216 web safe colors. See online documentation.