|
| Components of an HTML tag |
 |
<p align="center"></p>
| < > |
Brackets. Each HTML tag is contained within a set of brackets. |
| p |
The root. The most basic element of instructional HTML code. See a list of common HTML tags » |
| align= |
An attribute. Tells the browser you're modifying the display of the root. A single root can have multiple attributes attached to it. Attributes are always followed by an equals sign and an attribute value. |
| "center" |
The attribute value. Tells the browser how exactly how to display the root. Always in quotes. |
| </p> |
The closing tag. Tells the browser where the instruction stops. When closing a tag, you only need to close the root portion of the tag; never its attributes or values. |
Sample:
<td align="center" valign="top" class="font_subhead"></td>
The above table data tag has three attributes. The first attribute is telling the table cell to align horizontally to the center. The second attribute is telling the cell to vertically align to the top, and the third attribute is telling the browser to look for a stylesheet class called "font_subhead". (How "font_subhead" will display is defined in the css.) When we close the table data tag, we only close the root of the tag.
| Basic tags required to create a web page |
|
| <!doctype> |
This tag identifies an xHTML document. It has no closing tag and is not self-closing. The full tag, with all its attributes, reads as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html> |
This tag identifies the beginning of a web page. |
| <head> |
The head contains information about how a web page will be loaded and displayed. |
| <title> |
The title describes the page's contents. The title will appear in the top title bar of a web browser window, not in the content or body of the web page itself. The title cannot be bold, italic, underlined, centered, etc. It is only text. |
| |
THE TITLE OF YOUR WEB PAGE GOES HERE. |
| </title> |
Closes the title tag. |
| </head> |
Closes the head tag. |
| <body> |
The body contains all the text, images, information, and content for your web page. |
| |
PLACE THE CONTENT OF YOUR WEB PAGE HERE. ALL TEXT AND IMAGES GO BETWEEN THE BODY TAGS. |
| </body> |
Closes the body tag. |
| </html> |
Closes the html tag. Identifies the end of a web page. |
| HTML colors |
|
When coding color for the web, we use a hexidecimal number to tell the computer monitor what color to display. Monitors display only 3 colors: red, green, and blue. No color produces black. All three colors together produce white light.
Hexidecimal color codes are always 6 digits long:
- First 2 digits = RED
- Second 2 digits = GREEN
- Third 2 digits = BLUE
|
The Hex Formula:
#_ _ | _ _ | _ _
R G B
|
Back in the early days of the web, there were only 6 numbers/letters that could be uses to create 256 web-safe colors: 0 3 6 9 C F
Now-a-days, most monitors can display more than 256 colors. Thus, we are no longer limited to just 0, 3, 6, 9, C, and F in our hexidecimal color codes. Any number 0-9 and letters A-F can be used to code HTML colors.
If each number is thought of as a lightbulb on a dimmer switch, the numbers represent the following:
- 0 - 0% light = off
- 1
- 2
- 3 - 20% light on
- 4
- 5
- 6 - 40% light on
- 7
- 8
- 9 - 60% light on
- A
- B
- C - 80% light on
- D
- E
- F - 100% light on
|
The Hex Formula:
#0 0 0 0 0 0
- - - - - -
R G B
#000000 = Black (all the lights are off)
|
The Hex Formula:
#f f f f f f
- - - - - -
R G B
#ffffff = White (all the lights are on) |
|
The Hex Formula:
#f f 0 0 0 0
- - - - - -
R G B
#ff0000 = Red (only the red light is on)
|
The Hex Formula:
#f f f f 0 0
- - - - - -
R G B
#ffff00 = Yellow (the red and green lights are on)
|
|
The Hex Formula:
#0 0 0 0 f f
- - - - - -
R G B
#0000ff = Blue (only the blue light is on)
|
The Hex Formula:
#0 0 f f f f
- - - - - -
R G B
#00ffff = Cyan (the green and blue lights are on)
|
|
The Hex Formula:
#0 0 f f 0 0
- - - - - -
R G B
#00ff00 = Green (only the green light is on)
|
The Hex Formula:
#f f 0 0 f f
- - - - - -
R G B
#ff00ff = Magenta (the red and blue lights are on)
|
Different combinations of RBG in different combinations of percents of light create the thousands of colors our monitors can display.
See MLT's standard web colors used on our websites »
|
