ZeePedia Add to Favourites   |   Contact us


E-Commerce

<<< Previous TAG ATTRIBUTES, SOUNDS FILES, ANIMATIONS Next >>>
 
img
E-COMMERCE ­ IT430
VU
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
37
img
E-COMMERCE ­ IT430
VU
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>
38
img
E-COMMERCE ­ IT430
VU
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 <!--and -->, 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>
<p> This line has a 34pt font</p></body>
</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>
39
img
E-COMMERCE ­ IT430
VU
<h1 style="font-size:40pt">This heading has font-size 40-point</h1>
</body>
</HTML>
Result is shown in Fig. 6 below.
Fig. 6
40