MST_MID_-1[1]

MST MID -1 IMPORTANT TOPICS
UNIT - 1
1. Explain Basic structure of HTML & HTML5

Basic Structure of HTML & HTML5
HTML (HyperText Markup Language) is the standard markup language used to create
web pages. HTML5 is the latest version of HTML, introduced with new features and
capabilities to improve web content creation and presentation.
Basic Structure of an HTML Document
At the core of both HTML and HTML5 is a consistent structure that defines how web
content is organized. The basic structure of an HTML document includes essential
elements that define the document’s content, metadata, and layout. Here’s a
breakdown:
1. HTML Document Skeleton
This is the minimum structure required for a valid HTML document:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>

</body>
</html>
Explanation of Each Part:
1. DOCTYPE Declaration:
• <!DOCTYPE html>: Specifies the document type and version of HTML. In HTML5, this
is simplified to just <!DOCTYPE html>. It tells the browser that the document is
written in HTML5.
2. <html> Element:
• The <html> tag encloses all the content of an HTML document. It’s the root element
of the page. The lang="en" attribute defines the language of the document (in this
case, English).
3. <head> Element:
• The <head> tag contains metadata about the document, such as its title, character
set, links to stylesheets, and scripts.
Common elements inside <head>:
• <meta charset="UTF-8">: Defines the character encoding as UTF-8, which supports
many languages and symbols.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: This is
crucial in responsive web design, ensuring that the website adjusts to different
screen sizes.
• <title>: Specifies the title of the document, which appears in the browser’s title bar
or tab.
4. <body> Element:
• The <body> tag contains all the visible content of the web page, including text,
images, links, tables, and other elements.
Common elements inside <body>:
• Headings: <h1>, <h2>, ..., <h6> for defining headers of different levels.
• Paragraphs: <p> for text content.
• Links: <a href="URL"> for creating hyperlinks.
• Images: <img src="image.jpg" alt="description"> for adding images.
• Lists: <ul> for unordered lists, <ol> for ordered lists, and <li> for list items.
• Forms: <form> for collecting user input.
New Features in HTML5

HTML5 introduced several new elements, attributes, and APIs to enhance web
development. Here are some key additions:
1. New Structural Elements:
o <header>: Defines a header section (for the entire page or specific sections).
o <nav>: Defines a section containing navigation links.
o <article>: Represents a self-contained piece of content (like a blog post).
o <section>: Groups related content in a document.
o <footer>: Defines the footer of a document or section.
o <aside>: Represents content tangentially related to the main content (like
sidebars).
2. Multimedia Support:
o <audio>: Embeds audio content.
o <video>: Embeds video content.
o <canvas>: Used for drawing graphics and animations with JavaScript.
3. Form Enhancements:
o HTML5 introduced new input types and attributes for forms:
▪ New input types: email, date, number, url, range, etc.
▪ The required attribute to mark a form field as mandatory.
4. Semantic Elements:
o HTML5 is more semantic, meaning that it improves the meaning of elements
to describe their purpose in the document. For instance, using <article>,
<section>, and <nav> improves accessibility and SEO by giving meaning to the
structure.
5. API Support:
o HTML5 introduced many new JavaScript APIs for better functionality:
▪ Geolocation API: Allows the browser to get the user's location.
▪ LocalStorage and SessionStorage: Allow the storage of data on the
client-side.
▪ Web Workers: Enable background scripts to run without affecting the
performance of the web page.
▪ Drag and Drop API: Allows elements to be dragged and dropped
within the document.
Example of an HTML5 Document:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My HTML5 Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section>
<article>
<h2>About HTML5</h2>
<p>HTML5 is the latest version of HTML and includes new features for better web
development.</p>
</article>
</section>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
Key Differences Between HTML and HTML5
• DOCTYPE: Simplified in HTML5 (<!DOCTYPE html>).
• Semantic Elements: New elements like <header>, <footer>, <section>, etc., which
improve document structure and readability.
• Multimedia: Native support for audio and video without external plugins (e.g.,
Flash).
• APIs: HTML5 includes APIs for features like geolocation, local storage, and offline
applications.
• Form Input: HTML5 has better input controls like email, date, number, etc.
This basic structure and the new features introduced in HTML5 have made it a more
powerful and developer-friendly language for creating modern web applications.
=====================================================================
2. Discuss different types of HTML Elements
1. Block-Level Elements
• Definition: Block-level elements occupy the full width of their parent container (like
the browser window or a <div>). They always start on a new line and typically stack
on top of one another.
• Purpose: These elements define large sections or blocks of content.
1. Paragraphs <p>
• Used to define a block of text as a paragraph.
• Example:
<p>This is a paragraph of text in HTML.</p>
2. Lists: <ul> and <li>
• <ul> is used for unordered (bulleted) lists, and <li> defines each list item.
• Example:
html
Copy code
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
3. Headings <h1> to <h6>, Articles <article>
• Headings are used to define the structure of your content, with <h1> being the most
important and <h6> the least.
• <article> is used for self-contained content like blog posts.
• Example:
html
Copy code
<h1>Main Heading</h1>
<h2>Subheading</h2>
<article>
<h3>Article Title</h3>
<p>Article content goes here.</p>
</article>
4. Sections <section>
• Used to divide a page into thematic sections.
• Example:
html
Copy code
<section>
<h2>Section Title</h2>
<p>Content within this section.</p>
</section>
5. Long Quotes <blockquote>
• Defines a long quotation from another source.
• Example:
html
Copy code
<blockquote>
This is a long quote from another source.
</blockquote>
6. Division <div>
• A generic container used to group HTML elements.
• Example:
html
Copy code
<div>
<p>This is a paragraph inside a div.</p>
</div>
7. Form <form>
• Used to collect user input.
• Example:
html
Copy code
<form action="/submit">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
8. Table <table>
• Defines a table structure to display data.
• Example:
html
Copy code
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
These are the basic HTML tags listed in your image. Each tag serves a specific
purpose in structuring and organizing web content.
2. Inline Elements
• Definition: Inline elements do not start on a new line and only take up as much width as
their content. They are used within block-level elements to format or style specific pieces of
content.
• Purpose: These elements are used to style or mark small pieces of content within a block.
Breakdown:
1. Links <a>: This creates a clickable hyperlink.
2. Image <img>: Displays an image with an alternate text description.
3. Span <span>: A generic inline container for text or other elements.
4. Button <button>: Creates a clickable button.
5. Input <input>: Used to create a text input field.
6. Label <label>: Defines a label for form controls (such as an input field).
7. Textarea <textarea>: Defines a multi-line text input area.
8. Emphasized words <em>: Marks text with emphasis, typically italicized.
9. Important words <strong>: Marks important text, typically bolded.
10. Short quotes <q>: Defines a short, inline quotation.
11. Strong <strong>: Adds strong importance to the text, making it bold.
3.Form Elements
• Definition: Form elements are used to collect user input and data through the web page.
They often include elements that allow interaction and submission of information.
• Purpose: Collect and process user data.
• Examples:
o <form>: Defines the form element itself.
o <input>: Defines a variety of input fields like text, password, email, radio buttons,
checkboxes, etc.
o <textarea>: Defines a multi-line text input field.
o <select>: Creates a dropdown list.
o <option>: Specifies options within a <select> dropdown.
o <button>: Defines a clickable button.
o <label>: Defines a label for form controls, improving accessibility.
o <fieldset>: Groups related form elements.
o <legend>: Provides a caption for the <fieldset>
4. Types of HTML Elements
HTML elements are the building blocks of web pages, and they define the structure, content, and
behavior of a website. Elements are represented by tags and can be divided into different types
based on their purpose and behavior. Here’s a breakdown of the main types of HTML elements:
1. Block-Level Elements
• Definition: Block-level elements occupy the full width of their parent container (like the
browser window or a <div>). They always start on a new line and typically stack on top of
one another.
• Purpose: These elements define large sections or blocks of content.
• Examples:
o <div>: Generic container for grouping content.
o <p>: Paragraph of text.
o <h1>, <h2>, ... <h6>: Headings from largest (<h1>) to smallest (<h6>).
o <ul>, <ol>, <li>: Lists (unordered, ordered, and list items).
o <article>: Self-contained block of content, such as a blog post.
o <section>: Logical grouping of content within a page.
o <header>: Introductory content, usually containing navigation links or a logo.
o <footer>: Footer of a page or section.
o <nav>: Navigation links block.
o <form>: Group of form elements for user input.
Characteristics:
• Always start on a new line.
• Can contain other block-level and inline elements.
2. Inline Elements
• Definition: Inline elements do not start on a new line and only take up as much width as
their content. They are used within block-level elements to format or style specific pieces of
content.
• Purpose: These elements are used to style or mark small pieces of content within a block.
• Examples:
o <span>: Generic inline container, often used for styling small portions of text.
o <a>: Anchor element, used to create hyperlinks.
o <img>: Image element, used to embed images in the content.
o <strong>: Emphasizes strong text (bold).
o <em>: Emphasizes text (italic).
o <code>: Represents a snippet of code.
o <br>: Line break, creates a new line within text.
o <small>: Represents smaller text (usually for fine print or notes).
o <b>, <i>: Used for bold and italic text (although <strong> and <em> are semantically
preferred).
Characteristics:
• Do not start on a new line.
• Take up only as much space as needed by the content.
• Can only contain other inline elements, not block-level elements.
3. Self-Closing (Void) Elements

• Definition: Self-closing elements do not have any content and do not require a closing tag.
These elements are typically used to insert something into the document without wrapping
any other content.
• Purpose: To add elements that don't need nested content.
• Examples:
o <img>: Used to embed images.
o <br>: Inserts a line break in the content.
o <hr>: Horizontal rule, often used to separate content.
o <meta>: Defines metadata about the HTML document (e.g., character set, author).
o <input>: Represents input fields in a form (e.g., text fields, checkboxes).
o <link>: Used to link external resources like CSS stylesheets.
o <source>: Specifies multiple media resources for <audio> and <video> elements.
Characteristics:
• No content or closing tags.
• Used for inserting elements or adding metadata.
4. Form Elements
• Definition: Form elements are used to collect user input and data through the web page.
They often include elements that allow interaction and submission of information.
• Purpose: Collect and process user data.
• Examples:
o <form>: Defines the form element itself.
o <input>: Defines a variety of input fields like text, password, email, radio buttons,
checkboxes, etc.
o <textarea>: Defines a multi-line text input field.
o <select>: Creates a dropdown list.
o <option>: Specifies options within a <select> dropdown.
o <button>: Defines a clickable button.
o <label>: Defines a label for form controls, improving accessibility.
o <fieldset>: Groups related form elements.
o <legend>: Provides a caption for the <fieldset>.
Characteristics:
• Used for user interaction and data collection.
• Typically wrapped inside a <form> element that handles data submission.
5. Semantic Elements
• Definition: Semantic elements describe their meaning clearly to both the browser and
developers. They improve the structure and readability of HTML and provide better
accessibility for users and search engines.
• Purpose: Enhance the clarity of document structure and improve accessibility.
• Examples:
o <article>: Represents self-contained content like articles or blog posts.
o <section>: Groups related content.
o <header>: Defines the introductory section of a document or section.
o <footer>: Defines the footer section of a document or section.
o <nav>: Defines navigation links.
o <aside>: Represents content related to the main content, such as sidebars or
advertisements.
===========================================================================
3. Define table and its attributes with an example program
4. What is HTML Injection and Clickjacking ?
5. Explain Global attributes concept
UNIT – 2
1. Explain conditional and looping statements
<html>
<body>
<p id="demo"></p>
<script>
let day = "Wednesday" ;
switch (day) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>
</body>
</html>
Program:
<html>
<body>
<script>
for (var i = 0; i < 5; i++){
console.log(i);
}
</script>
</body>
</html>
Program:
<script>
let i=0;
do
{ console.log(i);
i++;
}while (i < 5)
</script>
2. What are the differences between java & javascript
3. Explain Inbuilt events and functions in javascript

1. Inbuilt Events
Events in JavaScript are actions or occurrences that happen in the browser window,
and they can be triggered by user interactions, such as clicks, key presses, or page
loads. Here are some common types of events:
a. Mouse Events
• click: Triggered when a user clicks on an element.
• dblclick: Triggered when a user double-clicks on an element.
• mouseover: Triggered when a user moves the mouse over an element.
• mouseout: Triggered when the mouse leaves an element.
• mousedown: Triggered when a mouse button is pressed down on an element.
• mouseup: Triggered when a mouse button is released over an element.
Example:
javascript
Copy code
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
b. Keyboard Events
• keydown: Triggered when a key is pressed down.
• keyup: Triggered when a key is released.
• keypress: Triggered when a key is pressed (deprecated, use keydown).
Example:
javascript
Copy code
document.addEventListener("keydown", function(event) {
console.log("Key pressed: " + event.key);
});
c. Form Events
• submit: Triggered when a form is submitted.
• change: Triggered when the value of an input element changes.
• focus: Triggered when an element gains focus.
• blur: Triggered when an element loses focus.
Example:
javascript
Copy code
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
alert("Form submitted!");
});
d. Window Events
• load: Triggered when the entire page (including images and stylesheets) is fully
loaded.
• resize: Triggered when the window is resized.
• scroll: Triggered when the user scrolls the page.
Example:
javascript
Copy code
window.addEventListener("load", function() {
console.log("Page is fully loaded!");
});
2. Inbuilt Functions
JavaScript also has a variety of built-in functions that allow developers to perform
common tasks easily. Here are some of the most frequently used functions:
a. Document and Element Manipulation
• document.getElementById(): Returns the element with the specified ID.
• document.querySelector(): Returns the first element that matches a specified CSS
selector.
• element.addEventListener(): Attaches an event handler to an element.
• element.innerHTML: Gets or sets the HTML content inside an element.
Example:
javascript
Copy code
const element = document.getElementById("myElement");
element.innerHTML = "Hello, World!";
b. Array Functions
• Array.prototype.push(): Adds one or more elements to the end of an array.
• Array.prototype.pop(): Removes the last element from an array.
• Array.prototype.map(): Creates a new array populated with the results of calling a
provided function on every element in the calling array.
• Array.prototype.forEach(): Executes a provided function once for each array
element.
Example:
javascript
Copy code
let numbers = [1, 2, 3];
numbers.push(4); // numbers is now [1, 2, 3, 4]
numbers.forEach(function(num) {
console.log(num);
});
c. Math Functions
• Math.random(): Returns a random number between 0 and 1.
• Math.floor(): Rounds a number down to the nearest integer.
• Math.ceil(): Rounds a number up to the nearest integer.
• Math.max(): Returns the largest of zero or more numbers.
Example:
javascript
Copy code
let randomNumber = Math.floor(Math.random() * 10); // Random number between
0 and 9
console.log(randomNumber);
d. String Functions
• String.prototype.length: Returns the length of a string.
• String.prototype.toUpperCase(): Returns the calling string value converted to
uppercase.
• String.prototype.toLowerCase(): Returns the calling string value converted to
lowercase.
• String.prototype.split(): Splits a string into an array of substrings.
Example:
javascript
Copy code
let text = "Hello, World!";
console.log(text.toUpperCase()); // Outputs: "HELLO, WORLD!"
Conclusion
In summary, JavaScript provides a rich set of built-in events and functions that
facilitate interactivity and functionality in web applications. Events allow developers
to respond to user actions, while functions enable various operations on data types,
making JavaScript a powerful tool for creating dynamic and interactive web pages.
4o mini
4. Destructing array & array methods

1.push()
Adds one or more elements to the end of an array.
javascript
Copy code
let arr = [1, 2, 3];
arr.push(4); // Adds 4 to the end of the array
console.log(arr); // Output: [1, 2, 3, 4]
2. pop()
Removes the last element from an array.
javascript
Copy code
let arr = [1, 2, 3];
arr.pop(); // Removes the last element
console.log(arr); // Output: [1, 2]
3. shift()
Removes the first element from an array.
javascript
Copy code
let arr = [1, 2, 3];
arr.shift(); // Removes the first element
console.log(arr); // Output: [2, 3]
4. unshift()
Adds one or more elements to the beginning of an array.
javascript
Copy code
let arr = [2, 3];
arr.unshift(1); // Adds 1 to the beginning
console.log(arr); // Output: [1, 2, 3]
5. concat()
Merges two or more arrays.
javascript
Copy code
let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2); // Merges arr1 and arr2
console.log(newArr); // Output: [1, 2, 3, 4]
6. slice()
Returns a shallow copy of a portion of an array.
javascript
Copy code
let arr = [1, 2, 3, 4, 5];
let slicedArr = arr.slice(1, 3); // Slices from index 1 to 3 (not including 3)
console.log(slicedArr); // Output: [2, 3]
7. splice()
Adds or removes elements from an array.
javascript
Copy code
let arr = [1, 2, 3, 4];
arr.splice(1, 2, 'a', 'b'); // Removes 2 elements starting at index 1, adds 'a' and 'b'
console.log(arr); // Output: [1, 'a', 'b', 4]
8. forEach()
Executes a provided function once for each array element.
javascript
Copy code
let arr = [1, 2, 3];
arr.forEach(item => console.log(item * 2)); // Output: 2, 4, 6
9. map()
Creates a new array with the results of calling a function on every element.
javascript
Copy code
let arr = [1, 2, 3];
let doubledArr = arr.map(item => item * 2);
console.log(doubledArr); // Output: [2, 4, 6]
10. filter()
Creates a new array with elements that pass a test.
javascript
Copy code
let arr = [1, 2, 3, 4];
let filteredArr = arr.filter(item => item > 2);
console.log(filteredArr); // Output: [3, 4]
15. sort()
Sorts the elements of an array in place.
javascript
Copy code
let arr = [3, 1, 4, 2];
arr.sort(); // Sorts in ascending order by default
console.log(arr); // Output: [1, 2, 3, 4]
16. reverse()
Reverses the array in place.
javascript
Copy code
let arr = [1, 2, 3];
arr.reverse(); // Reverses the array
17. join()
Joins all elements of an array into a string.
javascript
Copy code
let arr = ['Hello', 'World'];
let str = arr.join(' '); // Joins with a space
console.log(str); // Output: "Hello World"
20. fill()
Fills all elements of an array with a static value.
javascript
Copy code
let arr = [1, 2, 3];
arr.fill(0); // Fills the entire array with 0
These examples cover a wide range of useful operations on arrays in JavaScript!
re array with 0
console.log(numbers); // Output: [0, 0, 0, 0]
5. Asynchronous programming with callback ,promises,await,async and fetching api’s

UNIT – 3
1. What is node.js and explain its importance
2. What are the steps to create and run a node.js file
3. What is module and explain in details about http module

MST_MID_-1[1]

Uploaded by

MST_MID_-1[1]

Uploaded by

MST MID -1 IMPORTANT TOPICS

1. Explain Basic structure of HTML & HTML5

New Features in HTML5

Example of an HTML5 Document:

3. Self-Closing (Void) Elements

2. What are the differences between java & javascript

3. Explain Inbuilt events and functions in javascript

4. Destructing array & array methods

5. Asynchronous programming with callback ,promises,await,async and fetching api’s

You might also like