http://www.bruceclay.com for Web Design Advice
Hi everyone! Here's a page I set aside to try to teach my friends the in's and out's of writing basic HTML! I will try to make this page as helpful as possible in the context provided, so if any of you have any questions, just give me a holler here
To begin, we must open up our basic text editor, such as note pad, edit pad, simple text or even Microsoft Word or Corel Word Perfect, if you are feeling adventurous.
At the very top of the page, we will begin by telling the computer that requests your page that what it's reading is a web page. This is accomplished by writing the following at the top of your page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">The first line, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> is optional. It tells the browser which version of the html language your page is written in. Version 4.0 is the current version and is supported by the 4.x and higher browsers.
The second line, <html> is the really important line. This tells the computer that the material following the tag is for a web page.
Immediately following the <html> tag, we then type <head>. The <head> tag holds information about the page, such as meta tags for search engines and page descriptions, the page title, certain types of javascript and cascading style sheets.
Your page should now look like the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">Now, we add the title of our creation as follows:
<title>My Sample Page</title>After the title has been made, we can move on to the optional parts of our page header, namely meta tags and style sheets.
Meta tags are optional tags which tell the story of the web page. They can say things such as who wrote the page, how the page was written (esp if you used things like MS Word, Wordperfect, Frontpage, etc they will have a tag saying it was their product which created the page), and also contain keywords which tell search engine spiders just what your page is about so they can attempt to classify you in their databases. Manual submission is still your best bet, however, since you have no way of knowing when the spiders will reach your website to collect information. Keep the following in mind, however:
"Some people submit pages that present our spider with content that differs from what browsers will see. We strongly discourage the use of these techniques."
-- AltaVista Spamming Restrictions
Therefore, be honest! For more information, including a form to submit pages to search engines please go here:
http://www.bruceclay.com for Web Design Advice
Now that I've really run off on a tangent, let's get back to meta tags. The first tag we'll insert is the keyword meta tag. As you would expect, this tag tells the reader keywords which describe the page.
<META Name="keywords" Content="html, html help, web page authoring" >The second meta tag we'll insert is called the description meta tag. This is the description of your page that will appear when the search engine displays your page.
< META Name="description" Content="One of the newest pages on the net dedicated to furthering the art of web publishing." >Style sheets are a new innovation to the web. They first appeared as a function of Internet Explorer 3.0 and are currently supported (to varying degrees) by the 4.x and higher web browsers. The purpose of style sheets is to format the appearance of your page without using all the <font> tags that were required in earlier browsers. You can give the various html tags which appear in the body of your web page a more exciting look to them without all the trouble of creating an extremely complicated web page.
For our purposes, we will stick to the simple things style sheets can do that are recognized by most browsers, namely formatting paragraphs for a certain style and appearance.
The type of style sheet I used is contained within tags which look like this:
<style type="text/css"> <!-- and </style> // --> (The comment tags are necessary to hide the style sheet from older browsers)
Now within the tags, we will define the attributes of our web page. Suppose we want to have a page with a tanish background, purple text and indented paragraphs (similar to the one you're looking at!) using 10pt Arial font. To accomplish this, we need to use the following attributes:
BODY {
font-size : 10pt;
font-family : Arial;
background-color : Tan;
}
P {
color : Purple;
text-indent : 2em;
}
This says that the body of our page has a font size of 10pt, it will be of Arial font, and the background will be Tan. Each paragraph in the body will have the additional attributes of purple text and will be indented 2em (about 5 spaces) from the margin. To change the appearance of your page, all you would have to do is just change the attribute in the style sheet to chage the whole page! So if you decided tomorrow that you wanted green paragraphs, then all you would have to do is change the Purple to Green and then you're all set!
For more information on CSS you may go to the Web Developer's Virtual Library or to Webmonkey.With that said, we can close out the head of our page by typing in </head> and our page should now look as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">We may move on to the body of the page. To begin type <body> after </head> on the page.
The body of a web page usually consists of paragraphs, images, links, certain types of javascript or java applets for special effects and other items which make your page look unique and nice.
Here are some examples of paragraphs:
This is a sample paragraph.
Here is another.
Remember, to put the <p> and </p> tags there or else run the risk of strange behavior on the page!
The html for the above paragraphs is as follows:
<p> This is a sample paragraph </p>
<p> Here is another. </p>
Images can be placed on a page using the tag
< img src = "flame.gif" alt="flaming picture" >In action this tag displays: 
The alt=" " part is optional. It is a courtesy for blind/sight impared readers (the TTY reader reads the alt description so they'll know what the picture is) and for people with browsers that don't support pictures (or have pictures disabled) such as lynx.
Links: For each link you want to have type the following:
<a href="mypage.htm"> Text to describe the link </a>NOTE: If you are linking to someone else's page or to one of your own pages that is located in a separate folder or website, replace "mypage.htm" with something of the form "http://www.mypage.com" to have the desired results. This is also true for the < img src = " " > tag. As the internet is constantly changing, be sure to check all links periodically to make sure they are still valid.
Many people like to place their e-mail addresses at the end of their pages so that they might recieve commentary about their work. This is done with a special version of the anchor reference (<a href=" ">) tag.
<a href="mailto:[email protected]">some words to describe me! </a>After you are finished with the body of the web page, it is time to close all the tags to signify the end of the web page as follows:
</body>And now, let us review our final product. Your web page should now look someting like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">To finish, now save your page as "somename.htm" or as "somename.html" (these are equivalent) and follow your web page hosting service's instructions for uploading pages.
This concludes our lesson for the day. I hope this helps everyone out there beginning their trek down the road of writing for the information superhighway. Any questions or comments? e-mail me
You are visitor #