Marketing With Spirit promotional materials

HTML Tutorial

In order to be effective on the web, you have to know SOMETHING about HTML. Here is a brief tutorial that will help you in your cutting and pasting activities.

The best thing to do when writing HTML code is use a simple text editor like Notepad. However, you can always use specialized HTML programs like Microsoft Front Page. These programs have an intuitive interface which makes it easier to use. But you still need to learn some HTML regardless!

If you want the real skinny, go here: http://www.w3schools.com/html/default.asp
for a complete overview of HTML.

(1) The Header

All HTML documents have to have a header. This is the very first thing you put on your web page, at the very top. Here's the one I use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

What does this code do? It tells the browser what version of HTML you are using so that the browser can correctly display your web pages. This particular code tells the browser that you are not an expert in HTML, so improvise!

What is a tag?

A tag is a word in HTML. It always begins with a "<" and ends with a ">". For instance, <html> is a tag that tells your browser that what follows is HTML information.

All HTML tags have a begin tag and an end tag. In between is the HTML code. A begin tag looks like this: <html> An end tag looks like this: </html>. The only difference is that the end tag has a "/" in it.
Almost every HTML statement has to have a begin tag and an end tag! If you forget the end tag, your web page won't look like you intended it to. That's why it is always a good idea when writing a tag to write both the begin and end tags one after the other, like this:
<html>
</html>.

Then you can write your HTML in between the tags.

(2) The structure of all web pages

"The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document.

The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window.

The text between the <title> tags is the title of your document. The title is displayed in your browser's caption.

The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags, for example, will be displayed in a bold font."

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

This is the basic structure of ALL web pages!

The next thing you need is your <meta> tags. These tags describe your page for web crawlers and search engines, and what the keywords of your web site are. The better you can identify your audience, the better your keywords will be. Here's an example:

The <meta> tag is one of the few tags that does not need to be closed.

Successful internet marketers spend LOTS of time thinking about what they will put in the "description" and in the "keywords" section. You should too! To change what I have, fill in your own description and keyword information after the content="

Then there is the title of your web page. This is what is displayed in the little caption bar at the top of your browser window. It always goes inside the <head> </head> tag.

You can make it anything you like:

<title> My Web Page </title>

(3) Now your page looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Title of page</title>
</head>

<body>

Your "Marketing With Spirit" code goes here

</body>

</html>

Between the <body> and </body> tags is where you place the code you copy from the Marketing With Spirit website.

(3) is the standard HTML template you will use for ALL of your Marketing With Spirit web pages. Every time you want to make a new page, just paste this code into Notepad. Insert your copied text between the <body> and </body> tags and you have a web page! Don't forget to name the file "yourpage.html"

All web pages must have the ".htm" or ".html" extension at the end.

You now know more than most people on the internet about HTML and web pages.

(4) A helpful trick to copying web pages

If you see a web page you really like, you can copy it and build your own design around it (use File - Save As). That's how a lot of really good web pages are constructed. The page will probably be copyrighted, so please don't plagiarize another's work. Nevertheless, you can get some great ideas by looking at what others have done.

To copy the complete HTML code for a web page in your browser, click on "View" and then "Source," or "Page Source." Viola! You now have the code for a complete web page.

Return to Promotional Materials Page