The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
Reader Level:

In this installment of the HTML5 CSS Starter Page series, we're going to add tables to the faculty and classes pages of the Stringendo Studios site. We're going to perform a slick little trick with these tables - we're going to use the :nth-child pseudo class to create alternating colors on the table rows while keeping the markup free of extraneous classes. Then we're going to use a script to make Internet Explorer support the pseudo class, though natively it does not do so. This will finish up all the pages of the desktop Stringendo site - all we'll have left is the

This tutorial includes exercise files.

The HTML5 CSS Starter Page Series:
The HTML5 CSS Starter Page Series - Part 1
The HTML5 CSS Starter Page Series - Part 2: Content Models
The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
The HTML5 CSS Starter Page Series - Part 4: Markup Continued
The HTML5 CSS Starter Page Series - Part 5: Styling the Layout
The HTML5 CSS Starter Page Series - Part 6: More Layout Styling
The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout
The HTML5 CSS Starter Page Series - Part 8: Site Tasks
The HTML5 CSS Starter Page Series - Part 9: The Video Page
The HTML5 CSS Starter Page Series - Part 10: The Contact Page
The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued
The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web
The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet

The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued
Reader Level:

In the last tutorial in the HTML5 CSS Starter Page series, we created the basic form and added some new HTML5 form attributes to the input elements on the Stringendo Studios contact page. In this continuation of work on the contact page, we're going to style the form by taking advantage of attribute selectors. We'll use the new RGBA color format for creating background colors on the textfields. We'll also use Dreamweaver CS5.5's new GUI in the Properties for panel to add border-radius and box-shadow on various elements.

The HTML5 CSS Starter Page Series:
The HTML5 CSS Starter Page Series - Part 1
The HTML5 CSS Starter Page Series - Part 2: Content Models
The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
The HTML5 CSS Starter Page Series - Part 4: Markup Continued
The HTML5 CSS Starter Page Series - Part 5: Styling the Layout
The HTML5 CSS Starter Page Series - Part 6: More Layout Styling
The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout
The HTML5 CSS Starter Page Series - Part 8: Site Tasks
The HTML5 CSS Starter Page Series - Part 9: The Video Page
The HTML5 CSS Starter Page Series - Part 10: The Contact Page
The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued
The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web
The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet

The HTML5 CSS Starter Page Series - Part 10: The Contact Page
Reader Level:

Now that the video page of the Stringendo Studios site is completed, it's time to turn our attention to the form page. In the process, we'll look at some of the new features that HTML5 brings to forms. This tutorial includes start and completed folders so you can follow along.

The HTML5 CSS Starter Page Series:
The HTML5 CSS Starter Page Series - Part 1
The HTML5 CSS Starter Page Series - Part 2: Content Models
The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
The HTML5 CSS Starter Page Series - Part 4: Markup Continued
The HTML5 CSS Starter Page Series - Part 5: Styling the Layout
The HTML5 CSS Starter Page Series - Part 6: More Layout Styling
The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout
The HTML5 CSS Starter Page Series - Part 8: Site Tasks
The HTML5 CSS Starter Page Series - Part 9: The Video Page
The HTML5 CSS Starter Page Series - Part 10: The Contact Page
The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued
The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web
The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet

The HTML5 CSS Starter Page Series - Part 9: The Video Page
Reader Level:

Welcome back to the HTML5 CSS Starter Page series! Now that we have the site all set up, it is time to fill the pages with HTML5 pizzazz. The first page we're going to tackle is the video page. In keeping with our goal of making the site work in the real world, we'll adopt a video fallback strategy so that the "Schumann Piano Quintet" video plays in every browser.

The HTML5 CSS Starter Page Series:
The HTML5 CSS Starter Page Series - Part 1
The HTML5 CSS Starter Page Series - Part 2: Content Models
The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
The HTML5 CSS Starter Page Series - Part 4: Markup Continued
The HTML5 CSS Starter Page Series - Part 5: Styling the Layout
The HTML5 CSS Starter Page Series - Part 6: More Layout Styling
The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout
The HTML5 CSS Starter Page Series - Part 8: Site Tasks
The HTML5 CSS Starter Page Series - Part 9: The Video Page
The HTML5 CSS Starter Page Series - Part 10: The Contact Page
The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued
The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web
The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet

The HTML5 CSS Starter Page Series - Part 8: Site Tasks
Reader Level:

In this installment of the HTML5 CSS Starter Page series, we're going to perform site tasks such as ordering the style sheet, exporting the style sheet to an external file, running the page through BrowserLab, using the new CS5.5 HTML validator, validating the CSS using the W3C CSS3 validator, turning the layout into a template, and generating the site pages. Whew! I hope this will be enough to keep you busy for one tutorial.

The HTML5 CSS Starter Page Series:
The HTML5 CSS Starter Page Series - Part 1
The HTML5 CSS Starter Page Series - Part 2: Content Models
The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
The HTML5 CSS Starter Page Series - Part 4: Markup Continued
The HTML5 CSS Starter Page Series - Part 5: Styling the Layout
The HTML5 CSS Starter Page Series - Part 6: More Layout Styling
The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout
The HTML5 CSS Starter Page Series - Part 8: Site Tasks
The HTML5 CSS Starter Page Series - Part 9: The Video Page
The HTML5 CSS Starter Page Series - Part 10: The Contact Page
The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued
The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web
The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet

The HTML5 CSS Starter Page Series - Part 6: More Layout Styling
Reader Level:

In the last installment of the HTML5 CSS Starter Page series, we styled the markup into a fixed-width, two-column, right sidebar with header and footer layout. This time around we'll hone in on details, while especially concentrating on headings and text. We'll use descendant selectors to give different looks to lists, headings, and body text depending on the section of the page in which they occur. We'll take care of escaping margins to close gaps between divs. Finally, we'll hide text that we added for accessibility purposes from sighted visitors.

This tutorial includes starter and completed files so that you can play along at home.

The HTML5 CSS Starter Page Series:
The HTML5 CSS Starter Page Series - Part 1
The HTML5 CSS Starter Page Series - Part 2: Content Models
The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
The HTML5 CSS Starter Page Series - Part 4: Markup Continued
The HTML5 CSS Starter Page Series - Part 5: Styling the Layout
The HTML5 CSS Starter Page Series - Part 6: More Layout Styling
The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout
The HTML5 CSS Starter Page Series - Part 8: Site Tasks
The HTML5 CSS Starter Page Series - Part 9: The Video Page
The HTML5 CSS Starter Page Series - Part 10: The Contact Page
The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued
The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web
The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet

The HTML5 CSS Starter Page Series - Part 5: Styling the Layout
Reader Level:

In the last two installments of the HTML5 CSS Starter Page Series, you coded the markup for the Stringendo Studios layout. Now it's time to manipulate the markup into two columns in a fixed-width with right sidebar, header and footer.

The HTML5 CSS Starter Page Series:
The HTML5 CSS Starter Page Series - Part 1
The HTML5 CSS Starter Page Series - Part 2: Content Models
The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
The HTML5 CSS Starter Page Series - Part 4: Markup Continued
The HTML5 CSS Starter Page Series - Part 5: Styling the Layout
The HTML5 CSS Starter Page Series - Part 6: More Layout Styling
The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout
The HTML5 CSS Starter Page Series - Part 8: Site Tasks
The HTML5 CSS Starter Page Series - Part 9: The Video Page
The HTML5 CSS Starter Page Series - Part 10: The Contact Page
The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued
The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web
The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet

The HTML5 CSS Starter Page Series - Part 4: Markup Continued
Reader Level:

In this installment of the HTML5 CSS Starter Page series, we're going to continue marking up the page. This time around we're going to add ARIA role attributes to the various HTML5 elements. (Aria! What could be more perfect for a music studio? ;-) This will satisfy two goals for our document: it will enhance its accessibility for users of assistive technology, and it will provide a hook for styles that will work in Internet Explorer 7 and 8. Thus, we'll be able to provide better IE support for users who have JavaScript turned off. Later in this tutorial we'll also address a strategy for coping with Internet Explorer 6 (if you absolutely must do so).

The HTML5 CSS Starter Page Series:
The HTML5 CSS Starter Page Series - Part 1
The HTML5 CSS Starter Page Series - Part 2: Content Models
The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
The HTML5 CSS Starter Page Series - Part 4: Markup Continued
The HTML5 CSS Starter Page Series - Part 5: Styling the Layout
The HTML5 CSS Starter Page Series - Part 6: More Layout Styling
The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout
The HTML5 CSS Starter Page Series - Part 8: Site Tasks
The HTML5 CSS Starter Page Series - Part 9: The Video Page
The HTML5 CSS Starter Page Series - Part 10: The Contact Page
The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued
The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web
The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet

The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
Reader Level:

In this third tutorial in the HTML5 CSS Starter Page series, we're going to mark up the layout for Stringendo Studios. We'll be using many of the new semantic elements of HTML5. We'll then run the page through an HTML5 outliner and modify the code as needed.

This tutorial includes start and completed exercise files.

The HTML5 CSS Starter Page Series:
The HTML5 CSS Starter Page Series - Part 1
The HTML5 CSS Starter Page Series - Part 2: Content Models
The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
The HTML5 CSS Starter Page Series - Part 4: Markup Continued
The HTML5 CSS Starter Page Series - Part 5: Styling the Layout
The HTML5 CSS Starter Page Series - Part 6: More Layout Styling
The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout
The HTML5 CSS Starter Page Series - Part 8: Site Tasks
The HTML5 CSS Starter Page Series - Part 9: The Video Page
The HTML5 CSS Starter Page Series - Part 10: The Contact Page
The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued
The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web
The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet

The HTML5 CSS Starter Page Series - Part 2: Content Models
Reader Level:

In this second tutorial in the HTML5 CSS Starter Page series, we're going to look at its new content models, new semantic elements, core sectioning elements, and the new explicit outlining algorithm. Once we understand these key concepts, we'll be ready to mark up the home page of Stringendo Studios in a more meaningful way.

The HTML5 CSS Starter Page Series:
The HTML5 CSS Starter Page Series - Part 1
The HTML5 CSS Starter Page Series - Part 2: Content Models
The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
The HTML5 CSS Starter Page Series - Part 4: Markup Continued
The HTML5 CSS Starter Page Series - Part 5: Styling the Layout
The HTML5 CSS Starter Page Series - Part 6: More Layout Styling
The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout
The HTML5 CSS Starter Page Series - Part 8: Site Tasks
The HTML5 CSS Starter Page Series - Part 9: The Video Page
The HTML5 CSS Starter Page Series - Part 10: The Contact Page
The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued
The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web
The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet

Building Your Own Live Webcast with UStream - Part 3
Reader Level:

Getting video onto the web these days is a lot easier than it used to be! In fact, since Flash added video support years ago and sites like YouTube became available for general usage, video content has become almost a routine part of modern web life. In today's instant gratification world of tweets and social networking though often times just posting your recorded videos up to YouTube isn't enough; your clients demand something more real time... live webcasting!

Here in the third part of the series we're going to look at how we can get some more advanced features for our broadcast by utilizing the free Ustream Producer application. Producer will allow us to venture into new territory by including external media and even screencasts into our UStream broadcasts.

The Building Your Own Live Webcast Series
Building Your Own Live Webcast with UStream - Part 1
Building Your Own Live Webcast with UStream - Part 2
Building Your Own Live Webcast with UStream - Part 3

Building Your Own Live Webcast with UStream - Part 2
Reader Level:

Getting video onto the web these days is a lot easier than it used to be! In fact, since Flash added video support years ago and sites like YouTube became available for general usage, video content has become almost a routine part of modern web life. In today's instant gratification world of tweets and social networking though often times just posting your recorded videos up to YouTube isn't enough; your clients demand something more real time... live webcasting!

Here in the second part of the series we'll go through the step-by-step process of setting up a UStream account, building a show, and performing our first web broadcast.

The Building Your Own Live Webcast Series
Building Your Own Live Webcast with UStream - Part 1
Building Your Own Live Webcast with UStream - Part 2
Building Your Own Live Webcast with UStream - Part 3

Building Your Own Live Webcast with UStream - Part 1
Reader Level:

Getting video onto the web these days is a lot easier than it used to be! In fact, since Flash added video support years ago and sites like YouTube became available for general usage, video content has become almost a routine part of modern web life. In today's instant gratification world of tweets and social networking though often times just posting your recorded videos up to YouTube isn't enough; your clients demand something more real time... live webcasting!

Today we're going to look at perhaps the simplest and most cost-effective (i.e. free) way to bring live webcasting to your projects: UStream.

The Building Your Own Live Webcast Series
Building Your Own Live Webcast with UStream - Part 1
Building Your Own Live Webcast with UStream - Part 2
Building Your Own Live Webcast with UStream - Part 3

Finger-Friendly Mobile Web - Part 4: Dynamic Layering 1
Reader Level:

The web is moving beyond the confines of computers, thanks to the advent of smart phones and high-speed cellular networks. This is changing not only the way we think about connectivity and the net, but also the ways in which we access and interact with information. The rise of the touch screen and smart phone are bringing a myriad of new challenges, and opportunities, our way.

In this series we're going to explore how we, as web developers, need to adapt in order to take full advantage of these changes and continue to provide new and exciting user experiences. We're going to learn to conquer the "finger-friendly mobile web"!

In the fourth part of this series we're going to start to look at the most easy and efficient means of implementing the "dynamic layering" concept that I've introduced to allow your websites to scale to fit different mobile devices seamlessly.

The Finger Friendly Mobile Web Series
Finger-Friendly Mobile Web - Part 1: An Introduction
Finger-Friendly Mobile Web - Part 2: Screen Sizes vs Density
Finger-Friendly Mobile Web - Part 3: Physical Sizes
Finger-Friendly Mobile Web - Part 4a: Dynamic Layering 1
Finger-Friendly Mobile Web - Part 4b: Dynamic Layering 2
Finger-Friendly Mobile Web - Part 4c: Dynamic Layering 3
Finger-Friendly Mobile Web - Part 4d: Dynamic Layering 4
Finger-Friendly Mobile Web - Part 4e: Dynamic Layering 5
Finger-Friendly Mobile Web - Part 4f: Dynamic Layering 6
Finger-Friendly Mobile Web - Part 4g: Dynamic Layering 7

Making HTML5 work in IE6, IE7 & IE8
Reader Level:

No version of Internet Explorer understands any new element introduced by HTML5. That doens't mean we can't start using HTML5. In this quick tutorial, we'll show you a quick trick to make the IEs understand the HTML5 elements as CSS selectors.

HTML 5 - Part2: An Introduction to the New Division Tags
Reader Level:

In Part 1 of this series we investigated the new layout tags that have become available with HTML 5. Today we will look at some of the authoring content tags, specifically the <article> and <section> tags and how they should be used within our web page content. We'll begin by laying out a page structure using today's standards based techniques and then we will recreate the same structure for HTML 5 and build in our newly discovered

and

tags.

The HTML 5 Series:
HTML 5 - Part 1: An Introduction to the New Layout Tags
HTML 5 - Part 2: An Introduction to the New Division Tags

Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2
Reader Level:

Graphs in web pages and reporting applications can be put together with built-in ColdFusion functionality using the tag, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with ColdFusion servers that do not have functioning on the server, or targeting browsers that are not JavaScript enabled.

Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic ColdFusion and SQL -- writing queries, views, and getting the results you want.

A bar graph can be built vertically or horizontally. The first part showed the horizontal graph. This part will show the vertical graphing process. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the height of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels high, and $500 might translate to 500 pixels high. Using simple formulas, we'll create the graphs.

The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2

Creating a Bar Graph with HTML and CSS using PHP - Part 2
Reader Level:

Graphs in web pages and reporting applications can be put together with various PHP libraries, such as using the JpGraph library shown in JpGraph: PHP Graphs & Charts On-The-Fly by Steven Seiller, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with PHP servers that do not have libraries installed, or targeting browsers that are not JavaScript enabled.

Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic PHP and SQL -- writing queries, views, and getting the results you want.

A bar graph can be built vertically or horizontally. The first part showed the horizontal graph. This part will show the vertical graphing process. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the height of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels high, and $500 might translate to 500 pixels high. Using simple formulas, we'll create the graphs.

The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2

Creating a Bar Graph with HTML and CSS using ColdFusion Part 1
Reader Level:

Graphs in web pages and reporting applications can be put together with built-in ColdFusion functionality using the tag, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with ColdFusion servers that do not have functioning on the server, or targeting browsers that are not JavaScript enabled. Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic ColdFusion -- writing queries and getting the results you want.

A bar graph can be built vertically or horizontally. I'll show a simple horizontal graph. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the width of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels wide, and $500 might translate to 500 pixels wide. Using simple formulas, we'll create the graphs.

The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2

Creating a Bar Graph with HTML and CSS using PHP Part 1
Reader Level:

Graphs in web pages and reporting applications can be put together with various PHP libraries, such as using the JpGraph library shown in JpGraph: PHP Graphs & Charts On-The-Fly by Steven Seiller, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with PHP servers that do not have libraries installed, or targeting browsers that are not JavaScript enabled. Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic PHP and SQL -- writing queries, views, and getting the results you want.

A bar graph can be built vertically or horizontally. I'll show a simple horizontal graph in this part. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the width of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels wide, and $500 might translate to 500 pixels wide. Using simple formulas, we'll create the graphs.

The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2

Clearing Floats Without Touching Your HTML
Reader Level:

Yes, it is possible to clear floats without adding <br class="clearfloat" /> into your HTML. In this tutorial, we cover the old fashioned clearfloat element, and three not-so-new but not-oft used unobtrusive CSS methods of clearing floats.

HTML5 Canvas - Part 1: Introduction
Reader Level:

The upcoming HTML 5 specification promises to add support for a wide range of new and exciting web technologies. In this series we're going to focus on one of the major new players, the Canvas element, which allows for direct rendering and manipulation of vectors and images from within JavaScript.

In this first article, we'll explore what Canvas is, why it's important to us, and get a first quick look at how it can be used.

The HTML5 Canvas Series
HTML5 Canvas - Part 1: Introduction
HTML5 Canvas - Part 2: Basic
HTML5 Canvas - Part 3: Advanced Drawing Techniques
HTML5 Canvas - Part 4: Images
HTML5 Canvas - Part 5: Image Scaling and Croping Coming Soon

Semantic XHTML - Table of XHTML Elements
Reader Level:

We've now covered all the elements defined in the XHTML DTD in this series on writing semantic, valid XHTML. This final section is a REFERENCE for all the elements discussed, including element name, type, element specific attributes, allowed parents and children. Each element links to the section that further describes the element and its attributes as a reference.

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Reader Level:

By writing semantic, valid XHTML, the code that you create for your web site will work not only cross browser, but cross device. In Part 18, we take a look at the last three elements listed in the XHTML strict DTD that we have yet to cover: INS, DEL and NOSCRIPT.

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Semantic XHTML - Part 17: Non-Semantic Elements
Reader Level:

While this series has focused on "Semantic XHTML", there are some non-semantic elements that aren't deprecated (but likely should be). In this section we will discuss the presentational only (non-semantic) elements of TT, I, B, BIG and SMALL

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Semantic XHTML - Part 16: Organizing Forms
Reader Level:

By writing semantic, valid XHTML, the code that you create for your web site will work not only cross browser, but cross device.

XHTML provides three elements whose sole purpose is improving semantics, accessibilty and usability for forms. In this section we complete our form element discussion by discussing the LABEL, FIELDSET, and LEGEND elements, semantic elements which help organize form elements into related components, improving form accessibility and usability.

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Semantic XHTML - Part 15: Drop Down Menus
Reader Level:

In this section in our multi-part series on writing semantic, valid XHTML, we continue looking at different form fields, focusing on the SELECT element and its children: the OPTION and OPTGROUP elements. The select element displays as a drop down menu or scrolling list, with the content being made up of child option elements and optional optgroup element(s). In Part 15 we cover these three elements and their attributes.

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Reader Level:

In this section of our multi-part series on semantic XHTML we continue looking at different form fields, focusing on TEXTAREA and the BUTTON elements.

The TEXTAREA element is a multi-line text field used for entering text. The button element is an enhancement over the input element's buttons of type="button", type="reset" and type="submit". With the same behaviors as the input element's buttons, the button element provides more leeway in terms of button content and styling.

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Semantic XHTML - Part 13: The INPUT Element
Reader Level:

By writing semantic, valid XHTML, the code that you create for your web site will work not only cross browser, but cross device. Today we learn about the most common form element - the <input> element. The <input> element comes in many types: text, password, checkbox, radio, submit, reset, file, hidden, image, and button. Different input types have different functions.

In this section we learn all about the <input> element, the various types, and type specific attributes.

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Semantic XHTML - Part 12: The FORM Element
Reader Level:

In this section of our series on all the valid XHTML elements and their attributes, we learn about the forms and the FORM element.

Forms are most often used to send data from the client or user to the server where the form data can be processed. For processing, there needs to be server side script that can handle the data. The form element itself is basically a shell for all the form elements that actually capture the data, with general instructions telling the browser how to send the data (the method attribute) and telling the server which file should handle the data (the action attribute).

In the next five sections of our multi part series on semantic XHTML, we will discuss the <form> element, form fields, and all the structural elements employed to make forms more cohesive. In this section we will focus on the parent element: the <form> element itself.

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Semantic XHTML - Part 11: The Object Element
Reader Level:

In this section of our series on all the valid XHTML elements and their attributes, we learn about the object tag. The object element is used to include almost any type of browser supported media into your web page.

We'll discuss the object element, supported attributes, the param element and attributes, and how to nest object elements to provide equivalent content to browsers that may not support the media you are trying to display

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Firebug Part 3: Editing with Firebug
Reader Level:

In this multi-part series, we are going to learn all about Firebug, the premier (and free) web development tool for Firefox. In part 3, we learn how to edit CSS, HTML and Javascript within the Firebug window, so we can get immediate feedback on how our edits will change the site in production.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug - Part 7a: The Script Tab (Basics)
Firebug - Part 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console

Semantic XHTML - Part 10: Image Maps
Reader Level:

By writing semantic, valid XHTML, the code that you create for your web site will work not only cross browser, but cross device. In Part 9, you were introduced to the image element. In this section we learn about image maps, including the map and area elements.

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Semantic XHTML - Part 8: Empty Elements
Reader Level:

By writing semantic, valid XHTML, the code that you create for your website will work not only cross browser, but cross device. In this article we learn about line breaks and horizontal rules, two empty elements.

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Semantic XHTML - Part 6: Inline Elements
Reader Level:

By writing semantic, valid XHTML, the code that you create for your web site will work not only cross browser, but cross device. In this article we learn about the most common inline elements. We cover the semantic meaning, default browser presentation, and children and parents of each element.

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Firebug - Part 2: Overview of Firebug Functionality
Reader Level:

In Part 1 we got you all set up with the Firebug and Firefox installation and setting up the preferences. In this section we learn the "why" of what we did in Part 1.

This is a quick overview of everything Firebug has to offer. This section provides a brief overview of the console, HTML, CSS, Script, DOM and Net Tabs, and some of the other features provided by the Firebug plug-in including editing, searching and display options.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug - Part 7a: The Script Tab (Basics)
Firebug - Part 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console

Firebug - Part 1: The What and Why
Reader Level:

In this multi-part series, we are going to learn all about Firebug, the premier (and free) web development tool for Firefox. Part 1 is an overview of the the Firefox browser, and Firebug, the Firefox plugin. Learn how to install Firefox and Firebug, and learn how to run the application and change preferences. In future sessions will show you how to work with and troubleshoot CSS, HTML and Javascript.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug - Part 7a: The Script Tab (Basics)
Firebug - Part 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console

Semantic XHTML - Part 4: List Elements
Reader Level:

By writing semantic, valid XHTML, the code that you create for your website will work not only cross browser, but cross device. In this article we learn about lists: ordered lists, unordered lists and definition lists. We cover the semantic meaning, default browser presentation, and children and parents of each element.

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Semantic XHTML - Part 1: The Required Elements
Reader Level:

By writing semantic, valid XHTML, the code that you create for your website will work not only cross browser, but cross device. The web page that works in your Firefox Browser on your Windows XP computer can work in a cell phone's browser, on TV via a PlayStation, and even in a braille reader. To write semantic code, you need to understand what every element means. In this series, we will cover all the HTML

This series will include:

• Part 1: The required elements to create a document:
• Part 2: Elements that go inside the document head
• Part 3: block level elements
• Part 4: Lists
• Part 5: Tables: Block level elements that aren't display: block
• Part 6: Common inline elements
• Part 7: The Phrase elements
• Part 8: Empty Elements
• And more....

There are several elements that we can use to create a valid XHTML document that is sematically correct. To code correctly, it is important to know all the elements, and especially to know when and how to use them. In part one of the Semantic XHTML series, we discuss the five elements that are required.

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Vertically Align Labels and Inputs with CSS
Reader Level:

Although forms where the labels are placed above the input fields they describe are considered to be more usable, there are undoubtedly going to be times where you need to use a form layout where the labels are placed to the left of their input fields with right-aligned text. This tutorial will teach you the basic (X)HTML structure and CSS to do just that. It assumes you're already familiar with the building blocks of forms and how to use them correctly to build accessible forms: fieldset, legend, label and input elements.

In a followup tutorial, you will learn how to build on this basic structure to accommodate more versatile form content, including checkboxes, radio buttons, textareas with long labels, and instructional text.

CMX JumpStart: Metropolis
Reader Level:

CMX JumpStart Metropolis is a two-column, hybrid layout that has a fluid left column and a fixed-width right column. It includes rounded corners on its right side, and employs faux column technique to achieve equal height columns. It has a footer as well as a fixed header that remains in view even as the visitor scrolls the page - a property that is now supported by Internet Explorer 7. It features styled unordered lists for the navigation, styled skip links, min and max width, and has a placeholder for a photo gallery. Finally, there are several style sheets involved: a main style sheet, a style sheet for print, and a style sheet for all of the special Internet Explorer rules. And of course, as always, Metropolis validates for XHTML 1.0 Transitional, CSS 2.1, and 508 and WAI accessibility.

Approximate download size: 7.1MB

Easy Nav for ColdFusion
Reader Level:

In this tutorial I will show you how to develop a navigation handler in ColdFusion that will do the following:

• The navigation would be made up of a CSS styled unordered list, <ul>
• Each list item, <li>, within the <ul> would be a link to a page within the site
• Each <li> would contain an anchor (a) with an href to the target page.
• Whichever page the visitor was on at the moment should not show up as a link in the nav, rather it should just show <strong> so as to indicate the current location and avoid self-referencing links
• It should be self updating as the navigation changes so that no manual changes are necessary to the code to 'code-around' the links on each target page

Layout Building Blocks
Reader Level:

Create a base CSS layout structure that you can use again and again to quickly begin your web site creation. Don't re-invent the wheel each time!

Transparent Gradients in Illustrator
Reader Level:

Have you ever wished you had a tool from one application in another? One such tool I would like to have in Illustrator is Photoshop's gradient tool. Of course Illustrator has a gradient tool but unlike Photoshop's it can only create a gradient between two colors. Photoshop's gradient tool can create a gradient from a color to transparency. Sometimes, however, by using different tools the same effect can be acheived.

In this tutorial we will look at a way to create the look of Photoshop's gradient tool in Illustrator by using Illustrator's Opacity mask.

All About CSS Drop Shadows - Part Six
Reader Level:

Last time we covered the small details of our new CSS drop shadow method, cleaning up a lot of loose ends. Now we will introduce a fancy trick that will cause our shadowed element to behave like a depressable button when it is hovered. It's a really neat effect, and we feel it will eventually become a common method on the web.

The All About CSS Drop Shadows Series:
All About CSS Drop Shadows - Part One
All About CSS Drop Shadows - Part Two
All About CSS Drop Shadows - Part Three
All About CSS Drop Shadows - Part Four
All About CSS Drop Shadows - Part Five
All About CSS Drop Shadows - Part Six
All About CSS Drop Shadows - Part Seven Coming Soon

PHP Formmail Spam Prevention
Reader Level:

It used to be that there were clear sides in the junk email battle: the spammers and the spammed. I always considered myself a member of the latter group, and then one day I became a member—inadvertently—of the former. I had become a victim of the email injection attack via a PHP formmail script.

In this update to the Dreamweaver Creating and Processing Form series, we'll take a new look at the phpformmail script and demonstrate how to use a key and email value pair to keep your email address out of the html page.

From Concept to Cross-Media Compatibility: Part Three - Building the Footer and Slicing the Drawing
Reader Level:

In Part three of this series you will complete the design work in Fireworks, slice your PNG file and prepare the slices for exporting.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
Reader Level:

In Part 2 of this series we will continue with the design in Fireworks. We will begin work on the content area, lay the ground work for displaying equal-length columns in your CSS layout and create a dividing rectangle using textures between the Banner area and the content area.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

Create a Teaser Thumbnail List Using CSS: Part 4
Reader Level:

This tutorial is the fourth part in a series on creating "teaser thumbnail lists" with CSS. Teaser thumbnail lists are those lists of items made up of a title, short description, and thumbnail. They're often used to provide short teasers that link to more information about the products, articles, or sections of the site being listed. In Parts 1, 2, and 3, you've learned how to build teaser thumbnail lists from both definition lists and unordered lists and learned a couple different ways to style them. However, so far all of the lists created have been fixed in width.

In this tutorial, you'll learn how to create a teaser thumbnail list that can expand and contract in width so that it can be used in fluid or liquid sites. As with the other lists, we'll use floats to accomplish the layout.

Note: This tutorial has been updated as of 5/10/2007. You can view the updated tutorial here.

The Create a Teaser Thumbnail List Series:
Create a Teaser Thumbnail List Using CSS: Part 1
Create a Teaser Thumbnail List Using CSS: Part 2
Create a Teaser Thumbnail List Using CSS: Part 3
Create a Teaser Thumbnail List Using CSS: Part 4

From Concept to Cross-Media Compatibility: Part One - Building the Header
Reader Level:

This series is for the designer that is new to CSS layouts, it will require no pre-requisite knowledge.

Once completed you will have gained the necessary knowledge of how to build a website with CSS and how to carry that design through from an initial concept in Fireworks and present the completed work to a variety of media types.

The series will discuss the techniques involved from the image creation in Fireworks through optimisation and exporting your slices.

Once the design is complete I will talk you through the reasons why the CSS structure is as it will be and discuss how the elements of the design work in relationship with each other.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

Using JumpStarts with Cartweaver, Featuring Minneapolis
Reader Level:

JumpStarts are great starting points for dynamic sites, and the Minneapolis JumpStart is a great starting point for a dynamic e-commerce site. Shopping carts like Cartweaver integrate well with Dreamweaver, but how do you integrate a third-party cart with a JumpStart? This tutorial, written by a member of the Cartweaver team and Community MX, shows one way of integrating the two.

An XHTML, CSS and Accessible Form Template
Reader Level:

In this tutorial we will look at how we can create a generic form template that can be used as a starting point in your web designs. We'll pre-set selectors so that you can choose to display your from elements inline or at block level.

Practical/Cool Uses of Attribute Selectors
Reader Level:

In a recent article we introduced you to the concept of attribute selectors, in this article we will take that underpinning knowledge and explore two ways in which they can be used to enhance the way in which certain elements within typical (X)HTML documents are presented to a site's visitors.

In the course of studying these two examples you should be able to come up with some neat ideas for styling other page elements based on their attributes.

Emulate a Table-Based Layout with the CSS Display Property
Reader Level:

If you've already read Introduction to CSS Table-Related Display Values, you know that you can use the table-related values of the display property of CSS 2.1 to make any non-table HTML element act like any table element.

In this article, you'll use this knowledge to tell divs to act like table cells in order to create a pure CSS layout that emulates the behavior of a table layout: each column will automatically expand to hold its content (even horizontally) and adjacent columns will match each other in height.

Unfortunately, Internet Explorer (IE) doesn't support the CSS values that make this possible. But it doesn't need to: as you've already seen in CSS Negative Margins - Part Four: Three Column Liquid Layouts, negative margins can be used to emulate table behavior pretty closely in IE. Thus, after covering how to build a table-like layout for standards-compliant browsers, I'll show how to combine this new CSS with the CSS from the negative margins series to keep IE's successful layout intact without disturbing more modern browsers.

Cool Adobe GoLive Features - Part 2: Extending With Smart Forms
Reader Level:

In the second article of the cool GoLive features series we will look at GoLive Smart Forms and International Smart Forms, two free extensions created by Adam Pratt that add 50 commonly used forms to your pages. If you ever laboriously typed out all the labels and values for a country list, or found yourself constructing an elaborate eCommerce form, you're going to love these starter forms and form objects.

The Cool GoLive Features Series:
Cool Adobe GoLive Features: Part 1 - The Site Diagram Tool
Cool Adobe GoLive Features: Part 2 - Extending With Smart Forms

Adding WYSIWYG to Textareas: Part 1
Reader Level:

One of the problems web developers encounter when allowing clients or users to insert content dynamically is ensuring that the outputted content still conforms to the standard of code required from a modern web site. The average site user knows little or nothing of HTML syntax, and certainly not enough to ensure that your precious pages still meet HTML syntax validation.

Many solutions have been created in order to solve this problem, BB style syntax is one of those; but the majority of users would probably prefer to be able to format their text as they would in a product like Microsoft Word. The generic word processor environment is something that's familiar to almost everyone who uses a personal computer. So, let's say we could actually allow people to insert data as clean HTML using a simple word processing interface, wouldn't that be cool? :) We can, and as a bonus we can easily implement it into a generic Dreamweaver "Insert Record" page.

CMX JumpStarts: Cairo
Reader Level:

Welcome to the CMX JumpStart — Cairo. Cairo is a fixed-width two-column layout that has been developed as a learning tool to show how you can use background images and work with gradients and glows to produce designs that are a little different from the run of the mill designs we see so many of on the Internet.

How Inline Elements Work - Part Seven
Reader Level:

In Part Seven of this series we'll take a look at a basic facet of inline elements, specifically the 'direction' in which the text and other inline content is displayed. You may think this is an easy property to understand, but in fact, it is possible to order text characters in more than one way, and exactly such interesting things do happen in our world.

Join us as we explore the complications of 'writing direction' and ways to control those directions when needed. Your boss won't fire you if you don't know this information (we hope!), but some day such knowledge may give you what you need to perform a difficult job. Besides, it's rather interesting stuff!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

How Inline Elements Work - Part Six
Reader Level:

It's time for more enlightening details about CSS properties that affect text and other inline elements. In the sixth part of our series, we look at text-indent, which adds a special space to a text block, and white-space, a tool for controlling both source whitespace and browser wrapping behaviors. Yes, it's stuff that all well-rounded web authors need to know!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

How Inline Elements Work - Part Five
Reader Level:

In Part Five of our series we'll cover the often misunderstood text-align property, as well as the letter-spacing and word-spacing properties. We'll look at what each property is supposed to do, the values available, browser support, and some of the things to watch out for if you choose to use one or more of these properties. Come along and learn about some very interesting properties!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

How Inline Elements Work - Part Four
Reader Level:

In this, the fourth tutorial in our series, we continue with inline elements by looking at some CSS properties that directly modify the appearance of the text glyphs themselves. The font-style, font-variant, and text-transform properties are ones that most coders may not be very familiar with, but they can be useful when the need arises. We'll cover what they're supposed to do, and then look at practical applications and any potential problems with browser implementation. Onward!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

CMX Jumpstart: Machu Picchu
Reader Level:

Welcome to our latest CMX JumpStart offering; Machu Picchu.

Machu Picchu has been developed to be accessible to screen, print and handheld devices. Handheld devices are still very much a gray area in our content delivery for web pages. PDAs and more modern phones can do a very good job of rendering web pages and with a little tweaking can provide us with access to very usable and good looking web sites.

Similarly a print style sheet, when correctly set, can give our users access to printed content that can be digested at their leisure. Web pages that don't print correctly can be very annoying and detract from the site's value. It is these two media types that we will be focusing on along with screen media in Machu Picchu. The aim is to provide content of a high quality to screen, handheld and print medias.

How Inline Elements Work - Part Three
Reader Level:

A large variety of CSS rules are available to modify text elements, some easy and straightforward, and some less so. Familiarity with the ways text styling is actually handled in real browsers can save a lot of time when designing pages. In this tutorial installment we'll cover the color, font-weight, and font-family properties from the easy category, and text-decoration from the not-so-easy category. Join us!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

Accessibility and the Label Tag
Reader Level:

In this tutorial we will look at how we can build and lay out accessible forms. In particular we will focus on the label element and we will see how the label can be used to not only increase the focus area of any form element but at the same time be utilised to give our form layouts a little more structure than a simple stacking of form elements in a single column.

How Inline Elements Work - Part Two
Reader Level:

In part one we introduced the base concepts behind inline elements, and now we start getting into some details behind text display, which is the primary inline content on the web.

We'll circle around the EM Square a bit, find out about fine tuning of font sizes, and lift the lid on line-height just a little. As always in this series, we attempt to make the arcane world of text and inline elements less confusing to the new and not-so-new coder alike.

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

How Inline Elements Work - Part One
Reader Level:

Have you ever tried to use CSS to modify text? Nearly everyone has, but that doesn't mean that everyone really knows what's going on or how to properly control text so it looks the way they prefer. This is understandable considering the complexities of text display rules, but it doesn't have to stay that way.

Join us as we begin a series on text, inline elements in general, and all things relating to them, all delivered in easy bite sized pieces that anyone can understand.

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

Rollovers: Fireworks vs. Dreamweaver
Reader Level:

Q."Should I do image rollovers in Fireworks or Dreamweaver? I've heard it's better to do them in Dreamweaver."

I've read many posts in the Dreamweaver forum warning people away from using Fireworks image rollovers, "because Fireworks produces bloated code" compared with Dreamweaver's. No doubt I'll stir up a hornets' nest with this tutorial, but let's do image rollovers in both Fireworks and Dreamweaver so you can see the difference and decide for yourself.

Reconstructing Vienna: The Markup
Reader Level:

Upon releasing a JumpStart, we occasionally hear requests for a step-by-step reconstruction of how it was done. Sure, it's nice to have a great template that allows you to quickly whip up an accessible and valid site for clients. It's also nice to have all those great bundled articles that — face it — most of us never have time to read. The extensively commented CSS is also wonderful, but some of that detail can seem daunting. Wouldn't it be nice to have someone hold your hand as you get initiated into the magic of CSS layouts so you can really understand how it's done?

If this sounds like something you'd like to participate in, get ready for a two-part series that lets you recreate Vienna from start to finish. Today's article will teach you to plan your structure and write your markup. Part two, which will appear tomorrow, will help you penetrate the mysteries of its CSS documents, both print and screen.

Note: You will need to download CMX Jumpstart Vienna in order to follow along with this tutorial.

If you're ready, let's first ascend to "Wrapper Heaven."

Conditional Comments for Internet Explorer (Win)
Reader Level:

Wouldn't it be nice if you could just write a comment, wave a magic wand, and order that only certain selected browsers are to look inside the comment, while all others are forbidden to do so? Well, in fact there is one browser that allows us to do exacly that, and it happens to be Internet Explorer for Windows. These magical HTML comments are called Conditional Comments. Come learn how, when, and why you might want to use these special IE/Win-only features.

Fireworks Hotspot Rollovers
Reader Level:

Everyone knows that web images are rectangular. If you want a navigation system made of image rollovers, you have to make them out of stacks of rectangles, or horizontal arrays of rectangles. Rectangles to the left. Rectangles to the right. Rectangles over and under. Gets boring, eh?

CMX JumpStart: Liverpool
Reader Level:

The Liverpool JumpStart is a little different than what has gone before. It includes a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviours. This allows you to quickly and easily edit the login if you need to do so. The login also supports dual access levels and provides default pages for each level to view, along with a logout page to kill the sessions when your users have completed whatever it was they logged in to do.

Also included are login application pages for .NET, PHP and ASP server models.

This JumpsStart contains 12 tutorials, including video lessons on creating a relational database in Access, using Dreamweaver's User Authentication server behavoiurs and setting a datasource via the ColdFusion administrator.

If you prefer not to use server side code, within the download files you will find a static version of the Liverpool JumpStart.

If you'd like a more detailed description of Liverpool, including screenshots, check out the free article Announcing a New CMX JumpStart: Liverpool.

Dreamweaver Piece by Piece Part 5: Creating and Processing Basic Forms Part 2
Reader Level:

In the first part of our basic forms series, we learned how to configure Dreamweaver form preferences, set up the form with the proper actions and method, and use many of the different kinds of form objects such as text field, textarea, radio groups, and checkboxes.

In this second article in the series, we'll look at the menu/list form object, add our submit and reset buttons, use the validate form behavior, learn to set file permissions, and configure our PHP form processor. Also included in this article are both a ColdFusion and an ASP form processor for those who do not have PHP available on their servers.

CMX JumpStarts: North Pole
Reader Level:

The North Pole JumpStart is a two column, fixed width design that uses clever deployment of background images in both the navigational elements and the content areas of the design. The graphics used in North Pole are both simple and complex. They range from the beautifully created snowman made in Freehand and converted to Fireworks to some Christmas black line art that was coloured in to make simple yet effective images that enhanced the Christmas theme with only a few minutes work. Come and have a look!

Dreamweaver Piece by Piece: Part 4 - Creating and Processing Basic Forms
Reader Level:

The ability to interact with users is one of the great lures of the Internet for businesses and individuals. Most of you have filled out a form on the Internet, then hit the submit button to send your data off into cyberspace. How is it done? Most instructions give the old "setting up the script is beyond the scope of this tutorial" line, which has long been a frustration to many Web designers. I hope that this article helps you set up a feedback form that actually works. In part one of this series, we'll configure Dreamweaver form preferences, set up our form, and cover most of the different types of form objects developers will use when creating interfaces for interacting with users.

Do You Want To Do That With CSS? - Multiple Column Lists
Reader Level:

It is generally well known that list items in an <ol> or <ul> will display vertically in their default presentation. For short lists, or navigation menus, this generally isn't considered a problem. But in other cases, having an extensive list display vertically isn't quite as desirable. It might be a better use of screen space to have that list appear as a series of columns, side by side. In the past, this was done by placing separate lists in individual table cells, or by floating the lists. Semantically it is more desirable not to break up a list this way, but is there another choice? Yes, there is! Join us as we explain a new CSS method that uses a single list while displaying that list as multiple columns. Let's go!

Streaming MP3s with Flash Communication Server: Part 2 - Creating an MP3 Component
Reader Level:

In the last article of this tutorial series, covering MP3 streaming with Flash Communication Server (aka Comm Server), you learned how to build a basic Comm Server application which hosted MP3 files and a Flash movie client that could connect to the application to stream those MP3 files in real-time. In this second part, you will learn how to convert the MP3 player into a Flash component and how to manage the component files with the Project panel in Flash MX Pro 2004.

The Streaming MP3s Series:
Streaming MP3s with Flash Communication Server: Part 1 - Streaming Basics
Streaming MP3s with Flash Communication Server: Part 2 - Creating an MP3 Component
Streaming MP3s with Flash Communication Server: Part 3 - Adding a Playlist to the MP3 Component
Streaming MP3s with Flash Communication Server: Part 4 - Using Other Playback Components
Streaming MP3s with Flash Communication Server: Part 5 - Creating an MP3 Database
Streaming MP3s with Flash Communication Server: Part 6 - Displaying Dynamic MP3 Data in a Flash UI
Streaming MP3s with Flash Communication Server: Part 7 - Linking MP3 Directories to the FCS App
Streaming MP3s with Flash Communication Server: Part 8 - Playing Streams from Virtual Directories Coming Soon

CMX JumpStarts: Seattle
Reader Level:

Seattle is our second design in the CMX JumpStarts series. It is free to members of Community MX and available for purchase by non-members at the competitive price of $29.99. If you'd like a more detailed description of Seattle, including screenshots, check out "Announcing a New CMX JumpStart: Seattle"

Seattle provides a fixed-width two column layout with a right-hand navigation setup. Included are a home page, a pre-prepared form page and an inner page design. It has been designed to validate to XHTML 1.0 Transitional and CSS 2, and it also meets the requirements of 508 and WAI for accessibility.

All the source files that were used to create this design are available in the download. That is, the CSS files, the XHTML documents and even the PNG files. The CSS files and the XHTML pages are extensively commented to make editing Seattle a breeze. We are sure you will have a Whale of a good time adapting Seattle to meet your own requirements!

Seattle teaches you how to use nested lists to create a fully accessible navigation system. The download contains tutorials that will provide an in-depth analysis of all the techniques that have been used to create the design.

The following tutorials are bundled with the Seattle JumpStart:

• Float: The Theory - by John Gallant & Holly Bergevin
• CSS An Introduction - Part Six: The Basics of Positioning - by Adrian Senior
• Do You Want To Do That With CSS? — Centering a Wrapper - by John Gallant & Holly Bergevin
• Styling Forms: Fieldset and Legend - by Stephanie Sullivan
• Semantic (X)HTML Markup: Styling Lists - by Zoe Gillenwater
• CSS An Introduction - Part Three: The Descendant Selector - by Adrian Senior
• How to Attack an Internet Explorer (Win) Display Bug - by John Gallant & Holly Bergevin
• CMX Design-time Extension - by Paul Boon
• Foto 1.0 for Fireworks MX Extension - by Steve Grosvenor

Seattle has been tested in various browsers. Click on the following link to view screenshots.

Clearing Floats, the Easy Way
Reader Level:

While more people are beginning to understand and use floats in their layouts, "float clearing" is a mysterious and misunderstood subject. The need for extra elements just to ensure floats are contained has caused many complaints about "unnecessary markup." Well no more! This tutorial will show you a cutting edge method of float clearing that avoids extra source elements and makes clearing almost easy.

CMX JumpStarts: Paris
Reader Level:

Community MX is pleased to announce the release of an exciting new line of products called CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.

This article covers the following:

• A list of what is included in the CMX JumpStarts: Paris download
• A list of the bundled tutorials that teach the theory behind the layout
• Directions for creating the effects in the Fireworks PNGs
• Demos of live pages
• A page of screen shots that show the Paris layout in a variety of browsers on multiple platforms

Styling Forms: Fieldset and Legend
Reader Level:

In my last form tutorial, we looked at creative ways to use CSS to style label, input, select and textarea field elements. This time, we're going to move on to fieldset and legend. These elements will boost the accessibility of your form in most cases as well as really add a lot of style to your web site when handled correctly. Your forms don't have to be unattractive. In this tutorial, you'll learn about the styling options of these two form elements as well as some of the more stubborn gotchas and how to work around them. Source files to begin the tutorial, the gradient png and the final example, with commented CSS, are included.

Validating Forms to xhtml strict
Reader Level:

In this tutorial we will investigate the requirements that need to be met when validating our forms to the xhtml 1.0 strict standard. We'll look at the elements we have available to us and how we can style them with CSS.

WebQuests for Teachers - Part 2 - Reconstructing
Reader Level:

In the first part of this series, we introduced the WebQuest and a bit of its history. We learned that this lesson in a Web page allows students to make safe use of Internet resources. We also discussed the six sections that make up a traditional WebQuest, and how the WebQuest should be more than mere fact-finding. Finally, we looked at the completed version of the "Time Machine MTV" WebQuest that we're going to reconstruct from scratch. The moment to do that is now upon us, so let's get started.

The WebQuest Series:

Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest

WebQuests for Teachers - Part 1
Reader Level:

The World Wide Web has been an important part of our lives for a decade or more. Many things about the Internet have changed dramatically during this time, but one thing hasn't. Parents and teachers want children to participate in all the Web has to offer, but they don't want to expose them to danger in the process. Back in 1995, Bernie Dodge and Tom March of San Diego State University thought of a way to accomplish the seemingly contradictory goals of safety and access. They created the WebQuest.

The WebQuest Series:

Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest

Flash, DHTML Menus and Accessibility
Reader Level:

It's not uncommon to hear developers complaining that their DHTML menus, when triggered, have dropped behind the Flash movie below them. It's also not uncommon to hear, "that's just how they work." Before Flash Player 6, that was true in many browsers. But nowadays, it's become urban legend. With Flash Player 6, Macromedia introduced windowless mode for Netscape and Mac OS X (previously it was supported only for Windows). In the process, this also gave developers a way to completely hide Flash from older screen readers and the focus issues they can have with it. In fact, when Flash is purely used as eye candy, it's wise to remove it from the flow of the screen reader's page so that they don't have to listen to Flash without a purpose.

The Practice of CSS Column Design: Boxes in Columns
Reader Level:

This tutorial expands our discussion about making accessible layouts using divs for basic page construction blocks. Using CSS, we'll show how to build a column of separate bordered boxes, each with a colored header, similar those currently in use on the CMX main page (as of July, 2004). We'll also discuss collapsing and escaping margins, and a few other things to look out for on our way to some nicely styled Bordered Boxes.

Creating a CSS/Table Hybrid Layout
Reader Level:

In this tutorial, we will look at creating a page that uses a table structure for its layout, and we will position this and style it using CSS - a table/CSS hybrid structure if you wish. We'll begin by building the layout, and we will then bring it to life by defining its appearance with CSS.

Fireworks: Rollovers Made Easy
Reader Level:

Have you been creating duplicate images in Fireworks just to create rollover effects? Using the Frames Panel within Fireworks can speed up this task!

Disjointed Rollovers
Reader Level:

It happens to all of us at some point; You've gotten bored with plain old rollovers on your nifty menu... You want to add a little something, like maybe rolling over one of your buttons and having it trigger another image swap elsewhere on your page. In this tutorial, we'll go over how to do that, and even how make a picture appear where there wasn't one before. All using the Swap Image behavior.

Clean Cross-Browser Table Borders
Reader Level:

Creating nice, clean table borders that display consistently in all browsers should be easy... Actually, it is!

The Newbie Series: Using DWMX's Set Navbar Image Behavior
Reader Level:

In an earlier tutorial "Using DWMX's Swap Image Behavior" we looked at how to create simple 2 state rollovers. With this tutorial, we are going to kick it up a notch and create more complex 3 and 4 state rollovers using the Set Navbar Image behavior. DWMX makes creating these navbars a piece of cake. :-D

Creating a Multi-Page Form
Reader Level:

Create a form that carries over several pages. This is useful for loan applications, lengthy registration pages, etc.

The Newbie Series: Using DWMX's Swap Image behavior
Reader Level:

Making 2-state rollover navigation buttons using DWMX's Swap Image behavior is a piece of cake! In this tutorial we will walk you through placing your navigational buttons on your page and applying the Swap Image behavior to them to create a rollover.