CSS, HTML, XHTML - Code tips, tricks, links

[carju1]

CSS, HTML, XHTML - Code tips, tricks and other information tutorials.

In this section of the WebProWorld Site Design Tutorials you will find information on the subject matter that we are loosely grouping together under Code and Layout.

The tutorials are all listed in this post (which will remain at the top of the Site Design menu) and the full tutorial can be found below. If however, you would like to comment on a particular tutorial, add some information or ask a question then please follow the link provided with each tutorial to the specific discussion thread.

If you would like to write a tutorial for this section, or you'd like to suggest a link, then please contact one of the moderators to arrange its addition to this section.


Regards

Matauri, Carju1 & Paulhiles
Moderators Site Design

__________________________________________________ __


Tutorials & Articles in this Section

1. Deprecated HTML Tags & Alternatives in CSS
Matauri 16th February 2004 - WPW Discussion Thread

2. Font Sizes
Matauri 25th February 2004

3. Why use CSS to separate content from presentation?
Webnauts 25th February 2004 - WPW Discussion Thread

4. Tables and CSS Formatting
Matauri 22nd March 2004

__________________________________________________ __


External Links to Tutorials

1. What is XHTML 1.1?

[matauri]

Deprecated HTML Tags & Alternatives in CSS

Click here for definition (W3C)

Deprecated - A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML.

Obsolete - An obsolete element or attribute is one for which there is no guarantee of support by a user agent. Obsolete elements are no longer defined in the specification, but are listed for historical purposes in the changes section of the reference manual.

Which Tags are deprecated or obsolete? Here is a start. Feel free to add more & their solution as you find them.

TAG:
<align=left|center|right|justify>
<valign=middle|top|bottom>

Solution:
{text-align: left|center|right|justify ; }
or...
{width: 50%; margin-left: auto; margin-right: auto; }
or...
{margin: 2em 0em 2em 0em ; }
or...
{padding: 2em ; }
or...
{padding: 2em 0em 2em 0em ; }

_________________________________________

TAG:
In your BODY tag
<bgcolor=color text=#000000>

Solution:
body { font-size : 10px ; font-family : Arial, Helvetica, Verdana ; background-color: #000000; }

_________________________________________

TAG:
<clear=none|left|right|all>

Solution:
BR { clear: left ; }

_________________________________________

TAG:
Although they are not all deprecated, their use is discouraged in favor of style sheets.

[b] , [i] , <u>

Solution:
[b] - { font-weight: bold ; }
[i] - { font-style: italic ; }
<u> - { text-decoration: underline ; }

_________________________________________

TAG:
<font size="1" color="#000000" face="arial">
<basefont>

Solution:
size - { font-size : 10px ; }
color - { color : #ffffff; }
face - { font-family: Arial, Helvetica, Verdana, sans-serif ; }

_________________________________________

TAG:
<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">


Solution:
{ color: #000000 ;
background-color: #ffffff;
height: 5px ; }
note: Doesn't support in all browsers, see HERE for modifications.

_________________________________________

Will add more as I come to them.
-----------------------------------------
Click Here to discuss this Tutorial

.

[matauri]

FONT SIZES

There are a few ways you can write font sizes, so I thought it would be handy to have a comparison of them here.

{font-size: 14pt}
{font-size: 14px}
{font-size: x-large}
{font-size: larger}
{font-size: 1.5 em}
{font-size: 125%}

IMO the best practice to get into is to use either em or % , as they adjust to various resolutions better.



^

[Webnauts]

Why use CSS to separate content from presentation?

The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct. More: http://www.maxdesign.com.au/presenta...ts/index07.htm


Click Here to discuss this Article


^

[splinter]

This is a subject that I'm really getting into: accessibility. In designing my newest site I have run into a number difficulties trying to incorperate this and I wish to pass on my new-found experience :P

1. Tables For Design

This is a major no-no. Tables were created to display data in a table, not for designing websites. Unfortunately, before the invention of CSS the use of tables was the only way to display our designs the way we wanted. But since we do have CSS, tables for design should be redundant. This has not happened because too many designers either can't be bothered to learn CSS or are unwilling to change their ways.

There are many good tutorials out there but in my opinion once you learn the basics, the most useful place is the CSS section on www.w3.org . Go there and find the CSS properties sheet. That's all I ever use now.

2. Tables for data

This is perfectly acceptable as long as it is set out correctly. The W3C have set out many tags for use to utilise to make tables more acceptable but you do not require many of them. Here are a couple of the ones I feel you require plus a brief description:

<table summary=''> - This provides a brief description of what the table is about. I tend to include a description of the layout as well.

<th id='Monday' scope='col'></th> - <th> is used instead of <td> but only for your tables header cells. In this example I am using a table to create a calendar and this is the first column. id='Monday' means that everything suggested by scope (see later) is, in this case, on a Monday. scope='col' means that this applies to that column. row can also be used and this, of course, means that the content in id applies to that row.

3. Abbreviations and Acronyms

First off, what's the difference? Here is a little hint: acronyms are always abbreviations, but not the other way around. This tip is not only good for making your site accessible to people with disabilities, it makes it better for everyone (actually, that can be applied to all of these hints). The two tags you'll need are these:

For abbreviations: <abbr title='Content'></abbr>
For acronyms: <acronym title='Content'></acronym>

These will inform the visitor what the words/letters between the tags mean.

4. Link Descriptions

This is very similar to the above only it applies to anchor tags. All you need to do is this:

Home

The very same thing will happen.

5. Forms

Just a few things here: accesskeys, lables and alt. Actually, accesskeys can be used nearly everywhere, but this is their most common use.

Accesskeys allow a key combination to be pressed (usually 'Alt + [letter that you suggest]') and the user will be taken to that area. For forms it will be used in the <input> tags:

<input type='text' accesskey='u' name='username' />

Alts can also be used within an <input> tag and provide a description as to what the <input> tag is used for.

<input type='text' accesskey='u' name='username' alt='Type in your username' />

Labels are used to group parts of forms together. Here is an example:

<label for='username'>username: <input type='text' name='name' accesskey='u' alt='Enter your username to log in' id='username' /></label>

The for section in the label tag must correspond to the id tag in the input tag. What this does is mean that the words "username" can also be used to access the <input> form.

6. Menus

When most people visit a website, they can look at only the parts they want to. Imagine you couldn't do that and had to read every single bit of the page (the menu, the adverts etc. etc.) every time. It would really grate. So we need to provide a way to skip these parts. How? By the use of links.

At the first word of your main content, imclude this:

<a name='skip'>[Word]</a>

Now go to the top of the page and find the first thing you can put a link around. Enter this:

<a href='#skip>[Whatever]</a>

There you have it.

7. Just general stuff

Whenever you make a website, you really should include these parts:

A DOCTYPE - these declare what type of page the browser is loading. I won't go through all the different types right now as they are probably listed on this site.

I use this DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

It is the XHTML Strict. It means I have to be very careful and forces me not to be lazy.

A Character Set - this suggests what erm... charaters the browser should load. The most popular is this:

<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />

A Default Language - this tells the browser what the language is. It is set by doing this:

<html lang='en'>

8. The End

There, I hope I have enlightened you in your future ways. I feel that the web should be accessible for all and at the moment it just ain't happening. This is my little bit to help things go along and if only one person ever uses the information here, it will be one more person who has tried to make a difference.

This is not everything you will need to know about accessibility, but I never claimed it was. It is just some little hints. There are probably a few errors in it as well, so if I've got something wrong don't hesitate to contact me.

[matauri]

Tables & CSS Formatting

You may have noticed that there are a lot of deprecated attributes in relation to tables. Many have asked how to validate with this happening. The solution: put all your formatting in your CSS (style sheet) file, or in your <style> tags. Below is an example how to do this for a basic table setup.

All attributes below are just examples, customize to suit.

HTML File:
<table class="one">
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td></td></tr>
</table>

CSS File:
table.one {
width: 80%;
border: 0.05em #6699CC solid;
border-collapse: collapse;
}

table.one td {
text-align: center;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-weight: normal;
font-size: 0.80em;
color: #404040;
width: 50%;
background-color: #fafafa;
border: 0.05em #6699CC solid;
border-collapse: collapse;
}

End Product:




.

[morpheus.100]

W3C CSS Validator Results for http: //attitude-emedia.com/
To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.

Errors
URI : http: //attitude-emedia.com/attitude(1).css
Line: 0 Context : #content-block3
Property paddin doesn't exist : 0

Warnings
URI : http: //attitude-emedia.com/attitude(1).css
Line : 0 font-family: You are encouraged to offer a generic family as a last alternative


Decline to comment further than your site provided the link to validate.

[matauri]

Why thank you very much Morpheous for picking that up for me. All fixed ;-)

[Niko Holopainen]

Just to comment to splinter's great example, to my understanding you should use " instead of ' since Mac's have difficulty with ' signs and both work similarly elsewhere.

No point in restricting people without accessibility issues ;)

Yours truly,

[DaButcher]

This is a subject that I'm really getting into: accessibility...

...<th id='Monday' scope='col'></th>...
...<a name='skip'>[Word]</a>...

Hi,
I have some additions to your tag-properties.

You talked about acronyms, but you forgot to mention acronyms for the properties for the tags.

* You use the "id" property for the tag "<th>", but you use the "name" property for the tag "<a>".

I know this will work, atleast in IE, but if you do this in all your tags, you will soon have problems if you try using, let's say an <iframe>.

With the property "name", it will work fine in IE, but if you try Opera and maybe other browsers, the "blah" wont target the iframe.

Why?

IE works with both properties (I think), Opera works only with the property "id". What is the sollution? Use both!

eg.
<iframe name="content_frame" id="content_frame"...></iframe>

ps. I dont know about compatability for all other tags, but I think this only applies to things you need to target with an hyperlink.