TAG ATTRIBUTES, SOUNDS FILES, ANIMATIONS

<< FRAMES AND IMAGES IN HTML

STYLE SHEETS 1 >>

E-COMMERCE IT430

Lesson 09

TAG ATTRIBUTES, SOUNDS FILES, ANIMATIONS

<Area> tag attributes

`alt' attribute is used to label the clickable region. `Target' attribute can be used to display result in a given

frame. `Nohref' attribute can be used to make a region non-clickable. For example, <Area shape="circle"

coords="70,45,25" href="a.htm" alt="a.htm" target="upper" nohref>

Sound Files

Sound file formats are: AU,WAV,MP3,MIDI. Sound files can be used in anchor tag as follows: <A

href="song.wav">Click here for some greeting!</A>. We can also embed such files using embed tag.

Example - Embedding <HTML> <HEAD><TITLE>Example - Embedding</TITLE> </HEAD>

<BODY> Click the Play button for some nice music:<BR> <EMBED SRC="Skylar.MP3"> </BODY>

</HTML> Result is shown in Fig. 1 below.

Fig. 1

<EMBED> tag also supports these attributes: Autostart="False" browser does not play the sound file

E-COMMERCE IT430

height Bgcolor="color" specifies marquee background

Example - Marquee

<HTML>

<HEAD>

<TITLE>Marquee</TITLE>

</HEAD>

<BODY>

Discover this amazing compatibility between

<MARQUEE ALIGN="BOTTOM" BGCOLOR="SILVER" WIDTH="200"

SCROLLAMOUNT="4">

Islam and Modern Science

</MARQUEE>!

</BODY>

</HTML>

Fig. 3

Style sheets

Style sheet instructions can be embedded in the HTML document. An advantage of applying style sheets is

that definition of the style's formatting is created once and the browser applies that formatting each time

the tag is used. Secondly, pages are easier to modify, that is, edit the style definition and all the places where

the style is used within the page get updated automatically. Most popular type of style sheets is Cascading

Style Sheets. There are mainly four different methods of using Cascading Style Sheets.

Method #1: Embedded method

Give a <style> tag and a </style> end tag into your document. Put the style tags before body tag. Insert all

your style definitions between the style tags. Example

<HTML>

<head>

<style>

<!--

H1{font-size:72pt}

--> </style> </head> <body><h1>An Example of Embedded Method</h1> </body></html>

E-COMMERCE IT430

Result is shown in Fig. 4 below.

Fig. 4

Here, H1{font-size:72pt} is called style definition, `font-size' is called style property and 72pt is the value of

the property. Style definition is contained within the mark , which is the format for commenting

out information in HTML. It is better to provide style definitions within the comment tag so that old

browsers that do not support <style> tag do not treat the style definition as text.

Method # 2: Linking to an external style sheet

A separate file is created with the extension `.css', containing your style definitions (see mystyles.css below).

Use <Link> tag inside a web page header to apply these style definitions.

mystyles.css:

h1{color:red}

p{font-size:34pt}

Example <HTML> <head> <Link Rel="stylesheet" Type="text/css" href="mystyles.css"> </head>

<body><h1>This heading will appear red</h1>

</html>

Result is shown in Fig. 5 below.

Fig. 5

Method # 3: Inline styles

It is used where a particular tag is to be given a different style. We use `style' as an attribute in a tag and give

properties/values in a format as shown in the example below:

<HTML>

<body>

E-COMMERCE IT430

<h1 style="font-size:40pt">This heading has font-size 40-point</h1>

</body>

</HTML>

Result is shown in Fig. 6 below.

Fig. 6

Table of Contents: