Scribd
Upload
6 views51 pages

Unit1 Mma

The document provides an overview of multimedia, animation, web browsers, web design, and HTML, including its history and basic syntax. It outlines HTML's structure, basic text markup, and various tags for formatting content such as paragraphs, headings, images, and lists. Additionally, it details character entities and their usage in HTML documents.

Uploaded by

yellowflash943553
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views51 pages

Unit1 Mma

The document provides an overview of multimedia, animation, web browsers, web design, and HTML, including its history and basic syntax. It outlines HTML's structure, basic text markup, and various tags for formatting content such as paragraphs, headings, images, and lists. Additionally, it details character entities and their usage in HTML documents.

Uploaded by

yellowflash943553
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Multimedia Animation

Multimedia
• Multimedia is a combination of 2 words “Multi” and “Media”.
• The word ‘Multi’ means “Many” and the word ‘Media’ means “Communication”.
• Multimedia is a type of medium that allows information to be easily transferred
from one location to another.
• Multimedia includes Text, Pictures, Audio, Video, etc.,

Animation
• Animation refers to the movement on the screen of the display device created by
displaying a sequence of still images.

Web Browsers
• Documents provided by servers on the Web are requested by browsers, which are
programs running on client machines.
• They are called browsers because they allow the user to browse the resources
available onservers.
• A browser is a client on the Web because it initiates the communication with a
server, which waits for a request from the client before doing anything.
• The server locates the document among its servable documents and sends it to the
browser, which displays it for the user.
• Examples: Internet Explorer, Mozilla Firefox, Netscape Navigator, Google Chrome,
Opera etc.,

Web Design
• Web design is the process of planning, conceptualizing and implementing the
plan fordesigning a website in a way.

HTML
• HTML stands for Hyper Text Markup Language.
• HTML is texting computer language which is simple and easy to learn.
• To design the websites HTML is using.
• HTML is the language of the internet and it is basically consists of tags.
• HTML is a text file consisting of tags and used to design web pages.
• < > (Left and Right) angle brackets are reserved to identify opening and closing
tag in HTML.
• HTML is not a case sensitive language.
• HTML is a “Mother Language” of browser.
• “Tim Berners-Lee” is known as the father of HTML.
Hyper Text
• A text within a text that has link within it.
• If we click on a link which brings us to a new page is a hypertext.
Markup Language
• A computer language that is interpreted by the browser and it defines the
elements within a document using “tags”.
• It’s a human-readable programming language.

Origins and Evolution of HTML:


HTML was created by Sir Tim Berners-Lee in late 1990 but was not officially released.
❖ HTML 1.0: The first version of HTML was 1.0, which was the barebones and
it was released in the year 1991.

❖ HTML 2.0: The second version which was released in 1995 and it was standard
language version for website design. HTML 2.0 was able to support extra
features such as form-based file upload, form elements such as text box, option
button, etc.

❖ HTML 3.0: The third version was published by W3C (World Wide Web
Consortium) in early 1997. Third version was capable of creating tables and
providing support for extra options for form elements. It can also support a web
page with complex mathematical equations.

❖ HTML 4.0: The fourth version was released on December 1999 and it is a very
stable version of HTML language. Fourth version is the current official standard
and it provides added support for stylesheets (CSS) and scripting ability for
various multimedia elements.

❖ HTML 5.0: Fifth version and the newest version of Hyper Text Markup
language. The first draft of this version was announced in January 2008 with a
major update and "W3C Recommendation" status in October 2014.
Here are two major organizations one is W3C (World Wide Web Consortium) and
another one is WHATWG (Web Hypertext Application Technology Working Group)
which are involved in the development of HTML5 version.

Basic Syntax / structure of an HTML document:


→Beginning of HTML doc.
<html> → Beginning of the Head section of the HTML doc.
<head>
<title> ...................... </title> →Gives the title of html document which
appears on menu bar of browser.
</head> → End of Head tag.
<body> →Defines the body of an HTML
(Content body of the document)
</body> document (Text, Images, Audio, Video,
</html> link, etc.).
→End of body tag.
→ End of HTML document.
• HTML can be created by using any text editor like Notepad, Notepad++,
MicrosoftExpression, etc.,
• HTML file must be saved with using [Link] extension and execute by
using anyweb browser.

Basic Text Markup:


1. Paragraph
2. Line break
3. Headings
4. White space
5. Quotation
6. Horizontal line
7. Font style & Font size
8. Character entities

1. Paragraph
• Text is normally organized into the paragraphs in the HTML.
• All the text documents are inserted within Paragraph tag.
• Paragraph tag is denoted by <p> .... </p>.
• In displaying the content of a paragraph, the browser puts as many words as will
fit on thelines in the browser window.
• The browser supplies a line break at the end of the line.
Example1 Paragraph:-
<html>
<head>
<title> Paragraph Tag </title>
</head>
<body>
<p>The first version of HTML was 1.0, which was the barebones and it was released
in the year 1991. The second version which was released in 1995 and it was standard
language version for website design. HTML 2.0 was able to support extra features such
as form based file upload, form elements such as text box, option button. </p>
</body></html>

Output for Paragraph Tag


2. Line Break
➢ Line Break is denoted by <br> tag.
➢ The Break tag doesn’t have any content, so closing tag is not necessary for line break.

Example Line Break:-


<html>
<head>
<title>Line Break Tag </title>
</head>
<body>
<p>The first version of HTML was 1.0, which was the barebones and it was released
in the year 1991. The second version which was released in 1995 and it was standard
language version for website design. <br> HTML 2.0 was able to support extra features
such as form based file upload, form elements such as text box, option button. </p>
</body>
</html>

Output for Line Break

3. Headings
• Heading tags are of six (6) levels in HTML like <h1>…..</h1>, <h2>…..</h2>,
• <h3>…..</h3>, <h4>…..</h4>, <h5>…..</h5> and <h6>…..</h6>.
• Beginning of every section need to be highlighted and it should be represented
in large text i.e in a boldface font, whose default size is depends on the number
in the heading tag.
• <h1> is the highest level heading.
• <h6> is the lowest level heading.
Example for Heading Tag:-
<html>
<head>
<title> Heading Tag </title>
</head><body>
<h1>Heading Tag1 </h1>
<h2> Heading Tag2</h2>
<h3> Heading Tag3</h3>
<h4>Heading Tag4 </h4>
<h5>Heading Tag5 </h5>
<h6>Heading Tag6 </h6>
</body></html>

Output for Heading Tags

4. White Space / Preserving White Space


• White space is denoted by <pre> </pre> tag
• Pre tag is used to prevent the browser from eliminating multiple spaces and
ignoring embedded line breaks.
Example for White Space:-
<html>
<head>
<title> Pre Tag </title>
</head>
<body>
<pre> HTML 2.0 was able to
supportextra features
such as form based file
upload, form elements such as text box,

option button</pre>
</body></html>

Output for White Space


5. Quotation
• Quotation can be written in 2 ways like <blockquote> and<q> tag.
• The tag allow a block of text to be set off from the normal flow of text in a document.
Example1 for Quotation tag (<blockquote>):-
<html>
<head>
<title> Blockquote Tag </title>
</head>
<body>
<p>Swami Vivekananda said </p>
<blockquote>
<p>Arise, Awake and stop not until the goal is achieved. </p>
</blockquote>
</body>
</html>

Example1 Output for Quotation tag (<blockquote>)

Example2 for Quotation tag (<q>):-


<html>
<head>
<title> Quote Tag </title>
</head>
<body>
<p>Swami Vivekananda said <q> Arise, Awake and stop not until the goal is achieved. </q>
</p>
</body>
</html>

Example2 Output for Quotation tag (<q>)


6. Horizontal Line
• The Horizontal Line is denoted by <hr> tag.
• The <hr> tag causes a line break at the end of the current line and place a line
across thescreen.
Example for Horizontal Line:-
<html>
<head>
<title> Horizontal Line </title>
</head>
<body>
<p>HTML 1.0: The first version of HTML was 1.0, which was the barebones and it
was released in the year 1991. <hr>
HTML 2.0: The second version which was released in 1995 and it was standard
language version for website design. HTML 2.0 was able to support extra features
such as form-based file upload, form elements such as text box, option button, etc.
<hr> HTML 3.0: The third version was published by W3C (World Wide Web
Consortium) in early 1997. Third version was capable of creating tables and providing
support for extra options for form elements. It can also support a web page with
complex mathematical equations. <hr>
HTML 4.0: The fourth version was released on December 1999 and it is a very stable
versionof HTML language.

Fourth version is the current official standard and it provides added support for
stylesheets (CSS) and scripting ability for various multimedia elements. <hr>
HTML 5.0: Fifth version and the newest version of Hyper Text Markup language. The
first draft of this version was announced in January 2008 with a major update and "W3C
Recommendation" status in October 2014. </p>
</body>
</html>

Output for Horizontal Line


7. Font style & Font size
• Font style is used to change the text style like Times New Roman, Algerian, Arial, etc.,
• Font size is used to change the text size in HTML.
• Font style and size should be written within double quotes.
Example for Font style and size:-
<html>
<head>
<title> Font style and size </title>
</head>
<body>
<font face="Algerian" size="20">I am living in Mysore</font><br>
<font face="Arial" size="15">I am living in Mysore</font><br>
<font face="Verdana" size="5">I am living in Mysore</font>
</body>
</html>

Output for Font style and size


8. Character Entities
• HTML provides a collection of special characters that are sometimes
needed in adocument but cannot be typed as themselves.
• The special characters are defined as entities, which are codes for these characters.
• An entity in a document is replaced by its associated character by the browser.
• To avoid the confusion with the beginning of a character & (ampersand) is use

Character Entity Meaning


& &amp; Ampersand
< &lt; Less than
> &gt; Greater than
“ &quot; Double quote
‘ &apos; Single quote
¼ &fract14 One quarter
½ &fract12 One half
¾ &fract34 Three quarters
0 &deg Degree
(space) &nbsp Non breaking
space
Example for Character Entities:-
<html>
<head>
<title> Character Entities </title>
</head>
<body>
<u> a] AND tag </u><br>
a&amp b <br><br>

<u> b] Greaterthan tag


</u><br>10 &gt 5 <br><br>

<u> c] Lessthan tag


</u><br>2 &lt 6 <br><br>

<u> d] Degree tag


</u><br>18 &deg<br><br>

<u> e] Double quote tag </u><br>


&quot Bachelor of Computer applications &quot<br><br>

<u> f] Fraction tag </u><br>


&frac12 liter<br><br>

<u> g] Space tag </u><br>


B &nbsp&nbsp C &nbsp&nbspA<br><br>

<u> h] Single quote tag </u><br>


&apos; BCA &apos; <br>
</body>
</html>

Output for Character Entities


Images:
• To insert or display the images on web pages we use image tag.
• Image tag is denoted by <img> tag.
Example for Image tag:-
<html>
<head>
<title> Image tag </title>
</head>
<body>
<img src="C:\Users\priya\Pictures\Downloaded image\[Link]" alt="Bird" width="400"
height="200">
</body>
</html>

Output for Image tag


❖ Attributes of an Image tag:
▪ Src-Specify the source path of an image.
▪ Alt-Specifies the alternate text for an image if it can’t be displayed.
▪ Width and Height-Specify the width and height of an image to display,
both width and height attribute are optional.

Lists:
• HTML lists allow web developers to group a set of related items in lists.
• HTML lists are used to specify lists of information.
• Each list item starts with the <li> tag.

Types of List:-
HTML List has 4 Types
1. Ordered List / Numbered List (ol)
2. Unordered List / Bulleted List (ul)
3. Description List / Definition List (dl)
1. Ordered List
• Ordered List starts with the <ol> tag and end with </ol> tag.
• Ordered List is also called as Numbered List.
• The list items in ordered list will be marked with numbers (1,2,3…) by default.
• Instead of numbers we can list with alphabet (A,B,C….. or a,b,c……) or
roman numbers(I, II,III….. or i, ii, iii….).

Example1 for Ordered List:-


<html>
<head>
<title>Ordered List Tag(Default) </title>
</head>
<body>
<ol>
<li>BCA</li>
<li>[Link]</li>
<li>BBA</li>
<li>BA</li>
<li>BSc</li>
</ol>
</body>
</html>

Example1 Output for Ordered List


[Link] List
• An Unordered List starts with the<ul> tag and end with </ul> tag.
• Unordered List is also called as Numbered List.
• The list items have no specific order or sequence.
• The Unordered List items will be marked with disc / bullets (Small filled
blackcircles) by default.
• Instead of bullets we can list with circle or square or none.

Example1 for Unordered List :-


<html>
<head>
<title>Unordered List Tag(Default) </title>
</head>
<body>
<ul>
<li>BCA</li>
<li>[Link]</li>
<li>BBA</li>
<li>BA</li>
<li>BSc</li>
</ul>
</body>
</html>

Example1 Output for Unordered List

3. Description List / Definition List (dl)


• Description List starts with the <dl> tag and end with </dl> tag.
• The Description List items are listed like a dictionary or encyclopaedia.
• Each item in the description list has a description.
• Inside the description tag there are 3 more tags used.
<dl> tag : Start of Description List tag.
<dt> tag : Specifying a Description term.
</dt> tag :End of a Description term.
<dd> tag : Specifying a Description Definition.
</dd> tag : End of a Description Definition.
</dl> tag : End of Description List tag.

Example for Description List:-


<html>
<head>
<title> Description List Tag </title>
</head>
<body>
<dl>
<dt> Apple </dt>
<dd> Apple is a red colour fruit</dd>
</dl>
<dl>
<dt> BCA </dt>
<dd> BCA fullform is Bachelor of Computer Applications</dd>
</dl>
</body>
</html>
Output for Description List

Table:
• A Table is a matrix of cells, which contain rows and columns.
• A cell in the top row often contain column labels, those in the leftmost columns
oftencontain row labels and rest of the cells contain the data of the table.
• To create table <table> tag is used.
• A Table Row is created by using <tr> tag.
• A Table Header is created by using <th> tag.
• To insert data into a cells <td> tag is used.
• The Table Name can be created using <caption> tag.
Example for Table Tag:-
<html>
<head>
<title> Table </title>
</head>
<body>
<table border="1">
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<td> Ram </td>
<td> 18 </td>
</tr>
<tr>
<td> Seetha </td>
<td> 20 </td>
</tr>
<tr>
<td> Hanuman </td>
<td> 17 </td>
</tr>
</table>
</body></html>
Output for Table Tag

Cell Padding

• Cellpadding is the space between the cell edges and the cell content.
• By default the cellpadding is set to 0.

Example for Table Tag with cellpadding:-

<html>
<head>
<title> Table </title>
</head>
<body>
<table border="1" cellpadding="5">
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<td> Ram </td>
<td> 18 </td>
</tr>
<tr>
<td> Seetha </td>
<td> 20 </td>
</tr>
<tr>
<td> Hanuman </td>
<td> 17 </td>
</tr>
</table>
</body>
</html>
Output for Table Tag with Cellpadding

Cell Spacing

• Cellspacing is the space between each cells.


• By default the space is set to 2 pixels (2px).
Example for Table Tag with cellspacing:-
<html>
<head>
<title> Table </title>
</head>
<body>
<table border="1" cellspacing="5">
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<td> Ram </td>
<td> 18 </td>
</tr>
<tr>
<td> Seetha </td>
<td> 20 </td>
</tr>
<tr>
<td> Hanuman </td>
<td> 17 </td>
</tr>
</table>
</body></html>

Output for table tag with cellspacing


Colspan:
• Colspan attribute is used to make a cell with more than one cell/column.
• Colspan will divide one cell into multiple columns and the number of columns depend on the
value of colspan attribute.
Example for Table Tag with colspan:-
<html>
<head>
<title> Table </title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2"> Name </th>
<th> Age </th>
</tr>
<td> Shree </td>
<td> Ram </td>
<td> 18 </td>
</tr>
<tr>
<td> Seetha </td>
<td> Devi </td>
<td> 20 </td>
</tr>
</table>
</body>
</html>

Output for Table Tag with colspan

Rowspan:
• Rowspan attribute is used to make a cell with more than one cell/row.
• Rowspan will divide one cell into multiple rows and the number of rows depend on thevalue
of rowspan attribute.
Example for Table Tag with rowspan:-
<html>
<head>
<title> Table </title>
</head>
<body>
<table border="1">
<tr>
<th> Name </th>
<td> Ram </td>
</tr>
<th rowspan="2">Phone_number</th>
<td> 1234567890 </td>
</tr>
<tr>
<td> 0123456789 </td>
</tr>
</table>
</body>
</html>

Output for Table Tag with colspan

Forms:
• To create a form <form> tag is used.
• The most common way for a user to communicate information from a web browser to theserver
is through a form.
• A form is an area that can contain form elements.
• Form elements are the elements that allow the user to enter information.
Ex: Text, drop-down menus, radio buttons, checkboxes, buttons, etc.

1. Input Element
The HTML <input> form Attribute is used to specify interactive input fields for web-based forms. A form
can contain multiple input fields to accept inputs from the users. It is the most powerful element in HTML.
Syntax:
<input form="form_id">
Attribute Value: This attribute contains a single value form_id which contains the value i.e form_id
which specify the one or more than the button element belongs to. The value of this attribute should be
the id of the <form> element.

Example for input element:


<html>
<head>
<title>Simple Input Example</title>
</head>
<body>

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">

<label for="password">Password:</label>
<input type="password" id="password" name="password">

<input type="submit" value="Submit">


</form>

</body>
</html>

2. Select and option Element

A select box, also called drop down box which provides option to list down various options in the form
of drop down list, from where a user can select one or more options.

Example for Select and Option element:


<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>
Output for select and option element

3. Radio Buttons
• Radio Button is just like a checkbox, but the difference is that the values of name attribute are
all the same.
• To define a radio button the value of type attribute is “Radio”.

Example for Radio Button:


<html>
<body>
<h2>Radio Buttons</h2>
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</body>
</html>

Output for Radio button


4. Checkboxes
• Checkbox is a value of type attribute of input element.
• Checkboxes are used when more than one option may need to be checked or wecan also use
it to enable or disable elements.
• Checkbox is denoted with square box that is ticked / checked when activated.
• There is also an attribute named checked, that when present makes the checkbox selected by
default when page loads.

Example for Checkboxes:


<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<form >
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Output for Checkbox

5. <textarea> Tag
• The <textarea> tag defines a multi-line text input control.
• The <textarea> element is often used in a form, to collect user inputs like comments or reviews.
• A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually
Courier).
• The size of a text area is specified by the cols and rows attributes (or with CSS).
Example for textarea:
<html>
<body>
<h1>The textarea element</h1>
<form >
<p>Review of W3Schools:</label></p>
<textarea name="w3review" rows="4" cols="50">At [Link] you will learn how to make a
website. They offer free tutorials in all web development technologies.</textarea>
<br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".</p>
</body>
</html>

Output for textarea

6 . The <fieldset> and <legend> element

• The <fieldset> tag is used to group related elements in a form.

• The <fieldset> tag draws a box around the related elements.


• The <legend> tag is used to define a caption for the <fieldset> element.

Example for fieldset and legend:


<html>
<body>
<h1>The fieldset element</h1>
<form>
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>

Output for fieldset and legend

Frames:
• HTML Frames are used to divide browser window into multiple sections where each section
can load a separate HTML document.
• A collection of frames in the browser window is known as frameset.
• To use frames on a page we need <frameset> tag.
• The <frameset> tag defines how to divide the window into frames.
• The rows attribute defines horizontal frames and cols attribute defines vertical frames in
<frameset> tag.
• NOTE: If the browser not support frames need to add <noframes> tag.
<noframes>
<body>Your browser does not support frames</body>
</noframes>

Creating Frames
• To use frames on a page we use <frameset> tag instead of <body> tag.
• The <frameset> tag defines, how to divide the window into frames.
The rows attribute of <frameset> tag defines horizontal framesand cols
attribute defines vertical frames.
• Each frame is indicated by <frame> tag and it defines which HTMLdocument
shall open into the frame.
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

Advantages of frames
• The main advantage of frames is that it allows the user to view multiple documents
within a single Web page.
• It is possible to load pages from different servers in a single frameset.

Disadvantages of Frames
• Sometimes your page will be displayed differently on different computersdue to different screen
resolution.
• Older browers do not support frames.

Overview and Feature of HTML5:

• HTML5 is the next major revision of the HTML standard super sending HTML 4.01,
XHTML 1.0 and HTML 1.1.
• HTML5 is a standard for structuring and presenting content on the World Wide Web
(WWW).
• HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
Hypertext Application Technology Working Group (WHATWG).
Feature Description

Introduces semantic elements like <header>,


Semantics <footer>, <nav>, <article>, <section>,
<aside> and <main> providing a clearer structure to web
documents.
Native support for embedding audio and video content using
Multimedia Support <audio> and <video> elements,
eliminating the need for third-party plugins like Adobe Flash
Player.
Introduces <canvas> element for drawing graphics and
Canvas and SVG animations using JavaScript, and supports Scalable Vector
Graphics (SVG) for
creating resolution-independent graphics.
Introduces new form input types and attributes (<input
Form Enhancements type="date">, required, placeholder,
etc.) for simplifying form validation and improving user
experience.
Includes Application Cache (App Cache) and Web Storage
Offline Web Applications (Local Storage and Session Storage) APIs for creating
offline-capable web
applications and storing data locally.
Supports Geolocation API for obtaining the
Geolocation user's geographic location, enabling location- based services
and experiences.
Includes native support for Web Socket protocol, enabling
Web Socket real-time, bidirectional communication between web clients
and
servers.
CSS Introduction

What is CSS?
• Cascading Style Sheets (CSS) is used to format the layout of a webpage.
• With CSS, you can control the color, font, the size of text, the spacing between elements, how
elements are positioned and laid out, what background images or background colors are to be
used, different displays for different devices and screen sizes, and much more!
• A CSS rule consists of a selector and a declaration block.

CSS Syntax

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons. Each declaration
includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly
braces.

Example

In this example all <p> elements will be center-aligned, with a red text color:

p{
color: red;
text-align: center;
}
Levels/types of Style Sheet or Style Specification Formats:

Inline Style Sheet: by using the style attribute inside HTML elements
Internal Style Sheet: by using a <style> element in the <head> section
External Style Sheet: by using a <link> element to link to an external CSS file

Inline Style Sheet


Inline CSS is a method of styling where CSS properties are directly applied to HTML elements
within the body section by using the “style” attribute.
Inline method enables localized and specific styling for each element, which enhances the control over
their presentation.
Example for inline style sheet:
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>

Output for inline style sheet

Internal Style Sheet


CSS code is placed into a separate, directed area within the <head> section of an HTML web page,
within a <style> element.
It is used to define a style for a single HTML page.
Example for internal style sheet
<html>
<head>
<title>Internal CSS</title>
<style>
body {background-color:powderblue;} h1{color: blue;}
p{color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>

Output for internal style sheet

External CSS
What is External CSS ?
External CSS is used to style multiple HTML pages with a single style sheet. External CSS contains a
separate CSS file with a .css extension. The CSS file contains style properties added on selectors (For
example class, id, heading, … etc.).

How to Link a CSS File to an HTML File ?


To link a CSS file to an HTML file, use the <link> element within the HTML file’s <head> section with
the rel attribute set to “stylesheet” and the href attribute specifying the CSS file’s path.

CSS property is written in a separate file with a .css extension and should be linked to the HTML
document using a link tag. External CSS sets styles for elements once and applies them consistently
across multiple web pages, ensuring a unified design.

// The below code is saved in .html format


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The external style sheet can be written in any text editor.

//The file must not contain any HTML code, and must be saved with a .css extension.

Here is what the "[Link]" file looks like:

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}

Output for external Style sheet

Selector forms:
Selectors in CSS are used to select HTML elements based on their element name, id, class, attribute
and many more.

Types of Selector Form:


1. Simple Selector
2. Id Selector
3. Class Selector
4. Universal Selector
5. Group Selector
1) Simple Selector
Simple Selector is also called as element selector.
The simplest selector form is a single element.
Ex:- <p> <h1> etc.
The property values in the rule apply to all occurrences of the named element. Theselector could be a
list of element names separated by commas.

Example for simple Selector


<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>

Output for simple selector

2) CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific element. An id is always
unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.
Example for Id Selector
<html>
<head>
<title>Id selector</title>
<style>
#p1{text-align:center;color:blue;}
</style>
</head>
<body>
<p id="p1">This is a paragraph</p>
<p> Multimedia Animation</p>
</body>
</html>

Output for Id selector

3)Class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period or dot (.) or full stop symbol followed by the
class name.
Ex:- .p1{text-align:center;color:red;font-style:italic;}
Example for Class Selector:
<html>
<head>
<title>Id selector</title>
<style>
.p1{text-align:center;color:red;font-style:italic:}
</style>
</head>
<body>
<p class="p1">This is a paragraph</p>
<p> Multimedia Animation</p>
</body>
</html>
Output for Class Selector
4)Universal Selector:
Universal selector in CSS is used to select all the elements in an HTML document thatmeans apply to
the whole web page.
Universal selector denoted by an asterisk (*) symbol.
Ex:- *{color:green;font-style:Italic;}
Example for Universal Selector:
<html>
<head>
<title>Id selector</title>
<style>
*{color:blue;font-style:italic}
</style>
</head>
<body>
<p>This is a paragraph</p>
<p> Multimedia Animation</p>
</body>
</html>

Output for Universal Selector

Group Selector:
The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code.
Commas are used to separate each selector in grouping.
Example for Group Selector:
<html>
<head>
<title>Group selector</title>
<style>
h1, h5, p{color:green;font-style:italic;text-align:center;}
</style>
</head>
<body>
<p>This is a paragraph</p>
<h1>Multimedia Animation</h1>
<h5>This is an example for group selector </h5>
</body>
</html>

Output for Group Selector

Property Value forms:


• In CSS there are several property value forms that can be used to style html elements.
• CSS includes 60 different properties in 7 categories like fonts, lists, text-alignments, margins,
colors, background, borders.

Keyword values: These are pre-defined values that represent a specific property setting. Keyword
values are not case sensitive.
Ex:- (SMALL, small and small)-all these keywords will have same value.
Length values: Length values are specified as number values that are followed immediately by a two
character abbreviation of a unit name. These specify a length measurement, such as pixels (px), ems
(em) or percentages (%).
Ex:- (width:100px;)-sets the width of an element to 100 pixels.
Color values: Color values specify a color using various formats, such as hexadecimal (#RRGGBB),
RGB value.
Ex:- (background-color: #FF0000;) -sets the background color of an element to red.
URL values: URL values specify a URL for images or other resources. The URL which can be either
absolute or relative, is placed in parenthesis and preceded by URL.
Ex:- background-image: url("[Link]")- sets the background image of an element to [Link].
Function values: These are special values that use a function to calculate a value.
Ex:- transform: rotate(45deg)-rotates an element by 45 degrees using the 'rotate'function.
Multiple values: Some properties allow for multiple values to be specified, separated by commas.
Ex:- (padding:10px 20px 30px 40px;) sets the padding of an element to 10px in top, 20px in right,
30px in bottom and 40px in left.

Font Properties:
• CSS font offer a range of options to style the text content within HTML elements.
• CSS fonts gives the ability to control different aspects of fonts.

Font Properties are:-


1. Font-family
2. Font-size
3. Font-weight
4. Font-style
5. Font-variant

Font-family:
The font-family property is used to specify a font of an element.
The browser uses the first font in the value, if not supported by system, it will select the other fonts.
If a font name has more than one word, the whole name should be written within single quotes (‘’).
Ex:- font-family: arial, ‘times new roman’;

Font-size:
Font-size is used to set the font-size of an HTML element.
The font-size can be set in different ways like pixels, points, percentage, etc.
We can also set values like small, large, etc.
Ex:- font-size:10px | 20pt | 50%;

Font-style:
Font-style is used to specify the font style of an HTML element.
Default font-size is normal.
Ex:- font-style: Italic | normal | bold;

Font-weight:
The font-weight property of the CSS is used to set the weight or thickness of the font being used with
the HTML Text. The font-weight applied will depend on font-family used and the browser. For instance,
some font-family is available only in specific weights.
Ex: font-weight: normal|bold|lighter|bolder|number|initial|inherit;
Font-variant:
The default value of the font-variant property is normal, which specifies the usual character font.
In a normal font, the fonts will appears in a sentence case, that is Start letter will becapital and all other
will be small.
In a small-caps font, all lower case letters are converted to uppercase letters appears in a smaller font
size than the original upper letters.
Ex:- font-variant: normal | small-caps | initial;

List Properties:
The list in CSS specifies the listing of the contents or items in a particularmanner.
CSS list has 2 types:-

Ordered List: Marked with numbers and alphabets.


Unordered List: Marked with bullets, circle and square.

CSS List Properties:


1. List-Style-Type Property
2. List-Style-Position Property
3. List-Style-Image Property
4. List-Style Property

List-Style-Type Property:
List-Style-Type Property allows us to change the default list type of marker to any other type such
as square, circle, roman numbers, alphabets, etc.
By default the ordered list items are marked by numbers and unordered list items aremarked by disc /
bullets.
list-style-type:decimal;
list-style-type:lower-alpha;
list-style-type:lower-roman;
list-style-type:circle;
list-style-type:square;
list-style-type:disc;

List-Style-Position Property:
List-Style-Position property specifies the position of the list-itemmarkers inside or outside of the box
containing the bullet points.
{List-Style-Position:outside;}-means that the bullet points will beoutside the list item. Outside is the
default position
{List-Style-Position:inside;}- means that the bullet points will be insidethe list item.
List-Style-Image Property:
List-Style-Image allows us to specify an image so that we can use our own bullet style.
The syntax is similar to the background-image property with the letters URL starting the value of the
property followed by the URL in brackets.
If URL does not find the given image then default bullets are displayed.
ul{list-style-image: url('[Link]');} -we need to insert image path inside theURL.
list-style-image: url([Link])

List-Style Property:
List-style Property is a shorthand property that is used to set all list properties in anexpression.
The order of the values of list-style property is type, position and image.
Ex:- {list-style:square inside url('[Link]');}
If any property value is missing, then the default value will be inserted.
Ex:- {list-style:square inside;}

CSS Colors:

• The color property in CSS is used to set the color of HTML elements. Typically, this
property is used to set the background color or the font colorof an element.
• In CSS, we use color values for specifying the color. We can also use thisproperty for
the border-color and other decorative effects.

We can define the color of an element by using the following ways:


1. RGB format.
2. RGBA format.
3. Hexadecimal notation.
4. HSL.
5. HSLA.
6. Built-in color

1 RGB Format:
• RGB format is the short form of 'RED GREEN and BLUE' that is used fordefining the
color of an HTML element simply by specifying the values of R, G, B that are in the
range of 0 to 255.
• The color values in this format are specified by using the rgb() property. This property
allows three values that can either be in percentage or integer(range from 0 to 255).
Syntax : color: rgb(R, G, B);
• For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255) and the others are set to 0.
• To display black, set all color parameters to 0, like this: rgb(0, 0, 0)
To display white, set all color parameters to 255, like this: rgb(255, 255,255).
2 RGBA Format:
• It is almost similar to RGB format except that RGBA contains A
(Alpha) that specifies the element's transparency. The value of alpha is in therange 0.0 to
1.0, in which 0.0 is for fully transparent, and 1.0 is for not transparent.
Syntax : color:rgba(R, G, B, A);

3 Hexadecimal notation
• Hexadecimal can be defined as a six-digit color representation. This notationstarts with
the # symbol followed by six characters ranges from 0 to F.
• In hexadecimal notation, the first two digits represent the red (RR) color value, the next
two digits represent the green (GG) color value, and the lasttwo digits represent the
blue (BB) color value.
• Syntax: color: #FF0000, #00FF00, #0000FF, #FFFF00

4 HSL
• It is a short form of Hue, Saturation, and Lightness.
• Hue: It can be defined as the degree on the color wheel from 0 to 360. 0 represents
red, 120 represents green, 240 represents blue.
• Saturation: It takes value in percentage in which 100% represents fully saturated, i.e.,
no shades of gray, 50% represent 50% gray, but the color isstill visible, and 0%
represents fully unsaturated, i.e., completely gray, andthe color is invisible.
• Lightness: The lightness of the color can be defined as the light that we wantto provide
the color in which 0% represents black (there is no light), 50% represents neither dark
nor light, and 100% represents white (full lightness).
• Syntax: color:hsl(H, S, L)

5 HSLA
• It is entirely similar to HSL property, except that it contains A (alpha) that specifies the
element's transparency. The value of alpha is in the range 0.0 to1.0, in which 0.0
indicates fully transparent, and 1.0 indicates not transparent.
Syntax: color:hsla(H, S, L, A);

6 Built-in Color
• As its name implies, built-in color means the collection of previously defined colors
that are used by using a name such as red, blue, green, etc.
• Syntax: color: color-name;
Alignment of Text:
• This CSS property is used to set the horizontal alignment of a table-cell boxor the block
element. It is similar to the vertical-align property but in the horizontal direction.
Syntax
text-align: justify | center | right | left ;
Possible values
• justify: It is generally used in newspapers and magazines. It stretches theelement's
content in order to display the equal width of every line.
• center: It centers the inline text.
• right: It is used to align the text to the right.
• left: It is used to align the text to the left.

The <Span> and <Div> tags:

<Span> tag
• The HTML <span> tag is a generic inline container for inline elements and content.
• It is used to group elements for styling purposes (by using the class or id attributes).
• The span tag is a paired tag means it has both open (<) and closing (>) tags and it ismandatory
to close the tag.
• The tag is an inline element used to apply styles to specific parts of text within a larger
block of content
• It does not create a new line or add any spacing before or after the element.
• The tag is commonly used to apply styles such as font size, font color or text decoration to a
small portion of text within a larger paragraph.
Example for Span tag:
<!DOCTYPE html>
<html>
<body>
<h2>Welcome To India <h2>
<p>Animation refers <span style="color:blue;font-weight:bolder;">to the movement on the screen
</span> of the display device created by displaying <span style="background-color: pink;"> a sequence
of still images.</span> </p>
</body></html>
<Div>tag
• <div> tag is known as the Division tag.
• The div tag is the block-level tag.
• The div tag is used in HTML to make divisions of content in the web page like (text, images,
header, footer, navigation bar, etc).
• Div tag has both open (<div>) and closing (</div>) tags and it is mandatory to closethe tag.

• The Div is the most usable tag in web development because it helps us to separate data in the
web page and we can create a particular section for particular data or function in the web pages.
• It is used for applying styles and layout structure <div> and allows us to manipulateand position
content through CSS.
• It also divides content into logical sections, aiding in the readability and maintainability of the
code.
• As we know a Div tag is a block-level tag, the div tag contains the entire width. Hence, every
div tag will start from a new line and not the same line.
Example for Div tag:
<!DOCTYPE html>
<html>
<style>
div {background-color: pink;}
</style>
<body>
<h1>HTML DIV TAG</h1>
<div>It's a div element</div>
<p>The pink background is added to demonstrate the footprint of the DIV element.</p>
</body>
</html>

Output for Div tag


Overview and features of CSS3:
Selectors: Selectors allow the designer to select more precise levels of the web page. They are structural
pseudo-classes that perform partial matches to help match attribute and attribute values. New selectors
target a pseudo-class to style the elements targeted in the URL. Selectors also include a checked pseudo-
class to style checked elements such as checkboxes and radio buttons.

Box Model: Every HTML element is a box. The CSS box model helps beginners to understand the
layout and web page design better. The box model consists of several components, such as padding and
margins. CSS sets the position, size, and other properties to these boxes.

Explanation of the different parts:


Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

2D Transforms: CSS transform is a powerful transformation property. By using its various functions,
like scale, rotate, skew or translate HTML elements. One of the most commonly used functions is CSS
translate which allows you to move elements.

3D Transforms: It allows changing elements using 3D transformations. In 3D transformation, the


elements are rotated along X-axis, Y-axis, and Z-axis. There are three main types of transformation
which are: rotateX(), rotateY(), rotateZ()

Transitions and Animations: CSS3 provides new properties for creating transitions and animations,
such as transition-property, transition-duration. These properties enable designers to create more
engaging and interactive web.

Background color and image: The background-color property in CSS is used to specify the background
color of an element. The background-image property is used to set one or more background images to
an element. The background-repeat property in CSS is used to repeat the background image both
horizontally and vertically.
JavaScript (JS):
• JavaScript (JS) is the top programming language for web development, used for both
Client-Side and Server-Side purposes.
• JavaScript is also known as a scripting language for web pages.
• JavaScript is a dynamically typed language.
• JS is usually embedded directly into HTML pages.
• JavaScript is commonly used to create dynamic and interactive content on websites.
• JS plays a crucial role in modern web browsers, enabling client-side scripting to modifyweb
page content in real-time, enhancing user experience.
• JavaScript is a lightweight, cross-platform, single-threaded and interpreted compiled
programming language.

JavaScript can be divided into 3 parts


The Core Scripting: Core JavaScript is the heart of the language. It is the basic of JavaScript language
supports both the client side and server side. The core includes the basic syntax, data types, operators,
control structures and built-in objects and functions.
Client-Side Scripting: JavaScript is primarily used for client-side scripting in web development. It runs
in the web browser of the user, enabling dynamic and interactive features on web pages. It includes
tasks such as form validation, DOM (Document ObjectModel), handling user interactions to manipulate
the appearance and behavior of web pages in browser.
Server-side Scripting: It is a collection of objects that make the language useful on a Web server,
handle HTTP requests and interact with Databases and other server side resources.

Syntactic Characteristic
• 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>
The script tag takes two important attributes −
• Language − This attribute specifies what scripting language you are using. Typically, its value
will be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the
use of this attribute.
• Type − This attribute is what is now recommended to indicate the scripting language in use and
its value should be set to "text/javascript".

So your JavaScript segment will look like −


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

Simple Example for JavaScript


<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='[Link]("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>

Primitive and Non-primitive data-types in JavaScript:


Every Variable has a data type that tells what kind of data is being stored in a variable. There are two
types of data types in JavaScript.
1. Primitive data types
2. Non-primitive data types

Primitive data types: The predefined data types provided by JavaScript language are known as
primitive data types. Primitive data types are also known as in-built data types.

Number: Number data type in JavaScript can be used to hold decimal values as well as values without
decimals.
String: The string data type in JavaScript represents a sequence of characters that are surrounded by
single or double quotes.
Boolean: The Boolean data type can accept only two values i.e. true and false.
Undefined: The meaning of undefined is ‘value is not assigned’.
Null: This data type can hold only one possible value that is null.
BigInt: This data type can represent numbers greater than 253-1 which helps to perform operations on
large numbers. The number is specified by writing ‘n’ at the end of the value
Symbol: This data type is used to create objects which will always be unique. these objects can be created
using Symbol constructor.

Non-primitive data types: The data types that are derived from primitive data types of the JavaScript
language are known as non-primitive data types. It is also known as derived data types or reference data
types.
Object: An object in JavaScript is an entity having properties and methods. Everything is an object in
JavaScript.
Array: With the help of an array, we can store more than one element under a single name.

JavaScript Operators and Expressions:


There are different types of JavaScript operators:
1. Arithmetic Operators
2. Comparison Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators

JavaScript Arithmetic Operators


Arithmetic operators are used to perform arithmetic operations on the operands. The following operators
are known as JavaScript arithmetic operators.

perator Description Example

+ Addition 10+20 = 30

- Subtraction 20-10 = 10

* Multiplication 10*20 = 200

/ Division 20/10 = 2

% Modulus (Remainder) 20%10 = 0

++ Increment var a=10; a++; Now a = 11

-- Decrement var a=10; a--; Now a = 9


JavaScript Comparison Operators

The JavaScript comparison operator compares the two operands. The comparison operators are as
follows:

Operator Description Example

== Is equal to 10==20 = false

=== Identical (equal and of same type) 10==20 = false

!= Not equal to 10!=20 = true

!== Not Identical 20!==20 = false

> Greater than 20>10 = true

>= Greater than or equal to 20>=10 = true

< Less than 20<10 = false

<= Less than or equal to 20<=10 = false

JavaScript Bitwise Operators

The bitwise operators perform bitwise operations on operands. The bitwise operators are as follows:

Operator Description Example

& Bitwise AND (10==20 & 20==33) = false

| Bitwise OR (10==20 | 20==33) = false

^ Bitwise XOR (10==20 ^ 20==33) = false

~ Bitwise NOT (~10) = -10

<< Bitwise Left Shift (10<<2) = 40

>> Bitwise Right Shift (10>>2) = 2

>>> Bitwise Right Shift with Zero (10>>>2) = 2


JavaScript Logical Operators

The following operators are known as JavaScript logical operators.

Operator Description Example

&& Logical AND (10==20 && 20==33) = false

|| Logical OR (10==20 || 20==33) = false

! Logical Not !(10==20) = true

JavaScript Assignment Operators

The following operators are known as JavaScript assignment operators.

Operator Description Example

= Assign 10+10 = 20

+= Add and assign var a=10; a+=20; Now a = 30

-= Subtract and assign var a=20; a-=10; Now a = 10

*= Multiply and assign var a=10; a*=20; Now a = 200

/= Divide and assign var a=10; a/=2; Now a = 5

%= Modulus and assign var a=10; a%=2; Now a = 0


JavaScript Special Operators

The following operators are known as JavaScript special operators.

Operator Description

(?:) Conditional Operator returns value based on the condition. It is like if-else.
, Comma Operator allows multiple expressions to be evaluated as single statement.

delete Delete Operator deletes a property from the object.


in In Operator checks if object has the given property

instanceof checks if the object is an instance of given type

new creates an instance (object)


typeof checks the type of object.

void it discards the expression's return value.

yield checks what is returned in a generator by the generator's iterator.

Screen output and keyboard input:

JavaScript can "display" data in different ways:

• Writing into an HTML element, using innerHTML.


• Writing into the HTML output using [Link]().
• Writing into an alert box, using [Link]().
• Writing into the browser console, using [Link]().

Using innerHTML

• To access an HTML element, JavaScript can use the


[Link](id) method.

• The id attribute defines the HTML element. The innerHTML property defines
the HTML content:
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script> [Link]("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

Using [Link]()
For testing purposes, it is convenient to use [Link]():
<html>
<body><h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script> [Link](5 + 6);
</script>
</body>
</html>

Using [Link]()
• You can use an alert box to display [Link] can skip the window
[Link] JavaScript, the window object is the global scope object.
• This means that variables, properties, and methods by default belong to
the window object. This also means that specifying the window
keyword is optional:
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script> [Link](5 + 6);
</script>
</body>
</html>
Using [Link]()
For debugging purposes, you can call the [Link]() method in the browser
to display data.
<!DOCTYPE html>
<html>
<body>
<script> [Link](5 + 6);
</script>
</body>
</html>

Animation:
• An animation is nothing more than a visualization of change
• Animation is a method by which still figures are manipulated to appear as moving
images.
• A change that occurs over a period of time.

The Start And End State


If visualizing change is an important part of an animation, we need to create some reference
points so that we can compare what has changed. Let's call these reference points the start state
and the end state.

Let's say our start state looks as follows:

You start off with a blue circle that is small and located to the left of the screen. At the end
state, your blue circle now looks like this:
The Start state is the initial style of the element before the animation begins ,while the end
state is the final style of the element after the animation completes.
One change is the position. Our blue circle starts off on the left side of the page.
In the end, it is located on the right hand side. Another change is the size. The blue circle
became several times larger in the end state compared to its initial size at the beginning.

Interpolation:
Interpolation is the fancy name given to the intermediate states are generated between your
start and end states.
Interpolation in CSS refers to the process of smoothly transitioning between two or more
CSS property values over a specified duration using keyframes and animation properties.
• To create an animation with interpolation in CSS, you need to define the start and end
states of an element using CSS properties.
• Then, you use keyframes to define intermediate states of the animation, specifying the
CSS properties for each state.
• Finally, you use the animation property to apply the animation to the element,
specifying the duration, timing function, delay, and other properties.
Animation in HTML:
• An animation lets an element gradually change from one style to another. You can
change as many CSS properties you want, as many times as you want.
• To create animations in HTML we can use CSS or JavaScript here are some ways to
create animations using both methods
1. CSS Animations
2. JavaScript Animations

1 CSS Animations:
CSS animations allow you to create animations using only CSS code. You can define the
animation properties such as duration, timing function, and keyframes. Here is an example
of a CSS animation:
Example:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>
2 JavaScript Animations:
JavaScript can also be used to create animations in HTML. You can use JavaScript to
manipulate CSS properties, create custom animations, and control the timing of the animation.
Here is an example of a JavaScript animation
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
function myMove() {
let id = null;
const elem = [Link]("animate");
let pos = 0;
clearInterval(id);
id = setInterval(frame, 2);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
[Link] = pos + "px";
[Link] = pos + "px";
}
}
}
</script>
</body></html>

Before click After click

You might also like