World's Shortest HTML Tutorial?
|
|
HTML is a coding language that creates webpages. It sounds hard, but it's not. To write a webpage using HTML, all you need is a text editor. A text editor is just what it sounds like... a program that lets you write and edit plain text.
Don't worry! If you have a computer, you already have a text editor. For Windows users, go to the Start menu, then Programs, then Accessories, and select Notepad. For Mac users, open Finder, go to your Applications folder and open TextEdit.
Now copy and paste the green lines below into the empty page that appeared when you opened your text editor:
<HTML>
</HTML>
These are "tags". Most tags come in pairs. The first one tells your browser (Internet Explorer, Firefox, Safari...) to start something. The second one tells your browser to stop it.
These particular tags tell your browser to start & end an HTML document (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 you'd like search engines and browsers to know about your page. Copy and paste these tags between your <HTML> tags:
<HEAD> <TITLE>type your page title here</TITLE>
Replace the red text with your own title. The title should be descriptive and no longer than 70 characters total, including spaces.
<META NAME="DESCRIPTION" CONTENT="type a description of your website here">
You have a little more room to describe your page in the description tag. Make it easy to read, because this is how many search engines will present your page in their search results, and you want people to click on your link. 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">
Keywords are the words that most apply to your webpage. For example, this webpage would use keywords like "learn" and "html". The keyword tag was originally intended to help search engines categorize webpages. However, it's not used much anymore.
You may want to include keywords for those few times when they're still used.. Every little bit helps when you're trying to bring visitors to your page! Use no more than 874 characters total; much less if possible. Type in lowercase without punctuation. Don't repeat words more than twice.
<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 that you can list.
</HEAD>
This ends the "head" section of your HTML document.
Notice that tag sets are mirror images of eachother. For example, these tags are in the right order:
<TAG1><TAG2> text text text</TAG2></TAG1>
These tags are not:
<TAG1><TAG2>text text text </TAG1></TAG2>
TAG1 came first, which means it should also be last. Also, the inner pair of tags must be closed before you can close the outer pair.
Now you can start the document's body, which is what your visitors will see:
<BODY BGCOLOR="white">
"bgcolor" sets the page's background color.
<P>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, like this:
<P ALIGN="CENTER">paragraph text</P>
The BR tag creates a line break. No closing tag is needed:
This is a <BR> Be aware that including a break tag just before a closing paragraph tag will keep the break tag from working. If you want to add a break right after a paragraph, put your break tag after the closing paragraph tag. A number of HTML editors (software) put the break tag in the wrong place, which can cause confusion. Like the break tag, image tags also have no closing tag. The image's "path" tells a browser where to find it. This would be somewhere on your web host's server. For example, if all your images are in a folder called images, your image tag would look like this: <IMG SRC="/images/picture.jpg" width="the width of the image in pixels" height="the height of the image in pixels" alt="short description of the image for the visually impaired"> You can use the ALIGN property to make an image display in the center or to the right on your page, just like you can do with a paragraph. When you want to link to another page or file (like an image), you use the HREF tag: <A HREF="http://other_website.com/other_page.htm">link description</A> You might want to make some of the words in your text stand out: <STRONG>These tags display words in bold face.</STRONG> When you're finished creating your page's content, close the tags that are still open. At the very least, these closing tags should be: </BODY> Save your document with an ".html" or ".htm" extension. (They're the same, so it's up to you.) Open your new webpage with your browser to see how it looks. When everything's ready, upload your page to your web host so that internet users can see it. Your web host may require that your main page have a particular name, like "index.html" or "home.html". The names of the other pages are up to you. There are more HTML tags, but you can create most of what you want with the information above. When you're ready to learn more, check out our HTML tutorials.
Very short poem.
</HTML>
