Click here to go to our home page.

World's Shortest HTML Tutorial?
Webpage Structure
Meta Tags, Content Tags

 


AddThis Social Bookmark Button

HTML is the language that most webpages are written in. You will need a text editor to write HTML. A text editor is just what it sounds like... a program that lets you write and edit plain text.

If you use a Windows computer, you can find a text editor by going to the Start menu, then Programs, then Accessories, and selecting Notepad. Open your text editor (Notepad), then copy and paste these lines into it:

<HTML>

</HTML>

These are "tags". Most tags come in pairs. The first one tells your browser to start something. The second one tells your browser to stop it.

These particular tags tell your browser to start & end an HTML document, which is also called a "webpage". All the details of the webpage go between these two tags.

Like human beings, HTML documents have a body with a head at the top. The head contains information that search engines and browsers like Internet Explorer need to learn about your page. Place these tags inside your <HTML> tag pair:

<HEAD> <TITLE>type your page title here</TITLE>

The title should be no longer than 70 characters total, including spaces.

<META NAME="DESCRIPTION" CONTENT="type a description of your website here">

The page description should be no longer than 150 characters, including spaces.

<META NAME="KEYWORDS" CONTENT="type words that people might use to search for your page here">

For keywords, use no more than 874 characters total; much less if possible. Type in lowercase without punctuation. Don't repeat words more than twice, or different forms of the same word. For example: "html tutorial tips tutorials short".

<META HTTP-EQUIV="pragma" CONTENT="no-cache">

This tells browsers to get the newest version of your page.

<META NAME="revisit-after" CONTENT="21 days">

This tells search engines that you'd like them to come back and look at your page for any changes. 21 days is the shortest period of time you can list.

</HEAD>

This ends the "head" section of your HTML document.

Notice that tag sets are mirror images of eachother. For example, <TAG1><TAG2> </TAG1></TAG2> is wrong, because TAG1 came first, which means it should end last. <TAG1><TAG2> </TAG2></TAG1> is correct. The inner pair must be closed before you can close the outer pair.

Now you can start the document's body, which is what your visitors see:

<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" BGCOLOR="white">

"bgcolor" sets the page's background color. The rest of the BODY tag properties above make sure that your webpage will start in the upper left corner of the browser window.

<P ALIGN="CENTER">paragraph text</P>

The P tag starts and stops a paragraph. By default, paragraphs align to the left margin. If you want your paragraph to be centered, or aligned to the right, you can add the ALIGN property.

<P>This is a <BR>
Very short poem.</P>

The BR tag creates a line break. No closing tag is needed.

<IMG ALIGN="RIGHT" SRC="path to where image is" width="number of pixels the image is wide" height="number of pixels the image is high" alt="short description of image for the visually impaired">

Image tags also have no closing tag. The image's "path" tells a browser where to find it. This would be somewhere in your website directory, which is on your web host's server. For example, if all your images are in a folder called images: "/images/picture.jpg".

<A HREF="http://other_website.com/a_page.htm">link description</A>

The A HREF tag creates a link to another webpage.

<I>These tags display words in italics.</I>

<B>These tags display bolded words.</B>

When you're finished creating your page's content, close the tags that are still open. These should be:

</BODY>
</HTML>

Save your document with an ".html" or ".htm" extension. Open your new webpage with your browser to see how it looks. When you're ready to put your page online, your web host may specify a particular name for your main page (also known as your "index" page). The names of the others are up to you.

There are other HTML tags, but you can create most of what you want with just these. When you're ready to learn more, check out Webmaster In A Week and our HTML tutorials.



AddThis Social Bookmark Button

Report a broken link    Go to top of page

© Copyright 1997-2008 by Knowledge Hound, LLC. All rights reserved.