Part A

Part A
1)
In JavaScript, functions are essentially reusable blocks of code that perform specific tasks. They are a fundamental
building block of the language and are essential for creating well-organized and maintainable programs.
Example:
function functionName(parameter1, parameter2, ...) {

// Code to be executed
}
2)
The basic tags in html are:
• <!DOCTYPE html>: This declaration at the very beginning specifies the document type as HTML.
• <html>: The root element of the HTML document. Everything related to the webpage content goes inside
this tag.
• <head>: This section contains meta information about the document, like the title and character encoding.
• <title>: Defines the title of the webpage, displayed on the browser tab or window.
• <body>: This section contains the visible content of the webpage that users will see.
3)
In HTML, tables are used to present data in a structured format with rows and columns. They are useful for
organizing information like product catalogs, schedules, financial data, and more.
An HTML table is created using the following tags:
• <table>: This tag defines the beginning and end of the table.
• <tr>: This tag defines a table row.
• <th>: This tag defines a table header cell, typically used for row labels and is bold by default.
• <td>: This tag defines a regular table data cell.
4)
In web development, Angular is a popular open-source JavaScript framework maintained by Google. Angular is used
for building dynamic, single-page web applications (SPAs). It provides a structured framework for front-end
development, offering tools and libraries for various tasks such as data binding, routing, form handling, and more.
5)
Some alternative for handling asynchronous requests in web development are:
1. Fetch API (Built-in): Modern way to make web requests, simpler and promise-based compared to AJAX.
2. Axios (Library): Popular tool on top of Fetch, offers clean syntax, JSON parsing, and advanced features.
3. WebSockets (Real-time): Enables constant two-way communication between browser and server, ideal for
live updates.
4. SSE (Server-initiated): Server pushes updates to clients without client requests, good for one-way data flow.
5. GraphQL (Efficient): Query language for APIs, specifies exact data needed, reduces data transfer and
improves performance.
6)
HTML offers a foundation for web pages with these three features:
1. Structure & Meaning: Easy-to-learn tags define content and meaning (headings, paragraphs, etc.) for clear
organization and accessibility.
2. Rich Content: Integrates multimedia like images, audio, and video to enhance user experience.
3. Interactivity Base: Works with CSS for styling and JavaScript for dynamic elements, paving the way for user
interaction.
7)
Image mapping is a technique used in web development to create clickable regions on an image, allowing different
areas of the image to act as separate links. These clickable areas link to different destinations or perform actions
when a user clicks on them. There are two ways to make them:
• Server-side (more complex): when clicked data is sent to the server to determine the action.
• Client-side (faster, easier): uses JavaScript to define hotspots and actions directly in the browser
8)
DHTML (Dynamic HyperText Markup Language) isn't actually a single language, but rather it refers to a collection of
technologies used together to create dynamic and interactive web pages.
These technologies typically include:
• HTML: Provides the basic structure and content of the webpage.
• CSS: Controls the visual presentation of the webpage.
• JavaScript: Adds interactivity and dynamic behavior.
• DOM (Document Object Model): Allows scripting languages like JavaScript to access and manipulate the
webpage elements.
9)
• CSS used to define the look and feel of your webpages, including fonts, colors, layouts, backgrounds, and
more.
• By separating styling information (CSS) from content (HTML), your code becomes cleaner, more
maintainable, and easier to update.
• Well-written CSS can improve website loading speed by reducing the amount of HTML code needed to define
styles.
10)
Essential XML syntax rules are:
o Every XML document must have a single root element that encloses all other elements.
o Every opening tag must have a corresponding closing tag with the same name.
o Elements can contain other elements, creating a hierarchical structure but it must be properly
nested, like opening and closing brackets.
Example:
<person>
<name>John Doe</name>
<age>30</age>
<gender>Male</gender>
</person>
11)
There are three main ways to add multimedia elements like images, videos, and audio to webpages using HTML:
o Use the <img> tag for image with the src attribute specifying the image source (URL or file path).
o Use the <video> tag with the src attribute specifying the video source and optional controls attribute
for playback controls.
o Use the <audio> tag similar to the <video> tag, with the src attribute for the audio source and
optional controls attribute.
The <source> tag specifies the video source and its MIME type. The text between the opening and closing video tags
displays if the browser doesn't support the video format.
12)
Events are signals that something has happened in the web page. These can be user actions like clicks, key presses,
mouse movements, or form submissions.
Event handlers are pieces of code (typically JavaScript) that define how the web page should react to a specific event.
They are attached to HTML elements using attributes or JavaScript methods.
Example:
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button Clicked!");
});
</script>
Part B
13)
CSS Features:
CSS (Cascading Style Sheets) provides a way to separate the presentation of a web page from its content (written in
HTML). Here are some key features of CSS:
• Style Control: CSS allows you to define styles for various HTML elements, including fonts, colors,
backgrounds, borders, margins, padding, and positioning.
• Pseudo-classes & Elements: CSS offers pseudo-classes and pseudo-elements to apply styles based on specific
conditions (e.g., :hover for hover effects, ::before to insert content before an element).
• Media Queries: Media queries allow you to define styles for different screen sizes, devices, and orientations,
enabling responsive web design that adapts to various user experiences.
• Animations & Transitions: CSS provides tools for creating animations and transitions to add dynamic visual
effects to web pages, enhancing user engagement.
DHTML (Dynamic HTML) Features:
DHTML isn't a single technology, but rather a combination of these existing ones:
• HTML: Provides the basic structure and content of the web page.
• CSS: Controls the visual presentation of the webpage.
• JavaScript: Adds interactivity and dynamic behavior.
• DOM (Document Object Model): Allows scripting languages like JavaScript to access and manipulate the
webpage elements.
By combining these elements, DHTML offers features like:
• Dynamic Updates: DHTML allows you to modify the content and styling of a web page without reloading the
entire page. This creates a more seamless and responsive user experience.
• Interactive Elements: JavaScript within DHTML enables interactive elements like forms, buttons, menus, and
image maps, making web pages more engaging and user-friendly.
• Data Validation: JavaScript can be used to validate form data before submitting it to a server, improving the
user experience and reducing errors.
• Client-side Functionality: DHTML scripts can perform certain tasks on the user's machine (client-side)
without needing to communicate with the server every time, potentially improving performance.
14)
Tools:
1. Wix & Squarespace: (Website Builders)
o Easy-to-use drag-and-drop interface for beginners with no coding required.
o Great for creating basic websites with pre-built templates and functionalities.
o Limited customization compared to code-based tools. May lock you into their platform.
2. HubSpot: (CMS with Website Builder)
o All-in-one marketing platform with website building tools and content management system (CMS).
o Integrates marketing tools like email and CRM with website creation. Good for businesses with
marketing needs.
o Might have a steeper learning curve compared to drag-and-drop builders.
3. Webflow: (Visual Website Builder)
o Visually-oriented website building with powerful design features and animation capabilities.
o Offers more design flexibility than drag-and-drop builders without needing to code directly.
o Requires some design understanding for optimal use. Learning curve steeper than Wix/Squarespace.
4. Nova: (Headless CMS with Frontend Framework)
o Flexible headless CMS for content management, paired with a frontend framework like React or
Vue.js for building the website.
o Powerful content management with decoupled frontend, offering maximum flexibility for
developers.
o Requires coding knowledge for building the frontend using a separate framework.
5. Figma: (Design Tool)
o Collaborative design tool for prototyping and creating website mockups and user interfaces.
o Excellent for designing website layouts and user flows before development. Great for team
collaboration.
o Not a website builder itself. Needs to be used in conjunction with other development tools.
6. Adobe Dreamweaver: (Code Editor)
o Professional code editor specifically designed for web development. Offers code completion and
visual editing tools.
o Powerful tool for experienced developers with full control over code and website functionality.
o Steeper learning curve. Requires coding skills in HTML, CSS, and potentially JavaScript.
7. WordPress (Content Management System)
o It is an open-source tool with Versatile CMS used for building various websites, including blogs,
portfolios, and basic online stores with plugins.
o Highly customizable with thousands of themes and plugins. User-friendly interface with good
community support.
o Setting up an e-commerce store might require additional plugins like WooCommerce, adding some
complexity.
15)
JavaScript (JS) is a versatile programming language that brings web pages to life. It's like adding a sprinkle of magic,
making them interactive and dynamic. Here's a breakdown of JavaScript:
• Unlike languages like Java that require compilation, JavaScript code is interpreted directly by the browser,
making development faster.
• Primarily executes on the user's machine (client-side) within the web browser, reducing server load.
• Easier to learn and read compared to lower-level languages, making it accessible to a broader range of
programmers.
Components:
• Variables & Data Types: Storing and manipulating data within your code.
• Control Flow: Making decisions and repeating code blocks based on conditions.
• DOM Manipulation: Accessing and modifying the elements of a web page.
• Event Handling: Responding to user actions and browser events.
• Object-Oriented Programming (OOP): Organizing code using objects and classes for better maintainability.
Advantages:
• Interactivity: Enables user interaction with web pages through elements like buttons, forms, and animations.
Creates a more engaging user experience.
• Dynamic Content: Allows for updates to web page content without reloading the entire page, improving
responsiveness and performance.
• Cross-Platform Compatibility: Runs on all major web browsers, making it a reliable choice for web
development.
• Large Community & Ecosystem: Benefits from a vast developer community and extensive libraries and
frameworks, offering support and solutions.
Example:
<button onclick="showAlert()">Click Me!</button>
<script>
function showAlert() {
alert("You clicked the button!");
</script>
16)
In HTML, lists are used to organize and present information in a structured manner. There are three main types of
lists in HTML:
1. unordered lists (<ul>)

2. ordered lists (<ol>)
3. and definition lists (<dl>)
1. Unordered List (<ul>):
An unordered list is a list of items where the order of the items does not matter. Each item is typically marked with a
bullet point or some other marker. You create an unordered list using the <ul> tag, and each list item is defined using
the <li> (list item) tag.
Example:
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
2. Ordered List (<ol>):
An ordered list is a list of items where the order of the items does matter. Each item is typically numbered. You create
an ordered list using the <ol> tag, and each list item is defined using the <li> (list item) tag.
Example:
<ol>
<li>First Step</li>
<li>Second Step</li>
<li>Third Step</li>
</ol>
3. Definition List (<dl>):
A definition list consists of terms and their corresponding definitions. You create a definition list using the <dl> tag.
Each term is defined using the <dt> (definition term) tag, and each definition is defined using the <dd> (definition
description) tag.
Example:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Nested Lists:
Lists can also be nested within one another. For example, you can have an ordered list within an unordered list, or
vice versa. Here's an example:
<ul>
<li>Item 1</li>
<li>Item 2
<ol>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ol>
</li>
<li>Item 3</li>
</ul>
This would create an unordered list with three items, and the second item contains an ordered sublist.
17)
In JavaScript, the window object represents the browser window that displays the web page you're currently on. An
object of window is created automatically by the browser. It provides access to various properties and methods that
allow you to manipulate the document, handle events, interact with the browser, and more.
The beauty of the window object is that it's globally accessible. You don't need to create an instance of it; you can
simply refer to it using the keyword window.
Example:
console.log(window);
This will output the entire window object with all its properties and methods in the browser's console.
Common Window Object Properties
The window object has numerous properties that provide information about the browser window and document.
Here are some commonly used ones:
• window.innerWidth: Returns the inner width of the browser window (excluding the scrollbar) in pixels.
• window.innerHeight: Returns the inner height of the browser window (excluding the toolbar) in pixels.
• window.document: Provides access to the Document Object Model (DOM) of the current page.
• window.location: Holds information about the current URL, including the protocol, hostname, pathname, and
more.
• window.history: Offers access to the browsing history of the current window.
Example:
const width = window.innerWidth;
const height = window.innerHeight;

console.log(`Window width: ${width} pixels`);
console.log(`Window height: ${height} pixels`);
This code retrieves the window's width and height using the respective properties and logs them to the console.
Window Object Methods
The window object also offers various methods for interacting with the browser and the document. Here are a few
examples:
• window.alert(message): Displays a modal alert dialog with the specified message.
• window.confirm(message): Presents a confirmation dialog with a message and OK/Cancel buttons, returning
true if OK is clicked and false otherwise.
• window.prompt(message, defaultText): Opens a dialog with a message, an optional default text field, and
OK/Cancel buttons. It returns the text entered by the user (if OK is clicked) or null (if canceled).
• window.open(url, name, options): Opens a new browser window or tab with the specified URL, optional
name, and configuration options.
• setTimeout(): Perform action after specified time like calling function, evaluating expression etc.
Example:
function showAlert() {
window.alert("This is an alert message!");
setTimeout(displayMessage, 2000);
}
18)
In web development, dialog boxes are pop-up windows that appear on top of the main web page content. They are
used to communicate information to the user, gather input, or confirm actions. There are three main types to dialog
boxes supported by javascript:
1. Alert(message)
2. Conform(message)
3. Prompt(message)
1. alert(message):
The alert box is a simple modal dialog that displays a message to the user with only a single "OK" button. It's best
suited for short, non-critical notifications or warnings that require immediate user acknowledgement. However,
overuse of alert boxes can disrupt the user experience by halting interaction with the web page.
Example:
function checkage() {
if (age < 18) {
window.alert("You are not eligible.");
confirm(message):
The confirmation box offers a more interactive dialog with the user. It presents a message and two buttons: "OK" and
"Cancel." Clicking "OK" returns true, while "Cancel" returns false. This is ideal for getting user confirmation before
potentially irreversible actions, like deleting data.
Example:
function confirmDelete() {
const confirmed = confirm("Are you sure you want to delete this item?");
if (confirmed) {
// Delete the item logic here
} else {
// User cancelled deletion
}
}
prompt(message, defaultText):
The prompt box allows you to collect user input. It displays a message, an optional pre-filled text field, and "OK" and
"Cancel" buttons. If the user enters text and clicks "OK," the entered text is returned. Otherwise, it returns null. This
is useful for gathering short bits of user information like names or short answers.
Example:
function greetUser() {
const name = window.prompt("Please enter your name:", "");
console.log(`Hello, ${name}!`);
}
19)
AJAX (Asynchronous JavaScript and XML) is a technique for creating asynchronous web applications. It allows web
pages to communicate with a server in the background without having to reload the entire page. This enhances user
experience by making web applications feel faster and more responsive.
Advantages of AJAX:
• Improved User Experience: Faster and more responsive web applications with seamless data updates
without full page reloads.
• Reduced Server Load: Only requested data is exchanged, reducing overall server load compared to full page
reloads.
• Dynamic Content Updates: Specific parts of the page can be updated with new content, keeping the layout
intact.
• Enhanced Interactivity: Enables real-time updates and interactive features like chat applications or live data
feeds.
Disadvantages of AJAX:
• Increased Complexity: Requires more development effort compared to traditional page reloads.
• Backward Compatibility Concerns: Older browsers might not fully support AJAX functionality.
• Security Risks: Improper implementation can lead to security vulnerabilities like Cross-Site Scripting (XSS)
attacks. Careful data handling is crucial.
• SEO Challenges: Search engines might have difficulty indexing content loaded through AJAX. Techniques like
server-side rendering can help address this.
Part C
20)
In web development, frames and framesets were once commonly used techniques for dividing a web page into
multiple independent sections, each containing a separate HTML document. However, their usage has significantly
declined in favor of more modern techniques such as CSS for layout and dynamic HTML manipulation using
JavaScript.
A frame is an HTML element that defines a single frame within a frameset. Which is used to divide the web browser
window into multiple sections where each section can be loaded separately.
A frameset is an HTML element that defines the structure of a frameset document. It allows you to divide the
browser window into multiple frames, each containing a separate HTML document. The <frameset> tag is used to
define the frameset, and the <frame> tag is used to define each individual frame within the frameset.
Frames attribute (<frame> tag):
• src: This attribute specifies the URL of the HTML document that will be loaded into the frame. It's essential
for defining the content displayed within the frame.
• name: This attribute assigns a name to the frame. It can be used for scripting purposes to interact with the
content within the frame using JavaScript.
• scrolling: This attribute defines whether scrollbars should be displayed within the frame ("yes", "no", or
"auto").
• frameborder: This attribute controls whether a border is displayed around the frame ("0" for no border, a
number for pixel width).
• marginwidth/marginheight: These attributes specify the margins (in pixels) around the frame's content area.
Framesets attribute (<frameset> tag):
• rows/cols: These attributes define the layout of the frameset by specifying the number of rows or columns
the frames will be divided into. Values can be percentages or pixels.
• rows/cols (with lengths): You can directly specify the height or width of each row/column within the quotes
(e.g., rows="100px,*" for a 100px top row and remaining space for the bottom row).
Example of Frames and Frameset:
index.html (Frameset):
<!DOCTYPE html>
<head>
<title>Frames Example</title>
</head>
<frameset rows="100px, *"> <frame src="header.html" name="headerFrame"> <frame src="content.html"
name="contentFrame"> </frameset>
</html>
header.html (Content for Top Frame):
<!DOCTYPE html>
<head>
<title>Header</title>
</head>
<body>
<h1>This is the header content</h1>
</body>
</html>
content.html (Content for Bottom Frame):
<!DOCTYPE html>
<head>
<title>Content</title>
</head>
<body>
<p>This is the main content area.</p>
</body>
</html>
Explanation:
1. The index.html file is the frameset document.
2. It defines two rows using the rows attribute: the first row is 100px high and the second takes up the
remaining space.
3. Within the <frameset>, two frames are created using the <frame> tag.
4. Each frame specifies the source (src) of the HTML document to load into that frame using separate files
(header.html and content.html).
5. The frames also have names (name) for potential communication between them (not covered in this basic
example).
21)
In JavaScript, control structures are used to control the flow of execution in a program. They allow you to control the
flow of execution in your code, making decisions, repeating actions, and handling errors.
JavaScript provides several control structures such as
Conditional statements:
Conditional statements in programming are used to execute different blocks of code based on certain conditions.
They allow the program to make decisions and choose between alternative actions.
• if...else: This is the most basic conditional statement. It checks a condition and executes a block of code if the
condition is true, and optionally executes another block of code if the condition is false.
• Nested if: You can chain multiple else if statements after an initial if statement to create multi-way branching
based on different conditions. The else if statement allows you to specify a new condition if the previous if
statement's condition is false.
• switch: This statement allows for multi-way branching based on the value of an expression. It checks the
expression against different cases and executes the associated code block for the matching case. If no match
is found, an optional default block of code can be executed.
Example:
// if...else statement
let age = 25;
if (age >= 18) {
console.log("You are eligible to vote.");
} else {
console.log("You are not eligible to vote.");
}
// 2. Nested if...else statement

let num = -5;
if (num > 0) {
console.log("Number is positive");
} else if (num < 0) {
console.log("Number is negative");
} else {
console.log("Number is zero");
}
// 3. Switch statement
let day = "Monday";
switch (day) {
case "Monday":
console.log("Time to start the week!");
break;
case "Friday":
console.log("Almost the weekend!");
break;
default:
console.log("Just another day in the week.");
}
Looping statements:
Looping statements in programming are used to execute a block of code repeatedly as long as a specified condition is
True. They provide a way to iterate over a sequence of elements, such as arrays, or to perform a certain task a fixed
number of times.
• while: The while loop executes a block of code as long as a specified condition is true. It checks the condition
before executing the code block.
• do..while: The do...while loop is similar to the while loop, but it always executes the code block at least once,
even if the condition is false. It checks the condition after executing the code block.
• for: The for loop is used to execute a block of code a specified number of times. It consists of three parts:
initialization, condition, and increment/decrement.
Example:
// 1. while loop
let i = 0;
while (i < 5) {
console.log(i);
i++; // Increment the counter
}
// 2. do..while loop
do {
console.log(j);
j++; // Increment the counter
} while (j < 5);
// 3. for loop
for (let k = 0; k < 5; k++) {
console.log(k);
}
Jump statement:
1. break Statement:
The break statement is used to terminate the execution of a loop prematurely. When encountered inside a loop, it
immediately exits the loop and continues with the next statement following the loop.
2. continue Statement:
The continue statement is used to skip the current iteration of a loop and continue with the next iteration. It is
typically used to skip specific elements or conditions within a loop without terminating the loop entirely.
Example:
for (let i = 0; i < 5; i++) {

if (i === 3) {
continue;
}
else {
Break;
}
console.log(i);
}
22)
The Document Object Model (DOM) is a programming interface that allows web browsers to represent and interact
with web pages. It essentially creates a tree-like structure (or sometimes forest-like) that mirrors the HTML code of
the page. This structure consists of objects representing the various elements, attributes, and content of the web
page. Such as
1. Elements and Nodes:
• The DOM represents everything on a web page as objects called nodes. These nodes can be elements, text,
comments, or other document parts.
• Elements are the most common type of node. They correspond to the HTML tags in your code
(e.g., <div>, <h1>, <p>).
• Each element has properties (like its tag name, attributes, and class names) and methods (functions you can
use to interact with it).
2. DOM Tree:
• The elements are arranged in a hierarchical structure resembling a tree. The <html> element is the root
node, and all other elements are nested within it, reflecting the parent-child relationships defined in the
HTML code.
3. Scripting and the DOM:
• JavaScript is the most common language used to interact with the DOM.
• Using JavaScript, you can access, modify, and manipulate the elements of the web page dynamically.
The DOM provide some common methods to retrieve element such as:
1. getElementById():
• This method is used to retrieve an element from the DOM by its unique ID attribute.
• It returns the first element that matches the specified ID, or null if no matching element is found.
• Since IDs must be unique within a document, this method is commonly used to access a specific
element when its ID is known.
2. getElementsByTagName():
• This method is used to retrieve elements from the DOM by their tag name.
• It returns a live HTMLCollection of elements with the specified tag name, such as <div>, <p>, <span>,
etc.
• It can be useful for accessing groups of elements sharing the same tag name.
3. getElementsByClassName():
• This method is used to retrieve elements from the DOM by their class name.
• It returns a live HTMLCollection of elements that have the specified class name.
• It allows you to select multiple elements based on their class, which is particularly useful when
elements share common styles or behavior.
4. querySelector():
• This method is used to retrieve the first element from the DOM that matches a specified CSS
selector.
• It returns the first matching element, or null if no matching element is found.
• It accepts any valid CSS selector, allowing for more complex and flexible element selection.
5. querySelectorAll():
• This method is similar to querySelector(), but it retrieves all elements from the DOM that match a
specified CSS selector.
• It returns a static NodeList of all matching elements, or an empty NodeList if no matching elements
are found.
• It's useful when you need to select multiple elements based on a CSS selector, and it provides more
flexibility than getElementsByClassName() or getElementsByTagName().
Example:
<!DOCTYPE html>
<head>
<title>DOM Methods Example</title>
</head>
<body>

<div id="container">
<h1 id="title">Welcome to the DOM Methods Example</h1>
<p>This is a paragraph with <span class="highlight">highlighted</span> text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button class="btn">Click me!</button>
<button class="btn">Click me too!</button>
</div>
<script>
// getElementById()
document.getElementById('title').textContent = 'Hello, DOM!';
// getElementsByTagName()
const paragraphs = document.getElementsByTagName('p');
for (let p of paragraphs) {
p.style.fontWeight = 'bold';
}
// getElementsByClassName()
const highlightedText = document.getElementsByClassName('highlight');
for (let text of highlightedText) {
text.style.color = 'red';
text.style.backgroundColor = 'yellow';
}
// querySelector()
document.querySelector('button').addEventListener('click', function() {
alert('Button clicked!');
});
// querySelectorAll()
const allButtons = document.querySelectorAll('.btn');
for (let btn of allButtons) {
btn.addEventListener('click', function() {
btn.style.backgroundColor = 'blue';
});
}
</script>
</body>
</html>
23)
In HTML, a <form> element is used to create an interactive area that contains controls for user input, such as text
fields, checkboxes, radio buttons, buttons, and more. Forms are essential for collecting user data, such as login
information, search queries, and feedback. The <form> element acts as a container for these input controls, allowing
users to enter data and submit it to a server for processing.
Properties of the <form> Element:
1. action (Required):
• This attribute specifies the URL of the program that will handle the submitted form data. It's typically
a server-side script (e.g., PHP, Python) that processes the data and performs necessary actions.
• Example: <form action="/submit_form.php" method="post">
2. method (Optional, defaults to "get"):
• This attribute defines how the form data is sent to the server-side script. The two common methods
are:
• "get": This method appends the form data as key-value pairs to the URL in the query string. The
format is typically ?key1=value1&key2=value2.... This method is suitable for small amounts of data
that are not sensitive, as the data becomes visible in the address bar.
Example: <form action="/search.php" method="get">...</form> (Search queries are often sent using
"get" as they're not considered sensitive.)
• "post": This method sends the form data as separate parts in the HTTP request body. The data is not
visible in the URL and is generally more secure for sensitive information like passwords.
Example: <form action="/login.php" method="post">...</form> (Login forms typically use "post" for
password security.)
3. name (Optional):
• Assigns a name to the form. While not always necessary, it can be useful for referencing the form in
JavaScript or for styling purposes with CSS.
• Example: <form name="loginForm" action="/submit_login.php" method="post">
4. autocomplete (Optional):
• Specifies whether the browser should automatically fill in form fields based on the user's previous
inputs.
• Values: "on" (default) or "off".
• Example: <form action="/search.php" method="get" autocomplete="off">
5. enctype (Optional, useful with "post" method):
• This attribute specifies the content type (encoding) of the form data when using the "post" method.
The default encoding is "application/x-www-form-urlencoded" suitable for standard form data. You
might encounter this attribute less frequently.
• Common values include "application/x-www-form-urlencoded" (default), "multipart/form-data" for

file uploads, and "text/plain".
• Example: <form action="/upload_file.php" method="post" enctype="multipart/form-data">

6. target (for form submission):
• This attribute specifies the frame or window where the response from the server should be displayed
after form submission. Common values are:
1. "_blank": Opens the response in a new browser window or tab.

2. "_self": (Default) Loads the response in the same window, replacing the current content.
3. "frameName": Loads the response in a named iframe element on the page.
• Example: <form action="/submit_form.php" method="post" target="_blank">
7. novalidate (Optional):
• This attribute prevents the browser from performing its default validation checks on form
submission. This can be useful if you want to handle validation yourself using JavaScript for a more
customized approach.
• Example: <form action="/submit_form.php" method="post" novalidate>

Part A

Uploaded by

Copyright:

Available Formats

Part A

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Part A

Uploaded by

Copyright:

Available Formats

Part A

function functionName(parameter1, parameter2, ...) {

The basic tags in html are:

An HTML table is created using the following tags:

• <tr>: This tag defines a table row.

• <td>: This tag defines a regular table data cell.

Some alternative for handling asynchronous requests in web development are:

These technologies typically include:

• HTML: Provides the basic structure and content of the webpage.

• CSS: Controls the visual presentation of the webpage.

• JavaScript: Adds interactivity and dynamic behavior.

Essential XML syntax rules are:

They are attached to HTML elements using attributes or JavaScript methods.

<button id="myButton">Click Me</button>

const button = document.getElementById("myButton");

DHTML (Dynamic HTML) Features:

• CSS: Controls the visual presentation of the webpage.

• JavaScript: Adds interactivity and dynamic behavior.

By combining these elements, DHTML offers features like:

1. Wix & Squarespace: (Website Builders)

o Easy-to-use drag-and-drop interface for beginners with no coding required.

o Might have a steeper learning curve compared to drag-and-drop builders.

3. Webflow: (Visual Website Builder)

4. Nova: (Headless CMS with Frontend Framework)

5. Figma: (Design Tool)

6. Adobe Dreamweaver: (Code Editor)

7. WordPress (Content Management System)

• DOM Manipulation: Accessing and modifying the elements of a web page.

• Event Handling: Responding to user actions and browser events.

<button onclick="showAlert()">Click Me!</button>

alert("You clicked the button!");

1. unordered lists (<ul>)

1. Unordered List (<ul>):

2. Ordered List (<ol>):

3. Definition List (<dl>):

Common Window Object Properties

• window.history: Offers access to the browsing history of the current window.

const width = window.innerWidth;

const height = window.innerHeight;

console.log(`Window height: ${height} pixels`);

Window Object Methods

• window.alert(message): Displays a modal alert dialog with the specified message.

window.alert("You are not eligible.");

Frames attribute (<frame> tag):

Framesets attribute (<frameset> tag):

header.html (Content for Top Frame):

content.html (Content for Bottom Frame):

1. The index.html file is the frameset document.

JavaScript provides several control structures such as

// 2. Nested if...else statement

for (let i = 0; i < 5; i++) {

1. Elements and Nodes:

3. Scripting and the DOM:

• It returns the first matching element, or null if no matching element is found.

Properties of the <form> Element:

• Example: <form action="/submit_form.php" method="post">

2. method (Optional, defaults to "get"):

• Example: <form name="loginForm" action="/submit_login.php" method="post">