Introduction to HTML

Here, we will introduce you to the basics of HTML. HTML stands for Hyper Text Markup Language. Using HTML we can create a Web Page which can be viewed through a Web Browser over Internet.

HTML describes the contents of a web page with Markup Tags. Tags are defined by angle brackets <>. <> is called the Opening Tag or the Start Tag. The Closing Tag or the End Tag is defined as </>. The whole HTML document is enclosed in between the opening <html> tag and the closing </html> tag. An HTML file has a .html or .htm extension.

The General Structure of an HTML document

When you will open a web browser and going to the View option of the Menu bar click to view the source code of the web page, you will see the general structure of the HTML document. At the start of the document, you will find the declaration of the HTML Version being used.

An HTML document is divided mainly into two parts- Head and Body. The Head element contains the Title of the Page which is written in between <title>...</title> tags. The Title of the Page will be shown in the Header of the Web Page.

The second part is the Body Element. This is the most important part of the HTML document. The Body element contains all the contents to be displayed in a web page (texts, images etc.).

Below here is the General Structure of an HTML document---

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
...... Version of HTML

<html>
...... Opening of the HTML document

<head>
...... Opening tag of the Head

<title>My Home Page</title> ...... Title of the document

</head> ...... Closing Head tag

<body> ...... Start of the Body

............................
........Contents of the body 
which may contain various kind
..............
of elements like text, image, link etc
................................................................

</body> ...... End of the Body element

</html> ...... End of the HTML document

Basic Elements of a Body and their Attributes

The following Basic elements are used in a body that describe the contents of the body---

Headings
Paragraph
Formatting Elements
Emphasized word
Image
Anchor
Lists

Each element has some properties or characteristics. These are referred to as attributes. An attribute has a specific value.

HTML Headings

In HTML, six types of headings are used, viz, H1, H2, H3, H4, H5 and H6. Headings are important in maintaining the flow of the contents, i.e., the hierarchical structure of the document. H1 is the most important and H6 is the least important heading.

Each heading has an Opening tag and a Closing tag. The use of headings can be shown as below---

<h1>This is the first heading</h1>
<h2>This is the second heading</h2>
<h3>This is the third heading</h3>
<h4>This is the fourth heading</h4>
<h5>This is the fifth heading</h5>
<h6>This is the sixth heading</h6>

In the browser, it will become like this---

This is the first heading

This is the second heading

This is the third heading

This is the fourth heading

This is the fifth heading

This is the sixth heading

The format of the text in each heading is defined as default by HTML itself.

Paragraph

Paragraphs in an HTML page are encoded within <p> and </p> tags. However, the end tag is optional. The space between two paragraphs are automatically specified in HTML. We can insert a line break at any point of the document by using a <br> tag.

Look at the follwing example---

<p>This is my first paragraph.</p>
<p>This is another paragraph. This will give you<br>an introduction of HTML.</p>

The display in the web page will be as---

This is my first paragraph.

This is another paragraph. This will give you
an introduction of HTML.

Formatting Elements

There are three basic formatting elements used in HTML to make a text Bold, Italic and Underlined.

To make a text bold, <b> and </b> tags are used.

To make a text italic, <i> and </i> tags are used.

To make text underlined, <u> and </u> tags are used.

For example,

<i>This text is italic.</i>

<u>This text is underlined</u>

The result will be---

This text is bold.

This text is italic. 0

This text is underlined.

An Emphasized Word

To add emphasis to a word or a group of words, we use the <em> tag.

For example, 1

This is a <em>very interesting</em>lesson.

This is a very interesting lesson.

Image

Images are often used in a web page. To add an image in HTML, we use the <img> tag. The path of the location of the image is written in the "src" attribute. If the image is located in the same folder as the web page then only the name of the image file is included. We can also format the size of an image by specifying its width & height. 2

Take the following example:

This is an image with size of width 100px and height 80px. 3

The ALT attribute of an image:

The Alt attribute is used to give a short description of an image in case the image is not loaded in the web page due to some reason.

<img src="image.gif" width="100" height="80" alt="picture of a boy"> 4

Here, in place of the image the text is displayed contained in the alt attribute of the image.

The Anchor Element

HTML provides the facility of links in a web page to other web pages. By clicking on some text as a link, we can go to a different web page. This is called Hyper Linking of web pages. This makes a web page dynamic.

The anchor tag <a> is used for this purpose. The location path of the web page to be linked is given in the "href" attribute. Href refers to Horizontal Reference. The text which is displyed as a link to the desired page is written in between the opening <a> and closing </a> tags. 5

For example,

<a href="http://www.roseindia.net">Go to Roseindia</a> will create a link to the Roseindia Web Site. 6

Go to Roseindia

On clicking the above link, the Roseindia Home Page will be open.

Lists in HTML

Three different types of lists are used in HTML. Unorderd list, Ordered list and Definition list. 7

(i) Unordered list is one in which the listing of the items is unordered. The <ul> tag defines an Unordered list and items are described by the <li> tag. The Bullets appear as the default style in an Unordered list. We can also specify the style format as "circle" or "square" in the type attribute.

For example,

List of some fruits:

<ul type="circle">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul> 8

List of some fruits:

Apple
Banana
Orange
Mango

(ii) Similarly, an Ordered list is defined by <ol> tag.

For example,

List of some vehicles:

<ol>
<li>Bicycle</li>
<li>Motorbike</li>
<li>Car</li>
<li>Bus</li>
</ol> 9

List of some vehicles:

Bicycle
Motorbike
Car
Bus

1,2,3,....is the default ordering style (type="1") in an Ordered list. The type of ordering can be changed by specifying the value of the type attribute as "i" for Roman, "A" for alphabets etc.

(iii) A Definition list is one in which definition or description of the items are given. A Definition list is defined by <dl> tag. The items are encoded in <dt> (defintion term) tag and the description of the items are encoded in <dd> (definition data) tag.

For example, 0

List of some beverages:

<dl>
<dt>Tea</dt>
<dd>A type hot drink</dd>
<dt>Coffee</dt>
<dd>Another hot drink</dd>
</dl>

List of some beverages:

Tea: A type of hot drink
Coffee: Another hot drink

All three <ul>, <ol>, <dl> has closing tags. But <li> is optional.

Introduction to HTML