Search

Forum

Home

Feedback

Credits

About Raj

Introduction

In PART 1 of the tutorial you learnt that Tags are instructions that tell the browsers how to display your document. Tags consist of a keyword enclosed within angled brackets (< >). The keyword indicates the function of the tag. Attributes, which are extra information, that are used with a tag to modify its function, can also be used.

HTML permits us to use a wide variety of tags to make our documents attractive. Using these tags, you can format the text appearing in your document, add pictures and sound to your documents. Discussed below are some tags that help us to do all this.

1. Heading tags

Big and bold heading help to make your HTML document attractive. HTML allows you to use six levels of headings. Each level has it own predefined font size. The first level is indicated by the <H1> and </H1> tags. <H2> and </H2> indicates the second level, <H3> and </H3> indicates the third level and so on till <H6> and </H6>. The example given below shows the use of the different levels of headings.

<H1>Heading Level 1</H1>

<H2>Heading Level 2</H2>

<H3>Heading Level 3</H3>

<H4>Heading Level 4</H4>

<H5>Heading Level 5</H5>

<H6>Heading Level 6</H6>

Fig 2.1 The six levels of headings

 

2. Horizontal Rule Tag

The Horizontal Rule tag or the <HR> tag is used to draw a horizontal line. It does not have an end tag.

For example,

My first HTML document

<HR>

By Ramkumar

would be displayed by the browser as follows:

Fig 2.2 The <HR> tag

Note that the <HR> tag automatically introduces a line break. You can also specify the thickness of the line drawn using the <HR> tag. To do this, you have to use Attributes. As mentioned earlier, attributes are extra information that is used with a tag to modify the function of the tag. The two attributes frequently used with the <HR> tag are SIZE and NOSHADE.

The SIZE attribute allows you to define the thickness of the line to be drawn. The NOSHADE attribute displays the line in dark grey. Given below are some examples that show how it can be used.

<HR SIZE = "1">

<HR SIZE = "3">

<HR SIZE = "6">

<HR SIZE = "10">

<HR SIZE = "10" NOSHADE>

<HR SIZE = "20">

<HR SIZE = "20" NOSHADE>



Fig 2.3 <HR> tag with SIZE and NOSHADE attributes.

3. <BIG> tag

The <BIG> is used to display text in a font larger than the font currently being used. It is always used with the end tag </BIG>.

For example :

<BIG>Happy New Year</BIG> will be displayed as Happy New Year

<BIG> THE HINDU </BIG> will be displayed as THE HINDU

 

4. <SMALL> tag

The <SMALL> tag is very similar to the <BIG> tag except that it displays text in a font smaller than the font currently being used. The <SMALL> tag is always paired with the end tag </SMALL>.

For example :

<SMALL> Happy New Year</SMALL> will be displayed as Happy New Year

<SMALL> THE HINDU </SMALL> will be displayed as THE HINDU

5. Marquees Tag

Have you seen text scrolling across television screens and advertisement hoarding? You can also add such text to your document using the <MARQUEE> tag. To use this tag, enclose the text within the <MARQUEE> and </MARQUEE> tags.

For example,

<MARQUEE> Sample Text </MARQUEE>

will make the text "Sample Text" scroll from one end of the window to the other.

It is important to note that the <MARQUEE> tag works only with Internet Explorer. Two attributes that are used with the <MARQUEE> tag are BGCOLOR and DIRECTION. BGCOLOR attribute specifies the background colour and DIRECTION specifies the direction from which the text should scroll.

For example,

<MARQUEE BGCOLOR = "Red" DIRECTION = "Right"> Sample Text </MARQUEE>

will display a red strip on which the text "Sample Text" will scroll from left to right.

The <MARQUEE> tag can also be used with the <FONT> tag for better effects.

For example,

<MARQUEE><FONT COLOR ="Red" SIZE = "7"> Sample Text</FONT> </MARQUEE>

will scroll Sample Text across the screen.

 

6. Adding Pictures to the Document

   What makes HTML documents interesting is their ability to display pictures. To add a picture to your document, first ensure that the picture is available in the same folder as your HTML file.

   Next make sure that it is in the GIF or the JPEG file format. GIF and JPEG are the two most commonly used file formats used to store images. GIF stands for Graphic Interchange Format and these files have the extension .gif. These files are compact and most of the images on the Web are in this format. JPEG stands for Joint Photographic Experts Group and these files have the extension .jpg or .jpeg. These files are more compact than the GIF files. Another difference between the two is that, GIF files can contain only 256 different colours, whereas, JPEG files can contain up to 16 million different colours in an image.

   Now, you can use the <IMG> tag to add it to your document. The image tag is always given with the SRC attribute which specifies the name of the image file.

   <IMG SRC = "Filename">

   For example,

   <HTML>

   <HEAD>

   <TITLE> MY FIRST HTML DOCUMENT </title>

   </HEAD>

   <BODY>

   <H1> ZEN Car </H1>

   <IMG SRC="carpic.gif">

   </BODY>

   </HTML>

   will be displayed as

   Fig 2.4 Using the <IMG> tag

   Two attributes that are frequently used with the IMG tag are ALT and ALIGN.

   Frequently users view web pages without images. This is either because they have a browser that cannot display images or because downloading images takes too long. In such cases, the ALT attribute is used to display an alternate message.

   For example, let us modify the <IMG> tag we used earlier to

   <IMG SRC = "carpic.gif" ALT = "Picture of Maruti ZEN ">

   Now the browser will display the message "Picture of Maruti ZEN" whenever the mouse is placed on the picture.

   The ALIGN attribute is used to tell the browser where the image should be in relation to the text on the page.

   For example,

   <IMG SRC = "carpic.gif" ALT = "Picture of Maruti ZEN " ALIGN = "LEFT">

   will place the image on the left with the text on the right as shown below.

   Fig 2.5 The image is left aligned

   <IMG SRC = "carpic.gif" ALT = "Picture of Maruti ZEN " ALIGN = "RIGHT">

   will place the picture on the right as shown below.

   

   Fig 2.6 The image is right aligned.

    

7. Sound Tags

Sound files are stored on the computer in many different formats. The most common of these are the wave format (with the file extension .wav), the basic audio format (with the extension .au) and the MIDI format (with the extension .mid). To add sound to your document you can use one of the sound files available on your computer, create one using the multimedia accessories on your computer or use one of files available on the internet. To find these files, search under Sounds. Sites like Audio Browser Sound Files collection (http://www.webplaces.com/html/sounds.htm) offers a wide selection.

Once you have located the sound file, to add it to your document, you can use the <BGSOUND> tag. With the <BGSOUND> tag, the SRC attribute specifies the name of the file and LOOP specifies the number of times the file should be played.

For example,

<BGSOUND SRC = "C:\Windows\Media\The Microsoft Sound.wav" LOOP = "2">

Note that the <BGSOUND> tag works only in Internet Explorer.

8. Part Two Ends

This part enabled you to create multimedia documents using HTML tags. The remaining part discusses advanced features such as tables, lists, forms and frames.

Copyright © 1999 Dr. Raj Mehta. All rights reserved.