Critical Components To Web Site Design
Good website design boils down to correct code usage, correctly nested codes, and looks good and navigates well in order to present the audience with the things they want to see.
An often overlooked thing that make even good websites bad can be seen in the top framework of the skeleton - the Doctype and the Character Encoding.
Before you even get started on making that first page of your website, know exactly which you will be using to create it.
Doctypes
The web browser a surfer uses in accessing the Internet reads codes and translates it into what you see on your screen. All that html code will seem like some strange alien language to most people. The browser reads your code and translates it so people can understand what it is you are trying to say.
The first line in your web design MUST be included to let the browser know something about the page is the "doctype", or type of document. By adding the line of what doctype, the browser will know and be able to adjust to what the code is on that page.
Without adding the doctype the browser is forced to guess at it which can mean a screwed up looking page on some of the browsers. What may look good on your browser when you finish your page may not look the same on all browsers. Don't make the assumption on what other browsers are seeing. Include the statement on the first line to assure a better product.
To determine your doctype, you need to know what form of language you are using to create your web page. On the table below, the left side of the form is the type of documents available with a link to the rules that apply to that type. On the right side is the line of code to use on the first line of your document if you are using the type listed to the left.
I would not recommend the first two on the top simply because they read fine with those with prehistoric browsers, but often come off funny on browsers that have been developed in the last 5 years. A good browser can translate these document types correctly, but don't make that assumption.
HTML 2.0 DTD <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> HTML 3.2 DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1 DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Character Encoding
The document character set for XHTML and HTML 4.0 is by default unicode or aka ISO 10646. Again, this is one of those things you cannot assume for all browsers used to view your site, especially if you have an International audience or use special text or keyboard characters that are not available in other areas.
A few encodings will be preferred: UTF-8, ISO-8859-1 (Latin-1), US-ASCII, UTF-16, the other encodings in the ISO-8859 series, iso-2022-jp, euc-kr, and so on.
This declaration goes in between your head tags along with all your other meta information.
If you are using html, your code will be similar to this one:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >If you are using xhtml, your code will be similar to this one:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />Just insert the character encoding of your choice right after the "charset=".
When using XML, you need a further declaration as follow that will go directly below your doctype statement:
<?xml version="1.0" encoding="iso-8859-1" ?>Just replace the 1.0 if you are using version 1.1 and replace the character encoding of iso-8859-1 if you are using something different.
Or use in the html tag when you are using XHTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">Replace the specification address if it relates to using a different standard. If you are using a language other than English, replace the en with something you are using.
An exhaustive list of character encoding can be found at IANA.
Example
The code on this page, related to the topic at hand, is as follow:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
</body>
</html>Before you get too crazy and start designing those pages, at least get this part of your skeleton correct first. I will further explain the other elements of html design in html basics including the head, body, and html tag shown above.
Develop your website plan idea on paper first and then structure it correctly to nestle in the proper format. Website design is not really hard, but it does require attention to details. There are many website designers who will perform a service of creating a special website template in the correct format for you to work with where you only have to rename the file, stick in your own content, and make links where necessary to suit your website's needs.
 |
JCE Enterprises Related Sites |