Unit 1

Web Graphics
Learning objectives
 Basics of HTML/CSS
 Fundamentals of Web Graphics
 Web Page Design Principles
 Building a simple website
 Image maps
 Adding multimedia to a website
Introduction
 Web graphics is all about creating graphics for

the web
 There are many standardized graphical formats
for use on the web. Ex: GIF, JPEG, PNG, SVG
etc., are some of the formats.
 A wide variety of programming/scripting
languages are available for creating graphics for
web including HTML, CSS, JavaScript, DHTML,
Java etc.,
Introduction
 Software tools that enable creation and

manipulation of graphics for web include
Photoshop, PaintshopPro, Flash, Director,
QuickTime, Dreamweaver, FrontPage etc.,
HTML/CSS
 HTML files have extensions .html or .htm

and can be created using a text editor like
‘notepad’ or a special editing software.
Sample.html
<html>
<head>
<title>sample</title>
</head>
<body>
This is a sample HTML page. <b>This text is
bold</b>
</body>
</html>
HTML/CSS
Points to remember while coding in HTML
 Every HTML program should have the <html> as start tag and
</html> as end tag
 HTML tags normally come in pairs like <b> and </b>. The first
tag in a pair is the start tag, the second tag is the end tag.
 The text between the start and end tags is the element content.
 HTML tags are not case sensitive
 The <head> tag is used to store some meta information about the
program.
 The content of the <title> tag is displayed in the tile bar of the
browser window.
 The purpose of the <body> tag is to define the HTML element that
contains the body of the HTML document. The content inside the
<body> </body> is what is displayed in the browser.
HTML/CSS
Text formatting using basic tags
<html> <br>
<body bgcolor="yellow"> <i>
<b>This text is bold</b> This text is italic
<br> </i>
<p align="center"> hi how are you</p> <br>
<br> This text contains
<pre> How you write and where <sub>
are subscript
preserved.</pre> </sub>
<br> <br>
<p> <font face="arial" color="blue"> This text contains
helloworld</font></p> <sup>
<br> superscript
<p><blockquote> Its raining heavily get an </sup>
umbrella<blockquote></p></blockquote> </body>
<br> </html>
<!..this is commented text that will not be
displayed..>
<h1>
This text is big
</h1>
HTML/CSS
Text formatting using basic tags:
HTML/CSS
Formatting using Lists:
Lists.html
<html>
<body>
<h4>An Unordered
List:</h4>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<h4>An ordered
List:</h4>
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<h4>Definition List:</h4>
<dl>
<dt>Sunday</dt>
<dd>day of sun</dd>
<dt>Tuesday</dt>
<dd>Day of Mars</dd>
</dl>
</body>
</html>
HTML/CSS
Creating Hyperlinks:
Tag Attribute Value description
Anchor 1.href URL Any resource on the web

<a> 2.target _blank A new blank page is opened
3.name name Any name, also called named
anchor
Ex:
<a href=”http:///www.yahoo.com”>clickme</a>
<a href=”http:///www.yahoo.com”><img src=”clickme.jpg”</img></a>
<a href=” http://www.yahoo.com” target=”_blank”>clickme</a>
<a href=”http://www.chapters.com#chapter1”>click to see chapter 1</a>
If you want to jump to subsection within the ‘same’ document then
use the following statement.
<a href=”#chapter1”>chapter 1</a>
HTML/CSS
Creating Tables:
Tables are defined with the <table> tag. A table is divided into rows
with the <tr> tag, and each row is divided into data cells with the
<td> tag.
<html> <tr>
<body> <th>First
<h4>Cell that spans two Name:</th>
columns:</h4>
<table border="1" <td>Mr.Lenovo</t
cellpadding=”10”> d>
<tr> </tr>
<th>Name</th> <tr>
<th <th
colspan="2">Telephone</th rowspan="2">Telep
> hone:</th>
</tr> <td>555 77
<tr> 854</td>
<td>Mr.Lenovo</td> </tr>
<td>555 77 854</td> <tr>
<td>555 77 855</td> <td>555 77
</tr> 855</td>
</table> </tr>
<h4>Cell that spans two </table>
rows :</h4> </body></html>
<table border="1"
cellspacing=”10”>
HTML/CSS
Creating Frames:
The <frameset> tag defines how to divide the window into frames.
Each frameset defines a set of rows or columns.
You cannot use the <body></body> tags together with
the <frameset></frameset> tags.
Tag Attrib Value description
ute
<frameset> 1.row 1.”20 1. divides the browser height into two

Set of frames s %,*” rows 20% and 80%
2.cols 2.”20 2. divides the browser width into two
%,*” columns 20% and 80%
<frame> 1. src 1. url 1. any web page or html page

A frame in a set 2. 2. 2. any name to identify
of frames name name
HTML/CSS
Creating Frames:
<html>
<frameset rows="20%,80%">
<frame src="sample.html">
<frameset cols="50%,50%">
<frame src="lists.html">
<frame src="tables.html">
</frameset>
</frameset>
</html>
HTML/CSS
Creating Forms:
The forms are used obtain user input. The form elements
are those with which user interacts. The elements are ‘textbox’,
‘checkbox’, ‘radio button’, ‘dropdown box’, ‘textarea’, ‘password
box’, and special buttons like ‘submit’, ‘reset’ etc.,
<html>
<body>
<form name="myform" action="www.mysite.com/register.jsp"
method="get">
name:
<input type="text" name="username">
<br>
password:
<input type="password" name="userpass">
<br><br>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
<br><br>
HTML/CSS
Creating Forms:
<textarea rows="5" cols="20">
The garden is beautiful.
</textarea>
<br><br>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
</body>
</html>
HTML/CSS
Embedding Images in HTML:
Tag Attribute Value Description
<img> 1.src 1. url 1.path of the image with its

2.width 2. pixels name
3.height 3.pixels 2.width of the image in
4.alt 4.text pixels
5.border 5.pixels 3.height in pixels
6.align 6.left,rig 4.alternative text when
7.hspace ht etc., mouse is on the image
8.vspace 7.pixels 5.width of the border in
8.pixles pixels
6.position with respect to
surrounding text
7.white space to the left and
right of the image
8.white space to the top and
bottom of the image
HTML/CSS
Embedding Images in HTML:
<html>
<body>
<p>
<img src ="graphics_48x48.png"
align ="left" width="48" height="48"
alt="model" hspace="10" vspace="10">
A paragraph with an image. The align
attribute of the image is set to "left".
The image will float to the left of this text.
</p>
<p>
<img src ="graphics_48x48.png"
align ="right" width="48" height="48"
alt="model" hspace="10" vspace="10">
A paragraph with an image. The align
attribute of the image is set to "right". The
image will float to the right of this text.
</p>
</body>
</html>
HTML/CSS
HTML Colors:
Ex:
<body bgcolor=”yellow”>
<body
bgcolor=”rgb(255,255,0)”>
<body bgcolor=”#ffff00”>
There are browser safe colors which are 216 standard

colors that are displayed exactly as they are created across
multiple platforms and browser types and versions.
HTML/CSS
Cascaded Style Sheets:
The idea behind style sheets is to separate formatting information from
content. External style sheet are saved with a .css extension. The type of
style sheets are
Browser default
External
Internal
Inline
The advantages are

• External style sheets enable you to change the appearance and layout of all the pages
in your web site, just by editing one single CSS document.
• A single style sheet can be used for formatting an entire web site.
• As a web developer you can define a style for each HTML element and apply it to as
many web pages as you want thus saving a lot of time.
• Provides more consistency to a web site
• Cascading order is advantageous as one rule over rides other.
HTML/CSS
The syntax of writing a style rule is

Selector {property: value}
Here ‘selector’ is any HTML element or tag and ‘property’ is

the attribute and ‘value’ is the value of the attribute. Property and
its value are separated by a colon. If there are more than one
property-value pairs they can be separated with a semicolon.
Ex: p{color:blue;font-family:verdana;font-size:24}
HTML/CSS
<html>
<head>
<style type="text/css">
p{color:blue;font-family:verdana;font-
size:14}
</style>
</head>
<body>
<p> Here ‘selector’ is any HTML
element or tag and ‘property’ is the
attribute and ‘value’ is the value of the
attribute.
Property and its value are separated
by a colon. If there are more than one
property value pairs they can be
separated with a
semicolon.</p></body>
</html>
HTML/CSS
Inline stylesheet overrides all other style sheets i.e the hierarchy is
Inline, Internal, and External in that order.
If you want to have an external style sheet, write the style rule
separately in a text editor and save it with the extension .css. To link an
external style sheet to a web page, write the following statement in the
<head> section of the web page.
<link rel=”stylesheet” type=”text/css” href=”one.css”>
HTML/CSS
The same style rule can be applied to more than one HTML element by
grouping the selectors as below.
Ex: h1,h2,h3,h4{ color:blue;font-family:verdana}
Class selector: If you wish to apply different styles to the same type of
HTML element then class selector can be used.
Ex: p.one{color:blue;font-family:verdana;font-size:24}
p.two{color:yellow;font-family:arial;font-size:14}
<p class=”one”>blablablablabla</p>
<p class=”two”>efghiefghiefghi</p>
Class selector can also be used such that one style rule is applicable to all the
elements that belong to a particular class i.e. by removing the selector itself
as below.
.one { color:yellow;font-family:arial;font-size:14}
HTML/CSS
ID Selector: You can also define styles for HTML elements with the id
selector. The id selector is defined as #. The style rule below will match
the element that has an id attribute with a value of "green":
#green {color:green}
The style rule below will match the p element that has an id with a value
of "para1":
p#para1{text-align: center;color: red}
HTML/CSS
CSS Text properties:
attribute Value description
color or hex value or rgb Sets the color of a text
color
value
normal Sets the distance between lines
number
line-height
length
%
normal Increases or decreases the spacing between
letter-spacing
length characters
left Aligns the text in an element
right
text-align
center
justify
length To set all the above background properties at
text-indent
% once
none Controls the letters in an element
text- capitalize
transform uppercase
lower case
normal Increases or decreases the space between words
word-spacing
Basics of web Graphics
The two variants of graphics are raster graphics and
vector graphics. Raster graphics uses pixel information for
representing and displaying the images or graphics, while
vector graphics uses mathematical representations of images.
Raster graphics is resolution dependent while vector graphics is
not. Graphics can be 2D or 3D.
Color Depth : The number of bits per pixel

Dithering : approximate the missing colors by creating colors from
the ones the browser already has.
Resolution : The number of pixels per inch of an image measure in
‘ppi’
Anti-Aliasing : The distinct division between pixels is called "alias,"
so many graphics programs use a technique called "anti-aliasing"
to create the illusion
Let usof smoothness.
understand the basics through the following topics
>Graphics file formats and standards - GIF, JPEG, PNG, SVG, and CGM
>Optimizing web graphics
>web graphics software
Let us understand the basics through the following topics
>Graphics file formats and standards - GIF, JPEG, PNG, SVG, and CGM
>Optimizing web graphics
>web graphics software
Graphics File formats:

GIF (Graphics Interchange Format):
•GIF uses a lossless compression technique called LZW
•The color depth of GIF is 8-bit allowing a palette of no more than
256 colors.
•Because of its limited color depth, GIF is not the best file format
for photographs or more complex graphics that have gradations of
color, such as shadows and feathering.
•With GIF files you can choose one color in an image to appear as
transparent in the browser.
•The GIF animation format lets you store multiple images and
timing information about the images in a single file.

JPEG (Joint Photographers Expert Group)
• best for photographs or continuous tone images.
•JPEG is the most common image format used by digital cameras
and other photographic image capture devices, and is the most
common format for storing and transmitting photographic images
on the World Wide Web.
•The registered MIME type for JPEG is image/jpeg.
PNG (Portable Network Graphics)
•Portable Network Graphics (PNG) is a bitmapped image format
that employs lossless data compression.
•It supports 8-bit indexed-color, 16-bit grayscale, and 24-bit true color
images.
SVG (Scalable Vector Graphics):
• It is a vector graphics file format that enables two-dimensional
images to be displayed in XML pages on the Web.
•It has smaller files size than regular bitmapped graphics such as
GIF and JPEG files
•resolution independence
PNG (Portable Network Graphics)
•Portable Network Graphics (PNG) is a bitmapped image format
that employs lossless data compression.
•It supports 8-bit indexed-color, 16-bit grayscale, and 24-bit true color
images.
Optimizing Web Graphics:

•Consider breaking a large image up into smaller ones, and linking
them together with a table.
•By discarding information about colors that aren't used in the image, the
file size can sometimes be greatly reduced, with no loss in quality.
resolution independence
•GIFs may also be made transparent.
•PNGs compress dithered images better than GIFs
•use the interlaced GIF format.
Web Graphics software:
For editing raster graphics…..
Adobe PhotoShop
Paint Shop Pro
ULead PhotoImpact
Flex Gif Animator
For editing Vector Graphics…….
Corel Draw
Adobe Illustrator
Adobe Flash
Web Page Design and Site Building
Web Site Design Principles:
Proximity
Alignment
Repetition
Contrast
Influence of Browsers on Design:
One of the big challenges facing a web author is designing pages
that display properly in multiple browsers.
•One option is what is known as Lowest Common Denominator Coding.
•Coding for multiple screen resolutions
Page when viewed at 924x531 Page when viewed at 541x 698
Active White Space
Bandwidth concerns:
Design for the medium:
Design the whole site:

Design for User
Design for Interaction
Design for location 2
5 1 3
Guide the User’s eye
4
Keep a flat hierarchy
Use the power of hypertext linking
Design for screen

Planning the site:
Identify the content goal

Analyze your audience
Build a web site development team
Diagram the site
Linear Structure
Planning the site:
Diagram the site

Tutorial Structure
Concept-1 Concept-2 Concept-3
Web Structure
Planning the site:
Diagram the site

Web Structure
Planning the site:
Diagram the site

Hierarchical Structure
Planning the site:
Diagram the site

Cluster Structure
Planning the site:
Diagram the site

Catalogue Structure
Planning the site navigation:
Creating Page Templates:
Template-1 Template-2 Template-3 Template-4
Template-5 Template-6 Template-7

Image maps
An image map in XHTML or Web Development is an image that has

different clickable elements within the same single image.
To make a client side image you need an image, a list of coordinates
designating hotspots on the image, and the document URL associated with
each hotspot.
<img src="image" usemap="#map" />
<map name="map" id="map">
<area shape="rect" coords="0,10,20,40" href="URL" alt="click here" />
</map>
When you create an image map, you are creating an area that is clickable
on the image.
There are three shapes you can create:
rect - a rectangle or four sided figure
poly - a polygon or multisided figure
circle - a circle
Image maps
<map name="name">
<area shape="rect" coords="0,0,10,15" href="http://abcd.com/">
<area shape="poly" coords="10,0,14,3,7,10" href="http://abcd.com/">
<area shape="circle" coords="20,10,5" href="http://abcd.com/">
</map>
<img src="image" usemap="#name">
Adding Multimedia to a website
<object classid=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B”
Width=”150” height = “150”
codebase=”http://www.mywebsite.com/oneactiveX”>
<param name = “src” value=”hi.mov”>
The "object" tag is used to embed an object within the document.

"Classid" is used to specify the location of the objects data. Microsoft
Internet Explorer versions 3.0 and later use the "codebase" attribute to
detect which version of the Flash Player/ QuickTime player ActiveX Control
is installed on a user's computer. If the user's version is earlier than the
version specified by "codebase", Internet Explorer can automatically
download and install the newer version of the Flash Player/QuickTime
player from the location specified in "codebase".
Text for web:
Using an OpenDoc component called WEFT (web embedding font
tool) Microsoft already offers Font embedding capabilities.
Images for web:
current releases of browsers recognize three image formats GIF,

JPEG, PNG, without resorting to special plug-ins. These formats use built-in
compression algorithms to reduce file size.
Sound for web:
Internet Explorer offer the QuickTime plug-in for playing AIFF,

MIDI, WAV and AU formats
<embed src="musicfile.mid" width=144 height=60 autostart=true
repeat=true loop=true>
Animation for web:
’GIF89a’ specifies by putting multiple images, or frames, into a
single file and display them with a programmable delays between them.
> Macromedia introduced Shockwave to allow animation and
interactivity. The extension is ‘.swf’.
> The QuickTime movie format includes the ability t create Virtual
Reality files and also displayed on a web page via a player. QuickTime,
VRML browsers, MPEG, and other streaming technologies for animation,
sound and video are being developed which will add power of multimedia
to the World Wide Web.
THANK YOU

Unit 1

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 1

Uploaded by

Copyright:

Available Formats

Web Graphics

 Web graphics is all about creating graphics for

 Software tools that enable creation and

 HTML files have extensions .html or .htm

Anchor 1.href URL Any resource on the web

<frameset> 1.row 1.”20 1. divides the browser height into two

<frame> 1. src 1. url 1. any web page or html page

<img> 1.src 1. url 1.path of the image with its

There are browser safe colors which are 216 standard

The advantages are

The syntax of writing a style rule is

Here ‘selector’ is any HTML element or tag and ‘property’ is

Color Depth : The number of bits per pixel

Graphics File formats:

Graphics File formats:

Optimizing Web Graphics:

Active White Space

Design for the medium:

Design the whole site:

Design for User

Design for Interaction

Design for location 2

Use the power of hypertext linking

Design for screen

Identify the content goal

Diagram the site

Concept-1 Concept-2 Concept-3

Diagram the site

Diagram the site

Diagram the site

Diagram the site

Template-1 Template-2 Template-3 Template-4

Template-5 Template-6 Template-7

An image map in XHTML or Web Development is an image that has

The "object" tag is used to embed an object within the document.

Images for web:

current releases of browsers recognize three image formats GIF,

Sound for web:

Internet Explorer offer the QuickTime plug-in for playing AIFF,

You might also like