Very Basics of HTML

Rexy93's Avatar author of Very Basics of HTML
This is an article on Very Basics of HTML in Web Design, HTML And CSS Tutorials.
Rated 5.00 By 1 users

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 <!-- and 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.
like this
Izaan's Avatar, Join Date: Oct 2007
Skilled contributor
Nice one.
Rexy93's Avatar, Join Date: Oct 2007
Go4Expert Member
Thanks Izaan. I am making a advanced version once I get all my assignments out of the way.
Nadr's Avatar, Join Date: Oct 2007
Ambitious contributor
goody
Safari's Avatar, Join Date: Oct 2007
Ambitious contributor
Too basic but nicely explained.
coderzone's Avatar, Join Date: Jul 2004
Team Leader
Quote:
Originally Posted by Safari
Too basic but nicely explained.
Exactly.
elite_chaos's Avatar, Join Date: Oct 2007
Newbie Member
If anyone ever has any questions with html please feel free to contact me.
I would be glad to help you.
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Quote:
Originally Posted by elite_chaos
If anyone ever has any questions with html please feel free to contact me.
I would be glad to help you.
Unless you stop spamming the forums your account could get banned. I have already deleted your 5 posts which were spam.
semix's Avatar, Join Date: Jul 2007
Newbie Member
it´s realy good expleined...for noobs ...like me
rekha11's Avatar, Join Date: Jan 2008
Go4Expert Member
HTML:Hypertext markup language.....
Hypertext is an ordinary text which is dreessed up ith extra features
Markup means you can create the links etc
Language means like other Language it is also a language