Scribd
Upload
52 views

07 XHTML Images & Multimedia - PR - TM

XHTML: Images and Multimedia Web Pages: Structure Topics Basic principles Any page content that isn't text requires the browser to be capable of handling it. Some content will have native support - Built in to browser - no extra software needed - Core image formats supported by all browsers - Increasingly HTML5 will allow native support for video / audio too.

Uploaded by

anitkumardas
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
52 views

07 XHTML Images & Multimedia - PR - TM

XHTML: Images and Multimedia Web Pages: Structure Topics Basic principles Any page content that isn't text requires the browser to be capable of handling it. Some content will have native support - Built in to browser - no extra software needed - Core image formats supported by all browsers - Increasingly HTML5 will allow native support for video / audio too.

Uploaded by

anitkumardas
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

www.netskills.ac.

uk

XHTML: Images and Multimedia


Web Pages: Structure

CSC1014

Topics
Basic principles Images in XHTML Image file types
GIF JPEG PNG

Other media objects HTML5?

Using <object> instead of <embed>

JISC Netskills

CSC1014

Basic principles
Any page content that isn't text requires the browser to be capable of handling it Some content will have native support
Built in to browser no extra software needed Core image formats supported by all browsers Increasingly HTML5 will allow native support for video/audio too Heavier duty work and proprietary objects Flash player, Java VM, Media player, QuickTime etc

Others will require plug-in/helper applications A browser may include some plug-ins by default
JISC Netskills

Google Chrome now includes Flash player and a PDF reader

CSC1014

Images in XHTML
Uses the replaced <img> tag
Browser retrieves image from location specified in src attribute Image is displayed in the page i.e. replacing the <img> tag
<img src="logo.gif" alt="My Logo" height="100" width="100" />

alt attribute used to display text/contextual information for screen readers (and if the image fails to load)

The src & alt attributes are required by the XHTML spec The image is not stored in the document
i.e. a web page with 5 images = 6 requests for files

JISC Netskills

CSC1014

Adding images to a web page


<html> <head> <title>A Simple Document</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <div> <img src="netskills.png" alt="JISC Netskills" /> </div> <h1>Creating Web Pages</h1> <p>A <strong>one-day workshop</strong> run by: <br /> <a href="http://www.netskills.ac.uk/">Netskills</a> </p> </body> </html>
JISC Netskills

src attribute specifies location of image file

CSC1014

Image attributes
Attribute
src

Purpose
Specifies a URL location (relative or absolute) from which an image file can be retrieved A meaningful description of an image to be used by screenreaders (or if image fails to load) Pixel dimensions for the space the browser should allow to display the image Provides a descriptive tag for the image

Notes
Images can be located anywhere the browser can access An alt attribute is required by the specification. It can be empty i.e. alt="" for purely decorative images Changing these does not alter the size and shape of the image. Use an image editor to resize images The text in a title attribute is usually rendered as a tool-tip when the mouse hovers over the image

alt

width & height title

JISC Netskills

CSC1014

Image file types


GIF(.gif)
256 colour palette good for solid graphics Can have transparent background Can be used for simple animation Loss-less compression

JPEG (.jpg)

16 million colour palette good for photos Lossy compression - take care Careful use = small file size + high quality Open-source format with loss-less comporession Conceived as an improvement on/replacement for GIF Handles higher resolution images, transparency etc.

PNG(.png)

JISC Netskills

CSC1014

GIF for block colours


Lossless GIF compression, plus small pallet, gives clean blocks of colour 3K Lossy JPEG compression, introduces blur (and can make file bigger) 4K

JISC Netskills

CSC1014

JPEG For photographic images


JPEG produces high images at comparatively small file sizes
Compression with no loss of quality

45K 8K

Over compressed

GIF compression increases size

4K

60K

JISC Netskills

CSC1014

PNG best of both worlds?


High resolution graphics with full palette and loss-less compression Transparency for use on coloured backgrounds etc..

PNG much better for illustrations and complex graphics Photographic images with complex colours usually better (and smaller) with carefully created JPEGs
http://www.turnkeylinux.org/blog/png-vs-jpg
JISC Netskills

CSC1014

Other media objects


Web documents can contain more than just images
Audio content sound files, streamed music etc. Video content movies, steamed live footage etc. Embedded applications Flash and Java apps etc.

Most cannot be played natively in the browser and require O/S support and/or a specific plug-in Common formats
Java, Adobe Flash, Apple QuickTime, Windows Media, MP3 audio etc

JISC Netskills

CSC1014

Adding media objects


Historically, most media formats were proprietary
Support depended on browser buy-in and licensing Has taken a long time to approach anything like a "standard" for including media objects in web pages

Originally proprietary tags added by browser manufacturers <applet> (Java applets) became part of HTML spec <embed> (Netscape) widely supported but never adopted in any standard HTML version Current, correct, way is to use <object> and <param>

JISC Netskills

CSC1014

Using <embed>
The most widely used method
Mostly due to support for older browsers (which don't exist now!)
<embed src="http://blip.tv/play/AYGJ7iIA" type="application/x-shockwave-flash" width="525" height="424" allowscriptaccess="always" allowfullscreen="true"> </embed>

Still used by major content services

Newer browsers still support it YouTube (and others) are starting to phase it out

JISC Netskills

CSC1014

Using <object>
Introduced by the W3C in HTML 4.01 as a generic way to include any external object in a page Supported by all current browsers, with some slight differences
type required by Internet Explorer data required by Firefox

<object width="525" height="424" type="application/x-shockwave-flash" data="http://blip.tv/play/AYGJ7iIA"> <param name="movie" value="http://blip.tv/play/AYGJ7iIA" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> </object>
JISC Netskills

CSC1014

HTML 5?
The proposed specification for HTML 5 includes improved support for media objects New logical tags e.g. <video> and <audio> Expectations that browsers will support playback of some formats without needing additional plugins Default format choice is unlikely to be resolved soon

Focus has been on widely used (proprietary) h.264 video format for MP4 Google Chrome announced a future removal support for h.264 (to focus on their own format) Mozilla won't include h.264 as it needs to be licensed

http://youtube-global.blogspot.com/2010/01/introducing-youtube-html5-supported.html
JISC Netskills

CSC1014

An HTML 5 example
The open source OGG Theora (currently) works in Firefox, Opera & Chrome h.264 works in Internet Explorer 9+ and Apple Safari & Chrome (still)
http://www.w3schools.com/html5/tag_video.asp <video width="640" height="480" src="microblog.ogg" type="video/ogg" controls="controls"> </video>
JISC Netskills

An HTML 5 capable browser will add controls and play the video.

CSC1014

Reference URLs
W3Schools tutorials
http://www.w3schools.com/media/ http://www.w3.org/TR/html5/ http://en.wikipedia.org/wiki/HTML5 http://en.wikipedia.org/wiki/HTML5_video

HTML 5 (draft) specification HTML 5 developments

JISC Netskills

You might also like