HTML Advanced
Website Development Tutorials for Artists, Website Design, WebDev, Website Help, how to make a website, how to create a website. After that last tutorial you should know alot more about HTML concepts, tags, how to use them, how to create an .html document etc. Now we're going to moved into a few more advanced HTML topics. This will consist of a few tags and their purpose. We also feel it necessary to go more in-depth with a few more specific topics. If you're reading this and don't know how to create a .html document then please see the HTML Introduction.

The first topic at hand are the "headers" (term used loosely) of an HTML document. Then we're going to move onto footers and etc. These are not rules but simply guidelines, it is recommended that most webpages are set up and ended how we show.

Now we're going to show you an example header of a website and what all should be there. Using a correct header can give more information to viewers, search engines, firewalls, etc. about your site's content and what you're trying to accomplish. That black characters are part of the tags and the gray are parts that can be changed to suit the need of your site. So here we go:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--//blaz// These are comments. //-->
<META NAME="Description" CONTENT="This site has alot of free help toward writers. We try to encourage and share our wisdom.>
<META NAME="keywords CONTENT="writers, writing, writing tutorial, tutorials, help with writing, sharing knowledge">
<link rel="meta" href="labels.rdf" type="application/rdf+xml" title="ICRA labels">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<META NAME="rating" CONTENT="general">
<META NAME="robots" CONTENT="index,follow">
<META NAME="robots" CONTENT="all">
<META NAME="revisit-after" CONTENT="15 days">
<META NAME="distribution" CONTENT="global">
<META NAME="author" CONTENT="Ninja Stiles">
<META NAME="updated" CONTENT="March 30, 2006">
<TITLE>Writing Website</TITLE>
</head>
<body bgcolor="white">

Now we're going to go through the header (which again, it is recommended for most webpages that you follow these header guidelines) and we're going to explain your option, what the tags do, etc. Here we go.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
This tells the browser which HTML version you are coding for so that it knows how to correctly interpret your webpage. This should be left alone unless you really know what you're doing.

<html>
This says that everything encapsulated by it is in HTML format. Any text not placed inside this tag will be looked upon as plain text and displayed on your webpage as so.

<head>
The head tag includes alot of meta and other tags that cannot be seen directly on the webpage. It holds alot of data describing your website.

<!--// These are comments. //-->
These are comments, anything placed inside of them will not be displayed whatsoever by a browser. They are commonly used to add notes to the web author if a file gets too long. The text in them can also be used to help promote your site on search engines because most search bots detect them and use them as more keywords on your webpages.

<META NAME="Description" CONTENT="This site has alot of free help toward writers. We try to encourage and share our wisdom.>
Now beginning the meta tags. This first one is a description of your website. Many search engines will show the description of your site on their listings. Recently many search engines have switched to showing cut text from your site that includes the searched terms; however, they are still used by search engines and can increase your site's search ranking, so they should always be included.

<META NAME="keywords CONTENT="writers, writing, writing tutorial, tutorials, help with writing, sharing knowledge">
These are the kickers for search engines to grab a hold of your content. These are the keywords that are linked with your site. They should be thought out clearly and coded like the above example (seperated by commas). While they are not displayed by the browser they help your site get better search rankings.

<link rel="meta" href="labels.rdf" type="application/rdf+xml" title="ICRA labels">
A tag like the above is a third party tag from ICRA. It tells your browser as well as firewalls the rating of the content on your website. Go to IRCA to get a rating as well as the tags to insert on your page. This tag varies from site to site and should not be copied. Without a rating tag your site will not be viewable on protected computers; that is, computers that have high content security set up on their browsers, etc.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
This tag tells a browser what character type your HTML has been typed and saved as. For North America leave this tag exactly as it is unless you know what your doing. For other countries you must replaced UTF-8 with the character set of your own geographical location.

<META NAME="rating" CONTENT="general">
A simple tag declaring that your site's content is intended for a general audience. General can be substituted for the actual content rating. Again, the rating used in this example was given through ICRA.

<META NAME="robots" CONTENT="index,follow">
Search engines are told to index this webpage and follow the internal links that are included on it. This tag could also be put into a robots.txt file. A robots.txt file is a simple text file at the root of your website that has a list of robot commands. We're not really going to cover them here.

<META NAME="robots" CONTENT="all">
Again, a robots tag. This one says that any and all robots may index, follow and search this webpage. For exemptions etc. it is best to use a robots.txt file.

<META NAME="revisit-after" CONTENT="15 days">
Robots should revisit, meaning that they should come back and rescan the page for changes or updates, in 15 days.

<META NAME="distribution" CONTENT="global">
This website is not intended for only one geographical location but is actually open to the entire world for viewing.

<META NAME="author" CONTENT="Ninja Stiles">
This is usually a coding copyright notice. It also serves purpose for other website developers that have questions about your code or would like to borrow some of it.

<META NAME="updated" CONTENT="March 30, 2006">
This meta tag lets search bots know when the page was last updated so that they can make the decision of rescanning them or not.

<TITLE>Writing Website</TITLE>
Toward the end of the header we the title tags. They serve purpose in search engine rankings, but more importantly, this is the text that is going to be displayed in the window caption bar at the top of the browser.

</head>
That end the head tag, thus saying that the actual website content is going to begin.

<body bgcolor="white">
After the head tag is ended one should begin the body of their page. From here on out to the footer will be enclosed by the body tag. Bgcolor stands for the background color of the webpage.

Now that we have the header done, let's finish off the page with its footer.

</body>
</html>

These are pretty self-explanatory. They just end the body tag as well as the html tag. Despite how simple they are, they still need to be included at the end of every webpage.

Oddly enough, viewing the above website, despite all the code and lines that are in it, will display nothing. All of the actual content should go in the body tags. But through learning the above tags and understanding them one can easily help their site increase it search rankings as well as be more viewable and open to the public. Many of the tags help a webpage go cross-platform through different computer types as well as over different internet media.

- Joseph Lookabaugh


Visitors Start Here
- About Us
- Message Boards
- Site Map


Artistic Genesis:
Let's share everything we know. Let's share our ideas, our thoughts, our works.

What if one of us had an idea that could inspire to the extent of changing the world? What if we never found out because we were trapped inside our heads, what if we didn't want anyone else to know the secrets that we've uncovered throughout our lives?

Let us create, learn and share...let us be the foundation that is Artistic Genesis.




 

Powered & Designed by Ivy Flux
Copyright © 2002-2007 Blazedent. All Rights Reserved.
This is the day that the Lord has made, let us rejoice and be glad in it.