Advance Features of HTML
• Image manipulation
–Thumbnail Images
–Transparency images
–Image Maps
• Logical & Physical Styles for TEXT
• Multimedia
–Sound
–Video
Image File Formats
All artwork and photographs found on the web are stored in binary
files. These files reside on web servers along with HTML files that
refer to them.
– Two file formats are commonly used for web page graphics
are GIF (Graphics Interchange Format) and JPEG (Joint
Photographic Experts Group) each format works better for
certain kinds of images because of the unique way in which
it stores images.
• GIF are better for line art, cartoons and simple images
• JPEG files are better suited to photographs and artwork,
that include many colours and fine gradations in colour.
– GIF use 8-bit colour palette (256 possible colours
(Adapative palette), dithering)
– JPEG uses 24-bit coloru palette (16,777,216 possible
colours)
– PNG (Portable Networks Graphics)File Format – like .GIF
but does not support animation
Make slow image downloads less annoying
To make slow downloads less annoying you can use
– Incremental Graphics
– Thumbnail Previews
Incremental graphics:
Interlaced GIF’s. The interlaced GIF file produces its display in
four passes.
– First pass produces produces an image based on every 10th
line of pixels
– Second pass shows every fifth line
– Third pass everyline is filled in
– Fourth pass the complete image is displayed
JPEG uses a Progressive JPEG file format – works similar to
Interlaced GIF’s
Thumbnail Previews
A thumbnail preview (thumbnail Sketch) is a clickable bandwidthefficient version of a larger graphics image which contains a link to
the original image.
<A HREF = “dcuca.jpg”>
<IMG SRC = “thumbdcuca.jpg” width = “91” height = “67”>
</A>
Click on this picture to view the original image (79.6KB )
The important thing to note when creating a thumbnail image is that
you are creating a second image in a smaller size rather than just
adjusting the width and height parameteres in the HTML document.
How to Create Thumbnail Image using PSP
1.
Open the Image that the thumbnail is to linked to, in PSP.
2.
From the image menu select the RESAMPLE option, if the
resample option is greyed out, then and only then you should
select the resize option.
3.
Select the width that you want the thumbnail to be and make
sure that the maintain aspect ration box is selected.
4.
Click the OK button to resize the image.
5.
In the file menu select the save as option and save the file
with a different name from the original file.
Transparent GIF’s
A transparent GIF looks as if the image was drawn on your web
page. That is it allows your webpage background colour or
background pattern to show through those portions of the image that
have been designated as transparent.
To create a transparent GIF you must first identify which portion of
the image will serve as the designated background. Then whenever
the image appears on the web page, its background colour region
behaves as if it were transparent, inheriting the background colour of
the webpage beneath.
Transparency works well with images that have clearly defined
backgrounds, such as line art and Cartoons.
How to Create a Transparent Background GIF using PSP
To Create a transparent gif using PSP you’ll need to find out the
Index Number of the colour you want to be transparent.
1.
Select Colors / Decrease Colors from the menu bar and
select 256 colors
2.
Use the eyedropper tool to select the color you wish to make
transparent (move the eyedropper over the color on the
image), and on the right-hand side of the screen you will see
status bar. In the status bar, you will see the following letters
R
G
B
I
3.
255
255
255
15
The last number (15) is the index number.
Select File / Save as - select gif98a and then select the
options dialog box. Enter you Index number where it asks for
the value of the transparency colour.
Paint Shop Pro window
Option
Dialog box
Transparency
examples
Image Maps
Navigation menus are constructed from image maps and are
typically used in conjunction with frames.
An image map is an image on a web page that has been divided
into regions called hotzones. Each hotzone is a clickable region
associated with a link.
–
Server side image maps
–
Client-side image maps
To create a clickable image map you must mark each clickable
region within the image using x – y coordinates.
Regions for clickable zones come in three shapes
1. Rect
2. Circle
3. Poly
Steps to Create an Image Map
1. Start with an image file (.GIF or JPEG)
2. View the image with your web browser using the ISMAP trick and
record the coordinate pairs for each Rectangle hotzone.
1. ISMAP trick : setup an IMG tag with an ISMAP attribute, and
make a link label for an A tag
<A HREF =“Tester.html”><img src =“map.gif” ISMAP>
</A>
2. Display the HTML file that contains this link with a web
browser and look at the image
3. Place your cursor inside the image, and look at the status
message at the bottom of the browser window, at the end of
the file name are two numbers separated by a comma –
these are the x – y coordinates for the current cursor position
3. Create an AREA tag for each hotzone, and place each AREA tag
inside a MAP tag.
4. Add the Map tag to the BODY of the web page
5. Add the USEMAP attribute to the IMG tag for the image just
mapped.
File to Create Image Map
Shape defines the shape of the area.
Coords defines the specification of the
coordinates, the type of coordinates
given depend on the shape been used.
SHAPE = Rect, the series of comma
separated numbers in the coords are
two coordinates: the upper left corner of
the rectangle and the lower right corner
of the rectangle.
SHAPE = Circle indicates that the area
is a cirlce. The first two numbers define
the center point of the circle, and the
third number is the radius of the circle.
SHAPE = Poly is defined by three or
more pairs of x/y coordinates, the line
connecting those coordinates create the
area.
Tag Attributes and Values for Image Mapping
HTML Element
<AREA>
<MAP> </MAP>
What the attribute
does
Attributes
Attribute Values
COORDS=
[two coordinate
pairs for rectangle]
[one coordinate pair
for the center of the
circle and third
coordinate for the
radius]
[three or more pairs
of x/y coordinates
form the polygon]
Specifies the location and
size of the hotzone
HREF=
An absolute URL or
a Relative URL
Specifies the Link
destination for the hotzone
Shape
Rect for rectangle
Circle
Poly for Polygon
Specifies the size and
shape of the hotzone
Name =
Any string
Names the image map
36
© 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan
Logical Styles (indicates the way text is used)
Emphasis
<EM> ... </EM> Basic emphasis, typically displayed in italics.
Strong
<STRONG> ... </STRONG> Provides strong emphasis, usually
bold.
Citation
<CITE> ... </CITE> Specifies a citation such as book titles,
references, etc. Usually displayed in italics.
Code
<CODE> ... </CODE> Used when displaying program code. I'm
using it here whenever I give examples of the tags.
Sample Output
<SAMP> ... </SAMP> Used when displaying sample output from
programs.
Keyboard Input
<KBD> ... </KBD> Use for text input by the user.
Variables
<VAR> ... </VAR> Used for variables or arguments to commands.
<ABBR title = “World Wide Web> WWW </ABBR> Indicates an
abbreviated form (e.g., WWW, HTTP, URL, etc.).
Definition
<DFN> ... </DFN> Used for definitions.
Address
<ADDRESS> ... </ADDRESS> Used for: the author's address and other
contact details, and often force a line break before and after.
Block Quote <BLOCKQUOTE> ... </BLOCKQUOTE> Used for: Quotes,
usually displayed as indented, and often force a line break before and
after.
Physical Styles
Bold
<B> ... </B> Used to bold type (generally the same as Strong).
Italic
<I> ... </I> Used to italic type (generally the same as Italic).
Underline
<U> ... </U> Underlines text (some old browsers don't do this)
Typewriter Text
<TT> ... </TT> Displays a monospaced font, usually used for variable
names or HTML code.
Strike-Through
<STRIKE> ... </STRIKE> Strikes through text as if you're crossing it out.
Big
<BIG> ... </BIG> Displays text in a big font.
Small
<SMALL> ... </SMALL> Displays text in a small font.
Subscript
<SUB> ... </SUB> Places text in subscript style.
Superscript
<SUP> ... </SUP> Places text in superscript style.
Preformatted
<PRE> ... </PRE> Places text as is, in preformatted format.
Center
<CENTER> ... </CENTER> Horizontally centers the text:
in the middle of the page (or column if it's in a table).
Blink
<BLINK> ... </BLINK> An annoying tag that makes the text blink on and
off.
MULTIMEDIA
Background Sounds
A "background sound" is a sound that starts to play automatically when
the web page is loaded. Before you go any further, think hard: Do you
really want to do this?
Unfortunately the browser industry and standards committees have not
settled on a standard way of accomplishing this.
Netscape allows background sounds through use of the <EMBED>tag.
MSIE, Mosaic, and several other browsers use the <BGSOUND ...> tag.
With this lack-of-standards problem, the best to hope for is a situation
that plays the sound in most situations, and in the other situations
doesn't play the sound and doesn't give error messages. This can be
accomplished using scripting, as in this example.
<SCRIPT TYPE="text/javascript">
<!-- var filename="hazy_shade_of_winter.mid";
if (navigator.appName == "Microsoft Internet Explorer")
document.writeln ('<BGSOUND SRC=“ ' + filename + ‘ ">');
else if (navigator.appName == "Netscape")
document.writeln ('<EMBED SRC="' + filename + '"
AUTOSTART=TRUE WIDTH=144 HEIGHT=60><P>');
// --> </SCRIPT>
<NOSCRIPT> <BGSOUND SRC="hazy_shade_of_winter.mid"> </NOSCRIPT>
Or a simpler way is to include
<head>
<NOEMBED>
<BGSOUND SRC =“hits.au”>
</NOEMBED>
<BODY>
<EMBED src = “hits.au”>
</BODY>
Sound Formats
There are many computer formats for sound, and theoretically any of
them could be used in a web page. The three most popular formats
(those most likely to work on your machines) are WAVE, AU, and MIDI.
WAVE (Waveform Audio File Format) with the file extension .wav was
invented for Windows by Microsoft.
AU (Audio File Format) file extension .au was invented by NeXT and
Sun.
WAVE and AU are like sound recordings... they reproduce recorded
sounds (or computer generated sounds).
MIDI (Musical Instrument Digital Interface) is an entirely different
concept. The MIDI file format is a series of commands such as "play
middle C for .25 seconds". These sort of commands are very small, so
one of the great advantages of MIDI files for your web page is that a lot
of music can be packed in a small MIDI file.
Inline Audio:
There are two (2) ways to place inline audio files in HTML. The first
uses a simple hypertext reference anchor to an audio file.
The second is to include background music when the file is loaded
(BGSOUND or EMBED).
Sounds can be included on webpages using simple hypertext
reference anchors which point to audio files.
The general form of the inline audio link would be:
<a href="URL">Link_Text</a>
Where URL is the full path to the audio file to be played and
Link_Text is the visible clickable link.
Example:
Play <a href=“silentnight.mid"><i>Silent Night </i></a>.
BGSOUND
BGSOUND plays a background sound file on the page if the user's
browser is audio capable or has an appropriate plug-in.
The command is only supported by the Internet Explorer browser at
this time and must be placed within the <head> document segment.
Command Parameters: src="URL"
Defines the URL at which the background sound file can be found by
the browser.
loop="integer|infinite"
Where an integer - defines the number of times the sound file should
replay. ( An integer value of -1 is equivalent to value infinite. )
infinite - causes the sound file to replay continuously.
Example: <BGSOUND src="entertainer.mid" loop="10">
Loads the sound file entertainer.mid. Plays the sound file 10 times.
The sound file will replay if the page is reloaded. The browser must
be audio capable or have the appropriate plug-in. The host file
server on which the HTML code is mounted must be MIME encoding
the audio file type .MID.
<EMBED>
<EMBED src="URL" command parameters>
Displays or plays an audiovisual or audio file from a specified
source SRC external to the HTML document within the document
or in the background. The file or object can be of any type so long
as the parameters are set correctly to load and place it within the
HTML document and the user's browser is using the appropriate
plug-ins to display or play it.
Warnings:
Many corporate intranets and other secured sites will halt loading of
a web page at the place in the code where an <EMBED> is
encountered (risk of viruses). For this reason it is best not to
embed files unless necessary and to place embedded files toward
the bottom of the web page.
The file server on which the embedded object resides must MIME
encode files of the type to be embedded or the embed will fail.
Command Parameters: for EMBED
autostart="true | false"
Determines whether or not the display or play of the embeded
object will proceed automatically or not.
border="pixels"
Defines the size of the border to place around the embedded object
in pixels.
controls= bigconsole | smallconsole" Determines which console will
be used for controlling the play of audio files.
height="pixels“
Defines the height of the displayed object in pixels.
hspace="pixels"
Defines the standoff to place to the left and right of the embedded
object in pixels.
loop="true | false | integer"
Determines whether or not the displayed audio or video file will loop
and the number of times it will loop. In the Netscape browser true
indicates that the embedded file should loop continuously.
nosave="true | false"
Determines whether or not the browser will save a permanently cached
copy of the embedded file on the client's machine.
src="URL"
Provides the URL at which the embedded object can be found. The file
server on which the object resides must MIME encode it properly.
vspace="pixels"
Defines the standoff to place to the top and bottom of the embedded
object in pixels.
width="pixels"
Defines the width of the embedded object in pixels.
<embed src="bethena.mid"
height=15
width=50
controls="smallconsole"
autostart="false"
nosave="true"
loop="true">
Produces a small console display (which controls the playing of the embeded file
bethena.mid. The dimensions of the consoles are browser specific. Those
provided above work well only in the Netscape browser. Values of 20 and 75 for
height and width, respectively, would work well in the Internet Explorer browser.
The command parameters in the order given:
– load the file bethena.mid from the URL provided
– set the height and width of the console display to 15 and 50 pixels,
respectively
– display the small console style
– prevent the music file from playing automatically in the background
– do not permit the file to be saved
– allow the music file to loop continuously when played
<embed src="bethena.mid"
height=60
width=144
controls="bigconsole"
autostart="false"
nosave="true"
loop="true">
Produces a big console display. The dimensions of the big consoles are
browser specific. Those provided work well only in Netscape. Values of
25 and 200 for height and width, respectively, would work well in the
Internet Explorer browser.
<embed src="bethena.mid"
autostart="true“
nosave="true"
loop="true">
In Netscape browser would load the file into a big console window
outside the browser which the user could control and even close. In
the Internet Explorer browser the large console would be included
on the page at the point of the embed. Either is a much better
alternative to automatic music file embeds if you must play music on
your pages.