Web Application and Development - Important Topics with Answers
1. HTML & HTML5
- Structure of an HTML document:
The basic structure includes <!DOCTYPE>, <html>, <head>, and <body> tags.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
- Important Tags:
<p>: Defines a paragraph.
<h1> to <h6>: Defines headings, with <h1> being the largest and <h6> the smallest.
<a>: Defines a hyperlink.
<form>: Used to create an HTML form for user input.
<iframe>: Embeds another document within the current HTML page.
<map>, <ol>, <select>, <legend>: Used for maps, ordered lists, selection lists, and fieldset legends
respectively.
- Meta Tags:
Used to provide metadata about the HTML document, such as keywords for search engines.
Example:
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
- Input Elements in HTML:
Includes <input> (for text fields, checkboxes), <button>, <textarea>.
2. CSS (Cascading Style Sheets)
- Types of CSS:
1. Inline CSS: Written directly inside an HTML element using the style attribute.
Example: <p style="color:red;">This is a red paragraph.</p>
2. Embedded CSS: Defined in the <style> tag within the <head> section.
Example: <style> p {color:blue;} </style>
3. External CSS: Written in an external file and linked to the HTML document.
Example: <link rel="stylesheet" href="styles.css">
- CSS Box Model:
Describes the rectangular boxes that are generated for elements in the document tree.
Consists of: Content, Padding, Border, Margin.
Example:
div {
width: 300px;
padding: 10px;
border: 5px solid gray;
margin: 20px;
}
- Selectors in CSS:
1. Universal Selector (*): Selects all elements.
2. Class Selector (.classname): Selects elements with a specific class.
3. ID Selector (#id): Selects an element with a specific ID.
- Grid System in Bootstrap:
A 12-column grid layout that helps create responsive web designs.
Example:
<div class="container">
<div class="row">
<div class="col-sm-4">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-4">Column 3</div>
</div>
</div>
3. JavaScript
- JavaScript Functions:
1. alert(): Displays an alert box with a message.
Example: alert("This is an alert!");
2. prompt(): Displays a dialog box that prompts the user for input.
Example: var name = prompt("Enter your name:");
3. confirm(): Displays a dialog box with OK and Cancel buttons.
Example: confirm("Do you want to proceed?");
- Scope and Variable Assignment in JavaScript:
JavaScript has two types of scope: global and local. A variable declared outside a function has
global scope, while one declared inside a function has local scope.
- DOM (Document Object Model) Manipulation:
The DOM allows JavaScript to manipulate HTML elements.
Example:
document.getElementById("myElement").innerHTML = "New content";
4. PHP
- Differences between GET and POST methods:
GET: Sends form data in the URL; limited by URL length; less secure.
POST: Sends form data in the request body; no size limit; more secure.
Example: <form method="POST"> for POST submission.
- PHP Sessions and Cookies:
Sessions: Store data across multiple pages.
Example: session_start(); $_SESSION['username'] = 'JohnDoe';
Cookies: Store data on the user's browser.
Example: setcookie("username", "JohnDoe", time() + 3600);
- Database Connectivity using MySQL:
- mysql_connect(): Connects to a MySQL server.
- mysql_select_db(): Selects the database to be used.
- mysql_close(): Closes the connection.
Example:
$conn = mysql_connect("localhost", "username", "password");
mysql_select_db("database_name", $conn);
mysql_close($conn);
5. jQuery
- jQuery Selectors:
1. Universal Selector (*): Selects all elements.
2. Class Selector (.classname): Selects elements with a specific class.
3. ID Selector (#id): Selects an element with a specific ID.
4. Attribute Selector: Selects elements with a specific attribute.
5. Child Selector: Selects direct children of an element.
- jQuery Effects:
- show(): Displays hidden elements.
- hide(): Hides visible elements.
- fadeIn(): Fades in elements.
- fadeOut(): Fades out elements.
- slideUp(): Slides the element up.
- slideDown(): Slides the element down.
6. Web Design
- Web Design Issues:
Common issues include user interface design, cross-browser compatibility, performance, and
security.
- Effective Navigation:
Features such as breadcrumbs, menus, and internal links help users navigate easily.
- Responsive Design:
Uses CSS frameworks like Bootstrap to ensure websites work on devices of all sizes.
