HTML
Search Engine Optimization SEO Made Easier with Schema.org
Reader Level:
One of the greatest challenges to Search Engine Optimization (SEO) comes from the fact that each search engine has its own proprietary method for crawling and characterizing your web pages. Not only does this require you to learn the techniques for each engine, but further challenge comes from trying to appeal to each on the same page.
With the June 2, 2011 announcement of schema.org, identifying your page content to search engines just became significantly easier. A partnership between Google, Microsoft, and Yahoo, schema.org is a collection of microdata vocabularies that allow you to specifically add markup to your content so that it can be better understood by these major search engines.
This article will introduce you to the use of schema.org vocabularies and provide some examples of how you can use them. If you are unfamiliar with the HTML5 Microdata mechanism, you may wish to first review Estelle Weyl's introduction to HTML5: Microdata to become more familiar with the syntax.
Reader Level:
One of the greatest challenges to Search Engine Optimization (SEO) comes from the fact that each search engine has its own proprietary method for crawling and characterizing your web pages. Not only does this require you to learn the techniques for each engine, but further challenge comes from trying to appeal to each on the same page.
With the June 2, 2011 announcement of schema.org, identifying your page content to search engines just became significantly easier. A partnership between Google, Microsoft, and Yahoo, schema.org is a collection of microdata vocabularies that allow you to specifically add markup to your content so that it can be better understood by these major search engines.
This article will introduce you to the use of schema.org vocabularies and provide some examples of how you can use them. If you are unfamiliar with the HTML5 Microdata mechanism, you may wish to first review Estelle Weyl's introduction to HTML5: Microdata to become more familiar with the syntax.
Understanding the Importance of SSL and When It's Necessary
Reader Level:
One of the biggest concerns many users have when accessing sites and sharing data is information security. As a web developer there are many practices and policies that you can put into place to help establish a trust between your site and your users, including hashing passwords and ensuring personal information is never stored in an open/accessible manor. One of the most important of these techniques also happens to be one of the most misunderstood and underutilized: SSL and HTTPS. Today we're going to talk about what SSL and HTTPS are, debunk some of the myths surrounding them, and look at why they're not just for banking and online shopping.
Reader Level:
One of the biggest concerns many users have when accessing sites and sharing data is information security. As a web developer there are many practices and policies that you can put into place to help establish a trust between your site and your users, including hashing passwords and ensuring personal information is never stored in an open/accessible manor. One of the most important of these techniques also happens to be one of the most misunderstood and underutilized: SSL and HTTPS. Today we're going to talk about what SSL and HTTPS are, debunk some of the myths surrounding them, and look at why they're not just for banking and online shopping.
The Secret to Effective HTML Page Title Tags
Reader Level:
The lowly HTML Title tag - it is too often neglected. If it weren't for the fact that it is a required element of XHTML pages, it might be left out all together. A quick search in Google yield 18.2 million pages entitled "Untitled Document" (which happens to be the default filler in Dreamweaver.)
Enlightened content producers and etailers, on the other hand, have harnessed the power of the title tag. They know that search engines will give their higher prominence in search results whe the title tag contains relevant and revealing keywords about the page's contents. They also know that users will stay on their site longer and return more times when they can find a specific page in their browser history.
So what is the secret? It was recently reinforced for me as I spent some time shopping on two different websites...
Reader Level:
The lowly HTML Title tag - it is too often neglected. If it weren't for the fact that it is a required element of XHTML pages, it might be left out all together. A quick search in Google yield 18.2 million pages entitled "Untitled Document" (which happens to be the default filler in Dreamweaver.)
Enlightened content producers and etailers, on the other hand, have harnessed the power of the title tag. They know that search engines will give their higher prominence in search results whe the title tag contains relevant and revealing keywords about the page's contents. They also know that users will stay on their site longer and return more times when they can find a specific page in their browser history.
So what is the secret? It was recently reinforced for me as I spent some time shopping on two different websites...
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
Reader Level:
Graphs in web pages and reporting applications can be put together with built-in ColdFusion functionality using the
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
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
Reader Level:
Graphs in web pages and reporting applications can be put together with built-in ColdFusion functionality using the
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
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
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
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
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
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
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
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
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
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
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 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
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 9: The Image 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. In part 8 you were introduced to empty elements. In this section we discuss another empty element: the inline IMG or image element. Learn when to use and when not to use the image element, and learn all about the image element's 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
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 8 you were introduced to empty elements. In this section we discuss another empty element: the inline IMG or image element. Learn when to use and when not to use the image element, and learn all about the image element's 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 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
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 7: The Phrase 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 the less comon 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
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 the less comon 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
HTML/CSS Crash Primer
Reader Level:
This article is intended as a re-introduction to HTML and CSS, and something I have used in the past to give to any new employees who may have had HTML experience, but exhibited some bad habits in actual coding. You may think HTML is simple and you may think you know all you need to know, but HTML is misused daily. Following are some basics to help correct some of the common problems.
Reader Level:
This article is intended as a re-introduction to HTML and CSS, and something I have used in the past to give to any new employees who may have had HTML experience, but exhibited some bad habits in actual coding. You may think HTML is simple and you may think you know all you need to know, but HTML is misused daily. Following are some basics to help correct some of the common problems.
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
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
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
Mobile Internet Devices - Part 1: An Introduction
Reader Level:
We've all heard of "the mobile web, at least in some general context. What most developers haven't become aware of though is just how much that idea of mobile internet is changing, and how we, as website developers and maintainers, need to start changing our paradigms about developing for "devices".
Today we'll take a look at the traditional mobile web, some of the changes that have/are taking place, and some of the ways that we can keep ahead of the curve as web developers.
The Mobile Internet Devices Series:
Mobile Internet Devices - Part 1: An Introduction
Mobile Internet Devices - Part 2: Browser Evolution
Reader Level:
We've all heard of "the mobile web, at least in some general context. What most developers haven't become aware of though is just how much that idea of mobile internet is changing, and how we, as website developers and maintainers, need to start changing our paradigms about developing for "devices".
Today we'll take a look at the traditional mobile web, some of the changes that have/are taking place, and some of the ways that we can keep ahead of the curve as web developers.
The Mobile Internet Devices Series:
Mobile Internet Devices - Part 1: An Introduction
Mobile Internet Devices - Part 2: Browser Evolution
Declaring the Language of Your (X)HTML Content
Reader Level:
Defining the language of your web content is an essential but often overlooked step in making your web pages standards-compliant. Even if your pages are all written in a single language and you are certain that all members of your audience speak that same language, it's still a good idea to specify the language so that a variety of user agents and tools can correctly interpret and display the content.
In this article, you'll learn how to declare the language of your content in both HTML and XHTML. We'll go over how to declare a default language for the page as a whole as well as how to indicate where the language changes within the page, whether for an entire section or just a word.
Reader Level:
Defining the language of your web content is an essential but often overlooked step in making your web pages standards-compliant. Even if your pages are all written in a single language and you are certain that all members of your audience speak that same language, it's still a good idea to specify the language so that a variety of user agents and tools can correctly interpret and display the content.
In this article, you'll learn how to declare the language of your content in both HTML and XHTML. We'll go over how to declare a default language for the page as a whole as well as how to indicate where the language changes within the page, whether for an entire section or just a word.
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.
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.
Introducing CMX Jumpstart Greenville
Reader Level:
The name Greenville evokes the radiant ambiance of gardens, nurseries, and landscapes. And that is just how Heidi Bautista paints it in our latest Community MX JumpStart: Greenville, NC. Let's take a closer look at this bloomingly lovely design to see what new treasure we've added to our JumpStart collection.
Reader Level:
The name Greenville evokes the radiant ambiance of gardens, nurseries, and landscapes. And that is just how Heidi Bautista paints it in our latest Community MX JumpStart: Greenville, NC. Let's take a closer look at this bloomingly lovely design to see what new treasure we've added to our JumpStart collection.
Introducing CMX Design Element Iodine
Reader Level:
Our CMX design sorcerer, Gordon Mackay, is back with another CMX Design Element in our series of fully developed Fireworks design comps that you can slice and code in any way that fits your page specs. This time we offer you element Iodine in our CMX Design Element Iodine.
Reader Level:
Our CMX design sorcerer, Gordon Mackay, is back with another CMX Design Element in our series of fully developed Fireworks design comps that you can slice and code in any way that fits your page specs. This time we offer you element Iodine in our CMX Design Element Iodine.
Introducing CMX Jumpstart Orlando
Reader Level:
Reader Level:
Orlando, Florida. It's every kid's dream vacation spot. It's warm and sunny, and makes the world of school seem galaxies away. It's got theme parks galore that take them to galaxies far away. When most people think of Orlando, they probably think of Disney, Epcot, MGM Studios, and Sea World. Now there is also CommunityMX JumpStart Orlando to add to the list of Orlando attractions.
Orlando was designed by Chris Flick and coded by Zoe Gillenwater. Orlando uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design for which you may wish to use it. Orlando is a two-column elastic layout that also features a subhead area, a styled list as a navigation menu, and floated images.
Introducing CMX Jumpstart San Francisco
Reader Level:
We are pleased to introduce CMX JumpStart San Francisco, a great first CSS layout for students and experienced developers alike. Structured to be as hack free and straightforward as possible, this may be just the JumpStart for you if you have been holding back on CSS layouts so far. Like all JumpStarts, it uses valid XHTML and CSS as its foundation and is 508 and WAI compliant. This two-column, fixed-width layout, described rule by rule in the documentation article, makes a great learning tool.
Reader Level:
We are pleased to introduce CMX JumpStart San Francisco, a great first CSS layout for students and experienced developers alike. Structured to be as hack free and straightforward as possible, this may be just the JumpStart for you if you have been holding back on CSS layouts so far. Like all JumpStarts, it uses valid XHTML and CSS as its foundation and is 508 and WAI compliant. This two-column, fixed-width layout, described rule by rule in the documentation article, makes a great learning tool.
Introducing CMX Design Element Mercury
Reader Level:
Our CMX design sorcerer, Gordon Mackay, is back with another CMX Design Element in our series of fully developed Fireworks design comps that you can slice and code in any way that fits your page specs. We leave elements Carbon, Krypton, and Gold, and this time offer you element Mercury in our CMX Design Element Mercury.
Reader Level:
Our CMX design sorcerer, Gordon Mackay, is back with another CMX Design Element in our series of fully developed Fireworks design comps that you can slice and code in any way that fits your page specs. We leave elements Carbon, Krypton, and Gold, and this time offer you element Mercury in our CMX Design Element Mercury.
Introducing CMX Design Element Gold
Reader Level:
I am sure you remember that the symbol for Gold, Au, comes from the Latin word "Aurum". No? You don't remember that? Well, then maybe you remember this: gold is one of the most valuable commodities in the world of commerce. And a good design is also one of the most valuable commodities on the Web. It catches your visitors' eyes and encourages them to stay and explore - and perhaps even to buy. There is almost no price tag for a great design, and fortunately you don't have to come up with one all by yourself. Gordon has done the creative work for you in our latest CMX Design Element Gold. Read all about it in this article.
Reader Level:
I am sure you remember that the symbol for Gold, Au, comes from the Latin word "Aurum". No? You don't remember that? Well, then maybe you remember this: gold is one of the most valuable commodities in the world of commerce. And a good design is also one of the most valuable commodities on the Web. It catches your visitors' eyes and encourages them to stay and explore - and perhaps even to buy. There is almost no price tag for a great design, and fortunately you don't have to come up with one all by yourself. Gordon has done the creative work for you in our latest CMX Design Element Gold. Read all about it in this article.
Introducing CMX Design Element Krypton
Reader Level:
It's a bird! It's a plane! No, it's super design CMX Design Element Krypton!
Join me as I unveil the latest Gordon MacKay Fireworks design element. We'll look at what the package includes, what articles come bundled with it, and at some possible ways you might implement it as a Dreamweaver CSS-based layout.
Reader Level:
It's a bird! It's a plane! No, it's super design CMX Design Element Krypton!
Join me as I unveil the latest Gordon MacKay Fireworks design element. We'll look at what the package includes, what articles come bundled with it, and at some possible ways you might implement it as a Dreamweaver CSS-based layout.
Introducing CMX JumpStart Modifications
Reader Level:
With our growing repertoire of JumpStarts, there are now layouts to fit a wide range of design requirements. Still, sometimes a particular JumpStart is just what you are looking for - if only you could fix one or two little details. If only the navigation had been on the right instead of left. Or what if that left DIV had been floated rather than set to position absolute? And what if instead of a fixed-width, centered layout, the JumpStart had been fluid?
We often see such sentiments on the forums, and thought it might be helpful to respond with articles that show how to modify some of our existing JumpStarts to give you a wider variety of options without having to go in and code the tweaks yourself. Towards that end, we give you CMX JumpStart Playacar, Mexico.
Reader Level:
With our growing repertoire of JumpStarts, there are now layouts to fit a wide range of design requirements. Still, sometimes a particular JumpStart is just what you are looking for - if only you could fix one or two little details. If only the navigation had been on the right instead of left. Or what if that left DIV had been floated rather than set to position absolute? And what if instead of a fixed-width, centered layout, the JumpStart had been fluid?
We often see such sentiments on the forums, and thought it might be helpful to respond with articles that show how to modify some of our existing JumpStarts to give you a wider variety of options without having to go in and code the tweaks yourself. Towards that end, we give you CMX JumpStart Playacar, Mexico.
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.
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.
Introducing CMX Jumpstart Minneapolis
Reader Level:
What city has the biggest shopping mall in America? What city has a full-sized theme park inside its mall? What city is one of the most popular destinations for shopping-based vacations in the United States? Why, Minneapolis, Minnesota, of course! Home to the Mall of America, tourists flock there to shop till they drop. But there is one bigger mall in America, and indeed the world, and that is the Mall of the World Wide Web. More and more people do their shopping there, and eCommerce is hotter than ever. When we were planning our next JumpStart, we decided to do something a little different, a little out of the ordinary. We decided to do an eCommerce template and call it CommunityMX JumpStart Minneapolis.
Designed and coded by Gordon Mackay, Minneapolis is a fluid, three-column design with hidden layers. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Minneapolis also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.
Reader Level:
What city has the biggest shopping mall in America? What city has a full-sized theme park inside its mall? What city is one of the most popular destinations for shopping-based vacations in the United States? Why, Minneapolis, Minnesota, of course! Home to the Mall of America, tourists flock there to shop till they drop. But there is one bigger mall in America, and indeed the world, and that is the Mall of the World Wide Web. More and more people do their shopping there, and eCommerce is hotter than ever. When we were planning our next JumpStart, we decided to do something a little different, a little out of the ordinary. We decided to do an eCommerce template and call it CommunityMX JumpStart Minneapolis.
Designed and coded by Gordon Mackay, Minneapolis is a fluid, three-column design with hidden layers. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Minneapolis also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.
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
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
Alpha Video and HTML: How did they do that?
Reader Level:
Flash Video containing an Alpha channel can be used to intereact with your web pages. It is surprisingly easy to do.
Reader Level:
Flash Video containing an Alpha channel can be used to intereact with your web pages. It is surprisingly easy to do.
Introducing CMX Jumpstart Inverness
Reader Level:
We are pleased to announce Community MX JumpStart Inverness, a design you can use to create your own Web blog. CMX JumpStart Inverness was designed and coded by new CMX partner Gordon Mackay. It is a centered, two-column, fixed-width design that makes use of background images to achieve its faux column appearance. The page is constructed using valid XHTML 1.0 Strict markup and formatted using valid CSS 2.1 styling. Inverness also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. Read on to find out what the Inverness package includes and how you can make it your own.
Reader Level:
We are pleased to announce Community MX JumpStart Inverness, a design you can use to create your own Web blog. CMX JumpStart Inverness was designed and coded by new CMX partner Gordon Mackay. It is a centered, two-column, fixed-width design that makes use of background images to achieve its faux column appearance. The page is constructed using valid XHTML 1.0 Strict markup and formatted using valid CSS 2.1 styling. Inverness also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. Read on to find out what the Inverness package includes and how you can make it your own.
The Complete JumpStart Catalog
Reader Level:
We now have a healthy portfolio of JumpStarts, and sometimes so much choice can be overwhelming. This article outlines the features of all the JumpStarts, offers guidance in choosing the right JumpStart for your project, and provides a complete catalog of our first thirteen JumpStarts.
Reader Level:
We now have a healthy portfolio of JumpStarts, and sometimes so much choice can be overwhelming. This article outlines the features of all the JumpStarts, offers guidance in choosing the right JumpStart for your project, and provides a complete catalog of our first thirteen JumpStarts.
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
Reader Level:
In this final article in the series documenting the creation of my personal web site, you'll see how I used CSS to style the content of my XHTML page to match my design comp. This included styling a list to look like a navigation menu, formatting links and other text, and using sIFR to replace the text in my headings with beautiful Flash-generated text. You'll also see how I created a print style sheet, plus learn how I tested and debugged my page.
The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
Reader Level:
In this final article in the series documenting the creation of my personal web site, you'll see how I used CSS to style the content of my XHTML page to match my design comp. This included styling a list to look like a navigation menu, formatting links and other text, and using sIFR to replace the text in my headings with beautiful Flash-generated text. You'll also see how I created a print style sheet, plus learn how I tested and debugged my page.
The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
Introducing CMX JumpStart Cairo
Reader Level:
We are excited to announce CMX JumpStart Cairo, Egypt. It was designed and coded by Adrian Senior, and makes extensive use of lush gradients and glows. It is a centered, two-column, fixed-width design, and, like all CMX Jumpstarts, is constructed using valid XHTML 1.0 markup and CSS 2.1 styling. Cairo also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. This article will introduce you to what Cairo includes in its bundle, as well as show you an example site created from its source PNG and CSS/XHTML files.
Reader Level:
We are excited to announce CMX JumpStart Cairo, Egypt. It was designed and coded by Adrian Senior, and makes extensive use of lush gradients and glows. It is a centered, two-column, fixed-width design, and, like all CMX Jumpstarts, is constructed using valid XHTML 1.0 markup and CSS 2.1 styling. Cairo also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. This article will introduce you to what Cairo includes in its bundle, as well as show you an example site created from its source PNG and CSS/XHTML files.
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.
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.
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
Reader Level:
In the last article of this series documenting the construction of my personal site, you saw how I sliced my Fireworks design comp into individual graphics. These slices were tailored for a page built using semantic XHTML and clean CSS. In this article, you'll see how I built the structure for my site's home page using divs and semantic XHTML markup. Also, I'll show how I used CSS to lay out these divs into the visual structure I designed in my Fireworks comp.
The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
Reader Level:
In the last article of this series documenting the construction of my personal site, you saw how I sliced my Fireworks design comp into individual graphics. These slices were tailored for a page built using semantic XHTML and clean CSS. In this article, you'll see how I built the structure for my site's home page using divs and semantic XHTML markup. Also, I'll show how I used CSS to lay out these divs into the visual structure I designed in my Fireworks comp.
The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
Introducing CMX Jumpstart Traverse City
Reader Level:
Traverse City, Michigan is one of those hidden gems that tourists sometimes stumble across by lucky chance. With over 180 miles of Lake Michigan shoreline as well as a host of lakes and bays, beach lovers can enjoy lots of sailing and sunbathing.
Traverse City was designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater. It is a centered, fixed-width design with both a two-column and three-column page from which to choose. The two-column layout also includes a styled data table. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Traverse City also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.
Reader Level:
Traverse City, Michigan is one of those hidden gems that tourists sometimes stumble across by lucky chance. With over 180 miles of Lake Michigan shoreline as well as a host of lakes and bays, beach lovers can enjoy lots of sailing and sunbathing.
Traverse City was designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater. It is a centered, fixed-width design with both a two-column and three-column page from which to choose. The two-column layout also includes a styled data table. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Traverse City also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.
Making it Legal: Validating Your (X)HTML and CSS
Reader Level:
As a web designer, your goal is to create a page that works well and looks good across browsers and platforms. Validating your (X)HTML and CSS is one way to achieve this goal. Validation catches the silly mistakes and typos that everyone makes in their pages, so it's an important first step in creating a great web page — but remember, it's only a step. Validation is not the end goal itself. Learn why validation is important but not the holy grail of web design, then learn how to use and understand the W3C validators.
Reader Level:
As a web designer, your goal is to create a page that works well and looks good across browsers and platforms. Validating your (X)HTML and CSS is one way to achieve this goal. Validation catches the silly mistakes and typos that everyone makes in their pages, so it's an important first step in creating a great web page — but remember, it's only a step. Validation is not the end goal itself. Learn why validation is important but not the holy grail of web design, then learn how to use and understand the W3C validators.
Teaching Dreamweaver the Web Standards Way
Reader Level:
I have been teaching Dreamweaver in various training venues since version 2. Each new upgrade adds more features and makes my job more complex. How does a teacher help beginners make sense of an increasingly overwhelming interface that includes seemingly endless choices? My syllabus has changed a lot over the years, and this is what I have learned: pare the syllabus to the absolute essentials. Subtract, do not add. Aim for elegant simplicity. Focus on Web Standards. This article gives teachers a syllabus they can use to help their beginning students learn Dreamweaver within the framework of Web Standards.
Reader Level:
I have been teaching Dreamweaver in various training venues since version 2. Each new upgrade adds more features and makes my job more complex. How does a teacher help beginners make sense of an increasingly overwhelming interface that includes seemingly endless choices? My syllabus has changed a lot over the years, and this is what I have learned: pare the syllabus to the absolute essentials. Subtract, do not add. Aim for elegant simplicity. Focus on Web Standards. This article gives teachers a syllabus they can use to help their beginning students learn Dreamweaver within the framework of Web Standards.
Introducing CMX Jumpstart Machu Picchu
Reader Level:
Reader Level:
Machu Picchu, Peru: a rediscovered ruin, a sacred ceremonial city of the Incas, a place of ethereal beauty, and now also a Community MX JumpStart. CMX JumpStart Machu Picchu, designed and coded by Adrian Senior, was built specifically to take advantage of the new Style Rendering Toolbar in Dreamweaver 8. It includes style sheets for the screen, print and handheld media types.
Read on to learn more about this centered, two-columnm, fixed-width, Web Standards compliant CSS layout.
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.
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.
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.
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.
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."
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."
CMX JumpStart: Vienna
Reader Level:
Last summer we took a trip to Germany and Austria with our son's orchestra director. My favorite city was Vienna, Austria. So it is only natural that I should choose Vienna for my city as I "change hats" from JumpStarts marketer to JumpStarts creator. I am particularly pleased and excited to offer our latest CMX JumpStart: Vienna.
In addition to the use of valid XHTML 1.0 and CSS 2.1, and in addition to validating for 508 and WAI, we have a number of special features in Vienna. This three column layout has two outer columns with fixed widths, a fluid center column for content, and fluid header and footer. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field into an area that is at the top of the page outside the main centered layout. So far, reasonably cool, right?
But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold that has an implied minimum and maximum width that works in Internet Explorer without the use of Javascript! Furthermore, this technique allows for fluid margins on the fluid centered layout that depend on the size of the user's window.
The download folder for this article includes a bundle of 11 articles (including two about Jello Mold technique), a starter page, an images folder, four style sheets (including design-time and print), a source png, the Vienna extension, an installation and usage guide, and this article as a PDF.
Reader Level:
Last summer we took a trip to Germany and Austria with our son's orchestra director. My favorite city was Vienna, Austria. So it is only natural that I should choose Vienna for my city as I "change hats" from JumpStarts marketer to JumpStarts creator. I am particularly pleased and excited to offer our latest CMX JumpStart: Vienna.
In addition to the use of valid XHTML 1.0 and CSS 2.1, and in addition to validating for 508 and WAI, we have a number of special features in Vienna. This three column layout has two outer columns with fixed widths, a fluid center column for content, and fluid header and footer. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field into an area that is at the top of the page outside the main centered layout. So far, reasonably cool, right?
But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold that has an implied minimum and maximum width that works in Internet Explorer without the use of Javascript! Furthermore, this technique allows for fluid margins on the fluid centered layout that depend on the size of the user's window.
The download folder for this article includes a bundle of 11 articles (including two about Jello Mold technique), a starter page, an images folder, four style sheets (including design-time and print), a source png, the Vienna extension, an installation and usage guide, and this article as a PDF.
Introducing Jumpstart Vegas
Reader Level:
We proudly introduce CMX JumpStart Vegas, designed by Fireworks expert Linda Rathgeber, and coded by CSS guru Stephanie Sullivan. Vegas includes a Flash slideshow, FlashObjects JavaScript for accessibility, sIFR for using custom fonts on your pages, a form with an often requested complex layout, and a golden design that does justice to the town that never sleeps. It's all there, ready for you to adapt it for your own sites.
Reader Level:
We proudly introduce CMX JumpStart Vegas, designed by Fireworks expert Linda Rathgeber, and coded by CSS guru Stephanie Sullivan. Vegas includes a Flash slideshow, FlashObjects JavaScript for accessibility, sIFR for using custom fonts on your pages, a form with an often requested complex layout, and a golden design that does justice to the town that never sleeps. It's all there, ready for you to adapt it for your own sites.
Introducing CMX Jumpstart New Orleans
Reader Level:
The suspense has been building around the release of our next JumpStart, and now it's here: Jazzy JumpStart New Orleans, a hybrid CSS/Flash layout that should appeal to anyone needing to build a music site. Its inspiration is derived from two sources: the sites of Sony artists such as Vladimir Horowitz, Joshua Bell, Louis Armstrong, and The Isley Brothers where Flash and frames combine, and content scrolls in a fixed-area; and the recent acquisition of our own "CMX artist" the jazzy, bluesy Umoja String Quartet, whose site will be hosted on Community MX in the upcoming weeks.
Read on to find out more about this feature-rich JumpStart that includes an MP3 Player that uses wmode, FlashObject for accessibility, scrolling content, functional forms, and a fully editable source PNG.
Reader Level:
The suspense has been building around the release of our next JumpStart, and now it's here: Jazzy JumpStart New Orleans, a hybrid CSS/Flash layout that should appeal to anyone needing to build a music site. Its inspiration is derived from two sources: the sites of Sony artists such as Vladimir Horowitz, Joshua Bell, Louis Armstrong, and The Isley Brothers where Flash and frames combine, and content scrolls in a fixed-area; and the recent acquisition of our own "CMX artist" the jazzy, bluesy Umoja String Quartet, whose site will be hosted on Community MX in the upcoming weeks.
Read on to find out more about this feature-rich JumpStart that includes an MP3 Player that uses wmode, FlashObject for accessibility, scrolling content, functional forms, and a fully editable source PNG.
JumpStart Venice: An Introduction
Reader Level:
Reader Level:
Valentine's Day is one of my favorite holidays of the year. It's fanciful and lighthearted, and I don't feel the pressure of the big holidays like Christmas or Easter. I can daydream about a romantic rendezvous, such as a gondola journey through the canals of Venice on a moonlit night. Though I can't make that a reality, I can pretend while exploring the latest CMX JumpStart.
CMX is proud to announce its sixth JumpStart, Venice, which includes both two and three column, fixed-width, rounded corner layouts in its home and form pages. Like all CMX JumpStarts, it is based on Web standards with valid CSS2 and XHTML 1.0 Transitional markup, and it passes WAI and 508 accessibility checkpoints. We've created a video to give you an overview of the design and functionality of Venice.
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.
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.
Announcing CMX JumpStart: Liverpool
Reader Level:
It was the early sixties, and all the world was in a frenzy over a new group from Liverpool, England called The Beatles. They revolutionized rock 'n' roll music, and the world has never been the same. Maybe the Web Standards movement doesn't stir quite that much excitement, but it is changing the Web world all the same. And because we "love you, yeah, yeah, yeah" we're here to help you join the revolution.
Community MX is pleased to announce the release of its fifth CMX JumpStart: Liverpool. This time we're giving you more than a CSS layout, however. We're also giving you a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviors that will allow you to quickly and easily edit the login.
This article will tell you all about what this fantastic package includes--bundled tutorials, an authentication system, a two-column, fixed width layout (with a little bit of a twist), original PNG files, and more.
Reader Level:
It was the early sixties, and all the world was in a frenzy over a new group from Liverpool, England called The Beatles. They revolutionized rock 'n' roll music, and the world has never been the same. Maybe the Web Standards movement doesn't stir quite that much excitement, but it is changing the Web world all the same. And because we "love you, yeah, yeah, yeah" we're here to help you join the revolution.
Community MX is pleased to announce the release of its fifth CMX JumpStart: Liverpool. This time we're giving you more than a CSS layout, however. We're also giving you a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviors that will allow you to quickly and easily edit the login.
This article will tell you all about what this fantastic package includes--bundled tutorials, an authentication system, a two-column, fixed width layout (with a little bit of a twist), original PNG files, and more.
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!
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!
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:
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.
Announcing a New CMX JumpStart: Seattle
Reader Level:
Put down that coffee, and get your Grunge thing going on. That's right, we're off to the "Emerald City", once called Duwamps, but now known as Seattle!
Community MX is pleased to announce the release of the latest CMX JumpStart: Seattle. Based on Web standards, this versatile layout employs valid CSS2 and XHTML 1.0 Transitional markup and passes 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:
Reader Level:
Put down that coffee, and get your Grunge thing going on. That's right, we're off to the "Emerald City", once called Duwamps, but now known as Seattle!
Community MX is pleased to announce the release of the latest CMX JumpStart: Seattle. Based on Web standards, this versatile layout employs valid CSS2 and XHTML 1.0 Transitional markup and passes 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 with the CMX Seattle JumpStart package and bundled tutorials and extensions
- An explanation of the benefits of Web standards
- A demonstration of the ease with which the layout is customized
- The presentation of pages that were created from the Seattle JumpStart
- Information about how this exciting design can belong to you for use in as many projects as you please.
- Screenshots of the page in multiple browsers
Who's ready for a spin on the Space Needle?
Testing Safari Compatibility on a PC
Reader Level:
Safari is quickly becoming the dominant web browser for Mac users. Unfortunately, because it's a Mac only product, many PC developers fail to adjust or even make any considerations for how their sites will appear for all those Mac people on the web. In this article we'll take a brief look at the history and common ties between various browsers, how they affected Safari's development, and how the PC developers can better optimize their sites for Safari without having to rush out and buy a Mac themselves.
Reader Level:
Safari is quickly becoming the dominant web browser for Mac users. Unfortunately, because it's a Mac only product, many PC developers fail to adjust or even make any considerations for how their sites will appear for all those Mac people on the web. In this article we'll take a brief look at the history and common ties between various browsers, how they affected Safari's development, and how the PC developers can better optimize their sites for Safari without having to rush out and buy a Mac themselves.
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:
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
Announcing CMX JumpStarts
Reader Level:
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.
Inspired by famous world cities, each JumpStart will have an individual ambience and offer different table-less layouts and features. We travel first to Paris, a city of romance and style, with a design that features the Iris, the national flower of France. This two-column, fixed-width layout, complete with banner and footer, will serve as an elegant underpinning for almost any design.
This article covers the following:
- A list of what is included with the CMX Paris JumpStart package and bundled tutorials
- An explanation of the benefits of Web standards
- A demonstration of the ease with which the layout is customized
- The presentation of a page that was created from the Paris JumpStart
- Information about how this exciting design can belong to you for use in as many projects as you please.
- Screen shots of the page in multiple browsers
Living in a Dream House: Or How to Bring Web Standards to Your Web Sites
Reader Level:
We hear the phrase "Web Standards" frequently these days, but what does it mean, and why should we care? There are many advantages to using XHTML, CSS, and 508 accessibility, and we'll look at some of them in this article. We'll look at how structuring and designing web pages has evolved to its current "best practice" of separating content and presentation. Finally, after looking at a few of the problems involved in using CSS for layout, we'll wander through the CSS Zen Garden to look at a few inspiring examples of what can nonetheless be achieved when designers code for standards compliant browsers.
Reader Level:
We hear the phrase "Web Standards" frequently these days, but what does it mean, and why should we care? There are many advantages to using XHTML, CSS, and 508 accessibility, and we'll look at some of them in this article. We'll look at how structuring and designing web pages has evolved to its current "best practice" of separating content and presentation. Finally, after looking at a few of the problems involved in using CSS for layout, we'll wander through the CSS Zen Garden to look at a few inspiring examples of what can nonetheless be achieved when designers code for standards compliant browsers.
HTML Newsletters: Problems and Solutions
Reader Level:
Sending a highly-stylized email newsletter is one way to attract business to your site or to inform readers of events. Community MX has a popular weekly newsletter that includes recent relevant news items along with the latest content listing for the site. Still, an email newsletter can be a real pain to make 100% compatible across different email clients. This article shows hints that will aid in creating compatible email messages.
Reader Level:
Sending a highly-stylized email newsletter is one way to attract business to your site or to inform readers of events. Community MX has a popular weekly newsletter that includes recent relevant news items along with the latest content listing for the site. Still, an email newsletter can be a real pain to make 100% compatible across different email clients. This article shows hints that will aid in creating compatible email messages.
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
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
CMX Set Tab Index
Reader Level:
CMX Set Tab Index extension allows the user to easily set and manipulate the TabIndex value for form elements contained within the current active document.
Reader Level:
CMX Set Tab Index extension allows the user to easily set and manipulate the TabIndex value for form elements contained within the current active document.
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
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.
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.
Web Terminology: Part Three
Reader Level:
In Part Three of our Web Terminology series, we discuss terms you may read in a forum or on an email list. Words that are slung about loosely, often without further description or even a context within which to infer their meanings. Words that are part of the "jargon" of CSS, such as "Positioned," "Container," "CSS Hack," and "Workaround." Armed with this knowledge, you'll be able to ask intelligent questions, converse with the gurus, and actually understand what they're talking about! Let's go!
Reader Level:
In Part Three of our Web Terminology series, we discuss terms you may read in a forum or on an email list. Words that are slung about loosely, often without further description or even a context within which to infer their meanings. Words that are part of the "jargon" of CSS, such as "Positioned," "Container," "CSS Hack," and "Workaround." Armed with this knowledge, you'll be able to ask intelligent questions, converse with the gurus, and actually understand what they're talking about! Let's go!
Web Terminology: Part Two
Reader Level:
Continuing with our terminology series, in Part Two we delve into the differences between "attributes" and "properties," what "external," "embedded," and "inline" mean, and expose the vulnerable underbelly of XHTML.
Reader Level:
Continuing with our terminology series, in Part Two we delve into the differences between "attributes" and "properties," what "external," "embedded," and "inline" mean, and expose the vulnerable underbelly of XHTML.
Web Terminology: Part One
Reader Level:
This article begins a new series concerning the definition of terms, specifically the terms most used (and mis-used) in HTML and CSS concepts. We hope to enlighten those who haven't had time to catch up on the lingo so common amongst web designers, begining with a discussion of tags vs. elements, divs vs. layers, and Class vs. ID.
Reader Level:
This article begins a new series concerning the definition of terms, specifically the terms most used (and mis-used) in HTML and CSS concepts. We hope to enlighten those who haven't had time to catch up on the lingo so common amongst web designers, begining with a discussion of tags vs. elements, divs vs. layers, and Class vs. ID.
An Introduction to SSI
Reader Level:
SSI (which stands for server-side includes) provides you with a rather simple, yet effective, way in which to add basic dynamic functionality to your otherwise static HTML content. In this article you will learn how to use SSI to include content such as headers and footers as well as how to output dynamic data such as dates and times.
Reader Level:
SSI (which stands for server-side includes) provides you with a rather simple, yet effective, way in which to add basic dynamic functionality to your otherwise static HTML content. In this article you will learn how to use SSI to include content such as headers and footers as well as how to output dynamic data such as dates and times.
Dreamweaver MX 2004 Piece by Piece -- Part 1: Hyperlinks and Anchors
Reader Level:
The Piece by Piece series of articles aim to provide the most comprehensive references available to the interfaces and functionality of Macromedia Products. In this installation, we cover the Hyperlink and Named Anchor objects in Dreamweaver, along with detailed coverage of the technologies they support.
Reader Level:
The Piece by Piece series of articles aim to provide the most comprehensive references available to the interfaces and functionality of Macromedia Products. In this installation, we cover the Hyperlink and Named Anchor objects in Dreamweaver, along with detailed coverage of the technologies they support.
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
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
Searching CMX
Get familiar with the CMX search facility & learn how to find the tutorials you need easily & quickly.
Latest Free Content
-
Create a Stone Effect for Text -
Smart Objects for Photographers: Part 1 - Neon Text Effects
- Inked Stone
-
The TwentyEleven WordPress Series: Introduction
View All Free Content
Advertise with CommunityMX
Copyright © 2010 - CommunityMX - All rights reserved. Conforms to W3C Standard XHTML & CSS