Scribd
Upload
243 views65 pages

Web Development IMP Answers

Uploaded by

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

Web Development IMP Answers

Uploaded by

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

Chapter 1.

HTML 5
Q1) Design HTML form for placement campus Drive. Assume suitable fields & validate any
5
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Campus Placement Drive Form</title>
</head>

<body>
<h1>Campus Placement Drive Registration</h1>
<form action="#" method="post">
<!-- Name Field -->
<label for="name">Full Name:</label>

<input type="text" id="name" name="name" placeholder="Enter your full name" required>


<br><br>

<!-- Email Field -->


<label for="email">Email Address:</label>

<input type="email" id="email" name="email" placeholder="Enter your email" required>


<br><br>

<!-- Contact Number Field -->


<label for="contact">Contact Number:</label>

<input type="tel" id="contact" name="contact" placeholder="123-456-7890" pattern="[0-9]{3}-[0-


9]{3}-[0-9]{4}" required>

<small>Format: 123-456-7890</small>
<br><br>

<!-- Graduation Year Field -->


<label for="gradYear">Graduation Year:</label>
<input type="number" id="gradYear" name="gradYear" placeholder="Enter year (e.g., 2024)"
min="2020" max="2030" required>
<br><br>

<!-- Degree Program Field -->

<label for="degree">Degree Program:</label>


<select id="degree" name="degree" required>
<option value="">Select your program</option>
<option value="[Link]">[Link]</option>
<option value="[Link]">[Link]</option>

<option value="MBA">MBA</option>
<option value="Other">Other</option>
</select>
<br><br>

<!-- Submit Button -->


<button type="submit">Submit</button>
</form>
</body>
</html>

[Link] web server Architecture with appropriate diagram.


Web Server Architecture
Web server architecture is a structured approach to managing the interaction between clients and servers to deliver
web services. Below is an explanation of its components and the 3-Tier Architecture, which is the most common
model.

1. Components of Web Server Architecture

1. Client (Browser):

o Sends requests to the server, such as viewing a webpage.

o Examples: Google Chrome, Mozilla Firefox.

2. Web Server:

o Handles incoming HTTP/HTTPS requests.

o Delivers static content (HTML, CSS, JS) or forwards dynamic requests to the application server.

o Examples: Apache, Nginx.


3. Application Server:

o Processes business logic and dynamic data.

o Uses programming languages or frameworks (e.g., Django, Flask, Spring).

o Sends processed results to the web server.

4. Database Server:

o Stores and retrieves data.

o Examples: MySQL, PostgreSQL, MongoDB.

Types of Web Server Architecture


1-Tier Architecture
 In a 1-Tier Architecture, all components (presentation, application logic, and database) are
contained in a single system.
 This architecture is simple and primarily used for standalone applications.

Example:
 A standalone desktop application, such as a personal finance manager, where the UI, processing,
and data storage are all part of the same system.

2-Tier Architecture
 In a 2-Tier Architecture, the application is divided into two layers: the client (presentation) and the
server (business logic + database).
 The client communicates directly with the database server.

Features of 2-Tier Architecture:


1. Client Layer:
o The presentation layer where the user interacts (e.g., a web browser or desktop application).
o Sends queries to the server and displays results.
2. Server Layer:

o Combines application logic and database management.


o Processes requests from the client, interacts with the database, and sends responses back.
Example:
 A small web application where the client sends queries directly to a database via a thin application
layer.
 Example tools: MySQL, PHP scripts.

3-Tier Web Server Architecture


This is the most common web server design and consists of three layers:

1. Presentation Layer (Client):

o The user interface, usually accessed via a web browser.

o Example: A webpage displayed on the user’s browser.

2. Application Layer (Server Logic):

o Handles requests from the presentation layer.

o Executes business logic, processes data, and interacts with the database.

3. Data Layer (Database Server):

o Responsible for storing and managing data.

o Provides data to the application layer as requested.

Example:

Online Shopping Website

[Link] a program using Canvas tag to draw different shapes (Circle, Triangle and
Rectangle)
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Draw Shapes on Canvas</title>

</head>

<body>

<h1>Draw Shapes with Canvas</h1>

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

<script>

// Get the canvas element and its context

const canvas = [Link]("myCanvas");

const ctx = [Link]("2d");

// Draw a Rectangle

[Link] = "blue"; // Fill color

[Link](50, 50, 100, 50); // x, y, width, height

// Draw a Circle

[Link]();

[Link](250, 75, 40, 0, 2 * [Link]); // x, y, radius, startAngle, endAngle

[Link] = "red";

[Link]();

// Draw a Triangle

[Link]();

[Link](150, 200); // Move to the first vertex

[Link](200, 250); // Draw a line to the second vertex

[Link](100, 250); // Draw a line to the third vertex

[Link](); // Close the path to form a triangle

[Link] = "green";

[Link]();

</script>

</body>

</html>

[Link] semantic elements in HTML5./ What are semantic elements and how it works in
HTML5
Semantic elements in HTML5 are tags that clearly define the meaning and structure of the content within them.
These elements describe their purpose to both the browser and developers, making the code more readable,
maintainable, and accessible.
Semantic elements:

1. Define the structure of a webpage.

2. Help browsers and search engines interpret the content correctly.

3. Make it easier for developers to maintain and update code.

Examples of Semantic Elements

1. Structural Elements:

o <header>: Represents the header section of a document or section (e.g., logo, navigation).

o <nav>: Defines a block of navigation links.

o <main>: Represents the main content unique to the document.

o <footer>: Represents the footer section (e.g., copyright, links).

o <section>: Groups related content into distinct sections.

o <article>: Represents independent, self-contained content (e.g., blog post, news article).

o <aside>: Represents content tangentially related to the main content (e.g., sidebar).

2. Text-Enhancing Elements:

o <mark>: Highlights or marks important text.

o <time>: Represents time or dates.

3. Media-Related Elements:

o <figure>: Represents self-contained content, like images or diagrams.

o <figcaption>: Provides a caption for the <figure> element.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Semantic Elements Example</title>

</head>

<body>

<header>

<h1>Welcome to My Website</h1>

<nav>

<a href="#home">Home</a> |

<a href="#about">About</a> |

<a href="#contact">Contact</a>

</nav>
</header>

<main>

<section>

<h2>About Us</h2>

<p>This is an example of a semantic HTML5 structure.</p>

</section>

<aside>

<h3>Related Links</h3>

<ul>

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 2</a></li>

</ul>

</aside>

</main>

<footer>

<p>&copy; 2024 My Website</p>

</footer>

</body>

</html>

[Link] & Video(note)


Audio Element

 The <audio> element is used to embed sound files, such as music, podcasts, or other audio streams.

 It supports multiple formats: MP3, WAV, and OGG.

 The tag contains one or more tags with different audio sources.

Syntax

<audio controls>

<source src="audiofile.mp3" type="audio/mpeg">

<source src="[Link]" type="audio/ogg">

Your browser does not support the audio element.

</audio>
Attributes

Video in HTML5
Video Element

 The <video> element is used to embed video files.

 It supports multiple formats: MP4, WebM, and OGG.

 The tag contains one or more tags with different video sources. The browser will choose the first source it
supports.

Syntax:

<video controls width="640" height="360">

<source src="videofile.mp4" type="video/mp4">

<source src="[Link]" type="video/webm">

Your browser does not support the video element.

</video>

Attributes
Example: Embedding Both Audio and Video

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML5 Audio and Video</title>

</head>

<body>

<h1>HTML5 Audio and Video Example</h1>

<h2>Audio Example</h2>

<audio controls>

<source src="example.mp3" type="audio/mpeg">

<source src="[Link]" type="audio/ogg">

Your browser does not support the audio element.

</audio>

<h2>Video Example</h2>

<video controls width="640" height="360" poster="[Link]">

<source src="example.mp4" type="video/mp4">

<source src="[Link]" type="video/webm">

Your browser does not support the video element.

</video>

</body>

</html>

[Link] a program using tag to draw line, rectangle and triangle shapes.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Draw Shapes with Canvas</title>

</head>
<body>

<h1>Draw Line, Rectangle, and Triangle using Canvas</h1>

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

<script>

// Get the canvas element and its context

const canvas = [Link]("myCanvas");

const ctx = [Link]("2d");

// Draw a Line

[Link]();

[Link](50, 50); // Starting point (x, y)

[Link](200, 50); // Ending point (x, y)

[Link] = "blue"; // Line color

[Link] = 2; // Line width

[Link]();

// Draw a Rectangle

[Link] = "green"; // Fill color for rectangle

[Link](100, 100, 150, 75); // x, y, width, height

// Draw a Triangle

[Link]();

[Link](300, 200); // First vertex

[Link](350, 275); // Second vertex

[Link](250, 275); // Third vertex

[Link](); // Connect back to the first vertex

[Link] = "red"; // Fill color for triangle

[Link]();

</script>

</body>

</html>
[Link] student registration form for MHT - CET having fields like student Registration Id,
student Name, Address. City, contact Number, Date of Birth. Validate any five fields with
java script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>MHT-CET Student Registration Form</title>
<script>
function validateForm() {
var studentId = [Link]["registrationForm"]["studentId"].value;

var studentName = [Link]["registrationForm"]["studentName"].value;


var address = [Link]["registrationForm"]["address"].value;
var city = [Link]["registrationForm"]["city"].value;
var contactNumber = [Link]["registrationForm"]["contactNumber"].value;
var dob = [Link]["registrationForm"]["dob"].value;

if (studentId == "") {
alert("Student Registration ID must be filled out");
return false;
}

if (studentName == "") {
alert("Student Name must be filled out");
return false;
}

if (address == "") {
alert("Address must be filled out");
return false;
}
if (city == "") {
alert("City must be selected");
return false;

if (contactNumber == "") {
alert("Contact Number must be filled out");
return false;

} else if (!/^\d{10}$/.test(contactNumber)) { // Validate that contact number is exactly 10 digits


alert("Please enter a valid 10-digit contact number");
return false;
}

if (dob == "") {
alert("Date of Birth must be selected");
return false;
}

return true;
}
</script>
</head>
<body>

<h1>MHT-CET Student Registration Form</h1>


<form name="registrationForm" onsubmit="return validateForm()">
<!-- Student Registration ID -->
<label for="studentId">Student Registration ID:</label>
<input type="text" id="studentId" name="studentId" placeholder="Enter your registration ID"
required>
<br><br>

<!-- Student Name -->


<label for="studentName">Student Name:</label>
<input type="text" id="studentName" name="studentName" placeholder="Enter your name"
required>
<br><br>

<!-- Address -->

<label for="address">Address:</label>
<input type="text" id="address" name="address" placeholder="Enter your address" required>
<br><br>

<!-- City -->

<label for="city">City:</label>
<select id="city" name="city" required>
<option value="">Select your city</option>
<option value="Mumbai">Mumbai</option>
<option value="Pune">Pune</option>

<option value="Nagpur">Nagpur</option>
<option value="Aurangabad">Aurangabad</option>
</select>
<br><br>

<!-- Contact Number -->


<label for="contactNumber">Contact Number:</label>
<input type="tel" id="contactNumber" name="contactNumber" placeholder="Enter your 10-digit
contact number" required>
<br><br>

<!-- Date of Birth -->


<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<br><br>

<!-- Submit Button -->


<button type="submit">Register</button>
</form>
</body>
</html>

[Link] HTML <table> tag with properties


The <table> tag is used to create a table structure on a webpage. It consists of rows (<tr>), cells (<td> for
data and <th> for headers), and provides a way to display data in a grid format. Tables are useful for
organizing data in an easy-to-read manner, such as lists, statistics, or tabular data.
Basic Structure of a Table
1. Table Tag (<table>): The main tag for creating the table.
2. Table Row Tag (<tr>): Defines a row in the table.
3. Table Data Cell Tag (<td>): Defines a cell that contains data.

4. Table Header Cell Tag (<th>): Similar to <td>, but represents a header cell, used for header
information and often bolded or otherwise styled differently to distinguish it from regular data cells.
Properties of the <table> Tag
1. border:
o Specifies whether a border should be displayed around the table.
o Default is no border.
o Example: <table border="1"> (Sets a border of 1 pixel).

2. cellpadding:
o Sets the space (in pixels) between the cell content and the cell border.
o Default is 2 pixels.
o Example: <table cellpadding="5"> (Adds 5 pixels of space).
3. cellspacing:

o Sets the space (in pixels) between individual cells in the table.
o Default is 2 pixels.
o Example: <table cellspacing="5"> (Adds 5 pixels of space between cells).
4. width:
o Sets the width of the entire table.

o It can be specified in pixels, percentage, or auto.


o Example: <table width="100%"> (Sets the table width to 100% of the containing element).
5. height:
o Sets the height of the entire table.
o It can be specified in pixels or a percentage.
o Example: <table height="200px"> (Sets the table height to 200 pixels).
6. align:
o Aligns the table within its container (left, right, center, justify).

o Example: <table align="center"> (Centers the table).


7. summary:
o Provides a summary of the table's purpose, especially for accessibility.
o Helps screen readers understand the table's content.
o Example: <table summary="Sales data for Q1 2024">

8. id and class:
o Used to apply CSS styling or JavaScript functionality.
o Example: <table id="salesTable" class="dataTable">
9. caption:
o Creates a title or a caption for the table.

o Appears above the table.


o Example: <table><caption>Monthly Sales Data</caption><tr>...</tr></table>
10. scope:
o Used in <th> to define whether the header cell is a header for the entire table (col for
column header or row for row header).
o Example: <th scope="col">Product</th>
11. colspan:

o Used in <th> and <td> to specify how many columns a cell should span.
o Example: <th colspan="3">Extended Header</th>
12. rowspan:
o Used in <th> and <td> to specify how many rows a cell should span.
o Example: <td rowspan="2">Merged Cell</td>

<table border="1" cellpadding="5" cellspacing="0" width="100%">


<caption>Sales Data for Q1 2024</caption>
<tr>
<th scope="col">Product</th>
<th scope="col">Sales</th>
<th scope="col">Revenue</th>
</tr>
<tr>
<td>Product A</td>
<td>500</td>
<td>$5000</td>

</tr>
<tr>
<td>Product B</td>
<td>300</td>
<td>$3000</td>

</tr>
<tr>
<td>Product C</td>
<td>700</td>
<td>$7000</td>

</tr>
</table>

[Link] and tag with example.


[Link] elements(NOTE)/ [Link] <CANVAS> tag with example.
The <canvas> tag in HTML5 is a powerful tool for rendering graphics and creating interactive elements on a webpage.
It provides a blank drawing area where developers can draw shapes, create animations, and manipulate images
directly using JavaScript.

Basic Structure:

 <canvas> acts as a drawing surface where content is rendered.

 Content is rendered in a 2D coordinate space.

Rendering Context:

 2D Context (getContext('2d')): Used to draw basic shapes, text, and images. Suitable for most drawing tasks.

 WebGL Context (getContext('webgl')): Used for 3D rendering tasks. Requires JavaScript for rendering and is
more complex to use.

Drawing API:

 The canvas API provides a set of methods for drawing shapes, images, and text.

 Example Methods:

o fillRect(x, y, width, height): Draws a filled rectangle.

o strokeRect(x, y, width, height): Draws a rectangle outline.

o beginPath(), moveTo(x, y), lineTo(x, y): Start and draw paths (used for lines, triangles, paths).
o arc(x, y, radius, startAngle, endAngle): Draws a circle or an arc.

o fill(): Fills the current path with a color or gradient.

o stroke(): Outlines the current path with a color.

o clearRect(x, y, width, height): Clears the specified rectangular area.

Handling Images:

 drawImage(image, x, y): Draws an image at the specified location.

 Supports various formats like JPEG, PNG, GIF, and SVG.

Text Handling:

 font: Specifies the font style.

 fillText(text, x, y): Draws filled text.

 strokeText(text, x, y): Draws text with an outline.

Transformations:

 rotate(angle): Rotates the canvas.

 scale(x, y): Scales the canvas.

 translate(x, y): Moves the canvas.

 transform(), setTransform(): Set a custom matrix transformation.

Image Data:

 getImageData(x, y, width, height): Returns pixel data for a specific area of the canvas.

 putImageData(imageData, x, y): Draws pixel data back onto the canvas.

Events:

 The <canvas> tag can listen to user events like click, mousemove, and keydown to interact with the user.

 Example: [Link]('click', myFunction)

CSS Styling:

 You can apply CSS styling directly to the <canvas> tag using CSS properties like width, height, background
color, and border.

Example Usage of Canvas in HTML5

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Canvas Elements Example</title>

</head>

<body>
<h1>Drawing on Canvas</h1>

<canvas id="myCanvas" width="500" height="300" style="border:1px solid #000;"></canvas>

<script>

var canvas = [Link]("myCanvas");

var ctx = [Link]("2d");

// Draw a Rectangle

[Link] = "blue";

[Link](50, 50, 150, 100);

// Draw a Circle

[Link]();

[Link](300, 100, 50, 0, 2 * [Link]);

[Link] = "red";

[Link]();

// Draw a Triangle

[Link]();

[Link](400, 200);

[Link](450, 250);

[Link](350, 250);

[Link]();

[Link] = "green";

[Link]();

// Draw Text

[Link] = "30px Arial";

[Link] = "black";

[Link]("Hello Canvas!", 150, 250);

</script>

</body>

</html>
Q. Design HTML form to do driving license registration. Take suitable fields. Using
javascript do validations (Name, Age, Email, Mobile, Gender)
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Driving License Registration Form</title>
<script>
function validateForm() {

var name = [Link]["registrationForm"]["name"].value;


var age = [Link]["registrationForm"]["age"].value;
var email = [Link]["registrationForm"]["email"].value;
var mobile = [Link]["registrationForm"]["mobile"].value;
var gender = [Link]["registrationForm"]["gender"].value;

if (name == "") {
alert("Name must be filled out");
return false;
}

if (age == "") {
alert("Age must be filled out");
return false;
} else if (isNaN(age) || age < 18) { // Validate that age is a number and at least 18

alert("Please enter a valid age (18 or older)");


return false;
}

if (email == "") {
alert("Email must be filled out");
return false;
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { // Validate email format
alert("Please enter a valid email address");
return false;

if (mobile == "") {
alert("Mobile number must be filled out");
return false;

} else if (!/^\d{10}$/.test(mobile)) { // Validate that mobile number is exactly 10 digits


alert("Please enter a valid 10-digit mobile number");
return false;
}

if (gender == "") {
alert("Gender must be selected");
return false;
}

return true;
}
</script>
</head>
<body>

<h1>Driving License Registration Form</h1>


<form name="registrationForm" onsubmit="return validateForm()">
<!-- Full Name -->
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your full name" required>

<br><br>

<!-- Age -->


<label for="age">Age:</label>
<input type="number" id="age" name="age" placeholder="Enter your age" required>
<br><br>

<!-- Email -->


<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<br><br>

<!-- Mobile -->


<label for="mobile">Mobile Number:</label>
<input type="tel" id="mobile" name="mobile" placeholder="Enter your 10-digit mobile number"
required>
<br><br>

<!-- Gender -->

<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

<input type="radio" id="other" name="gender" value="other">


<label for="other">Other</label>
<br><br>

<!-- Submit Button -->

<button type="submit">Register</button>
</form>
</body>
</html>

Q. Write Javascript program to generate bill of any 5 products purchased by customer


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Generate Bill for Purchased Products</title>


<script>
function generateBill() {
// Product details
var products = [

{ name: "Product 1", quantity: parseInt([Link]("quantity1").value), price:


parseFloat([Link]("price1").value) },

{ name: "Product 2", quantity: parseInt([Link]("quantity2").value), price:


parseFloat([Link]("price2").value) },
{ name: "Product 3", quantity: parseInt([Link]("quantity3").value), price:
parseFloat([Link]("price3").value) },
{ name: "Product 4", quantity: parseInt([Link]("quantity4").value), price:
parseFloat([Link]("price4").value) },
{ name: "Product 5", quantity: parseInt([Link]("quantity5").value), price:
parseFloat([Link]("price5").value) },
];

// Calculate total amount

var totalAmount = 0;
[Link](function(product) {
var amount = [Link] * [Link];
totalAmount += amount;
});

// Display the bill


var billHTML = "<h2>Bill Details</h2><table
border='1'><tr><th>Product</th><th>Quantity</th><th>Price</th><th>Amount</th></tr>";
[Link](function(product) {
var amount = [Link] * [Link];
billHTML += "<tr><td>" + [Link] + "</td><td>" + [Link] + "</td><td>" +
[Link](2) + "</td><td>" + [Link](2) + "</td></tr>";
});
billHTML += "<tr><td colspan='3'>Total Amount</td><td>" + [Link](2) +
"</td></tr></table>";

// Display the bill on the page


[Link]("bill").innerHTML = billHTML;

}
</script>
</head>
<body>
<h1>Customer Bill Generator</h1>

<form>
<!-- Product 1 -->
<label for="quantity1">Quantity of Product 1:</label>
<input type="number" id="quantity1" name="quantity1" required>
<label for="price1">Price of Product 1:</label>

<input type="number" id="price1" name="price1" step="0.01" required>


<br><br>

<!-- Product 2 -->


<label for="quantity2">Quantity of Product 2:</label>

<input type="number" id="quantity2" name="quantity2" required>


<label for="price2">Price of Product 2:</label>
<input type="number" id="price2" name="price2" step="0.01" required>
<br><br>

<!-- Product 3 -->


<label for="quantity3">Quantity of Product 3:</label>
<input type="number" id="quantity3" name="quantity3" required>
<label for="price3">Price of Product 3:</label>
<input type="number" id="price3" name="price3" step="0.01" required>
<br><br>

<!-- Product 4 -->


<label for="quantity4">Quantity of Product 4:</label>
<input type="number" id="quantity4" name="quantity4" required>
<label for="price4">Price of Product 4:</label>

<input type="number" id="price4" name="price4" step="0.01" required>


<br><br>

<!-- Product 5 -->


<label for="quantity5">Quantity of Product 5:</label>

<input type="number" id="quantity5" name="quantity5" required>


<label for="price5">Price of Product 5:</label>
<input type="number" id="price5" name="price5" step="0.01" required>
<br><br>

<!-- Generate Bill Button -->


<button type="button" onclick="generateBill()">Generate Bill</button>
</form>

<div id="bill"></div>

</body>
</html>

Q. Explain <svg> tag in HTML 5 with suitable example.


The <svg> tag in HTML5 is used to define Scalable Vector Graphics (SVG) on a webpage. SVG is a widely-used format
for creating vector-based images that can scale to any size without losing quality. It allows developers to create and
manipulate graphics using XML syntax and can be styled, animated, and interacted with using CSS and JavaScript.

Key Features of the <svg> Tag

1. Vector Graphics:

o SVG graphics are composed of lines, curves, and shapes defined using mathematical formulas,
making them scalable and resolution-independent.

2. Integration with HTML:

o SVG content can be directly embedded into HTML using the <svg> tag.

o SVG can be manipulated via JavaScript and styled with CSS.

3. Attributes:

o width and height: Define the dimensions of the SVG.

o viewBox: Specifies the initial coordinate system and viewport size for the SVG canvas.
o xmlns: Ensures SVG content is treated as XML, which is necessary for proper rendering and
interaction.

o preserveAspectRatio: Defines how the SVG content should be scaled if the SVG's viewport aspect
ratio differs from its parent container.

o id and class: Allow SVG elements to be referenced or styled using CSS and JavaScript.

4. Shapes and Elements:

o <rect>: Defines rectangles.

o <circle>: Defines circles.

o <ellipse>: Defines ellipses.

o <line>: Defines lines.

o <polyline>: Defines polylines.

o <polygon>: Defines polygons.

o <path>: Draws complex paths with a set of instructions.

o <text>: Displays text.

5. Events:

o SVG supports user interaction through events like click, mouseover, mousemove, and keypress which
can be handled using JavaScript.

Example of Using the <svg> Tag

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>SVG Example</title>

<style>

/* Custom CSS for styling SVG */

.shape {

stroke: black;

stroke-width: 2;

fill: lightblue;

.text {

font-family: Arial, sans-serif;

font-size: 14px;

fill: darkblue;
}

</style>

</head>

<body>

<h1>SVG Example in HTML5</h1>

<svg width="400" height="300" xmlns="[Link] viewBox="0 0 400 300">

<!-- Rectangle -->

<rect x="50" y="50" width="150" height="100" class="shape" />

<!-- Circle -->

<circle cx="300" cy="100" r="50" class="shape" />

<!-- Ellipse -->

<ellipse cx="100" cy="200" rx="80" ry="40" class="shape" />

<!-- Line -->

<line x1="250" y1="200" x2="350" y2="250" class="shape" />

<!-- Polygon -->

<polygon points="150,250 200,300 250,250" class="shape" />

<!-- Text -->

<text x="50" y="250" class="text">SVG Shapes</text>

</svg>

</body>

</html>

Q. What is HTML5. Explain its features and advantages.


HTML5 is the latest version of the HyperText Markup Language (HTML), which is used for structuring and presenting
content on the World Wide Web. It was designed to enhance the web's capabilities, making it easier to build rich,
interactive, and responsive web applications.

Features of HTML5
1. Improved Semantic Elements:

o HTML5 introduces new semantic tags such as <header>, <footer>, <nav>, <article>, <section>, and
<aside>.
o These tags provide more context to the content, making the code easier to read, understand, and
maintain.

o Benefits:

 Accessibility: Enhances the browsing experience for users relying on assistive technologies.

 SEO: Improves how search engines index and understand web content.

 Consistency: Ensures consistent structure and behavior across different browsers.

2. Enhanced Multimedia Support:

o HTML5 natively supports video (<video>) and audio (<audio>) elements without the need for
additional plugins like Flash.

o It also supports various multimedia formats like MP4, WebM, and OGG for video, and MP3, WAV, and
OGG for audio.

o Benefits:

 Cross-browser Compatibility: Videos and audio work seamlessly across all modern browsers.

 Performance: Directly embedded media avoids dependency on third-party plugins.

 Responsive Design: Media can be easily integrated into responsive web designs.

3. Canvas for Graphics:

o The <canvas> element allows developers to draw graphics, create animations, and render complex
visual elements directly on the webpage using JavaScript.

o Benefits:

 Dynamic Content: Enables the creation of interactive content without needing third-party
plugins.

 Real-time Rendering: Supports real-time user interaction and animations.

 Scalable: Works on any screen size and can be responsive.

4. Offline Capabilities with Web Storage:

o HTML5 introduces offline storage features such as localStorage and sessionStorage which allow web
applications to store data locally on the user's device.

o Benefits:

 Improved Performance: Data can be cached locally, reducing server load and latency.

 Offline Access: Users can access certain parts of a web application even without an internet
connection.

 Better User Experience: Faster loading times and reduced need for repeated server requests.

5. Geolocation Support:

o HTML5 provides a way for websites to access the user's location through the <geo> API.

o Benefits:

 Context-aware Applications: Applications can provide localized content or services based on


the user's location.

 Enhanced User Interaction: Supports features like maps and location-based services.
Advantages of HTML5

1. Backward Compatibility:

o HTML5 maintains backward compatibility with HTML4, XHTML, and older versions of HTML, making
it easier for developers to upgrade without breaking older web pages.

2. Unified Markup:

o By combining HTML with CSS and JavaScript, HTML5 provides a unified markup language that can
handle all content types (text, video, audio, images) in a more standardized way.

3. SEO Benefits:

o With improved semantics and multimedia support, HTML5 pages are better indexed by search
engines, improving search engine rankings and visibility.

4. Enhanced Multimedia Support:

o The native support for video and audio files reduces dependency on plugins and allows for smoother,
more integrated multimedia content.

5. Improved User Interaction:

o HTML5 introduces new ways to interact with web pages, such as drag and drop, geolocation, and
device access, providing a more dynamic user experience.

6. Flexibility and Responsiveness:

o HTML5’s responsive design capabilities enable websites to adapt to different screen sizes and
devices, which is crucial in the era of mobile-first design.

7. Scalable:

o The use of vector graphics and scalable multimedia means that HTML5 applications can scale
smoothly across various devices and resolutions.
Chapter 2. CSS3
Write an external CSS for following properties and apply it on any HTML page.
a) Image with 70% opacity and border 2px.
b) Hyperlink with red color & border color red.
c) Text with superscript and blue color.
d) Div with animation duration 4s & iteration count 3.
e) Paragraph with black color pink & text color red
[Link]

<!-- [Link] -->

/* a) Image with 70% opacity and border 2px */

.image-style {

opacity: 0.7;

border: 2px solid black;

/* b) Hyperlink with red color & border color red */

.link-style {

color: red;

border-color: red;

border-style: solid;

border-width: 1px;

/* c) Text with superscript and blue color */

.superscript-style {

color: blue;

vertical-align: super; /* Makes the text superscript */

/* d) Div with animation duration 4s & iteration count 3 */

.animated-div {

animation: bounce 4s infinite 3; /* Applying the bounce animation */

}
@keyframes bounce {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(-20px); }

/* e) Paragraph with black color, pink background, and red text color */

.p-style {

color: black;

background-color: pink;

color: red;

[Link]

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>External CSS Example</title>

<link rel="stylesheet" href="[Link]">

</head>

<body>

<h1>CSS Properties Applied</h1>

<!-- a) Image with 70% opacity and border 2px -->

<img src="[Link]" alt="Example Image" class="image-style">

<!-- b) Hyperlink with red color & border color red -->

<a href="#">Red Hyperlink</a>

<!-- c) Text with superscript and blue color -->

<p class="superscript-style">This is a <sup>superscript</sup> text.</p>

<!-- d) Div with animation duration 4s & iteration count 3 -->


<div class="animated-div">Animated Div</div>

<!-- e) Paragraph with black color, pink background, and red text color -->

<p class="p-style">This paragraph has a pink background and red text color.</p>

</body>

</html>

Explain External CSS (CSS Properties: Font, Text, Color) with suitable example.
External CSS
Definition:
External CSS involves linking a separate CSS file to an HTML document. This approach separates style definitions from
content, improving maintainability and reusability.

Example:

CSS File ([Link]):

body {

background-color: #f0f0f0;

font-family: Arial, Helvetica, sans-serif;

color: #333333;

h1 {

color: navy;

text-align: center;

text-decoration: underline;

p{

font-size: 16px;

text-indent: 30px;

line-height: 1.6;

HTML File ([Link]):

<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>External CSS Example</title>

<link rel="stylesheet" type="text/css" href="[Link]">

</head>

<body>

<h1>Welcome to CSS</h1>

<p>This is an example of using external CSS to style your web page. The styles for font, text, and color are defined
in a separate CSS file, making the code modular and maintainable.</p>

</body>

</html>

CSS Properties

1. Font Properties

 Control the appearance of text, including font family, size, weight, style, etc.

CSS Example:

p{

font-family: "Times New Roman", Times, serif;

font-size: 18px;

font-weight: bold;

font-style: italic;

2. Text Properties

 Handle the alignment, decoration, transformation, and spacing of text.

CSS Example:

h1 {

text-align: center;

text-transform: uppercase;

text-decoration: overline;

letter-spacing: 2px;

line-height: 1.5;

3. Color Properties

 Specify the text color, background color, or borders using color names, hexadecimal, RGB, or HSL values.
CSS Example:

h1 {

color: #1a73e8; /* Blue */

p{

background-color: #f8f9fa; /* Light grey */

color: #202124; /* Blackish-grey */

Explanation of Example

1. Font Properties:

o The font-family in body ensures consistency across the page.

o The font-size and font-weight in p emphasize clarity and structure.

2. Text Properties:

o The text-align centers the h1 title, while text-decoration adds underlining for emphasis.

3. Color Properties:

o Background and text colors provide a visually appealing and readable layout.

Explain any four pseudo classes in CSS with suitable example


A pseudo-class is used to define the special state of an element. They target elements based on user interactions or
specific characteristics that cannot be easily targeted using simple selectors.

1. :hover
 Applies styles when the user hovers over an element.

 Commonly used for buttons or links.

2. :focus
 Activates when an element gains focus (e.g., through clicking or tabbing with a keyboard).

 Commonly used for form inputs.

3. :nth-child(n)
 Matches an element that is the nth child of its parent.

 Useful for alternating styles.

4. :first-child
 Targets the first child of a parent element.

Example:
<!DOCTYPE html>
<html lang="en">

<head>

<style>

/* General styles */

ul {

list-style-type: none;

padding: 0;

margin: 0;

li {

padding: 10px 20px;

font-size: 18px;

border: 1px solid lightgray;

/* Pseudo-classes */

li:first-child {

background-color: lightblue;

font-weight: bold;

li:nth-child(even) {

background-color: lightgrey;

li:hover {

background-color: yellow;

cursor: pointer;

li:focus {

outline: 2px solid blue;

}
</style>

</head>

<body>

<h1>Combined Pseudo-Class Example</h1>

<ul tabindex="0">

<li>Item 1 (First Child)</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

<li>Item 5</li>

</ul>

</body>

</html>

Write CSS script for: a) Paragraph with Bold & background yellow
b) Div with margins 1.5 px
c) Image with caption & bottom
d) Table rows with alternate color
e) Table with all border different colours
CSS Script
/* a) Paragraph with Bold & Background Yellow */

[Link]-yellow {

font-weight: bold;

background-color: yellow;

/* b) Div with Margins 1.5px */

[Link] {

margin: 1.5px;

border: 1px solid black; /* Adding border to visualize margins */

padding: 10px;

background-color: lightgrey;

}
/* c) Image with Caption & Bottom Alignment */

figure {

display: inline-block;

text-align: center;

margin: 20px;

figure img {

display: block;

margin: 0 auto;

figure figcaption {

font-style: italic;

margin-top: 5px;

/* d) Table Rows with Alternate Colors */

[Link] tr:nth-child(odd) {

background-color: lightblue;

[Link] tr:nth-child(even) {

background-color: white;

/* e) Table with All Borders Different Colors */

[Link]-borders {

border-collapse: collapse;

[Link]-borders td,

[Link]-borders th {

border: 2px solid; /* Ensure border-width is consistent */


}

[Link]-borders td:first-child,

[Link]-borders th:first-child {

border-color: red; /* Left border */

[Link]-borders td:last-child,

[Link]-borders th:last-child {

border-color: green; /* Right border */

[Link]-borders tr:first-child td,

[Link]-borders tr:first-child th {

border-color: blue; /* Top border */

[Link]-borders tr:last-child td,

[Link]-borders tr:last-child th {

border-color: orange; /* Bottom border */

HTML Implementation Example


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS Examples</title>

<link rel="stylesheet" href="[Link]">

</head>

<body>

<!-- a) Paragraph with Bold & Background Yellow -->

<p class="bold-yellow">This is a bold paragraph with a yellow background.</p>


<!-- b) Div with Margins 1.5px -->

<div class="margin">This div has a 1.5px margin around it.</div>

<!-- c) Image with Caption & Bottom Alignment -->

<figure>

<img src="[Link]" alt="Example Image" width="300">

<figcaption>This is the caption for the image.</figcaption>

</figure>

<!-- d) Table Rows with Alternate Colors -->

<table class="striped" border="1">

<tr><td>Row 1</td></tr>

<tr><td>Row 2</td></tr>

<tr><td>Row 3</td></tr>

<tr><td>Row 4</td></tr>

</table>

<!-- e) Table with All Borders Different Colors -->

<table class="colored-borders" border="1">

<tr><th>Header 1</th><th>Header 2</th></tr>

<tr><td>Data 1</td><td>Data 2</td></tr>

<tr><td>Data 3</td><td>Data 4</td></tr>

</table>

</body>

</html>

Explain types of CSS? Elaborate using external CSS example. (all types)
Types of CSS

CSS can be applied to HTML documents using three main methods:

1. Inline CSS

2. Internal CSS

3. External CSS

1. Inline CSS

Inline CSS is applied directly to an HTML element using the style attribute. It is suitable for quick styling of specific
elements but is not recommended for large-scale projects due to maintainability issues.
Example

<p style="color: red; font-size: 16px;">This is styled using inline CSS.</p>

2. Internal CSS

Internal CSS is defined within a <style> tag in the <head> section of an HTML document. It is used for styling a single
page and is more maintainable than inline CSS.

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<style>

p{

color: green;

font-size: 16px;

</style>

</head>

<body>

<p>This is styled using internal CSS.</p>

</body>

</html>

3. External CSS

External CSS uses a separate .css file linked to the HTML document. It is the most efficient way to apply styles across
multiple web pages, promoting reusability and consistency.

HTML Example:

<!DOCTYPE html>

<html lang="en">

<head>

<link rel="stylesheet" type="text/css" href="[Link]">

<title>External CSS Example</title>

</head>

<body>

<h1>Welcome to External CSS</h1>

<p>This paragraph is styled using external CSS.</p>

</body>

</html>
CSS File ([Link]):

/* External CSS */

body {

background-color: #f0f0f0;

font-family: Arial, sans-serif;

h1 {

color: navy;

text-align: center;

text-transform: uppercase;

p{

color: darkgreen;

font-size: 18px;

line-height: 1.6;

Write CSS for paragraph tag:


border 1. color-blue, font size-20, font name- arial, padding 50px
/* Styling for the paragraph tag */

p{

border: 1px solid blue; /* 1px border with blue color */

font-size: 20px; /* Font size set to 20px */

font-family: Arial, sans-serif; /* Font set to Arial with a fallback */

padding: 50px; /* Padding of 50px on all sides */

Explanation of the Properties

1. border: 1px solid blue;


Creates a solid border of 1px width and blue color around the paragraph.

2. font-size: 20px;
Sets the text size to 20 pixels.

3. font-family: Arial, sans-serif;


Specifies "Arial" as the primary font. If Arial is unavailable, a generic sans-serif font will be used.

4. padding: 50px;
Adds 50 pixels of space inside the border on all sides of the paragraph content.
Example HTML Implementation

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Paragraph CSS Example</title>

<style>

/* Paragraph Styling */

p{

border: 1px solid blue;

font-size: 20px;

font-family: Arial, sans-serif;

padding: 50px;

</style>

</head>

<body>

<p>This paragraph demonstrates the applied CSS properties.</p>

</body>

</html>

[Link] CSS code for creating following external style sheet.


Body background colour=red
Font size = 10,
colour = brown,
name = Trial italic
Set Margin 30 pixels, padding 30 pixels
Three types of hyperlinks with mentioned colour-visited - blue, active - red, current -
green.
Align H1 text incenter with right indent - 10px
CSS File ([Link])

/* Styling the body */

body {
background-color: red; /* Background color red */

font-size: 10px; /* Font size set to 10px */

color: brown; /* Text color brown */

font-family: "Trial Italic", sans-serif; /* Font name Trial Italic */

margin: 30px; /* Margin set to 30px */

padding: 30px; /* Padding set to 30px */

/* Styling hyperlinks */

a:visited {

color: blue; /* Color for visited links */

a:active {

color: red; /* Color for active links */

a:hover, a:focus {

color: green; /* Color for the current link (hover/focus state) */

/* Aligning H1 */

h1 {

text-align: center; /* Center the text */

text-indent: -10px; /* Indent text to the left by 10px */

Body Styling:

 background-color: red; sets the red background.

 font-size: 10px; and font-family: "Trial Italic", sans-serif; configure the text size and font.

 margin: 30px; and padding: 30px; add space around and inside the body element.

Hyperlinks:

 a:visited { color: blue; } styles visited links.

 a:active { color: red; } styles links in the active state (when clicked).

 a:hover, a:focus { color: green; } styles links when hovered or focused (interpreted as the "current" link).
H1 Alignment:

 text-align: center; centers the heading.

 text-indent: -10px; applies a negative right indent.

HTML Implementation

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>External CSS Example</title>

<link rel="stylesheet" type="text/css" href="[Link]">

</head>

<body>

<h1>Welcome to My Page</h1>

<p>This page demonstrates the applied external CSS stylesheet.</p>

<a href="#link1">Visit Link 1</a><br>

<a href="#link2">Visit Link 2</a><br>

<a href="#link3">Visit Link 3</a>

</body>

</html>

[Link] an external style sheet for ordered and unordered list.


CSS File ([Link])
/* General Styling for Both Ordered and Unordered Lists */

ul, ol {

margin: 20px; /* Adds space around the lists */

padding: 10px; /* Adds space inside the list container */

background-color: #f9f9f9; /* Light grey background */

border: 1px solid #ccc; /* Adds a light border around the list */

border-radius: 5px; /* Rounded corners for the list */

font-family: Arial, sans-serif; /* Font style for list items */

font-size: 16px; /* Font size */

}
/* Styling Unordered List (ul) */

ul {

list-style-type: square; /* List items marked with square bullets */

color: darkblue; /* Text color for unordered list */

ul li {

margin-bottom: 5px; /* Adds space between list items */

/* Styling Ordered List (ol) */

ol {

list-style-type: decimal; /* List items marked with numbers */

color: darkgreen; /* Text color for ordered list */

ol li {

margin-bottom: 5px; /* Adds space between list items */

/* Nested Lists */

ul ul, ol ol {

margin-left: 20px; /* Indent for nested lists */

list-style-type: circle; /* Change nested list style */

color: darkred; /* Text color for nested lists */

HTML Implementation

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>List Styling</title>

<link rel="stylesheet" type="text/css" href="[Link]">


</head>

<body>

<h1>Styled Lists</h1>

<!-- Unordered List -->

<h2>Unordered List</h2>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3

<ul>

<li>Nested Item 1</li>

<li>Nested Item 2</li>

</ul>

</li>

</ul>

<!-- Ordered List -->

<h2>Ordered List</h2>

<ol>

<li>Step 1</li>

<li>Step 2</li>

<li>Step 3

<ol>

<li>Sub-step 1</li>

<li>Sub-step 2</li>

</ol>

</li>

</ol>

</body>

</html>

Q.CSS3(NOTE)
CSS3 is the third version of Cascading Style Sheets (CSS), a stylesheet language used to describe the presentation of
HTML documents. CSS3 builds on previous versions by introducing new features, enabling more dynamic and visually
appealing web designs.
Key Features of CSS3

1. Modular Architecture:

o CSS3 is divided into modules, such as Selectors, Box Model, Backgrounds and Borders, Animations,
etc.

o This modular structure makes it easier to manage and update.

2. New Selectors:

o Advanced selectors like :nth-child(), :nth-of-type(), :not() allow precise targeting of elements.

Example:

p:nth-child(2) {

color: blue; /* Styles the second child <p> element */

3. Rounded Corners (border-radius):

 Simplifies creating rounded corners without images or complex code.

Example:

div {

border-radius: 10px;

[Link] Shadow and Text Shadow:

 Adds shadows to elements and text for better visual effects.

Example:

box-shadow: 5px 5px 15px grey;

text-shadow: 2px 2px 4px red;

5. Transitions and Animations:

 Enables smooth transitions and keyframe-based animations.

Example Transition:

div:hover {

transition: background-color 0.5s;

background-color: yellow;

Example Animation:

@keyframes example {

from {background-color: red;}

to {background-color: yellow;}

}
div {

animation: example 2s infinite;

Advantages of CSS3

1. Enhanced Styling:

o Allows for complex designs with minimal effort (rounded corners, gradients, animations).

2. Improved Performance:

o Reduces the need for images and JavaScript, speeding up page load times.

3. Responsive Design:

o Media queries and flexible layouts make websites adaptable to various devices and screen sizes.

4. Custom Fonts:

o Enables unique typography for branding and design consistency.

Applications of CSS3

1. Website Development:

o Used to create visually appealing, responsive, and interactive websites.

2. Web Animations:

o Helps in creating engaging animations for banners, sliders, and transitions.

3. User Interfaces:

o Enhances the usability and aesthetics of web applications and dashboards.

4. Mobile and Tablet Optimization:

o Provides seamless cross-device compatibility.

[Link] a CSS script for following :


• Body with text color Blue & background as cyan
• Paragraph with color Green & alignment justify
• Document margin top & left to 1 inch.
• Border with red color and dotted
• Image with 50% opacity & vertical space 10 pts.
/* Apply styles to the body */

body {

color: blue; /* Text color */

background-color: cyan; /* Background color */

margin-top: 1in; /* Margin from the top */


margin-left: 1in; /* Margin from the left */

/* Apply styles to paragraphs */

p{

color: green; /* Paragraph text color */

text-align: justify; /* Text alignment */

/* Apply a red dotted border to an element (general example) */

.border-example {

border: 1px dotted red; /* Border style */

/* Apply styles to images */

img {

opacity: 0.5; /* 50% opacity */

vertical-align: middle; /* Ensures proper alignment vertically */

margin: 10px 0; /* Adds vertical spacing of 10pts */

Explanation:
1. Body styles:

o color: blue; sets the text color to blue.

o background-color: cyan; sets the page's background to cyan.

o margin-top and margin-left set margins to 1 inch.

2. Paragraph styles:

o color: green; sets the text color to green.

o text-align: justify; ensures text is justified.

3. Border styling:

o .border-example defines a red dotted border for any element with this class.

4. Image styles:

o opacity: 0.5; makes the image 50% transparent.

o vertical-align: middle; is used for vertical alignment of images in text layouts.

o margin adds 10px of vertical spacing (top and bottom).


Q. Write a CSS script for following :
• Body with background image at center & no repeat
• Hyperlink without underline & visited link color yellow
• Paragraph with letter spacing 0.2 & line height double
• Active link color green and link color red
• Image with horizontal spacing 10pts. & height width 200 pts
/* Apply styles to the body */

body {

background-image: url('[Link]'); /* Replace '[Link]' with the path to your image */

background-position: center; /* Center the background image */

background-repeat: no-repeat; /* Prevent the background image from repeating */

/* Apply styles to hyperlinks */

a{

text-decoration: none; /* Remove underline from hyperlinks */

color: red; /* Color of the link */

a:visited {

color: yellow; /* Visited link color */

a:active {

color: green; /* Active link color */

/* Apply styles to paragraphs */

p{

letter-spacing: 0.2em; /* Add letter spacing */

line-height: 2; /* Set line height to double */

}
/* Apply styles to images */

img {

margin-left: 10px; /* Horizontal spacing of 10 points (adjust as needed) */

margin-right: 10px;

height: 200px; /* Set height */

width: 200px; /* Set width */

Explanation:

1. Body styles:

o background-image: url('[Link]'); specifies the background image.

o background-position: center; aligns the image to the center.

o background-repeat: no-repeat; ensures the image does not repeat.

2. Hyperlink styles:

o text-decoration: none; removes the underline from hyperlinks.

o color: red; sets the default hyperlink color.

o a:visited { color: yellow; } changes visited links to yellow.

o a:active { color: green; } changes the color of active links.

3. Paragraph styles:

o letter-spacing: 0.2em; adds spacing between letters.

o line-height: 2; sets the line height to double.

4. Image styles:

o margin-left and margin-right add horizontal spacing of 10 points.

o height and width ensure the image is 200 points in size.

Q. Explain Transformation & Transitions in CSS3 with example


Transformations in CSS3
CSS transformations allow elements to be translated, rotated, scaled, or skewed. Transformations modify the
appearance of elements without changing the document layout.

Types of Transformations

[Link]: Moves an element from its current position.

div {
transform: translate(50px, 100px);
}
Moves the element 50px to the right and 100px down.

[Link]: Resizes an element.


div {

transform: scale(1.5, 2);

Scales the element 1.5 times horizontally and 2 times vertically.

[Link]: Rotates an element around its origin.

div {

transform: rotate(45deg);

Rotates the element by 45 degrees.

Skew: Tilts an element along the X or Y axis.

div {

transform: skew(30deg, 20deg);

Skews the element 30 degrees on the X-axis and 20 degrees on the Y-axis.

Matrix: Combines all transformations in a single function.

div {

transform: matrix(1, 0, 0, 1, 50, 50);

Transitions in CSS3
CSS transitions allow you to change property values smoothly (over a given duration), instead of making abrupt
changes.

Key Properties of Transitions

1. transition-property: Specifies the property to apply the transition (e.g., color, background-color).

2. transition-duration: Duration of the transition (e.g., 2s for 2 seconds).

3. transition-timing-function: Specifies the speed curve (e.g., ease, linear).

4. transition-delay: Specifies the delay before the transition starts.

Example

div {

width: 100px;

height: 100px;

background-color: blue;

transition: background-color 2s ease, transform 1s linear;

}
div:hover {

background-color: red; /* Smooth color transition */

transform: rotate(45deg); /* Smooth rotation */

Explanation:

 On hover, the background-color changes to red over 2 seconds.

 The element rotates 45 degrees over 1 second.

Q. What is pseudo classes in CSS explain with suitable example.


A pseudo-class is a keyword added to a CSS selector that specifies a special state of the selected elements. They allow
you to style elements based on their state or position in the document tree, without requiring additional classes or
IDs.

Syntax

selector:pseudo-class {

property: value;

Commonly Used Pseudo-Classes

1. Dynamic States of Links

o :link: Targets unvisited links.

o :visited: Targets links that have been visited.

o :hover: Targets elements when the user hovers over them.

o :active: Targets elements when activated (clicked or tapped).

Example:

a:link {

color: blue; /* Unvisited links are blue */

a:visited {

color: purple; /* Visited links are purple */

a:hover {

color: red; /* Links turn red on hover */

a:active {

color: green; /* Links turn green when clicked */

}
Structural Pseudo-Classes

 :first-child: Targets the first child of its parent.

 :last-child: Targets the last child of its parent.

 :nth-child(n): Targets the nth child of its parent.

Example

p:first-child {

font-weight: bold; /* Makes the first paragraph bold */

li:nth-child(2) {

color: red; /* Styles the second list item */

Interactive Pseudo-Classes

 :focus: Targets elements when they are focused (e.g., form inputs).

 :enabled: Targets enabled form elements.

 :disabled: Targets disabled form elements.

Example

input:focus {

border-color: blue; /* Highlights input when focused */

input:disabled {

background-color: gray; /* Styles disabled inputs */

Other Pseudo-Classes

 :not(selector): Excludes elements matching the selector.

 :empty: Targets elements with no children.

Example:

div:not(.active) {

background-color: lightgray; /* Targets divs without the "active" class */

p:empty {

display: none; /* Hides empty paragraphs */

}
Q. What are the objectives of CSS architecture
Predictability

 Ensures that the CSS rules behave as expected across the project.

 Updates or additions to styles should not inadvertently affect unrelated parts of the site.

 Example:

.button {

color: white;

background-color: blue;

Updating the .button styles should not unexpectedly affect other components.

Reusability

 Encourages writing reusable CSS rules and components.

 Reduces redundancy by using modular, reusable patterns.

 Example

.card {

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

The .card class can be reused for multiple components across the project.

Maintainability

 Simplifies the process of updating, adding, or removing styles without breaking existing designs.

 Reduces the effort required to manage CSS, even in large projects.

 Example: Proper naming conventions and modular structure allow seamless updates

.header-title {

font-size: 24px;

font-weight: bold;

Scalability

 Makes it easy to scale CSS as the project grows, both in size and complexity.

 Supports collaboration among large teams by ensuring a consistent structure and approach.

 Example: Using methodologies like BEM (Block-Element-Modifier) for scalable naming:

.block__element--modifier {

color: red;
}

Separation of Concerns

 Keeps style definitions separate from HTML structure and JavaScript behavior.

 Promotes cleaner and more modular codebases.

 Example:

<div class="btn btn-primary">Click Me</div>

Styles for .btn and .btn-primary are handled in CSS, separate from the HTML.

Consistency

 Ensures a uniform look and feel across the entire project.

 Helps in adhering to design guidelines and branding requirements.

 Example

:root {

--primary-color: #3498db;

--secondary-color: #2ecc71;

body {

color: var(--primary-color);

Q. What are selectors in CSS? Explain with suitable example.


Selectors in CSS are patterns used to select and style HTML elements. They define the elements to which a set of CSS
rules will apply.

Types of Selectors

1. Universal Selector (*)

 Selects all elements on a page.

 Example

*{

margin: 0;

padding: 0;

Removes all margins and padding from all elements.

2. Element Selector (Tag Selector)

 Selects elements based on the HTML tag name.


 Example:

p{

color: blue;

Styles all <p> elements with blue text.

3. Class Selector (.)

 Selects elements based on the class attribute.

 Example

.highlight {

background-color: yellow;

4. ID Selector (#)

 Selects a single element based on its unique id.

 Example

#header {

font-size: 24px;

5. Group Selector

 Groups multiple selectors to apply the same styles.

 Example:

h1, h2, p {

color: green;

Sets all <h1>, <h2>, and <p> elements to green text.

6. Descendant Selector

 Selects elements inside another element.

 Example:

div p {

font-style: italic;

Styles all <p> elements inside a <div>

<div>

<p>This paragraph is italic.</p>

</div>
7. Child Selector (>)

 Selects direct children of an element.

 Example

ul > li {

list-style-type: square;

Styles only the direct <li> elements inside a <ul>.

8. Adjacent Sibling Selector (+)

 Selects the next sibling element.

 Example

h1 + p {

color: red;

Styles the first <p> immediately following an <h1>.

9. General Sibling Selector (~)

 Selects all siblings of an element.

 Example:

h1 ~ p {

color: blue;

Styles all <p> elements that are siblings of an <h1>.

[Link] Selector

 Selects elements based on their attributes.

 Example:

input[type="text"] {

border: 1px solid black;

Styles all <input> elements of type text.

Q. What is CSS framework? What are the different sorts of css framework?
A CSS framework is a pre-prepared library that simplifies and speeds up web development by providing pre-defined
CSS styles, classes, and layouts. These frameworks offer consistency, responsiveness, and scalability, allowing
developers to focus on the functionality of the website rather than starting from scratch for styling .
Types of CSS Frameworks
1. Responsive Frameworks

 Focused on building mobile-friendly and flexible layouts.

 Provide a grid system to adapt to different screen sizes.

 Examples:

o Bootstrap: Most popular framework with responsive grids and components.

o Foundation: Known for flexibility and extensive customization.

2. UI Component Frameworks

 Offer a library of pre-designed UI components like buttons, modals, and forms.

 Help in creating visually appealing interfaces.

 Examples:

o Materialize: Implements Google's Material Design principles.

o Bulma: Lightweight framework focused on simplicity and modularity.

3. Grid-Only Frameworks

 Focus exclusively on layout design with grid systems.

 Provide flexibility for custom styling while managing layout.

 Examples:

o Simple Grid: Minimal grid system for quick layouts.

o Susy: A flexible grid framework for custom grids.

4. Utility-First Frameworks

 Provide low-level utility classes to build custom designs.

 Minimalist approach where developers write styles directly in HTML.

 Examples:

o Tailwind CSS: Highly customizable utility-first framework.

o Tachyons: Focuses on performance and modularity.

5. Specialized Frameworks

 Designed for specific use cases or industries.

 Include frameworks for animation, typography, or admin dashboards.

 Examples:

o [Link]: Pre-defined CSS animations for transitions.

o Metro 4: Framework inspired by Metro UI design.


Chapter [Link] web form Design
Explain Typescript with suitable example.
Design a form and write code to :
a) Populate and display student name in a drop down list.
b) Select a student name and display it’s details in under lying text boxes.
c) Add a record.
d) Delete selected record.
e) Edit selected record.
Name of table : Student Master (studentid, name, address, date - of - birth, phone No)
[Link] any five login controls in detail
Q. What are the Typesoript components?
Chapter [Link] Framework
[Link] & cookie(note)
[Link] is cookie in PHP? Write a program to create a cookie and delete the Created
cookie after 1 hr
[Link] a PHP code to create and print the values of multidimensional array.
[Link] a PHP script to display employees belongs to computer department and salary is
in between 50000 to 90000 and store found records into the another table. (Assume
suitable table structure
[Link] Global Variable in PHP
[Link] PHP Program to store students details.
[Link] in PHP
[Link] is an associative array in PHP? Explain with example.
[Link] a PHP script to design a form for exam registration. Insert 5 records in database
and display all the inserted records on new page. (Assume suitable table structure
[Link] static, local and global variables in PHP with suitable example.
[Link] all array sorting methods in PHP with suitable example
[Link] PHP session with suitable program.
[Link] PHP program to fill online form for patient registration for a Hospital.
[Link] looping statements in PHP with example
[Link] in PHP
[Link] a PHP program to perform CRVD operations on patient details.
Q. Write a PHP program to maintain the shopping CART of each customer
Q. Explain cookies in PHP with example
[Link] a PHP program to maintain the shopping CART of each customer
Q. Explain error handling in PHP with example
Q. Write a pHp script to demonstrate multidiamensional arrays
Q. What is cookie & session in PHP
Q. What is Define function in PHP
Q. Write a PHP script to design a form to reschedule the journey dates of flights and
display the updated information on new web page.
[Link] a PHP script to demonstrate variables in PHP. Use Globals, local & global keyword
to access variables
Q. Differentiate between include & require
Q. Write a PHP script to demonstrate any 4 operaters
Q. What is Vor- dump( ) function in PHP?
Q. Write a PHP script to disply employees belongs to IT department and salary is in
between 30, 000 – 80, 000 and store found records into another table. [6] (Assume
suitable table structure
Q.
Chapter 5 database connectivity and deployment
[Link] PHP program to perform CRUD operations on Library issue / return books detail.
(Assume suitable Fields)
Q. Write a PHP program to perform CRVD operations on patient details
Q. Write a PHP script to create a database using MYSQL.
Q. Write a PHP script & insert at least 5 records into it & update specific record in
database. Assume student table with required fields in database.
Miscalineous
Write jQuery selectors with suitable example (any 10 selectors)
History & Navigation objects (note)
jQuery effects(note)
Write a program to create a server in NodeJS and display server re sponses on a web
page.
What is NodeJS? Explain its working and features.
Explain any five modules of NodeJS.
Write a program to show current date and time using user defined mod ule in NodeJS
Explain date and time filter in Angular with suitable example.
What is Routing in Angular? Explain with suitable example.
Explain dependency Injection in Angular with suitable example
Events in NodeJS
SPA in Angular
Write a Javascript program to validate airplane Reservation Form with field
a) Name of Person
b) Age
c) Email ID
d) Data of Journey
e) From & To city Name
Explain JQuery Filters with examples
Write a Javascript Program to covert celcius to farewhite and vice a versa.
What is [Link]? Explain its working and features
Write a program in NodeJS using event handling to perform all basic arithmetic
operations.
What are the different types of modules in NodeJS?
Write a program in NodeJS to perform file CRUD operations by using url module
What are the different services in Angular?
Create an angular program which will demonstrate the usage of ngfor directive.
Explain Angular project directory structure in detail.
What is data binding in Angular? Explain with example
Draw and explain ADO. net architecture.
Explain server - side statemanagement techniques in detail.
Write a program to implement hit counter using globol . asax file.
Write a program using file upload control to upload a file. Aslo check that file should not
be greater than 2 MB
Explain the following controls (Any three)
a) Link button control
b) Tree view control
c) Drop down control
d) Adrotator control
Write short note on the following (Any three)
a) Validation control (Any two)
b) AJAX server side control
c) Login control (Any three)
d) Namespaces
Q. Explain event Handling in Java Script with example
Q. Explain History and Navigator objects in Java script with example.
[Link] Jquery setler method with example.
[Link] Widgets
Q. Write a Javascript program to validate fields of DTE registration form. [10]
• Name should contain only characters (alphabets)
• Mobile phone contain only digits (10)
• Email should contain ‘@’, ‘.’ after ‘@’ symbol and 2/3 alphabets after ‘.’ at last.
• Gender should contain only 2 values male/female
• Password & confirm password should match
Q. What is chaining in JQuery? How does chaining used in web pages.
Q. Write Jquery Getter & Setter methods with example
Q. Create a login form, both username & password fields are mandatory, after entering
the values transfer user control to next web page showing message as “You have login
successfully”. (Use ng-href & ng-required).
[Link] a program using NPM which will convert entered string into lower case & upper
case.

You might also like