How To Plan The Main Skeleton Of The Web Page
All good web sites start with a Document statement which tells the browser which type it is reading. One such example that would go on the very first line would be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Next you will tell the browser which language will go into this document, which is usually:
<html>
As everything should nest properly, this command will be the last thing on the bottom of the page because everything in between these tags are in html.
</html>
The next part to this document you are creating will be the head area. This is the part the search engines read. Depending on which commands you include, it will tell the search engine spiders the title of your page, a description, the keywords, and various things you may want to include for various engines that will visit your site.
The head tags will go right after the first <html> and right before the <body> tag. So far, this is what your cell web page will look like:
<!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>
</head>
<body>The head tags for html do not have a closing tag. The head tags for xhtml do need a closing tag.
HTML
XHTML
<head>
<title>YOUR SITE TITLE HERE</title>
<meta name="description" content="DESCRIBE YOUR SITE HERE">
<meta name="keywords" content="KEYWORDS, LISTED, HERE">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="resource-type" content="document">
<meta name="revisit-after" content="21">
<meta name="robots" content="ALL">
<meta name="distribution" content="Global">
<meta name="rating" content="General">
<meta name="copyright" content="2006">
<meta name="author" content="YOUR NAME HERE">
<meta name="language" content="English">
<meta name="doc-type" content="Web Page">
<meta name="doc-class" content="Completed">
<meta name="doc-rights" content="Copywritted Work">
<link rel="Shortcut Icon" href="http://www.YOURDOMAINHERE.com/icon.ico">
<link rel="Icon" href="YOURDOMAINHERE.com/icon.ico">
</head><head>
<title>YOUR SITE TITLE HERE</title>
<meta name="description" content="DESCRIBE YOUR SITE HERE" />
<meta name="keywords" content="KEYWORDS, LISTED, HERE" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="resource-type" content="document" />
<meta name="revisit-after" content="21" />
<meta name="robots" content="ALL" />
<meta name="distribution" content="Global" />
<meta name="rating" content="General" />
<meta name="copyright" content="2006" />
<meta name="author" content="YOUR NAME HERE" />
<meta name="language" content="English" />
<meta name="doc-type" content="Web Page" />
<meta name="doc-class" content="Completed" />
<meta name="doc-rights" content="Copywritted Work" />
<link rel="alternate" type="application/atom+xml" title="RSS FEED TITLE HERE" href="http://www.RSSFEEDURLHERE.com" />
<link rel="Shortcut Icon" href="http://www.YOURDOMAINHERE.com/icon.ico" />
<link rel="Icon" href="YOURDOMAINHERE.com/icon.ico" />
<link rel="stylesheet" media="all" type="text/css" href="STYLESHEETNAMEHERE.css" />
</head>After the head tags, the browser will then read what is on the body which is what actually shows up on the screen. Everything in the head tag is solely for the spiders and robots crawling your site. Everything within the body tag is for the surfer viewing your site.
It is very important to make sure everything is correctly nested. HTML is a bit more forgiving, but XHTML is very exact. As you may note in the above comparisons, all the XHTML tags ended out with / in the head. While it is always a good idea to make sure even in HTML everyting is properly nested, in XHTML it is mandatory. Browsers are more forgiving of HTML errors than in XHTLM.
When using XHTML, always close the tags in the proper sequence where that particular tag command ends. If you want everything in a paragraph to follow that particular tag's command, make sure you end it when you no longer want the rest of the page to follow it. If you want the whole body to follow a tag, be sure to close it out right before you end the body tag.
Proper nesting would be something like this:
<b><a href="YOUR LINK HERE">YOUR TEXT HERE</a></b> MORE TEXT HERE.
This would be poor nesting:
<a href="YOUR LINK HERE"><b>YOUR TEXT HERE</a></b> MORE TEXT HERE.
The first example shows the first command to make everything after it bold and then to make everything a hypertext link. When you wish to stop that command and make it return to normal, close the hyperlink command first and the bold command second. This is how you cradle these commands correctly.
The second is incorrect because it starts with a hyperlink command followed by the bold command and closes the hyperlink before the bold.
Just remember, to nest them correctly, if you start with a string of commands, the first one becomes the last and the last become the first at the end.
In XHTML, all the commands are in lower case letters. Do not use uppercase letters in an XHTML tag. With HTML, you can get away with using uppercase letters in the command tags.
If you are using HTML, you can create the look of your page in the body tag. If you are using XHTML or HTML, you can create the look within a css style sheet linked to it within the head tags OR you can create your style within the head itself OR you can use css style commands in certain sections of your document.
If you are using either HTML or XHTML, I would strongly recommend you use a separate style sheet which you link to on the page. This makes it so much easier to update the look of your site at any time.
If using HTML and opting to put commands in your body to create a look, this is what it could look like:
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" alink="#0000FF" vlink="#0000FF">
That will not work with XHTML at all. If using XHTML, use a stylesheet. If using HTML, I would still strongly recommend using one anyway. In the end, it will make your pages load a bit faster.
Another thing about the difference in the two, anything within a command must be contained within quotes. For instance, when it comes to creating a table, HTML is forgiving if you did this:
<table color=#00AAFF border=1 width=100%>
Not that you could get away with using that code at all in XHTML, but if you did, it would have to read in this manner:
<table color="#00AAFF" border="1" width="100%">
So here is a basic skeleton you can use when making your site. Feel free to copy and paste then adjust it to suit your needs.
HTML
XHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>YOUR SITE TITLE HERE</title>
<meta name="description" content="DESCRIBE YOUR SITE HERE">
<meta name="keywords" content="KEYWORDS, LISTED, HERE">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="resource-type" content="document">
<meta name="revisit-after" content="21">
<meta name="robots" content="ALL">
<meta name="distribution" content="Global">
<meta name="rating" content="General">
<meta name="copyright" content="2006">
<meta name="author" content="YOUR NAME HERE">
<meta name="language" content="English">
<meta name="doc-type" content="Web Page">
<meta name="doc-class" content="Completed">
<meta name="doc-rights" content="Copywritted Work">
<link rel="Shortcut Icon" href="http://www.YOURDOMAINHERE.com/icon.ico">
<link rel="Icon" href="YOURDOMAINHERE.com/icon.ico">
</head>
<body>
<p>WITHIN THIS SECTION IS EVERYTHING YOU WANT TO BE SEEN IN THE BROWSER.</p>
<p>YOU CAN FILL IT WITH JUST TEXT, PICTURES, TABLES, FORMS OR WHATEVER YOUR SITE IS ABOUT.</p>
<p>JUST BE SURE EVERYTHING IS PROPERLY NESTED INSIDE THIS AREA.</p>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>YOUR SITE TITLE HERE</title>
<meta name="description" content="DESCRIBE YOUR SITE HERE" />
<meta name="keywords" content="KEYWORDS, LISTED, HERE" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="resource-type" content="document" />
<meta name="revisit-after" content="21" />
<meta name="robots" content="ALL" />
<meta name="distribution" content="Global" />
<meta name="rating" content="General" />
<meta name="copyright" content="2006" />
<meta name="author" content="YOUR NAME HERE" />
<meta name="language" content="English" />
<meta name="doc-type" content="Web Page" />
<meta name="doc-class" content="Completed" />
<meta name="doc-rights" content="Copywritted Work" />
<link rel="alternate" type="application/atom+xml" title="RSS FEED TITLE HERE" href="http://www.RSSFEEDURLHERE.com" />
<link rel="Shortcut Icon" href="http://www.YOURDOMAINHERE.com/icon.ico" />
<link rel="Icon" href="YOURDOMAINHERE.com/icon.ico" />
<link rel="stylesheet" media="all" type="text/css" href="STYLESHEETNAMEHERE.css" />
</head>
<body>
<p>WITHIN THIS SECTION IS EVERYTHING YOU WANT TO BE SEEN IN THE BROWSER.</p>
<p>YOU CAN FILL IT WITH JUST TEXT, PICTURES, TABLES, FORMS OR WHATEVER YOUR SITE IS ABOUT.</p>
<p>JUST BE SURE EVERYTHING IS PROPERLY NESTED INSIDE THIS AREA.</p>
</body>
</html>When you have your basic skeleton down, then you can fill your body with whatever you want to be seen. Just keep in mind how the basic skeleton is set up and it will be easy to learn how to structure what you have in mind.
 |
JCE Enterprises Related Sites |