Category: HTML

Check Accessibility using Best Practices

The University of Illinois at Urbana-Champaign has posted a Functional Accessibility Evaluator which takes a new approach to accessiblity testing. Each of the points checked are tied to Web Accessibility Best Practices, which explain in clear language (unlike some of the other online testing tools) what the best practice is and what you need to do to be compliant. An excellent resource for learning and for testing.

Technorati Tags: , , ,

Visit Web Teacher to read any comments.

Tip: Retrain your HTML 3.2 Brain to Think in CSS

How HTML attributes translate into CSS properties
HTML Attributes CSS Properties Notes
font face

font-family: Arial;

Use quotation marks only when there are spaces in the font-family name, e.g., font-family: Verdana, "Trebuchet MS", Tahoma;
font size font-size: 1em; Sizes can be set in ems, percents, pixels or with keywords such as small, medium and large.
bold <b>

font-weight:bold;
strong

When using bold text for decorative reasons, set it with font-weight: bold.

When using bold text to indicate strong emphasis, use the strong element, not the b element.

italic <i> font-style: italic;
em

When using italic text for decorative purposes, set it with font-style: italic. Oblique is also a font-style.

When using italic text to indicate emphasis, use the em element, not the i element.

Italics for citations such as book titles is created using the cite element.
align="left"
align="right" 		float: left;
float: right;

With CSS anything can be floated: images, paragraphs, divs, headings, tables, lists, etc.

Keep in mind that a float may need to be followed by a clear.

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0;

With CSS, margin can be set for any element, not just the body element. More importantly, margins can be set individually for the top, right, bottom and left of any element.

When indenting a block level element, use margin-left, unless the element is actually a
blockquote
.

vlink="#333399" alink="#000000" link="#3333FF"

a:link #3ff;
a:visited: #339;
a:hover: #999;
a:active: #00f;

In HTML, link colors were set as an attribute of the body tag and applied uniformly to every link on the page. Using descendant selectors in CSS, link colors can be set to different values in different parts of a page.
bgcolor="#FFFFFF" background-color: #fff; In CSS, background-color and/or background-image can apply to any element, including body, tables, headings, divs, forms, paragraphs, lists, or spans.
bordercolor="#FFFFFF" border-color: #fff; Any element can have a border, the colors of which can be set individually for top, right, bottom and left if desired.
border="3"
cellspacing="3" 		border-width: 3px;

With CSS, any element can have a border. Borders can be set uniformly, or the size, style and color of borders can be set individually for the top, right, bottom and left (or any combination thereof) of any element.

When setting the borders for tables, use the table, td or th selectors.

When setting the spacing for tables, use the table, td, and th selectors.

If you want a single border line between adjacent table cells, use border-collapse: collapse;

Border can replace a decorative hr element when used only as border-top or border-bottom on an element. A rule for border-right and border-bottom can simulate a drop shadow.

<br clear="left">
<br clear="right">
<br clear="all">

clear: left;
clear: right;
clear: both;

Many two and three column layouts use float to position elements on a page. If part of your presentation depends on background colors or images behind floated elements, you may want to use clear.
cellpadding="3"
vspace="3"
hspace="3" 		padding: 3px; With CSS, any element can have padding. Padding can be set uniformly or individually for the top, right, bottom and left of any element. Padding is transparent, so background-color or background-image will shine through.
li type="disc"
li type="A" 		list-style-type: disc;
list-style-type: upper alpha; 		The properties for list-style-type include disc, circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman and several others, most notably none.
align="center"

text-align: center;

margin-right: auto;
margin-left: auto;

Text-align only applies to text.

Block elements such as paragraphs and divs can be centered using margin-right: auto; and margin-left: auto;

Technorati Tags: ,

Visit Web Teacher to read any comments.

Why hReview, the Microformat, Rocks!

I’ve been writing book reviews on this blog since the very beginning. It fact, the reason I started the blog in the first place was so I could write reviews of the books available for teaching web design.

Recently I’ve been playing with the hReview creator that automatically generates the code for the microformat hReview. The first time I tried it, I used it as is, with no modifications. I didn’t like the way it handled the image, though. So I modified the code the hReview creator gave me a bit and tried it again. The second time I was much happier with the appearance, it fit in better with my usual style of writing book reviews for this blog and the image was where I wanted it.

My main question was whether the modified hReview code would be recognized as readily as the unmodified version. I tested this by searching Google for reviews of the two books I’d used hReview to format. I was amazed to see that my reviews, in either the modified or unmodified format, both place very high in the Google rankings. Since other book reviews I have written do not come in to the Google search results at such a prominent spot, I think the hReview microformat must deserve some credit for my good search results. My conclusion? hReview rocks!

Technorati Tags: microformats

Like this? Digg It!

Reinventing HTML: Tim Berners-Lee

In a blog post, Reinventing HTML | Decentralized Information Group, Tim Berners-Lee announced a new W3C working group to reinvent HTML. This has unleashed a storm of blog posts, the majority of which you can find at the end of this article by 456 Berea St. The idea motivating Tim Berners-Lee is that the move to XML has failed because people are still using HTML 4, and something needs to be done to move people away from HTML 4.

My attitude as a teacher/writer on the topic of learning HTML/XHTML has always been that students should learn HTML as if it were XHTML. That is, students should write HTML using all the characteristics of XHTML such as quoted values, lower case tags, well-formedness and so on. The single exception to that is leaving out the trailing slash in empty elements when writing HTML. In addition, students should learn to write HTML with separation of content from presentation and without deprecated elements.

One reason I like this approach is that problems in XHTML such as MIME types, XML prologues, and so on can be avoided by using HTML, but in a way that is as clean and valid as XHTML without actually moving to an XHTML DOCTYPE. The material I’ve written on this topic teaches students to write XHTML and then transfers that set of coding rules, syntax habits, and attitudes to writing HTML.

Since any change in the rules at the W3C will occur in slow-motion, I don’t think anyone needs to worry about the code, textbooks, or methods they are using now becoming obsolete overnight. But we need to keep an eye on how this plays out, because at some point students may need to learn to write HTML/XHTML in consideration of whatever comes next in a way that takes their skills forward. I’ve found a way to teach HTML/XHTML so students write HTML according to the current standards and is as clean as XHTML. We’ll need to find a system as effective as that, if the W3C actually comes up with another specification for HTML.

Technorati Tags: , , ,

Visit Web Teacher to read any comments.

Pop Menu Magic and Me

I run a site called MusicAustin. I redid it a few months ago with a CSS layout and a menu system from Project Seven called Pop Menu Magic. It’s a great menu and I really like the features. Take a quick side trip over to MusicAustin to see how it works if you aren’t familiar with Pop Menu Magic.

My traffic and my search engine results fell almost immediately, as you can see from the Webalizer stats in the screen capture below.

Webalizer stats for MusicAustin

It took me a while to notice the drop in traffic and the lousy search engine placement; then it took me a while longer to figure out why. Once I fixed it (in August) you can see that my traffic bounced right back up near its former level.

My problem was that I had some of the top level menu items with nothing but <a href="#"> in the anchor element. The search engines weren’t finding anything to follow. I’d broken the path to the secondary level list and the pages they referenced. The solution was to make sure that every link in the top level list actually went to a page, even if it was one of the pages mentioned in the subnav that popped out on hover.

You know, I’ll bet the supporting documentation for Pop Menu Magic mentions this. So my aplogies to everyone at Project Seven (I love you guys) if all I had to do was RTFM. But I have to learn everything the hard way, and this is just one more proof of that sad fact.

Visit Web Teacher to read any comments.