web-designer-roy « Web Designer's Tips & Tricks

Tag Archive: web-designer-roy

HTML4 vs HTML 5

Filed under: CSS, CSS2, CSS3, Designer, dreamweaver, Graphics, HTML, HTML4, HTML5, Photoshop, web 2.0, XHTML, XHTML, HTML, CSS. CSS1, CSS2, Photoshop, Dreamweaver, Designer — Leave a comment

November 22, 2011

What are the key differences between HTML4 and HTML5 draft?

HTML5 has several goals which differentiate it from HTML4.

The primary one is consistent, defined error handling. As you know, HTML purposely supports ‘tag soup’, or the ability to write malformed code and have it corrected into a valid document. The problem is that the rules for doing this aren’t written down anywhere. When a new browser vendor wants to enter the market, they just have to test malformed documents in various browsers (especially IE) and reverse-engineer their error handling. If they don’t, then many pages won’t display correctly (estimates place roughly 90% of pages on the net as being at least somewhat malformed).

So, HTML5 is attempting to discover and codify this error handling, so that browser developers can all standardize and greatly reduce the time and money required to display things consistently. As well, long in the future after HTML has died as a document format, historians may still want to read our documents, and having a completely defined parsing algorithm will greatly aid this.

The secondary goal of HTML5 is to develop the ability of the browser to be an application platform, via HTML, CSS, and Javascript. Many elements have been added directly to the language that are currently (in HTML4) Flash or JS-based hacks, such as <canvas>, <video>, and <audio>. Useful things such as Local Storage (a js-accessible browser-builtin sql database, for storing information beyond what cookies can hold), new input types such as date for which the browser can expose easy user interface (so that we don’t have to use our js-based calendar date-pickers), and browser-supported form validation will make developing web applications much simpler for the developers, and make them much faster for the users (since many things will be supported natively, rather than hacked in via javascript).

There are many other smaller efforts taking place in HTML5, such as better-defined semantic roles for existing elements (<strong> and <em> now actually mean something different, and even <b> and <i> have vague semantics that should work well when parsing legacy documents) and adding new elements with useful semantics – <article>, <section>, <header>, <aside>, and <nav> should replace the majority of <div>s used on a web page, making your pages a bit more semantic, but more importantly, easier to read. No more painful scanning to see just what that random </div> is closing – instead you’ll have an obvious </header>, or </article>, making the structure of your document much more intuitive.

SEO Differences Between HTML5 v HTML4 Versions

A Typical Web Page In HTML 4 Code:

<title>Hobo Web LTD Scotland</title>

</head>

<body>

</div>

Test Page 1</a></h2> <div>

<p>Article Text here</p>

</div>

Test 2</a></h2>

<div>

<p>Article 2 Text here</p>

</div>

<div>

<a href=”/blog/page/2/”>Ã‚« Previous Entries</a>

</div>

</div>

<li><h2>Hobo Stuff</h2>

<ul>

<li><a href=”/blog/comment-policy/”>Comment Policy</a></li>

</ul></li>

<li><h2>Archives</h2>

<ul>

<li><a href=’/blog/2008/04/’>April 2008</a></li>

<li><a href=’/blog/2008/03/’>March 2008</a></li>

<li><a href=’/blog/2008/02/’>February 2008</a></li>

<li><a href=’/blog/2008/01/’>January 2008</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

…here’s the same page, with differences clear, in the W3C’s new incarnation.

An Example of a Typical Page in HTML 5 Code:

<title>Hobo Web LTD Scotland</title>

</head>

<body>

</header>

Test Page 1</a></h2> <p>Article Text here</p>

</article>

Test 2</a></h2>

<p>Article Text 2 here</p>

</article>

<nav>

<a href=”/blog/page/2/”>Ã‚« Previous Entries</a>

</nav>

</section>

<nav>

<ul>

<li><h2>Hobo Stuff</h2>

<ul>

<li><a href=”/blog/comment-policy/”>Comment Policy</a></li>

</ul></li>

<li><h2>Archives</h2>

<ul>

<li><a href=’/blog/2008/04/’>April 2008</a></li>

<li><a href=’/blog/2008/03/’>March 2008</a></li>

<li><a href=’/blog/2008/02/’>February 2008</a></li>

<li><a href=’/blog/2008/01/’>January 2008</a></li>

</ul>

</li>

</ul>

</nav>

</footer>

</body>

</html>

HTML 5 Notes

Discover other new features, and learn more about the future of HTML.

HTML 5 introduces new elements to HTML for the first time since the 1990′s. New structural elements include aside, figure, and section. New inline elements include time, meter, and progress. New embedding elements include video and audio. New interactive elements include details, datagrid, and command.

HTML 5 defines the fifth major revision of the core language of the World Wide Web – HTML – from the W3C (World Wide Web Consortium). Also called Web Applications 1.0 – there are still no no namespaces or schemas. Elements don’t have to be closed. Browsers are forgiving of errors. A p is still a p, and a table is still a table.

HTML 5 adds new elements to specifically identify each of these common constructs:

section: A part or chapter in a book, a section in a chapter, or essentially anything that has its own heading in HTML 4

header: The page header shown on the page; not the same as the head element

footer: The page footer where the fine print goes; the signature in an e-mail message

nav: A collection of links to other pages

article: An independent entry in a blog, magazine, compendium, and so forth.

Comment

SEO-Advanced Text Linking Strategies

Filed under: CSS, CSS2, CSS3, Designer, dreamweaver, HTML, web 2.0, XHTML, XHTML, HTML, CSS. CSS1, CSS2, Photoshop, Dreamweaver, Designer — Leave a comment

April 18, 2009

There are some advanced things you can do when considering your link text that will allow you to gain even more benefit from them. Lets look at some ideas and suggestions, as well as think about some more high levels strategies revolving about link text.

Place Plain Text Around Links

Placing some plain text next to your links is better than just having bare links all over the place. Many search engines use the text surrounding a link to help figure out what a link is about. Although I would not go so far as to place plain text in your navigation menu, and it may not look good down near the bottom of your page near the copyright notice, but when available, its always a good idea to add a line of descriptive text next to your link.

Varying Your Destination URL?

There has been alot of debate in the last few years about whether when you are out there submitting your links, asking for links, and linking your own pages up, whether you should change out the desination URL. What I mean is, ‘domain.com’ and ‘www.domain.com’ usually point to the exact same place. Also depending on my website’s setup, something like ‘domain.com/index.php’ or ‘domain.com/index.htm’ also points to the same place.

So should you be changing up the destination URL constantly? No. Should you change it up a bit here and there? Yes. You should find the scheme that you prefer most, and stick with that 80-90% of the time. So if you decide that you like the ‘domain.com’ version better than the ‘www.domain.com’ version, then stick with that most of the time. Sticking with the same scheme will give you better search engine results in general, however you should vary it using the different flavors of your URL at least 10% or so of the time.

How Many Links Per Page?

This is certainly a good question, and something that really deserves its own page. However with the present state of the web, I would personally not put more than 30 links on one page at any given time. Now there may be some exceptions to this. For instance your own sitemap page, or a page that has 50 links that all point to other areas of your site. Thats not a big deal in the eyes of the search engines. What I would avoid however, is placing large amounts of links to external sites on one big page. You don’t want to have your page be viewed as some sort of link farm right?

What If My Link Has To Be My Name?

Blog comments are a common place where there are links that are expected to be a name. Many blog systems allow you attach a link to the name you use to post comments. This free link of sorts tends to be highly abused however, and the blog owners do not look too kindly upon people who jam a bunch of keywords in as their ‘name’ when posting comments. This smells like spam and they will delete and/or blacklist you in a second. However, you can often give yourself a ‘title’ type of name. As long as you are backing it up with a long,useful,relevant comment that blows away all the other comments on the page, most blog owners would be happy to put up a comment like that. Examples of good names to use would be ‘Sewing Sally’ instead of just ‘Sally’. Yes you are still calling yourself Sally, but at least you have the keyword ‘sewing’ now added to the link as well. Other examples that you can try would be things like ‘Cooking Fan’, ‘Joe the Plumber’, or ‘Marketing Guru’.

Comment

Building Accessible Static Navigation with CSS

Filed under: CSS, CSS2, CSS3, Designer, dreamweaver, Graphics, HTML, Photoshop, web 2.0, XHTML, XHTML, HTML, CSS. CSS1, CSS2, Photoshop, Dreamweaver, Designer — Leave a comment

February 23, 2009

When building a navigation menu for a web site, steps should be taken to ensure that it is accessible, and degrades gracefully in older browsers with lesser CSS support. In this article we will explore one such implementation. The navigation menu you see in this example is built with valid, semantic HTML and CSS – no JavaScript is involved, as I felt this was unnecessary. The static (non-expanding/collapsing) nature of the example suits a web site comprised of twenty or less target pages.

· Skip to content styled button – This is placed directly at the top of the nav container, and is an accessibility feature for users with visual impairments.

<!– /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:621349764; mso-list-type:hybrid; mso-list-template-ids:-1506797044 1590970310 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:; mso-level-tab-stop:.3in; mso-level-number-position:left; margin-left:.4in; text-indent:-.1in; font-family:Symbol;} ol {margin-bottom:0in;} ul {margin-bottom:0in;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
· Area headings – This defines the structure and presentation of the area headings that separate each section of the navigation container.

<!– /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:621349764; mso-list-type:hybrid; mso-list-template-ids:-1506797044 1590970310 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:; mso-level-tab-stop:.3in; mso-level-number-position:left; margin-left:.4in; text-indent:-.1in; font-family:Symbol;} ol {margin-bottom:0in;} ul {margin-bottom:0in;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
· Link state symbols area – This is a legend consisting of symbols that define the state of a hyperlink as a user traverses the document collection. It is an accessibility feature for users that are visually impaired, color blind, or suffer from short term memory loss or dyslexia.

<!– /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:621349764; mso-list-type:hybrid; mso-list-template-ids:-1506797044 1590970310 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:; mso-level-tab-stop:.3in; mso-level-number-position:left; margin-left:.4in; text-indent:-.1in; font-family:Symbol;} ol {margin-bottom:0in;} ul {margin-bottom:0in;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
· Topics area – As it says, here is where all topic web pages are listed and hyperlinked for surfing through the document collection.

________________________________________________________________________________________________

1.1 <!– /* Font Definitions */ @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
Nav container markup

<a href=”#a1″>skip to content</a></h4>

<hr />

<h4>link state symbols</h4>

<li><img alt=”Ball symbol.” class=”state” src=”images/hover.gif” width=”16″ height=”16″ /><span class=”focus”>Focus/Hover</span></li>

<li class=”unvisited”><img alt=”Chain link symbol.” class=”state” src=”images/link.gif” width=”16″ height=”16″ />Unvisited</li>

<li class=”visited”><img alt=”Check mark symbol.” class=”state” src=”images/visited.gif” width=”16″ height=”16″ />Visited</li>

<li class=”currently”><img alt=”Star symbol.” class=”state” src=”images/star.gif” width=”16″ height=”16″ />Currently Open</li>

</ul>

<hr />

<h4>topics</h4>

<ul class=”linkstate”

<ul>

<li><a href=”Topic1.htm”>Topic 1</a></li>

<li class=”topic2″><a href=”Topic2.htm” title=”This page is currently open.”>Topic 2</a></span>

<ul>

<li><a href=”Topic2a.htm”>Topic 2a</a></li>

<li><a href=”Topic2b.htm”>Topic 2b</a></li>

<li><a href=”Topic2c.htm”>Topic 2c</a></li>

<li><a href=”Topic2d.htm”>Topic 2d</a></li>

<li><a href=”Topic2e.htm”>Topic 2e</a></li>

<li><a href=”Topic2f.htm”>Topic 2f</a></li>

</ul>

</li>

<li><a href=”Topic3.htm”>Topic 3</a></li>

<li><a href=”Topic4.htm”>Topic 4</a></li>

<li><a href=”Topic5.htm”>Topic 5</a></li>

</ul>

</li>

</ul>

</div>

#nav {

width: 23em; – gives the navigation div container a relative horizontal size

position: absolute; – removes the navigation div container from the natural flow of the document.

top: 1em; – sets the distance from the top of the browser window

left: 1em; – sets the distance from the left side of the browser window

margin: 0em; – shorthand for the margin property – removes all margins in the order of top, right, bottom and left

padding: 0em 0.5em 1em 0.5em; – shorthand for the padding property – sets the padding in the order of top, right, bottom and left:

border: 1px solid #ffd505; } – shorthand code for the border property – defines the width, type, and color of the border surrounding the nav container:

#nav ul {

margin: 0em; – shorthand for the margin property – removes all margins in the order of top, right, bottom and left

padding: 0em; – shorthand for the padding property – removes all padding in the order of top, right, bottom and left

list-style-type: none; – removes the list-styles: discs, squares, circles, etc.

color: #fff; – sets the color of white to the text characters

background: inherit } – sets the list to inherit the container background color

&#035nav ul li {

margin: 0em; – shorthand for the margin property – removes all margins in the order of top, right, bottom and left

padding: 0.4em 0em 0em 0.5em; – shorthand for the padding property – sets padding in the order of top, right, bottom, and left:

list-style-type: none; } – removes the list-styles: discs, squares, circles, etc.

&#035nav ul ul li {

padding: 0em; – shorthand for the padding property – removes all padding in the order of top, right, bottom and left

margin-left: 2em; – sets the left margin padding to 2em

list-style-type: none; } – removes the list-styles: discs, squares, circles, etc.

&#035nav ul ul ul li {

padding: 0em; – shorthand for the padding property – removes all padding in the order of top, right, bottom and left

margin-left: 1.4em; – sets the left margin padding to 1.4em

list-style-type: none; } – removes the list-styles: discs, squares, circles, etc.

<!– /* Font Definitions */ @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
Following accessibility guidelines, I have included a “skip to content” link (styled button) on each web page to allow users to bypass the navigation section and skip to the beginning of the page content. I have designed the button using CSS to be visible to all users by default, making them aware that this accessibility tool is available. It is made fairly small, and in line with the design of the web page so as not to be too obtrusive to the page design. If a client specified it should not be visible, it could be moved off the visible page using CSS absolute positioning (Important Note: visibility: hidden; should not be used as this makes it invisible to assistive technologies.) This way, it wouldn’t be seen at all by sighted users, and users employing screenreaders (or other assistive technologies) could activate it through the keyboard. This eliminates the repetitive spatial navigation or tab key actions needed to manually bypass the navigation and arrive at the first section of content.

As shown in the following code sample, the markup of the styled button (h4 class=”skip”) links the anchor element and its href attribute value (a href=”#a1″) with the id attribute value of the first content heading (h2 id=”a1″). I do not employ any access keys/character keys to achieve this because the majority have already been pre-assigned by the operating system, the user agent/browser, and any assistive device which may be installed, notwithstanding those few available which a user may have assigned themselves.

Example: <h4 class=”skip”>

<a href=”#a1″>skip to content</a>

</h4>

#nav h4.skip {

font-size: 1.1em; – sets the font-size to a relative size of 1.1em

font-weight: bold; – sets the font-weight to bold

font-variant: small-caps; – sets the font-variant to small-caps

margin: 1.8em 0em 0em 0em; – shorthand for the margin property in the order of top, right, bottom and left

padding: 0.5em; – sets all padding (top, right, bottom, and left) to 0.5em

color: #fff; – sets the font color to white

background: none; – removes any background and image attached to the anchor hyperlink

text-decoration: none; } – removes the default underline from the anchor hyperlink

#nav h4.skip a:link #nav h4.skip a:visited{

color: #000; – sets the font color to black

background: #ccc; – sets the background color of the button

padding: 0.2em 1em; – shorthand code for padding in the order of top and bottom, then right and left

border-top: 0.15em solid #fff; – top border shorthand: sets the thickness, type and color for the unvisited and visited state of the top border of the button

border-left: 0.15em solid #fff; – left border shorthand: sets the thickness, type and color for the unvisited and visited state of the left border of the button

border-bottom: 0.15em solid #aaa; – bottom border shorthand: sets the thickness, type and color for the unvisited and visited state of the bottom border of the button

border-right: 0.15em solid #aaa; } – right border shorthand: sets the thickness, type and color for the unvisited and visited state of the right border of the button

#nav h4.skip a:hover #nav h4.skip a:active #nav h4.skip a:focus{

color: #fff; – sets the font color to white

background: #454545; – sets the background color of the button

padding: 0.2em 1em; – shorthand code for padding in the order of top and bottom, then right and left

border-top: 0.15em solid #fff; – top border shorthand: sets the thickness, type and color for the hover, active and focus states of the top border of the button

border-left: 0.15em solid #fff; – left border shorthand: sets the thickness, type and color for the hover, active and focus states of the left border of the button

border-bottom: 0.15em solid #aaa; – bottom border shorthand: sets the thickness, type and color for the hover, active and focus states of the bottom border of the button

border-right: 0.15em solid #aaa; } – right border shorthand: sets the thickness, type and color for the hover, active and focus states of the right border of the button

The Area headings CSS

#nav h4 {

font-size: 1.5em;

font-variant: small-caps;

text-align: center;

margin: 0em;

padding-bottom: 0.3em;

color: #fff;

background: inherit; }

This legend defines the current state of all hyperlinks. In the Topics area of the navigation container, the current state of each link is represented by a different symbol positioned to the right of the hyperlink text – these are summarized in the table below. This is important to users that are color blind, visually impaired, or suffer from short term memory deficiency. It eliminates link state color, gives them the ability to identify if they have or have not visited a topic, and also allows them to identify a hyperlink by keyboard or mouse navigation.

State Description

Focus/Hover Ball – signifies the focus, hover and active pseudo-classes

Unvisited Chain link – signifies an unvisited link, the link pseudo-class

Visited Check mark – signifies a visited link, the visited pseudo-class

Currently Open Star – signifies a topic web page which is currently open and being viewed

<!– /* Font Definitions */ @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
The legend is constructed using a simple unordered list, containing image elements with relative paths to the symbol graphics. alt attributes give a short description of the symbols. Please note that this legend gives a static rendering of the symbols – purely for identification purposes. The symbols will become dynamic through CSS image replacement in the Topics area hyperlinks, when the linkstate class attribute is added to the opening tag of the root unordered list element.

<h4>link state symbols</h4>

<li class=”focus”><img alt=”Ball symbol.” class=”state” src=”images/hover.gif” width=”16″ height=”16″ />Focus/Hover</li>

<li class=”unvisited”><img alt=”Chain link symbol.” class=”state” src=”images/link.gif” width=”16″ height=”16″ />Unvisited</li>

<li class=”visited”><img alt=”Check mark symbol.” class=”state” src=”images/visited.gif” width=”16″ height=”16″ />Visited</li>

<li class=”currently”><img alt=”Star symbol.” class=”state” src=”images/star.gif” width=”16″ height=”16″ />Currently Open</li>

</ul>

#nav .linkstate {

font-weight: bold; } – sets all characters to bold

#nav .state {

padding-right: 1em; – sets the symbol image space to the right of the text

vertical-align: top; } – sets the symbol image to the top of the text baseline

#nav .focus {

color: #fff; – sets the text color to white

background: transparent; – sets the background color to transparent

text-decoration: underline; } – sets the underline beneath the hyperlink

#nav .link {

color: #a4d3ee; – sets the text color to light blue

background: transparent; } – sets the background color to transparent

#nav .visited {

color: orange; – sets the text color to orange

background: transparent; }

#nav .currently {

color: yellow; – sets the text color to yellow

background: transparent; } – sets the background color to transparent

<!– /* Font Definitions */ @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
In this code I have dynamically employed the symbols I identified earlier in the Link state symbols area legend. Identification of the current state of any link in the Topics area is achieved by inserting a class attribute with its value of linkstate in the root unordered list element opening tag (<ul class=”linkstate”>). The link state symbols, as previously defined in the legend, now become dynamic though image replacement using external CSS. All hyperlinks in the Topics area now show their current link state via the symbol at the end of their link text. Links that are not in the hover, active or focus state will show the unvisited chain link symbol, the visited check mark symbol, or the star symbol which signifies that the page is currently open and being viewed.

<!– /* Font Definitions */ @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
In addition, as a user navigates through the Topics area hyperlink list via keyboard or mouse and gains focus on each link, the link will become underlined, and a ball symbol will replace either the chain link (unvisited) or check mark (visited) symbols. This ball symbol represents the hover, active, and focus pseudo-classes of the anchor link element. Please note that the star symbol which signifies a currently open page, will remain static and not change (this is an optional feature which I’ll describe later in the article).

<h4>topics</h4>

<ul>

<li><a href=”topic1.htm”>Topic 1</a></li>

<li><a href=”topic2.htm”>Topic 2</a>

<ul>

<li><a href=”subtopic2a.htm”>Subtopic 2A</a></li>

<li><a href=”subtopic2b.htm”>Subtopic 2B</a></li>

<li><a href=”subtopic2c.htm”>Subtopic 2C</a></li>

<li class=”subtopic2d”><a href=”subtopic2d.htm” title=”This page is currently open.”>Subtopic 2D</a></li>

<li><a href=”subtopic2e.htm”>Subtopic 2E</a></li>

<li><a href=”subtopic2f.htm”>Subtopic 2F</a></li>

</ul>

</li>

<li><a href=”topic3.htm”>Topic 3</a></li>

<li><a href=”topic4.htm”>Topic 4</a></li>

<li><a href=”topic5.htm”>Topic 5</a></li>

</ul>

</li>

</ul>

#nav .linkstate {

font-weight: bold; } – sets all link characters to bold.

#nav .linkstate a:link{

text-decoration: none; – removes underlining from hyperlinks

color: #a4d3ee; – sets the font color to a light blue

padding-right: 1.7em; – creates space on the right side of the Topic for the linkstate image

vertical-align: bottom; – positions the image at the bottom of the text line

background: #000 url(images/link.gif) no-repeat right; } – shorthand for the background property, defined as follows:

#000 – sets the background color to black

url(images/link.gif) – sets the relative path to the images folder containing the link icon image

no-repeat – sets the image to a single and not a multiple rendering

right; – positions the image to the right of the hyperlink

#nav .linkstate a:visited{

text-decoration: none; – removes underlining from hyperlinks

color: orange; – sets the font color to orange

padding-right: 1.7em; – makes space on the right side of the Topic for the linkstate image

vertical-align: bottom; – positions the image at the bottom of the text line

background: #000 url(images/visited.gif) no-repeat right; } – shorthand for the background property, defined as follows:

#000 – sets the background color to black

url(images/visited.gif) – sets the relative path to the images folder containing the link icon image

no-repeat – sets the image to a single and not a multiple rendering

right; – positions the image to the right of the hyperlink

#nav .linkstate a:hover{

text-decoration: none; – removes underlining from hyperlinks

color: #fff; – sets the font color to white

padding-right: 1.7em; – makes space on the right side of the Topic for the linkstate image

vertical-align: bottom; – positions the image at the bottom of the text line

background: #000 url(images/hover.gif) no-repeat right; } – shorthand for the background property, defined as follows:

#000 – sets the background color to black

url(images/hover.gif) – sets the relative path to the images folder containing the link icon image

no-repeat – sets the image to a single and not a multiple rendering

right; – positions the image to the right of the hyperlink

#nav .linkstate a:active{

text-decoration: none; – removes underlining from hyperlinks

color: #fff; – sets the font color to white

padding-right: 1.7em; – makes space on the right side of the Topic for the linkstate image

vertical-align: bottom; – positions the image at the bottom of the text line

background: #000 url(images/hover.gif) no-repeat right; } – shorthand for the background property, defined as follows:

#000 – sets the background color to black

url(images/hover.gif) – sets the relative path to the images folder containing the link icon image

no-repeat – sets the image to a single and not a multiple rendering

right; – positions the image to the right of the hyperlink

#nav .linkstate a:focus{

text-decoration: none; – removes underlining from hyperlinks

color: #fff; – sets the font color to white

padding-right: 1.7em; – makes space on the right side of the Topic for the linkstate image

vertical-align: bottom; – positions the image at the bottom of the text line

background: #000 url(images/hover.gif) no-repeat right; } – shorthand for the background property, defined as follows:

#000 – sets the background color to black

url(images/hover.gif) – sets the relative path to the images folder containing the link icon image

no-repeat – sets the image to a single and not a multiple rendering

right; – positions the image to the right of the hyperlink

Tags: Amit, amit-designer, amit-roy, amitroy, CSS, CSS2, CSS3, CSS3 Box Model, Roy-Amit, roy-designer, royamit, web 2.0, web-designer-Amit, web-designer-roy, web-site-designer, XHTML

Comment

W3C CSS3 Recommendations

Filed under: CSS, CSS2, CSS3, Designer, dreamweaver, Graphics, HTML, Photoshop, web 2.0, XHTML, XHTML, HTML, CSS. CSS1, CSS2, Photoshop, Dreamweaver, Designer — Leave a comment

December 16, 2008

CSS3 working drafts and candidate recommendations are in progress. You can check out what we can look forward to with the upcoming version of CSS. Some newer browsers even support a few of the features. The W3C also welcomes and invites feedback before these modules become final Recommendations.

As you will also see below, CSS is becoming modularized. There are several reasons: 1) One module can easily be updated, speeding up the turnaround time and allowing greater flexibility; 2) User agents can also choose to support specific modules, such as an aural browser with constraints and only needing aural CSS specifications; and, 3) to help clarify relationships between various parts of the specifications and to reduce the overall size of the document.

Introduction to CSS3 (Working Draft)
Still a Working Draft, check out W3C’s Introduction to CSS3. Take a look at what’s being worked on for the next version of CSS.
CSS3 Module: Backgrounds (Working Draft)
This new module describes the functionality of backgrounds, such as background colors and background images, extending the functionality of CSS2.
CSS3 Advanced Layout Module
Template-based positioning, tabbed (stacked) displays, row and column layouts, more.
CSS3 Module: Box Model (Working Draft)
This new module builds on CSS3′s inline text module. Although a typically horizontal flow, CSS3 adds a vertical flow that would be used for ideographic scripts or Uighur script.
CSS3 Module: Cascading and Inheritance (Working Draft)
This new module specifies how values are assigned to properties.
CSS3 Module: Color (Candidate Recommendation)
This working draft describes the color properties and values that are proposed for CSS level 3, with several new properties and values added.
CSS3 Module: Fonts (Working Draft)
This new module for CSS3 allows font specification by a user agent and new font decoration properties.
CSS3 Module: Line (Working Draft)
This new module for CSS3 specifies the presentation aspects of line within block elements and inline elements, baseline alignment, drop initials, and related.
CSS3 Module: Lists (Working Draft)
This new module for CSS3 proposes changes to the functionality of CSS2 list specifications.
CSS3 Module: Mobile Profile (Candidate Recommendation)
This new module for CSS3 defines a subset of CSS2 for the needs and constraints of mobile devices.
CSS3 Module: Multi-column Layout (Working Draft)
This new module for CSS3 builds on the CSS3 Box Model module and adds multi-column functionality to the content of an element.
CSS3 Paged Media Module
This module “describes the page model that partitions a flow into pages. It builds on the CSS3 Box model module and introduces and defines the page model and paged media. It adds functionality for pagination, page margins, headers and footers, image orientation. Finally it extends generated content for the purpose of cross-references with page numbers.”
CSS3 Module: Ruby (Candidate Recommendation)
This new module for CSS3 proposes a set of CSS properties associated with the ‘Ruby‘ elements.
CSS3 Module: Selectors (Candidate Recommendation)
This new module for CSS3 proposes new selectors and includes and extends the selectors from CSS1 and CSS2.
CSS3 Module: Text (Candidate Recommendation)
This new module for CSS3 specifies text layout such as international writing directions, text alignment, indenting, wrapping, white-space, text overflow, text decoration, and related. Several new CSS properties are added for CSS3.
CSS TV Profile 1.0 Candidate Recommendation
A subset of CSS2 and CSS3 Color module, providing specifications for TV devices.
CSS3 Module: Values and Units (Working Draft)
This new module describes CSS property values and units and how the specified values are processed into computed values and actual values.

Comment

Web Designer's Tips & Tricks – Amit Roy

Tag Archive: web-designer-roy

HTML4 vs HTML 5

SEO-Advanced Text Linking Strategies

Place Plain Text Around Links

Varying Your Destination URL?

How Many Links Per Page?

What If My Link Has To Be My Name?

Building Accessible Static Navigation with CSS

W3C CSS3 Recommendations

Recent entries

Browse popular tags

Meta

Friends & links

Pages

Monthly archives

Follow “Web Designer's Tips & Tricks - Amit Roy”