HTML
HTML 4/XHTML 1.0 Tag List
Jun 21st
DTD referrs to the doc type and indicated which tags are allowed F = Frameset, S = Strict T = Transitional.
| Tag | Description | DTD | XHTML 1.1 |
|---|---|---|---|
| <!–…–> | Comment in HTML | FST | YES |
| <!DOCTYPE> | Sets document type | FST | YES |
| <a> | Sets an anchor | FST | YES |
| <abbr> | Sets an abbreviation | FST | YES |
| <acronym> | Sets an acronym | FST | YES |
| <addres> | Sets contact information for the author/owner of a document | FST | YES |
| <applet> | Deprecated: Sets an embedded applet | FT | NO |
| <area /> | Sets an area inside an image-map | FST | NO |
| <b> | Sets bold text | FST | YES |
| <base /> | Sets a default address or default target for all links on a page | FST | YES |
| <basefont /> | Deprecated: Sets a default font, color, or size for the text in a page | FT | NO |
| <bdo> | Sets text direction | FST | NO |
| <big> | Sets big text | FST | YES |
| <blockquote> | Sets a long quotation | FST | YES |
| <body> | Sets a document’s body | FST | YES |
| <br /> | Sets a single-line break | FST | YES |
| <button> | Sets a push button | FST | YES |
| <caption> | Sets a table caption | FST | YES |
| <center> | Deprecated: Sets center text | FT | NO |
| <cite> | Sets a citation | FST | YES |
| <code> | Sets computer code text | FST | YES |
| <col /> | Sets attribute values for one or more columns in a table | FST | NO |
| <colgroup> | Sets a group of columns in a table for formatting | FST | NO |
| <dd> | Sets a description of a term in a definition list | FST | YES |
| <del> | Sets deleted text | FST | NO |
| <dfn> | Sets a definition term | FST | YES |
| <dir> | Deprecated: Sets a directory list | FT | NO |
| <div> | Sets a block-level section of a document | FST | YES |
| <dl> | Sets a definition list | FST | YES |
| <dt> | Sets a definition term (or item) | FST | YES |
| <em> | Sets emphasized (or italic) text | FST | YES |
| <fieldset> | Sets a border around elements in a form | FST | YES |
| <font> | Deprecated: Sets font, size, and color for text | FT | NO |
| <form> | Sets a form for user input | FST | YES |
| <frame /> | Sets a window in a frameset | F | NO |
| <frameset> | Sets a set of frames | F | NO |
| <h1> to <h6> | Sets different headings | FST | YES |
| <head> | Sets the head section of an HTML document | FST | YES |
| <hr /> | Sets a horizontal line | FST | YES |
| <html> | Sets an HTML document | FST | YES |
| <i> | Sets italic (or emphasized) text | FST | YES |
| <iframe> | Sets an inline frame | FT | NO |
| <img /> | Sets an image | FST | YES |
| <input /> | Sets an input field in a form | FST | YES |
| <ins> | Sets inserted text | FST | NO |
| <isindex> | Deprecated: Sets a searchable index related to a document | FT | NO |
| <kbd> | Sets keyboard text | FST | YES |
| <label> | Sets a label for an input element | FST | YES |
| <legend> | Sets a legend for a fieldset | FST | YES |
| <li> | Sets a list item | FST | YES |
| <link /> | Sets the relationship between a document and an external resource | FST | YES |
| <map> | Sets an image-map | FST | NO |
| <menu> | Deprecated: Sets a menu list | FT | NO |
| <meta /> | Sets metadata about the document | FST | YES |
| <noframes> | Sets alternative content for users who do not support frames | FT | NO |
| <noscript> | Sets alternative content for users who do not support client-side scripts e.g. JavaScript | FST | YES |
| <object> | Sets an embedded object | FST | YES |
| <ol> | Sets an ordered list | FST | YES |
| <optgroup> | Sets a group of related options in a form select list | FST | YES |
| <option> | Sets an option in a form select list | FST | YES |
| <p> | Sets a paragraph | FST | YES |
| <param /> | Sets a parameter for an object | FST | YES |
| <pre> | Sets preformatted text | FST | YES |
| <q> | Sets a short quotation | FST | YES |
| <s> | Deprecated: Sets strikethrough text | FT | NO |
| <samp> | Sets sample computer code | FST | YES |
| <script> | Sets a script type | FST | YES |
| <select> | Sets a drop down list | FST | YES |
| <small> | Sets small text | FST | YES |
| <span> | Sets a inline-section of a document | FST | YES |
| <strike> | Deprecated: Sets strikethrough text | FT | NO |
| <strong> | Sets strong (or bold) text | FST | YES |
| <style> | Sets an internal style sheet | FST | YES |
| <sub> | Sets subscript text | FST | YES |
| <sup> | Sets superscript text | FST | YES |
| <table> | Sets a table | FST | YES |
| <tbody> | Groups a table body | FST | NO |
| <td> | Sets a table cell | FST | YES |
| <textarea> | Sets a textarea for an input field | FST | YES |
| <tfoot> | Groups a table footer area | FST | NO |
| <th> | Sets a table header cell | FST | YES |
| <thead> | Groups a table header area | FST | NO |
| <title> | Sets the title of the document | FST | YES |
| <tr> | Sets a table row | FST | YES |
| <tt> | Sets teletype text | FST | YES |
| <u> | Deprecated: Sets underlined text | FT | NO |
| <ul> | Sets an unorderd list | FST | YES |
| <var> | Sets a variable part of a text | FST | YES |
| <xmp> | Deprecated: Sets preformatted text | None | NO |
Real Hosting
Jun 11th
Real hosting is something much more than what meets the eye. It is more than a place to merely store files and have a space on the Internet. It’s more than just unlimited this and unlimited that; it involves real space, real deals, real support, and real guarantees.
What you REALLY pay for
Ever heard of the Myth of Unlimited Hosting? Aside from being technically impossible, it is highly unlikely that a web hosting company will charge you $4.95 a month if you agree to stay for 60 months. This includes unlimited disk space, a free domain name, unlimited bandwidth, unlimited databases, unlimited FTP accounts, unlimited emails, and unlimited everything else.
If you happen to break the 60 month agreement you are slapped with a termination fee and other hidden fees. This can quickly become a major hassle, especially when you receive poor support and service when you just want out of a bad hosting situation.
Often, in these situations, the hosting companies will begin to nag at you when too much space is taken up on a shared server, you’re taking up too much CPU, or taking up too much RAM on the server. This renders the promise of unlimited features as invalid and not a real guarantee and not real, honest hosting.
These types of hosting companies will go into your account and begin changing things if you have too many files on the server, if the files are taking up too much space, or too many “unrelated files”. They will disable the website and then it becomes a hassle to get your website back online. While they’re breaking promises, you’re losing traffic, clients, and/or money. Whether it is a business website or a personal blog, it is embarrassing when you have to explain to clients and friends why your website is down in the first place.
While you’re banging your head against a wall wondering why your website was suspended, they will be helping other people and not replying to your support tickets, emails, or phone calls. Some hosts will treat you like a second-class citizen if your account is suspended.
What you get with real hosting from AtomicPages
AtomicPages Real Hosting is different; we do not make promises we cannot keep. We will never claim to have unlimited features and go back on our word later on. The amount of features you pay for is the amount of features you will actually receive and nothing less; no questions asked.
This is what defines real hosting from impostors. We are honest, backup our guarantees, and have real morals. You will never hear that we are suspending your account due to too much space, taking up too many resources on the server, or any other made-up excuse. We will not impose upon your website unless it is breaking the law. AtomicPages real hosting will never leave you in the dark about your website.
Helping people with websites and delivering good quality hosting while keeping a promise is not all smoke and mirrors. There is no mystery to keeping a promise.
Website Layout
Apr 16th
What is generally accept as a “good website layout”? A subject of debate, however, a good layout will have a clearly defined header area, sidebar (optional), content area, and footer area. It can look like the following:
The sidebar can be neglected, on the left side, the right side, or on both sides. The fact still remains that there is a clear cut header, sidebar, content area, and footer, however.
Note: the widths and height of these elements will differ of course.
Tables or CSS?
Starting with CSS2.1 in table designed websites started to phase out rapidly. This is because rich content management systems like WordPress, Drupal, and Joomla were being born and refined. The developers of these fine CMSs did not use tables to do their bidding for their rich admin panels and client-side website interactivity. Today, tables are nearly deprecated when it comes to web layout. CSS is used to create tableless layouts. If you don’t know CSS and you want to learn CSS you can click here to learn it!
How to Start?
When I start a website I will work on my external style sheet first and foremost. I will set all of the link colors, define by background, etc… Like the following example:
html, body { margin:0; padding:0; } body { margin:auto; width:1000px; background:#3b3b3b url (bg.png) repeat-x top center; font-family: Tahoma, Arial, sans serif; font-size:12px; color:#fff; } a, a:visited { text-decoration:underline; color:#ff9300; outline:none; } a:hover { text-decoration:none; color:#ff9300; outline:none; } img {border:none;}
Once I have my foundation elements all set and ready to go I will create my ID selectors that I will use for the website. If you are unfamiliar with ID selectors or just want a refresher click here for basics or click here for id v. class selectors. The main ID selectors we want are the following:
- header
- sidebar (optional)
- content
- footer
The CSS could look like the following:
#header { height:75px; background:#4c4c4c url(images/header-bg.gif) repeat-x; border:2px solid #fff; } #sidebar { float:left; width:150px; background:#DBDBDB url(images/sidebar-bg.gif) repeat-x; } #content { float:right; width:850px; } #footer { clear:both; height:75px; background-color:#4c4c4c; }
The HTML code to make this happen would be the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div id="header"> <p>Add content here</p> </div> <div id="sidebar"> <p>content here</p> </div> <div id="content"> <p>content here</p> </div> <div id="footer"> <p>content here</p> </div> </body> </html>
We are using a div element that is a block level element so we can negate display:block; for the ID selector. It is common practice that we use div elements to call certain ID selectors since div, by default, does nothing.
Once we have the basic structure of the website we can add our custom styles, class selectors, additional class selectors, nested selectors, pseudo-classes, pseudo-elements, etc… Consider the following for the sidebar:
#sidebar.container { background:#DBDBDB url(images/gradient.png) repeat-x top top; width:125px; max-height:250px; overflow:hidden; }
This creates a class selector called container which can only be used for the ID called sidebar. This container will be called multiple times in the sidebar (hence, the class selector) and will reside inside the sidebar since it’s a child element.
Want to see a working example and then some? Please download web-layout.zip where you can see multiple examples of web layouts each with a combined and their own individual style sheet so you can easily see what the CSS is doing to each layout.
web-layout.zip
Size: 14.43 KB
Creating an Inline Menu
Apr 15th
Creating an inline menu should seem pretty straight forward, right? You think we could just create an unordered list and that would be the end of the story. Unfortunately, if we create an unordered list we’ll quickly see that these lists types merely list item one on top of the other.
- Item 1
- Item 2
- Item 3
This is because the ul and li elements are block-level elements and not inline elements. For example:
ul, li {display:block;}
Is a piece of code that is understood by every modern browser that follows the W3C standards.
Our solution is simple then. If we recall that an inline display value will use only what is immediately around the element. Consider the following:
p.inline {display:inline;}
<p class="inline">Porttitor eros dictumst nunc lundium porta proin ultrices placerat velit ultrices parturient tincidunt? In. Nisi tincidunt scelerisque cras velit sed risus arcu turpis! Mauris et.</p> <p class="inline">Et ac. Nec tortor quis pulvinar tristique augue dis sed adipiscing aenean nascetur arcu, magna, elit enim cras? Amet proin, nascetur amet et eu diam.</p>
Since we overrode the default display:block; for p elements, the output will be the following:
Porttitor eros dictumst nunc lundium porta proin ultrices placerat velit ultrices parturient tincidunt? In. Nisi tincidunt scelerisque cras velit sed risus arcu turpis! Mauris et.
Et ac. Nec tortor quis pulvinar tristique augue dis sed adipiscing aenean nascetur arcu, magna, elit enim cras? Amet proin, nascetur amet et eu diam.
So let us examine the list a little bit more.
<ul> <li><a href="#">Item 1</a></li> <li><span>Item 2</span></li> <li><em>Item 3</em></li> </ul>
The <ul> in itself if a block-level element; however, the <li> are also block-level elements. All of the elements surrounding the list items are inline elementse.g. the <a> is an inline element.
In our inline menu, we don’t want the menu itself to be an inline element but rather its items to be inline elements. These items are the <li> elements. Consider the following menu with basic CSS:
#menu { height:50px; /*sets height of menu*/ background-color:#4c4c4c; } #menu ul { list-style:none; /*gets rid of bullets*/ width:800px; /*sets width of menu, not necessary*/ } #menu li { display:inline; /*critical to inline menu*/ padding-left:10px; /*sets space between menu items*/ }
Now that we have our CSS the HTML structure will look like the following:
<div id="menu"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div>
See the downloadable file for working example and additional examples.
Pretty boring, huh? All of that CSS for just a few lines of lousy HTML. This is a secret behind the creation of inline CSS menus, just remember that you want the menu items to be a series of inline elements but not the actual menu itself.
From here on out we can style our inline menu to our liking. If you are unfamiliar with CSS then I recommend you visit the CSS Tutorials and learn CSS!
From there we can style our inline menu to our liking. We can create simple effects that will make the men stand out. Consider the following:
#menu { height:50px; font-size:1.2em; background-color:#4c4c4c; border:2px solid #fff; color:#fff; } #menu ul {list-style:none;} #menu li { display:inline; padding-left:10px; } #menu a:link, #menu a:visited { text-decoration:none; color:#fff; padding:10px; } #menu a:hover { background-color:#3b3b3b; text-decoration:none; color:#DBDBDB; padding:10px; }
This will give us a nice looking menu that will have a roll over effect on the links within the menu. From there, we can add custom images, jQuery drop down menus, and many other effects using client-side code.
For examples and editable code, please download the file!
Inline Menu
Size: 11.48 KB
HTML Color Reference
Apr 12th
Sort: A to Z | Z to A | Light to Dark | Dark to Light
| Colors | Color Names | HEX | RGB |
|---|---|---|---|
| AliceBlue | #F0F8FF | 240,248,255 | |
| AntiqueWhite | #FAEBD7 | 250,235,215 | |
| Aqua | #00FFFF | 0,255,255 | |
| Aquamarine | #7FFFD4 | 127,255,212 | |
| Azure | #F0FFFF | 240,255,255 | |
| Beige | #F5F5DC | 245,245,220 | |
| Bisque | #FFE4C4 | 255,228,196 | |
| Black | #000000 | 0,0,0 | |
| BlanchedAlmond | #FFEBCD | 255,235,205 | |
| Blue | #0000FF | 0,0,255 | |
| BlueViolet | #8A2BE2 | 138,43,226 | |
| Brown | #A52A2A | 165,42,42 | |
| BurlyWood | #DEB887 | 222,184,135 | |
| CadetBlue | #5F9EA0 | 95,158,160 | |
| Chartreuse | #7FFF00 | 127,255,0 | |
| Chocolate | #D2691E | 210,105,30 | |
| Coral | #FF7F50 | 255,127,80 | |
| CornflowerBlue | #6495ED | 100,149,237 | |
| Cornsilk | #FFF8DC | 255,248,220 | |
| Crimson | #DC143C | 220,20,60 | |
| Cyan | #00FFFF | 0,255,255 | |
| DarkBlue | #00008B | 0,0,139 | |
| DarkCyan | #008B8B | 0,139,139 | |
| DarkGoldenRod | #B8860B | 184,134,11 | |
| DarkGray | #A9A9A9 | 169,169,169 | |
| DarkGreen | #006400 | 0,100,0 | |
| DarkKhaki | #BDB76B | 189,183,107 | |
| DarkMagenta | #8B008B | 139,0,139 | |
| DarkOliveGreen | #556B2F | 85,107,47 | |
| DarkOrange | #FF8C00 | 255,140,0 | |
| DarkOrchid | #9932CC | 153,50,204 | |
| DarkRed | #8B0000 | 139,0,0 | |
| DarkSalmon | #E9967A | 233,150,122 | |
| DarkSeaGreen | #8FBC8F | 143,188,143 | |
| DarkSlateBlue | #483D8B | 72,61,139 | |
| DarkSlateGray | #2F4F4F | 47,79,79 | |
| DarkTurquoise | #00CED1 | 0,206,209 | |
| DarkViolet | #9400D3 | 148,0,211 | |
| DeepPink | #FF1493 | 255,20,147 | |
| DeepSkyBlue | #00BFFF | 0,191,255 | |
| DimGray | #696969 | 105,105,105 | |
| DodgerBlue | #1E90FF | 30,144,255 | |
| FireBrick | #B22222 | 178,34,34 | |
| FloralWhite | #FFFAF0 | 255,250,240 | |
| ForestGreen | #228B22 | 34,139,34 | |
| Fuchsia | #FF00FF | 255,0,255 | |
| Gainsboro | #DCDCDC | 220,220,220 | |
| GhostWhite | #F8F8FF | 248,248,255 | |
| Gold | #FFD700 | 255,215,0 | |
| GoldenRod | #DAA520 | 218,165,32 | |
| Gray | #808080 | 128,128,128 | |
| Green | #008000 | 0,128,0 | |
| GreenYellow | #ADFF2F | 173,255,47 | |
| HoneyDew | #F0FFF0 | 240,255,240 | |
| HotPink | #FF69B4 | 255,105,180 | |
| IndianRed | #CD5C5C | 205,92,92 | |
| Indigo | #4B0082 | 75,0,130 | |
| Ivory | #FFFFF0 | 255,255,240 | |
| Khaki | #F0E68C | 240,230,140 | |
| Lavender | #E6E6FA | 230,230,250 | |
| LavenderBlush | #FFF0F5 | 255,240,245 | |
| LawnGreen | #7CFC00 | 124,252,0 | |
| LemonChiffon | #FFFACD | 255,250,205 | |
| LightBlue | #ADD8E6 | 173,216,230 | |
| LightCoral | #F08080 | 240,128,128 | |
| LightCyan | #E0FFFF | 224,255,255 | |
| LightGoldenRodYellow | #FAFAD2 | 250,250,210 | |
| LightGray | #D3D3D3 | 211,211,211 | |
| LightGreen | #90EE90 | 144,238,144 | |
| LightPink | #FFB6C1 | 255,182,193 | |
| LightSalmon | #FFA07A | 255,160,122 | |
| LightSeaGreen | #20B2AA | 32,178,170 | |
| LightSkyBlue | #87CEFA | 135,206,250 | |
| LightSlateGray | #778899 | 119,136,153 | |
| LightSteelBlue | #B0C4DE | 176,196,222 | |
| LightYellow | #FFFFE0 | 255,255,224 | |
| Lime | #00FF00 | 0,255,0 | |
| LimeGreen | #32CD32 | 50,205,50 | |
| Linen | #FAF0E6 | 250,240,230 | |
| Magenta | #FF00FF | 255,0,255 | |
| Maroon | #800000 | 128,0,0 | |
| MediumAquaMarine | #66CDAA | 102,205,170 | |
| MediumBlue | #0000CD | 0,0,205 | |
| MediumOrchid | #BA55D3 | 186,85,211 | |
| MediumPurple | #9370D8 | 147,112,216 | |
| MediumSeaGreen | #3CB371 | 60,179,113 | |
| MediumSlateBlue | #7B68EE | 123,104,238 | |
| MediumSpringGreen | #00FA9A | 0,250,154 | |
| MediumTurquoise | #48D1CC | 72,209,204 | |
| MediumVioletRed | #C71585 | 199,21,133 | |
| MidnightBlue | #191970 | 25,25,112 | |
| MintCream | #F5FFFA | 245,255,250 | |
| MistyRose | #FFE4E1 | 255,228,225 | |
| Moccasin | #FFE4B5 | 255,228,181 | |
| NavajoWhite | #FFDEAD | 255,222,173 | |
| Navy | #000080 | 0,0,128 | |
| OldLace | #FDF5E6 | 253,245,230 | |
| Olive | #808000 | 128,128,0 | |
| OliveDrab | #6B8E23 | 107,142,35 | |
| Orange | #FFA500 | 255,165,0 | |
| OrangeRed | #FF4500 | 255,69,0 | |
| Orchid | #DA70D6 | 218,112,214 | |
| PaleGoldenRod | #EEE8AA | 238,232,170 | |
| PaleGreen | #98FB98 | 152,251,152 | |
| PaleTurquoise | #AFEEEE | 175,238,238 | |
| PaleVioletRed | #D87093 | 216,112,147 | |
| PapayaWhip | #FFEFD5 | 255,239,213 | |
| PeachPuff | #FFDAB9 | 255,218,185 | |
| Peru | #CD853F | 205,133,63 | |
| Pink | #FFC0CB | 255,192,203 | |
| Plum | #DDA0DD | 221,160,221 | |
| PowderBlue | #B0E0E6 | 176,224,230 | |
| Purple | #800080 | 128,0,128 | |
| Red | #FF0000 | 255,0,0 | |
| RosyBrown | #BC8F8F | 188,143,143 | |
| RoyalBlue | #4169E1 | 65,105,225 | |
| SaddleBrown | #8B4513 | 139,69,19 | |
| Salmon | #FA8072 | 250,128,114 | |
| SandyBrown | #F4A460 | 244,164,96 | |
| SeaGreen | #2E8B57 | 46,139,87 | |
| SeaShell | #FFF5EE | 255,245,238 | |
| Sienna | #A0522D | 160,82,45 | |
| Silver | #C0C0C0 | 192,192,192 | |
| SkyBlue | #87CEEB | 135,206,235 | |
| SlateBlue | #6A5ACD | 106,90,205 | |
| SlateGray | #708090 | 112,128,144 | |
| Snow | #FFFAFA | 255,250,250 | |
| SpringGreen | #00FF7F | 0,255,127 | |
| SteelBlue | #4682B4 | 70,130,180 | |
| Tan | #D2B48C | 210,180,140 | |
| Teal | #008080 | 0,128,128 | |
| Thistle | #D8BFD8 | 216,191,216 | |
| Tomato | #FF6347 | 255,99,71 | |
| Turquoise | #40E0D0 | 64,224,208 | |
| Violet | #EE82EE | 238,130,238 | |
| Wheat | #F5DEB3 | 245,222,179 | |
| White | #FFFFFF | 255,255,255 | |
| WhiteSmoke | #F5F5F5 | 245,245,245 | |
| Yellow | #FFFF00 | 255,255,0 | |
| YellowGreen | #9ACD32 | 154,205,50 |
Any improvements on this list will give you mention in this blog post and in the downloadable files.
Color Table
Size: 15.03 KB
