Scribd
Upload
64 views

Unit 1

The document discusses web graphics and provides information on various topics related to creating graphics for the web. It covers learning objectives, introduction to web graphics formats and tools, basics of HTML/CSS including tags for text formatting, lists, links, tables, frames and forms. It also discusses embedding images in HTML, colors in web pages, and cascading style sheets. The key topics covered are the basics of HTML/CSS, fundamentals of web graphics, and building simple websites.

Uploaded by

Vysakh Sreenivasan
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
64 views

Unit 1

The document discusses web graphics and provides information on various topics related to creating graphics for the web. It covers learning objectives, introduction to web graphics formats and tools, basics of HTML/CSS including tags for text formatting, lists, links, tables, frames and forms. It also discusses embedding images in HTML, colors in web pages, and cascading style sheets. The key topics covered are the basics of HTML/CSS, fundamentals of web graphics, and building simple websites.

Uploaded by

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

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
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;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
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 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
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 2

5 1 3
Guide the User’s eye
4
Keep a flat hierarchy

Use the power of hypertext linking

Design for screen


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-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".
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

You might also like