Can you believe we are at lesson three already?

By now you should have a HTML document with some nicely formated text.

In this lesson we will learn how to add images and links.

First lets talk about hypertext linking to another file. In order to make this work we need the URL (Uniform Resource Locator) of the file you would like to make a link to. We can’t link to something if we dont know where it is.

Now lets add a link to this site:

Example:

This is a great place to learn HTML

Code:

This is a great place to <a href=”http://www.stcfx.com“>learn HTML</a>

Now when someone clicks on the words learn HTML they will be taken to this site.

Ok now we will learn how to add a link within the same document. This is useful if you have a large document and would like to add links to different parts of it to help users get around.

Example:

This is my document, and this is my text. Now lets jump to another part of my document.

This is more text in my document.

This is where we end up.

Code: 

This is my document, and this is my text. Now lets <a hre=”#jump”>jump</a> to another part of my document.

This is more text in my document.

<a name=”jump”>This is where we end up.</a>

Still with me? Awesome!

Lets add some images. We need some information before we do this; URL of image, hieght and width of image.

Code:

<img src=http://mysite/location/of/my-image.gif height=”200″ width=”200″ alt=”This is my image”>

Looking Good!

Next lesson we will work on color and placement.

In lesson one we learned how to create and set up our basic html document.

Now in lesson two I will show you how to format your page text. Rather than plain old text like this, I will show you how to make your text a bit more attractive.

If you would like to keep your text exactly how you have typed it, you can use whats called a pre-formatted text tag. This will tell the browser to not change your text at all.

The pre-formatted text tags look like this:

<pre></pre>

Now we can also make our text appear bold by using the bold text tags.

<b></b>

If you’d like your text to show as italic text you would use the following:

<i></i>

Moving on now to header tags. These tags are of great use when writing blogs or articles.

As you can see header tags go from 1 being the largest to 6 being the smallest.

Header One

 <h1></h1>

Header Two

 <h2></h2>

Header Three

 <h3></h3>

Header Four

 <h4></h4>

Header Five

 <h5></h5>

Header Six

 <h6></h6>

Now lets look at the paragraph tags. You will use these tags when writing a paragraph of text. The paragraph tags look like this:

<p></p>

If you would like to skip a line in your document you will use what is called a line break. Now the line break tag uses only one tag not an open and close tag. When you want to skip a line in your document you will simply type the following:

<br>

If you would like to separate your documents contents with a line, you will use whats called a horizontal rule. This tag also uses only one tag.

<hr>

If you are still with me you are doing great!

Now from time to time you may like to use a list. There are a few options when it comes to lists.

First we have the ordered (numbered) list:

1. Item One
2. Item Two
3. Item Three

<ol>
 <li>Item One</li>
 <li>Item Two</li>
 <li>Item Three</li>
</ol>

Next we have the unordered list:

• Item One
• Item Two
• Item Three

<ul>
 <li>Item One</li>
 <li>Item Two</li>
 <li>Item Three</li>
</ul>

And thirdly we have whats called a definition list:

HTML

HTML stands for hyper text markup language.

TAGS 

Tags are used within html to tell the browser how to display the documents contents.

<dl>
<dt>HTML </dt>
<dd>HTML stands for hyper text markup language. </dd>
<dt>TAGS  </dt>
<dd>Tags are used within html to tell the browser how to display the documents contents.</dd>
</dl>

The very first thing you need to know about HTML is what HTML actually means.

H - Hyper
T - Text
M - Markup
L - Language

Now that  we know what we are dealing with, we can begin.

HTML is based on tags. We have open tags <x> and close tags </x>.

The very first tag in your HTML document is the HTML tag. This tells a browser what type of document it is and how to read it.

The HTML open and close tags look like this:

<html></html>

Next are the HEAD tags, they look like this:

<head></head>

Followed by the TITLE tags:

<title></title>

And the very important BODY tags:

<body></body>

Now we will put tags together to show and example of a basic html document:

<html>

<head>

<title>My Page Title</title>

</head>

<body>

My Page Contents Go Here

</body>

</html>