Computer multimedia animation unit 1
assignment
Two marks.
1. What is html? What are web standards?
Ans: Hypertext Markup Language, is the standard language
used to create and structure content on the web. It allows
developers to define elements like headings, paragraphs, links,
images, and more.
Web standards are a set of agreed-upon technical
specifications and guidelines designed to ensure that websites
and web technologies work seamlessly across different devices,
browsers, and platforms.
2. What are attributes in html?
Ans): In HTML, attributes are used to provide additional
information about an element. They define the properties or
characteristics of an HTML tag and can modify its behaviour or
appearance.
3. The difference between ordered list and unordered list.
Ans:
Ordered List (<ol>)
Purpose: Used when the order of items matters.
Appearance: Items are numbered automatically (e.g., 1, 2, 3).
Example: 1: Gather ingredients.
2: Mix them.
3: Bake.
Unordered List (<ul>)
o Purpose: Used when the order of items doesn't matter.
o Appearance: Items are displayed with bullet points by default.
o Example:
o Apples
o Oranges
o Bananas
4. List the different tags used in html.
Ans:
<html>` tag
<head>` tag
<body>` tag
<header>` tag
<footer>` tag
<main>` tag
`<h1>` to `<h6>` tag
`<p>` tag
`<b>` tag
`<i>` tag
5. How to create a hyperlink in html?
Ans: To create a hyperlink in HTML, you use the `<a>` tag. The
`href` attribute specifies the URL the link points to. Here's the basic
syntax:
<a href="https://example.com">Click here</a>
6. What is cell paralleling and Cell spacing.?
Ans:
Cell Padding:
Refers to the space between the content of a cell and its cell
border.
It creates internal spacing inside each cell.
Cell Spacing:
Refers to the space between adjacent cells in a table.
It creates external spacing around each cell.
7. What is the form?
Ans: In HTML, a form is a structure used to collect user input and
send it to a server for processing. It is defined using the <form>.
Forms are essential for creating interactive and functional web
pages, allowing users to register, search, provide feedback, or
perform many other tasks.
8. What is a frame?
Ans: In HTML, a frame is used to divide a webpage into multiple
sections, each capable of displaying a separate document.
Frames are defined using the <frameset> element, which allows
you to arrange multiple HTML documents within one browser
window.
9. What is CSS? Why It is required?
Ans: CSS, or Cascading Style Sheets, is a stylesheet language
used to control the visual presentation of web pages. It allows
you to define how HTML elements appear, such as their layout,
colors, fonts, spacing, and much more.
It is required because
Separation of Content and Design.
Enhanced User Experience.
10. What are universal selectors?
Ans: In CSS, the universal selector is represented by an
asterisk (*). It is used to select all elements on a webpage,
applying styles to every element unless overridden by more
specific rules.
Example:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
11. What is JavaScript?
Ans: JavaScript is a powerful, versatile programming language
primarily used to create dynamic and interactive content on
websites. It works alongside HTML (for structure) and CSS (for
styling) to bring web pages to life. It enables features like
animations, real-time updates, interactive forms, and complex
web applications.
12. How to embed JavaScript in html?
Ans: You can embed JavaScript in HTML using the <script> tag.
Lock the system ways to do it:
1. Inline JavaScript
Add JavaScript directly inside an HTML element's attributes like
onclick, on change, etc.
Code: <!DOCTYPE html>
<html>
<head>
<title>Inline JavaScript Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<button onclick="alert ('Hello, World!')">Click Me</button>
</body>
</html>
6/8 Marks
1. Explain the structure of html with example.
Ans: The Structure of html: -
<!DOCTYPE html>
<html>
<head>
<title>HTML Structure Example</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph demonstrating the structure. </p>
</body>
</html>
<!DOCTYPE html>
This declaration specifies the document type and version of HTML
being used (HTML5 in this case). It ensures that the webpage is
rendered correctly by the browser.
<html>
This is the root element of the HTML document. All other elements
are nested inside this tag.
The <html> tag contains two main sections: <head> and <body>.
<head>
This section contains metadata about the HTML document, such as
its title, links to stylesheets, and scripts.
The <title> tag inside <head> specifies the title of the webpage,
displayed in the browser's title bar or tab.
<body>
This section contains the visible content of the webpage. Everything
inside the <body> tag is rendered on the browser.
2. Describe the process of creating html form using input tag and
provide examples of different types of input tags that can be
used in forms.
Ans:
Steps to Create an HTML Form
1. Use the <form> Tag
o The <form> element defines the form and acts as a container
for input fields. It includes attributes like:
action: The URL to which the form data will be sent.
method: The HTTP method used for form submission
(e.g., GET or POST).
2. Add Input Fields Using <input>
o The <input> tag is used for different types of user inputs like
text, email, password, etc.
o The type attribute determines the type of data to be collected.
3. Use Labels for Better Accessibility
o Add <label> tags to describe each input field.
4. Include a Submit Button
o Use <input type="submit"> or a <button> to allow users to
send the form data.
Examples of Different Input Types
Input Type Description
text Single-line text input.
password Input for passwords (
email Input for email addresses
number Input for numeric values.
Single selection from a group of
radio
options.
checkbox Multiple selection options.
date Input for selecting a date.
file File upload field.
Input Type Description
submit Button to submit the form.
reset Button to reset the form fields.
3. Explain frames with example.
Ans: Frames in HTML are used to divide a webpage into
multiple sections, with each section capable of displaying a
separate HTML document. The <frame> and <frameset> tags
were commonly used for this purpose, but they are now
deprecated in HTML5 due to usability and accessibility
issues.
Example: <!DOCTYPE html>
<html>
<head>
<title>Frames Example</title>
</head>
<frameset rows="50%,50%">
<frame src="top.html">
<frame src="bottom.html">
</frameset>
<noframes>
<p>Your browser does not support frames. Please update
your browser. </p>
</noframes>
</html>
4. Explain advantages and disadvantages of CSS.
Ans:
Disadvantages of
Aspect Advantages of CSS
CSS
Separates design Can lead to
Separat
and structure for complexity in large
ion
cleaner code. projects.
External files may
Styles can be reused across
Reusability fail to load, breaking
multiple HTML files.
styles.
Easy to update by Debugging
Mainten
changing one CSS specificity and
ance
rule. inheritance issues.
Speed Faster loading due to Requires testing for
Disadvantages of
Aspect Advantages of CSS
CSS
cross-browser
browser caching.
compatibility.
Some features (e.g.,
Respon Enables mobile-
older Flexbox
sive friendly and
versions) may have
Design adaptable layouts.
quirks.
Complex animations
Visual Supports animations
may impact
Effects and modern designs.
performance.
Advanced concepts
Learnin Basics are simple
need significant
g Curve and easy to grasp.
practice.
Enhances web Inline styles could
Securit
accessibility through pose XSS risks if
y
styles. unchecked
5. What are the different Levels of CSS.? Explain with example.
Ans:
6. Explain inline and internal styles with example.
Ans: 1. Inline Styles
Definition: Inline styles are applied directly to an HTML element
using the style attribute within the opening tag of the element.
Use Case: Inline styles are suitable for quick, localized styling
changes or for testing purposes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">This is a
Heading</h1>
<p style="font-size: 16px; color: green;">This is a
paragraph styled with inline CSS. </p>
</body>
</html>
2. Internal Styles
Definition: Internal styles are defined inside the <style> tag
in the <head> section of an HTML document.
Use Case: Internal styles are ideal for styling single-page
documents where external CSS is not necessary.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
</style>
</head>
<body>
<h1>This is a Heading</h1>
</body>
</html>
7. How to import external sheet? Explain the use of @
import, the
Ans: To import an external CSS stylesheet into an HTML
document, you typically use either the <link> tag or
the @import rule in CSS.
The use of @import:
The @import rule allows you to import one stylesheet into
another.
It is commonly used when you want to organize your CSS
into multiple files and combine them into a single main
stylesheet.
Steps to add @ import
The @import rule is added at the very top of a CSS file (before
any other rules) or within a <style> block in an HTML document.
1. Importing in an External CSS File
o You can include another CSS file in your stylesheet
using:
@import url("style.css");.
8. Explain font properties and list properties.
Ans:
Font Properties in CSS
Font properties control the appearance of text on a webpage,
including its size, weight, style, and family.
Common Font Properties
Property Description Example
font- Specifies the font type for font-family: Arial,
family the text. sans-serif;
font-size Sets the size of the text. font-size: 16px;
Property Description Example
font- Determines the thickness
font-weight: bold;
weight of the font (e.g., bold).
List Properties in CSS
List properties control the appearance and behavior of HTML lists
(<ul> for unordered lists, <ol> for ordered lists, and <li> for list
items).
Common List Properties
Property Description Example
Specifies the type of
list-style-type:
list-style-type bullet or number used
circle;
for list items.
Defines the position of
list-style- list-style-position:
the bullet (inside or
position inside;
outside the text).
list-style- Allows custom images list-style-image:
image to replace bullets. url('bullet.png');
Combines multiple list
list-style properties (type, list-style: square
(shorthand) position, image) in one inside;
declaration.
9. Example programme on CSS.
Ans:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<p>This is a paragraph styled with CSS. </p>
</body>
</html>
10. Write a programme to validate email id.
Ans:
<!DOCTYPE html>
<html>
<head>
<title>Email Validation</title>
<script>
function validateEmail() {
const email =
document.getElementById("email").value;
const emailRegex = /^[^\s@] +@[^\s@] +\. [^\s@] +
$/;
alert (emailRegex.test(email)? "Valid email”: "Invalid
email");
}
</script>
</head>
<body>
<input type="text" id="email" placeholder="Enter your
email">
<button onclick="validateEmail()">Validate</button>
</body>
</html>
