|
|
|
|
|
|
Lesson#9
|
TAG ATTRIBUTES SOUNDS FILES ANIMATIONS
|
|
|
|
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
automatically when the user surfs the web page Loop=“value” –
tells the browser how many times to play
the file (you can keep the value a number or infinite)
Hidden=“True” – browser hides the control There is
another tag for embedding sound files, that is, <BGSOUND> tag.
It is supported by Internet Explorer
only.
Animated GIF images
Use Paint, Paint Shop Pro or some other drawing program to
create individual image files that will comprise
animation. Use a special program such as GIF Animator to specify
that these images be displayed
sequentially, thus creating an animation. Add it to your web
page by setting up an <IMG> tag where ‘Src’
attribute indicates the GIF file that you have created. Fig. 2
shows five different images that can be
displayed sequentially using some animation program such that
they would create the effect of animation.
Fig. 2
Note that you can use ready made animated images also.
<Marquee>Tag
Text that we put between <Marquee> and </Marquee> tags scrolls
across the screen. Attributes and their
values: Align=“top” or “bottom” Direction=“”left” or “right”
Behavior=“Scroll” or “Slide” or “Alternate”
Loop=“times” – can set “times” equal to infinite
Scrollamount=“pixels” – higher the value of pixels, the
faster the text scrolls Width=“value” – specifies the marquee
width Height=“value” – specifies the marquee
38
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>
39
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>
40
<h1 style="font-size:40pt">This heading has font-size
40-point</h1>
</body>
</HTML>
|
|
|
|
|