2 Marks (Important)
1. Write the basic syntax of HTML
<!DOCTYPE html>
<html>
<head>
<title>Our Creative Info</title>
</head>
<body>
<h1>Welcome</h1>
<p>We are happy to share that such a creative things..</p>
</body>
</html>
2. Write syntax to display image in HTML
Images can be displayed on a web page using the element in HTML. Here’s an example of how to add an image to an HTML page: <img src=”image” alt=”Description”
3. Define List. Mention its types.
A list is a markup element used to represent a group of related items. Lists are essential for organizing and structuring content on a web page.
Here are three common types of lists in HTML:
– Unordered List
– Ordered List
– Definition List
4. How to Display Table in Webpage?
In HTML, a table is a structured element that allows you to display data in rows and columns. It is made up of one or more rows and columns, and each intersection of a row and column is called a cell. Tables are commonly used to display tabular data, such as product information, schedules, or survey results.
An HTML table is defined with the <table> tag.
5. Write any two features of HTML5. (2M Or 5M)
1. Improved support for multimedia: HTML5 includes built-in support for audio and video playback, eliminating the need for third-party plugins like Adobe Flash.
2. Canvas element: HTML5 includes the <canvas> element, which allows developers to create and manipulate graphics and animations directly in the web browser.
3. Offline web applications: HTML5 includes new APIs that allow web applications to work offline, enabling users to access content even when they are not connected to the
internet.
4. Improved forms: HTML5 includes new input types, such as email, URL, and date, which make it easier for developers to create user-friendly forms.
5. Compatibility with mobile devices: HTML5 is designed to be compatible with
mobile devices, with support for touch events, geolocation, and other mobile-specific features.
6. Geolocation: HTML5 introduces the Geolocation API, which allows web applications
to access a user’s location information.
6. What is the use of <span> & <div> tag?
The <span> tag is an inline container used to mark up a part of a text, or a part of a
document.
The <div> tag is easily styled by CSS or manipulated with JavaScript using the class
or id attribute.
7. Define Javascript
JavaScript is a high-level, dynamic, interpreted programming language used primarily for client-side web development, although it can also be used for server-side programming.
8. Define Animation.
An animation is nothing more than a visualization of change- a change that occurs over a period of time
OR
Animation is a technique of creating the illusion of motion through the rapid display of a sequence of static images. It is commonly used in films, television shows, and video games to bring characters and objects to life.
9. What is start & end state?
– The start state is the initial state of an HTML element that have before undergoes any kind of transition.
– The end state is the final state of an HTML element that have after undergone the transition.
10. Define interpolation.
The process of creating these intermediate states from start state to end state is known as interpolation
11. What is animation in HTML?
Animations in HTML can be achieved using CSS (Cascading Style Sheets) and JavaScript.
12. What is animation in CSS?
An animation in css lets an element gradually change from one style to another. You can change as many as CSS properties you want, as many time as you want.
To use CSS animation, you must first specify some keyframes for the animation.
13. List out the CSS Animation properties.
The CSS Animation consists of following properties
– @keyframes
– animation-name
– animation-duration
– animation-delay
– animation-iteration-count
– animation-direction
– animation-timing-function
– animation-fill-mode
– animation.
14. What is Keyframes?
The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes along the animation sequence.
Keyframes animation in CSS is a powerful technique used to create complex and dynamic animations on websites. It allows developers to define specific states and movements for an element over time.
15. Write the syntax of Keyframes.
@keyframes animationname {keyframes-selector {css-styles;}}
16. What is animation-name?
The animation-name property specifies a name for the @keyframes animation.
Example: animation-name: demo;
17.What is animation-duration?
The animation-duration property defines how long an animation should take to
complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0s (0 seconds).
Example: animation-duration: 5s;
18.What is animation-delay?
The animation-delay property specifies a delay for the start of an animation.
Example: animation-delay: 5s;
19.What is animation-iteration-count?
The animation-iteration-count property specifies the number of times an animation
should run.
Example: animation-iteration-count: 5;
20. What is animation-direction?
The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.
– normal – The animation is played as normal(forwards). This is default.
– reverse – The animation is played in reverse direction(backwards).
– alternate – The animation is played forwards first, then backwards.
– alternate-reverse – The animation is played backwards first, then forwards.
21.What is animation-timing-function?
The animation-timing-function property specifies the speed curve of animation.
– ease – Specifies an animation with a slow start, then fast, then end slowly.
– linear – Specifies an animation with same speed from start to end.
– ease-in – Specifies an animation with a slow start.
– ease-out – Specifies an animation with a slow end.
– ease-in-out – Specifies an animation with a slow start and end.
22.What is CSS Transition?
CSS transitions allows you to change property values smoothly, over a given duration.
Example:
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
23. List out the properties of CSS Transition.
– transition
– transition-delay
– transition-duration
– transition-property
– transition-timing-function
24. What is SVG?
SVG stands for (Scalable Vector Graphics) HTML5 provides SVG technology to define graphics in a webpage. SVG is used to draw two-dimensional vector-based graphics on web pages. SVG graphics do NOT lose any quality if they are zoomed or resized. Every element and every attribute in SVG files can be animated. The element specifies the root of an SVG fragment. You can animate every element and every attribute in SVG files.
25. What is the full form of SVG?
SVG stands for Scalable Vector Graphics.
26. Why would you use SVG?
SVG files contain enough information to display vectors at any scale, SVG graphics do not lose any quality if they are zoomed or resized.
27. What are the advantages of SVG?
– SVG images can be created with any text editors
– SVG images can be searched, indexed, scripted & compressed.
– SVG images are scalable.
– SVG images can be printed with high quality at any resolution.
28. What are the major applications of SVG?
SVG is used in many business areas including:
– Web graphics
– Animation
– User interfaces
– Graphics interchange
– Print and hardcopy output
– Mobile applications and high-quality design.
29. What are the pre-defined shapes in SVG?
SVG has some predefined shape elements that can be used by developers:
– Rectangle
– Circle
– Ellipse
– Line
– Polyline
– Polygon
– Path
These are the tags used to create SVG graphic images.
30. What are the gradients of SVG?
Gradient refers to the smooth transition of one color to another color within a shape.
SVG provides two types of gradients.
– Linear Gradients
– Radial Gradients
31. What is SVG Linear Gradient?
It means the Transition from one direction to another.
32. What is Radial Gradient?
It means the Transition circularly from one color to another from one direction to another.
33. How to use the tag to create a circle in SVG?
The SVG element creates circles, based on a center point and a radius. The coordinates of the circle’s center are specified by the cx and cy attributes. And the radius of the circle is specified by the r attribute.
<circle cx=”50″ cy=”50″ r=”40″ stroke=”orange” stroke-width=”4″ fill=”Black”/>
34.How to specify a border to a rectangle in SVG?
The CSS stroke-width property defines the width of the border of the rectangle
<rec width=”500″ height=”200″ stroke=”orange” stroke-width=”10″ fill=”Black”/>
35. What is HTML Canvas?
– The HTML Canvas element is a rectangular area on an HTML page that can be used to draw graphics. you must use Javascript to draw any graphics.
– HTML canvas is a versatile and powerful element in HTML5 that allows for dynamic rendering of graphics, animations, and interactive elements on a web page.
36. Why canvas is used?
– It use the canvas to create animations.
– It use the canvas to create games.
– It used to draw graphics, on the fly, via JavaScript.
37. List the canvas drawing rectangle methods.
The rect() method adds a rectangle to the path.
The beginPath() Method (To begin the path)
The stroke() Method (To draw the path)
The fill() Method (To fill and draw the rectangle)
The fillRect() Method (Draw a filled rectangle)
or
– fillRect(x, y, width , height)
– storkeRect(x, y, width , height)
– clearRect(x, y, width , height)
38. List the canvas drawing paths methods. ( Also ask for 5m)
– beginPath() This method resets the current path. moveTo(x, y) This method creates a new subpath with the given point.
– closePath() This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.
– fill() This method fills the subpaths with the current fill style.
– stroke() This method strokes the subpaths with the current stroke style. arc(x, y, radius, startAngle, endAngle, anticlockwise)
39. List the canvas drawing Bezier curves methods.
– beginPath()
This method resets the current path.
– moveTo(x, y)
This method creates a new subpath with the given point.
– closePath()
This method marks the current subpath as closed, and starts a new subpath with a
point the same as the start and end of the newly closed subpath.
– fill()
This method fills the subpaths with the current fill style.
– stroke()
This method strokes the subpaths with the current stroke style.
– bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
This method adds the given point to the current path, connected to the previous one by a cubic Bezier curve with the given control points.
40. List the canvas drawing quadratic curve methods.
– beginPath()
This method resets the current path.
– moveTo(x, y)
This method creates a new subpath with the given point.
– closePath()
This method marks the current subpath as closed, and starts a new subpath
with a point the same as the start and end of the newly closed subpath.
– fill()
This method fills the subpaths with the current fill style.
– stroke()
This method strokes the subpaths with the current stroke style.
– quadraticCurveTo(cpx, cpy, x, y)
This method adds the given point to the current path, connected to the previous one
by a quadratic Bezier curve with the given control point.
41. List the canvas images methods.
-drawImage(image, dx, dy)
This method draws the given image onto the canvas. Here image is a reference to an
image or canvas object. x and y form the coordinate on the target canvas where our
image should be placed.
– beginPath()
This method resets the current path.
– moveTo(x, y)
This method creates a new subpath with the given point.
– closePath()
This method marks the current subpath as closed, and starts a new subpath with
a point the same as the start and end of the newly closed subpath.
– fill()
This method fills the subpaths with the current fill style.
– stroke()
This method strokes the subpaths with the current stroke style.
– addColorStop(offset, color)
This method adds a color stop with the given color to the gradient at the given offset. Here 0.0 is the offset at one end of the gradient, 1.0 is the offset at the other end.
– createLinearGradient(x0, y0, x1, y1)
This method returns a CanvasGradient object that represents a linear gradient that paints along the line given by the coordinates represented by the arguments. The four arguments represent the starting point (x1,y1) and end point (x2,y2) of the gradient.
– createRadialGradient(x0, y0, r0, x1, y1, r1)
This method returns a CanvasGradient object that represents a radial gradient that paints along the cone given by the circles represented by the arguments. The first three arguments define a circle with coordinates (x1,y1) and radius r1 and the second a circle
with coordinates (x2,y2) and radius r2.