Web Graphics
Download
Report
Transcript Web Graphics
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>
<body bgcolor="yellow">
<b>This text is bold</b>
<br>
<p align="center"> hi how are you</p>
<br>
<pre>
How you write and where
are
preserved.</pre>
<br>
<p> <font face="arial" color="blue">
helloworld</font></p>
<br>
<p><blockquote> Its raining heavily get an
umbrella<blockquote></p></blockquote>
<br>
<!..this is commented text that will not be
displayed..>
<h1>
This text is big
</h1>
<br>
<i>
This text is italic
</i>
<br>
This text contains
<sub>
subscript
</sub>
<br>
This text contains
<sup>
superscript
</sup>
</body>
</html>
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
Anchor 1.href
<a>
2.target
3.name
description
URL
Any resource on the web
_blank A new blank page is opened
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>
Creating Tables:
HTML/CSS
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>
<body>
<h4>Cell that spans two
columns:</h4>
<table border="1"
cellpadding=”10”>
<tr>
<th>Name</th>
<th
colspan="2">Telephone</th
>
</tr>
<tr>
<td>Mr.Lenovo</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two
rows :</h4>
<table border="1"
cellspacing=”10”>
<tr>
<th>First
Name:</th>
<td>Mr.Lenovo</t
d>
</tr>
<tr>
<th
rowspan="2">Tele
phone:</th>
<td>555 77
854</td>
</tr>
<tr>
<td>555 77
855</td>
</tr>
</table>
</body></html>
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
ute
description
<frameset>
Set of frames
1.row 1.”20
s
%,*”
2.cols 2.”20
%,*”
1. divides the browser height into two
rows 20% and 80%
2. divides the browser width into two
columns 20% and 80%
<frame>
A frame in a set
of frames
1. src
2.
name
1. any web page or html page
2. any name to identify
1. url
2.
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
2.width
3.height
4.alt
5.border
6.align
7.hspace
8.vspace
1. url
2. pixels
3.pixels
4.text
5.pixels
6.left,rig
ht etc.,
7.pixels
8.pixles
1.path of the image with its
name
2.width of the image in
pixels
3.height in pixels
4.alternative text when
mouse is on the image
5.width of the border in
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 Colors:
HTML/CSS
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
Cascaded Style Sheets:
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
Cascaded Style Sheets:
<html>
<head>
<style type="text/css">
p{color:blue;font-family:verdana;fontsize: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
Cascaded Style Sheets:
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
Cascaded Style Sheets:
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
Cascaded Style Sheets:
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
Cascaded Style Sheets:
CSS Text properties:
attribute
Value
description
color or hex value or rgb
value
Sets the color of a text
Sets the distance between lines
line-height
normal
number
length
%
letter-spacing
normal
length
Increases or decreases the spacing between
characters
Aligns the text in an element
text-align
left
right
center
justify
text-indent
length
%
To set all the above background properties at once
Controls the letters in an element
texttransform
none
capitalize
uppercase
lower case
normal
Increases or decreases the space between words
color
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
smoothness.
Let usof
understand
the basics through the following topics
>Graphics file formats and standards - GIF, JPEG, PNG, SVG, and CGM
>Optimizing web graphics
>web graphics software
Basics of web Graphics
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.
Basics of web Graphics
Graphics File formats:
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.
Basics of web Graphics
Graphics File formats:
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.
Basics of web Graphics
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.
Basics of web Graphics
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
Web Page Design and Site Building
Influence of Browsers on Design:
Page when viewed at 924x531
Page when viewed at 541x 698
Web Page Design and Site Building
Influence of Browsers on Design:
Active White Space
Bandwidth concerns:
Design for the medium:
Design the whole site:
Web Page Design and Site Building
Influence of Browsers on Design:
Design for User
Design for Interaction
Design for location
Guide the User’s eye
2
5
Keep a flat hierarchy
Use the power of hypertext linking
Design for screen
1
4
3
Web Page Design and Site Building
Planning the site:
Identify the content goal
Analyze your audience
Build a web site development team
Diagram the site
Linear Structure
Web Page Design and Site Building
Planning the site:
Diagram the site
Tutorial Structure
Concept-1 Concept-2
Concept-3
Web Structure
Web Page Design and Site Building
Planning the site:
Diagram the site
Web Structure
Web Page Design and Site Building
Planning the site:
Diagram the site
Hierarchical Structure
Web Page Design and Site Building
Planning the site:
Diagram the site
Cluster Structure
Web Page Design and Site Building
Planning the site:
Diagram the site
Catalogue Structure
Web Page Design and Site Building
Planning the site navigation:
Web Page Design and Site Building
Creating Page Templates:
Template-1
Template-2
Template-5
Template-6
Template-3
Template-4
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".
Adding Multimedia to a website
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>
Adding Multimedia to a website
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