Unit 1

COMPUTER MULTIMEDIA AND ANIMATION
UNIT-1
WEB DESIGN
Origin and evolution of HTML

HTML was created by Sir Tim Berners-Lee in late 1991 but was not officially released. It was
published in 1995 as HTML 2.0. HTML 4.01 was published in late 1999 and was a major version
of HTML. HTML 4.01, which is widely used and was a successful version of HTML before HTML
5.0, which is currently released and used worldwide. HTML 5 can be said for an extended version
of HTML 4.01, which was published in the year 2012.
Basic Syntax
<! DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
 The <!DOCTYPE html> declaration defines that this document is an HTML document
 The <html> element is the root element of an HTML page or it is the enclosing tag
 The <head> element contains heading of the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's title
bar)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph
Basic Text Markup Tags

HTML contains several elements for defining text with a special meaning.
 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
Page 1 of 20
Eg:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Text Tags </h2>

<strong>Hello World </strong>
<br>

<small>Hello World</small>
<br>

<mark>Hello World</mark>
</body>
</html>
Output:
Hello World
Hello World
Hello World
Images
The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
 src - Specifies the path to the image
 alt - Specifies an alternate text for the image
Syntax : <img src="url" alt="alternatetext">
Eg
<!DOCTYPE html>
<html>
<body>
<img src="New.jpg” alt="HTML5 Icon" width="150" height="150">
</body>
</html>
Page 2 of 20
Lists in HTML
HTML lists allow web developers to group a set of related items in lists.
It supports two types of lists:
1. Unordered List : Arranges items with Bullets

 Item
 Item
 Item
2. Ordered List : Arranges items with numbers

1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List: An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag
Eg :
<ul>
<li>B.CA</li>
<li>B.COM</li>
<li>B.BA</li>
</ul>
Ordered HTML List: An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
<ol>
<li>B.CA</li>
<li>B.COM</li>
<li>B.BA</li>
</ol>
Tables in HTML : HTML tables allow web developers to arrange data into rows and columns.
Each table cell is defined by a <td> and a </td> tag. (td stands for table data)
Each table row starts with a <tr> and ends with a </tr> tag.(tr stands for table row)
Table header is added using <th> tag instead of the <td> tag: (th stands for table header)
Page 3 of 20
Eg:
<table border=2>
<tr>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Amar</td>
<td>18</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Bhavana</td>
<td>19</td>
<td>Mumbai</td>
</tr>
</table>
Output :
Name Age City

Amar 18 Bangalore
Bhavana 19 Mumbai
HTML FORM: An HTML form is used to collect user input. The user input is most often sent to a
server for processing.
The HTML <form> element is used to create an HTML form for user input:
<form> form elements </form>
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of

many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or

more of many choices)
Page 4 of 20
<input type="submit"> Displays a submit button (for submitting the
form)
<input type="button"> Displays a clickable button
The HTML <form> element can contain one or more of the following form elements:
 <input>
 <label>
 <select>
 <textarea>
 <button> etc
The <input> element can be displayed in several ways, depending on the type attribute.
The <label> element defines a label for several form elements. The for attribute of the <label> tag
should be equal to the id attribute of the <input> element to bind them together.
The <select> element defines a drop-down list: The <option> elements defines an option that can
be selected.
The <textarea> element defines a multi-line input field (a text area):
<!DOCTYPE html>
<html>
<body>
<h2>Submit Button</h2>
<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-
handler:</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="TimBerners"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Lee"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click "Submit", the form-data will be sent to a page called /action_page.php".</p>
</body>
</html>
Output :Submit Button
The input type="submit" defines a button for submitting form data to a form-handler:
First name:
TimBerners
Last name:
Lee
Submit
If you click "Submit", the form-data will be sent to a page called "/action_page.php".
Page 5 of 20
Features of HTML5
HTML5 introduces a number of new elements and attributes that can help you in building modern
websites. Here is a set of some of the most prominent features introduced in HTML5.
 New Semantic Elements − like <header>, <footer>, and <section>.
 Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced
for <input> tag.
 Persistent Local Storage –Helps to achieve without resorting to third-party plugins.
 WebSocket − A next-generation bidirectional communication technology for web
applications.
 Server-Sent Events − HTML5 introduces events which flow from web server to the web
browsers and they are called Server-Sent Events (SSE).
 Canvas − supports a two-dimensional drawing surface that you can program with JavaScript.
 Audio & Video –We can embed audio or video on your webpages without resorting to third-
party plugins.
 Geolocation − Now visitors can choose to share their physical location with your web
application.
 Microdata −To create your own vocabularies beyond HTML5 and extend your web pages
with custom semantics.
 Drag and drop − Drag and drop the items from one location to another location on the same
webpage.
CSS: CSS is the acronym for "Cascading Style Sheet".It is used to control the style of a web
document in a simple and easy way.
Advantages of CSS
 CSS saves time − we can write CSS once and then reuse same sheet in multiple HTML
pages
 Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every
time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less
code means faster download times.
 Easy maintenance − To make a global change, simply change the style, and all elements in
all the web pages will be updated automatically.
 Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you
can give a far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility − Style sheets allow content to be optimized for more than
one type of device. By using the same HTML document, different versions of a website can
be presented for handheld devices such as PDAs and cell phones or for printing.
 Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to
make them compatible to future browsers.
Who Creates and Maintains CSS?

CSS is created and maintained through a group of people within the W3C called the CSS Working
Group. The CSS Working Group creates documents called specifications. When a specification has
been discussed and officially ratified by the W3C members, it becomes a recommendation.These
ratified specifications are called recommendations because the W3C has no control over the actual
implementation of the language. Independent companies and organizations create that software.
Page 6 of 20
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts −
 Selector − A selector is an HTML tag at which a style will be applied. This could be any tag
like <h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes
are converted into CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows −
selector { property: value }
Example − You can define a table border as follows −

table{ border :1px solid #C00; }
Types of Selectors
1. The Type Selectors: Used to add a format to a particular type of element

example to give a colour to all level 1 headings
h1 {
color: #36CFFF;
}
2. The Universal Selectors

Rather than selecting elements of a specific type, the universal selector simply applies the format to
complete document
Example to make content of every element in our document in black.
*{
color: #000000;
}
Page 7 of 20
3. The Descendant Selectors
Suppose you want to apply a style rule to a particular element only when it lies inside a particular
element, we use descendant selector.
Example to apply <em> element only when it lies inside <ul> tag.
ul em {
color: #000000;
}
4. The Class Selectors

To define style rules based on the class attribute of the elements, we use class selectors
Example: This rule renders the content in black for every element with class attribute set to black in
our document.
.black {
color: #000000;
}
5. The ID Selectors
You can define style rules based on the id attribute of the elements. All the elements having
that id will be formatted according to the defined rule.
Example: This rule renders the content in black for every element with id attribute set to black in our
document.
#black {
color: #000000;
}
6. The Child Selectors

You have seen the descendant selectors. There is one more type of selector, which is very similar
to descendants but have different functionality. Consider the following example −
body > p {
color: #000000;
}
This rule will render all the paragraphs in black if they are direct child of <body> element. Other
paragraphs put inside other elements like <div> or <td> would not have any effect of this rule.
7. The Attribute Selectors

You can also apply styles to HTML elements with particular attributes. The style rule below will
match all the input elements having a type attribute with a value of text −
input[type = "text"] {
color: #000000;
}
Page 8 of 20
Types of CSS
CSS (Cascading Style Sheet) describes the HTML elements which are displayed on screen,
paper, or in other media. It saves a lot of time. It controls the layout of multiple web pages at one
time. It sets the font-size, font-family, color, background color on the page.
It allows us to add effects or animations to the website. We use CSS to

display animations like buttons, effects, loaders or spinners, and also animated backgrounds.
Without using CSS, the website will not look attractive. There are 3 types of CSS which are below:
o Inline CSS
o Internal/ Embedded CSS
o External CSS
1. Internal CSS
The Internal CSS has <style> tag in the <head> section of the HTML document. This CSS style is
an effective way to style single pages. Using the CSS style for multiple web pages is time-consuming
because we require placing the style on each web page.
Page 9 of 20
We can use the internal CSS by using the following steps:
1. Firstly, open the HTML page and locate the <head>

2. Put the following code after the<head>
<style type="text/css">
3. Add the rules of CSS in the new line.
Eg:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-color: black;
7. }
8. h1 {
9. color: red;
10. padding: 50px;
11. }
12. </style>
13. </head>
14. <body>
15. <h2>CSS types</h2>
16. <p>Cascading Style sheet types: inline, external and internal</p>
17. </body>
18. </html>
Pros of Internal CSS
o Internal CSS cannot upload multiple files when we add the code with the HTML page.
Cons of Internal CSS:
o Adding code in the HTML document will reduce the page size and loading time of the
webpage.
2. External CSS
In external CSS, we link the web pages to the external .css file. It is created by text editor. The
CSS is more efficient method for styling a website. By editing the .css file, we can change the whole
site at once.
Page 10 of 20
To use the external CSS, follow the steps, given below:
1. Create a new .css file with text editor, and add Cascading Style Sheet rules too.
2. Add a reference to the external .cssfile right after <title> tag in the <head> section of HTML
sheet: <link rel="stylesheet" type="text/css" href="style.css" />
Pros of External CSS:

o Our files have a cleaner structure and smaller in size.
o We use the same .css file for multiple web pages in external CSS.
Cons of External CSS:
o The pages cannot be delivered correctly before the external CSS is loaded.
o In External CSS, uploading many CSS files can increase the download time of a website.
3. Inline CSS
Inline CSS is used to style a specific HTML element. Add a style attribute to each HTML tag without
using the selectors. Inline CSS in HTML is useful in some situations. In the following example, we
have used the inline CSS in <p> and <h1> tag.
1. <!DOCTYPE html>
2. <html>
3. <body style="background-color:white;">
4. <h1 style="color:Red;padding:20px;">CSS Tutorials</h1>
5. <p style="color:blue;">It will be useful here.</p>
6. </body>
7. </html>
Pros of inline CSS:
o We can create CSS rules on the HTML page.
o We cannot create and upload a separate document in inline CSS.
Cons of inline CSS:
o Inline CSS, adding CSS rules to HTML elements is time-consuming
o It styles multiple elements at the same time which can affect the page size and download
time of the page.
CSS Font
CSS Font property is used to control the look of texts. By the use of CSS font property you can
change the text size, color, style etc.
These are some important font attributes:
1. CSS Font color: This property is used to change the color of the text. (standalone attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
Page 11 of 20
Example :
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
CSS Colors : Colors are specified using predefined color names, or RGB, HEX values
Background Colour
<h1 style="background-color:DodgerBlue;">Hello World</h1>
Example to set text colour
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Example to set border colour
Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Page 12 of 20
CSS Forms
The look of an HTML form can be greatly improved with CSS .
CSS can be used to easily alter width, add padding, border, text area formatting etc.
• Cell width
• Padded inputs
• Bordered input
• Colored input
• Focused input
• Icon/Image input
• Animated search Input
Cell Width: We can set the Width by adjusting percentage of width
<style>
input {
width: 100%;
}
</style>
Padded Inputs:
• They are used to add space inside Text box
Input [type=text]
{
width: 100%;
padding: 10px 20px;
}
Border property :
It is used to change the border size and color, and use the border-radius property to add rounded
corners:
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
background-color property : It is used to add a background color to the input, and
the color property to change the text color:
Page 13 of 20
input[type=text] {
background-color: Blue;
color: white;
}
By default, some browsers will add a blue outline around the input when it gets focus (clicked on).
We can remove this behavior by adding outline: none; to the input.
Use the: focus selector to do something with the input field when it gets focus:
input [type=text]:focus {
border: 3px solid #555;
}
If we want an icon inside the input, use the background-image property and position it with
the background-position property.
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
padding: 20px 50px;
border: 2px solid red;
background-color:white;
color:white;
background-image: url('bca4sem.jpg');
background-position: 10px 10px;
background-repeat: no-repeat;
}
input[type=text]:focus {
background-color:green;
}
</style>
</head>
<body>
<form>
<label for=“Fname">First Name</label>
<input type="text" id="name" name="fname">
</form>
</body>
</html>
Page 14 of 20
We can use the CSS transition property to animate the width of the search input when it gets
focus
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a
container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The
<div> tag is easily styled by using the class or id attribute. Any sort of content can be put inside the
<div> tag!
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body>
</html>
The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id
attribute. The <span> tag is much like the <div> element, but <div> is a block-level element and
<span> is an inline element.
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
Page 15 of 20
<div> <span>
The <div> tag is a block level element. The <span> tag is an inline element.
It is best to attach it to a section of a web It is best to attach a CSS to a small section of a line
page. in a web page.
It accepts align attribute. It does not accept align attribute.
This tag should be used to wrap a This tag should be used to wrap any specific word
section, for highlighting that section. that you want to highlight in your webpage.
Features of CSS3 : CSS3 is a latest standard of css earlier versions(CSS2).

Some of the key modules of CSS3 are:
 Box model
 Image values and replaced content
 Text effects
 Selectors
 Backgrounds and borders
 Animations
 User interface (UI)
 Multiple column layouts
 2D/3D transformations
1. Selectors: Selectors allow the designer to select more precise levels of the web page..
2. Text Effects and Layout: With CSS3, we can change the justification of text, make whitespace
adjustments to the document, and style the hyphenation of words.
3. First-Letter and First-Line Pseudo-Classes: CSS 3 includes properties that help with kerning
(adjusting the spacing between characters to achieve a visually pleasing effect) and positioning
drop-caps (large decorative capital letters at the start of a paragraph).
4. Paged Media and Generated Content: CSS 3 has additional choices in Paged Media, such as
page numbers and running headers and footers. CSS offers additional properties for printing
generated content, including properties that specifically address cross-references and footnotes.
5. Multi-Column Layout: This feature includes properties to allow designers to present their content
in multiple columns with options like the column count, column gap, and column width.
Advantages of CSS3
 CSS3 provides a consistent and precise positioning of navigable elements.
 It is easy to customize a web page as it can be done by merely altering a modular file.
 Graphics are more accessible in CSS3, thus making it easy to make the site appealing.
 It permits online videos to be seen without using third-party plugins.
 CSS3 is economical and time-saving, and most browsers support it.
Page 16 of 20
JAVASCRIPT:
JavaScript is a lightweight, interpreted programming language. It is designed for creating
network-centric applications. It is complimentary to and integrated with Java. JavaScript is very
easy to implement because it is integrated with HTML. It is open and cross-platform.
Advantages of Java Script:
1. Helps you developing great front-end as well as back-end software using different
JavaScript based frameworks like jQuery, Node.JS etc.
2. Java script is installed on every modern web browser and there is no need of any special
environment setup
3. You can develop your website with the best Graphical User Experience.
4. JavaScript usage has now extended to mobile app development and game development
5. JavaScript provides several pre-defined frameworks and Libraries
6. Less server interaction − You can validate user input before sending the page off to the
server. This reduces server traffic.
7. Immediate feedback to the visitors − User don’t have to wait for a page reload to see if
they have forgotten to enter something.
8. Increased interactivity − You can create interfaces that react when the user moves the
mouse or activates them via the keyboard
9. Richer interfaces − You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors
10. Learning JavaScript provides high job opportunity.
Limitations of Java script

1. Client-side JavaScript does not allow the reading or writing of files. This has been kept for
security reason.
2. JavaScript cannot be used for networking applications because there is no such support
available.
3. JavaScript doesn't have any multi-threading or multiprocessor capabilities.
Applications
 Client side validation - This is really important to verify any user input before submitting it to
the server and Javascript plays an important role in validting those inputs at front-end itself.
 Manipulating HTML Pages - Javascript helps in manipulating HTML page . This helps in
adding and deleting any HTML tag very easily.
 User Notifications - You can use Javascript to raise dynamic pop-ups on the webpages to
give different types of notifications to your website visitors.
 Back-end Data Loading - Javascript provides Ajax library which helps in loading back-end
data while you are doing some other processing
 Presentations - JavaScript also provides the facility of creating presentations which gives
website look and feel.
 Server Applications - Node JS is built on Chrome's Javascript runtime for building fast and
scalable network applications. This helps in developing very sophisticated server applications
including Web Servers.
Page 17 of 20
General Syntax
JavaScript can be implemented using JavaScript statements that are placed within the <script>...
</script> HTML tags in a web page.
You can place the <script> tags, containing your JavaScript, anywhere within your web page, but
it is normally recommended that you should keep it within the <head> tags.
The <script> tag alerts the browser program to start interpreting all the text between these tags as
a script. A simple syntax of your JavaScript will appear as follows.
<script ...>
JavaScript code
</script>
Script tag provides two attributes:

1. language (specifying the language ie,javascript)
2. type ( specifying the type like text)
<script language = "javascript" type = "text/javascript">
JavaScript code
</script>
<html>
<body>

</script>
</body>
</html>
Output : Hello World!
Page 18 of 20
Syntax features in Java script
1. JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs.
2. Simple statements in JavaScript are generally followed by a semicolon character, just as
they are in C, C++, and Java. You can skip the semicolon if each of your statements are
placed on a separate line
Eg : <script language = "javascript" type = "text/javascript">


</script>
But when formatted in a single line as follows, you must use semicolons −

</script>
3. JavaScript is a case-sensitive language.

4. JavaScript supports both C-style and C++-style comments, JavaScript also recognizes the
HTML comment opening sequence  is not
recognized by JavaScript. It should be written as //-->
Eg:


</script>
Page 19 of 20
5. If we want to run the script for even like mouse like , we place the script in head tag as
shown
<html>
<head>
<script type = "text/javascript">

</script>
</head>
<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>
6. If we want to run as the page loads so that the script generates content in the page, then
the script is added in the <body> portion of the document
<html>
<head>
</head>
<body>
<script type = "text/javascript">

</script>
<p>This is web page body </p>

</body>
</html>
Page 20 of 20

Unit 1

Uploaded by

Document Information

Original Title

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

COMPUTER MULTIMEDIA AND ANIMATION

Origin and evolution of HTML

<h1>My First Heading</h1>

Basic Text Markup Tags

 <b> - Bold text

The HTML <img> tag is used to embed an image in a web page.

Syntax : <img src="url" alt="alternatetext">

1. Unordered List : Arranges items with Bullets

2. Ordered List : Arranges items with numbers

Name Age City

The HTML <input> element is the most used form element.

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of

<input type="checkbox"> Displays a checkbox (for selecting zero or

<input type="button"> Displays a clickable button

The <textarea> element defines a multi-line input field (a text area):

Who Creates and Maintains CSS?

Example − You can define a table border as follows −

1. The Type Selectors: Used to add a format to a particular type of element

2. The Universal Selectors

4. The Class Selectors

6. The Child Selectors

7. The Attribute Selectors

It allows us to add effects or animations to the website. We use CSS to

1. Firstly, open the HTML page and locate the <head>

Pros of External CSS:

These are some important font attributes:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

It accepts align attribute. It does not accept align attribute.

Features of CSS3 : CSS3 is a latest standard of css earlier versions(CSS2).

Limitations of Java script

Script tag provides two attributes:

<script language = "javascript" type = "text/javascript">

Output : Hello World!

Eg : <script language = "javascript" type = "text/javascript">

3. JavaScript is a case-sensitive language.

<script language = "javascript" type = "text/javascript">

<p>This is web page body </p>

You might also like