Scribd
Upload
9 views17 pages

UNIT I

The document provides a comprehensive overview of web development topics including HTML, CSS, JavaScript, JSP, PHP, and MySQL. It covers fundamental concepts, syntax, and practical examples for each technology, including form validation, data handling, and server management. Additionally, it includes lab-based questions and solutions for practical application of the concepts discussed.

Uploaded by

mehtadev557
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
9 views17 pages

UNIT I

The document provides a comprehensive overview of web development topics including HTML, CSS, JavaScript, JSP, PHP, and MySQL. It covers fundamental concepts, syntax, and practical examples for each technology, including form validation, data handling, and server management. Additionally, it includes lab-based questions and solutions for practical application of the concepts discussed.

Uploaded by

mehtadev557
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
You are on page 1/ 17

UNIT I: HTML, CSS, XML, DHTML, XHTML

HTML

1. What is HTML?

o HTML (HyperText Markup Language) is the standard language for creating


web pages and web applications.

2. What is the basic structure of an HTML document?

html

CopyEdit

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a heading</h1>

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

</body>

</html>

3. What are HTML tags and attributes?

o Tags define elements (<p>, <h1>, <a>), and attributes provide additional
information (href, src, alt).

4. Difference between <div> and <span>?

o <div> is block-level; <span> is inline.

5. What is an iframe?

o Used to embed another HTML page within the current page:

html

CopyEdit

<iframe src="page.html"></iframe>
6. What is DHTML?

o Dynamic HTML: Combination of HTML, CSS, JavaScript to create dynamic and


interactive websites.

7. Explain forms in HTML.

o Forms collect user input with elements like <input>, <textarea>, <select>,
<button>.

8. How are tables created in HTML?

o Using <table>, <tr>, <td>, <th>.

CSS

1. Why is CSS used?

o To separate content (HTML) from presentation (style).

2. Different types of CSS?

o Inline: <p style="color:red;">

o Internal: <style> tag in <head>

o External: Linked .css file using <link>

3. Explain the Box Model.

o Content → Padding → Border → Margin.

4. What are pseudo-classes in CSS?

o Used to define the special state of an element, e.g., :hover, :first-child.

5. What is positioning in CSS?

o Types: static, relative, absolute, fixed, sticky.

XML and XHTML

1. What is XML?

o Extensible Markup Language used for storing and transporting data.

2. What are DTD and XML Schema?

o DTD (Document Type Definition): Defines legal building blocks of XML.

o XML Schema: More powerful and modern version than DTD.

3. Difference between XML and HTML?


o HTML is for displaying data; XML is for transporting data.

o XML is strict with closing tags and case sensitivity.

4. What is the DOM?

o Document Object Model: API to access and modify HTML/XML documents.

5. Difference between DOM and SAX parsers?

o DOM loads entire XML into memory; SAX is event-driven, faster for large files.

6. What is XHTML?

o Reformulation of HTML as XML. It is stricter (e.g., all tags must be closed).

UNIT II: JavaScript & JSP

JavaScript

1. Is JavaScript same as Java?

o No, JavaScript is a scripting language; Java is an object-oriented programming


language.

2. What are data types in JS?

o Number, String, Boolean, Null, Undefined, Object, Symbol (ES6).

3. What are functions and how are they defined?

js

CopyEdit

function greet() {

alert("Hello!");

4. Difference between == and ===?

o == compares value; === compares value and type.

5. What is DOM in JavaScript?

o Represents the structure of a document as nodes and objects.

6. How can you validate a form using JavaScript?

o By checking inputs like email format, empty fields, length, etc.


7. What is an event in JavaScript?

o Actions like onclick, onload, onchange.

8. What are objects in JS?

js

CopyEdit

let person = {

name: "John",

age: 30

};

9. What is constructor in JS?

js

CopyEdit

function Person(name, age) {

this.name = name;

this.age = age;

JSP (JavaServer Pages)

1. What is JSP?

o JSP allows embedding Java code in HTML using special JSP tags.

2. Anatomy of a JSP Page:

o Directives (<%@ %>), Declarations (<%! %>), Scriptlets (<% %>), Expressions
(<%= %>).

3. What are implicit objects in JSP?

o Examples: request, response, out, session, application, etc.

4. What is session tracking in JSP?

o Methods: Cookies, URL rewriting, Hidden form fields, HttpSession.

5. How to connect JSP to a database?

o Use JDBC API inside scriptlets or Beans.


UNIT III: PHP (Basics)

1. What is PHP?

o PHP (Hypertext Preprocessor) is a server-side scripting language.

2. Basic syntax of PHP?

php

CopyEdit

<?php

echo "Hello World!";

?>

3. PHP decision-making structures?

o if, else, switch.

4. PHP loop structures?

o for, while, do-while, foreach.

5. PHP Arrays types?

o Indexed, Associative, Multidimensional.

6. How are forms processed in PHP?

o Using $_POST or $_GET.

7. What are sessions and cookies in PHP?

o Cookie: stored on client.

o Session: stored on server.

8. How to handle files in PHP?

o Functions: fopen(), fread(), fwrite(), fclose().

UNIT IV: PHP + MySQL

1. How to connect PHP to MySQL?

php

CopyEdit
$conn = mysqli_connect("localhost", "root", "", "db_name");

2. Basic SQL Commands:

o CREATE, SELECT, INSERT, UPDATE, DELETE, ALTER, DROP.

3. What is PHPMyAdmin?

o GUI tool to manage MySQL databases.

4. How to insert and fetch data in PHP?

php

CopyEdit

$sql = "INSERT INTO users (name, email) VALUES ('John', 'john@example.com')";

mysqli_query($conn, $sql);

$result = mysqli_query($conn, "SELECT * FROM users");

5. What is state management in web applications?

o Keeping track of user data between requests using cookies, sessions, query
strings.

6. How is serialization used?

o Converts object into a string for storage or transfer.

LAB-BASED Viva Questions (Practical)

1. How do you create a frame layout in HTML?

2. How to apply all 3 types of CSS in a project?

3. Write JavaScript to detect even/odd numbers.

4. Form validation: Check email format and phone number using JavaScript.

5. Write an XML file for student data and define its structure.

6. Explain PHP script to display data from a .txt file in a table.

7. How does the login system using PHP work with password verification?

8. Steps to insert and display user data using PHP + MySQL.

9. Explain working of XAMPP and how to verify server is running.


10. How does JavaScript handle button click events?

11. Write code to design a calculator using JavaScript.

12. How do you design an online quiz in JavaScript?

Would you like me to generate these Q&As as a print-ready PDF document or a flashcard
deck for revision?

4o

You said:

How do you create a frame layout in HTML? How to apply all 3 types of CSS in a project?
Write JavaScript to detect even/odd numbers. Form validation: Check email format and
phone number using JavaScript. Write an XML file for student data and define its structure.
Explain PHP script to display data from a .txt file in a table. How does the login system using
PHP work with password verification? Steps to insert and display user data using PHP +
MySQL. Explain working of XAMPP and how to verify server is running. How does JavaScript
handle button click events? Write code to design a calculator using JavaScript. How do you
design an online quiz in JavaScript? solutions

ChatGPT said:

Here are detailed solutions to each of your lab viva questions:

1. How do you create a frame layout in HTML?

Using <frameset> (Deprecated but still asked for academic purposes):

html

CopyEdit

<!DOCTYPE html>

<html>

<frameset rows="50%,50%">

<frameset cols="50%,50%">

<frame src="top-left.html" style="background:red;">

<frame src="top-right.html" style="background:green;">

</frameset>
<frame src="bottom.html" style="background:blue;">

</frameset>

</html>

Modern HTML uses <iframe> instead of <frameset>.

2. How to apply all 3 types of CSS in a project?

Inline CSS:

html

CopyEdit

<h1 style="color: red;">Inline CSS Example</h1>

Internal CSS:

html

CopyEdit

<style>

h2 { color: blue; }

</style>

External CSS:

html

CopyEdit

<link rel="stylesheet" href="styles.css">

Example styles.css:

css

CopyEdit

body {

background-color: #f0f0f0;

3. Write JavaScript to detect even/odd numbers.


html

CopyEdit

<!DOCTYPE html>

<html>

<head>

<title>Even or Odd</title>

</head>

<body>

<input type="number" id="num" placeholder="Enter number">

<button onclick="check()">Check</button>

<p id="result"></p>

<script>

function check() {

const n = parseInt(document.getElementById("num").value);

const result = document.getElementById("result");

if (isNaN(n)) {

result.innerText = "Enter a valid number.";

} else if (n % 2 === 0) {

result.innerText = `${n} is Even`;

} else {

result.innerText = `${n} is Odd`;

</script>

</body>

</html>
4. Form validation: Check email format and phone number using JavaScript.

html

CopyEdit

<!DOCTYPE html>

<html>

<body>

<form onsubmit="return validateForm()">

Email: <input type="text" id="email"><br>

Phone: <input type="text" id="phone"><br>

<input type="submit" value="Submit">

</form>

<script>

function validateForm() {

let email = document.getElementById("email").value;

let phone = document.getElementById("phone").value;

const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const phonePattern = /^[0-9]{10}$/;

if (!emailPattern.test(email)) {

alert("Invalid email format");

return false;

if (!phonePattern.test(phone)) {

alert("Invalid phone number (must be 10 digits)");


return false;

return true;

</script>

</body>

</html>

5. Write an XML file for student data and define its structure.

xml

CopyEdit

<?xml version="1.0" encoding="UTF-8"?>

<students>

<student>

<enrollment>MAIT202401</enrollment>

<name>Rohit Sharma</name>

<mobile>9876543210</mobile>

<email>rohit@example.com</email>

</student>

<student>

<enrollment>MAIT202402</enrollment>

<name>Neha Verma</name>

<mobile>9123456780</mobile>

<email>neha@example.com</email>

</student>

</students>
6. Explain PHP script to display data from a .txt file in a table.

File: users.txt

ruby

CopyEdit

Rohit:12345:rohit@example.com

Neha:abcde:neha@example.com

PHP Script:

php

CopyEdit

<?php

$filename = "users.txt";

echo "<table border='1'><tr><th>Name</th><th>Password</th><th>Email</th></tr>";

if (file_exists($filename)) {

$file = fopen($filename, "r");

while (($line = fgets($file)) !== false) {

$data = explode(":", $line);

echo "<tr><td>$data[0]</td><td>$data[1]</td><td>$data[2]</td></tr>";

fclose($file);

} else {

echo "<tr><td colspan='3'>File not found.</td></tr>";

echo "</table>";

?>

7. How does the login system using PHP work with password verification?

Steps:
1. Create an HTML form to collect username and password.

2. Store username and hashed password in a text file.

3. Use password_verify() in PHP to validate.

users.txt (hashed password using password_hash())

perl

CopyEdit

admin:$2y$10$abcDEFHashed...

PHP Script:

php

CopyEdit

<?php

$users = file("users.txt", FILE_IGNORE_NEW_LINES);

$inputUser = $_POST['username'];

$inputPass = $_POST['password'];

foreach ($users as $user) {

list($storedUser, $storedHash) = explode(":", $user);

if ($inputUser === $storedUser && password_verify($inputPass, $storedHash)) {

echo "Login successful!";

exit;

echo "Invalid credentials.";

?>

8. Steps to insert and display user data using PHP + MySQL

a) Insert Data (register.php)

php
CopyEdit

<?php

$conn = new mysqli("localhost", "root", "", "userDB");

$name = $_POST['name'];

$address = $_POST['address'];

$email = $_POST['email'];

$mobile = $_POST['mobile'];

$sql = "INSERT INTO users (name, address, email, mobile) VALUES (?, ?, ?, ?)";

$stmt = $conn->prepare($sql);

$stmt->bind_param("ssss", $name, $address, $email, $mobile);

$stmt->execute();

echo "Registered! <a href='display.php'>View</a>";

?>

b) Display Data (display.php)

php

CopyEdit

<?php

$conn = new mysqli("localhost", "root", "", "userDB");

$result = $conn->query("SELECT * FROM users");

echo "<table
border='1'><tr><th>ID</th><th>Name</th><th>Address</th><th>Email</th><th>Mobile</t
h></tr>";

while ($row = $result->fetch_assoc()) {

echo
"<tr><td>{$row['id']}</td><td>{$row['name']}</td><td>{$row['address']}</td><td>{$row['e
mail']}</td><td>{$row['mobile']}</td></tr>";

}
echo "</table>";

?>

9. Explain working of XAMPP and how to verify server is running

1. XAMPP = Cross-platform Apache, MySQL, PHP, Perl.

2. Steps:

o Install XAMPP.

o Launch XAMPP Control Panel.

o Start Apache and MySQL.

o Go to http://localhost in browser.

3. If XAMPP dashboard appears, it's working.

10. How does JavaScript handle button click events?

html

CopyEdit

<button onclick="showAlert()">Click me</button>

<script>

function showAlert() {

alert("Button clicked!");

</script>

• Events can also be handled using addEventListener():

js

CopyEdit

document.getElementById("btn").addEventListener("click", showAlert);

11. Write code to design a calculator using JavaScript

html
CopyEdit

<input id="num1">

<select id="op">

<option value="+">+</option>

<option value="-">-</option>

</select>

<input id="num2">

<button onclick="calc()">=</button>

<p id="res"></p>

<script>

function calc() {

let n1 = parseFloat(document.getElementById('num1').value);

let n2 = parseFloat(document.getElementById('num2').value);

let op = document.getElementById('op').value;

let res;

switch(op) {

case '+': res = n1 + n2; break;

case '-': res = n1 - n2; break;

document.getElementById("res").innerText = "Result: " + res;

</script>

12. How do you design an online quiz in JavaScript?

html
CopyEdit

<form id="quizForm">

Q1: Capital of India?<br>

<input type="radio" name="q1" value="Delhi">Delhi<br>

<input type="radio" name="q1" value="Mumbai">Mumbai<br>

<br><button type="button" onclick="scoreQuiz()">Submit</button>

</form>

<p id="result"></p>

<script>

function scoreQuiz() {

let score = 0;

if (document.querySelector('input[name="q1"]:checked')?.value === "Delhi") {

score++;

document.getElementById("result").innerText = "You scored: " + score;

</script>

You might also like