Unit 1:

2mark:
1. Differentiate HTML and XHTML.

2. Explain basic HTML markup (tag) syntax with diagram.

The basic syntax of HTML markup involves using tags to define the structure and content of a web
page.

Syntax(diagram):

<tagname>
/ \
Opening Closing
tag tag
Eg:
<p>This is a paragraph.</p>
 <p> is the opening tag for a paragraph element.
 </p> is the closing tag for the paragraph element.
  "This is a paragraph." is the content of the paragraph.
3.What is the use of audio tag? Write its important attributes with their
purpose
The <audio> tag is used to embed sound content in a document, such as
music or other audio streams. The <audio> tag contains one or
more <source> tags with different audio sources. The browser will choose the
first source it supports.

Attribute Description

autoplay Specifies that the audio will start playing as soon as it is ready

controls Specifies that audio controls should be displayed

loop Specifies that the audio will start over again, every time it is finishe

muted Specifies that the audio output should be muted

src Specifies the URL of the audio file

4.What is the use of video tag? Write its important attributes with their
purpose.

The <video> tag is used to embed video content in a document, such as a

movie clip or other video streams.

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

autoplay Specifies that the video will start playing as soon as it is ready

controls Specifies that video controls should be displayed

 height Sets the height of the video player

src Specifies the URL of the video file

width Sets the width of the video player

5.How to write HTML5 comments.

In HTML5, you can write comments to add explanatory or descriptive notes within your HTML code.

1. Single-line Comment: To write a single-line comment, use the following syntax:

<!-- This is a single-line comment -->

Anything between will be treated as a comment and will not be rendered by the browser.

2. Multi-line Comment: If you have a comment that spans multiple lines, you can use the
following syntax:

<!--

This is a

multi-line comment

-->
6.How to write HTML5 conditional comments.
Conditional comments are no longer supported in HTML5, but if you're working
witholder versions of HTML and need to use conditional comments, here's an
example of how they were written:
a) <!--[if IE]>
<p>This is Internet Explorer.</p>
<![endif]-->
b) <!--[if lt IE 9]>
<p>This is Internet Explorer 8 or earlier.</p>
<![endif]-->
 7. What is the use of target attribute of <a> element? List the possiblevalues.

The <a> tag defines a hyperlink, which is used to link from one page to
another.The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.

download Specifies that the target will be downloaded when a user clicks on the hyperlink

href Specifies the URL of the page the link goes to

rel Specifies the relationship between the current document and the linked

document

target Specifies where to open the linked document

8. Write a note on HTML5 audio tag with its attributes.

Refer question 3

9. What does br tag do? Whats the use of its clear attribute?

The <br> tag inserts a single line break.The <br> tag is useful for writing
addresses or poems.The <br> tag is an empty tag which means that it has no
end tag.

The clear attribute is used to control the behaviour of floated elements and specifies on which
side of the floating elements other content should not be allowed. It can take three possible
values:

1. clear="left" 2.clear="right" 3.clear="both"

10. What is the purpose of div tag? What’s the use of its nowrap attribute.

The <div> tag defines a division or a section in an HTML document.

The <div> tag is easily styled by using the class or id attribute.Any sort of
content can be put inside the <div> tag! .

the nowrap attribute is used to specify that the content of a specific table cell should
not wrap to the next line and should remain on a single line. It prevents text or
content from breaking into multiple lines within a table cell.

11.What is the purpose of <dl> and <dt> elements?

The <dt> tag defines a term/name in a description list.The <dt> tag is used
in conjunction with <dl> (defines a description list) and <dd> (describes
each term/name).
The <dl> tag defines a description list.The <dl> tag is used in conjunction
with <dt> (defines terms/names) and <dd> (describes each term/name)

Eg:

<dl>

<dt>HTML</dt>

<dd>HyperText Markup Language</dd>

</dl>

12.What is the use of <fieldset> element?

The <fieldset> tag is used to group related elements in a form.

The <fieldset> tag draws a box around the related elements.

Eg:

<form>

<fieldset>

<label for="name">Name:</label>

<input type="text" id="name" name="name">

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

<input type="email" id="email" name="email">

</fieldset>

<button type="submit">Submit</button>

</form>

13. What is the use of heading (<h1> to <h6> ) tag?

The <h1> to <h6> tags are used to define HTML headings.<h1> defines the most
important heading. <h6> defines the least important heading.

Eg: <h1>This is heading 1</h1>

<h2>This is heading 2</h2>

14. What is the use of document <head> tag?

The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag. Metadata is data about
the HTML document. Metadata is not displayed. Metadata typically define the
document title, character set, styles, scripts, and other meta information

15. Write the use of <header> tag.

The <header> element represents a container for introductory content or a set
of navigational links.

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)

 logo or icon
 authorship information

eg:

<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>

16. What is the use of <label> tag? What is the purpose

of it’s for attribute?

The <label> tag is used to specify a label for an <input> element of a form. It adds a
label to a form control such as text, email, password, textarea etc. It toggles the
control when a user clicks on a text within the <label> element.

The for attribute of the tag is used to specify which form element the label is associated
with. It takes the value of the id attribute of the form element

Eg:

<label for="username">Username</label>

<input type="text" id="username" />

17. What is the purpose of <span> element?

The <span> tag is an inline container used to mark up a part of a text, or a

part of a document.The <span> tag is easily styled by CSS or manipulated with
JavaScript using the class or id attribute.

The <span> tag is much like the <div> element, but <div> is a block-level
element and <span> is an inline element.

Eg: <p>My mother has <span style="color:blue;>blue</span> eyes and my

father has <span style="color:darkgreen;>dark green</span> eyes.</p>
18. What is the use of cellpadding and cellspacing attributes in
<table> element?

cellpadding: This attribute is used to specify the amount of space or padding

between the content within a table cell and the edges of the cell. It defines the
padding on all four sides (top, right, bottom, left) of each cell in the table. The value
of cellpadding is specified in pixels. For example, using cellpadding="5" will add a 5-
pixel padding around the content within each cell of the table.

cellspacing: This attribute is used to define the space or gap between adjacent cells
in a table. It determines the spacing between cells both horizontally and vertically.
The value of cellspacing is specified in pixels. For instance, using cellspacing="10"
will create a 10-pixel gap between adjacent cells in the table.

19. What is the purpose colspan and rowspan attributes of <td> tag?

1. colspan: This attribute is used to specify the number of columns that a table cell
should span. It allows a single cell to occupy multiple columns, merging or stretching
across them horizontally. For example, using colspan="2" on a element will cause it
to span two adjacent columns in the table, effectively merging those cells into a
single larger cell.

2. rowspan: This attribute is used to specify the number of rows that a table cell
should span. It allows a single cell to occupy multiple rows, merging or stretching
across them vertically. For instance, using rowspan="3" on a element will cause it to
span three adjacent rows in the table, merging those cells into a single taller cell

20. What is the purpose of <th> tag? List any four attributes.

The <th> tag defines a header cell in an HTML table.An HTML table has two
kinds of cells:

 Header cells - contains header information

 Data cells - contains data

Atrrributes:

Colspan,headers,rowspan,scope,abbr

21. Mention any four features of <title> tag?

1. It defines the title of the document. The title is displayed in the

browser's title bar and in search engine results pages (SERPs). It is
also used by some browsers to display the page title in the tab.
2. It is required in all HTML documents. The <title> tag is one of the
few required tags in HTML. This is because the title is so important for
understanding the content of the page and for SEO.
3. It can be used to improve SEO. The title is one of the most
important factors for SEO. Search engines use the title to determine
 the relevance of a page to a search query. Therefore, it is important to
make sure that the title is descriptive and relevant to the content of
the page.
4. It can be used to add keywords. The title is a good place to add
keywords that you want to rank for in search engines. However, it is
important to use keywords in the title sparingly and to make sure that
they are relevant to the content of the page.

22. What is the use of <ul> tag? What is the purpose of its type
attribute?
the <ul> tag defines an unordered (bulleted) list.Use the <ul> tag together
with the <li> tag to create unordered lists.

disc: This is the default value. It displays a solid round bullet. Eg: type="disc"

circle: This displays a hollow round bullet. . Eg: type="circle"

square: This displays a solid square bullet.

none: This does not display any bullets.

23. What are the ways to include JavaScript in a webpage? Give

example code for each

1. Embedding code or internal

2. Inline code
3. External file

To add the JavaScript code into the HTML pages, we can use the tag of the HTML that wrap
around JavaScript code inside the HTML program//internal

1. Eg: <html>
2. <head>
3. <title> page title</title>
4. <script>
5. document.write("Welcome to Javatpoint");
6. </script>
7. </head>
8. <body>
9. <p>Inthis example we saw how to add JavaScript in the head section </p>
10. </body>
 11. </html>

2. Generally, this method is used when we have to call a function in the HTML event attributes.
There are many cases (or events) in which we have to add JavaScript code directly //inline

1. <html>
2. <head>
3. <title> page title</title>
4. </head>
5. <body>
6. <p>
7. <a href="#" onClick="alert('Welcome !');">Click Me</a>
8. </p>
9. <p> in this example we saw how to use inline JavaScript or directly in an HTML tag.
</p>
10. </body>
11. </html>

We can also create a separate file to hold the code of JavaScript with the (.js) extension and
later incorporate/include it into our HTML document using the src attribute of
the <script> tag//external

1. <html>
2. <head>
3. <meta charset="utf-8">
4. <title>Including a External JavaScript File</title>
5. </head>
6. <body>
7. <form>
8. <input type="button" value="Result" onclick="display()"/>
9. </form>
10. <script src="hello.js">
11. </script>
12. </body>
 13. </html>

Hello.js

1. function display() {
2. alert("Hello World!");
3. }

24. What is the use of <noscript></noscript> tag?

The <noscript> tag is used to define an alternate content to be displayed to users that have
disabled scripting from the browser or have a browser that doesn't support script. The
`<noscript> element can be used in both <head> and <body>. When used inside <head>,
the <noscript> element could only contain <link>, <style>, and <meta> elements.

The text inside the <noscript> element will be displayed if the user's browser is not
script supporting

Eg: <noscript>

<p>Your browser does not support JavaScript.</p>

</noscript>

25. What is a variable? How to declare variable in JavaScript? Give example.

A variable represents or holds a value. The actual value of a variable can be changed

at any time.

Declaring Variables

To declare text as a variable, you use the var or let keyword, which tells the browser

that the text to follow will be the name of a new variable:

var variablename;

For example, to name your variable number the declaration looks like this:

var number;

26. What is an anonymous function in JavaScript? Provide proper example.

An anonymous function in JavaScript is a function that does not have a name. It is also
called a lambda function or a self-executing function. Anonymous functions are often
used as callbacks, which are functions that are passed as arguments to other functions.

Eg:

var greet = function() {

console.log("Hello, world!");

};

greet(); // Output: Hello, world!

27. What are the uses of === and !== operators of JavaScript.

The === operator tests for equality and type, while the !== operator tests for
inequality and type.

The === operator returns true if the two values are equal and of the same type. The
!== operator returns true if the two values are not equal or of different types

Operator Description Example

Tests for equality and

=== 1 === 1 returns true
type

Tests for inequality and 1 !== "1" returns

!==
type true

28. List any four special operators of JavaScript with their purpose.

29.Write the purpose of for in and for each in loops of JavaScript.

The for in loop allows you to loop over all the names of the properties of an object and execute
statements for each property using a variable to hold the name of the property.
The for each in loop is very similar to the for in loop, but rather than looping through the name
of each property it allows you to loop through the value of each of the properties.

30. What do you mean by an Event? What is event handler?

An event is something that happens when the viewer of the page performs some sort of action,
such as clicking a mouse button, clicking a button on the page, changing the contents of a
form element, or moving the mouse over a link on the page. Events can also occur simply by
the page loading or other similar actions.

An event handler is a predefined JavaScript property of an object (in most cases an element
in the document) that is used to handle an event on a Web page.

31.What is the use of the attachEvent() method? Give an example.

attachEvent() is to bind an event handler function to an element, allowing the function to be

executed when the specified event occurs on that element. The attachEvent() method takes
two arguments: the event type and the function that will be called when the event occurs

eg:

document.getElementById("myButton").attachEvent("onclick", function() {

console.log("The button was clicked!");

});

32.What are object initializers? Provide a proper example.

Object initializers in JavaScript are a way to create objects without using a constructor
function. They are a comma-delimited list of property names and associated values, enclosed
in curly braces ({}).

Eg:

const myObject = {

name: "Bard",

age: 30,};
4m:

1. List and explain some of the most commonly used (X)HTML elements.

<html> and </html> tags: These tags define the beginning and end of an
HTML document.

2. <head> and </head> tags: These tags define the head of an HTML document,
which contains metadata about the document, such as the title, the author,
and the keywords.
3. <title> and </title> tags: These tags define the title of an HTML document.
4. <body> and </body> tags: These tags define the body of an HTML document,
which contains the visible content of the page.
5. <h1> to <h6> tags: These tags define headings of different levels, with <h1>
being the most important and <h6> being the least important.
6. <p> tag: This tag defines a paragraph of text.
7. <b> and </b> tags: These tags define bold text.
8. <i> and </i> tags: These tags define italic text.
9. <a> tag: This tag defines a link to another web page or document.
10. <img> tag: This tag defines an image on a web page.
11. <ul> and </ul> tags: These tags define an unordered list.
12. <ol> and </ol> tags: These tags define an ordered list.

2. Explain HTML AND XHTML DTD specifications with example.

HTML (Hypertext Markup Language) and XHTML (Extensible Hypertext Markup Language) are
markup languages used for creating web pages. Both HTML and XHTML have Document Type
Definitions (DTD) that define the structure, elements, and syntax rules for valid documents.
Let's explain each specification and provide an example:

1. HTML DTD:

HTML DTD specifies the rules and structure for HTML documents. There are different
versions of HTML, and each version has its own DTD. For example, in HTML5, the HTML DTD
declaration is not required, as HTML5 follows a different syntax.

Eg:
<html>
<head>
<title>My HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example HTML page.</p>
</body>

</html>

In this example, the `<!DOCTYPE html>` declaration informs the browser that the document
is written in HTML5. The rest of the document follows the rules and structure defined by the
HTML5 specification.

2. XHTML DTD:

 XHTML is a stricter and more well-formed version of HTML. It follows the rules of
XML, which means it requires elements to be properly nested and closed. XHTML
documents must conform to a specific DTD, indicating the XHTML version being
used.XHTML stands for EXtensible HyperText Markup Language
 XHTML is a stricter, more XML-based version of HTML
 XHTML is HTML defined as an XML application
 XHTML is supported by all major browsers

eg:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>My XHTML Page</title>

</head>

<body>

<h1>Hello, World!</h1>

<p>This is an example XHTML page.</p>

</body>
</html>

In this example, the `<!DOCTYPE>` declaration specifies the DTD for XHTML 1.0 Strict. The
`xmlns` attribute in the `<html>` tag indicates that the document follows the XHTML
namespace. The rest of the document adheres to the XHTML 1.0 Strict rules, including the
proper closing of tags and strict syntax.

3.Explain the HTML document structure with the help of a diagram.

 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content

4. Explain all possible elements inside HTML document head

 <title> element: This element defines the title of the document. It is displayed
in the title bar of the browser.
 <meta> element: This element is used to define metadata about the
document, such as the author, the keywords, and the description.
 <link> element: This element is used to link to external resources, such as
style sheets and favicons.
 <script> element: This element is used to embed JavaScript code in the
document.
  <noscript> element: This element is used to provide alternative content for
browsers that do not support JavaScript.
 <base> element: This element defines the base URL for the document. This is
used to resolve relative links in the document.
 <style> element: This element is used to define style information for the
document.

The <head> element is a container for all of these elements. It is important to note
that the <title> element is the only required element in the head. The other elements
are optional, but they can be useful for providing additional information about the
document.

Eg:

<head>

<title>My HTML Document</title>

<meta charset="utf-8">

<meta name="author" content="John Doe">

<meta name="keywords" content="HTML, XHTML, tutorial">

<meta name="description" content="This is a tutorial on HTML and XHTML.">

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

<script src="script.js"></script>

<noscript>

This page requires JavaScript to be enabled.

</noscript>

</head>

5. Explain (X)HTML rules.

 Elements must be properly nested. This means that each element must be
enclosed within another element, and so on. For example, a <p> element must
be enclosed within a <body> element.
 Element names must be in lowercase. This is a requirement of the XML
specification, which XHTML is based on.
 Attribute names must be in lowercase. This is also a requirement of the XML
specification.
 Attribute values must be enclosed in quotes. This is done to protect the value
from being misinterpreted by the browser.
 Attribute minimization is not allowed. This means that you cannot omit the
value of an attribute if the value is the default value.
 Empty elements must be closed. This means that empty elements must have
a closing tag, even though the closing tag does not contain any content.
 Whitespace is significant. This means that whitespace characters, such as
spaces and tabs, can affect the meaning of the document.
 Documents must be well-formed. This means that the document must follow
the rules of the XML specification.

6.Explain HTML5 structural elements

 <header> element: This element represents the header of a web page. It is

typically used to contain the page title, navigation links, and other important
information.
 <footer> element: This element represents the footer of a web page. It is
typically used to contain copyright information, contact information, and other
legal information.
 <main> element: This element represents the main content of a web page. It
is typically used to contain the page's main content, such as articles, blog
posts, or product listings.
 <article> element: This element represents a self-contained piece of content,
such as an article, blog post, or news story.
 <section> element: This element represents a section of content that is
related to the main content of the page.
 <nav> : The <nav> element is used to define a section of navigation links, such as
a menu or a list of links that allow users to navigate through different parts of
the website or to external pages.
1. <aside> : The <aside> element represents content that is tangentially related to
the main content of the page. It often appears as a sidebar or a separate block
and can contain related links, advertisements, author information, or other
supplementary content.
1. <figure> and <figcaption> : These elements are used together to encapsulate
and provide captions for multimedia content, such as images, videos,
illustrations, or diagrams. The <figure> element represents the content, while
the <figcaption> element provides the caption or description.
7.Explain new HTML5 form fields.

HTML5 introduced several new form fields that provide enhanced functionality and input
options for user interaction. These new form fields offer improved validation, input types, and
options for gathering user data. Here are some of the notable new HTML5 form fields:

1. `<input type="color">`: This input field allows users to select a color using a color picker
interface. The selected color is represented as a hexadecimal value.

2. `<input type="date">`: This field provides a date input control, typically presented as a
calendar picker, allowing users to select a specific date.

3. `<input type="datetime-local">`: Similar to the `date` input, this field allows users to select
a date and time together.

4. `<input type="email">`: This field is specifically designed for email input, validating that the
entered value follows the correct email format.

5. `<input type="number">`: This input field restricts input to numeric values. It may include
options such as minimum and maximum values, step size, and validation for numerical input.

6. `<input type="range">`: This field represents a slider control, enabling users to select a
value from a predefined range by dragging a slider handle.

7. `<input type="search">`: This input field is specifically designed for search queries. It often
provides additional styling and behavior, such as displaying a search icon or providing search
suggestions.

8. `<input type="tel">`: This field is used for telephone number input, often triggering mobile
devices' numeric keyboards for easier input.

9. `<input type="url">`: This field validates that the entered value follows a valid URL format,
ensuring that users provide a correct website address.

10. `<input type="file">`: This field allows users to select and upload files from their device. It
enables file selection through a file picker dialog.

8. Write a short note on <!DOCTYPE> element

The `<!DOCTYPE>` element is an essential component of an HTML

document. It is used to declare the Document Type Definition (DTD) or
Document Type Declaration, which specifies the version of HTML or XHTML
being used and the rules the document must adhere to. The `<!DOCTYPE>`
declaration is placed at the very beginning of an HTML document, before the
`<html>` tag.

The primary purpose of the `<!DOCTYPE>` element is to inform web

browsers and other parsers about the type of markup language used in the
document. It helps browsers understand how to interpret and render the
HTML code correctly, ensuring consistent rendering across different platforms
and browsers.

The `<!DOCTYPE>` declaration follows a specific syntax and includes the

following components:

1. `<!DOCTYPE>`: This is the opening tag of the declaration.

2. Document Type Name: It specifies the type of document being used, such
as HTML or XHTML. For HTML5, the `DOCTYPE` declaration is simply
`<!DOCTYPE html>`.

3. DTD Identifier: The DTD identifier is an optional attribute that provides the
URL or reference to the Document Type Definition. It describes the rules and
structure of the markup language being used. In HTML5, the DTD is not
required, and the declaration does not include a reference to an external
DTD.

The basic syntax of an HTML5 `<!DOCTYPE>` declaration is as follows:

```html

<!DOCTYPE html>

```

This declaration is used in HTML5 documents to indicate that the document is

written in HTML5 markup. It triggers standards mode in modern browsers,
ensuring the document is interpreted according to the HTML5 specifications.

In summary, the `<!DOCTYPE>` element is a crucial part of an HTML

document as it sets the document's type and informs browsers how to handle
and interpret the markup correctly. Using the appropriate `<!DOCTYPE>`
declaration is important for ensuring proper rendering and compatibility
across different browsers and devices.

9.What is the use of <a> tag? Mention any 5 element specific

attributes

The <a> tag defines a hyperlink, which is used to link from one page to
another.
 The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red

Attribute Value Description

download filename Specifies that the target will be downloaded

when a user clicks on the hyperlink

href URL Specifies the URL of the page the link goes
to

hreflang language_code Specifies the language of the linked

document

media media_query Specifies what media/device the linked

document is optimized for

target _blank Specifies where to open the linked

_parent document
_self
_top

type media_type Specifies the media type of the linked

document

10. Explain the use of <article> element of HTML5 with any five
unique attributes.

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to

distribute it independently from the rest of the site.

Potential sources for the <article> element:

 Forum post
 Blog post
 News story
  id : The id attribute is used to provide a unique identifier for the <article>
element. It can be used to reference the specific article within the
document or to target the element with CSS or JavaScript.
Example: <article id="article1">...</article>
 class: The class attribute allows you to assign one or more CSS classes
to the <article> element. It is useful for styling and applying specific
styles to multiple articles with the same class.
Example: <article class="blog-post">...</article>
 title: The title attribute provides additional information or a descriptive
title for the <article> element. It can be displayed as a tooltip when the
user hovers over the element.
Example: <article title="Introduction to HTML5">...</article>
 lang : The lang attribute specifies the language of the content within the
<article> element. It helps screen readers and search engines
understand the language and assist in proper language-specific
rendering.
Example: <article lang="en">...</article>
 datetime: The datetime attribute specifies the date and time of the
publication or the most recent modification of the <article> content. It
follows the ISO 8601 format, allowing machines to process and
interpret the date/time information.
Example: <article datetime="2023-06-23T10:15:00Z">...</article>

11. Write a short note on <aside> with any of its 5 unique attributes.

The <aside> tag defines some content aside from the content it is placed in.

The aside content should be indirectly related to the surrounding content.

Tip: The <aside> content is often placed as a sidebar in a document

1. class : The class attribute allows you to assign one or more CSS classes to the
<aside> element. It is useful for styling and applying specific styles to multiple
<aside> elements with the same class.
Example: <aside class="sidebar">...</aside>
2. id : The id attribute is used to provide a unique identifier for the <aside>
element. It can be used to reference the specific <aside> within the document
or to target the element with CSS or JavaScript.
Example: <aside id="related-links">...</aside>
3. role : The role attribute specifies the role or purpose of the <aside> element in
the document. It helps assistive technologies and screen readers understand
the function of the element.
Example: <aside role="complementary">...</aside>
4. aria-label : The aria-label attribute provides a text label to describe the
<aside> element for accessibility purposes. It is used when the element's
purpose is not adequately conveyed by its content or other attributes.
 Example: <aside aria-label="Author Information">...</aside>
5. hidden : The hidden attribute is used to indicate that the <aside> element should
be initially hidden or not displayed. It is often used in conjunction with
JavaScript to control the visibility of the element dynamically.
Example: <aside hidden>...</aside>

12. Explain any 4/6 unique element specific attributes of <body> tag

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.

1. onload : The onload attribute specifies a JavaScript code that should be executed
when the webpage or document finishes loading in the browser. It is
commonly used to trigger certain actions or functions after the page has been
fully loaded.
Example: <body onload="myFunction()">...</body>
2. onunload : The onunload attribute specifies a JavaScript code that should be
executed when the user navigates away from the webpage or closes the
browser window. It is used to perform actions or cleanup tasks before the
page is unloaded.
Example: <body onunload="cleanup()">...</body>
3. onresize : The onresize attribute specifies a JavaScript code that should be
executed when the browser window is resized. It is often used to handle
dynamic layout adjustments or responsive behavior based on the window size.
Example: <body onresize="adjustLayout()">...</body>
4. scroll : The scroll attribute specifies the scroll behavior of the webpage. It can
take values such as yes , no, or auto to control whether scrollbars are displayed
or how they behave when content exceeds the visible area.
Example: <body scroll="no">...</body>

 alink : The alink attribute specifies the color of active links in the body
element.
 vlink : The vlink attribute specifies the color of visited links in the body
element.

 bgcolor : The bgcolor attribute specifies the background color of the body
element.

13. Explain any 4/6 unique element specific attributes of <button>

tag
Attribute Value Description

autofocus autofocus Specifies that a button should

automatically get focus when the
page loads

disabled disabled Specifies that a button should be

disabled

form form_id Specifies which form the button

belongs to

formaction URL Specifies where to send the form-

data when a form is submitted.
Only for type="submit"

name name Specifies a name for the button

type button Specifies the type of button

reset
submit

value text Specifies an initial value for the button

The <button> tag defines a clickable button.

Inside a <button> element you can put text (and tags

like <i>, <b>, <strong>, <br>, <img>, etc.).

14.Explain any 4/6 unique element specific attributes of <font> tag.

The tag is an outdated and deprecated HTML tag that was used to specify font styles, colors,
and sizes for text

 face : The face attribute can specify a single font family, or a comma-
separated list of font families. The browser will try to find the first font family in
the list that is installed on the user's computer.
  size : The size attribute can specify the size of the text in pixels, or in relative
terms. For example, a size of 16 is equivalent to 16 pixels, and a size of +1 is
equivalent to one size larger than the default size.
 color : The color attribute can specify the color of the text in hexadecimal
format. For example, a color of #ff0000 is equivalent to red.
 style : The style attribute can be used to specify the style of the text, such
as bold, italic, or underline.

 id : The id attribute is used to uniquely identify the font element.

 class : The class attribute is used to group font elements together.

15. What is <form> tag? Write any of its 5 element specificattributes

The <form> tag is used to create an HTML form for user input.

Attribute Value Description

accept- character_set Specifies the character encodings that are to be used for the
charset form submission

action URL Specifies where to send the form-data when a form is submitted

autocomplete on Specifies whether a form should have autocomplete on or off

off

method get Specifies the HTTP method to use when sending form-data
post

name text Specifies the name of a form

novalidate novalidate Specifies that the form should not be validated when submitted

target _blank Specifies where to display the response that is received after
_self submitting the form
_parent
_top

16. Write a note <hr> tag with all of its element-specific attributes.

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

The <hr> element is most often displayed as a horizontal rule that is used to
separate content (or define a change) in an HTML page.

 align : The align attribute specifies the alignment of the horizontal rule. The
possible values are left, center, right, and justify.
  noshade : The noshade attribute specifies that the horizontal rule should not
have a shading effect.
 size : The size attribute specifies the height of the horizontal rule in pixels.

1. width : The width attribute specifies the width of the horizontal rule in pixels or
as a percentage of the page width
2. . color : The color attribute specifies the color of the horizontal rule. It can be
set to a named color (e.g., "red") or a hexadecimal color value.

Eg:<hr color="red" size="2" width="50%" align="center" noshade>

17. Write the four element specific attributes of <html> element with their
purpose.

Attribute Description Purpose

This is used to specify the language of the document, so that

lang
Specifies the language
the browser can correctly display the text and other elements
of the document.
of the document.

This is used to specify the direction of the text in the

dir
Specifies the direction document, so that the browser can correctly display the text.
of the text. The possible values are ltr (left to right) and rtl (right to
left).

Specifies the version of This is used to specify the version of HTML used in the
version HTML used in the document, so that the browser can correctly interpret the
document. document.

Specifies the
xmlns
This is used to specify the namespace of the document, so
namespace of the
that the browser can correctly interpret the document.
document.

Eg: <html lang="en" dir="ltr"

version="HTML5"xmlns="http://www.w3.org/1999/xhtml">
...
</html>
 18. Explain the <iframe> element with it element specific attributes

The <iframe> tag specifies an inline frame.An inline frame is used to embed
another document within the current HTML document.

Attribute Value Description

allow Specifies a feature policy for the <iframe>

allowfullscreen true Set to true if the <iframe> can activate fullscreen mode by calling the
false requestFullscreen() method

height pixels Specifies the height of an <iframe>. Default height is 150 pixels

name text Specifies the name of an <iframe>

src URL Specifies the address of the document to embed in the <iframe>

srcdoc HTML_code Specifies the HTML content of the page to show in the <iframe>

width pixels Specifies the width of an <iframe>. Default width is 300 pixels

19. Explain <img> tag with its element specific attributes

The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to
web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image, if the image for some
reason cannot be displayed

Attribute Value Description

alt text Specifies an alternate text for an image

height pixels Specifies the height of an image

ismap ismap Specifies an image as a server-side image map

sizes sizes Specifies image sizes for different page layouts

src URL Specifies the path to the image

srcset URL-list Specifies a list of image files to use in different situations

usemap #mapname Specifies an image as a client-side image map

width pixels Specifies the width of an image

20. Explain <input> tag with its element specific attributes

The <input> tag specifies an input field where the user can enter
data.The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type
attribute.

value text Specifies the value of an <input> element

width pixels Specifies the width of an <input> element (only for type="image")

size number Specifies the width, in characters, of an <input> element

src URL Specifies the URL of the image to use as a submit button

height pixels Specifies the height of an <input> element

max number Specifies the maximum value for an <input> element

date

maxlength number Specifies the maximum number of characters allowed in an <input> element

min number Specifies a minimum value for an <input> element

date

minlength number Specifies the minimum number of characters required in an <input> element

21. Explain <li> tag with its attributes.

The <li> tag defines a list item.

The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in
menu lists (<menu>).The `<li>` tag is an HTML element used to create a list
item within an ordered (`<ol>`) or unordered (`<ul>`) list. It stands for "list
item." The `<li>` tag must always be nested inside an `<ol>` or `<ul>` element.

Here is an example of an unordered list using the `<li>` tag:

```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
```
The `<li>` tag can have the following attributes:
1. **value**: This attribute is used in ordered lists (`<ol>`) to specify the value
of the list item. By default, the value is automatically assigned based on the
item's position within the list, but you can override it by setting the `value`
attribute. For example:
```html
<ol>
<li value="100">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
```
2. **type**: This attribute is used in ordered lists (`<ol>`) to specify the type of
the list marker. The default type is decimal numbers, but you can use different
types such as alphabetical letters (`A`, `B`, `C`), uppercase Roman numerals (`I`,
`II`, `III`), or lowercase Roman numerals (`i`, `ii`, `iii`). For example:
```html
<ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
```
3. **start**: This attribute is used in ordered lists (`<ol>`) to specify the starting
value of the list. By default, the list starts from 1, but you can set a different
starting value using the `start` attribute. For example:
```html
<ol start="5">
<li>Item 1</li>
<li>Item 2</li>
 <li>Item 3</li>
</ol>
22. Explain the use of <link> tag with its attributes

The <link> tag defines the relationship between the current document and an
external resource.

The <link> tag is most often used to link to external style sheets or to add
a favicon to your website.

The <link> element is an empty element, it contains attributes only.

sizes HeightxWidth Specifies the size of the linked resource. Only for rel="icon"
any

title Defines a preferred or an alternate stylesheet

type media_type Specifies the media type of the linked document

href URL Specifies the location of the linked document

hreflang language_code Specifies the language of the text in the linked document

media media_query Specifies on what device the linked document will be displayed

23. Explain the use of <marquee> tag with 4 of its element specific attributes.

The Marquee HTML tag is a non-standard HTML element which is used to scroll a
image or text horizontally or vertically.

In simple words, you can say that it scrolls the image or text up, down, left or right
automatically

width defines width of marquee in pixels or %.

height defines height of marquee in pixels or %.

hspace defines horizontal space in pixels around the marquee.

 vspace defines vertical space in pixels around the marquee.

direction defines direction for scrolling content. It may be left, right, up and down.

scrolldelay defines scroll delay in seconds.

scrollamount defines scroll amount in number.

loop defines loop for marquee content in number.

24. What is the use of <ol> ordered list? Explain with attributes.

The <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical.

The <li> tag is used to define each list item.

reversed reversed Specifies that the list order should be reversed (9,8,7...)

start number Specifies the start value of an ordered list

type 1 Specifies the kind of marker to use in the list

A
a
I
i

25. Explain what is the use of <script> tag? Explain its 6 element specific
attribute.
The <script> tag is used to embed a client-side script (JavaScript).

The <script> element either contains scripting statements, or it points to an

external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and
dynamic changes of content

src It specifies the URL of an external script file.

 type It specifies the media type of the script.

async It is a boolean value which specifies that the script is executed asynchronously.

defer It is a boolean value which is used to indicate that script is executed after
document has been parsed.

nomodule Specifies that the script should not be executed in browsers

supporting ES2015 modules

26. Explain with attributes the <select> tag.

The <select> element is used to create a drop-down list

the <select> element is most often used in a form, to collect user

input.The name attribute is needed to reference the form data after the form is

disabled disabled Specifies that a drop-down list should be disabled

form form_id Defines which form the drop-down list belongs to

multiple multiple Specifies that multiple options can be selected at once

name name Defines a name for the drop-down list

required required Specifies that the user is required to select a value before submitting the form

size number Defines the number of visible options in a drop-down list

27. Explain <style> tag with its element-specific attributes

The <style> tag is used to define style information (CSS) for a document.

Inside the <style> element you specify how HTML elements should render in a

.1. type: The type attribute specifies the type of stylesheet language being
used within the <style> block. The most commonly used value is "text/css",
which indicates that the styles are written in CSS.
Example: <style type="text/css">...</style>

2. media: The media attribute is used to specify the target media or device
for which the styles defined within the <style> tag are intended. It allows
you to define different styles for different devices, such as screen, print, or
handheld.

Example: <style media="screen">...</style>

3. title: The title attribute is used to provide a title or description for the
<style>block. It helps to provide additional information about the purpose or
context of the styles defined within the <style> tag.

Example: <style title="Page Styles">...</style>

4. lang: Specifies the language of the styles being defined.

Example: <style lang="en">...</style>

28. Explain <table> tag with any five element specific attributes.

The <table> tag defines an HTML table.

An HTML table consists of one <table> element and one or more <tr>, <th>,
and <td> elements.

The <tr> element defines a table row, the <th> element defines a table
header, and the <td> element defines a table cell.

border: The border attribute specifies the width of the border around the table
and its cells. It defines the visual appearance of the table border.
Example: <table border="1">...</table>
bgcolor: The bgcolor attribute sets the background color for the entire table. It
allows you to customize the background color of the table.
Example: <table bgcolor="#f2f2f2">...</table>
width: The width attribute sets the width of the table. It can be specified in
pixels (px), percentage (%), or other valid CSS length units.
Example: <table width="500">...</table>
cellspacing: The cellspacing attribute defines the space between adjacent cells
in the table. It helps in controlling the spacing and visual separation between
cells.
Example: <table cellspacing="5">...</table>
cellpadding: The cellpadding attribute sets the space between the cell content
and the cell border. It adds padding inside the cells to create spacing around
the content.
Example: <table cellpadding="10">...</table>
summary: The summary attribute provides a brief description or summary of
the table's content. It is useful for accessibility purposes and can be read by
screen readers to provide additional context.
Example: <table summary="Sales data for the year">...</table>
29. Describe <time> element with its datetime attribute.
The element in HTML is used to represent a specific date and/or time on a webpage.
It helps provide semantic meaning to the date or time information and allows
browsers, search engines, and assistive technologies to understand and handle it
appropriately. The datetime attribute is a crucial attribute of the element that specifies
the date and time value associated with the content inside the element.

The basic date format is

YYYY-MM-DDThh:mm:ssTZD
where the following is true:
YYYY=four-digit year such as 1999
MM=two-digit month (01=January, 02=February, and so on.)
DD=two-digit day of the month (01 through 31)
hh=two-digit hour (00 to 23) (24-hour clock, not AM or PM)
mm=two-digit minute (00 through 59)
ss=two-digit second (00 through 59)
TZD=time zone designator
Example :

Published on June 15, 2023

In the example above, the element is used to display the publication date of an article. The
datetime attribute is set to "2023-06-15T09:30:00", representing the specific date and time
the article was published. The content within the element, in this case, is the human-readable
format of the date, which is "June 15, 2023
30. Describe <video>element with its attributes.

The <video> tag is used to embed video content in a document, such as a

movie clip or other video streams.

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

controls It defines the video controls which is displayed with play/pause buttons.

height It is used to set the height of the video player.

width It is used to set the width of the video player.

loop It specifies that the video file will start over again, every time when it is completed.

muted It is used to mute the video output.

preload It specifies the author view to upload video file when the page loads.

src It specifies the source URL of the video file.

31. Write a note on JavaScript with its features.

JavaScript (js) is a light-weight object-oriented programming language which is used by
several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when applied to an HTML
document. Our JavaScript Tutorial is designed for beginners and professionals both.
JavaScript is used to create client-side dynamic pages.

There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution
environments.
2. JavaScript follows the syntax and structure of the C programming language.
Thus, it is a structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
4. JavaScript is an object-oriented programming language that uses prototypes
rather than using classes for inheritance.
5. It is a light-weighted and interpreted language.
 6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows,
macOS, etc.
8. It provides good control to the users over the web browsers.

32. List and Explain different data types available in JavaScript.

JavaScript provides different data types to hold different types of values. There are
two types of data types in JavaScript.

1. Primitive data type

2. Non-primitive (reference) data type

there are five types of primitive data types in JavaScript. They are as follows:

Data Type Description

String represents sequence of characters e.g. "hello"

Number represents numeric values e.g. 100

Boolean represents boolean value either false or true

Undefined represents undefined value eg: let car;

Null represents null i.e. no value at all

Non primitive:

Data Type Description

Object represents instance through which we can access members

Array represents group of similar values

RegExp represents regular expression

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";
// Booleans
let x = true;
let y = false;
let preson=null;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25");

33. Explain how to define a JavaScript function with proper example.

In JavaScript, a function is a reusable block of code that performs a specific task
or calculation. Functions allow you to organize your code, improve code
reusability, and create modular and maintainable applications.
Here's the syntax for defining a JavaScript function:
function functionName(parameter1, parameter2, ...) {
// Code block or statements to be executed
// Optional: Return statement to return a value
}
● function: This is the keyword used to declare a function.
● functionName: This is the name you choose for your function. It should be a
valid identifier and follow JavaScript naming conventions.
● parameter1, parameter2,...: These are the parameters (or arguments) that
the function accepts. You can have zero or more parameters, separated by
commas.These parameters act as placeholders for values that will be passed
into the function when it's called.
● {}: These curly braces enclose the function body, which contains the code or
statements that will be executed when the function is called.
● // Code block or statements: This is where you write the actual code that
defines the behaviour of the function. It can include any valid JavaScript
statements,expressions, or function calls.
● // Optional: Return statement: If the function needs to return a value, you
can use the return statement followed by the value to be returned. This
terminates the function execution and sends the specified value back to the
caller.
Here's an example that demonstrates the eg:
function addNumbers(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = addNumbers(5, 3);
console.log(result); // Output: 8
34. Explain the following with respect to JavaScript: i) function declaration
ii) function constructor iii) function expression.
i) **Function Declaration** in JavaScript is a way to define a function with a
specific name and a block of code that will be executed when the function is
called. It follows the syntax:
function functionName(parameters) {
// Function code
}
Here's an example of a function declaration:
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("John"); // Output: Hello, John!
ii) **Function Constructor** is a way to create functions dynamically using the
`Function` constructor in JavaScript. It takes parameters as strings (representing
the function arguments) and a string representing the function body. The
syntax is as follows:
var functionName = new Function(arg1, arg2, ..., functionBody);
Here's an example of a function created using the `Function` constructor:
var add = new Function("a", "b", "return a + b;");
iii) **Function Expression** in JavaScript involves assigning a function to a
variable or property of an object. It allows functions to be treated as values and
provides flexibility in their usage. The syntax for a function expression is as
follows:
var functionName = function(parameters) {
// Function code
};
Eg:
var greet = function(name) {
console.log("Hello, " + name + "!");
};
greet("John"); // Output: Hello, John!
35. Explain how to use event handlers in JavaScript with example
In JavaScript, event handlers are used to respond to specific events that occur
in the browser, such as user interactions (clicking a button, submitting a form,
hovering over an element, etc.). Event handlers allow you to execute JavaScript
code when these events are triggered.
Syntax:
element.addEventListener(eventname, listener, [options]);
eg:
<!DOCTYPE html>
<html>
<head>
 <title>Event Handler Example</title>
<script>
function handleClick() {
alert("Button clicked!");
}
</script>
</head>
<body>
<button onclick="handleClick()">Click Me</button>
</body>
</html>
36. Explain the addEventListener() method with an example.
The addEventListener() method in JavaScript is used to attach an event listener
to an HTML element. It enables you to specify a function that will be executed
when a specific event occurs on the element. The addEventListener() method
provides greater flexibility compared to inline event handlers and allows for
attaching multiple event handlers to the same element.
Syntax: element.addEventListener(event, function, useCapture);
Eg: <!DOCTYPE html>
<html>
<head>
<title>addEventListener Example</title>
<script>
function handleClick() {
alert("Button clicked!");
}
window.addEventListener("load", function() {
 var button = document.getElementById("myButton");
button.addEventListener("click", handleClick);
});
</script>
</head>
<body>
<button id="myButton">Click Me</button>
</body>
</html>
37. What is a constructor function? Explain with example.
In JavaScript, a constructor function is a special type of function that is used to
create and initialize objects. It serves as a blueprint or template for creating
multiple objects of the same type, often referred to as instances.
function ClassName(parameter1, parameter2, ...) {
// Properties and methods
}
Eg: function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log("Hello, my name is " + this.name + " and I am " + this.age + "
years old.");
};
}
var person1 = new Person("John", 30);
var person2 = new Person("Jane", 25);
person1.sayHello(); // Output: Hello, my name is John and I am 30 years old.
person2.sayHello(); // Output: Hello, my name is Jane and I am 25 years old.
38. Briefly describe alert() and confirm() methods of JavaScript.
1. **alert()**: The `alert()` method displays a simple message in a pop-up
dialog box, commonly known as an alert box. It is primarily used to provide
information to the user. The syntax is as follows:
Syntax: alert(message);
The `message` parameter represents the text that will be displayed in the
alert box. Here's an example:
Eg: alert("Hello, World!");
2. **confirm()**: The `confirm()` method is used to display a pop-up dialog box
with a message and two buttons: OK and Cancel. It prompts the user to confirm
or cancel an action and returns a Boolean value indicating the user's choice.
The syntax is as follows:
confirm(message);
The `message` parameter represents the text that will be displayed in the
confirm box. Here's an example:
var result = confirm("Are you sure you want to delete this item?");
eg: var result = confirm("Are you sure you want to delete this item?");
if (result) {
// Code to delete the item
} else {
// Code to handle cancellation
}
39. Explain prompt() method with example.
prompt() : The prompt() method displays a dialog box that prompts the user to
enter some input. It takes two parameters: the first one is the message you
want to display, and the second one is an optional default value for the input
field. The function returns the user's input as a string if the OK button is clicked,
or null if the Cancel button is clicked.
Syntax: prompt(message, defaultValue);
Example : var name = prompt("Please enter your name:", "John Doe");
if (name !== null) {
console.log("Hello, " + name + "!");