Monday, October 13, 2008

HTML Basics

The 3 MAIN tags in your web page are the HTML, HEAD and BODY tags. Here is a basic outline explaining how they should be placed in your web page document:

<html>

<!-- The tag you see above is the START HTML tag. It tells the browser that this is the beginning of your HTML document.
What goes inside the HTML tags? All the other tags! -->

<head>

<!--
The START HEAD tag is added after the START HTML tag.
What goes inside the HEAD tags? Generally, what you place inside the HEAD tags are things that you DON’T want displayed on the browser window. Examples of these are your HTML titles, some JavaScript code and Internal Style Sheets.
-->

</head>

<!-- You must type the END HEAD tag first, before you type the START BODY tag -->

<body>

<!-- The START BODY tag defines the start of the webpage’s body. The webpage’s body is what you see in your browser’s main window whenever you are viewing a webpage. Examples of tags that can be placed inside the BODY tags are: paragraph tags (<p></p>), image tags (<img />), line-break tags (<br />), first heading tags (<h1></h1>), and many more… -->

</body>

<!-- The END BODY tag defines the end of your webpage’s body. -->

</html>

<!-- The END HTML tag is placed at the end of the document. This tells the browser that this is the end of the web page. -->


EXAMPLE:

<html>

<head>

<title>My Webpage</title>

</head>

<body>

<h1>Hello there!</h1>

<p>This is a paragraph.</p>

<img src="myphoto.jpg" />

<p>This is another paragraph. <b>This text is bold.</b></p>

<p>How are you? <i>This text is italicized.</i> Have a nice day!</p>

<a href="page02.html">next page</a>

</body>

</html>


Writing HTML Tags

Most HTML tags come in pairs: a START tag and an END tag.

Example:

<p>This is a paragraph</p>

START tag: <p>

END tag: </p>

Tags are enclosed in ANGLE BRACKETS: < and >

The END tag is just like the START tag except that a backslash - / - immediately follows the open angle bracket - < .

Some HTML tags DO NOT come in pairs. Examples of these are:

<br /> - inserts a line-break
<hr /> - inserts a horizontal line
<img /> - inserts an image


HTML Tag Attributes

HTML tags can have attributes.

What are attributes?
Attributes are add-ons to your HTML tags that allow you to provide additional information or set additional properties to your HTML elements.

Example:

<body bgcolor="blue">

The tag attribute in this example is bgcolor="blue" . It tells the browser that the background color of the web page should be blue.

Attributes always come in name and value pairs: name="value".

The "value" should be enclosed in quotation marks.

Attributes are ALWAYS added to the START tag. NEVER add attributes to the END tag.

One HTML tag can have two or more attributes.

Example:

<a href="page02.html" style="color:green">next page</a>

The attributes in this example are:

href="page02.html" – this tells the browser which page the link should open
style="color:green" – this tells the browser that the color of the text link should be green