HTML Beginner tutorial 16 : HTML Colors

Color Values
HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest value is 255 (in HEX: FF). HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.

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)

16 Million Different Colors
The combination of Red, Green, and Blue values from 0 to 255, gives more than 16 million different colors (256 x 256 x 256). If you look at the color table, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero.

Gray Shades	Color HEX	Color RGB
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
	#C0C0C0	rgb(192,192,192)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)

Web Safe Colors
Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe Colors" was suggested as a Web standard, reserving 40 fixed system colors.
The 216 cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette. This is not important today, since most computers can display millions of different colors.


Color Names Supported by All Browsers
147 color names are defined in the HTML and CSS color specification (16 basic color names plus 130 more). The 16 basic color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

HTML Advanced tutorial 17 : HTML Layouts  >>
<<  HTML Beginner tutorial 15 : HTML Iframes

HTML Beginner tutorial 15 : HTML Iframes

An iframe is used to display a web page within a web page. For Example, syntax for adding an iframe is

<iframe src="SITEURL"></iframe>

The SITEURL points to the location of the separate page.

Set Height and Width
The height and width attributes are used to specify the height and width of the iframe. The attribute values are specified in pixels by default, but they can also be in percent (like "90%").
For Example

<iframe src="site1.htm" width="300" height="300"></iframe>

Remove the Border
The frameborder attribute specifies whether or not to display a border around the iframe. Set the attribute value to "0" to remove the border.
For Example

<iframe src="site1.htm" frameborder="0"></iframe>

Use iframe as a Target for a Link
An iframe can be used as the target frame for a link. The target attribute of a link must refer to the name attribute of the iframe.
For Example

<iframe src="site2.htm" name="iframe_1"></iframe>
<p><a href="http://www.yoursite.com" target="iframe_a">Yahoo</a></p>

HTML iframe Tag

Tag             Description
<iframe>      Defines an inline sub window (frame)

HTML Beginner tutorial 16 : HTML Colors  >>
<<  HTML Beginner tutorial 14 : HTML Frames

HTML Beginner tutorial 14 : HTML Frames

HTML 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

1. Frames are not expected to be supported in future versions of HTML
2. Frames are difficult to use. (Printing the entire page is difficult).
3. The web developer must keep track of more HTML documents

The HTML frameset Element
The frameset element holds one or more frame elements. Each frame element can hold a separate document. The frameset element states How many columns or rows there will be in the frameset, and how much percentage/pixels of space will occupy each of them.

The HTML frame Element
The <frame> tag defines one particular window (frame) within a frameset. For example below we have a frameset with two columns.

The first column is set to 30% of the width of the browser window. The second column is set to 70% of the width of the browser window. The document "frame_1.htm" is put into the first column, and the document "frame_2.htm" is put into the second column:

<frameset cols="30%,70%">
   <frame src="frame_1.htm" />
   <frame src="frame_2.htm" />
</frameset>

The frameset column size can also be set in pixels (cols="300,400"), and one of the columns can be set to use the remaining space, with an asterisk (cols="30%,*").


Basic Notes
If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag. Add the <noframes> tag for browsers that do not support frames. You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is done in the first example below.


HTML Frame Tags

Tag                      Description
<frameset>           Defines a set of frames
<frame />             Defines a sub window (a frame)
<noframes>          Defines a noframe section for browsers that do not handle frames

HTML Beginner tutorial 15 : HTML Iframes  >>
<<  HTML Beginner tutorial 13 : HTML Lists

HTML Beginner tutorial 13 : HTML Lists

HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles).
For Example

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>


How the HTML code above looks in a browser:

• Coffee
• Milk

HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers.
For Example

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

How the HTML code above looks in a browser:

1. Coffee
2. Milk

HTML Definition Lists
A definition list is a list of items, with a description of each item. The <dl> tag defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list). For Example

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

How the HTML code above looks in a browser:

Coffee

- black hot drink

Milk

- white cold drink

Inside a list item you can put text, line breaks, images, links, other lists, etc.

HTML List Tags

Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd>  Defines a description of an item in a definition list

HTML Beginner tutorial 14 : HTML Frames  >>
<<  HTML Beginner tutorial 12 : HTML Tables

HTML Beginner tutorial 12 : HTML Tables

HTML Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
For Example

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>

How the HTML code above looks in a browser:

row 1, cell 1	row 1, cell 2	row 1, cell 3
row 2, cell 1	row 2, cell 2	row 2, cell 3

HTML Tables and the Border Attribute
If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show. To display a table with borders, specify the border attribute:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

HTML Table Headers
Header information in a table are defined with the <th> tag. All major browsers display the text in the <th> element as bold and centered.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>

How the HTML code above looks in your browser:

Header 1	Header 2	Header 3
row 1, cell 1	row 1, cell 2	row 1, cell 3
row 2, cell 1	row 2, cell 2	row 2, cell 3

HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines a group of columns in a table, for formatting
<col /> Defines attribute values for one or more columns in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

HTML Beginner tutorial 13 : HTML Lists  >>
<<  HTML Beginner tutorial 11 : HTML Images