Scribd
Upload
45 views

Unit 1 MMA Notes

Uploaded by

narayanhegde502
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
45 views

Unit 1 MMA Notes

Uploaded by

narayanhegde502
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 63

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 on
servers.
 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 for
designing 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.

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

Year Milestone
1989 Proposal for a system called "Mesh" by Tim Berners-Lee
1990 First HTML specification and creation of "World Wide Web" browser/editor
1993 HTML 2.0 specification published
1995 HTML 3.0 proposed, World Wide Web Consortium (W3C) founded
1997 HTML 4.0 introduced with features like scripting and style sheets
2008 HTML5 development begins, first public draft published by WHATWG
2014 HTML5 officially standardized as a recommendation by the W3C

Basic Syntax / structure of an HTML document

<html> Beginning of HTML doc


<head> Beginning of the Head section of the HTML doc
<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 document
(Content body of the document) (Text, Images, Audio, Video, link, etc.)
</body> End of body tag
</html> End of HTML document

 HTML can be created by using any text editor like Notepad, Notepad++, Microsoft
Expression, etc.,

2
 HTML file must be saved with using filename.html extension and execute by using any
web 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 the
lines 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>

Example1: Output for Paragraph Tag


Example2 Paragraph:-Multiple spaces in the source paragraph element are replaced by
single spaces.
<html>
<head>
<title> Paragraph Tag </title>
</head>
<body>

3
<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>

Example2: Output for Paragraph Tag


Example3 Paragraph:-The content of the Paragraph tag is displayed at a position other than
the beginning of the line, the browser breaks the current line and inserts a blank line.
<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. </p> <p>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>

Example 3: 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>

4
<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>

5
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 support
extra 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>

6
<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 the
screen.
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

7
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 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. <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
8. Character Entities
 HTML provides a collection of special characters that are sometimes needed in a
document 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 used.
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 Nonbreaking 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>

9
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\bird.jpg" 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.

10
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)
4. Nested List (Combination of ol, ul, dl)

 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 (default):-


<html>
<head>
<title>Ordered List Tag(Default) </title>
</head>
<body>
<ol>
<li>BCA</li>
<li>B.com</li>
<li>BBA</li>
<li>BA</li>
<li>BSc</li>
</ol>
</body>
</html>

Example1 Output for Ordered List (default)

Example2 for Ordered List (Type=“A”):-


<html>
<head>
<title>Ordered List Tag(Type=“A”)</title>
</head>
<body>
<ol type="A">

11
<li>BCA</li>
<li>B.com</li>
<li>BBA</li>
<li>BA</li>
<li>BSc</li>
</ol>
</body>
</html>

Example2 Output for Ordered List (Type=“A”)

Example3 for Ordered List (Type=“a”):-


<html>
<head>
<title> Ordered List Tag(Type=“a”) </title>
</head>
<body>
<ol type="a">
<li>BCA</li>
<li>B.com</li>
<li>BBA</li>
<li>BA</li>
<li>BSc</li>
</ol>
</body>
</html>

Example3 Output for Ordered List (Type=“a”)

Example4 for Ordered List (Type=“I”):-


<html>
<head>
<title> Ordered List Tag(Type=“I”) </title>
</head>
<body>
<ol type="I">
<li>BCA</li>
<li>B.com</li>
<li>BBA</li>
<li>BA</li>
<li>BSc</li>

12
</ol>
</body>
</html>

Example4 Output for Ordered List (Type=“I”)

Example5 for Ordered List (Type=“i”):-


<html>
<head>
<title> Ordered List Tag(Type=“i”) </title>
</head>
<body>
<ol type="i">
<li>BCA</li>
<li>B.com</li>
<li>BBA</li>
<li>BA</li>
<li>BSc</li>
</ol>
</body>
</html>

Example5 Output for Ordered List (Type=“i”)

 Unordered 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 black
circles) by default.
 Instead of bullets we can list with circle or square or none.

Example1 for Unordered List (default):-


<html>
<head>
<title>Unordered List Tag(Default) </title>
</head>
<body>
<ul>
<li>BCA</li>
<li>B.com</li>
<li>BBA</li>

13
<li>BA</li>
<li>BSc</li>
</ul>
</body>
</html>

Example1 Output for Unordered List (default)


Example2 for Unordered List (Type=“circle”):-
<html>
<head>
<title>Unordered List Tag(Type=“circle”) </title>
</head>
<body>
<ul type="circle">
<li>BCA</li>
<li>B.com</li>
<li>BBA</li>
<li>BA</li>
<li>BSc</li>
</ul>
</body>
</html>

Example2 Output for Unordered List (Type=“circle”)

Example3 for Unordered List (Type=“square”):-


<html>
<head>
<title>Unordered List Tag(Type=“square”) </title>
</head>
<body>
<ul type="square">
<li>BCA</li>
<li>B.com</li>
<li>BBA</li>
<li>BA</li>
<li>BSc</li>
</ul>
</body>
</html>

14
Example3 Output for Unordered List (Type=“square”)

Example4 for Unordered List (Type=“none”):-


<html>
<head>
<title> Unordered List Tag(Type=“none”) </title>
</head>
<body>
<ul type="none">
<li>BCA</li>
<li>B.com</li>
<li>BBA</li>
<li>BA</li>
<li>BSc</li>
</ul>
</body>
</html>

Example4:- Output for Unordered List (Type=“none”)

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

15
<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

 Nested List
 Nested List refers to list within another list.
 Nested List is a combination of Ordered List, Unordered List and Description List.

Example1 for Nested List:-


<html>
<head>
<title> Nested List </title>
</head>
<body>
<p> Combination of Ordered List, Unordered List and Description List</p>
<ol>
<li>BCA</li>
<li>B.com</li>
<li>BBA</li>
<li>BA</li>
<li>BSc</li>
</ol>
<ul>
<li>BCA</li>
<li>B.com</li>
<li>BBA</li>
<li>BA</li>
<li>BSc</li>
</ul>
<dl>
<dt> Apple </dt>

16
<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>

Example1 Output for Nested List

Example2 for Nested List:-


<html>
<head>
<title> Nested List </title>
</head>
<body>
<p> Combination of Ordered List, Unordered List and Description List</p>
<ol>
<li>BCA</li>
<ul>
<li>DBMS</li>
<li>JAVA</li>
</ul>
<li>B.com</li>
<li>BBA</li>
<li>BA</li>
<li>BSc</li>
<ul>
<li>Physics</li>
<li>Maths</li>
</ul>
</ol>
<ul>
<li>BCA</li>
<li>B.com</li>
<li>BBA</li>
<li>BA</li>

17
<ol>
<li>HE</li>
<li>JE</li>
</ol>
<li>BSc</li>
</ul>
<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>

Example2 Output for Nested List

Tables
 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 often
contain 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>

18
<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>

19
<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>

20
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

21
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 the
value 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 the
server 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 Tag / Inline Tag:


 The <input> tag specifies an input field where the user can enter data.
 <input> elements are used within a <form> elements to declare input controls that
allow users to input data.
 <input> tag includes text, passwords, checkboxes, radio buttons and action buttons
like Reset, Submit.

22
2. Name attribute:
 Name attribute is a compulsory attribute for input tag in a form.
 Without name attribute the form element won’t be submitted or in other words would
not be send to the server.
 The name attribute also uniquely identifies that piece of data.
 The value of the input is accessed using the name attribute.

3. Label Tag:
 The <label> element is used to associate a text label with a form <input> field.
 The label is used to tell users the value that should be entered in the associated input
field.
 The label tag can be used in 2 ways:-
 1st: Use the <label> tag by providing the <input> and id attributes. The label tag
needs a “for” attribute whose value is the same as the input id. It uses ‘for’
attribute to connect the label with the ‘id’ of the form element.
 Ex:
<label for= “fname”> First Name:</label><br>
<Input type= “text” id= “frame” name= “firstname”>

 2nd: The <input> tag is used directly inside the <label> tag. In this case, the
“for” and “id” attributes are not needed.
 Ex:
<label> First Name
<input type= “text” name= “First name” value= “First Name”>
</label>

4. Required Attribute:
 Required attribute specifies that an input field must be filled out before submitting
the form.
 It shows a pop-up to fill out the required field.

5. Place Holder:
 A place holder attribute is used with input element.
 It describes a sample value or a short description of the expected format.
 The value of the placeholder attribute specifies a short hint that describes the
expected value of an input field.

6. Checkbox:
 Checkbox is a value of type attribute of input element.
 Checkboxes are used when more than one option may need to be checked or we
can 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.

7. Disabled Attribute:
 The disabled attribute specifies that the <input> element should be disabled.
 If the input is disabled, we can’t modify it, because it is already have default value
in it.

23
8. Radio Button:
 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”.
 The name attributes are all set to the same value makes these radio buttons part of
the same set and therefore, we can only select one of them at once.

9. Select Element:
 <select> tag is used to create drop down list of options.
 Drop down list contains many options and the user can choose one of them.

10. Text area Element:


 The <textarea> element is an input element where the user can input multi-line
text.
 A textarea can hold unlimited number of characters and text wrapping is allowed
when the form is submitted.

11. Submit Button:


 Submit is a button that when clicked automatically submits the form.
 The button is defined at the end of the form.
 2 different ways to add submit button to the form are:
 1) Via <input> tag
<input type= “button” value= “submit”>
 2) Via <button> tag
<button type= “submit”> submit </button>
Example for Form:
<html>
<head>
<title>Simple Form</title>
</head>
<body>
<form>
<h1> Registration Form</h1>
<label>Name:</label>
<input type="text" id="name" name="name" required placeholder="Enter your
name"><br><br>
<label>Course:</label>
<select>
<option value="option">Select</option>
<option value="option1">BCA</option>
<option value="option2">BBA</option>
<option value="option3">B.Com</option>
<option value="option4">BA</option>
<option value="option5">B.Sc</option>
</select><br><br>
<label>Hobbies:</label>
<input type="checkbox" name="Reading Books" value="Reading Books"/>Reading Books
<input type="checkbox" name="Singing Music" value="Siging Music"/>Singing Music
<input type="checkbox" name="Playing Games" value="Playing Games"/>Playing Games

24
<input type="checkbox" name="Listening Music" value="Listening Music"/>Listening
Music
<input type="checkbox" name="Dancing" value="Dancing"/>Dancing<br><br>
<label for="gender">Gender:</label>
<input type="radio" id="gender" name="gender" value="male">Male
<input type="radio" id="gender" name="gender" value="female">Female
<input type="radio" id="gender" name="gender" value="others">Others
<br><br>
<label>Phone:</lable>
<input type="text" name="country code" value="+91" disabled size="2">
<input type="text" name="phone" size="10"><br><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4" cols="50" placeholder="Enter your
address"></textarea><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

Output of a form

Output of a form with alert message to fill the required field

25
To select the course dropdown options is visible

Checkboxes are available to select more than 1 value of hobbies

Radio button is available to select gender

26
Phone number filed is filled and the value of country code is disabled

Address of the user

After click on submit button

27
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>

Example for frameset rows:


<html>
<head>
<title>Frames</title>
</head>
<frameset rows="25%, 25%, 25%">
<frame src="D:\New folder\1.imp\MCA\2nd sem\WP\WP lab prg\3 prg.html">
<frame src="D:\New folder\1.imp\MCA\2nd sem\WP\WP lab prg\9
prgregistrationform.html">
<frame src="D:\New folder\1.imp\MCA\2nd sem\WP\WP lab prg\8 prg B
historypage.html">
</frameset>
</html>

Output for frameset rows

28
Example for frameset columns:
<html>
<head>
<title>Frames</title>
</head>
<frameset cols="50%, 50%, 50%">
<frame src="D:\New folder\1.imp\MCA\2nd sem\WP\WP lab prg\3 prg.html">
<frame src="D:\New folder\1.imp\MCA\2nd sem\WP\WP lab prg\9 prg
registrationform.html">
<frame src="D:\New folder\1.imp\MCA\2nd sem\WP\WP lab prg\8 prg B
historypage.html">
</frameset>
</html>

Output for frameset columns


 Advantages of frames:
 The frames allows the user to view multiple documents within a single web page.
 Frames is possible to load pages from different servers in a single frameset.

 Disadvantages of frames:
 Some similar devices can’t support with frames often because their screen is not big
enough to be divided up.
 Sometimes page will be displayed differently on different computers due to
different screen resolution.
 The browser’s back button might not work as the user hopes.

29
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>,
<footer>, <nav>, <article>, <section>,
Semantics
<aside> and <main> providing a clearer
structure to web documents.
Native support for embedding audio and video
content using <audio> and <video> elements,
Multimedia Support
eliminating the need for third-party plugins like
Adobe Flash Player.
Introduces <canvas> element for drawing
graphics and animations using JavaScript, and
Canvas and SVG
supports Scalable Vector Graphics (SVG) for
creating resolution-independent graphics.
Introduces new form input types and attributes
(<input type="date">, required, placeholder,
Form Enhancements
etc.) for simplifying form validation and
improving user experience.
Includes Application Cache (App Cache) and
Web Storage (Local Storage and Session
Offline Web Applications
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 real-time, bidirectional
Web Socket
communication between web clients and
servers.

CSS
 CSS stands for Cascading Style Sheet.
 CSS is used to design HTML tags.
 CSS is a style sheet language.
 CSS describes the presentation of an HTML.

What is CSS?
CSS is a style sheet language which is used to describe the look and formatting of a
document written in mark-up language. CSS provides additional feature to HTML. CSS is
generally used with HTML to change the style of web pages and user interfaces.

30
Advantage of CSS
 CSS Saves time.
 Easier to maintain and update.
 Greater consistency in design.
 More formatting option.
 Reduces risks.
 Maintain large websites.
 Ability of editing any number of HTML pages.

Basic Syntax of CSS

<html> Beginning of HTML doc


<head> Beginning of the Head section of the HTML doc
<title> …………… </title> Gives the title of html document which appears on
menu bar of browser
<style> Start of style tag
selector{property:value;} Applying selector, property and value
</style> End of style tag
</head> End of Head tag
<body> Defines the body of an HTML document
(Content body of the (Text, Images, Audio, Video, link, etc.,)
document)
</body> End of body tag
</html> End of HTML document

Style Sheet Rules


Selector{property_1:value_1;property_2:value_2;…………….property_n:value_n;}

Example:

In the above example h1 is the selector, color and font-size is a property and blue and
12px is the value.
 Selector: Selector is a name of an HTML element. It is applicable to a declaration.
 Property: Property is assigned to selector for manipulating the style.
 Value: Value is assigned to set a property.
 Declaration: Declaration defines property and value for selector.

31
Levels/types of Style Sheet or Style Specification Formats
1. Inline Style Sheet: by using the style attribute inside HTML elements
2. Internal Style Sheet: by using a <style> element in the <head> section
3. 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>

32
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>

Output for internal style sheet


External Style Sheet
 CSS code is placed into a separate computer file and then linked to a web page.
 To use an external style sheet, add a link to it in the <head> section of each HTML page.
 The external style sheet can be written in any text editor and that must not contain any
HTML code. The file must be saved with filename.css extension.
Example for External style sheet:
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>

A File created with styles.css to add a link in external style sheet.

33
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

 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. The
selector could be a list of element names separated by commas.
Example for Simple Selector:
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>

34
A File created with styles.css to add a link in external style sheet.

Output for Simple Selector


 Id Selector
 The id selector uses the id attribute of an HTML element to select a specific element.
 An id of the element is unique on a page to use the id selector.
 It is written with the hash character (#) followed by the id name of the element.
 Ex:- #p1{text-align:center;color:blue;}
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>

35
Output for Id Selector

 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

36
 Universal Selector:
 Universal selector in CSS is used to select all the elements in an HTML document that
means 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 before Grouping Selector elements:
<html>
<head>
<title>Id selector</title>
<style>
h1{color:green;font-style:italic;text-align:center;}
h5{color:green;font-style:italic;text-align:center;}
p{color:green;font-style:italic;text-align:center;}
</style>
</head>
<body>
<p>This is a paragraph</p>
<h1> Multimedia Animation</h1>
</body>
</html>

37
Output for before Grouping Selector elements

As we can see in the above example, we had defined CSS properties for
each one tags, but by using group selector we can reduce the line of code.
We can write common property and value of a tag by using commas (,).
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.

38
 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("image.jpg") sets the background image of an element
to image.jpg.

 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%;

39
 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-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 be
capital 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;
Example for Font properties:
<html>
<head>
<title>Font Properties</title>
<style>
p.big{
font:size:14pt;
font-style:italic;
font-family:arial;
}
p.small{font:20pt bold;}
h2{font-weight:bold;}
h5{font-variant:small-caps;}
</style>
</head>
<body>
<p class="big">Where there is a will there is a way</p>
<p class="small">Practice makes a man perfect</p>
<h2>Multimedia Animation Font Properties in CSS</h2>
<h5>The font-family property is used to specify a font of an element</h5>
</body>
</html>

Output for Font Properties

40
List Properties:
The list in CSS specifies the listing of the contents or items in a particular
manner.
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 are
marked by disc / bullets.
Example for List-Style-Type Property:
<html>
<head>
<title>List Properties</title>
<style>
ul.a{List-Style-Type:circle;}
ul.b{List-Style-Type:disc;}
ul.c{List-Style-Type:square;}
ol.A{List-Style-Type:lower-alpha;}
ol.B{List-Style-Type:upper-alpha;}
ol.C{List-Style-Type:lower-roman;}
ol.D{List-Style-Type:upper-roman;}
ol.E{List-Style-Type:number;}
</style>
</head>
<body>
<h1>The List-Style-Type Property</h1>
<h4>Unorderd List:</h4>
<p>List-Style-Type:circle</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>List-Style-Type:disc</p>

41
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>List-Style-Type:square</p>
<ul class="c">
<li>Coffee</li>
<li>Tea</li>
</ul>
<h4>Orderd List:</h4>
<p>List-Style-Type:lower-alpha</p>
<ol class="A">
<li>Coffee</li>
<li>Tea</li>
</ol>
<p>List-Style-Type:upper-alpha</p>
<ol class="B">
<li>Coffee</li>
<li>Tea</li>
</ol>
<p>List-Style-Type:lower-roman</p>
<ol class="C">
<li>Coffee</li>
<li>Tea</li>
</ol>
<p>List-Style-Type:upper-roman</p>
<ol class="D">
<li>Coffee</li>
<li>Tea</li>
</ol>
<p>List-Style-Type:number</p>
<ol class="E">
<li>Coffee</li>
<li>Tea</li>
</ol>
</body>
</html>

42
Output for List-Style-Type Property

 List-Style-Position Property:
 List-Style-Position property specifies the position of the list-item
markers inside or outside of the box containing the bullet points.
 {List-Style-Position:outside;}  means that the bullet points will be
outside the list item. Outside is the default position
 {List-Style-Position:inside;} means that the bullet points will be inside
the list item.
Example for List-Style-Position Property:
<html>
<head>
<title>List Properties</title>
<style>
ul.a{List-Style-Position:outside;}
ul.b{List-Style-Position:inside;}
ol.c{List-Style-Position:outside;}
ol.d{List-Style-Position:inside;}
</style>
</head>
<body>
<h1>The List-Style-Position Property</h1>
<h3>The List-Style-Position:outside in unordered list</h3>
<ul class="a">
<li>HTML stands for Hyper Text Markup Language</li>
<li>HTML is texting computer language which is simple and easy to learn</li>
</ul>
<h3>The List-Style-Position:inside in unordered list</h3>
<ul class="b">

43
<li>HTML stands for Hyper Text Markup Language</li>
<li>HTML is texting computer language which is simple and easy to learn</li>
</ul>
<h3>The List-Style-Position:outside in ordered list</h3>
<ol class="c">
<li>HTML stands for Hyper Text Markup Language</li>
<li>HTML is texting computer language which is simple and easy to learn</li>
</ol>
<h3>The List-Style-Position:inside in ordered list</h3>
<ol class="d">
<li>HTML stands for Hyper Text Markup Language</li>
<li>HTML is texting computer language which is simple and easy to learn</li>
</ol>
</body>
</html>

Output for List-Style-Position Property

 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('sqpurple.gif');}  we need to insert image path inside the
URL.
Example for List-Style-Image Property:
<html>
<head>
<style>

44
ul {list-style-image: url('sqpurple.gif');}
</style>
</head>
<body>
<h1>The list-style-image Property</h1>
<p>The list-style-image property replaces the list-item marker with an image:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

Output for List-Style-Image Property

 List-Style Property:
 List-style Property is a shorthand property that is used to set all list properties in an
expression.
 The order of the values of list-style property is type, position and image.
 Ex:- {list-style:square inside url('sqpurple.gif');}
 If any property value is missing, then the default value will be inserted.
 Ex:- {list-style:square inside;}
Example for List-Style Property:
<html>
<head>
<title>List Properties</title>
<style>
ul{list-style:square inside;}
</style>
</head>
<body>
<h1>The List-Style Property</h1>
<p>The order of the values of list-style property is type, position and image</p>
<ul>
<li>Coffee</li>
<li>Tea</li>

45
<li>Milk</li>
</ul>
</body>
</html>

Output for List-Style Property


CSS Colors:
 We can also style with colors to make them look a little more interesting and decorative effects.
 Colors are specified using predefined color names or RGB, HEXA, HSL, RGBA, HSLA values.
 CSS Color property is used to set the color of HTML elements.
 CSS Color property is used to set font color, background color, etc.

The color of an element can be defined in the following ways:


 Built-In Color
 RGB Format
 RGBA Format
 Hexadecimal Notation
 HSL Format
 HSLA Format

 Built-In Color: These are a set of predefined colors which are used by its name. For
example: red, blue, green etc.
 RGB Format (Red, Green, Blue):
 The RGB (Red, Green, Blue) format is used to define the color of an HTML element
by specifying the R, G, B values range between 0 to 255.
 For example: RGB value of Red color is (255, 0, 0), Green color is (0, 255, 0), Blue
color is (0, 0, 255) etc.

Example for RGB Format:


<!DOCTYPE html>
<html>
<head>
<title>CSS color property</title>
<style>
h1 {color:rgb(0, 153, 0);text-align:center;}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

46
Output for RGB Format

 RGBA Format (Red, Green, Blue, Alpha):


 The RGBA format is similar to the RGB format, but the difference is RGBA contains
A (Alpha) which specifies the transparency of elements.
 The value of alpha lies between 0.0 to 1.0 where 0.0 represents fully transparent and
1.0 represents not transparent.

Example for RGBA Format:


<!DOCTYPE html>
<html>
<head>
<title>CSS RGBA color property</title>
<style>
h1 {color: rgba(255, 0, 0, 0.5); text-align: center;}
</style>
</head>
<body>
<h1>Multimedia Animation</h1>
</body>
</html>

Output for RGBA Format


 Hexadecimal Notation:
 The hexadecimal notation begins with # symbol followed by 6 characters each
ranging from 0 to F.
 For example: Red #FF0000, Green #00FF00, Blue #0000FF etc.

47
Example for Hexadecimal Notation:
<!DOCTYPE html>
<html>
<head>
<title>CSS hex property</title>
<style>
h1 {color: #0000ff; text-align: center;}
</style>
</head>
<body>
<h1>Hexadecimal Notation</h1>
</body>
</html>

Output for Hexadecimal Notation


 HSL (Hue, Saturation, Lightness):
 HSL stands for Hue, Saturation and Lightness respectively. This format uses the
cylindrical coordinate system.
 Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where
0 represents red, 120 represents green and 240 represents blue color.
 Saturation: It takes a percentage value, where 100% represents completely
saturated, while 0% represents completely unsaturated (gray).
 Lightness: It takes percentage value, where 100% represents white, while 0%
represents black.

Example for HSL (Hue, Saturation, Lightness):


<!DOCTYPE html>
<html>
<head>
<title>CSS hsl color property</title>
<style>
h1 {color: hsl(120, 100%, 30%);text-align: center;}
</style>
</head>
<body>
<h1>HSL (Hue, Saturation, Lightness)</h1>
</body>
</html>

48
Output for HSL (Hue, Saturation, Lightness)
 HSLA (Hue, Saturation, Lightness, Alpha):
 The HSLA color property is similar to HSL property, but the difference is HSLA
contains A (Alpha) which specifies the transparency of elements.
 The value of alpha lies between 0.0 to 1.0 where 0.0 represents fully transparent and
1.0 represents not transparent.
Example for HSL (Hue, Saturation, Lightness, Alpha):
<!DOCTYPE html>
<html>
<head>
<title>CSS hsla color property</title>
<style>
h1 {color: hsla(360, 100%, 50%, 0.50);
text-align: center;}
</style>
</head>
<body>
<h1>HSLA (Hue, Saturation, Lightness, Alpha)</h1>
</body>
</html>

Output for HSL (Hue, Saturation, Lightness, Alpha)

Alignment of Text:
 The text can be align by using CSS also, by the property and values.
 Default alignment of text is at left.
 text-align: center;
 text-align: left;

49
 text-align: right;
 text-align: justify;
Example for Alignment of Text:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {text-align: center;}
div.b {text-align: left;}
div.c {text-align: right;}
div.d {text-align: justify;}
</style>
</head>
<body>
<h1>The text-align Property</h1>
<div class="a">
<h2>text-align: center;</h2>
<p>The course is designed for students as well as working professionals to prepare for
coding interviews. This course is going to have coding questions from school level to the
level needed for product based companies like Amazon, Microsoft, Adobe, etc.</p>
</div>
<div class="b">
<h2>text-align: left;</h2>
<p>The course is designed for students as well as working professionals to prepare for
coding interviews. This course is going to have coding questions from school level to the
level needed for product based companies like Amazon, Microsoft, Adobe, etc.</p>
</div>
<div class="c">
<h2>text-align: right;</h2>
<p>The course is designed for students as well as working professionals to prepare for
coding interviews. This course is going to have coding questions from school level to the
level needed for product based companies like Amazon, Microsoft, Adobe, etc.</p>
</div>
<div class="d">
<h2>text-align: justify;</h2>
<p>The course is designed for students as well as working professionals to prepare for
coding interviews. This course is going to have coding questions from school level to the
level needed for product based companies like Amazon, Microsoft, Adobe, etc.</p>
</div>
</body>
</html>

50
Output for Alignment of Text

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 is
mandatory 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>

51
Output for Span tag

 <Div> tag
 The <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 close
the 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 manipulate
and 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

52
Overview and features of CSS3
1. 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.

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

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

4. 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()

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

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

53
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 modify
web 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 Object
Model), 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.
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='document.getElementById("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>

54
JavaScript Display Possibilities
JavaScript can "display" data in different ways:
 Writing into an HTML element, using innerHTML.
 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().
Object orientation and JavaScript
Object orientation:
 Object orientation, often referred to as Object Oriented Programming (OOP).
 OOP is a programming paradigm that focuses on modelling software around “objects”
that encapsulate data and behavior.
 These objects interact with each other through defined interfaces and the principles of
inheritance, polymorphism, encapsulation and abstraction are central to this paradigm.

JavaScript:
 JavaScript is a programming language that supports object-oriented programming.
 However, JavaScript’s approach to object orientation differs from traditional class-based
languages like Java or C++.
 In JavaScript, objects can be created directly without needing to define classes explicitly
that is known as prototype-based inheritance.
GENERAL SYNTACTIC CHARACTERISTICS:
 The type attribute of <script> must be set to “text/javascript”.
 The JavaScript script can be indirectly embedded in an XHTML document with the
src attribute of a <script> tag, whose value is the name of a file that contains the script
<script type = “text/javascript” src = “filename.js” > </script>
 In JavaScript, identifiers or names, must begin with a letter, an underscore ( _ ) or a
dollar sign ($) or digits there is no length limitation for identifiers.
 Case sensitivity: JavaScript is case-sensitive language.
 ‘variable’, ‘Variable’ and ‘VARIABLE’ are treated as distinct variables.
 Whitespace: JavaScript ignores spaces, tabs and newline characters that appear
between tokens in the code. However, whitespace can enhance readability.
 Semicolons: JavaScript uses semicolons (;) to terminate statements. While
semicolons are not always required due to automatic semicolon insertion by the
interpreter, it’s generally considered good practice to include them explicitly.

55
 Comments: JavaScript supports both single-line (‘//’) and multi-line (‘/* */’)
comments for code. Comments are ignored by the interpreter and server as
documentation for developers.
 Variables: JavaScript variables are declared using the ‘var’, ‘let’ or ‘const’ keywords.
Variables declared with ‘var’ are function-scoped, while those declared with ‘let’ or
‘const’ are block-scoped.
 Data types: JavaScript supports various data types, including Numbers, Strings,
Booleans, Arrays, Objects, Functions and Symbols.
 Operators: JavaScript supports Arithmetic operators (+, -, *, /, %), Assignment
operators (=, +=, -=, *=, /=, %=), Comparison operators (==, !==, <, >, <=, >=),
logical operators (&&, ||, !), bitwise operators (&, |, ^, ~, <<, >>) and more.
 Control structures: JavaScript provides control structures like if statements, switch
statements, for loops, while loops, do-while loops and ‘break’ and ‘continue’
keywords for flow control.
 Functions: Functions in JavaScript can be declared using the ‘function’ keyword or
using arrow functions (‘=>’). They can be defined either with named or anonymous
syntax and can accept parameters and return values.
 Objects: JavaScript is an object-oriented language. Objects are collections of key-
value pairs. Object properties can be accessed using dot notation(object.property) or
bracket notation(object[‘property’])
 Classes: Starting from ECMAScript 2015 (ES6), JavaScript supports class syntax for
defining constructor functions and creating objects using a more traditional class-
based approach.
 Error handling: JavaScript provides a ‘try-catch’ statement for handling exceptions
and errors in code execution.

Primitives, operations and expressions


JavaScript has five Primitive types or data types.
 Number: Represents numeric data, both integer and floating-point values.
 String: Represents textual data enclosed within single quote (‘ ’) or double quote(“ ”).
 Boolean: Represents a logical value of True or False.
 Undefined: Represents a variable that has been declared but not assigned a value.
 Null: Represents the intentional absence of any object value.
 Numeric Operators
 JavaScript has the typical collection of numeric operators: the binary operators + for
addition, - for subtraction, * for multiplication, / for division and % for modulus.
 The unary operators are plus (+), minus (-), decrement (--) and increment (++).

56
 The increment and decrement operators can be either prefix or postfix.
 For example, if the variable a has the value 7, the value of the following expression is
24:
(++a) * 3:- But the value of the following expression is 21.
(a++) * 3:- But the value of the following expression is 24.
 Math Object:
• The Math object provides a collection of properties of Number objects and methods
that operate on Number objects.
• The Math object has methods for the trigonometric functions, such as sin (for sine)
and cos (for cosine).
• Floor: to truncate a number;
• Round: to round a number;
• Max: to return the largest of two given numbers; as well as for other commonly used
mathematical operations.
 The String Catenation Operator
• JavaScript strings are not stored or treated as arrays of characters; rather, they are unit
scalar values. String catenation is specified with the operator denoted by a plus sign
(+).
• For example, if the value of first is “Multimedia”, the value of the following
expression is “Multimedia Animation”:
first + “Animation” = “Multimedia Animation”
 String properties and methods
• The String object includes one property, length and methods.
• The number of characters in a string is stored in the length property as follows:
var str = “College”;
var len = str.length;
len=7 // output

Screen Output & Keyboard Input


• The JavaScript model for the HTML document is the Document object
• The model for the browser display window is the Window object.
• The Window object has two properties, document and window, which refer to the
document and window objects, respectively.
• The Document object has a method, write, which dynamically creates content.

57
• The Window object has three methods for creating dialog boxes alert, confirm and
prompt.

Confirm()
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The confirm() Method</h2>
<p>Click the button to display a confirm box.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
confirm("Press a button!");
}
</script>
</body>
</html>

Alert()
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The alert() Method</h2>
<p>Click the button to display an alert box.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("Hello! I am an alert box!");
}
</script>
</body>
</html>

58
Prompt()
<html>
<body>
<h1>The Window Object</h1>
<h2>The prompt() Method</h2>
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
let person = prompt("Please enter your name");
if (person != null) {
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?";
}
}
</script>
</body>
</html>

59
Introduction to Animation
The word “Animation” is derived from the Latin word “Anima”, which means “Soul” or
“Life”. It reflects the idea or bringing inanimate objects or characters to life through the
illusion of motion.
Definition: Animation is the process of creating the illusion of motion and change by
rapidly displaying a sequence of static images or frames.
 In web development, animation is used to enhance user experience, add visual interest
and communicate information more effectively.
 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.

Types of Animation
• CSS Animation: CSS Animation allow for the creation of simple animations directly
in CSS using keyframes or predefined properties like transition and transform.
• JavaScript Animation: JavaScript can be used t create more complex animations by
manipulating DOM elements directly through frameworks.

60
• SVG Animation: Scalable Vector Graphics (SVG) can be animated using CSS or
JavaScript to create vector-based animations that scale well and are resolution-
independent.
• Canvas Animation: HTML5 Canvas allows for drawing graphics and animations
dynamically using JavaScript, making it suitable for more complex and interactive
animations.
Basic Animation Techniques
• Transition: CSS transitions allow for smooth transitions between different states of
an element, such as changing its size, position or color over a specified duration.
• Transform: CSS transforms enable the manipulation of an element’s by size,
position, rotation and skew without affecting its layout flow.
• Keyframs: CSS keyframs define a sequence of styles to be applied to an element at
specific points during an animation, allowing for more complex animations with
precise control over timing and easing functions.

The Start and End State


• A start state has an exit action, but no entry action. An end state has an entry action
but no exit action. 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.
• A start state has an exit action, but no entry action. An end state has an entry action
but no exit action.

61
Interpolation:
Interpolation in animation refers to the process of generating intermediate frames between
two keyframes to create smooth motion. It's a fundamental concept in computer animation,
used to transition smoothly between poses or positions of objects over time.

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 use CSS animation, you must
first specify some keyframes for the animation. Keyframes hold what styles the element will
have at certain times.
<html>
<head>
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;

62
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h2> To Create A Loader</h2>
<div class="loader"></div>
</body>
</html>

63

You might also like