Chris's HTML Tutorial Center Section 1- Basic HTML

Basic HTML

Section 1- Basic HTML

Ready to enter HTML land? Put on your suit, grab your briefcase, and lets get ready to rumble! After reading through this section, you will have created your first web page- honest!

Introduction to HTML
Creating your first web page
Adding a background to your document

-Introduction to HTML

HTML is a markup language used by all web browsers in determining how to display a web page. It consists of simple text (content), plus tags. Tags represents the essence of HTML; whenever you want to make your text bold, insert an image or table, add music to your page, you use tags. Tags are special codes that wrap around various content to affect the content. Lets see an example of a tag:

<b>

The above is the bold tag, and when wrapped around text, makes the text appear bold!

Notice that there is a </b> tag attached at the end of the content. This is the bold tag's closing tag, and it tells the browser- "Hay, I want bold text only up to that point!" Most tags have a complimentary closing tag, as you will see as we trottle along.

HTML is essentially a bunch of tags with even more text. Once you learn the syntax of these tags, you can call yourself a HTML expert!

-Creating your first web page

Now that you have a vague idea of what tags are, you're ready to learn about the basic tags that make up a basic web page. Are you ready to create your very first web page?

The below lists the complete syntax used in creating a very basic web page, with only the text "Welcome to my first homepage" on it:

<html>
<head>
<title>Welcome!</title>
</head>
<body>
Welcome to my first homepage!
</body>
</html>

Go ahead. Open up your text editor, type the above, and see what it looks like in your browser. You'll see a blank page with the title "Welcome!" on the title bar, and the simple line of text "Welcome to my first homepage" sitting in the main browser area. The parts in bold are the tags used in this page. Notice their structure and position in the document. Lets now describe their role in a document:

<html></html>	Specifies that this is an HTML document. All html documents begin and end with this tag.
<head></head>	Creates a container for meta information, such as the document's title, keywords and description info for search engine crawling, etc to be added to the document.
<title></title>	Creates a "title" for the document. Anything you add inside this tag, the browser displays it in the title bar.
<body></body>	Creates a container for the document's content (text, images etc). This is where all the "viewable" content will be inserted.

99% of web documents on the web, small or large, simple or complicated, all contain at least the above tags. They make up the framework of any document. Take another look at the definition of the <body> tag- most of the action in html will take place inside it, since the <body> tag contains all of the document's viewable content.

-Adding a background to your document

The first thing most beginner webmasters want to do with their web page is to add a background to it, whether it be a background color or image. By default, a document with no background appears gray (or white in newer browsers) in the background. That's easy to fix. Lets begin by adding a background color. To add a splash of color to your document, add the following code inside the <body> tag itself:

where xxxxxx is the hex code for the color you want. "Why can't I just use the name of the color", you ask. Well, ask the creators of HTML that question! Anyhow, here's a small chart of the hex code for some common colors:

black	#000000
white	#FFFFFF
blue	#0000FF
yellow	#FFFF00
red	#FF0000
green	#008000
lime	#00FF00
silver	#C0C0C0

For example, the below gives our document a background of black:

Now that you know how to give your doc a background color, lets move on to learn how to give it an image as well. For illustration, lets first bring in a nice image we'll be using:

backgr15.jpg (2119 bytes)
backgr15.jpg

To utilize the above image as the background, use the following syntax:

Many authors like to give their document BOTH a background color, and an image as well. This way, while the image has yet to come through from the server, surfers will see a background color in the meantime: