Advance Features of HTML

1
Advance Features of HTML

• Image manipulation
• Thumbnail Images
• Transparency images
• Image Maps
• Logical Physical Styles for TEXT
• Multimedia
• Sound
• Video

2
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

3
Make slow image downloads less annoying

• To make slow downloads less annoying you can use
• Incremental Graphics
• Thumbnail Previews
• Incremental graphics
• Interlaced GIFs. 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 GIFs

4
Thumbnail Previews

• A thumbnail preview (thumbnail Sketch) is a
  clickable bandwidth-efficient version of a
  larger graphics image which contains a link to
  the original image.
• ltA HREF dcuca.jpggt
• ltIMG SRC thumbdcuca.jpg width 91 height
  67gt
• lt/Agt
• 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.

5
(No Transcript)
6
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.

7
Transparent GIFs

• 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.

8
How to Create a Transparent Background GIF using
PSP

• To Create a transparent gif using PSP youll need
  to find out the Index Number of the colour you
  want to be transparent.
• Select Colors / Decrease Colors from the menu
  bar and select 256 colors
• 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 255
• G 255
• B 255
• I 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.

9
Paint Shop Pro window
10
Option Dialog box
Transparency examples
11
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
• Rect
• Circle
• Poly

12
Steps to Create an Image Map

• Start with an image file (.GIF or JPEG)
• View the image with your web browser using the
  ISMAP trick and record the coordinate pairs for
  each Rectangle hotzone.
• ISMAP trick setup an IMG tag with an ISMAP
  attribute, and make a link label for an A tag
• ltA HREF Tester.htmlgtltimg src map.gif ISMAPgt
  lt/Agt
• Display the HTML file that contains this link
  with a web browser and look at the image
• 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
• Create an AREA tag for each hotzone, and place
  each AREA tag inside a MAP tag.
• Add the Map tag to the BODY of the web page
• Add the USEMAP attribute to the IMG tag for the
  image just mapped.

13
File to Create Image Map
14
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.
15
(No Transcript)
16
Logical Styles (indicates the way text is used)

• Emphasis
• ltEMgt ... lt/EMgt Basic emphasis, typically
  displayed in italics.
• Strong
• ltSTRONGgt ... lt/STRONGgt Provides strong emphasis,
  usually bold.
• Citation
• ltCITEgt ... lt/CITEgt Specifies a citation such as
  book titles, references, etc. Usually displayed
  in italics.
• Code
• ltCODEgt ... lt/CODEgt Used when displaying program
  code. I'm using it here whenever I give examples
  of the tags.
• Sample Output
• ltSAMPgt ... lt/SAMPgt Used when displaying sample
  output from programs.

17

• Keyboard Input
• ltKBDgt ... lt/KBDgt Use for text input by the user.
• Variables
• ltVARgt ... lt/VARgt Used for variables or arguments
  to commands.
• ltABBR title World Wide Webgt WWW lt/ABBRgt
  Indicates an abbreviated form (e.g., WWW, HTTP,
  URL, etc.).
• Definition
• ltDFNgt ... lt/DFNgt Used for definitions.
• Address
• ltADDRESSgt ... lt/ADDRESSgt Used for the author's
  address and other contact details, and often
  force a line break before and after.
• Block Quote ltBLOCKQUOTEgt ... lt/BLOCKQUOTEgt Used
  for Quotes, usually displayed as indented, and
  often force a line break before and after.

18
Physical Styles

• Bold
• ltBgt ... lt/Bgt Used to bold type (generally the
  same as Strong).
• Italic
• ltIgt ... lt/Igt Used to italic type (generally the
  same as Italic).
• Underline
• ltUgt ... lt/Ugt Underlines text (some old browsers
  don't do this)
• Typewriter Text
• ltTTgt ... lt/TTgt Displays a monospaced font,
  usually used for variable names or HTML code.
• Strike-Through
• ltSTRIKEgt ... lt/STRIKEgt Strikes through text as if
  you're crossing it out.
• Big
• ltBIGgt ... lt/BIGgt Displays text in a big font.

19

• Small
• ltSMALLgt ... lt/SMALLgt Displays text in a small
  font.
• Subscript
• ltSUBgt ... lt/SUBgt Places text in subscript style.
• Superscript
• ltSUPgt ... lt/SUPgt Places text in superscript
  style.
• Preformatted
• ltPREgt ... lt/PREgt Places text as is, in
  preformatted format.
• Center
• ltCENTERgt ... lt/CENTERgt Horizontally centers the
  text
• in the middle of the page (or column if it's in a
  table).
• Blink
• ltBLINKgt ... lt/BLINKgt An annoying tag that makes
  the text blink on and off.

20
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 ltEMBEDgttag. MSIE, Mosaic, and several other
  browsers use the ltBGSOUND ...gt 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.

21

• ltSCRIPT TYPE"text/javascript"gt
• lt!-- var filename"hazy_shade_of_winter.mid"
• if (navigator.appName "Microsoft Internet
  Explorer") document.writeln ('ltBGSOUND SRC '
  filename "gt')
• else if (navigator.appName "Netscape")
• document.writeln ('ltEMBED SRC"' filename
  '" AUTOSTARTTRUE WIDTH144 HEIGHT60gtltPgt')
• // --gt lt/SCRIPTgt
• ltNOSCRIPTgt ltBGSOUND SRC"hazy_shade_of_winter.mid"
  gt lt/NOSCRIPTgt
• Or a simpler way is to include
• ltheadgt
• ltNOEMBEDgt
• ltBGSOUND SRC hits.augt
• lt/NOEMBEDgt
• ltBODYgt
• ltEMBED src hits.augt
• lt/BODYgt

22
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.

23
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
• lta href"URL"gtLink_Textlt/agt
• Where URL is the full path to the audio file to
  be played and Link_Text is the visible clickable
  link.
• Example
• Play lta hrefsilentnight.mid"gtltigtSilent Night
  lt/igtlt/agt.

24
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 ltheadgt document segment.
• Command Parameters src"URL"
• Defines the URL at which the background sound
  file can be found by the browser.
• loop"integerinfinite"
• 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 ltBGSOUND src"entertainer.mid"
  loop"10"gt
• 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.

25
ltEMBEDgt

• ltEMBED src"URL" command parametersgt
• 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 ltEMBEDgt 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.

26

• 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.

27

• 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.

28

• ltembed src"bethena.mid"
• height15
• width50
• controls"smallconsole"
• autostart"false"
• nosave"true"
• loop"true"gt
• 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

29

• ltembed src"bethena.mid"
• height60
• width144
• controls"bigconsole"
• autostart"false"
• nosave"true"
• loop"true"gt
• 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.
  

30

• ltembed src"bethena.mid"
• autostart"true
• nosave"true"
• loop"true"gt
• 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.