1. HTML Colors
Only 16 color names are recognized in valid HTML and CSS. The remaining colors are represented by a # sign plus 6 characters that make up a hexadecimal code.
Hexadecimal codes are formed from a combination of the primary colors: red, green and blue, or RGB. The first two digits of a hex code represent the amount of red in the color, the second two digits represent the amount of green in the color, and the third two digits represent the amount of blue in the color. The lowest value is 0 (hex 00) and the highest value is 255 (hex FF).
Hexadecimal codes can be complexing unless you study them in detail. There are approximately 16 million different colors that can be created from hexadecimal codes, only about fifteen-thousand of which will display correctly in the average browser. A standard of 256 "web safe" colors were developed years ago, and although many more colors are safe now for general use, the original 256 colors are still common.
HTML Color Names
| Color Name | HEX | Color |
|---|---|---|
| Aqua | #00FFFF | |
| Black | #000000 | |
| Blue | #0000FF | |
| Fuchsia | #FF00FF | |
| Gray | #808080 | |
| Green | #008000 | |
| Lime | #00FF00 | |
| Maroon | #800000 | |
| Navy | #000080 | |
| Olive | #808000 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| Silver | #C0C0C0 | |
| Teal | #008080 | |
| White | #FFFFFF | |
| Yellow | #FFFF00 |
216 Web Safe Colors
The following is a list of the 216 colors that were determined to be safe for use on the web (they appeared the same on all monitors). Any hexadecimal code that contains three sets of identical pairs, such as these 216 colors, can be abbreviated to 3 digits (example: #CC0000 = #C00).
| #000000 | #330000 | #660000 | #990000 | #CC0000 | #FF0000 |
| #000033 | #330033 | #660033 | #990033 | #CC0033 | #FF0033 |
| #000066 | #330066 | #660066 | #990066 | #CC0066 | #FF0066 |
| #000099 | #330099 | #660099 | #990099 | #CC0099 | #FF0099 |
| #0000CC | #3300CC | #6600CC | #9900CC | #CC00CC | #FF00CC |
| #0000FF | #3300FF | #6600FF | #9900FF | #CC00FF | #FF00FF |
| #003300 | #333300 | #663300 | #993300 | #CC3300 | #FF3300 |
| #003333 | #333333 | #663333 | #993333 | #CC3333 | #FF3333 |
| #003366 | #333366 | #663366 | #963366 | #CC3366 | #FF3366 |
| #003399 | #333399 | #663399 | #993399 | #CC3399 | #FF3399 |
| #0033CC | #3333CC | #6633CC | #9933CC | #CC33CC | #FF33CC |
| #0033FF | #3333FF | #6633FF | #9933FF | #CC33FF | #FF33FF |
| #006600 | #336600 | #666600 | #996600 | #CC6600 | #FF6600 |
| #006633 | #336633 | #666633 | #996633 | #CC6633 | #FF6633 |
| #006666 | #336666 | #666666 | #996666 | #CC6666 | #FF6666 |
| #006699 | #336699 | #666699 | #996699 | #CC6699 | #FF6699 |
| #0066CC | #3366CC | #6666CC | #9966CC | #CC66CC | #FF66CC |
| #0066FF | #3366FF | #6666FF | #9966FF | #CC66FF | #FF66FF |
| #009900 | #339900 | #669900 | #999900 | #CC9900 | #FF9900 |
| #009933 | #339933 | #669933 | #999933 | #CC9933 | #FF9933 |
| #009966 | #339966 | #669966 | #999966 | #CC9966 | #FF9966 |
| #009999 | #339999 | #669999 | #999999 | #CC9999 | #FF9999 |
| #0099CC | #3399CC | #6699CC | #9999CC | #CC99CC | #FF99CC |
| #0099FF | #3399FF | #6699FF | #9999FF | #CC99FF | #FF99FF |
| #00CC00 | #33CC00 | #66CC00 | #99CC00 | #CCCC00 | #FFCC00 |
| #00CC33 | #33CC33 | #66CC33 | #99CC33 | #CCCC33 | #FFCC33 |
| #00CC66 | #33CC66 | #66CC66 | #99CC66 | #CCCC66 | #FFCC66 |
| #00CC99 | #33CC99 | #66CC99 | #99CC99 | #CCCC99 | #FFCC99 |
| #00CCCC | #33CCCC | #66CCCC | #99CCCC | #CCCCCC | #FFCCCC |
| #00CCFF | #33CCFF | #66CCFF | #99CCFF | #CCCCFF | #FFCCFF |
| #00FF00 | #33FF00 | #66FF00 | #99FF00 | #CCFF00 | #FFFF00 |
| #00FF33 | #33FF33 | #66FF33 | #99FF33 | #CCFF33 | #FFFF33 |
| #00FF66 | #33FF66 | #66FF66 | #99FF66 | #CCFF66 | #FFFF66 |
| #00FF99 | #33FF99 | #66FF99 | #99FF99 | #CCFF99 | #FFFF99 |
| #00FFCC | #33FFCC | #66FFCC | #99FFCC | #CCFFCC | #FFFFCC |
| #00FFFF | #33FFFF | #66FFFF | #99FFFF | #CCFFFF | #FFFFFF |
Black, White & Shades of Grey
The following is a list of shades of grey between solid black and solid white.
| HEX | Color |
|---|---|
| #000000 | |
| #080808 | |
| #101010 | |
| #181818 | |
| #202020 | |
| #282828 | |
| #303030 | |
| #383838 | |
| #404040 | |
| #484848 | |
| #505050 | |
| #585858 | |
| #606060 | |
| #686868 | |
| #707070 | |
| #787878 | |
| #808080 | |
| #888888 | |
| #909090 | |
| #989898 | |
| #A0A0A0 | |
| #A8A8A8 | |
| #B0B0B0 | |
| #B8B8B8 | |
| #C0C0C0 | |
| #C8C8C8 | |
| #D0D0D0 | |
| #D8D8D8 | |
| #E0E0E0 | |
| #E8E8E8 | |
| #F0F0F0 | |
| #F8F8F8 | |
| #FFFFFF |
2. HTML Entities
So... if an HTML element, such as <html> </html> will be read by the browser and not shown on the webpage, how did I just get that element to show up on the webpage?!
There are five "reserved characters" in HTML. They are: " ' & < >. Despite being reserved for HTML, these characters can be made visible in a browser using HTML entities.
HTML entities represent symbols, or characters, such as those that you see on your keyboard, as well as many that are not included on your keyboard, such as the copyright © symbol. Each entity is identified by a short, unique code beginning with an ampersand & and ending with a semicolon ; with the entity name in between.
ASCII characters are the standard 128 characters used in languages and by computers and other devices, consisting of the numbers 0-9, the uppercase and lowercase English alphabet, and other standard English punctuations and characters. There are HTML entities for each ASCII character.
There are 256 HTML entities; we will only list some of them here. They can be displayed using their assigned name or a numerical code.
HTML Entities
| Symbol | Description | Numerical Code | Name Code |
|---|---|---|---|
| space |   | | |
| ! | exclamation mark | ! | |
| " | quotation mark | " | " |
| # | number sign | # | |
| $ | dollar sign | $ | |
| % | percent sign | % | |
| & | ampersand | & | |
| ' | apostrophe | ' | |
| ( | left parenthesis | ( | |
| ) | right parenthesis | ) | |
| * | asterisk | * | |
| + | plus sign | + | |
| , | comma | , | |
| - | hyphen | - | |
| . | period | . | |
| / | slash | / | |
| 0 | digit 0 | 0 | |
| 1 | digit 1 | 1 | |
| 2 | digit 2 | 2 | |
| 3 | digit 3 | 3 | |
| 4 | digit 4 | 4 | |
| 5 | digit 5 | 5 | |
| 6 | digit 6 | 6 | |
| 7 | digit 7 | 7 | |
| 8 | digit 8 | 8 | |
| 9 | digit 9 | 9 | |
| : | colon | : | |
| ; | semicolon | ; | |
| < | less-than | < | < |
| = | equals-to | = | |
| > | greater-than | > | > |
| ? | question mark | ? | |
| @ | at sign | @ | |
| A | uppercase A | A | |
| B | uppercase B | B | |
| C | uppercase C | C | |
| D | uppercase D | D | |
| E | uppercase E | E | |
| F | uppercase F | F | |
| G | uppercase G | G | |
| H | uppercase H | H | |
| I | uppercase I | I | |
| J | uppercase J | J | |
| K | uppercase K | K | |
| L | uppercase L | L | |
| M | uppercase M | M | |
| N | uppercase N | N | |
| O | uppercase O | O | |
| P | uppercase P | P | |
| Q | uppercase Q | Q | |
| R | uppercase R | R | |
| S | uppercase S | S | |
| T | uppercase T | T | |
| U | uppercase U | U | |
| V | uppercase V | V | |
| W | uppercase W | W | |
| X | uppercase X | X | |
| Y | uppercase Y | Y | |
| Z | uppercase Z | Z | |
| [ | left square bracket | [ | |
| \ | backslash | \ | |
| ] | right square bracket | ] | |
| ^ | caret | ^ | |
| _ | underscore | _ | |
| ` | grave accent | ` | |
| a | lowercase a | a | |
| b | lowercase b | b | |
| c | lowercase c | c | |
| d | lowercase d | d | |
| e | lowercase e | e | |
| f | lowercase f | f | |
| g | lowercase g | g | |
| h | lowercase h | h | |
| i | lowercase i | i | |
| j | lowercase j | j | |
| k | lowercase k | k | |
| l | lowercase l | l | |
| m | lowercase m | m | |
| n | lowercase n | n | |
| o | lowercase o | o | |
| p | lowercase p | p | |
| q | lowercase q | q | |
| r | lowercase r | r | |
| s | lowercase s | s | |
| t | lowercase t | t | |
| u | lowercase u | u | |
| v | lowercase v | v | |
| w | lowercase w | w | |
| x | lowercase x | x | |
| y | lowercase y | y | |
| z | lowercase z | z | |
| { | left curly brace | { | |
| | | vertical bar | | | |
| } | right curly brace | } | |
| ~ | tilde | ~ | ∼ |
| ¡ | Inverted Exclamation | ¡ | ¡ |
| ¢ | Cent | ¢ | ¢ |
| £ | English Pound | £ | £ |
| ¤ | Currency | ¤ | ¤ |
| ¥ | Yen | ¥ | ¥ |
| ¦ | Broken Vertical Bar | ¦ | ¦ |
| § | Section | § | § |
| ¨ | Double Dot | ¨ | ¨ |
| © | Copyright | © | © |
| ª | Feminine Ordinal Indicator | ª | ª |
| « | Left Angle Quotation Mark | « | « |
| » | Right Angle Quotation Mark | » | » |
| ¬ | Negation | ¬ | ¬ |
| ® | Registered Trademark | ® | ® |
| ¯ | Spacing Macron | ¯ | ¯ |
| ° | Degree(s) | ° | ° |
| ± | Plus or Minus | ± | ± |
| ² | Superscript 2 | ² | ² |
| ³ | Superscript 3 | ³ | ³ |
| ´ | Spacing Acute | ´ | ´ |
| µ | Micro | µ | µ |
| ¶ | Paragraph | ¶ | ¶ |
| · | Middle Dot | · | · |
| ¸ | Spacing Cedilla | ¸ | ¸ |
| ¹ | Superscript 1 | ¹ | ¹ |
| º | Masculine Ordinal Indicator | º | º |
| ¼ | � Fraction | ¼ | ¼ |
| ½ | � Fraction | ½ | ½ |
| ¾ | � Fraction | ¾ | ¾ |
| ¿ | Inverted Question Mark | ¿ | ¿ |
| À | Grave Accent-Captial A | À | À |
| Á | Acute Accent-Capital A | Á | Á |
| Â | Circumflex Accent-Capital A | Â | Â |
| Ã | Tilde-Capital A | Ã | Ã |
| Ä | Umlaut Mark-Capital A | Ä | Ä |
| Å | Ring-Capital A | Å | Å |
| Æ | Capital ae | Æ | Æ |
| Ç | Cedilla-Capital C | Ç | Ç |
| È | Grave Accent-Capital E | È | È |
| É | Acute Accent-Capital E | É | É |
| Ê | Circumflex Accent-Capital E | Ê | Ê |
| Ë | Umlaut Mark-Capital E | Ë | |
| Ì | Grave Accent-Capital I | Ì | Ì |
| Í | Acute Accent-Capital I | Í | Í |
| Î | Circumflex Accent-Capital I | Î | Î |
| Ï | Umlaut Mark-Capital I | Ï | Ï |
| Ð | Capital eth | Ð | Ð |
| Ñ | Tilde-Capital N | Ñ | Ñ |
| Ò | Grave Accent-Capital O | Ò | Ò |
| Ó | Acute Accent-Capital O | Ó | Ó |
| Ô | Circumflex Accent-Capital O | Ô | Ô |
| Õ | Tilde-Capital O | Õ | Õ |
| Ö | Umlaut Mark-Capital O | Ö | |
| × | Multiplication | × | × |
| Ø | Slash-Capital O | Ø | Ø |
| Ù | Grave Accent-Capital U | Ù | Ù |
| Ú | Acute Accent-Captital U | Ú | Ú |
| Û | Circumflex Accent-Capital U | Û | Û |
| Ü | Umlaut Mark-Capital U | Ü | Ü |
| Ý | Acute Accent-Capital Y | Ý | Ý |
| Þ | Thorn | Þ | Þ |
| ß | Small Sharp | ß | ß |
| æ | Small ae | æ | æ |
| ð | Small eth | ð | ð |
| ø | Slash-Small o | ø | ø |
| þ | Small Thorn | þ | þ |
| Π| Capital Ligature | Π| Π|
| œ | Small Ligature | œ | œ |
| ˆ | Modifier Circumflex Accent | ˆ | ˆ |
| ˜ | Small Tilde | ˜ | ˜ |
| – | En Dash | – | – |
| — | Em Dash | — | — |
| ‘ | Left Single Quote | ‘ | ‘ |
| ’ | Right Single Quote | ’ | ’ |
| ‚ | Single Low Quote | ‚ | ‚ |
| “ | Left Double Quote | “ | “ |
| ” | Right Double Quote | ” | ” |
| „ | Double Low Quote | „ | „ |
| † | Dagger | † | † |
| ‡ | Double Dagger | ‡ | ‡ |
| ‰ | Per Mile | ‰ | ‰ |
| ‹ | Left Single Arrow Quote | ‹ | ‹ |
| › | Right Single Arrow Quote | › | › |
| € | Euro Mark | € | € |
| ™ | TradeMark | ™ | ™ |
3. HTML Events
Events are actions that take place in your browser, normally triggered by a visitor's use of the keyboard or mouse. Events are processed by a script, usually Javascript, that is written to perform a specific action when the event occurs. Most events require some knowledge of Javascript or the ability to copy and paste Javascript code that is offered freely on the web.
Events can be used to switch one image with another when your mouse hovers over it, or to validate forms when the submit button is pressed. The possibilities are endless... well, almost.
Let's take a look at the events available.
Window Events
Window events work inside of the body element.
| Attribute | Value | When Is Event Triggered? |
|---|---|---|
| onload | Script | Event Happens (Script is Executed) When A Document Loads |
| onunload | Script | Event Happens (Script is Executed) When A Document Unloads |
Keyboard Events
Keyword events work on of all of the basic HTML elements inside the body of the document.
| Attribute | Value | When Is Event Triggered? |
|---|---|---|
| onkeyup | Script | Event Happens (Script is Executed) When A Key Is Released |
| onkeydown | Script | Event Happens (Script is Executed) When A Key Is Pressed |
| onkeypress | Script | Event Happens (Script is Executed) When A Key Is Pressed & Released |
Mouse Events
Mouse events work on of all of the basic HTML elements inside the body of the document.
| Attribute | Value | When Is Event Triggered? |
|---|---|---|
| onmouseover | Script | Event Happens (Script is Executed) When Mouse Pointer Is Moved Over An Element |
| onmouseout | Script | Event Happens (Script is Executed) When Mouse Pointer Is Moved Out of An Element |
| onclick | Script | Event Happens (Script is Executed) When Mouse Is Clicked |
| ondblclick | Script | Event Happens (Script is Executed) When Mouse Is Double-Clicked |
| onmouseup | Script | Event Happens (Script is Executed) When Mouse Button Is Released |
| onmousedown | Script | Event Happens (Script is Executed) When Mouse Button Is Pressed |
| onmousemove | Script | Event Happens (Script is Executed) When Mouse Button Is Moved |
Form Events
Form events only work inside of form elements.
| Attribute | Value | When Is Event Triggered? |
|---|---|---|
| onsubmit | Script | Event Happens (Script is Executed) When Form Is Submitted |
| onreset | Script | Event Happens (Script is Executed) When Form Is Reset |
| onselect | Script | Event Happens (Script is Executed) When Element Is Selected |
| onblur | Script | Event Happens (Script is Executed) When Element Loses Focus |
| onfocus | Script | Event Happens (Script is Executed) When Element Gets Focus |
| onchange | Script | Event Happens (Script is Executed) When Element Changes |
Events in Action
If you resisted clicking on the button above, click on it anyway for an example of an event in action. Let's pick apart the code that made it possible.
You might not have learned much about forms yet. They are the elements of HTML that allow your visitors to interact with the website. The form button in this example includes the "onclick" attribute with a value of "alert('');", which is a Javascript function that pops up a little alert box with text in it.
Notice what happens when you move your mouse over the image, and then back off of it? The code to trigger these actions comes in two parts.
if (document.images) {
image1 = new Image
image2 = new Image
image1.src = 'images/duck.gif'
image2.src = 'images/snake.gif'
}
</script>
<span onMouseOver="document.rollover.src=image2.src" onMouseOut="document.rollover.src=image1.src">
<img src="images/duck.gif" name="rollover">
</span>
Both the javascript code and the image and span tags can be placed between the HTML document's body tags. You can replace the image names and paths with your own images and be switching images like a pro in no time at all.
4. HTML Music Codes
HTML provides the <embed> tag as a method of embedding music in your HTML file. It is an empty element, meaning that it does not have a closing tag. The "src", or source attribute points to the location and name of the file that is to be embedded. The file types supported by this element are MIDI (.mid), MP3 (.mp3) and WAV (.wav).
You can control the size and other display aspects of the player that is embedded in your webpage.
height="" Numeric Value Indicating the Height of the Player
hidden="true" Hides the Play/Pause/Stop Controls
hidden="false" Shows the Play/Pause/Stop Controls
Several additional attributes are available.
autostart="false" Prevents the Music From Playing Until "Play" Is Pressed
loop="true" Loops/Repeats the Music Continuously
loop="false" Loops/Repeats the Music Once
volume="" Numeric Value (0-100) Controls the Starting Volume
Most visitors will not appreciate music being played on a webpage unless maybe they can immediately see a method of stopping it. Use this feature wisely (and sparingly)!
5. HTML Video Codes
HTML provides the <embed> tag as a method of embedding a video in your HTML file. It is an empty element, meaning that it does not have a closing tag.
The "src", or source attribute points to the location and name of the file that is to be embedded. The file types supported by this element are AVI (.avi), MOV (.mov), MPEG (.mpeg) and flash (.swf).
Several additional attributes are available.
autostart="false" Prevents the Video From Playing Until "Play" Is Pressed
hidden="true" Hides the Play/Pause/Stop Controls
hidden="false" Shows the Play/Pause/Stop Controls
loop="true" Loops/Repeats the Video Continuously
loop="false" Loops/Repeats the Video Once
playcount="5" Loops/Repeats the Video As Many Times As Indicated By Value
volume="" Numeric Value (0-100) Controls the Starting Volume
YouTube
YouTube make your job easier by providing a line of code for each video (as long as the owner of the video allows this feature) that you can copy and paste directly into your HTML document, without modifying, in order to embed a video on your webpage.
Now you can add as many cute little puppy and kitten videos to your site as you want!
6. HTML Layouts
Laying out your webpage is a process which should begin with a sheet of paper or a graphical computer program, as you decide what you want your website to look like, because the design itself can "make or break" a website all on its own.
Once you decide on a design, transferring it to HTML becomes the next step in the process. There are two main methods available to complete this next step: tables and CSS.
HTML tables have been used for years as the only layout method available, but CSS-based layouts are becoming increasingly popular as browser support for CSS has improved, causing many developers to consider table layouts antiquated. CSS layouts are said to load faster (by milliseconds), cut down on messy HTML code and be easier to maintain, however both options are supported by modern browsers.
Our example is a simple two-column layout with a header, a footer and a width of 100%, which expands and contracts according to the size of your screen:
| Header | |
| Navigation | Contents |
| Footer | |
This, and most other layouts, can be produced by either tables or CSS.
Table Layout
Our two-column layout with header and footer can be brought to life as a table using the following code:
<head>
<title>An HTML Table Webpage Layout</title>
</head>
<body style="margin: 0; border: 0;">
<table style="border: 0; width: 100%;">
<tr> <td colspan="2" style="background: #006DA6;">Header</td> </tr>
<tr>
<td style="width: 25%; background: #658C00;">Navigation</td>
<td style="width: 75%; background: #FFA100;"> <br /><br />Contents<br /><br /><br /> </td>
</tr>
<tr> <td colspan="2" style="background: #006DA6;">Footer</td> </tr>
</table>
</body>
</html>
Background colors are added so that the results are visible, so copy and paste this code to your HTML file and try it out!
CSS Layout
Our two-column CSS layout with header and footer can be brought to life using the following code:
<head>
<title>An HTML And CSS Webpage Layout</title>
</head>
<body style="margin: 0; border: 0;">
<div style="width: 100%; background: #006DA6;">Header</div>
<div style="float: left; width: 100%;">
<div style="margin-left: 280px;">
<div style="margin-top: 0; background: #FFA100;">
<br /> <br /> Contents <br /> <br /> <br />
</div>
</div>
</div>
<div style="float: left; width: 280px; margin-left: -100%;">
<div style="margin-top: 0; background: #658C00;">
<br /> <br /> Navigation <br /> <br /> <br />
</div>
</div>
<div style="width: 100%; background: #006DA6;">Footer</div>
</body>
</html>
Background colors are added so that the results are visible, so copy and paste this code to your HTML file and try it out!