Basic Advice for newbies
The first thing that I notice when browsing the web is on many sites, basic rules are being ignored completely, the DOCTYPE should always be the first statement made on any webpage. A “Document Type Definition” (DTD) is a document that defines the structure of a mark-up language as well as elements and attributes. Because HTML is a mark-up language, the World Wide Web Consortium (W3C) provides DTDs for all HTML versions.
Here are a few examples of DTDs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
A DOCTYPE is made up of the following parts:
There are multiple versions of HTML, and each version of HTML may have multiple DTDs because each DTD has a different set of requirements. In fact, just adding any DOCTYPE declaration to your Web pages does not make them valid. If you add DOCTYPE declarations to your Web pages without designing them according to that standard, your Web pages may not validate and may render differently than expected or desired. Therefore, when you use a DOCTYPE declaration, you should ensure that you understand the specifications behind the HTML version and DTD.
TABLES VS LAYERS
One of the biggest problems with the web is that people are not coding as they should, many sites are still using tables to create their websites, this is totally wrong and here are some of the reasons why:
I.Tables are usually more bytes of mark-up. (Longer to download, and more bytes of traffic for the host.)
II.Tables are usually slower to layout for the browser. (Takes longer for the user to see anything on the page.)
III.Tables usually prevent incremental rendering. (Takes longer for the user to see anything on the page.)
IV.Tables may require you to chop single, logical images into multiple ones. (This makes redesigns very hard, and also increases page load time [more http requests and more total bytes].)
V.Tables break text copying on some browsers. (That's annoying to the user.)
VI.Tables prevent certain layouts from working within them (like height:100% for child elements of ). (They limit what you can actually do in terms of layout.)
VII.Once you know CSS, table-based layouts usually take more time to implement. (A little effort up-front learning CSS pays off heavily in the end.)
VIII.Tables are semantically incorrect mark-up for layout. (They describe the presentation, not the content.)
IX.Tables make life hell for those using screen readers. (Not only do you get the other benefits of CSS, you're also helping out the blind/partially-sighted. This is a Good Thing.)
X.Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.
TIP: So what language should I be using?
There is only one answer to this question, you should be using cascading style sheets (css), it is far more flexible than tables and it is also easier to use once you have learnt the basics of the language; you will also find it to be quicker when designing and easier when correcting. If you are to design websites professionally or want your website to appear a little higher in the search engines then css is an absolute MUST.
( EDITORS NOTE: this was not copied from any book or web page, it is part of a 'book' that i am intending on releasing to the internet in pdf form once finished )
Here are a few examples of DTDs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
A DOCTYPE is made up of the following parts:
- !DOCTYPE
The identifier. It indicates to the user-agent that the enclosed information will define the type of document of the page. - HTML
The Top Element. This tells the browser what element to expect as the top-level element. For HTML and XHTML documents this element would be < html > - PUBLIC
The Availability. The most common DOCTYPES you will use will be publicly available - "PUBLIC". But you can also specify a local DTD with the "SYSTEM" key word. - "-//W3C//DTD HTML 4.01 Transitional//EN"
The Formal Public Identifier. This entire string is what identifies the DOCTYPE.
- W3C
the Organization. This is the group that owns and maintains the DOCTYPE being used. - DTD
the Type. This defines the type of DOCTYPE used. - HTML 4.01 Transitional
the Human-Readable Label. This is the label that tells you what DTD is being used. It is written so that humans, rather than computers, can understand it. - EN
the Language. This is the language that the DTD is written in. It is not the language of the content of the page.
- "http://www.w3.org/TR/html4/loose.dtd"
The URI. This is an optional URL indicating where the DTD for this DOCTYPE can be found.
There are multiple versions of HTML, and each version of HTML may have multiple DTDs because each DTD has a different set of requirements. In fact, just adding any DOCTYPE declaration to your Web pages does not make them valid. If you add DOCTYPE declarations to your Web pages without designing them according to that standard, your Web pages may not validate and may render differently than expected or desired. Therefore, when you use a DOCTYPE declaration, you should ensure that you understand the specifications behind the HTML version and DTD.
TABLES VS LAYERS
One of the biggest problems with the web is that people are not coding as they should, many sites are still using tables to create their websites, this is totally wrong and here are some of the reasons why:
I.Tables are usually more bytes of mark-up. (Longer to download, and more bytes of traffic for the host.)
II.Tables are usually slower to layout for the browser. (Takes longer for the user to see anything on the page.)
III.Tables usually prevent incremental rendering. (Takes longer for the user to see anything on the page.)
IV.Tables may require you to chop single, logical images into multiple ones. (This makes redesigns very hard, and also increases page load time [more http requests and more total bytes].)
V.Tables break text copying on some browsers. (That's annoying to the user.)
VI.Tables prevent certain layouts from working within them (like height:100% for child elements of ). (They limit what you can actually do in terms of layout.)
VII.Once you know CSS, table-based layouts usually take more time to implement. (A little effort up-front learning CSS pays off heavily in the end.)
VIII.Tables are semantically incorrect mark-up for layout. (They describe the presentation, not the content.)
IX.Tables make life hell for those using screen readers. (Not only do you get the other benefits of CSS, you're also helping out the blind/partially-sighted. This is a Good Thing.)
X.Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.
TIP: So what language should I be using?
There is only one answer to this question, you should be using cascading style sheets (css), it is far more flexible than tables and it is also easier to use once you have learnt the basics of the language; you will also find it to be quicker when designing and easier when correcting. If you are to design websites professionally or want your website to appear a little higher in the search engines then css is an absolute MUST.
( EDITORS NOTE: this was not copied from any book or web page, it is part of a 'book' that i am intending on releasing to the internet in pdf form once finished )
Total Comments 8
Comments
|
this is formatted well, I thought you had copied and pasted it.
Good article. |
 
|
|
|
thanks, that's why i put the note at the bottom, with a little help from ms word, it looks good
|
|
|
|
|
Looking forward to the book
 Nice article. |
|
|
|
|
interesting stuff, like some of those sites you mentioned in your article i am one of those people still using tables for page design layout, can't seem to get my head arround the new "div" design approach.
|
|
|
|
|
please, don't be afraid of asking questions in the css forum
|
|
|
|
|
Quote:
interesting stuff, like some of those sites you mentioned in your article i am one of those people still using tables for page design layout, can't seem to get my head arround the new "div" design approach.
Who else here is self-taught in this subject? |
|
|
|
|
ME! I'm self taught.
|
|
|
|
|
yup im self-taught too.
|
|
|
Total Trackbacks 0
Trackbacks
Recent Blog Entries by saltedm8
- Basic Advice for newbies (Feb 1st, 2008)
