HTML Tutorial for beginners

Friday, November 30, 2007

Basic tags - Part 2

Let us assume that we have to write an essay. The following are the some of the items that an essay is comprised of.

A main heading,

Sub headings,

Paragraphs,

Breaks,

Some quotations or proverbs.

Poems.

Writing in the above format is very easy on a paper. But what if we have to display the essay in a web page then how do we write it in the HTML document?

You need not worry about this. HTML has many inbuilt tags which differentiates each item.

For example <p> </p> tag is used to define the paragraph. So we will cover about these tags in the following example.

<html>
<head><title>An Essay</title></head>
<body>

<h1 align="center"> main heading </h1>

<h2 align="left"> paragraph tag</h2>

<p> This is how a paragraph is written. It is written between the p tags. It has a corresponding closing tag </p><p> For every p tag one empty line will be inserted below and above it. h1 to h6 are the tags used for headings. h1 is the largest and h6 the smallest</p>

<h2 align="left">Inserting empty lines in paragraph</h2>

<p> br is the tag used for inserting breaks. It is similiar to our line breaks. It is like pressing the Enter key in the keyboard to go to the next line.In html we insert br tag whenever we want to insert an empty line. br tag does not have any corresponding closing tag</p>

<h2 align="left">quotes or proverbs and comments</h2>

<p> Usually the proverbs or quotes are written inside blockquote tag. For example <blockquote>Live as if you were to die tomorrow. Learn as if you were to live forever.</blockquote>

<h2 align="left">horizontal lines and poems</h2>

<p> For writing poems we can use the pre tag. This tag displays whatever we write in between it in the same way. But paragraph tag cannot do the same thing for us. It counts any number of spaces in between two words as one space only but pre accepts in whatever format we write.For example I had written below a poem in both the p tag and pre tag. We can see that pre displays it in the written format whereas paragraph doesn't.
horizontal lines can be drawn between paragraphs using hr tag.I had drawn a horizontal line between the p tag and pre tag using hr tag</p>

<hr>

<p> The below written in p tag doesn't format the poem.
The woods are lovely, dark and deep,
But I have promises to keep,
And miles to go before I sleep,
And miles to go before I sleep. </p>

<hr>

<pre> The below written in pre tag formats the poem
The woods are lovely, dark and deep,
But I have promises to keep,
And miles to go before I sleep,
And miles to go before I sleep.
</pre>

</body>
</html>

Copy the above example in red color and save it as a html document with .htm or .html extension.Open it in internet explorer and the web page will explain you the above tags in detail.

A recap of the tags used in the above example is given in the table below.

START TAG	DESCRIPTION	END TAG
<p>	Paragraphs are written inside the p tags	</p>
<h1, h2, h3, h4, h5, h6>	These tags are used for headings with h1 being the largest size and h6 the smallest size.	</h1 or h2 or h3 or h4 or h5 or h6 >
<hr>	Used for drawing horizontal lines	</hr>
<br>	Used for inserting empty lines	</br>
<pre>	Displays the text as it is. Can be used for writing poems or computer codes	</pre>
<blockquote>	Used for writing quotations or proverbs	</blockquote>
<!-- any comment >	Used for inserting comments in the document. This will be ignored by the browser and will not be displayed on the web page.It is for programmers understanding

Thursday, November 29, 2007

BASIC HTML TAGS - Part 1

We had covered some of the basic tags already in my previous posts. Just a recap of it is given in the below table.

START TAG	DESCRIPTION	END TAG
<html>	Beginning of any html document	</html>
<head>	First part of html document which has the title tag and if needed some script functions like JavaScript functions can be added.	</head>
<title>	Whatever we mention in between the title tags comes as the title of the web page(HTML document when run through Internet Explorer opens the web page)	</title>
<body>	This is the main part of any HTML document. It can contain paragraphs, sub headings or main headings, pictures, tables,video clips,Frames, forms, etc,	</body>

NOTE: All the above tags have a corresponding closing tag

Tuesday, November 20, 2007

HTML ATTRIBUTES

The HTML attributes provides additional information to the HTML elements. It is usually written in the start tag. It always comes in name=”value” pairs.

Consider the above example. If we run the above HTML document we get a web page as below. The page background is white in color which is default (means if we don’t specify any color it will appear in the default white color).

Suppose if we want the background color to be pink then we can use the attribute bgcolor in the <body> start tag. It will change the background color to pink. So attributes are there to provide additional information on how or what to display on a web page.

Add the attribute “bgcolor” in the body tag as <body bgcolor="pink"> and save it with .html extension. See the below code for reference.

The attribute always comes in name=”value” pairs. In the above example bgcolor is the name and pink is the value. The values of the attributes should be placed within quotes always.

Now open the saved .html file from Internet Explorer. You could see that the background color has changed to pink as below.

Monday, November 19, 2007

HTML ELEMENTS

Web pages are nothing but the HTML documents. HTML document is made up of HTML elements. HTML element is made up of HTML tags.

Consider the above example.

The whole example is the HTML DOCUMENT.

In the above HTML document we have so many HTML elements.

For example <title> My first html page </title> is a HTML element.
Again this HTML element is made up of HTML tags.

<title> </title> is the HTML tag in which <title> is the start tag and </title> is the end tag. And My first html page is the element content.

So the element content and the HTML tags together constitute the HTML element.

These HTML tags are not case-sensitive. If your start tag is in lowercase like <title> and end tag is in uppercase like </TITLE>, it will not make any difference. But it is always good to use lowercase letters because the latest web standards advise lowercase tags.

HTML Basics

HTML stands for HyperText Markup Language. It is the language of the World Wide Web. Almost all of the web pages and sites are written using HTML.

This powerful language is very easy to learn. You need not be a good programmer to learn HTML. If learnt with interest anyone can learn the basic features within a week.

Since HTML files are only text files it can be written using even the simplest editor like our Notepad. The other popular editors are WYSIWYG (What you see is what you get)
Editor, FrontPage and dreamweaver.

HyperText is a piece of text that acts as a link to another text. The term was coined by engineer Ted Nelson.

Markup is anything added to the content of the document that describes the text.

What does HTML file contain?

A document with HTML codes written in it should be always saved with .html or .htm extension. A HTML file contains small markup tags. Whenever a browser opens a .html file it searches for these tags as these tags tell the browser what to display or how to display the content on the web page.

Let us write a simple HTML document now. Keep in mind that the following is the basic structure of any HTML document. The tags in the below example should always be present in any HTML document.

If you are using windows open Notepad. Now type the code in the image as it is in your notepad.

After typing the content on the left in a Notepad, save it as firstpage.html or firstpage.htm in any of your local folder. It is better to use .html instead .htm as .htm is an old way of naming the HTML documents. Please Note that whatever is mentioned in the program is the minimum requirement for creating any web page or HTML document.

Running HTML document

Open Internet explorer. Click on File menu in the top of IE and click “Open” option.

Now browse for your firstpage.html and select it. Click on Ok You can see your first HTML page being displayed there. You will get an output similiar to the below picture.

NOTE: Please click on the below picture to get a bigger image.

CONGRATULATIONS!! YOU HAD CREATED YOUR FIRST WEB PAGE SUCCESSFULLY. SO creating web pages is not a big deal for you now.

Explanation of the above program

<html> -- This is the first tag of any HTML document. This is the tag which tells the browser that it is the beginning of a HTML document. This opening <html> tag will be always paired with the closing </html> tag.

</html> -- This is the last tag of any HTML document. This tags informs the browser that this is the end of the HTML document.

<head> -- This tag contains the header information. This will not be displayed on the browser.

</head> -- This tag is the closing tag of <head> tag.

<title> -- This tag comes inside the head tag. The information written between the title tag will appear on the top of the browser as the title of your HTML document. So here in our example “My first HTML page” will appear on the top of the page.
</title> -- This is the closing tag of your title tag.

<body> -- This tag contains the information that will be displayed on the page.

</body> -- This tag is the closing tag of the body tag.

Most of the tags in HTML will have a closing tag except for some tags like <br>.
It is always a good practice to close the tags.

Please let me know if you have any doubts.