Multimedia

Designing content accessible to those with audio or visual disabilities

• For all pages that contain audio or video:

o Does it address auditory issues for those with hearing disabilities?

¨ If not, create a detailed transcript describing the presentation.

o Does it address visual issues for those with visual disabilities?

¨ If not, create voiceovers for the presentation.

Color

Designing content accessible to the color blind

• For all pages that use color to emphasize important text:

o Are hyperlinks styled with a significantly different color than regular text?

¨ If not, change the text color to show a strong contrast between hyperlinks and regular content.

o Is color used to describe numbers?

¨ If so, use symbols or labels to clearly distinguish the characteristic of the number.

o Are you using color to signify a special meaning? For example, using red to denote a required field.

¨ If so, clearly describe what the meaning. If a field is required, use an asterisk “*” and describe at the top the meaning of the symbol.

Accessibility without Style Sheets

Designing content that is readable without a style sheet

• For all pages that use a style sheet:

o Is all content readable when the style sheet is removed?

¨ If not, rewrite the HTML code using standards compliant techniques so that all of the information renders correctly.

o Does your page use CSS for positioning?

¨ Consider using relative positioning only. Utilize headers, paragraphs, lists, and tables to ensure that the content is readable if a style sheet were not present, rather than using frequent <DIV> and <SPAN> tags that are confusing if a style sheet isn’t available.

o Does your page use CSS to describe something?

¨ CSS, by itself anyways, should never be used to describe the importance of content. If the style sheet were to be removed, the user should be able to distinguish the importance of what was being styled. To emphasize content with CSS, consider using <EM> or <STRONG> tags to describe the information and then style those tags in CSS.

Image Maps

Designing content that describes the geometric shapes within an image map

• For all pages that utilize image maps:

o Does the page use server-side image maps?

¨ If so, convert your server-side image maps to client-side image maps.

o Does the <IMG> tag contain an ALT attribute?

¨ If not, describe the appearance of the image map in the ALT attribute.

o Does the <AREA> tag contain an ALT attribute?

¨ If not, describe the hyperlink of the geometric shape in the ALT attribute.

o Does the page include an alternative text link for those who cannot handle image maps?

¨ If not, create a counterpart for every hyperlink within the image map.

Tables

Designing content that describes header and data cells for tables

• For all pages that utilize tables:

o Does your table contain actual data?

¨ If not, consider moving the content into a <DIV> rather than using it as a layout mechanism.

o Does your table utilize column headers to describe the data?

¨ If not, change the cells that describe data from <TD> tags to <TH> tags. Use ID and HEADER attributes to associate the headers with content.

o Does your table utilize row headers to describe data

¨ If not, use <STRONG> and <EM> tags to show a relationship with the content. While you cannot use the <TH> tag as a row header, you can use ID and HEADER attributes to describe the relationship within the table.

o Does your table have two or more logical levels of row or column headers?

¨ If so, use ID, SCOPE, and HEADER attributes to describe the data in each column and row. Also, utilize <TBODY>, <CAPTION>, <COLGROUP>, and <THEAD> tags to better describe and format the content.

Frames

Designing content that properly uses frames

• For all pages that utilize frames:

o Does your page clearly define the purpose of each frame and are frames even necessary?

¨ If not, either (1) remove frames entirely because most assistive technologies do not support frames, or if absolutely necessary (2) add text to the body of each frame that clearly identifies its purpose.

o Do the <FRAME> and <FRAMSET> tags include a TITLE attribute?

¨ If not, detail what type of content is included within each frame.

o Do the hyperlinks within each frame properly target the correct frame?

¨ If not, be sure to add the TARGET attribute within every hyperlink that isn’t intended to open in the current frame.

o Is your page available in a format that doesn’t require frames?

¨ If not, give the user the option to break out of frames and include (within the <NOFRAMES> tag) alternative text for browsers that don’t support it.

Flicker

Designing content that is between a flicker frequency of 2Hz and 55Hz

¨ Ensure that all animations do not flicker faster 55Hz per second.

JavaScript and Other Scripting Languages

Designing content that uses scripts readable by assistive technologies

• For all pages that utilize a scripting language:

o Is your navigation menu script accessible to assistive technologies?

¨ If not, ensure that the navigation content is not loaded into an array, but instead included within an unordered list—which can be styled and controlled with CSS and JavaScript.

o Are you using the <NOSCRIPT> tag?

¨ Create a text version for browsers who cannot handle scripting languages.

o Does script manipulated content include a respective description attribute?

¨ Ensure that content manipulated with a scripting language includes a readable description, including ALT and LONGDESC attributes.

o Are client-side form validation scripts readable to assistive technologies?

¨ Ensure that when a user enters an invalid item, they are alerted in a modal window which item is invalid. Remember not to refer to the color or font-weight of a required field, but to focus the selection to the field.

o Does the developer ensure that the field is selected to bring attention to a change or update within a page.

¨ Ensure that the field is selected after any changes are made. If fields are auto-populated, the developer should ensure the form field is selected so that assistive technologies know to read it.

o Are you using event handlers that are not supported by handicap devices?

¨ Ensure that scripting is device independent. (onDblClick, for example, is dependent on a device on the availability of a mouse.)

Other Plug-Ins

Designing content that uses plug-ins readable by assistive technologies

• For all pages that utilize external plug-ins such as Java, Flash, etc.:

o Does your page include a link so the user can download the plug-in?

¨ If not include a link so the user can download it.

¨ Ensure that the plug-in is accessible to assistive technologies.

¨ Ensure that the document is accessible to assistive technologies.

o Note: PowerPoint is usually not accessible and must be converted to HTML to be in compliance.

Form Handling

Designing forms that can by handled by assistive technologies

• For all pages that utilize forms:

o Does your form reside within a table?

¨ If so, remove it from the table. It is not proper to include field titles within table cells. Instead, utilize the <LABEL> tag. Always define an <INPUT> tag with a preceding <LABEL> tag to describe the field.

o Does each field include a TABINDEX attribute?

¨ If not, ensure that the TABINDEX is ordered properly so the focus will move in the proper order.

Navigation (skipping)

Designing content that gives the user the ability to skip repetitive navigation

• For all pages that utilize a navigation menu:

o Does your page give the user the ability to skip the navigation menu to avoid repetitive links?

¨ If not, create a bookmark where your content begins (<A NAME=”content” />) and create a hyperlink at the beginning of your navigation menu to tell the assistive technology it can skip ahead.

Timed Responses

Designing content that gives sufficient time to give a response

• For all pages that require a timed response:

o Does your page force the user to logout after a set amount of time without first alerting the user?

¨ Ensure that the application first alerts the user when the session is about to end and allow them to opportunity to request more time.

Images

Designing content that has a text-equivalent for anything that is not readable by assistive software (images)

• For all pages that have images:

o Do all of the images within your web pages include ALT attributes that thoroughly describe what is being presented?

¨ Ensure that every image contains an ALT attribute. If the description is longer than one sentence, also include a LONGDESC attribute.

Video

Designing content that has a text-equivalent for anything that is not readable by assistive software (video)

• For all pages that have video or other types of animation:

o Does the page display animations that are not defined?

¨ Ensure that every image contains an ALT attribute. If the description is longer than one sentence, also include a LONGDESC attribute. If the image/animation is for decorative purposes, put it in CSS or include empty ALT attributes.

o Does the page display video that isn’t described?

¨ Include a detailed transcript of the video.

Objects and Applets

Designing content that has a text-equivalent for anything that is not readable by assistive software (objects or applets)

• For all pages that have objects or applets:

o Do all of the objects or applets within your web pages include ALT attributes that thoroughly describe what is being presented?

¨ Ensure that every object or applet contains an ALT attribute. If the description is longer than one sentence, also include a LONGDESC attribute.

Equivalent Pages

To be used under special circumstances when it is impossible to be in compliance

• For all pages that cannot be in compliance:

¨ Create text equivalent pages for content that isn’t in compliance

¨ Create a synchronization policy for content to be updated on compliant and non-compliant versions

1. Remove any tags that Adobe Photoshop or The Gimp generate
2. Move all of the <STYLE></STYLE> information into a separate CSS file. For more information, go back to chapter 12 where it refers to LINK SRC. You will see an example of this below.
3. Clean up the formatting of your code so that indentions are consistent and add ALT tags to all of the necessary images on the page. For example the cocktail class in the picture above should have an ALT tag of “cocktail glass” or “join us for drinks”

CSS File (styles.css):

P {
Font-Family: Verdana;
Font-Size: 12px;
}

H1 {
Font-Family: Verdana;
Font-Size: 14px;
}

HTML File (index.html):

<html>
<head>
<title>Divas</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=iso-8859-1″>
<link src=”styles.css” />
</head>
<body bgcolor=”black” leftmargin=”0″
topmargin=”0″ marginwidth=”0″
marginheight=”0″>
<table id=”Table_01″ width=”800″
height=”601″ border=”0″ cellpadding=”0″
cellspacing=”0″>
<tr>
<td rowspan=”3″><img src=”images/Divas_01.jpg”
width=”96″ height=”190″ alt=”"></td>
<td colspan=”2″>
<img src=”images/Divas_02.jpg”
width=”256″ height=”61″ alt=”"></td>
<td colspan=”5″ rowspan=”2″>
<img src=”images/Divas_03.jpg”
width=”448″ height=”128″ alt=”"></td>
</tr>
<tr>
<td colspan=”2″>
<img src=”images/Divas_04.jpg”
width=”256″ height=”67″ alt=”"></td>
</tr>
<tr>
<td colspan=”2″><a
href=”index.html”><img
src=”images/Divas_05.jpg” width=”256″
height=”62″ border=”0″ alt=”Home
Page”></a></td>
<td><a href=”about.html”><img
src=”images/Divas_06.jpg” width=”99″
height=”62″ border=”0″ alt=”About Us
Page”></a></td>

<td><a href=”events.html”><img
src=”images/Divas_07.jpg” width=”63″
height=”62″ border=”0″ alt=”Events
Page”></a></td>
<td><a href=”members.html”><img
src=”images/Divas_08.jpg” width=”113″
height=”62″ border=”0″ alt=”Members Only
Page”></a></td>
<td><a href=”contact.html”><img
src=”images/Divas_09.jpg” width=”87″
height=”62″ border=”0″ alt=”Contact Us
Page”></a></td>

<td>
<img src=”images/Divas_10.jpg”
width=”86″ height=”62″ alt=”"></td>
</tr>
<tr>
<td>
<img src=”images/Divas_11.jpg”
width=”96″ height=”410″ alt=”"></td>
<td>
<img src=”images/Divas_12.jpg”
width=”165″ height=”410″ alt=”Join us For
Drinks Every Week”></td>

<td colspan=”6″ width=”539″
height=”410″ bgcolor=”black”
STYLE=”color:white;” valign=”top”>

<h1>Title of Page</h1>
<p>
Test Data delivers the highest quality
designs and marketing solutions at
affordable prices. We Believe that you
need a comprehensive strategy to catch and
compel your target market. We believe in
creating demand for your talents, products
or services through positive Web-based
technologies, Media and networking. </p>
</td>
</tr>
<tr>
<td>
<img src=”images/spacer.gif”
width=”96″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”165″ height=”1″ alt=”"></td>
<td>

<img src=”images/spacer.gif”
width=”91″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”99″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”63″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”113″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”87″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”86″ height=”1″ alt=”"></td>
</tr>
</table>
</body>
</html>

Making Several Pages From the Above Template

The final step is to save your template as multiple web pages. This is how you do it:

1. Go to File, Save As, Type in about.html (hit Save)
2. Change all of the content in the page to About Us information including titles, pictures, and text
3. Go to File, Save As, Type in events.html (hit Save)
4. Change all of the content in the page to Events information including titles, pictures, and text
5. Go to File, Save As, Type in members.html (hit Save)
6. Change all of the content in the page to Members Only information including titles, pictures, and text
7. Go to File, Save As, Type in contact.html (hit Save)
8. Change all of the content in the page to Contact Us information including titles, pictures, and text. Now, open your home page (index.html). You should be able to click on every one of your links and doing so should forward you to that specific page.

What many web designers do not understand is that every web browser uses their own standards in their rendering engine. Microsoft has a very unique rendering engine unlike anyone else, but are beginning to follow the W3C’s standards in their recent release of Internet Explorer 7. Firefox’s rendering engine is based off of Mozilla’s standards, which follow very closely with those recommended by the W3C. Safari’s rendering engine is based off of the Open Source Gecko engine also used in Konqueror, a popular Linux web browser. The problem with these rendering engines is that they don’t follow the same rules–what looks right in IE might look terrible in FireFox, Safari, and so on.

I always recommend designing your website in Mozilla Firefox. It is simply the greatest common denominator. I have found, in my experience, that if you design your website in Firefox, it “usually” requires less recoding to behave in other browsers.Let me share some of his troubles with you and walk you through how we resolved the following issues:

• “Oh, my god! My DIV doesn’t center in Firefox like it does in Internet Explorer!”

Okay, this is a very simple fix and I can pretty much guess what you are doing wrong. Most likely, your style looks like this:

box {
width = 720px;
text-align = “center”;
}

The text-align reference, although seems to behave fine in Internet Explorer, is not valid for this kind of element. The W3C recommends that the text-align tag be exclusively used for text, so other browsers are not going to center an entire DIV for you. Also, remember that adding <div align=”center” id=”box”> to your HTML code isn’t going to work either for the same reason. To accomplish this problem, you need to actually change this to the following code:

box {
width = 720px;
margin: 0 auto;
}

• “Oh crap! My DIV looks great in Internet Explorer, but awful in Firefox. What do I do?”

To render an item solely in Firefox (and it not effect other browsers, simply add a -moz- in front of the tag. Let me demonstrate:

box {
width = 720px;
margin: 0 auto;
-moz-margin-top: 3px; // For Firefox
margin-top: 4px; // For other browsers
}

• “Oh no! Now it’s the other way around. It looks great on Firefox, but bad on Internet Explorer!”

Easy fix! The problem with Microsoft is that they sometimes add some default elements to your styles that other browsers do not add. The “!important” tag tells your browser to take precedence over the all of the other tags. Normally in CSS, the last style added takes precedence, thus they are “cascading”. The “!important” tag overrides this cascading behavior and sets a default for that style which cannot be overridden. Here is how you do this:

box {
width = 720px;
margin: 0 auto;
-moz-margin-top: 3em; // For Firefox
margin-top: 8em !important; // For Internet Explorer
margin-top: 4em; // For other browsers
}

• “But I wanna assign an entire other style for those who use IE!”

That’s not a problem. Simply do this:

.topMennu{
width: 700px;
}

.top\Menu{
width: 720px;
}

So, to make a long story short he lived happily ever after with the fabulous new tricks I taught him. Do you have any tricks you’d like to add?

Hyper Text Markup Language, or HTML, is a platform for formatting content for the browser to view and operate. Many applications we use everyday utilize the following HTML concepts behind the scenes including: Microsoft Word, Microsoft Internet Explorer, Mozilla FireFox, and even e-mail clients such as Microsoft Outlook. Once you master these skills, you will open yourself to a world of development and design—which you can use anywhere.

The first web page in your website consist of default filename. This default filename is usually “index.html” and sometimes (but not always) “default.html”. For this exercise, we are going to create an HTML file within Windows Notepad (Start, Run, type in “notepad” and hit enter) or any plain text editor that comes with most operating systems. Your window should look something like this:

Now, you need to save this file somewhere. I recommend creating a folder on your computer called “web”—for the effort of this exercise I’m going to create it on my desktop—and save the file in that folder by the name of “index.html”. Go to file, save-as, type “index.html”, and then change the type from Text Documents (.txt) to “All Files”, and hit “save”:

Now, we’re ready to start coding. The first set of tags that should be included in every web page is:

<HTML>

</HTML>

This tells the browser that it is in fact and HTML document you are working with. Although they are not always necessary, for the purpose of creating VALID HTML documents, you need to add those tags. Next, you will create the HEAD and TITLE tags. These are tags that are interpreted before the web page loads:

<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
</HTML>

Notice, under the title tag, I added information between <TITLE> and </TITLE>? That information will show up on the Title bar of the browser window:

Next, you will add content to the web pages body:

<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<BODY>
Content goes here
</BODY>
</HTML>

Notice the content I put between <BODY> and </BODY>? Open the file in our web browser and see what happens:

Now that we’ve created a simple web page, its time to learn the various HTML tags that can be used. Everything from this point on will stay between the <BODY> and </BODY> tags.

<p> – The Paragraph Tag

The first tag that every designer learns is the paragraph tag: <p></p>. Your web browser will interpret each instance of <p></p> as a separate paragraph in the web page.

<p>WhirledVisions Productions delivers the highest quality designs and marketing solutions at affordable prices. We believe that you need a comprehensive strategy to catch and compel your target market. We believe in creating demand for your talents, products or services through positive Web-based technologies, Media and networking.</p>

<p>Through 15 years of growth, we have become recognized for our professional and innovative approaches. Our ‘team of talent’ and unique can-do attitude translates into success and satisfaction for our clients. </p>

The above will appear like this:

<h1></h1> Header Tags

Header tags allow you to apply a title or label to a specific section of your web page that you would like to emphasize. There is a series of six different header tags available to choose from: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
Place the following above the two paragraph tags you just created.

<h1> Welcome to WhirledVisions</h1>

The result will look like this:

Creating Tables

The TABLE element is usually one of the more difficult HTML concepts that a webmaster struggles with in the beginning. It is, however, very simple to master once you understand the concepts. Each table has a table row <TR> and table
columns <TD>. Allow me to demonstrate:

<TABLE>
<TR> <!– << inserting a table row –>
<TD>Left Column</TD> <!– << inserting a column in that row
<TD>Right Column</TD>
</TR> <!– << closing that row element –>
</TABLE> <!– << closing that table lement –>

The result of the above code should look like this:

Now, let’s use these concepts to add a column to our HTML document. Pay close attention to the tags I add to the elements, especially ALIGN, COLSPAN:

<TABLE WIDTH=”400″>
<TR>
<TD COLSPAN=”2″><h3>Website Prices</h3></TD> <TR>
<TD>5 Page Website</TD>
<TD ALIGN=”right”>$1,000.00</TD>
</TR>
<TR>
<TD>10 Page Website</TD>
<TD ALIGN=”right”>$1,500.00</TD>
</TR>
<TR>
<TD>15 Page Website</TD>
<TD ALIGN=”right”>$2,000.00</TD>
</TR>
</TABLE>

The result of the above code is:

There are things you need to pay close attention to, especially:

1. WIDTH: used to assign the elements width in pixels, can be used in the TABLE, TR, or TD tag. You could also use percentages. For example, you could make the first TD 30% and the second TD 70% in width.
2. COLSPAN: notice how the first table row only has one column, and the other rows have two columns? That’s because I set the COLSPAN to 2, so that the row would compensate for the second column’s space and show properly.
3. ALIGN: you can choose to align any element in the table LEFT, RIGHT, or CENTER
4. BORDER: you can also, if you choose, create a border to easily depict where the table rows exist. Simply add BORDER=”1” to the TABLE element.

In the next exercise, I will show you how to assign colors, sizes, fonts, etc. to your TABLES with ease. You will notice that I left the attributes to the TABLE element to a minimum, and it is because we need to use Cascading Style Sheets (CSS) to conform to website design standards.

Hyperlinks and the Anchor Tag

Another HTML element that you should become very aware of is the Anchor tag, or <a>. Within the <a> tag, an HREF is added to bring the user to a particular destination, when clicked. Here is an example:

<A href=”index.html”>Home Page</a> |
<A href=”about.html”>About Us</a> |
<A
href=”mailto:info@whirledvisions.com”>Cont
act Us</A> |
<A
href=”http://www.amazingdesignsecrets.com”
target=”_blank”>Partner</A>

Here is a demo of what the above looks like in our web page. I placed it above the content for navigation purposes, I placed a “|” after every link to use as a divider:

Breaks

Notice in the above picture the logo is very close to the navigation menu? The best way to easily move the content down is to add break tags <BR />. The break tag adds a one line break in between two pieces of content. Unlike the <p> tag, breaks allow you to control your content much more effectively. Here is an example:

<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<BODY>
<h1> Welcome to WhirledVisions</h1>
<A href=”index.html”>Home Page</a> |
<A href=”about.html”>About Us</a> |
<A
href=”mailto:info@whirledvisions.com”>Cont
act Us</A> |
<A
href=”http://www.amazingdesignsecrets.com”
target=”_blank”>Partner</A>
<BR><BR> <!- – two line breaks – -><IMG
src=”images/logo.jpg” BORDER=”0″
ALIGN=”LEFT” />
<p>WhirledVisions Productions delivers the
highest quality designs and marketing
solutions at affordable prices. We Believe
that you need a comprehensive strategy to
catch and compel your target market. We
believe in creating demand for your
talents, products or services through
positive Web-based technologies, Media and
networking.</p>

<p>Through 15 years of growth, we have
become recognized for our professional and
innovative approaches. Our ‘team of
talent’ and unique can-do attitude
translates into success and satisfaction
for our clients. </p>
<TABLE WIDTH=”400″>
<TR>
<TD COLSPAN=”2″><h3>Website
Prices</h3></TD>
<TR>
<TD>5 Page Website</TD>
<TD ALIGN=”right”>$1,000.00</TD>
</TR>
<TR>
<TD>10 Page Website</TD>
<TD ALIGN=”right”>$1,500.00</TD>
</TR>
<TR>
<TD>15 Page Website</TD>
<TD ALIGN=”right”>$2,000.00</TD>

</TR>
</TABLE>
</BODY>
</HTML>

And here is an example of what that looks like. Doesn’t look much better now
that the logo has been moved down two lines?

Introduction to Cascading Style Sheets (CSS)

These font style tags are a simple way of adding quick effects to your text. Although, I must warn you, this method of identifying the style of a font has become deprecated according to the World Wide Web Consortium (W3C)—the organization who sets standards development of HTML,. CSS, and other web languages—and are recommended that you utilize Cascading Style Sheets to accomplish this.

It is really your choice which route you would like to go in styling your text. It is preferred; however, that you choose the latter by only assigning values you to your web page elements. It will certainly serve you better in the long run. HTML the values that you assigned above to recycle throughout your entire website—a benefit you do not have with font tags. Here is how you do that:

1. Create a CSS file. I am going to call mine “styles.css”. For purposes of this exercise, I’m going to use Windows Notepad.
2. Type the following values within your CSS file:
   

   .WVBold { //<–the name of the class you
   would like to assign
   Font-weight:Bold;
   }
   .WVItalics { //<–the name of the class
   you would like to assign
   Font-emphasis:italics;
   }
   .WVUnderline { //<–the name of the class
   you would like to assign
   Underline:True;
   }

3. Add the following to directly under the tag of your document but above the tag:
4. Add the classes to each element you’d like to emphasize in your web
   page: Example:<div class=”WVBold”>Demo Text</div> Demo Text
   <div class=”WVItalics”>Demo Text</div> Demo Text
   <div class=”WVUnderline”>Demo Text</div> Demo Text

Applying CSS to Web Page Elements

One of the greatest advantages of using CSS is that you can implement your class within any HTML element. For example, if you wanted to apply the HTML element to a <p> tag, you could simply type <p class=”WVBold”>.

Tables

<TABLE STYLE=”width:400px;”>
<TR>
<TD COLSPAN=”2″><h3>Website
Prices</h3></TD>
<TR>
<TD class=”WVBold”>5 Page Website</TD>
<TD ALIGN=”right”
class=”WVItalic”>$1,000.00</TD>
</TR>
<TR>
<TD>10 Page Website</TD>
<TD ALIGN=”right”>$1,500.00</TD>
</TR>
<TR>
<TD>15 Page Website</TD>
<TD ALIGN=”right”>$2,000.00</TD>
</TR>
</TABLE>

I’ve supplied an HTML and CSS reference guide along with this course with every single element, tag, and value for your convenience. If you downloaded an electronic copy of the course, then it is located at the very end of this book. I recommend printing and laminating it for easy access.

So, I wanted to share this with you. The website is http://www.lonniebest.com/FormatCSS/

UPDATE: We now offer a CSS optimizer tool of our own based off of the Open Source CSS Tidy application. Simply click on the tools link at the top of the page and select CSS Tidy.

Things to remember, however:

• The features change the order of elements and therefore may alter which styles prevail, during style conflict resolution (cascading) they may end up rendering your page differently then you expect.
• If your CSS isn’t well formed (which I hope it is), you will experience formatting problems and different browsers may interpret your code differently.

If you need to validate your CSS, you can always go to http://jigsaw.w3.org/css-validator/ and use the W3C’s free validator to clean up your code.

Expect a free tool to be posted here in a few days because I’m going to provide a tool that optimizes and cleans your CSS files much more efficiently!

All the best!

Andrew

• AJAX – Tried GMail yet? GMail is an excellent example of how AJAX is used to make a web application usable and “fun” to use. GMail was able to get almost immediate market share by creating one of the first AJAX engine e-mail clients. Several other hosted application providers have followed this trend.
• Blogs – Do you have a blog? It doesn’t matter if you’re a 16 year old girl in high school or an established rock musician, creating a blog is one of the best ways to create interactivity on your website. It also allows you to easily and quickly bring your thoughts to life. High quality blogs (like this one) are able to bring targeted traffic to your website for free. It’s also an awesome opportunity to express yourself and get people to listen to what you have to say.
• CSS – Over are the days where you can throw together a website in Microsoft FrontPage (or some other WYSIWYG editor) and conform to accessibility standards. CSS has revolutionized the way that web pages are rendered and are deprecating HTML tags such as Tables, Font Tags, and Meta tags. The best Web 2.0 websites are completely CSS driven, where DIV tags mandate the design elements–making your websites design easily changeable and adaptable to any media: projectors, mobile phones, web browsers, and PDAs.
• RSS - People want you to share your content with them. RSS is one popular way to incorporate your content across multiple platforms. This blog, for example, has the capability to share blog updates by syndicating every update with an RSS Aggregator or within your favorite reader, such as Google Reader or MyYahoo.
• Social Networking - MySpace and FaceBook are popular social networking websites that people use to “get together” and share information about one another. If your website brings people together you reap so many benefits because you are able to categorize your users/customers and target products and services based on that category, thus increasing your conversion rate.
• Wiki’s – Not only do people want information, they want to be able to create information. Content is one of the most difficult things webmasters struggle with. Why not open your content up to editors (with moderators of course) and lets thousands of people control content that you used to control all by yourself. Just imagine the amount of work can be done when you have a team of people helping you out!

Next time you build website, why not focus on bringing people together and get ahead of the curve by incorporating some of these new concepts.

HTML was originally developed so that the web designer could format and arrange their web page as they choose. Tables allowed them to arrange information in an organized fashion. Soon, however, designers started to use these tables to organize the content of their website by adding columns for menus, headers, etc. This began to become a growing trend and made it difficult for browsers to read and understand this information—which explains what happens when you look at an HTML table designed website on a mobile phone, you’re unable see the website very easily.

Now that CSS has become so popular, web designers are using a different approach to designing their websites. Instead of using the TABLE tag along with the TR and TD tags, we are now using DIV and SPAN tags to simply define the information we are working with and assigning a CSS class or id to the tag. Now, when you look at a CSS designed website, mobile phones and other devices will simply strip the CSS and only show the content (which is in your DIV or SPAN tags). This allows your online presence to be interoperable between all media.

Besides interoperability, you are also ensuring that your content is U.S. Section 508 Compliant, so that those with disabilities and handicaps can easily explore your website. By doing this you also help with search engine optimization, validated code, and ease of updating or changing your design—which in turn will help bring valuable traffic to your website.

I greatly recommend that you explore designing CSS layouts while to learn HTML and Graphic/Web Design. It will help you greatly in the long run, even though it can sometimes become a very advanced and difficult task