HTML

HTML 4/XHTML 1.0 Tag List

0

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

Website Layout

0

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:

layout

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>
<html lang="en" xml:lang="en">
<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
web-layout.zip
Size: 14.43 KB

Creating an Inline Menu

0

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
Inline Menu
Size: 11.48 KB

HTML Color Reference

0

Sort: A to Z | Z to A | Light to Dark | Dark to Light

Warning: fopen(../test/colors.txt): failed to open stream: No such file or directory in /home/atomicpa/public_html/blog/wp-content/plugins/php-execution-plugin/includes/class.php_execution.php(273) : eval()'d code on line 14

Warning: filesize(): stat failed for ../test/colors.txt in /home/atomicpa/public_html/blog/wp-content/plugins/php-execution-plugin/includes/class.php_execution.php(273) : eval()'d code on line 15

Warning: fread() expects parameter 1 to be resource, boolean given in /home/atomicpa/public_html/blog/wp-content/plugins/php-execution-plugin/includes/class.php_execution.php(273) : eval()'d code on line 15

Colors Color Names HEX RGB
0,0,0

Any improvements on this list will give you mention in this blog post and in the downloadable files.

Color Table
Color Table
Size: 15.03 KB

Basics of XHTML - Part #7

0

One day while browsing the web you stumble upon a quiz on some website and you decide to take it. Whilst taking this quiz you encounter text fields, radio buttons, check boxes, and password fields. You begin to wonder how these are made. Well, you're in luck because today we're going to talk about HTML Forms and Input.

Forms

The form area is where we would put our elements such as radio buttons, textboxes, and checkboxes. This is defined by the <form> The syntax is as follows:

<form>
     <!--input elements-->
</form>

Input

The input element is where we actually get the textboxes and radio buttons. This element will take multiple attributes that will define the type of input we want.

Text

Text fields are fields where we type in things such as email addresses, phone numbers, and names. They will look something like the following:

Email Address:


First Name:


Last Name:

The HTML code for this is the following:

<form>
Email Address: <input type="text" name="email" />
<br />
First Name: <input type="text" name="firstname" />
<br />
Last Name: <input type="text" name="lastname" />
</form>

This is useful for contact forms or customer surveys.

Radio Buttons

Radio buttons derive from the original radio buttons. In the olden days you could only have one button pushed in at a time, if you pressed another button then the existing button would pop out and become deactivated. Like these traditional radio buttons, the HTML radio buttons will only allow one selection at a time.

A more commonplace example would be as if you're filling out a form and it asks you to print your last name and to fill in a bubble below your printed name. You can only fill in one bubble per space.

They look like the following:

Please select your gender:

Male
Female
Decline to state

Notice that we added another attribute to the input element. This is called the value and is used for a default value. Notice how we can only select one item at a time.
The corresponding HTML looks like the following:

<p>Please select your gender:</p>
<form>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
<input type="radio" name="sex" value="decline" /> Decline to state
</form>

Checkboxes

Checkboxes are used when we want the user to be able to select multiple options. A common example is if you're applying for a job and they ask you "select/check all that apply".

How did you hear about us (Check all that apply):

Friend
Former Employer
Website
Other

Notice that we can select multiple item at once.

The corresponding HTML is the following:

<form>
<input type="checkbox" name="survey" value="friend" /> Friend 
<input type="checkbox" name="survey" value="former employer" /> Former Employer 
<input type="checkbox" name="survey" value="website" /> Website
<input type="checkbox" name="survey" value="other" /> Other 
</form>

Creating a drop down menu

Creating a drop down menu is yet another method for giving users the ability to select an answer or multiple answers if you want. It will look like the following:

Choose one of the following:


The HTML will look like the following:

<form>
     <select name="bikes">
          <option value="tricycle">Tricycle</option>
          <option value="street-bike">Street Bike</option>
          <option value="mtn-bike">Mountain Bike</option>
          <option value="motorbike">Motorbike</option>
     </select>
</form>

Creating a simple text area

With the addition of a text area, this allows the user to write a message on a contact form or allows them to write additional comments on a survey on any given question. It will look like this in your browser:

The HTML will look like the following:

<textarea rows="10" cols="30">
Type your message here...
</textarea>

In most modern browsers, it'll allow you to extend the size of the text area at your own discretion.

Creating a Submit Button

Creating a submit button is essential to the form as a whole. Although this button would technically anything, "Submit" is the most common. It will look like the this in your browser:



The HTML will look like this:

<form>
<input type="button" value="Submit" />
<input type="button" value="Good Morning!" />
</form>

Any value that you have in the value attribute will reflect upon the button.

Creating a fieldset around data

You might be wondering what in the world fieldset is to being with. A <fieldset> element is a border that surrounds some or all fields in a form. You can also have a legend element within each fieldset to denote the title of the fieldset.

<form>
<fieldset>
<legend>Name</legend>
First Name <input type="text">
Last Name <input type="text">
</fieldset>
<fieldset>
<legend>Address</legend>
Street Address <input type="test"><br />
City: <input type="text">
State: <input type="state" size="2">
Zip: <input type="zip" size="5">
</fieldset>
</form>

If you want to see this code in action then click on the green download button.

form.zip
form.zip
Size: 3.41 KB
Go to Top