HTML Basics

	Sign In Sign-Up

HTML Basics

Web pages are written in "HyperText Markup Language" or "HTML".
It's very easy to learn.
Even if you plan to use a web authoring tool that requires no knowledge of HTML, we recommend learning the basics anyway.
Doing so gives you complete control over your web pages.
HTML (Hypertext Markup Language) consists of plain text and some commands called "tags".

It is extremely easy to learn.
Once you know it, you can make web pages in any Web authoring program or in a text editor like Windows Notepad or Mac SimpleText.
You can do it!
What is HTML?
Without HTML, there would be no World Wide Web.
It's the backbone of every page you see as you surf the Web.
So what exactly is it? HTML is an acronym that stands for HyperText Markup Language.
Although some people do call HTML a programming language, strictly speaking, it isn't.
As a markup language, it consists of a series of tags or codes that are embedded in a document that describe how the page should look when viewed by a browser.
HTML is easy to learn and easy to use.
Using this tutorial, you'll be able to create basic Web pages after just a couple of hours by following our step-by-step examples, Of course, the more time you spend expanding your knowledge of HTML, the better your Web pages will look, but you can learn as you create.
In the exercises that follow, you'll learn the basics of HTML by creating two actual Web pages.
To follow the lessons, we suggest you use the examples exactly as they are presented.

What do I need to write HTML?
The good news is you already have everything you need to learn HTML and begin building basic Web pages.
You don't need to purchase any special editor or HTML authoring application.
Everything you need is included in your computer.
A Web page begins life as a simple text file.

The only tool you'll need to create one is a text editor or word processor that can output ASCII or plain text files.
Chances are good that your favorite word processor will work just fine.
On a PC, you can use Notepad, Wordpad, MS Word, WordPerfect, etc.
On a Macintosh system, you can use Simple Text.
The only other tool you'll need is a Web browser to view your work.
As you build your Web page in your text editor, you can view the results of your work instantaneously by loading the file into a browser and get instant feedback as to how your work is progressing.
You can use a standalone browser or browser built into your AOL software.
Make sure that the name of your web page ends in .htm or .html then use AOL's or IE (Internet Explorer) FILE > OPEN and your page will be opened into the built-in AOL browser.
Armed with only these two tools, you can create Web pages as simple or complex as you like.
Of course, if you want to add content such as graphics, sounds, animations, videos, etc., you may need to get specialized tools or applications to create them.
We explore graphics and multimedia in other tutorials.
For now, we're going to begin with text-only HTML pages.

What are HTML Tags?
Learning how to build Web pages is essentially just learning how to use HTML tags.
Tags are like instructions that tell the browser what to do. The structure of every tag is identical; each consists of a left-angle bracket (< or "less than" sign), a tag name, and a right-angle bracket (> or "greater than" sign).

Most tags occur in pairs that contain the content the instructions act upon, hence they are known as containers.
Confused? Don't be -- the following example should help.
Let's say you want to place the word Hello on a Web page so that appears centered on the page.
You would do the following:

<.CENTER>Hello<./CENTER>***

The first tag, <.center>, tells that browser what follows is to be centered on the page, and the second tag, <./center>, tells that browser the instruction is complete.
Although much more could be said about tags, the only way to really learn about them is to actually use them.
So now we'll create a basic a Web page and dissect it tag by tag.
***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>.

The Anatomy of an HTML document: Titles
Now that we have the basics out of the way, let's jump right in and create our first document, or Web page.
Launch your text editor and type in the following HTML code just the way you see it here. (You can even cut and paste it into your editor.)

<.HTML>*** <.HEAD> <.TITLE>My First Web Page<./TITLE> <./HEAD> <.BODY> Welcome to my first Web page! <./BODY> <./HTML>

This example, which uses only four tags, is about the most basic HTML page you can create.
After you have typed the HTML code for this sample page in your text editor, save it to your hard drive.
You should follow the naming convention for HTML files by appending the extension .htm or .html to the end of the file name.
Name your file mypage.htm or mypage.html. Use AOL's FILE > OPEN while online or launch your browser (you don't need to be connected to the Internet) and load the file you just created.
You should see the title, My First Web Page, displayed at the top of your browser's window, and the single line of body text ("Welcome to …) displayed within the browser.
Since this is such a basic page, there's little that can go wrong, but if you experienced a problem, there are two possible causes.
First make sure the code matches the example above.
Then be certain you saved the HTML file as ASCII or plain text. Go over your HTML carefully and compare it with our example above.
You should be able to track down any problem.
Congratulations -- you've just built your first Web page.
Now let's take a closer look at the HTML to see what's going on.
Notice the first tag <.HTML> .
This tag tells that browser what follows is a Web page.
Every HTML document will begin with this tag, and end with the <./HTML> tag.
The next tag, <.head> tells the browser what immediately follows is the heading section of the document.
The heading section holds information about the Web page such as the page's title and key words used by search engines to find your page.
Since this is a very basic page, we'll only use it to indicate the title of our Web page.
We've done that by inserting the following line within the header section:

<.TITLE>My First Web Page<./TITLE>
Whatever text you place within the <.title>...<./title> tags will be displayed at the top of the browser's window, not in the actual page.
The title is also what appears in any browser's bookmark or favorites section, as well as in a search engine's listing when the page is found.
A title can be as long as you like, but in practice, you should limit its length to 60 characters or less.
It's best to keep it brief and representative of your page's content.
***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>.

The Anatomy of a basic HTML document: Body
Now on to the body section:

<.BODY> Welcome to my first Web page! <./BODY>
the browser would still display it as a single line of text and not with line breaks as displayed above.
You will learn more advanced text formatting options later in this tutorial.
For now, let's stick with this basic page.
Notice we closed the body section with the <./body> tag, then finished off the page with the <./HTML> tag, so the browser knows the page is complete.
That's it! Although most Web pages will be far more complex than this, they all follow this basic structure.
Learning the basic structure of a typical HTML page opens the doors to creating any kind of Web page imaginable.
Once you've got this sample Web page working, go ahead and change the title and body text, resave the file, and reload the page in your browser.
See how your changes are reflected instantly in the browser's window?
You really can't break anything, so don't be afraid to experiment.
Once you're comfortable with this simple page, you can continue with this tutorial and learn how to go beyond the basics.
(If you've made any changes to the sample page, restoring it to the example above will make this tutorial easier to follow.)
***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>.

Top of page

Web pages are written in "HyperText Markup Language" or "HTML". It's very easy to learn. Even if you plan to use a web authoring tool that requires no knowledge of HTML, we recommend learning the basics anyway. Doing so gives you complete control over your web pages. HTML (Hypertext Markup Language) consists of plain text and some commands called "tags".
It is extremely easy to learn. Once you know it, you can make web pages in any Web authoring program or in a text editor like Windows Notepad or Mac SimpleText. You can do it! What is HTML? Without HTML, there would be no World Wide Web. It's the backbone of every page you see as you surf the Web. So what exactly is it? HTML is an acronym that stands for HyperText Markup Language. Although some people do call HTML a programming language, strictly speaking, it isn't. As a markup language, it consists of a series of tags or codes that are embedded in a document that describe how the page should look when viewed by a browser. HTML is easy to learn and easy to use. Using this tutorial, you'll be able to create basic Web pages after just a couple of hours by following our step-by-step examples, Of course, the more time you spend expanding your knowledge of HTML, the better your Web pages will look, but you can learn as you create. In the exercises that follow, you'll learn the basics of HTML by creating two actual Web pages. To follow the lessons, we suggest you use the examples exactly as they are presented.
What do I need to write HTML? The good news is you already have everything you need to learn HTML and begin building basic Web pages. You don't need to purchase any special editor or HTML authoring application. Everything you need is included in your computer. A Web page begins life as a simple text file.
The only tool you'll need to create one is a text editor or word processor that can output ASCII or plain text files. Chances are good that your favorite word processor will work just fine. On a PC, you can use Notepad, Wordpad, MS Word, WordPerfect, etc. On a Macintosh system, you can use Simple Text. The only other tool you'll need is a Web browser to view your work. As you build your Web page in your text editor, you can view the results of your work instantaneously by loading the file into a browser and get instant feedback as to how your work is progressing. You can use a standalone browser or browser built into your AOL software. Make sure that the name of your web page ends in .htm or .html then use AOL's or IE (Internet Explorer) FILE > OPEN and your page will be opened into the built-in AOL browser. Armed with only these two tools, you can create Web pages as simple or complex as you like. Of course, if you want to add content such as graphics, sounds, animations, videos, etc., you may need to get specialized tools or applications to create them. We explore graphics and multimedia in other tutorials. For now, we're going to begin with text-only HTML pages.
What are HTML Tags? Learning how to build Web pages is essentially just learning how to use HTML tags. Tags are like instructions that tell the browser what to do. The structure of every tag is identical; each consists of a left-angle bracket (< or "less than" sign), a tag name, and a right-angle bracket (> or "greater than" sign).
Most tags occur in pairs that contain the content the instructions act upon, hence they are known as containers. Confused? Don't be -- the following example should help. Let's say you want to place the word Hello on a Web page so that appears centered on the page. You would do the following: <.CENTER>Hello<./CENTER>* The first tag, <.center>, tells that browser what follows is to be centered on the page, and the second tag, <./center>, tells that browser the instruction is complete. Although much more could be said about tags, the only way to really learn about them is to actually use them. So now we'll create a basic a Web page and dissect it tag by tag. *We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>.
The Anatomy of an HTML document: Titles Now that we have the basics out of the way, let's jump right in and create our first document, or Web page. Launch your text editor and type in the following HTML code just the way you see it here. (You can even cut and paste it into your editor.)
<.HTML>* <.HEAD> <.TITLE>My First Web Page<./TITLE> <./HEAD> <.BODY> Welcome to my first Web page! <./BODY> <./HTML> This example, which uses only four tags, is about the most basic HTML page you can create. After you have typed the HTML code for this sample page in your text editor, save it to your hard drive. You should follow the naming convention for HTML files by appending the extension .htm or .html to the end of the file name. Name your file mypage.htm or mypage.html. Use AOL's FILE > OPEN while online or launch your browser (you don't need to be connected to the Internet) and load the file you just created. You should see the title, My First Web Page, displayed at the top of your browser's window, and the single line of body text ("Welcome to …) displayed within the browser. Since this is such a basic page, there's little that can go wrong, but if you experienced a problem, there are two possible causes. First make sure the code matches the example above. Then be certain you saved the HTML file as ASCII or plain text. Go over your HTML carefully and compare it with our example above. You should be able to track down any problem. Congratulations -- you've just built your first Web page. Now let's take a closer look at the HTML to see what's going on. Notice the first tag <.HTML> . This tag tells that browser what follows is a Web page. Every HTML document will begin with this tag, and end with the <./HTML> tag. The next tag, <.head> tells the browser what immediately follows is the heading section of the document. The heading section holds information about the Web page such as the page's title and key words used by search engines to find your page. Since this is a very basic page, we'll only use it to indicate the title of our Web page. We've done that by inserting the following line within the header section: <.TITLE>My First Web Page<./TITLE> Whatever text you place within the <.title>...<./title> tags will be displayed at the top of the browser's window, not in the actual page. The title is also what appears in any browser's bookmark or favorites section, as well as in a search engine's listing when the page is found. A title can be as long as you like, but in practice, you should limit its length to 60 characters or less. It's best to keep it brief and representative of your page's content. We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>. The Anatomy of a basic HTML document: Body* Now on to the body section: <.BODY> Welcome to my first Web page! <./BODY> the browser would still display it as a single line of text and not with line breaks as displayed above. You will learn more advanced text formatting options later in this tutorial. For now, let's stick with this basic page. Notice we closed the body section with the <./body> tag, then finished off the page with the <./HTML> tag, so the browser knows the page is complete. That's it! Although most Web pages will be far more complex than this, they all follow this basic structure. Learning the basic structure of a typical HTML page opens the doors to creating any kind of Web page imaginable. Once you've got this sample Web page working, go ahead and change the title and body text, resave the file, and reload the page in your browser. See how your changes are reflected instantly in the browser's window? You really can't break anything, so don't be afraid to experiment. Once you're comfortable with this simple page, you can continue with this tutorial and learn how to go beyond the basics. (If you've made any changes to the sample page, restoring it to the example above will make this tutorial easier to follow.) ***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>.