HTML - 2

Frames

·         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

The Frameset Tag

The Frame Tag

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 and Input

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>

 

 

Input

·         The most used form tag is the <input> tag.

·         The type of input is specified with the type attribute.

Text Fields

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

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

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

 

 

The Form's Action Attribute and the Submit Button

·         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.

 

Drop Down Box

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>

 

 

 

Text Area

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.

 

 

HTML Colors

Color Values

·        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)

 

Color Names

·        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

#F0F8FF

aliceblue

 

#FAEBD7

antiquewhite

 

#00FFFF

aqua

 

#7FFFD4

aquamarine

 

#F0FFFF

azure

 

#F5F5DC

beige

 

#FFE4C4

bisque

 

#000000

black

 

#FFEBCD

blanchedalmond

 

#0000FF

blue

 

#8A2BE2

blueviolet

 

#A52A2A

brown

 

#DEB887

burlywood

 

#5F9EA0

cadetblue

 

#7FFF00

chartreuse

 

#D2691E

chocolate

 

#FF7F50

coral

 

#6495ED

cornflowerblue

 

#FFF8DC

cornsilk

 

#DC143C

crimson

 

#00FFFF

cyan

 

#00008B

darkblue

 

#008B8B

darkcyan

 

#B8860B

darkgoldenrod

 

#A9A9A9

darkgray

 

#006400

darkgreen

 

#BDB76B

darkkhaki

 

#8B008B

darkmagenta

 

#556B2F

darkolivegreen

 

#FF8C00

darkorange

 

#9932CC

darkorchid

 

#8B0000

darkred

 

#E9967A

darksalmon

 

#8FBC8F

darkseagreen

 

#483D8B

darkslateblue

 

#2F4F4F

darkslategray

 

#00CED1

darkturquoise

 

#9400D3

darkviolet

 

#FF1493

deeppink

 

#00BFFF

deepskyblue

 

#696969

dimgray

 

#1E90FF

dodgerblue

 

#B22222

firebrick

 

#FFFAF0

floralwhite

 

#228B22

forestgreen

 

#FF00FF

fuchsia

 

#DCDCDC

gainsboro

 

#F8F8FF

ghostwhite

 

#FFD700

gold

 

#DAA520

goldenrod

 

#808080

gray

 

#008000

green

 

#ADFF2F

greenyellow

 

#F0FFF0

honeydew

 

#FF69B4

hotpink

 

#CD5C5C

indianred

 

#4B0082

indigo

 

#FFFFF0

ivory

 

#F0E68C

khaki

 

#E6E6FA

lavender

 

#FFF0F5

lavenderblush

 

#7CFC00

lawngreen

 

#FFFACD

lemonchiffon

 

#ADD8E6

lightblue

 

#F08080

lightcoral

 

#E0FFFF

lightcyan

 

#FAFAD2

lightgoldenrodyellow

 

#90EE90

lightgreen

 

#D3D3D3

lightgrey 

 

#FFB6C1

lightpink

 

#FFA07A

lightsalmon

 

#20B2AA

lightseagreen

 

#87CEFA

lightskyblue

 

#778899

lightslategray 

 

#B0C4DE

lightsteelblue

 

#FFFFE0

lightyellow

 

#00FF00

lime

 

#32CD32

limegreen

 

#FAF0E6

linen

 

#FF00FF

magenta

 

#800000

maroon

 

#66CDAA

mediumaquamarine

 

#0000CD

mediumblue

 

#BA55D3

mediumorchid

 

#9370DB

mediumpurple

 

#3CB371

mediumseagreen

 

#7B68EE

mediumslateblue

 

#00FA9A

mediumspringgreen

 

#48D1CC

mediumturquoise

 

#C71585

mediumvioletred

 

#191970

midnightblue

 

#F5FFFA

mintcream

 

#FFE4E1

mistyrose

 

#FFE4B5

moccasin

 

#FFDEAD

navajowhite

 

#000080

navy

 

#FDF5E6

oldlace

 

#808000

olive

 

#6B8E23

olivedrab

 

#FFA500

orange

 

#FF4500

orangered

 

#DA70D6

orchid 

 

#EEE8AA

palegoldenrod

 

#98FB98

palegreen

 

#AFEEEE

palevioletred

 

#FFEFD5

papayawhip

 

#FFDAB9

peachpuff

 

#CD853F

peru

 

#FFC0CB

pink

 

#DDA0DD

plum

 

#B0E0E6

powderblue

 

#800080

purple

 

#FF0000

red 

 

#BC8F8F

rosybrown

 

#4169E1

royalblue

 

#8B4513

saddlebrown

 

#FA8072

salmon

 

#FAA460

sandybrown

 

#2E8B57

seagreen 

 

#FFF5EE

seashell

 

#A0522D

sienna 

 

#C0C0C0

silver

 

#87CEEB

skyblue

 

#6A5ACD

slateblue 

 

#708090

slategray

 

#FFFAFA

snow

 

#00FF7F

springgreen

 

#4682B4

steelblue

 

#D2B48C

tan

 

#008080

teal

 

#D8BFD8

thistle

 

#FF6347

tomato

 

#40E0D0

turquoise

 

#EE82EE

violet

 

#F5DEB3

wheat

 

#FFFFFF

white

 

#F5F5F5

whitesmoke

 

#FFFF00

yellow

 

#9ACD32

yellowgreen

 

#000000

black

 

#000080

navy

 

#00008B

darkblue

 

#0000CD

mediumblue

 

#0000FF

blue

 

#006400

darkgreen

 

#008000

green

 

#008080

teal

 

#008B8B

darkcyan

 

#00BFFF

deepskyblue

 

#00CED1

darkturquoise

 

#00FA9A

mediumspringgreen

 

#00FF00

lime

 

#00FF7F

springgreen

 

#00FFFF

aqua

 

#00FFFF

cyan

 

#191970

midnightblue

 

#1E90FF

dodgerblue

 

#20B2AA

lightseagreen

 

#228B22

forestgreen

 

#2E8B57

seagreen 

 

#2F4F4F

darkslategray

 

#32CD32

limegreen

 

#3CB371

mediumseagreen

 

#40E0D0

turquoise

 

#4169E1

royalblue

 

#4682B4

steelblue

 

#483D8B

darkslateblue

 

#48D1CC

mediumturquoise

 

#4B0082

indigo

 

#556B2F

darkolivegreen

 

#5F9EA0

cadetblue

 

#6495ED

cornflowerblue

 

#66CDAA

mediumaquamarine

 

#696969

dimgray

 

#6A5ACD

slateblue 

 

#6B8E23

olivedrab

 

#708090

slategray

 

#778899

lightslategray 

 

#7B68EE

mediumslateblue

 

#7CFC00

lawngreen

 

#7FFF00

chartreuse

 

#7FFFD4

aquamarine

 

#800000

maroon

 

#800080

purple

 

#808000

olive

 

#808080

gray

 

#87CEEB

skyblue

 

#87CEFA

lightskyblue

 

#8A2BE2

blueviolet

 

#8B0000

darkred

 

#8B008B

darkmagenta

 

#8B4513

saddlebrown

 

#8FBC8F

darkseagreen

 

#90EE90

lightgreen

 

#9370DB

mediumpurple

 

#9400D3

darkviolet

 

#98FB98

palegreen

 

#9932CC

darkorchid

 

#9ACD32

yellowgreen

 

#A0522D

sienna 

 

#A52A2A

brown

 

#A9A9A9

darkgray

 

#ADD8E6

lightblue

 

#ADFF2F

greenyellow

 

#AFEEEE

palevioletred

 

#B0C4DE

lightsteelblue

 

#B0E0E6

powderblue

 

#B22222

firebrick

 

#B8860B

darkgoldenrod

 

#BA55D3

mediumorchid

 

#BC8F8F

rosybrown

 

#BDB76B

darkkhaki

 

#C0C0C0

silver

 

#C71585

mediumvioletred

 

#CD5C5C

indianred

 

#CD853F

peru

 

#D2691E

chocolate

 

#D2B48C

tan

 

#D3D3D3

lightgrey 

 

#D8BFD8

thistle

 

#DA70D6

orchid 

 

#DAA520

goldenrod

 

#DC143C

crimson

 

#DCDCDC

gainsboro

 

#DDA0DD

plum

 

#DEB887

burlywood

 

#E0FFFF

lightcyan

 

#E6E6FA

lavender

 

#E9967A

darksalmon

 

#EE82EE

violet

 

#EEE8AA

palegoldenrod

 

#F08080

lightcoral

 

#F0E68C

khaki

 

#F0F8FF

aliceblue

 

#F0FFF0

honeydew

 

#F0FFFF

azure

 

#F5DEB3

wheat

 

#F5F5DC

beige

 

#F5F5F5

whitesmoke

 

#F5FFFA

mintcream

 

#F8F8FF

ghostwhite

 

#FA8072

salmon

 

#FAA460

sandybrown

 

#FAEBD7

antiquewhite

 

#FAF0E6

linen

 

#FAFAD2

lightgoldenrodyellow

 

#FDF5E6

oldlace

 

#FF0000

red 

 

#FF00FF

fuchsia

 

#FF00FF

magenta

 

#FF1493

deeppink

 

#FF4500

orangered

 

#FF6347

tomato

 

#FF69B4

hotpink

 

#FF7F50

coral

 

#FF8C00

darkorange

 

#FFA07A

lightsalmon

 

#FFA500

orange

 

#FFB6C1

lightpink

 

#FFC0CB

pink

 

#FFD700

gold

 

#FFDAB9

peachpuff

 

#FFDEAD

navajowhite

 

#FFE4B5

moccasin

 

#FFE4C4

bisque

 

#FFE4E1

mistyrose

 

#FFEBCD

blanchedalmond

 

#FFEFD5

papayawhip

 

#FFF0F5

lavenderblush

 

#FFF5EE

seashell

 

#FFF8DC

cornsilk

 

#FFFACD

lemonchiffon

 

#FFFAF0

floralwhite

 

#FFFAFA

snow

 

#FFFF00

yellow

 

#FFFFE0

lightyellow

 

#FFFFF0

ivory

 

#FFFFFF

white

 

 

 

Web Safe Colors

·        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).

216 Cross Platform Colors

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

HTML Backgrounds

Backgrounds

The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.

Bgcolor

·        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. 

Background

·        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?