An Introduction to HTML -- LiveWire Tech Forums

[SIZE=7]Introduction to HTML[/SIZE]

HTML stands for Hyper Text Markup Language and is the most commonly used language on the web. It consists of markup tags and tells a browser how to display text. This the basic structure of an HTML document:

Code:
<html>
<head>
<title>Title_of_website</title>
</head>
<body>
This is the body of the document. <u>This text is underlined.</u>
</body>
</html>

The first tag in your HTML document is <html>. This marks the start of the HTML Document. </html> marks the end of it. The text within the header tags (<head> and </head>) does not appear in your browser. It is used for code that will change the look or function of the website as a whole. The text in-between the <title> tags will be displayed at the very top left of your browser. Everything found between the <body> tags is, as the name implies, the body of your HTML Document. This is what will show in your browser. The text located between the <u> tags will become underlined.

[SIZE=4]How do I use HTML?[/SIZE]

Well, you could either use HTML on your own computer or on a testbed. If you want to use a test bed, try J Marshall HTML Test Bed.

The following will show you how to try HTML on your own computer. Note that this is for Windows only.
Create a new text document on your desktop. This can be done by right clicking -> New -> Text Document. Open it and paste the above HTML into it. Save it by going File -> Save As. Save the page as "something.html". Close it and open it in a browser (by double clicking on it). Now, your browser will display the page.

If you are browsing a web site and suddenly wonder something along the lines of "How did they do that?", there is an easy solution at hand. Simply right-click and choose View Page Source (on firefox) or View Source (on Internet Explorer). The short cut is Ctrl + U. This will allow you to see the source code that was used to create the web site. This is a great way to learn. Although it is a bad habit to try and memorize HTML tags, there are still a few you need to learn.

[SIZE=4]Bold[/SIZE]

Sometimes you might want to make text more visible because you need them to be more important in the context etc. Then you should make them in bold. To make text in bold, simply but bold tags around it like this:

[SIZE=4]Italic[/SIZE]

Another powerful way of making text stand out as an important word is by making it italic. To make text italic, just put italic tags around it like this:

<i>This text is italic</i>

[SIZE=4]Underlined[/SIZE]

As you have seen in the example above, to make something underlined:

<u>This text is underlined</u>

[SIZE=4]Headings[/SIZE]

Perhaps the most important thing in a document is headings. This separates sections from each other and makes it easy to find what you are looking for. Headings are defined with the <h1> to <h6> tags. The higher the number the smaller the heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

[SIZE=4]Paragraphs[/SIZE]

To space out the different sections of a website, paragraphs are often used. This allows the user to easily read text and find what he or she is looking for. To make a paragraph, do this:

<p>This is a paragraph</p>

[SIZE=4]Line Breaker and Horizontal Rule[/SIZE]

A line breaker and a horizontal rule is both used to separate sections from one and another. They both use one tag only, but in the future, single tags must be closed as well, so that is what will be shown here.

A line breaker is used if you want to end a line, but not end a paragraph. Using the line breaker tag, the current line will break and another will begin. The line breaker tag looks like this (notice the space before the slash):

<br />

A horizontal rule on the other hand, will insert a line in your page. This can be a useful tool to separate sections.The tag looks like this (notice the space before the slash):

<hr />

[SIZE=4]Images[/SIZE]

If you want to display an image, you should use this HTML code:

URL_to_image can be http://img364.imageshack.us/img364/893/b4nn3rhdgf6.jpg and so on.

[SIZE=4]Alignment[/SIZE]

Although you are required to use CSS if you want to use images in the newest "version" of HTML (XHTML 1.0 Strickt) you can use the following for any other "version" of HTML.

Left:

<div align="left">Item_that_you_want_to_be_aligned_to_the_left_here</div>

Center:

<div align="center">Item_that_you_want_to_be_aligned_to_the_left_here</div>

Right:

<div align="right">Item_that_you_want_to_be_aligned_to_the_left_here</div>

[SIZE=4]Links[/SIZE]

The HTML for the most basic hyperlinks looks this:

<a href="URL">Link Description</a>

Where URL is the URL (or "address") to the website you want to link to and "Link Description" is the text that you want to be displayed.

Let's say that you would want to create link to Google with the description "Search with Google!"�, your code would look like this:

<a href="http://www.google.com"�>Search with Google!<a>

Which would give the following result:

Search with Google!

[SIZE=4]Font size[/SIZE]

There is no valid (X)HTML for font size, so we need to use (inline) CSS:

<span style="font-size: 150%">Text_that_you_want_in_another_size_here</span>

The above will make the text 150% bigger than it normally would be. The number can be just about any percentage.

[SIZE=4]Font color[/SIZE]

There is no valid (X)HTML for font size, so we need to use (inline) CSS:

Change red to the color you want to have.

[SIZE=4]Background color[/SIZE]

The easiest way to add a background color is simply to add bgcolor="color" to your body tag like this:

Code:
<body bgcolor="red">

The above will give your website a red background color.

-or-

However, there is no valid (X)HTML for background color either, so we need to use CSS again!

Code:
<html>
<head>
<title>Title_of_website</title>
<style type="text/css">
body
{
background-color:red;
}
</style>
</head>
<body>
Content of your website here
</body>
</html>

The above code will make the background color of your website red. Just change red to the color that you want your background color to be and it will.

[SIZE=4]Background image[/SIZE]

The easiest way to add a background image is simply to add background="URL_to_image_here"> to your body tag like this:

Code:
<body background="http://www.w3schools.com/html/background.jpg">

The above will give your website a the background image that can be found by clicking this link http://www.w3schools.com/html/background.jpg.

-or-

However, there is no valid (X)HTML for background image either, so we need to use CSS again!

Code:
<html>
<head>
<title>Title_of_website</title>
<style type="text/css">
body
{
background-image: url(URL_to_image_here);
}
</style>
</head>
<body>
Content of your website here
</body>
</html>

where URL_to_image is the URL (or "address") to your image.

[SIZE=4]Some final advice[/SIZE]

Always close tags! Sometimes you can just use the start tag of an element and it will work just fine. This is a very bad habit as it can lower the functionality of your website. In a not-so-distant future, open tags will not be allowed at all. People laugh at other people not using valid HTML.
Use lowercase HTML and not UPPERCASE.
Use Correct Nesting! If you want to make a text both underlined and bold, make sure that they come in the right order. <b><u>text</u></b> is correct while <b><u>text</b></u> is not.
NEVER use the HTML to display your email, becuase bots crawl websites collecting them and adding them to mailing lists for spam and/or virus and so on. Use and image or something [at] nothing [dot] com.

(Edited by Moridin at 3:32 pm on July 25, 2006)

(Edited by Moridin at 11:48 pm on July 25, 2006)

-------
"The larger the island of knowledge, the longer the
shoreline of wonder" (Ralph W. Sockman)

730 users online 186553 members 1179 active today Advertise Here