Scribd
Upload
41 views

Interactive Web Design - Short

Uploaded by

Prabhas P
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
41 views

Interactive Web Design - Short

Uploaded by

Prabhas P
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

UNIT-I

INTRODUCTION TO HTML

Short Answers

1.Write about Search engine


A search engine is a software system that uses algorithms to search for
information on the Internet.
Or
A search engine is an online tool that helps the users to find the
information on the web by typing in keywords or questions. It scans the
web, indexes content, and provides a list of web pages that match the
search terms.
Examples:
www.yahoo.com
www.google.com
www.bing.com etc..

2.What are the percentages of using browsers as per 2022


statistics?
According to StatCounter, the market shares were as follows:
 Google Chrome: 65.52%
 Apple Safari: 18.78%
 Microsoft Edge: 4.32%
 Mozilla Firefox:3.05%
 Samsung Internet: 2.85%.

3.What is HTML?
HTML, or Hypertext Markup Language, is the standard markup language
used for creating web pages and web applications. HTML provides the
basic structure of a web page.
HTML is written in the form of HTML elements consisting of tags enclosed
in angle brackets (<,>).HTML tags most commonly come in pairs like <H1>
</H1>. They are also called as starting or opening tag and the closing tag
or ending tag. Browsers are used to read HTML documents.

4.Write the procedure to create a simple HTML page?


We do not require a special tool for making HTML.
We can write HTML using Notepad, wordpad on windows. For Mac we use
text editors.
Steps to create a HTML document:
Open a notepad or word pad.
Write the following code.
<HTML>
<HEAD>
<TITLE> FRONTLINE PUBLISHERS</TITLE>
</HEAD>
<BODY>
Welcome to html
</BODY>
</HTML>
Output:
Welcome to html
Saving:
To save the HTML document go to file menu->save
Extension of a HTML document is .HTM or .HTML
EX: cs.html
After save you can view your information in web browsers.

5.What is a Web browser give some examples?


A Web browser is a software application used to access and interact with
information on the World Wide Web
Or
A web browser is application software for retrieving, presenting and
traversing information resources on the World Wide Web.
Examples:
Google chrome, Mozilla fire fox, Netscape navigator, Opera, Microsoft
Edge etc……

6.Who is Tim Berners Lee?


Tim Berners-Lee is a British computer scientist best known for inventing
the World Wide Web. He developed the first web browser and web server,
which laid the foundation for the modern internet.

7.What is <!DOC TYPE> tag? Write about its uses?


The <!DOC TYPE> tag is the first tag of HTML document.
<!DOCTYPE> tag, is an instruction which indicates the exact language and
version of that language is used to create web page.
Example:
<! DOC TYPE HTML PUBLIC “-//W3C//DTD HTML 5.0//EN”>
It indicates that to use strict HTML 5.
EN indicates English Language.
Most of the HTML programmers omit this <!DOC TYPE>

8.Write about <HTML> tag?


The <html> tag is the root element of an HTML document. It is used to
define the beginning and end of an HTML document. Everything in web
page goes between those two tags.

9.What is the use of <Head> and <TITLE> tags?


<HEAD> tag represent a collection of Meta data for the document, which
holds the information about a document. The <HEAD>……</HEAD>
contains a title, Style sheets and Scripts. Contents in the <HEAD> tag are
not displayed on a web browser.
The <title> tag specifies the title of the HTML document. This title is
displayed in the browser's title bar or tab.
Example:
<TITLE>FRONTLINE PUBLISHERS</TITLE>

10.Write about <BODY> tag?


The <body> tag defines the body of the HTML document. All the content
that should be visible on the web page to the users goes inside the
<body> tag. It is a container for all the elements that make up the visual
and interactive aspects of a web page.

11.What is <META> tag?


The <meta> tag in HTML is used to provide additional information about a
HTML page to search engines and other clients. The <meta> tag goes
inside the <head> section of an HTML document.

12.Write the basic structure of a HTML document.

13.What is Hyperlink?
Hyper link is commonly an underline word or phrase or sometimes even a
graphic image or icon which has been tagged with a particular HTML
command containing the specific address of another location.
Or

Hyper link is the ability to define links from one page to another page on
the web.
Hyperlinks are specified by <a> {anchor tag} linked document is
represented by HREF attribute.
Hyperlinks are enclosed between <a></a>

14.Write about Relative path and Absolute path.


Relative Path
A relative path specifies the location of a file or directory in relation to the
current working directory.
Absolute Path
An absolute path specifies the location of a file or directory from the root
directory, providing a complete route to the desired file or directory.

15.What is the use of target attribute?


The target attribute in HTML is used to specify where to open the linked
document or where to submit the form.
Example:
<a href=http://www.google.com target=”_blank”>GOOGLE</a>

16.Write the syntax of a hyperlink tag with example.


Syntax: <a href="URL">Link Text</a>
Example: <a href="https://www.w3schools.com">W3 schools</a>
In this example:
 <a> is the anchor tag.
 href is the attribute that specifies the destination URL.
 "https://www. w3schools.com" is the URL where the link points.
 W3 schools is the text that will be clickable.

17. Write about link attributes / link options.


1. href Attribute
href: This attribute specifies the URL (Uniform Resource Locator) of the
destination that the link points to. It can be an absolute URL or a relative
URL
<a href="https://mywebsite.com">click for Website</a>
<a href="about.html">About Us</a>

2. target Attribute
target: Specifies where to open the linked document. This attribute is
optional. Possible values include:
_self, _blank, _parent, _top
<a href=http://www.google.com target=”_blank”>GOOGLE</a>

18.Write about <IMG> tag and its attributes.


The <img> tag in HTML is used to embed images in a web page.
Attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Width/height- define the width/height of the image in pixels.
Example:
<img src="cs.jpg" alt="image not found" height=200 width=200>
UNIT-II
HTML TABLES AND FORMS

Short Answers

1.Define sections in HTML.


The <section> element in HTML is used to define sections within a
document such as chapters, headers, footers, or any other sections.
A web page could normally be split into sections for introduction, content,
and contact information etc.

2.Write about Header section.


The <header> element represents a container for introductory content. A
<header> element typically contains:
 one or more heading elements (<h1> - <h6>)
 logo or icon
 authorship information

3.Write about Footer section.


The <footer> element defines a footer for a document or section. A
<footer> element typically contains:
 authorship information
 copyright information
 contact information
 sitemap
 related documents
You can have several <footer> elements in one document

4.Write about Nav and Aside section.


The <nav> element defines a set of navigation links.
The <aside> element defines some content aside from the content it is
placed in (like a sidebar). The <aside> content should be indirectly related
to the surrounding content.

5.Write about Article section.


The <article> tag specifies independent, self-contained content. An
article should make sense on its own and it should be possible to
distribute it independently from the rest of the site.
Ex: Forum post, Blog post, News story

6.Write a program to display a video file.


<html>
<head>
<title>Video Player Example</title>
</head>
<body>
<h1>Video Player Example</h1>
<video controls>
<source src="video.mp4" type="video/mp4">
<!-- Fallback content -->
Your browser does not support the video tag.
<a href="video.mp4">Download the video</a> instead.
</video>

</body>
</html>

7.Write a program to display an audio file.


<html>
<head>
<title>Audio Player Example</title>
</head>
<body>
<h1>Audio Player Example</h1>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<!-- Fallback content -->
Your browser does not support the audio tag.
<a href="audio.mp3">Download the audio</a> instead.
</audio>
</body>
</html>
8.List important video and audio file formats.
Video File Formats
 MP4 (MPEG-4 Part 14)
 AVI (Audio Video Interleave)
 MOV
 MKV (Matroska Multimedia Container)
 WMV (Windows Media Video)
 FLV (Flash Video)
 3GP and 3G2
 MPG/MPEG (Moving Picture Experts Group)
Audio File Formats
 MP3 (MPEG-1 Audio Layer 3)
 AAC (Advanced Audio Coding)
 WAV (Waveform Audio File Format)
 OGG
 AIFF (Audio Interchange File Format)
 M4A

9.What is HTML Canvas?


The HTML <canvas> element is used to draw graphics, animations, and
other visual elements on a web page using JavaScript. A canvas is a
rectangular area on an HTML page. By default, a canvas has no border
and no content.
<canvas id="canvas" width="200" height="100"></canvas>

UNIT-III
CASCADING STYLE SHEETS (CSS)
Short Answers

1.Define CSS
CSS stands for Cascading Style sheets. It is a text file with .css extension
and it is commonly used to define styles and layouts of web pages written
in HTML. CSS is designed to enable the separation of the document
content and document format

2.Write about Text decoration properties.


Text decoration properties in CSS are used to style the appearance of
text, such as adding underlines, overlines, line-through effects, and
controlling their colors and styles.
Ex:Style.css
h1{
text-decoration:overline;
}
h2{
text-decoration:line-through;
}
h3{
text-decoration:underline;
}
h4{
text-shadow: 5px 5px 5px #FF0000;
}

3.Write about text-color property in CSS.


In CSS, the color property is used to set the color of the text for HTML
elements. This property is fundamental for styling web pages
Syntax:
element {
color: value;
}

4.Write about text-align property in CSS.


The text-align property in CSS is used to specify the horizontal alignment
of text within an element. This property is particularly useful for aligning
text in block-level elements like paragraphs, divs, and headings.

Syntax:
element {
text-align: value;
}
5.Write a program on list-style-image property?
The list-style-image property in CSS is used to specify an image as the
marker for list items.

Style.css
ul
{
list-style-image: url('1.png');
}
1.html
<html>
<head>
<title>List Style Image Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Custom List Markers</h1>
<ul class="custom-list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</body>
</html>

6.Create a list using CSS


Styles.css
ul{
list-style-type: DISC;
}
ol{
list-style-type: lower-roman;
}

Default.html
<html>
<head>
<link rel="stylesheet" type="text/css" href=
"styles.css">
</head>
<body>
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>
<ol>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ol>
</body>
</html>

7.Explain about Links in CSS


Links in CSS refer to the styling of anchor (<a>) elements, which are used
to create hyperlinks.
The four links states are:
a:link: The default state of an unvisited link.
a:visited: The state of a link that the user has already visited.
a:hover: The state of a link when the user hovers over it with the mouse
pointer.
a:active: The state of a link when it is being clicked.

8.Define Border, Padding and Margin.


Border: The border property in CSS defines the boundary of an element.
It surrounds the content and padding of the element.
Padding: Padding is the space between the content of the element and
its border. It is used to create inner spacing within the element.
Margin: Margin is the space outside the border of the element. It is used
to create outer spacing between the element and its surrounding
elements.

9.What are collapsing margins?


Collapsing margins are a unique behavior in CSS where the vertical
margins of adjacent block-level elements collapse into a single margin,
instead of adding up. This behavior simplifies the layout and avoids
unnecessary spacing

10.Define Box model.


The CSS box model is a fundamental concept that describes how the
elements on a web page are structured and how space is calculated
around them. It consists of four main components: content, padding,
border, and margin

11.Write about CSS border.


In CSS, the border property is used to set the border around an element.
Borders can be customized in terms of width, style, and color, and can be
applied to all sides of an element or individually to each side.

12.Write about CSS border color and width.


Border Color: Specifies the color of the border. Possible values include
color names, HEX values, RGB, RGBA, HSL, HSLA, etc.
Border Width: Specifies the thickness of the border. Possible values
include:
 thin, medium, thick
 Specific measurements like px, em, rem, etc.

13.What is float in CSS?


In CSS, the float property is used to position an element to the left or right
within its container, allowing text and inline elements to wrap around it. It
is a fundamental property for creating layouts and controlling the flow of
elements on a web page.

14.What is clear property in CSS float?


The clear property in CSS is used in conjunction with the float property to
control the behavior of an element that comes after a floated element. It
specifies whether an element should be moved down (cleared) below
floated elements to avoid wrapping around them.

15.What is inheritance?
Inheritance in CSS refers to the process by which certain property values
are inherit from parent elements to their child elements. This behavior
helps maintain consistent styling across a web page and reduces the need
to repeatedly define the same styles for multiple elements.

16.What is CSS visibility property


The CSS visibility property controls the visibility of an element on a web
page. It specifies whether the element is visible or hidden without
affecting the layout of the document.

UNIT-IV
CSS BACKGROUNDS & GRADIENTS

Short Answers

1.What is the use of Background-image element?


The background-image property in CSS is used to set one or more images
as the background for an element
Syntax:
element {
background-image: url('image.jpg');
}

2.What is the use of Background-color element?


The background-color property in CSS is used to set the background color
of an element. This property allows you to specify the color that will fill the
background of the element,
Syntax:
element {
background-color: color;
}
3.What is the use of Background-repeat element?
The background-repeat property sets if/how a background image will be
repeated. By default, a background-image is repeated both vertically and
horizontally.
Values for repeat element: Repeat, Repeat-x, Repeat-y, No-Repeat

4.Write about CSS gradients.


CSS gradients allow you to create smooth transitions between two or
more specified colors. Gradients are often used to add depth, dimension,
and visual interest to backgrounds.
CSS defines three types of gradients:
 Linear Gradients (goes down/up/left/right/diagonally)
 Radial Gradients (defined by their center)
 Conic Gradients (rotated around a center point)

5.Define CSS selectors


CSS selectors are patterns used to select and style HTML elements within
a web page. They allow you to apply styles to specific elements based on
their attributes, such as their tag name, class, ID, and more.

UNIT-V
CSS TRANSITIONS & ANIMATIONS

Short Answers

1.Write about CSS transitions.


CSS transitions enable smooth changes between different CSS property
values over a specified duration, enhancing the visual experience. They
are defined using the transition property, specifying which properties to
animate, the duration, timing function, and delay.

2.Write about CSS animations.


CSS animations allow elements to transition between different styles over
a specified duration, using keyframes to define the start and end states as
well as intermediate steps. This provides more control over the
intermediate steps and the overall animation sequence compared to CSS
transitions.

3.List out CSS animation properties.


 @keyframes
 animation-name
 animation-duration
 animation-delay
 animation-iteration-count
 animation-direction
 animation-timing-function
 animation-fill-mode
 animation

4.List out CSS transition properties.


 transition-property
 transition-duration
 transition-timing-function
 transition-delay.

UNIT-VI
CSS FLEXBOX & GRIDS

Short Answers

1.Define CSS flexbox.


CSS Flexbox or Flexible Box Layout, is a powerful layout module that
allows you to design complex, responsive layouts efficiently. It provides an
easy way to align and distribute space among items in a container, even
when their size is unknown or dynamic.

2.What is CSS flex container?


A CSS flex container is an element with the display: flex or display:
inline-flex property. This container enables the use of the Flexbox
layout model, allowing its children (called flex items) to be arranged
dynamically in various ways to achieve responsive and flexible layouts.

3.Define CSS Grid.


CSS Grid Layout, commonly known as CSS Grid, is a two-dimensional
layout system that allows you to create complex web layouts with ease. It
enables you to define rows and columns in a grid, and place items into
these grid cells.

4.Name some CSS grid properties


 grid-column-start
 grid-column-end
 grid-row-start
 grid-row-end
 grid-column
 grid-row
 grid-area
 justify-self
 align-self

5.Define CSS Flex layout.


Refer Q.No 01

6.What is Media Query?


Media queries are a CSS technique used to apply styles based on the
characteristics of the device or viewport, such as width, height, resolution,
orientation, and more. They are a cornerstone of responsive web design,
allowing you to create adaptable layouts that work well on a wide range of
devices, from mobile phones to desktop monitors.
UNIT-VII
JAVASCRIPT

Short Answers

1.What is JavaScript?
JavaScript is a high-level, interpreted programming language that is
primarily used to create dynamic and interactive effects within web
browsers rather than on a server It was originally developed by Netscape
as a means to add interactivity to web pages.
2.What are the basic data types in JavaScript?
Number: Represents numeric values, both integers and floating-point
numbers.
 Examples: 10, 3.14, -25,
String: Represents textual data enclosed within single quotes (') or
double quotes (").
 Examples: (interpreted as string).
Boolean: Represents a logical value indicating true or false.
 Examples: true, false.
Null: Represents the intentional absence of any object value.
 Example: null.

3.What are JavaScript closures?


JavaScript closures are functions that remember the variables from the
parent scope even after the parent function has finished executing. They
allow for maintaining state and creating private variables in JavaScript.

4.What is the difference between == and === in JavaScript?


The == operator compares the values of two variables after performing
type conversion if necessary. On the other hand, the === operator
compares the values of two variables without performing type conversion.

5.What is hoisting in JavaScript?


Hoisting in JavaScript is a mechanism where variable and function
declarations are moved to the top of their containing scope during the
compilation phase, before the code is executed.

6.What is the difference between let and var in JavaScript?


var has function scope or global scope (if declared outside any function),
and variables declared with var are hoisted to the top of their scope. They
can be re-declared and updated.
let, has block scope (scoped to the nearest enclosing curly braces {}).
Variables declared with let are not hoisted to the top of their block scope,
and they cannot be re-declared within the same scope.

7.What is the DOM in JavaScript?


The DOM (Document Object Model) in JavaScript is a programming
interface that represents the structure of a web page as a hierarchical
tree of objects. It provides a way for scripts to dynamically access and
manipulate the content, structure, and style of HTML and XML documents.

8.What is Whitespace & line Break?


Whitespace: Refers to spaces, tabs, and newline characters (\n). These
characters are used for formatting code to make it more readable but are
otherwise ignored by the JavaScript engine during execution.
Line Break: Denotes the end of a line of code. In JavaScript, line breaks
are typically represented by the newline character (\n) and are used to
separate statements or code blocks within scripts.

9.Why semicolons are used?


Semicolons in JavaScript are used to terminate statements, ensuring code
readability and preventing errors that can arise from automatic semicolon
insertion (ASI)

10.What is the syntax for declaring a variable in JavaScript?


In JavaScript, variables are declared using keywords such as var, let, or
const, followed by the variable name.
Here is the syntax:
// Using var (function scoped or globally scoped)
var variableName;

// Using let (block scoped)


let variableName;

// Using const (block scoped, constant value)


const constantName = value;

11.What is a function in JavaScript?


A function in JavaScript is a block of code that performs a specific task or
calculates a value. It is defined using the function keyword, followed by a
name (optional) and a set of parameters enclosed in parentheses.

12.What is an array in JavaScript?


An array in JavaScript is a data structure that stores a collection of
elements sequentially indexed starting from zero. It can hold various data
types, including numbers, strings, objects, and other arrays.
UNIT-VIII
JS STATEMENTS AND FUNCTIONS

Short Answers

1.What is if statement in JavaScript?


An if statement in JavaScript is a control structure that allows you to
execute a block of code only if a specified condition evaluates to true.
Syntax:
if (condition) {
// code to be executed if the condition is true
}
2.What is if…else if.. Statement in JavaScript?
An if...else if...else statement in JavaScript is used to test multiple
conditions in sequence, executing different blocks of code based on which
condition is true.
Syntax:
if (condition1) {
// code to be executed if condition1 is true
} else if (condition2) {
// code to be executed if condition2 is true
} else {
// code to be executed if neither condition1 nor condition2
is true
}

3.What is for loop in JavaScript?


A for loop in JavaScript is a control structure that allows you to repeat a
block of code a certain number of times. It is particularly useful for
iterating over arrays or executing a code block a specific number of times.
Syntax:
for (initialization; condition; increment) {
// code to be executed in each iteration
}

4.Define function using the keywords.


In JavaScript, you define a function using the function keyword followed by
the function name, a list of parameters enclosed in parentheses, and a
block of code enclosed in curly braces.
Syntax:
function functionName(parameter1, parameter2) {
// code to be executed
}
5.What are the Benefits of Functions?
Reusability: Functions allow you to write a piece of code once and reuse
it multiple times, reducing code duplication.
Modularity: They help in breaking down a large program into smaller,
manageable, and logical sections.

6.What are the main ways to create arrays?


In JavaScript, there are two main ways to create arrays:
1.Using Array Literals:
let arr = [element1, element2, element3];
Ex: let fruits = ["apple", "banana", "cherry"];

2.Using the Array Constructor:


let arr = new Array(element1, element2, element3);
Ex: let fruits = new Array("apple", "banana", "cherry");

7. What are the Common Array Method?


1.push(): Adds one or more elements to the end of an array.
arr.push(element1, element2);
2.pop(): Removes the last element from an array.
arr.pop();
3.shift(): Removes the first element from an array.

8.Write the structure of Dom in Javascript

You might also like