Go4Expert - Very Basics of HTML

Basics of HTML

G’day mates during this tutorial I will teach you the basics of HTML.

Frequently Asked Questions

What does HTML actually stand for?
HTML stands for Hyper Text Markup Language.

Where can I learn HTML?
You can learn HTML on a variety of websites. Some are easy to follow and some very easy. This guide I will try to make it as basic as possible. Most browsers will validate HTML for you, that is another good way of learning.

How can I edit HTML?
You can edit HTML in a basic text editor, such as Wordpad or Notepad.

When can I start learning?
Right now!

Introduction

A HTML document is made up of small markup tags which the browser you are using reads those tags then preview the results. When you are saving a HTML document you must add .htm or .html to the end of it for your browser to read it.

I will teach you the basic markup tags and the correct place to use them and what there used for. In all my examples you will see the markup tags <html>, <head>, <body> and <title>. If you want a basic understanding of them please visit this tutorial by Sanskruti.

Some Basic Tags

Making a document
Ok let’s make your first document. Let’s type this in a text editor such as notepad.

HTML Code:

<html>

<head>

<title> My first HTML document ?</title>

</head>

<body>

This is my first document using HTML.

</body>

</html>

Save it as firsthtml.html or firsthtml.htm either one will work.

Headings

Headings are defined with the <h1> to the <h6> tags. The <h1> tag means it is the most important heading as for <h6> it is least important.
Let’s see how to use these.

HTML Code:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

To see what it looks like in a browser edit your HTML document and make it look like this.

HTML Code:

<html>

<head>

<title> My first HTML document ?</title>

</head>

<body>

This is my first document using HTML.



<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

</html>

Save it then open the file in your browser. As you can see <h1> has the biggest font and <h6> has the smallest.

The paragraph tag

How to I define the paragraph tag?
You can define the paragraph tag using the <p> and </p> tags.

What is the paragraph tag used for?
It used to make a paragraph in your HTML document. It adds a space before your last </p> tag and a space after the </p> tag.

To add a paragraph tag to your document, try adding a sentence or a few lines within the paragraph tag.

HTML Code:

<html>

<head>

<title> My first HTML document ?</title>

</head>

<body>

This is my first document using HTML.



<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>



<p>This is using the paragraph tag. This is using the paragraph tag. This is using the paragraph tag. This is using the paragraph tag. This is using the paragraph tag. This is using the paragraph tag.</p>

</body>

</html>

Save it then refresh your current page in your browser. If you closed it just re-open it.

Adding a line break

How do I define a line break?
You define a line break using the <br> tag.

What is a line break used for?
A line break is added when you want to start a new line but you don’t want to start a new paragraph. It will force HTML to start a new line.

To force a line break add the <br> tag whenever you want a new line. As shown below.

HTML Code:

<html>

<head>

<title> My first HTML document ?</title>

</head>

<body>

This is my first document using HTML.



<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>



<p>This is using the paragraph tag. <br> This is using the paragraph tag. <br>This is using the paragraph tag. This is using the paragraph tag. <br>This is using the paragraph tag. Thi<br>s is using the paragraph tag.</p>

</body>

</html>

Comments

How do I define a comment?
You define a comment between the  tags.

What is the comment tag used for?
As long as you add text between the comment tags the browser will ignore it. This is very useful as if you add a comment it is easier to find later on when you are editing your document.

Adding a comment:

HTML Code:

<html>

<head>

<title> My first HTML document ?</title>

</head>

<body>

This is my first document using HTML.



<!-- These are headings -->

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>



<p>This is using the paragraph tag. <br> This is using the paragraph tag. <br>This is using the paragraph tag. This is using the paragraph tag. <br>This is using the paragraph tag. Thi<br>s is using the paragraph tag.</p>

</body>

</html>

Quick Notes

If you want to add a line or separate loads of information you can add a <hr> tag which adds a bevelled line across your page. With the markup tags they can be written in capital or small letters as HTML is not case sensitive. It is highly recommended that type your tags in small letters since the next version of HTML (XHTML) requires you to type in small letters.

That is the very basics of HTML. In my next guide I will explain a few more tags and get more advanced just not to advanced. I kept this one short so you can get use to them before I go another step.