Web Programming I — Week 3

Mikheil Rukhaia

International Black Sea University,

Tbilisi, Georgia

September 10, 2018

Images and Objects Inline Frames Laboratory Work

Outline

1 Images and Objects

2 Inline Frames

3 Laboratory Work

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 2 / 32
Images and Objects Inline Frames Laboratory Work

Images and Objects

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 3 / 32
Images and Objects Inline Frames Laboratory Work

Images

I Main formats in web are JPEG, GIF, PNG, SVG.

I Images may slow down your web sites.

I Choose the image format correctly, do not frustrate users.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 4 / 32
Images and Objects Inline Frames Laboratory Work

Image formats

I Bitmapped graphics divide a picture into a grid of pixels and

specify the color of each pixel (JPEG, GIF, TIFF, PNG, and
BMP).

I Vector graphics break the image into lines and shapes, store the
lines as coordinates, and fill the spaces between the lines with
color (Flash, Silverlight, and SVG).

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 5 / 32
Images and Objects Inline Frames Laboratory Work

Bitmap images

I Most static images on the Web are bitmapped images.

I Images on the Web can show a maximum of 72 pixels per inch.

I Images used in print are usually higher resolution, 300 dots per
inch.

I You can save an image that is 300 dots per inch at 72 pixels per
inch for the Web, but not vice versa.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 6 / 32
Images and Objects Inline Frames Laboratory Work

GIF images

I GIF: Graphics Interchange Format.

I Up to 256 colors out of 16 million.

I Each pixel of the image is one of these 256 colors.

I Based on indexed color format: colors are saved in lookup table

and each pixel references the color information in it.

I GIFs are best suited for images with large flat areas of color.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 7 / 32
Images and Objects Inline Frames Laboratory Work

GIF images (ctd.)

I Fewer colors in the image results in smaller GIF files.

I If there are less than 16 colors, use 4-bit GIF (half the size of an
8-bit GIF).

I GIFs can represent transparent background: in parts of the image

that are the specified colors, the background will be allowed to
show through.

I Make transparency color as close to the background color as

possible to avoid pixelated corners.

I GIFs have lossless compression (by looking for consecutive

pixels that share the same color).

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 8 / 32
Images and Objects Inline Frames Laboratory Work

Animated GIFs

I GIFs can store more than one frame, rotate between them and
create animation.

I Works well if your animated image contains large areas of flat

color.

I Be careful with animations: they are fun on personal home page,

but not on sites of large companies.

I Use animations if they give additional information to the user.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 9 / 32
Images and Objects Inline Frames Laboratory Work

JPEG images

I JPEG: Joint Photographic Experts Group Format.

I Developed as a standard for storing photographs with wide range

of colors.

I Has lossy compression (by discarding color data that people

would not normally perceive).

I Do not work well with large amounts of flat color, or

high-contrast hard edges (such as lettering and line drawings).

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 10 / 32
Images and Objects Inline Frames Laboratory Work

PNG images

I PNG: Portable Network Graphics.

I Designed for the same uses as GIF images, because GIF

technology was not freely available since 90s.

I 8-bit PNG has the same limitations as an 8-bit GIF.

I PNG-24 solves some of the disadvantages with the GIF format

No restriction on the number of colors.
A map (analogy to lookup table) is used to provide different
levels of transparency for every pixel.
Can display images 8× faster using two-dimensional sampling.
Contains gamma correction information to allow color
adjustment on different monitors and platforms.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 11 / 32
Images and Objects Inline Frames Laboratory Work

Keep file sizes small

I Use JPEGs for photo-realistic pictures with a lot of detail, or

subtle shade differences you want to preserve.

I Use GIFs for images with flat color, and hard edges, such as
diagrams, text, or logos.

I Instead GIFs use PNGs if you need advanced transparency or

more colors.

I If you have to include many high-quality images on your site,

create their thumbnails and add links to the larger versions.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 12 / 32
Images and Objects Inline Frames Laboratory Work

Vector images

I Vector formats are easy to scale to different sizes without loosing

quality.

I Most popular vector graphics format on the web is Flash.

I Scalable Vector Graphics (SVG) is based on XML, but not yet

widely used.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 13 / 32
Images and Objects Inline Frames Laboratory Work

Adding images on site

I Use <img> to add an image to a site.

I src attribute indicates the URL of the image.

I alt indicates alternate description in case image does not load.

I Create a separate directory for your images.

I Never link to images on other sites, images for your site should
always reside on your server.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 14 / 32
Images and Objects Inline Frames Laboratory Work

Attributes of <img>

I align used to align the image within the page or the element.

I border specifies the width of the border around the image in

pixels.

I height and width specify the height and width of the image
(pixel or percentage).

I hspace and vspace can be used to control the amount of

whitespace around an image.

I ismap and usemap are used with image maps.

I longdesc indicates the URL of a document containing a

description for the image (not widely supported).
Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 15 / 32
Images and Objects Inline Frames Laboratory Work

Audio and video

I The simplest way to include audio and video in your page is to

use youtube or similar web services.

I If this is not an acceptable way, then you should get used to

<audio> and <video> elements.

I The two tags are similar, so whatever we say about <video>,

applies to <audio> as well.

I <video> works like the <img> element with src, height,

and width attributes.

I Additionally it has the following attributes: preload,

autoplay, loop, muted, poster, controls

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 16 / 32
Images and Objects Inline Frames Laboratory Work

Audio and video (ctd.)

I preload indicates that the browser should begin to download

the video referenced in the src attribute even before the user
presses Play (ignored on mobile devices).

I poster defines an image used as a placeholder until the video

plays; if no poster specified, the first frame of the video is used.

I controls indicates whether the browser should include

playback controls.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 17 / 32
Images and Objects Inline Frames Laboratory Work

Media battle

I Audio and video elements are not well supported even in modern
browsers.

I The reason is a battle between commercial and open-source

worlds.

I Apple and Microsoft stand for patent-encumbered MPEG4 and

MP3 formats, while Google, Opera, and Mozilla prefer free,
open, and royalty-free formats such as OGG.

I Solution was to use flash, but apple refused to add its suppot on
iOS.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 18 / 32
Images and Objects Inline Frames Laboratory Work

Adding other objects

I To add audio/video content, Java applets, etc., to web page, often

<object> element is used.

I It was initially introduced by Microsoft to support its Active X

technology.

I To embed an object into a page, you need to specify:

The location of the code used to display or play the object.
The actual data to be rendered.
Any additional values the object needs at runtime.

I The values are specified using <param> element.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 19 / 32
Images and Objects Inline Frames Laboratory Work

Attributes of <object>

I data and type specify the URL and MIME type for a file to
process or play.

I archive takes space separated list of URLs as values and is

used to load Java-related archives.

I classid specifies the implementation of the object (e.g. Java

class).

I codebase specifies alternative base for relative URLs.

I codetype specifies MIME type of the object (relevant only if

classid is specified).

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 20 / 32
Images and Objects Inline Frames Laboratory Work

Attributes of <object> (ctd.)

I declare is used to declare an object without instantiating it

(forward reference).

I height and width specify the height and width of an object.

I border, hspace and vspace: same as for <img>.

I standby specifies a text string that is displayed while the

object is loading.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 21 / 32
Images and Objects Inline Frames Laboratory Work

Attributes of <param>

I name and value attributes act as a name/value pair.

I valuetype specifies type of the parameter: data (any string),

ref (URL), object.

I type is a MIME type of the parameter.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 22 / 32
Images and Objects Inline Frames Laboratory Work

Using images as links

I To create a clickable hyperlink with images, simply place

<img> element inside <a>.

I If you created image using <object> element, placing it inside

<a> will work as well.

I Note that most content of <object> cannot be turned into a

hyperlink (flash, audio/video, etc.).

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 23 / 32
Images and Objects Inline Frames Laboratory Work

Inline Frames

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 24 / 32
Images and Objects Inline Frames Laboratory Work

Inline frames

I Inline frames can appear anywhere within any document.

I Inline frames can be created using <iframe> element and its

src attribute.

I Like an image, the inline frame can have text flowing around it
and it is possible to set borders and margins around the frame.

I <iframe> element can contain a text to show if browser does

not support inline frames, but even if the text is not given, still it
has to have the closing tag.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 25 / 32
Images and Objects Inline Frames Laboratory Work

Inline frames (ctd.)

I Example:
<body>
<h1>Inline frame</h1>
<p>This is an inline frame
<iframe src="iframe.html">
Error! please upgrade your browser.
</iframe>
and text continues as it would do in
case of images.
</p>
</body>

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 26 / 32
Images and Objects Inline Frames Laboratory Work

Attributes of <iframe>

I Unfortunately, there is no CSS style available for iframes, use

element attributes for basic formatting.

I name attribute is very important for iframe (e.g. necessary to

link between iframes) and it is recommended to always use them.

I width and height can be used to specify inline frame

dimensions in pixels or percentage.

I align can be used to adjust inline frame on left, right,

top, middle or bottom with the surrounding text.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 27 / 32
Images and Objects Inline Frames Laboratory Work

Inline frames (ctd.)

I frameborder specifies whether to show borders (1 or 0).

I marginwidth and marginheight specifies margins

between iframe’s border and its contents.

I noresize="noresize" prevents the user from resizing the

iframe.

I scrolling specifies whether scrolling is allowed and when to

show the scrollbar (yes, no and auto).

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 28 / 32
Images and Objects Inline Frames Laboratory Work

Links between iframes

I Name of an iframe is used as a value of target attribute of

<a> element to indicate the iframe where the new page should
be loaded.

I target attribute can have the following values:

Value Purpose
_self Loads the page into the current frame.
_blank Loads a page into a new window (same if using
a non existing target).
_parent Loads the page into the parent iframe.
_top Loads the page into the browser window.

I Always use _top or _blank in the links to external sites.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 29 / 32
Images and Objects Inline Frames Laboratory Work

Laboratory Work

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 30 / 32
Images and Objects Inline Frames Laboratory Work

Exercises

I Add some images to your CV web page from the first lab work.

I Add some other objects (movie, music, flash) to your CV web

page by your will (e.g. “my favorite music”).

I Create a photography web page using inline frame, that contains

thumbnails of pictures and loads the full sized pictures into the
inline frame.

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 31 / 32
Images and Objects Inline Frames Laboratory Work

Discussion?!

Web Programming I — Week 3 M. Rukhaia International Black Sea University September 10, 2018 32 / 32