Advance Features of HTML. Image manipulation Thumbnail Images Transparency images Image Maps Logical & Physical Styles for TEXT Multimedia Sound Video. Image File Formats.
Advance Features of HTML
Logical & Physical Styles for TEXT
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.
To make slow downloads less annoying you can use
Interlaced GIF’s. The interlaced GIF file produces its display in four passes.
JPEG uses a Progressive JPEG file format – works similar to Interlaced GIF’s
A thumbnail preview (thumbnail Sketch) is a clickable bandwidth-efficient 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”>
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.
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.
To Create a transparent gif using PSP you’ll need to find out the Index Number of the colour you want to be transparent.
The last number (15) is the index number.
Paint Shop Pro window
Option Dialog box
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.
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
<A HREF =“Tester.html”><img src =“map.gif” ISMAP> </A>
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.
<EM> ... </EM> Basic emphasis, typically displayed in italics.
<STRONG> ... </STRONG> Provides strong emphasis, usually bold.
<CITE> ... </CITE> Specifies a citation such as book titles, references, etc. Usually displayed in italics.
<CODE> ... </CODE> Used when displaying program code. I'm using it here whenever I give examples of the tags.
<SAMP> ... </SAMP> Used when displaying sample output from programs.
<KBD> ... </KBD> Use for text input by the user.
<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.).
<DFN> ... </DFN> Used for definitions.
<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.
<B> ... </B> Used to bold type (generally the same as Strong).
<I> ... </I> Used to italic type (generally the same as Italic).
<U> ... </U>Underlines text (some old browsers don't do this)
<TT> ... </TT> Displays a monospaced font, usually used for variable names or HTML code.
<STRIKE> ... </STRIKE> Strikes through text as if you're crossing it out.
<BIG> ... </BIG> Displays text in a big font.
<SMALL> ... </SMALL> Displays text in a small font.
<SUB> ... </SUB> Places text in subscript style.
<SUP> ... </SUP> Places text in superscript style.
<PRE> ... </PRE> Places text as is, in preformatted format.
<CENTER> ... </CENTER> Horizontally centers the text:
in the middle of the page (or column if it's in a table).
<BLINK> ... </BLINK> An annoying tag that makes the text blink on and off.
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.
<!-- 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
<BGSOUND SRC =“hits.au”>
<EMBED src = “hits.au”>
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 .wavwas 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.
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:
Where URL is the full path to the audio file to be played and Link_Text is the visible clickable link.
Play <a href=“silentnight.mid"><i>Silent Night </i></a>.
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.
Defines the URL at which the background sound file can be found by the browser.
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 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.
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.
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.
Defines the height of the displayed object in 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.
Provides the URL at which the embedded object can be found. The file server on which the object resides must MIME encode it properly.
Defines the standoff to place to the top and bottom of the embedded object in pixels.
Defines the width of the embedded object in pixels.
Produces a small console display (which controls the playing of the embeded file bethena.mid. The dimensions of the consoles are browserspecific. 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:
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.
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.