Transcript Advanced Features of HTML
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)
it stores images.
each format works better for certain kinds of images because of the unique way in which – GIF use 8-bit colour palette (256 possible colours (
Adapative palette
), dithering) – JPEG uses 24-bit coloru palette (16,777,216 possible colours) – • 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.
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 10 line of pixels th – –
Second pass
shows every fifth line
Third pass
everyline is filled in –
Fourth pass
the complete image is displayed JPEG uses a
Progressive JPEG
Interlaced GIF’s file format – works similar to
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. 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.
1.
How to Create Thumbnail Image using PSP
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 3.
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.
Paint Shop Pro window
Transparency examples Option Dialog box
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.
3.
Circle Poly
1.
2.
3.
4.
5.
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.
1.
2.
ISMAP trick :
setup an IMG tag with an ISMAP attribute, and make a link label for an A tag
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 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.
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 Attributes Attribute Values What the attribute does
COORDS= HREF= [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] An absolute URL or a Relative URL Specifies the location and size of the hotzone Specifies the Link destination for the hotzone Shape Name = Rect for rectangle Circle Poly for Polygon Any string Specifies the size and shape of the hotzone Names the image map 36 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan
Logical Styles
(indicates the way text is used)
Emphasis ... Basic emphasis,
typically displayed in italics
. Strong ... Provides strong emphasis,
usually bold
. Citation ... Specifies a citation such as book titles, references, etc.
Usually displayed in italics
. Code ...
Used when displaying program code. I'm using it here whenever I give examples of the tags. Sample Output ... Used when displaying sample output from programs.
Keyboard Input ... Use for text input by the user. Variables ... Used for
variables or arguments to commands
. WWW Indicates an
abbreviated form
(e.g., WWW, HTTP, URL, etc.). Definition ... Used for
definitions
. Address
... Used for:the author's address and other contact details, and often force a line break before and after.
Block Quote
...Used for: Quotes, usually displayed as indented, and often force a line break before and after.
Physical Styles
Bold ... Used to
bold type
(generally the same as Strong). Italic ... Used to
italic type
(generally the same as Italic). Underline ... Underlines text (some old browsers don't do this) Typewriter Text ... Displays a monospaced names or HTML code. font, usually used for variable Strike-Through ... Strikes through text as if you're crossing it out. Big ... Displays text in a big font.
Small ... Displays text in a small font. Subscript ... Places text in subscript style . Superscript ... Places text in superscript style . Preformatted
...Places text as is, in preformatted format.
Center
Blink off.
An annoying tag that makes the text blink on and
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
Or a simpler way is to include