XHTML category

Where am I

It's important for your site visitor to know where exactly he is right now so he could found his way among your site and know where he is and where can he go, in more than one level structured sites it maybe represented like this (Home > products > Laptops) for example, but in 1 level structured sites like this one for example there is other ways.

You also have to take care not to link to the same page you're on so the page you're on should not be linked to in the same page, as it's extremely confusing.

The most well known technique is adding a class to the list item and style it differently through the CSS if we took the navigation on the left side here as an example it will be like this

<ul>
<li class="here">home</li>
<li><a href="about.htm" title="accesskey: 2" accesskey="2">about</a></li>
...</ul>

Now you could style it let's say like this

.here { font-style: italic; }

This is a way but it's not the best, as you should never link to the same page you are on in the navigation we could take that chance and use the opportunity that the page your on lack the <a> around it's name in the navigation, so we got that example

<ul>
<li>home</li>
<li><a href="about.htm" title="accesskey: 2" accesskey="2">about</a></li>
...</ul>

And style it like that

#nav { font-style: italic; }
#nav a { font-style: normal; }

By that you specified that the non linked item in this undefined list will be italic, without the need of specifying a class name in each page it will just style it as italic if it's not a link.

You may need to add <span> instead of <a> around your non linked item for giving the desired style as I needed it here in this site. I wrapped the non linked item with <span> because I needed to add some padding to it, here is what's in point CSS

#header ul li a, #header ul li span {
display: block;
padding: 5px 0;
}

That's all for today, good luck with your usable, semantic & beautifully styled navigations.

November 14, 2006, 8:49 AM TrackBack 0

Next HTML as you like it

We now all have the chance in building the next version of HTML the way we like, well not exactly but the WHATWG who are in process of developing HTML5 encourages every body to give his say about it, What do you think should be fixed, What could be improved, If you have any questions etc...

Any questions, comments, criticisms, complaints or feature requests are welcome. Now is the time to speak up. No comment is too dumb; no question is too hard or too simple; no criticism is too harsh. If you have anything at all to say, we are listening.

Have Your Say about the Future of HTML

Read more details about how could you have your say, in the post Have Your Say about the Future of HTML here is the Arabic translation of the post.

November 12, 2006, 1:24 PM TrackBack 0

More meaningful writings

As you already may know I read dozens of posts and comments every day, unfortunately I noticed that most of them could be more meaningful if they just wrap parts of there text by some simple tags, here are some important tags that writers often miss:

Emphasis

Some times there is more important text that needs to be highlighted, to specify some text as more important wrap it with <em> like this This text is <em>important</em>. Or even more important wrap it with <strong> like this I just got <strong> married</strong> infact I did.

Emphasis usually represented as italic for <em> & bold for <strong> but take care don't use those tags for there visual representation use them only for there meanings and avoid using <i> & <b>.

Abbreviations & acronyms

An abbreviation is a group of letters taken from one word to brief it, like the world abbreviation could be abbreviated as abbr or from more than one word like the word HyperText Markup Language could be abbreviated as HTML.

Acronyms are type of abbreviations it's the first letters of a group of words like National Aeronautics and Space Administration its acronym is NASA.

To indicate abbreviations wrap your abbreviation with <abbr> like this <abbr>HTML</abbr> now you indicated that HTML is an abbreviation but you could push it more and indicate the abbreviation long form by adding a title attribute like this <abbr title="HyperText Markup Language">HTML</abbr> now if you hovered with the mouse over the abbreviation the long form will be shown in a tooltip, the same for acronyms <acronym title="North Atlantic Treaty Organisation">NATO</acronym>

Quotations & citations

A quotation which could also be named a quote indicates part of others speeches or writings like Beauty in design is not only about that which can be seen, but also that which can't be seen. said by Douglas Bowman it's done by wrapping the quoted text by <q> like this <q>This text is quoted</q> a cite attribute could be added to indicate the URL which this quote is from like <q cite="http://www.quoted.com/q/">This text is quoted</q>.

If the quoted text is a whole paragraph or more than one <blockquote> should be used instead of <q> like this

<blockquote><p>To explain web standards we have to mention first that web design isn't just designing a beautiful interface but behind this interface is a structural markup like HTML, XHTML, presentational language like CSS and DOM based scripts like ECMA script.</p></blockquote> notice that you have to wrap your paragraph with <p> inside the <blockquote>

And ofcoure it could be used with more than one paragraph as the following,

<blockquote><p>Not at all as you can see in this site CSS can make beautiful interface designs with all the benefits that we mentioned here, in fact any design can be redesigned with CSS to be standards compliant.</p> <p>Speaking of CSS beauty we must mention the CSS zen garden project that proves to every body how beautiful is pure CSS layouts. It is one XHTML page and this same page can be changed by only pointing to other CSS file there is over 600 CSS files submitted from designers all over the world. Switch designs from the right panel and be inspired.</p></blockquote>

It will appear usually like this but without the left border the text will be indented only.

Not at all as you can see in this site CSS can make beautiful interface designs with all the benefits that we mentioned here, in fact any design can be redesigned with CSS to be standards compliant.

Speaking of CSS beauty we must mention the CSS zen garden project that proves to every body how beautiful is pure CSS layouts. It is one XHTML page and this same page can be changed by only pointing to other CSS file there is over 600 CSS files submitted from designers all over the world. Switch designs from the right panel and be inspired.

To define a citation or a reference to another source use <cite> like in the previous example <q>Beauty in design is not only about that which can be seen, but also that which can't be seen.</q> said by <cite>Douglas Bowman</cite>, citations usually represented as italic.

If you want to specify a URL to a citation just wrap it with the <a> tag and add the attribute href like this <a href="http://www.citations.com/"><cite>cited content</cite></a>

Code

To indicate a code wrap with <code> like this <code>This is a code</code> and it's usually represented just as the previous example in the courier font.

Deleting & inserting

Maybe this issue will be hard for some of you to apply but when you provide a permalink to your post readers must trust that this permalink will last forever and that its content will not be changed so that they could link to it in there posts, well this issue is for bloggers not commenters to update the content of a post you have to use the tag <del> if you want to delete something and <ins> if you want to insert something like for example Madagascar is a very nice <del>Disney</del> <ins>DreamWorks</ins> movie usually it will be shown like this Madagascar is a very nice Disney DreamWorks movie.

In brief

Here are all the tags we mentioned and there functions in brief.

Good luck with your more meaningful writings,

August 24, 2006, 10:07 AM TrackBack 0

HTML, CSS & accessiblity knowledge levels

Emil Stenström has started it, by his article levels of CSS knowledge followed by Roger Johansson writing about Levels of HTML knowledge and finally Joe Clark's Levels of Accessibility Knowledge.

They are all so true and convincing why don't you check your levels and work on giving each a push only if you need it if creating web sites is part of your job.

I consider my self on level 5 of HTML knowledge, also level 5 in CSS knowledge & 4 in accessibility, maybe I should push it more on accessibility, how about you ?

June 3, 2006, 4:17 PM TrackBack 0

DOM Visualizer

For those who don't know, DOM stands for Document Object Model is the tree of objects in an (X)HTML or XML, for example the first five levels of the DOM of point home page could be represented as the following

A semantic structure is simply a structure that uses HTML tags for what they are designed to be used to, for example use <table> only for tabular data like a data table or calendar, use <div> for divisions of a document only not every block-level element you want to style, for navigation links and all links <a> should be used not <img/> even if you want the link to be an image it should be handled by CSS as this is a presentational effect not structural except if you really need an image link like if it will enlarge the image or go to a page related to the image subject, semantically structured links could be handled by any of the image replacement techniques, to get the desired look.

All this introduction just to tell you about a new applet called HTML DOM Visualizer, just give it a URL and it will generate it's DOM tree.

Point home page DOM tree, through the DOM Visualizer applet

It's very useful as it kind of shows how clean and semantic your site is. representing the tags with circles according to it's type, here is point home page DOM tree, here is also a screen shot that has explanation on it if you get lost, check also some other popular sites trees.

Having a clean semantic document has a lot of benefits, it's more logical for machines to understand that mean more compatibility as old browsers and other devices like mobile phones or PDA's will understand it and render it on it's screen to be logical and meaningful for who's reading it, it will also be more logical for other machine type things to read like search engine robots giving it higher search ranks & screen readers making it more accessible and logical for disabled users. Now what are you waiting for, go check your site and get it cleaned up.

May 30, 2006, 11:57 AM Comments 1 TrackBack 0

iWeb generated code is crap

Well as I expected the code generated from iWeb is really crap, I searched a lot for any examples of iWeb generated pages but I failed, but now the first pages are showing up, and I'm sorry to say that they're crap, check the source code of those examples or disable there CSS and see how they look, Todd Dominey has describe it as not that good & BusinessLogs describe it as awful.

I'm sorry Apple I always trust you and adore your products but this app was a disappointment to me. I can't imagine how a company like Apple in 2006 still use those old school ways, I hope they fix this mistake in new releases but for now I don't advice any one to start a blog with iWeb, just go with Blogger it's way better and it's easy too.

January 13, 2006, 7:03 AM Comments 1 TrackBack 0

Showing XFN relations

In the last post I explained what XFN is.

Since then I was thinking there should be more use of this, there should be a way to show this relations on every link, and I figure out a way.

Well I know maybe I'm not the first one to think of that but any way here is a technique to show XFN relations:

The technique:

Let's see the example I stated in the last post:

<a href="http://www.molly.com/" rel=" muse colleague acquaintance">Molly</a>

By adding some simple CSS rules we could show the relations after every link when hovered.

#content a:hover:after { content: attr(rel); }

We could also add some style to it to highlight it.

#content a:hover:after {
content: attr(rel);
color: #36C;
border-top: 1px dotted #36C;
}

hover here Molly and see more examples.

Take care

Avoid adding any thing beside attr(rel); in the content property, because adding it will effect all the links if you add brackets for example content:"( "attr(rel)" )"; it will have effect on all the links even the links without rel attribute will show empty brackets after it.

Add space before the first value of rel like this rel=" muse colleague acquaintance" to avoid letting the values appear sticking to the link.

Bugs

Any body experience any bugs please post it here.

August 17, 2005, 7:07 PM TrackBack 0

XHTML Friends Network (XFN)

The web is more a social creation than a technical one. I designed it for a social effect — to help people work together — and not as a technical toy. The ultimate goal of the Web is to support and improve our weblike existence in the world. We clump into families, associations, and companies. We develop trust across the miles and distrust around the corner.

—Tim Berners-Lee, Weaving The Web

Millions of people now have personal web sites/blogs especially after the lunch of Blogger, XFN is simple powerful way to identify your relationship with people among the web.

By adding values like muse, friend, colleague to the rel attribute of the anchor tag, it is now known that this person is your friend or your colleague etc...

For example:

<p>I was reading <a href="http://www.molly.com/" rel=" muse colleague acquaintance">Molly</a> thoughts for the last 6 years.</p>

Imagine what could be done after that, you could check who consider himself your friend, who have a crush on you or who is the most inspiring person on the web.

See the list of XFN values and there meanings.

To join the XHTML Friends Network follow these steps.

August 15, 2005, 8:15 AM

Categories: