·
With frames, you can display more than one HTML document in
the same browser window.
·
Each HTML document is called a frame, and each frame is
independent of the others.
·
The disadvantages of using frames are:
·
The web developer must keep track of more HTML documents
·
It is difficult to print the entire page
Example:
·
Frameset with two columns.
·
The first column is set to 25% of the width of the browser
window.
·
The second column is set to 75% of the width of the browser
window.
·
The HTML document "frame_a.htm" is put into the
first column, and the HTML document "frame_b.htm" is put into the
second column:
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> |
Example
<html> <frameset rows="50%,50%"> <frame src="lastfile.htm"> <frameset cols="25%,75%"> <frame src="lastfile.htm"> <frame src="lastfile.htm"> </frameset> </frameset> </html> |
HTML Forms are used to select different kinds of user input.
·
A form is an area that can contain form elements.
·
Form elements are elements that allow the user to enter
information (like text fields, textarea fields, drop-down menus, radio buttons,
checkboxes, etc.) in a form.
·
A form is defined with the <form> tag.
<form> <input> <input> </form> |
·
The most used form tag is the <input> tag.
·
The type of input is specified with the type attribute.
Text fields are used when you want
the user to type letters, numbers, etc. in a form.
<form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> |
How it looks in a browser:
First
name:
Last name:
·
Note that the form itself is not visible.
·
Also note that in most browsers, the width of the text field
is 20 characters by default.
Radio Buttons are used when you want the user to select one of a limited number of choices.
<form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form> |
How it looks in a browser:
Male
Female
Note that only one option can be chosen.
Checkboxes are used when you want
the user to select one or more options of a limited number of choices.
<form> <input type="checkbox" name="bike"> I have a bike <br> <input type="checkbox" name="car"> I have a car </form> |
How it looks in a browser:
I have a bike
I have a car
·
When the user clicks on the "Submit" button, the
content of the form is sent to another file.
·
The form's action attribute defines the name of the file to
send the content to.
· The file defined in the action attribute usually does something with the received input.
<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> |
How it looks in a browser:
Username:
·
If you type some characters in the text field above, and
click the "Submit" button, should send your input to a page called
"html_form_action.asp".
·
That page will show you the received input.
HTML |
Action |
<html> <body> <form> <select
name="cars"> <option
value="volvo">Volvo <option
value="saab">Saab <option
value="fiat">Fiat <option
value="audi">Audi </select> </form> </body> </html> |
|
HTML |
Action |
<html> <body> <p> This
example cannot be edited because our editor uses a textarea for input, and
your browser does not allow a textarea inside a textarea. </p> <textarea
rows="10" cols="30"> The cat was
playing in the garden. </textarea>
</body> </html> |
This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. |
·
Colors are defined using a hexadecimal notation for the
combination of Red, Green, and Blue color values (RGB).
·
The lowest value that can be given to one light source is 0
(hex #00).
·
The highest value is 255 (hex #FF).
·
This table shows the result of combining Red, Green, and
Blue light sources:.
Color |
Color HEX |
Color RGB |
|
#000000 |
rgb(0,0,0) |
|
#FF0000 |
rgb(255,0,0) |
|
#00FF00 |
rgb(0,255,0) |
|
#0000FF |
rgb(0,0,255) |
|
#FFFF00 |
rgb(255,255,0) |
|
#00FFFF |
rgb(0,255,255) |
|
#FF00FF |
rgb(255,0,255) |
|
#C0C0C0 |
rgb(192,192,192) |
|
#FFFFFF |
rgb(255,255,255) |
·
A collection of color names is supported by most browsers.
·
Note: Only 16 color names are
supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow).
·
For all other colors you should use the Color HEX
value.
Color |
Color HEX |
Color Name |
|
#F0F8FF |
AliceBlue |
|
#FAEBD7 |
AntiqueWhite |
|
#7FFFD4 |
Aquamarine |
|
#000000 |
Black |
|
#0000FF |
Blue |
|
#8A2BE2 |
BlueViolet |
|
#A52A2A |
Brown |
·
Older browsers (such as Internet Explorer 3) support a much
smaller range of names than more modern browsers.
·
All browsers should therefore support these colours:
#000000 |
black |
|
#000080 |
navy |
|
#0000FF |
blue |
|
#008000 |
green |
|
#008080 |
teal |
|
#00FF00 |
lime |
|
#00FFFF |
aqua |
|
#800000 |
maroon |
|
#800080 |
purple |
|
#808000 |
olive |
|
#808080 |
gray |
|
#C0C0C0 |
silver |
|
#FF0000 |
red |
|
#FF00FF |
fuchsia |
|
#FFFF00 |
yellow |
|
#FFFFFF |
white |
|
More
modern browsers support a much larger range of names:
Ordered by
colour name |
Ordered by
colour number |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
·
A few years ago, when most computers supported only 256
different colors.
·
A list of 216 Web Safe Colors was suggested as a Web
standard.
o The reason
for this was that the Microsoft and Mac operating system used 40 different
"reserved" fixed system colors (about 20 each).
This 216 cross platform web safe
color palette was originally created to ensure that all computers would display
all colors correctly when running a 256 color palette.
000000 |
000033 |
000066 |
000099 |
0000CC |
0000FF |
003300 |
003333 |
003366 |
003399 |
0033CC |
0033FF |
006600 |
006633 |
006666 |
006699 |
0066CC |
0066FF |
009900 |
009933 |
009966 |
009999 |
0099CC |
0099FF |
00CC00 |
00CC33 |
00CC66 |
00CC99 |
00CCCC |
00CCFF |
00FF00 |
00FF33 |
00FF66 |
00FF99 |
00FFCC |
00FFFF |
330000 |
330033 |
330066 |
330099 |
3300CC |
3300FF |
333300 |
333333 |
333366 |
333399 |
3333CC |
3333FF |
336600 |
336633 |
336666 |
336699 |
3366CC |
3366FF |
339900 |
339933 |
339966 |
339999 |
3399CC |
3399FF |
33CC00 |
33CC33 |
33CC66 |
33CC99 |
33CCCC |
33CCFF |
33FF00 |
33FF33 |
33FF66 |
33FF99 |
33FFCC |
33FFFF |
660000 |
660033 |
660066 |
660099 |
6600CC |
6600FF |
663300 |
663333 |
663366 |
663399 |
6633CC |
6633FF |
666600 |
666633 |
666666 |
666699 |
6666CC |
6666FF |
669900 |
669933 |
669966 |
669999 |
6699CC |
6699FF |
66CC00 |
66CC33 |
66CC66 |
66CC99 |
66CCCC |
66CCFF |
66FF00 |
66FF33 |
66FF66 |
66FF99 |
66FFCC |
66FFFF |
990000 |
990033 |
990066 |
990099 |
9900CC |
9900FF |
993300 |
993333 |
993366 |
993399 |
9933CC |
9933FF |
996600 |
996633 |
996666 |
996699 |
9966CC |
9966FF |
999900 |
999933 |
999966 |
999999 |
9999CC |
9999FF |
99CC00 |
99CC33 |
99CC66 |
99CC99 |
99CCCC |
99CCFF |
99FF00 |
99FF33 |
99FF66 |
99FF99 |
99FFCC |
99FFFF |
CC0000 |
CC0033 |
CC0066 |
CC0099 |
CC00CC |
CC00FF |
CC3300 |
CC3333 |
CC3366 |
CC3399 |
CC33CC |
CC33FF |
CC6600 |
CC6633 |
CC6666 |
CC6699 |
CC66CC |
CC66FF |
CC9900 |
CC9933 |
CC9966 |
CC9999 |
CC99CC |
CC99FF |
CCCC00 |
CCCC33 |
CCCC66 |
CCCC99 |
CCCCCC |
CCCCFF |
CCFF00 |
CCFF33 |
CCFF66 |
CCFF99 |
CCFFCC |
CCFFFF |
FF0000 |
FF0033 |
FF0066 |
FF0099 |
FF00CC |
FF00FF |
FF3300 |
FF3333 |
FF3366 |
FF3399 |
FF33CC |
FF33FF |
FF6600 |
FF6633 |
FF6666 |
FF6699 |
FF66CC |
FF66FF |
FF9900 |
FF9933 |
FF9966 |
FF9999 |
FF99CC |
FF99FF |
FFCC00 |
FFCC33 |
FFCC66 |
FFCC99 |
FFCCCC |
FFCCFF |
FFFF00 |
FFFF33 |
FFFF66 |
FFFF99 |
FFFFCC |
FFFFFF |
The <body> tag has two
attributes where you can specify backgrounds. The background can be a color or
an image.
·
The bgcolor attribute specifies a background-color for an
HTML page.
·
The value of this attribute can be a hexadecimal number, an
RGB value, or a color name:
<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> |
The lines above all set the
background-color to black.
·
The background attribute specifies a background-image for an
HTML page.
·
The value of this attribute is the URL of the image you want
to use.
·
If the image is smaller than the browser window, the image
will repeat itself until it fills the entire browser window.
<body background="clouds.gif"> <body background="http://www.w3schools.com/clouds.gif"> |
·
The URL can be relative (as in the first line above) or
absolute (as in the second line above).
·
Note: If you want to use a background
image, you should keep in mind:
Will the background image increase the loading time too
much?
Will the background image look good with other images on the
page?
Will the background image look good with the text colors on
the page?
Will the background image look good when it is repeated on
the page?
Will the background image take away the focus from the text?