UNIT - 1

1. Difference between Internet and WWW.

Sr.
INTERNET WWW
No.
1 Internet is a global network of networks. WWW stands for World wide Web.
Internet is a means of connecting a World Wide Web which is a collection of
2 computer to any other computer information which is accessed via the
anywherein the world. Internet.
WWW is service on top of tha
3 Internet is infrastructure.
infrastructure. t
Web can be viewed as collection of books
4 Internet can be viewed as a big book-
on that store.
store.
At some advanced level, to understand At some advanced level, to understand
5
wecan think of the Internet as hardware. wecan think of the WWW as software.
WWW is more software-oriented as
6 Internet is primarily hardware-based.
compared to the Internet.
English scientist Tim Berners-Lee
7 It is originated sometimes in late 1960s.
invented the World Wide Web in 1989.
8 Internet is superset of WWW. WWW is a subset of the Internet.
The first version of the Internet was In the beginning WWW was known as
9
knownas ARPANET. NSFNET.
10 Internet uses IP address. WWW uses HTTP.

2. What is purpose of HTTP?

Hypertext Transfer Protocol (HTTP) is a method for encoding and transporting information
between a client (such as a web browser) and a web server. HTTP is the primary protocol for
transmission of information across the Internet.

Information is exchanged between clients and servers in the form of Hypertext documents,
from which HTTP gets its name. Hypertext is structured text that uses logical links,
or hyperlinks, between nodes containing text. Hypertext documents can be manipulated using
the Hypertext Markup Language (HTML). Using HTTP and HTML, clients can request different
kinds of content (such as text, images, video, and application data) from web and application
servers that host the content.

HTTP also includes several features that are essential for web communication, including:
 1. Stateless communication: HTTP is a stateless protocol, which means that each request
is independent of the previous requests. This simplifies server design and makes it
easier to scale web applications.

2. Caching: HTTP allows clients to cache responses from servers, reducing the amount of
data that needs to be transferred over the network and improving performance.

3. Compression: HTTP supports compression of data, which reduces the size of messages
sent between clients and servers and improves performance on slow network
connections.

4. Authentication and authorization: HTTP includes mechanisms for authenticating and

authorizing users, allowing web applications to restrict access to sensitive resources.

HTTP follows a request-response paradigm in which the client makes a request and the server
issues a response that includes not only the requested content, but also relevant status
information about the request. This self-contained design allows for the distributed nature of
the Internet, where a request or response might pass through many intermediate routers and
proxy servers. It also allows intermediary servers to perform value-added functions such as load
balancing, caching, encryption, and compression.

HTTP is an application-layer protocol and relies on an underlying network-layer protocol such as

Transmission Control Protocol (TCP) to function.

HTTP resources such as web servers are identified across the Internet using unique identifiers
known as Uniform Resource Locators (URLs).
3. Describe the steps involved when a web browser requests for and obtains a web page from
a web server.

Here are the steps involved when a web browser requests for and obtains a web page from a
web server:

1. The user types in the URL of the desired webpage into the address bar of the web
browser.

2. The browser sends a request to the Domain Name System (DNS) server to resolve the
domain name of the URL into an IP address of the web server.

3. The browser opens a connection to the web server using the IP address obtained in step
2 and sends a request for the webpage.

4. The web server receives the request and checks whether the requested file is available.

5. If the file is available, the web server sends the requested webpage as a response to the
browser. If the file is not available, the web server returns an error message.

6. The browser receives the response and begins to render the webpage.

7. As the browser receives the HTML content, it parses the content and sends additional
requests to the server for any additional resources required by the page, such as
images, stylesheets, or JavaScript files.

8. The server responds to these additional requests by sending the requested resources to
the browser.

9. The browser renders the page with all the resources and displays it to the user.

10. The connection between the browser and the server is closed, and the browser is ready
to receive and render additional webpages.
4. Explain HTTP Protocol Request and Response architecture.

The following diagram shows a very basic architecture of a web application and depicts where
HTTP sits:

The HTTP protocol is a request/response protocol based on the client/server based architecture
where web browsers, robots and search engines, etc. act like HTTP clients, and the Web server
acts as a server.

Client

The HTTP client sends a request to the server in the form of a request method, URI, and protocol
version, followed by a MIME-like message containing request modifiers, client information, and
possible body content over a TCP/IP connection.
Server

The HTTP server responds with a status line, including the message's protocol version and a
success or error code, followed by a MIME-like message containing server information, entity
meta information, and possible entity-body content.

5. Why is HTTP called a stateless protocol? Why is it so?

HTTP, which stands for Hypertext Transfer Protocol, is called a stateless protocol because it
does not maintain any information or state about the communication between the client (web
browser) and the server between requests. In other words, each request and response
between the client and server is treated as an independent transaction, and the server does not
remember any information about previous requests from the same client.

This design decision was made to keep the communication between the client and server as
simple and efficient as possible. If the server had to maintain information about the client
between requests, it would require additional resources and complexity, which could slow
down the communication and decrease the overall performance of the system.

HTTP is considered a stateless protocol is that it does not maintain any information about the
user's previous interactions with the web application. When a user sends a request to a server,
the server processes the request and sends a response back to the user, but it does not keep any
information about the user's previous requests or sessions. This means that the server does not
remember any user-specific information or context, and each request is treated as a new,
independent request.

HTTP is connectionless: The HTTP client, i.e., a browser initiates an HTTP request and after a
request is made, the client waits for the response. The server processes the request and sends a
response back after which client disconnect the connection. So client and server knows about
each other during current request and response only. Further requests are made on new
connection like client and server are new to each other.

HTTP is stateless: As mentioned above, HTTP is connectionless and it is a direct result of HTTP
being a stateless protocol. The server and client are aware of each other only during a current
request. Afterwards, both of them forget about each other. Due to this nature of the protocol,
neither the client nor the browser can retain information between different requests across the
web pages.

6. Discuss any three HTTP commands.

HTTP (Hypertext Transfer Protocol) commands, also known as HTTP methods, are used to
communicate between web clients, such as web browsers, and web servers. These commands
define the types of actions that a client can perform on a server and the types of responses that
the server can send back. There are several HTTP commands, including:
 1. GET: The GET method is used to retrieve a resource from a server. When a client sends a
GET request, it includes the URL of the resource it wants to retrieve. The server then
responds with the requested resource, if available, along with an HTTP status code
indicating whether the request was successful or not.

2. POST: The POST method is used to submit data to a server, such as when filling out a
form or uploading a file. When a client sends a POST request, it includes the data to be
submitted in the request body. The server then processes the data and responds with
an HTTP status code indicating whether the request was successful or not.

3. PUT: The PUT method is used to update an existing resource on the server, such as a file
or document. When a client sends a PUT request, it includes the updated version of the
resource in the request body, along with the URL of the resource to be updated. The
server then updates the resource and responds with an HTTP status code indicating
whether the request was successful or not.

4. DELETE: The DELETE method is used to delete a resource from the server. When a client
sends a DELETE request, it includes the URL of the resource to be deleted. The server
then removes the resource and responds with an HTTP status code indicating whether
the request was successful or not.

5. HEAD: The HEAD method is similar to the GET method, but it only retrieves the headers
of a resource, without retrieving the resource itself. When a client sends a HEAD
request, the server responds with the headers of the requested resource, but without
the body of the resource.

6. PATCH: The PATCH method is used to make partial updates to an existing resource on
the server. When a client sends a PATCH request, it includes the changes to be made in
the request body, along with the URL of the resource to be updated. The server then
updates the resource with the specified changes and responds with an HTTP status code
indicating whether the request was successful or not.

7. OPTIONS: The OPTIONS method is used to retrieve the supported methods, headers,
and other capabilities of a resource. When a client sends an OPTIONS request, the
server responds with a list of the available methods, headers, and other options that can
be used with the requested resource.

7. Define the terms i. Website, ii. Web Page, iii. Web Server, iv. URL and v. Home Page.

1. Website: A website is a collection of web pages that are related to each other and
hosted on a web server. It can be used for various purposes, such as providing
information, selling products, or offering services.

2. Web Page: A web page is a single document or resource that is displayed in a web
browser. It can include text, images, videos, and other types of content. Web pages are
 written using HTML (Hypertext Markup Language) and can be styled using CSS
(Cascading Style Sheets).

3. Web Server: A web server is a software application that runs on a computer and serves
web pages to clients, such as web browsers, in response to their requests. It can be used
to host websites and web applications and can handle multiple requests simultaneously.

4. URL (Uniform Resource Locator): A URL is a string of characters that specifies the
address of a resource on the web, such as a web page or an image. It consists of several
parts, including the protocol (such as HTTP or HTTPS), the domain name, and the path to
the resource.

5. Home Page: A home page is the main or introductory page of a website. It is typically
the first page that visitors see when they access a website and provides an overview of
the site's content and navigation options.

8. What are the different design issues in web development?

Web development involves a wide range of design issues that need to be considered in order to
create effective and user-friendly websites. Here are some of the key design issues in web
development:

1. Browser and Operating Systems

• The different browsers and their versions greatly affect the way a
page is rendered, as differentbrowsers sometimes interpret
same HTML tag in a different way.
• Different versions of HTML also support different sets of tags.
• Same browser may work slightly different on different operating system
and hardware platform.
• To make a web page portable, test it on different browsers on different
operating systems.
• Validate your HTML doc using W3C validator.
2. Bandwidth and Cache:
• Connection speed plays an important role in designing web pages, if
user has low bandwidthconnection and a web page contains too
many images, it takes more time to download.
• Browser provides temporary memory called cache to store the graphics.
• When user gives the URL of the web page for the first time, HTML
file together with all thegraphics files referred in a page is
downloaded and displayed.
3. Display Resolution
• Display resolution always affect in visualization of web site.
• While designing web site, you have to consider possible display
resolutions of your expectedusers’ client.
• As we do not have any control on display resolution of the monitors
on which user views ourpages.
• Display or screen resolution is measured in terms of pixels and
common resolutions are 800 X600 and 1024 x 786. (1204 x 1024)
• We have 3 choices for Web page design.
• Design a web page with fixed resolution.
• Make a flexible design using HTML table to fit into different resolution.
• We can use cantered design to display page properly.

4. Look and Feel

• Look and feel of the website decides the overall appearance of the website.
• It includes all the design aspects such as
• Web site theme
• Presentation
• Graphics
• Visual structure
• Fonts, Graphics, and colors
• Navigationetc...

5. Page Layout andLinking

• Website contains of individual web pages that are linked together
using various navigationallinks.
• Page layout defines the visual structure of the page and divides the
page area into different partsto present the information of varying
importance.
• Page layout allows the designer to distribute the contents on a page
such that visitor can viewit easily and find necessary details.

6. LocatingInformation
• Webpage is viewed on a computer screen and the screen can be
divided into five major areassuch as center, top, right, bottom and
left in this particular order.
• Well-designed websites put
- Left side provide links or menu
- Top is used for logo and title or news
- Right side provide link for other information
- Bottom is used for quick link or copyright message
 6. Making Design User-Centric

• It is very difficult for any Web designer to predict the exact behavior of the Web
site users.
• However, idea of general behavior of common user helps in making design
of the Web site usercentric.
• Users either scan the information on the web page to find the section of
their interest or readthe information to get details.

7. Sitemap
• Many a times Web sites are too complex as there are a large number of
sections and each sectioncontains many pages.
• User gets confused about where he/she 1s and where to go from there.
• Provide the navigation bar on each page to jump directly to a particular section.
• Provide sitemap including links to each section and their page directly.

9. Describe phases of web development in brief.

The phases of web development generally include planning, design, development, testing, and
maintenance. Here is a brief overview of each phase:

1. Planning: This phase involves defining the project goals and requirements, creating a
project plan, and identifying the resources needed to complete the project. This
includes developing a site map, defining the website's target audience, and creating a
content strategy.

2. Design: In this phase, web designers create the visual design of the website. This
includes developing a design concept, creating wireframes and prototypes, and
designing the website's layout, typography, color scheme, and other visual elements.

3. Development: During the development phase, web developers create the website's
functionality and implement the design created in the previous phase. This includes
writing code, integrating third-party tools and platforms, and ensuring that the website
is optimized for performance and security.

4. Testing: In this phase, the website is tested to ensure that it functions as intended and
provides a positive user experience. This includes testing for functionality, usability,
accessibility, and compatibility with different devices and browsers.

5. Maintenance: Once the website has been launched, it enters the maintenance phase.
This involves ongoing updates and improvements to ensure that the website continues
 to function well and remains relevant to its target audience. This includes updating
content, fixing bugs, and implementing new features or functionality as needed.

10. Investigate how you can set up your own website. What are the requirements for the
same?

1. Set your purpose and goals.

• What is the purpose of your website?

• Is it to gain publicity for your business?
• To sell your inventory?
• To rally support behind a cause?
• It’s important to identify your website’s purpose, as well as your target audience.
• You should also define your goals.
• How many visitors do you expect per month?
• How many do you expect will sign up for your newsletter?
• How much in sales do you expect to make?
• Set measurable, specific goals for your website that are in line with your marketing
goals.
• An analytics tool like Google Analytics will allow you to monitor your website’s
performance over time.

2. Create a budget.

• Whether you’re an established, mid-sized organization or a fledgling start-up, you

should always set a budget for your website expenses.
• This will probably include funds for web design, programming, and web hosting

3. Assign roles.

Company stakeholders (owner, marketing manager, or whoever else represents a primary

function of the business)

• Web developer
• Content writer and/or editor
• HTML/CSS professional
• Web and graphic designer

4. Create a content strategy.

 What kind of content will you be displaying on your website? Content is basically anything
that gives your visitors information. It can include, but is not limited to:

• Blog posts
• Documents
• Video
• Pictures (such as in a gallery)
• Slide shows
• Embedded social media feeds (such as your Twitter stream or Facebook page
updates)

5. Structure your website.

• Decide what pages you’ll be using and what features will be on each one.
• Most websites have an About and Contact page, but the pages you use should meet
your business’ needs.

6. Create a mock-up/wireframe

• A page mock-up, also know as a wireframe, is essentially the outline of your website
(with the initial design being the first draft).
• Usually created in Photoshop or Fireworks, you don’t have to put too much detail
into your mock-up.
• Use placeholder text to fill pages, and don’t worry about details.
• This is just to give everyone an idea of what the website will look like.

7. Start designing

• The importance of good web design can’t be stressed enough.

• Good website design includes both usability and aesthetics.
• An ugly website will drive away visitors, as will a website that’s difficult to navigate.
• Keep in mind some basic concepts of usability as you go:
• Make your navigation easy to understand and easy to find.
Research shows that most users expect website navigation to be
vertical and centered at the top of the page.
• Use an easy-to-read font for blocks of text. Choose a background
color and text color that contrast well (Hint: No red text on a hot
pink background).
• Make sure your site fits the screen. Use responsive design (or an
equally effective approach) to make your website one that adapts
to all screen sizes.
 • Keep your website light so that it loads quickly.
• Make the company logo and tag line prominent on the page.
• Keep styles and colors consistent across the website.
• Make copy clear and concise, and put important information and
features (e.g., your newsletter sign-up form) above the fold.

8. Test it out.

• Testing is important for getting out bugs out and catching details that you might have
missed initially.
• Make sure your website shows up the way you want it to in all browsers, including
Chrome, Firefox, Internet Explorer, and mobile web browsers like Safari and Opera Mini.
• Test it on your cell phone, your tablet, and your colleague’s cell phones and tablets too.
• You want your site to have a consistent appearance no matter what screen it shows up
on.
• Make sure all of the links work, that the images are properly sized, and that you’ve
replaced all of the placeholders with actual content.
• See to it that all of the forms and other input fields are working.

9. Maintain your site.

Once your site is launched, the work isn’t over.

• A website is an ongoing entity that continuously represents your company,

so maintenance is very important.
• Monitor your analytics software to see how your website is performing with
the public.
• Keep an eye on metrics like your number of unique visitors, bounce rate, and
which pages are most popular on your website.
• You might find that certain metrics are more useful to you than others, but
that is information you’ll find out over time.

11. Find out major differences between the two web browser- Internet Explorer and Mozilla
Firefox.

There are several differences between the two web browsers Internet Explorer and Mozilla
Firefox, including:

1. User interface: The user interface of Internet Explorer is generally considered to be less
user-friendly and customizable than that of Mozilla Firefox. Firefox allows for a greater
degree of customization and flexibility in terms of toolbars, menus, and other interface
elements.
 2. Speed and performance: In general, Mozilla Firefox is considered to be faster and more
efficient than Internet Explorer. This is partly due to Firefox's use of open source code
and its ability to handle multiple tabs and windows more efficiently.

3. Security: Mozilla Firefox is generally considered to be more secure than Internet

Explorer. This is partly due to Firefox's use of open source code and its ability to quickly
respond to security threats with frequent updates.

4. Extensions and add-ons: Mozilla Firefox has a much larger library of extensions and add-
ons than Internet Explorer. This allows users to customize their browsing experience
with a wide range of tools and features, from ad-blockers to productivity tools.

5. Cross-platform compatibility: Mozilla Firefox is compatible with a wide range of

operating systems, including Windows, macOS, and Linux, while Internet Explorer is only
available for Windows.

Feature Internet Explorer Mozilla Firefox

Developer tools Limited and outdated Robust and up-to-date

Generally considered less secure Generally considered more secure than

Security than Firefox Internet Explorer

Pop-up blocker Built-in Built-in

Add-ons and
extensions Limited and often outdated Wide selection of up-to-date extensions

Customization
options Limited Extensive

Default search
engine Bing Google

Speed Slower than Firefox Faster than Internet Explorer

User interface Outdated and less intuitive Modern and user-friendly

Limited support for modern web Strong support for modern web
Compatibility technologies technologies

Mobile browser No mobile browser available Firefox for Android available

12. Comparison between Web 1.0 and Web 2.0 or What is Web 2.0?

Web 2.0 is the second generation of World Wide Web which provides the facility of online
collaboration and information sharing among people in a much active manner. While the
web was intended to be two-way, most of the early websites were one way in the sense
that you can read information from that. That made the early web as passive. The users
were not able to contribute or interact or comment through its services.

The key point between Web 1.0 Vs Web 2.0 is like Read Vs Read & Write.
• In Web 2.0 the ‘Top- Down’ approach has been replaced with ‘Bottom-Up’
approach where the user decides the kind of content.
• The user can now use web as a platform to perform different tasks like image
sharing, email, editing information online etc which previously were done with the
help of different softwarepackages or utilities.
• Now, the user can interact and contribute to the web pages of other people or
organizations instead of simply reading them.

Some of the differences between Web 1.0 and Web 2.0 are depicted in Table
13. Write Features of Web 2.0

Web 2.0 refers to the second generation of the World Wide Web, which is characterized by a
shift from static web pages to dynamic and interactive web applications. Some of the key
features of Web 2.0 include:

Feature Web 1.0 Web 2.0

Type of Interaction for user One-way Two-way
User Participation Authoritarian Democratic
Reading and Passive Active
writing
capability
Change of Content Static Dynamic
Nature of Web Content Closed Collaborative
Reaching audience Pull Technology Push Technology
1. Folksonomy: Traditional Web like Yahoo Directory and DMOZ uses a pre-defined
classification of Information like category & sub category. On the other hand Web 2.0
without sticking to the existing framework of classification, allows user create free
classification/ arrangement of information. This is also known as social tagging. E.g.
photo sharing site Flickr and Social Bookmarking of del.icio.us
2. Rich User Experience: Traditional web are built with HTML and CSS、CGI and had been
offered as a static page. On the other hand, Web 2.0 uses Ajax (Asynchronous JavaScript
+ XML), HTML5 (for interactive video and audio) presenting dynamic, rich user
experience to users. These technologies substitute old fashioned SWF Flash media and
provide webmasters with ability to insert dynamic video right into HTML code. If
everything is done right, videos will work in any web-browser and on any device. Since
Web 2.0 doesn’t limit webmasters with tools, modern user experience becomes reacher
that ever. For example, Google Provided Google Maps and Google Suggest.
3. User As Contributor: In tradition web, the information is often provided by the site
owner and the user is always the receiver. The information model was One Way . On the
other hand Web
2.0 user also contributes to the content by means of Evaluation, Review & Commenting.
For example: Amazon.com – customer review section & Google’s Page Rank mechanism
4. Long Tail: The traditional web was like a retail business the product is sold directly to
user and the revenue generated. But in web 2.0 the niche product is not sold directly
but offered as a service on demand basis and income is generated as monthly fee and
pay per consumption. For example, is sales force CRM services and Google Apps.
 5. User Participation: In traditional web the contents are solely provider by the web site
owner /company, but in web 2.0 the users participate in content sourcing. This is also
known as Crowd sourcing. For examples are Wikipedia & You Tube.
6. Basic Trust: In traditional web the contents are protected under Intellectual Property
Rights but on the other hand, in web 2.0 the contents are made available to share,
reuse, redistribute and edit. For examples Wikipedia & Creative Common
7. Dispersion: In traditional web, the contents were delivered as direct site to home. But in
web 2.0, the content delivery uses multiple channels include file sharing & permalinks.
For examples are Bit Torrent and Mashup

14. List out client-side and server-side web technologies.

• Client Side Technologies

Client-side scripting generates code that may be executed on the client end without
needing server-side processing. These scripts are typically embedded into HTML text.
Client-side scripting may be utilized to check the user's form for problems before
submitting it and to change the content based on the user input. The web needs three
components to function: client, database, and server.

o HTML, CSS, JavaScript, VBScript, JQuery

o XHTML, DHTML, WML, AJAX
o FLASH
o React, Angular, Vue.js
o Bootstrap, Saas

• Server Side Technologies

Server-side scripting is a programming technique for creating code that may run
software on the server side. In other words, server-side scripting is any scripting method
that may operate on a web server. At the server end, actions such as website
customization, dynamic changes in website content, response creation to user requests,
database access, and many more are carried out.
The server-side is made up of three parts: the database, the server, the APIs, and the
backend web software written in the server-side scripting language.

o ASP, PHP, Perl, JSP

o ASP.NET, Java
o MySQL, SQL Server, Access
o Django, Flask
o Express.js, Node.js
15. What is URL?
URL stands for Uniform Resource Locator, and it is a string of characters that represents the
address of a resource on the web, such as a web page, image, video, or other file.

A Uniform Resource Locator, or URL is the address of a document found on the WWW.
Browser interprets the information in the URL in order to connect to the proper Internet
server and to retrieve your desired document. Each time a click on a hyperlink in a WWW
document instructs browser to findthe URL that's embedded within the hyperlink.

The elements in a URL: Protocol://server's address/filename

A typical URL consists of several components, including:

1. Scheme: This is the protocol used to access the resource, such as "http://" or "https://".
2. Domain name: This is the address of the web server hosting the resource, such as
"www.example.com".
3. Port number: This is the port number used to access the resource, if different from the
default port number for the scheme.
4. Path: This is the location of the resource on the web server, such as "/blog/posts/123".
5. Query string: This is an optional set of parameters passed to the resource, typically used
to pass data to a web application.

For example, the URL "https://www.example.com/blog/posts/123?category=tech" represents a

web page located on the web server "www.example.com", in the "blog/posts" directory, with
the filename "123", and with the query parameter "category" set to "tech".

What are Domains?

Domains divide World Wide Web sites into categories based on the nature of theirowner,
and they form part of a site's address, or uniform resource locator (URL). Common top-
level domains are:

.com—commercial enterprises .mil—military site

org—organization site (non- int—organizations established by
profits,etc.) international treaty
.net—network .biz—commercial and personal
.edu—educational site (universities, .info—commercial and personal
schools, etc.)
.gov—government organizations .name—personal sites

Overall, URLs provide a standardized way of identifying and accessing resources on the web,
allowing users to easily navigate and share links to web pages, images, videos, and other files.
16. Explain message format of HTTP

Message Format:

HTTP requests, and responses, share similar structure and are composed of:

1. A start-line describing the requests to be implemented, or its status of

whether successful or afailure. This start-line is always a single line.
2. An optional set of HTTP headers specifying the request, or describing the
body included in themessage.
3. A blank line indicating all meta-information for the request has been sent.
4. An optional body containing data associated with the request (like content
of an HTML form), or the document associated with a response. The presence
of the body and its size is specified bythe start-line and HTTP headers.
 UNIT – 2

1. What do you mean by CSS? What are the different ways to create CSS?

• CSS is the language we use to style a Web page.

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
• A CSS comprises of style rules that are interpreted by the browser and then applied to
thecorresponding elements in your document.
• Cascading Style Sheets (CSS) is used to format the layout of a webpage.
• With CSS, you can control the color, font, the size of text, the spacing between
elements, how elements are positioned and laid out, what background images or
background colors are to be used, different displays for different devices and screen
sizes, and much more!
CSS Syntax

CSS can be added to HTML documents in 3 ways:

• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file
1. Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

2. Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue, and
the text color of ALL the <p> elements to red. In addition, the page will be displayed with a
"powderblue" background color:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

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

</body>
</html>

3. External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>
The external style sheet can be written in any text editor. The file must not contain any HTML
code, and must be saved with a .css extension.
Here is what the "styles.css" file looks like:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}

2. What is JSON? Why to use JSON over XML?

What is JSON?
• JSON stands for JavaScript Object Notation
• JSON is a lightweight format for storing and transporting data
• JSON is often used when data is sent from a server to a web page
• JSON is "self-describing" and easy to understand
• JavaScript Object Notation (JSON) is a lightweight text-based open standard designed
for human-readable data interchange.
• It is derived from the JavaScript programming language for representing simple data
structures and associative arrays, called objects.
• Despite its relationship to JavaScript, it is language-independent, with parsers available
for most programming languages.

JSON Example
This example defines an employees object: an array of 3 employee records (objects):
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}

Reasons to choose JSON over XML

1. JSON requires less tags than XML – XML items must be wrapped in open and close tags
whereas JSON you just name the tag once
2. Because JSON is transportation-independent, you can just bypass the XMLHttpRequest
object for getting your data.
3. JavaScript is not just data – you can also put methods and all sorts of goodies in JSON
format.
4. JSON is better at helping procedural decisions in your JavaScript based on objects and
their values (or methods).
5. You can get JSON data from anywhere, not just your own domain. There’s no more
proxy server nonsense.
6. JSON is easier to read than XML – Obviously a personal preference
 7. JSON has a more straightforward syntax for editing and creating new documents,
making debugging errors in your data more accessible.
8. JSON is more flexible than XML - it can be used in many different programming
languages, whereas XML can only be used in one programming language simultaneously
(usually Java).

3. Write at least any five Differences between HTML and HTML5.

Basis HTML HTML5

Mobile HTML is less mobile-friendly. HTML5 is more mobile-friendly.
friendliness
Drag and Drop It does not support drag and drop It supports the drag and drops
feature effects. effect.
Media support Does not support audio and video With HTML5, JavaScript runs
without the use of a flash player. directly on the browser through
the JS Web Worker API.

Javascript The browser cannot run JavaScript Support javascript to run in

support directly in HTML. background with the help of JS –
web worker API
Vector Graphics HTML uses vector graphics with the Vector graphics are an
help of various technologies such as important part of HTML5 as we
VML, Flash, etc. use SVG and canvas in it.

Error Handling HTML can not handle inaccurate HTML5 can handle inaccurate
syntax and any other error. Here syntax and other errors.
inaccurate syntax means that the
written syntax (order of tags ) is
different from the original syntax.
Example of basic syntax : <html>
<head> <title> </title> </head>
<body> </body> </html>.
2-D shapes Shapes like circles, rectangles, Shapes like circles, rectangles,
drawing triangles, etc. are not possible to draw triangles, etc. are easy to draw
in HTML. in HTML5.’
Efficiency, As it’s older version, it is not fast, HTML5 is efficient , faster and
speed efficient, and flexible with respect to flexible in comparison to HTML.
HTML5.
Browser You can run it on all old browsers You can run it on all new
support without any problems. For example, browsers without any problems.
Mozilla Firefox, Google Chrome, etc. For example, Mozilla Firefox
version 4 to 63, Google Chrome
version 61 and up, etc.
 Memory Cookies are used by HTML to store Temporary data is stored in the
Storage temporary data. database associated with the
current webpage in HTML5.
Syntaxes For document type declarations and The syntax is concise and easy
character encoding, the syntaxes are to understand.
too long and complicated.
Substructure HTML does not have tags that define HTML5 supports tags that
and semantics text semantics or divide a document’s define text semantics or divide a
defining tags structure. document’s structure.
<HTML>, It is mandatory to use these tags when It is possible to omit these tags
<Body> , and writing HTML code. when writing HTML code.
<Head> tags
Elements No elements like nav or header were HTML5 introduces new
present in HTML. elements for web structure such
as navigation, headers, and
footers.
Attributes HTML lacks attributes such as charset, HTML 5 includes attributes such
async, and ping. as charset, async, and ping.

4. Discuss the idea of HTML tags with an example.

HTML Tags
HTML tags are like keywords which defines that how web browser will format and display the
content. With the help of tags, a web browser can distinguish between an HTML content and a
simple content. HTML tags contain three main parts: opening tag, content and closing tag. But
some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to
right. HTML tags are used to create HTML documents and render their properties. Each HTML
tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per your code requirement.

o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except some
tags)

Syntax
<tag> content </tag>
HTML Tag Examples
<p> Paragraph Tag </p>

<h2> Heading Tag </h2>

<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>

Different Tags:

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

HTML Meta Tags

DOCTYPE, title, link, meta and style

HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>,
<bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and
<br>

HTML Link Tags

<a> and <base>

HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>

HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and legend

5. Describe any five HTML tags.

Heading tag:
It is used to define the heading of an HTML document.

Syntax:
<h1> Statements... </h>
<h2> Statements... </h2>
<h3> Statements... </h3>
<h4> Statements... </h4>
<h5> Statements... </h5>
<h6> Statements... </h6>
Code:

<h1>Heading 1 </h1>
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<h4>Heading 4 </h4>
<h5>Heading 5 </h5>
<h6>Heading 6 </h6>

Paragraph tag:
It is used to define paragraph content in an HTML document.

Syntax:
<p> Statements... </p>
Code:

<p>GeeksforGeeks: Computer science portal</p>

Emphasis tag:
It is used to render as emphasized text.
Syntax:
<em> Statements... </em>
Code:

<em>GeeksforGeeks</em>

Bold tag:
It is used to specify bold content in an HTML document.
Syntax:
<b> Statements... </b>
Code:

<b>Bold word</b>

Anchor tag:
It is used to link one page to another page.
Syntax:
<a href="..."> Statements... </a>
Code:

Visit <a href="https://www.geeksforgeeks.org/">

GeeksforGeeks</a> for better experience.

List tag:
It is used to list the content.
Syntax:
<li> Statements... </li>
Code:

<li>List item 1</li>

<li>List item 2</li>

Line break tag:

It is used to break the line.
Syntax:
<br>
Code:

GeeksforGeeks<br>A computer science portal

6. Create a web page that displays your own details in about 100 words, and includes your
photographs.

<!DOCTYPE html>
<html>
<head>
<title>Student Details</title>
<style>
 body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
text-align: justify;
line-height: 1.5;
}

h1, h2 {
text-align: center;
margin-bottom: 20px;
}

img {
display: block;
margin: 0 auto;
max-width: 100%;

margin-bottom: 20px;
}

ul li {
list-style-type: none;
}
</style>
</head>
<body>
<div class="container">
<img src="student.jpg" alt="Student Photo">
<h1>John Doe</h1>
<h2>Computer Science Major</h2>
<ul>
<li><span>Age:</span> 20</li>
<li><span>Year:</span> Junior</li>
<li><span>GPA:</span> 3.8</li>
<li><span>Interests:</span> Programming, Gaming, Music</li>
<li><span>Skills:</span> Java, Python, HTML/CSS, JavaScript</li>
</ul>
 <p>John is a computer science major at XYZ University. He is currently a junior
with a 3.8 GPA. In his free time, he enjoys programming, playing video games, and listening to
music. John has experience with programming languages such as Java, Python, HTML/CSS,
and JavaScript. He is passionate about using technology to solve real-world problems and
hopes to pursue a career in software development after graduation.</p>
</div>
</body>
</html>

7. Explain the need for XML in detail.

What is XML?
• XML stands for eXtensible Markup Language
• XML is a markup language much like HTML
• XML was designed to store and transport data
• XML was designed to be self-descriptive
• XML is a W3C Recommendation

XML Simplifies Things

• XML simplifies data sharing
• XML simplifies data transport
• XML simplifies platform changes
• XML simplifies data availability

Many computer systems contain data in incompatible formats. Exchanging data between
incompatible systems (or upgraded systems) is a time-consuming task for web developers.
Large amounts of data must be converted, and incompatible data is often lost.

XML stores data in plain text format. This provides a software- and hardware-independent way
of storing, transporting, and sharing data.

XML also makes it easier to expand or upgrade to new operating systems, new applications, or
new browsers, without losing data.

With XML, data can be available to all kinds of "reading machines" like people, computers,
voice machines, news feeds, etc.

Key uses and benefits of XML:

1. Data interchange: XML is commonly used for exchanging data between different
systems and applications, allowing them to communicate and share information in a
structured way.
 2. Web services: XML is a foundational technology for web services, which are a way for
different systems to interact and exchange data over the internet.
3. Data storage: XML can be used as a format for storing data, allowing it to be easily
accessed and manipulated by different applications and systems.
4. Customization: XML is an extensible language, meaning it can be customized and
extended to fit the needs of different applications and industries.
5. Cross-platform compatibility: XML can be used on a wide range of platforms and
devices, making it a versatile and widely adopted technology.

8. What are the strengths of XML technology?

Strengths of XML

1) XML separates data from HTML

If you need to display dynamic data in your HTML document, it will take a lot of work to edit the
HTML each time the data changes.

With XML, data can be stored in separate XML files. This way you can focus on using HTML/CSS
for display and layout, and be sure that changes in the underlying data will not require any
changes to the HTML.

With a few lines of JavaScript code, you can read an external XML file and update the data content
of your web page.

2) XML simplifies data sharing

In the real world, computer systems and databases contain data in incompatible formats.

XML data is stored in plain text format. This provides a software- and hardware-independent way
of storing data.

This makes it much easier to create data that can be shared by different applications.

3) XML simplifies data transport

One of the most time-consuming challenges for developers is to exchange data between
incompatible systems over the Internet.

Exchanging data as XML greatly reduces this complexity, since the data can be read by different
incompatible applications.

4) XML simplifies Platform change

Upgrading to new systems (hardware or software platforms), is always time consuming. Large
amounts of data must be converted and incompatible data is often lost.
XML data is stored in text format. This makes it easier to expand or upgrade to new operating
systems, new applications, or new browsers, without losing data.

5) XML increases data availability

Different applications can access your data, not only in HTML pages, but also from XML data
sources.

With XML, your data can be available to all kinds of "reading machines" (Handheld computers,
voice machines, news feeds, etc), and make it more available for blind people, or people with
other disabilities.

6) XML can be used to create new internet languages

A lot of new Internet languages are created with XML.

Here are some examples:

o XHTML
o WSDL for describing available web services
o WAP and WML as markup languages for handheld devices
o RSS languages for news feeds
o RDF and OWL for describing resources and ontology
o SMIL for describing multimedia for the web

9. What are DTDs? How do they work?

What is a DTD?
A DTD is a Document Type Definition.

A DTD defines the structure and the legal elements and attributes of an XML document.

A Document Type Definition (DTD) describes the tree structure of a document and something
about its data. It is a set of markup affirmations that actually define a type of document for
the SGML family, like GML, SGML, HTML, XML.
A DTD can be declared inside an XML document as inline or as an external recommendation.
DTD determines how many times a node should appear, and how their child nodes are
ordered.
There are 2 data types, PCDATA and CDATA
• PCDATA is parsed character data.
• CDATA is character data, not usually parsed.
Why Use a DTD?
With a DTD, independent groups of people can agree on a standard DTD for interchanging data.
An application can use a DTD to verify that XML data is valid.

An Internal DTD Declaration

If the DTD is declared inside the XML file, it must be wrapped inside the <!DOCTYPE> definition:

XML document with an internal DTD

<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>
The DTD above is interpreted like this:

• !DOCTYPE note defines that the root element of this document is note
• !ELEMENT note defines that the note element must contain four elements:
"to,from,heading,body"
• !ELEMENT to defines the to element to be of type "#PCDATA"
• !ELEMENT from defines the from element to be of type "#PCDATA"
• !ELEMENT heading defines the heading element to be of type "#PCDATA"
• !ELEMENT body defines the body element to be of type "#PCDATA"

An External DTD Declaration

If the DTD is declared in an external file, the <!DOCTYPE> definition must contain a reference to
the DTD file:

XML document with a reference to an external DTD

<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
 <heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
And here is the file "note.dtd", which contains the DTD:

<!ELEMENT note (to,from,heading,body)>

<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>

10. Explain the differences between external and internal DTDs. (Also refer previous
question) .

Internal DTD:-
• You can create rules for the XML document using the proclamation.
• A DTD is responded to as an internal DTD if the components are stated in XML files.
• To refer to it as an internal DTD, the isolated attribute in the XML resolution must be set
to yes.

External DTD:-
• You may create rules in a text file (with the.dtd extension).
• Outside the XML format, external DTD elements are declared.
• They are obtained by defining the device qualities that can be either a legal.dtd file or a
valid URL.

11. What are XML schemas? How are they better than DTDs?

Document Type Definition (DTD)

DTD stands for Document Type Definition and it is a document which defines the structure of
an XML document. It is used to describe the attributes of XML language precisely. It can be
classified into two types namely internal DTD and external DTD. It can be specified inside a
document or outside a document. DTD mainly checks the grammar and validity of a XML
document. It checks that a XML document has a valid structure or not.
XML Schema Definition (XSD)
XSD stands for XML Schema Definition and it is a way to describe the structure of a XML
document. It defines the rules for all the attributes and elements in a XML document. It can
also be used to generate the XML documents. It also checks the vocabulary of the document.
It doesn’t require processing by a parser. XSD checks for the correctness of the structure of
the XML file. XSD was first published in 2001 and after that it was published in 2004.
Difference between Document Type Definition (DTD) and XML Schema Definition (XSD)
S.NO. DTD XSD

DTD are the declarations that define a XSD describes the elements in a XML
1.
document type for SGML. document.

2. It doesn’t support namespace. It supports namespace.

3. It is comparatively harder than XSD. It is relatively more simpler than DTD.

4. It doesn’t support datatypes. It supports datatypes.

5. SGML syntax is used for DTD. XML is used for writing XSD.

6. It is not extensible in nature. It is extensible in nature.

It doesn’t give us much control on It gives us more control on structure of XML

7.
structure of XML document. document.

Any element which is made global can be

8. It specifies only the root element.
done as root as markup validation.

It doesn’t have any restrictions on

9. It specifies certain data restrictions.
data used.

10. It is not much easy to learn . It is simple in learning.

11. File here is saved as .dtd File in XSD is saved as .xsd file.

12. It is not a strongly typed mechanism. It is a strongly typed mechanism.

S.NO. DTD XSD

It uses #PCDATA which is a string data It uses fundamental and primitive data
13.
type. types.

12. Explain the XSLT technology with an example.

The term “XSLT” is generated by combining two words i.e. ‘XSL’ and ‘T’, ‘XSL’ is the short form
of ‘Extensible Stylesheet Language’ and ‘T’ is a short form of ‘Transformation’.

So, basically, XSLT is a transformation language that is used to transform/convert source XML
documents to XML documents or to other formats such as HTML, PDF by using XSL-FO
(Formatting Objects), etc.

Transformation happens with the help of the XSLT processor (like Saxon, Xalan). This XSLT
processor takes one or more XML documents as a source with one XSLT file that contains XSLT
code written in it and the result/output documents will get generated later as shown in the
below diagram.

The XSLT processor parses the source XML documents by using X-Path to navigate over
different source elements starting from the root element till the end of documents.

Advantages
Here are the advantages of using XSLT −
• Independent of programming. Transformations are written in a separate xsl file
which is again an XML document.
 • Output can be altered by simply modifying the transformations in xsl file. No need
to change any code. So Web designers can edit the stylesheet and can see the
change in the output quickly.
Example:

Step 1: Create an XML file named employee.xml, having the following code:

Employee.xml

<?xml version = "1.0"?>

<class>
<employee id = "001">
<firstname>Aryan</firstname>
<lastname>Gupta</lastname>
<nickname>Raju</nickname>
<salary>30000</salary>
</employee>
<employee id = "024">
<firstname>Sara</firstname>
<lastname>Khan</lastname>
<nickname>Zoya</nickname>
<salary>25000</salary>
</employee>
</class>
Step2: Create XSLT document

Create the XSLT document which satisfies the above requirements. Name it as employee.xsl and
save it in the same location of employee.xml.

Employee.xsl

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

<!- xsl stylesheet declaration with xsl namespace: Namespace tells the xlst processor about
which element is to be processed and which is used for output purpose only -->
<xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSL/Transform">
<!-- xsl template declaration: template tells the xlst processor about the section of xml
document which is to be formatted. It takes an XPath expression. In our case, it is matching
document root element and willtell processor to process the entire document with this
template. -->
<xsl:template match = "/">
<!-
- HTML tags Used for formatting purpose. Processor will skip them and browser will simply
render them. -->
 <html>
<body>
<h2>Employee</h2>
<table border = "1">
<tr bgcolor = "#9acd32">
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Nick Name</th>
<th>Salary</th>
</tr>
<!- foreach processing instruction Looks for each element matching the XPath
expression -->
<xsl:for-each select="class/employee">
<tr>
<td>
<!-- value-
of processing instruction process the value of the element matching the XPath expression
-->
<xsl:value-of select = "@id"/>
</td>
<td><xsl:value-of select = "firstname"/></td>
<td><xsl:value-of select = "lastname"/></td>
<td><xsl:value-of select = "nickname"/></td>
<td><xsl:value-of select = "salary"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Step3: List the XSLT document to the XML document
Update employee.xml document with the following xml-stylesheet tag. Set href value to
employee.xsl
Updated "employee.xml"

<?xml version = "1.0"?>

<?xml-stylesheet type = "text/xsl" href = "employee.xsl"?>
<class>
<employee id = "001">
<firstname>Aryan</firstname>
<lastname>Gupta</lastname>
 <nickname>Raju</nickname>
<salary>30000</salary>
</employee>
.
.
.
</class>

13. What is HTML? Do all HTML tags have end tag?

What is HTML?
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

HTML is an acronym which stands for Hyper Text Markup Language which is used for creating
web pages and web applications. Let's see what is meant by Hypertext Markup Language, and
Web page.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext.
Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext.
HyperText is a way to link two or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated by a
web browser. A web page can be identified by entering an URL. A Web page can be of the static
or dynamic type. With the help of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive web pages with the help
of styling, and which looks in a nice format on a web browser. An HTML document is made of
many HTML tags and each HTML tag contains different content.

Do all HTML tags have end tag?

No, not all the tags are ending tags. Tags may be either paired or unpaired (or single). Paired
tags need to be closed, i.e. they contains both ending and non-ending tags, whereas unpaired
tags need not be closed, i.e. they only contain opening tags. For eg :
1) Paired tags: <html>, <body>, <title>, <h1>, etc.
2) Unpaired tags: <br>, <img>, <hr>, etc.

14. What is the difference between HTML elements and tags?

HTML Tags:
Tags are the starting and ending parts of an HTML element. They begin with < symbol and end
with > symbol. Whatever written inside < and > are called tags.
Example:

<b> </b>

HTML elements:
Elements enclose the contents in between the tags. They consist of some kind of structure or
expression. It generally consists of a start tag, content and an end tag.
Example:

<b>This is the content.</b>

HTML Tags HTML Elements

HTML tags are used to hold the HTML

HTML element holds the content.
element.

Whatever written within a HTML tag are

HTML tag starts with < and ends with >
HTML elements.

HTML tags are almost like keywords

where every single tag has unique HTML elements specifies the general content.
meaning.

15. What is a style sheet? How do you create a multi colour text on a web page using CSS?

Using <font> color attribute.

Syntax :
<font color="color_name|hex_number|rgb_number">Text content</font>

Attribute Values:
• hex_number: It sets the text color by using color hex code. For example “#0000ff”.
• rgb_number: It sets the text color by using RGB code. For example: “rgb(0, 153,
0)”.
Example:
HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h1 {
color: green;
font-size: 60px;
}
</style>
</head>

<body>
<center>
<h1>
Welcome To
<font color="#FF2626">G</font>
<font color="#252A34">e</font>
<font color="#753422">e</font>
<font color="#FFD523">k</font>
<font color="#71EFA3">s</font>
 <font color="#0F52BA">for</font>
<font color="#66CC66">G</font>
<font color="#FF9966">e</font>
<font color="#FFCCCC">e</font>
<font color="#00C1D4">k</font>
<font color="#EFE3D0">s</font>
</h1>
</center>
</body>

</html>

Output:

16. What are the new <input> types for form validation in HTML

HTML5 introduced several new input types for form validation, including:

1. email: Validates that the input value is a valid email address.

2. url: Validates that the input value is a valid URL.
3. number: Validates that the input value is a numeric value.
4. range: Allows the user to select a value from a range of values.
5. date: Allows the user to select a date from a calendar.
6. time: Allows the user to select a time value.
7. month: Allows the user to select a month and year from a dropdown menu.
8. week: Allows the user to select a week and year from a dropdown menu.
9. search: Provides a search input field.
10. tel: Validates that the input value is a valid telephone number.
11. color: Allows the user to select a color from a color picker.
These input types can be used with the "required" attribute to ensure that the user provides a
valid input value before submitting the form. Additionally, some input types (such as "email"
and "url") will display a validation error message if the user enters an invalid input value.
Here are the different input types you can use in HTML:

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

17. Create a web page for Admission form with using all Tag in HTML.

<!DOCTYPE html>
<html>
<head>
<title>Admission Form</title>
</head>
<body>
<form>
<h1>Admission Form</h1>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required><br><br>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select Gender</option>
 <option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required><br><br>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4"
cols="30"></textarea><br><br>
<label for="course">Course:</label>
<input list="courses" id="course" name="course" required>
<datalist id="courses">
<option value="Computer Science">
<option value="IT">
<option value="Civil">
<option value="Mechanical">
<option value="E & TC">
</datalist><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

18. What is use of static & dynamic web page? Enlist applications of static & dynamic web
page.

Static Web pages: Static Web pages are very simple. It is written in languages such as HTML,
JavaScript, CSS, etc. For static web pages when a server receives a request for a web page,
then the server sends the response to the client without doing any additional process. And
these web pages are seen through a web browser. In static web pages, Pages will remain the
same until someone changes it manually.

Dynamic Web Pages: Dynamic Web Pages are written in languages such as CGI, AJAX, ASP,
ASP.NET, etc. In dynamic web pages, the Content of pages is different for different visitors. It
takes more time to load than the static web page. Dynamic web pages are used where the
information is changed frequently, for example, stock prices, weather information, etc.

Difference between Static and Dynamic Webpages

The following table highlights the important differences between Static and Dynamic webpages.

Key Static Webpage Dynamic Webpage

Static webpages are generally Dynamic webpages are the pages written
simple HTML written pages in in some more complex language such as
Definition which all the data is static in nature ASP.NET in which the data is rendered
and it does not get changed until after some interpretation. It can produce
someone changes it manually. distinctive content for different calls.

Static websites are simple because Dynamic webpages, on other hand,

all the data is static and do not interpret the data which makes the
Complexity require any interpretation before process dynamic in nature. Hence,
rendering. dynamic webpages are complex as
compared to static webpages.
 Key Static Webpage Dynamic Webpage

Static webpages are generally Dynamic webpages are written in more

Language written in simpler languages such complex languages such as CGI, AJAX,
used as HTML, JavaScript, CSS, etc. ASP, ASP.NET, etc.

For static webpages, data does not The data on a Dynamic webpage first
Rendered change until someone changes it interoperate at the server side, so it does
Data manually. Data is static in nature. not remain same on every call and this
makes the data dynamic in nature.

It is obvious that Static webpages Dynamic webpages take comparatively

Time load faster because the data is more time to load as compared to static
static. webpages.

In Static webpages, generally there Dynamic webpages use a database for

Database is no involvement of a database for data redecoration.
data redecoration.
 Unit 3

1. Explain how to call JavaScript Function from HTML Page with example.

Ans:-

If we want to call the JavaScript function in the Html then we have to follow the steps which
are given below. Using these steps, we can easily access the JavaScript function.

Step 1: Firstly, we have to type the script tag between the starting and closing of <head>
tag just after the title tag. And then, type the JavaScript function.

<Head>
<Title>
Call a JavaScript function
</Title>
<script type = "text/javascript">
function msgprint() {
alert("You are Successfully Called the JavaScript function");
}
</script>
</Head>

Step 2: After then, we have to call the javaScript function in the Html code for displaying the
information or data on the web page. So, we can call the function of JavaScript by its name in
the input tag of the form tag.
<form>
<input type = "button" onclick = "msgprint()" value = "Message Print">
</form>

Step 3: And, at last, we have to save the Html file and then run the file which calls the
JavaScript function.

<!Doctype Html>
<Html>
<Head>
<Title>
Call a JavaScript function
</Title>
 <script type = "text/javascript">
function msgprint() {
alert("You are Successfully Called the JavaScript function");
}
</script>
</Head>
<Body>
<p>Click on the following button for calling the function: </p>
<form>
<input type = "button" onclick = "msgprint()" value = "Message Print">
</form>
<p>
</Body>
</Html>

2. Explain with example how to access values of textbox of form using JavaScript

Ans:-

To access the value of a textbox in an HTML form using JavaScript, you can use the "value"
property of the textbox element. Here's an example:

<!DOCTYPE html>

<html>

<head>

<title>Accessing values of textboxes using JavaScript</title>

<script>

function myFunction() {

var textBoxValue = document.getElementById("myTextBox").value;

alert("The value of the textbox is: " + textBoxValue);

</script>

</head>
<body>

<form>

<label for="myTextBox">Enter your name:</label>

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

<input type="button" value="Submit" onclick="myFunction()">

</form>

</body>

</html>

In this example, we have defined a JavaScript function called "myFunction()" that retrieves
the value of a textbox and displays it in an alert message. To retrieve the value of the textbox,
we use the "getElementById()" method to get a reference to the textbox element, and then
access its "value" property.

We have also added an HTML form with a label and a textbox, and a submit button that calls
the "myFunction()" function when clicked. When the button is clicked, the "myFunction()"
function retrieves the value of the textbox and displays it in an alert message.

Note that in this example, we have used the "name" attribute for the textbox element, but this
is not necessary for accessing its value with JavaScript. We can use the "id" attribute instead,
which is typically used to uniquely identify elements on a page.

3. Write a program of your choice that demonstrate use of properties of DOM.

Ans:-
The Document Object Model (DOM) is a programming interface for HTML(HyperText
Markup Language) and XML(Extensible markup language) documents. It defines
the logical structure of documents and the way a document is accessed and manipulated.

Note: It is called a Logical structure because DOM doesn’t specify any relationship
between objects.

DOM is a way to represent the webpage in a structured hierarchical way so that it will
become easier for programmers and users to glide through the document. With DOM, we
can easily access and manipulate tags, IDs, classes, Attributes, or Elements of HTML using
commands or methods provided by the Document object. Using DOM, the JavaScript gets
access to HTML as well as CSS of the web page and can also add behavior to the HTML
elements. so basically Document Object Model is an API that represents and interacts
with HTML or XML documents.

Example: In this example, We use HTML element id to find the DOM HTML element.
<!DOCTYPE html>

<html>

<body>

<h2> DOM HTML element.</h2>

<!-- Finding the HTML Elements by their Id in DOM -->

<p id="intro">A Computer Science portal for geeks.</p>

<p>This example illustrates the <b>getElementById</b> method.</p>

<p id="demo"></p>

<script>

const element = document.getElementById("intro");

document.getElementById("demo").innerHTML =

"GeeksforGeeks introduction is: " + element.innerHTML;

</script>

</body>

</html>

4. Write features of JQuery.

Ans:-

jQuery is a fast, small, and feature-rich JavaScript library that simplifies the process of
working with HTML documents, handling events, and animating elements on a web page.
Some of the key features of jQuery are:

1. DOM manipulation: jQuery simplifies the process of selecting, manipulating, and

traversing HTML DOM elements, making it easier to manipulate the content of a web
page.

2. Event handling: jQuery makes it easy to add and remove event handlers, such as
click, hover, and submit, to DOM elements.
 3. AJAX support: jQuery provides a set of methods for making asynchronous HTTP
requests to the server, allowing web applications to update content dynamically
without requiring a page reload.

4. Cross-browser compatibility: jQuery is designed to work seamlessly across all

major web browsers, ensuring that your code works the same way on different
platforms.

5. Animation and effects: jQuery includes a variety of built-in animation and effect
functions, such as fade, slide, and toggle, that make it easy to add dynamic and
interactive elements to your web pages.

6. Lightweight and fast: jQuery is a relatively small library, and its code is optimized
for performance, making it a great choice for high-traffic websites.

7. Extensible and modular: jQuery is highly modular, and you can easily extend its
functionality by writing your own plugins or by using existing plugins created by the
jQuery community.

Overall, jQuery is a versatile and powerful JavaScript library that can help you streamline
your web development projects and create dynamic and engaging web pages with ease.

5. What is purpose of DOM Node Tree? Draw DOM Node tree for Simple HTML
Page.
Ans:-
What is the purpose of HTML DOM Node Tree?

HTML DOM view the HTML document with a tree structure format and it consists of root
node and child nodes.

The node-tree is being accessed using the tree formation and the structure in which the
elements get created.

The contents that are used being modified or removed using the new elements and it can be
created within the limitations.

The structure consists of a document that is the root and within it Root element <html> from
where the tree starts.

It consists of sub-elements like <head> and <body> and other text and attributes written in
the HTML format.
The HTML DOM Node Tree (Document Tree)

The HTML DOM views a HTML document as a tree-structure. The tree structure is called
a node-tree.
All nodes can be accessed through the tree. Their contents can be modified or deleted, and
new elements can be created.

The node tree below shows the set of nodes, and the connections between them. The tree
starts at the root node and branches out to the text nodes at the lowest level of the tree:

Node Parents, Children, and Siblings

The nodes in the node tree have a hierarchical relationship to each other.

The terms parent, child, and sibling are used to describe the relationships. Parent nodes have
children. Children on the same level are called siblings (brothers or sisters).

• In a node tree, the top node is called the root

• Every node, except the root, has exactly one parent node
• A node can have any number of children
• A leaf is a node with no children
• Siblings are nodes with the same parent

Look at the following HTML fragment:

<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>

In the HTML above, every node except for the document node has a parent node:
 • The <html> node has no parent node; the root node
• The parent node of the <head> and <body> nodes is the <html> node
• The parent node of the "Hello world!" text node is the <p> node

Most element nodes have child nodes:

• The <html> node has two child nodes; <head> and <body>
• The <head> node has one child node; the <title> node
• The <title> node also has one child node; the text node "DOM Tutorial"
• The <h1> and <p> nodes are siblings, and both child nodes of <body>

6. Write a JQuery code for creating elements, removing elements.

Ans:-
$(document).ready(function(){

// Add new element

$(".add").click(function(){

// Finding total number of elements added

var total_element = $(".element").length;

// last <div> with element class id

var lastid = $(".element:last").attr("id");

var split_id = lastid.split("_");

var nextindex = Number(split_id[1]) + 1;

var max = 5;

// Check total number elements

if(total_element < max ){

// Adding new div container after last occurance of element class

$(".element:last").after("<div class='element' id='div_"+ nextindex +"'></div>");

 // Adding element to <div>

$("#div_" + nextindex).append("<input type='text' placeholder='Enter your skill'

id='txt_"+ nextindex +"'>&nbsp;<span id='remove_" + nextindex + "'
class='remove'>X</span>");

});

// Remove element

$('.container').on('click','.remove',function(){

var id = this.id;

var split_id = id.split("_");

var deleteindex = split_id[1];

// Remove <div> with id

$("#div_" + deleteindex).remove();

});

});

7. What is the DOM ?

Ans:-

The HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

 The HTML DOM Tree of Objects

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

• JavaScript can change all the HTML elements in the page

• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page
• JavaScript can create new HTML events in the page

What is the DOM?

➢ The DOM is a W3C (World Wide Web Consortium) standard.

➢ The DOM defines a standard for accessing documents:
➢ "The W3C Document Object Model (DOM) is a platform and language-neutral
interface that allows programs and scripts to dynamically access and update the
content, structure, and style of a document."

The W3C DOM standard is separated into 3 different parts:

• Core DOM - standard model for all document types

• XML DOM - standard model for XML documents
• HTML DOM - standard model for HTML documents

What is the HTML DOM?

The HTML DOM is a standard object model and programming interface for HTML. It
defines:
 • The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete
HTML elements.

8. What is the purpose of DOM

Ans:-

The Document Object Model (DOM) provides a standardized way to interact with and
manipulate web page content using JavaScript. The DOM is a hierarchical representation of
the elements in an HTML or XML document, and the Document object is the top-level object
in the DOM hierarchy. The Document object provides a number of methods that can be used
to manipulate the content, structure, and style of a web page. Here are some of the specific
purposes of the methods provided by the Document object:

1. Creating new elements: The createElement() method can be used to create a new
HTML element. For example, document.createElement("div") will create a new div
element that can be added to the DOM.
2. Modifying element content: The innerHTML property of an element can be used to
modify the content of an HTML element. For example,
document.getElementById("mydiv").innerHTML = "Hello, World!" will change the
content of the div element with the ID "mydiv" to "Hello, World!".
3. Modifying element attributes: The setAttribute() method can be used to set the
value of an attribute on an HTML element. For example,
document.getElementById("myimg").setAttribute("src", "image.jpg") will set the src
attribute of the image element with the ID "myimg" to "image.jpg".
4. Adding and removing classes: The classList property of an element provides a way
to add or remove classes from an HTML element. For example,
document.getElementById("mydiv").classList.add("myclass") will add the class
"myclass" to the div element with the ID "mydiv".
5. Appending and removing elements: The appendChild() method can be used to
append a new child element to an existing element in the DOM. For example,
document.getElementById("mydiv").appendChild(document.createElement("p")) will
add a new paragraph element as a child of the div element with the ID "mydiv". The
removeChild() method can be used to remove an existing child element from the
DOM.

In summary, the methods provided by the Document object allow developers to manipulate
the content, structure, and style of a web page using JavaScript. These methods provide a
standardized way to interact with the DOM, making it easier to create dynamic and
interactive web applications.
 9. Difference between JavaScript and JQuery.

Ans:-

jQuery JavaScript

It is a Javascript library. It is a dynamic and interpreted web-development

programming language.

The user only need to write the required jQuery The user needs to write the complete js code
code

It is less time-consuming. It is more time consuming as the whole script is

written.

There is no requirement for handling multi- Developers develop their own code for handling
browser compatibility issues. multi-browser compatibility.

It is required to include the URL of the jQuery JavaScript is supportable on every browser. Any
library in the header of the page. additional plugin need not to be included.

It depends on the JavaScript as it is a library of jQuery is a part of javascript. Thus, the js code may
js. or may not depend on jQuery.

It contains only a few lines of code. The code can be complicated, as well as long.

It is quite an easy, simple, and fast approach. It is a weakly typed programming approach.

jQuery is an optimized technique for web JavaScript is one of the popular web designing
designing. programming languages for developers that
introduced jQuery.

jQuery creates DOM faster. JavaScript is slow in creating DOM.

10. Explain the different DOM level.

Ans:-

Levels of DOM:
• Level 0: Provides a low-level set of interfaces.

• Level 1: DOM level 1 can be described in two parts: CORE and HTML.
• CORE provides low-level interfaces that can be used to represent
any structured document.
 • HTML provides high-level interfaces that can be used to represent
HTML documents.

• Level 2: consists of six

specifications: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL,
and RANGE.
• CORE2: extends the functionality of CORE specified by DOM level
1.
• VIEWS: views allows programs to dynamically access and
manipulate the content of the document.
• EVENTS: Events are scripts that are either executed by the browser
when the user reacts to the web page.
• STYLE: allows programs to dynamically access and manipulate the
content of style sheets.
• TRAVERSAL: This allows programs to dynamically traverse the
document.
• RANGE: This allows programs to dynamically identify a range of
content in the document.

• Level 3: consists of five different specifications: CORE3, LOAD and

SAVE, VALIDATION, EVENTS, and XPATH.
• CORE3: extends the functionality of CORE specified by DOM level
2.
• LOAD and SAVE: This allows the program to dynamically load the
content of the XML document into the DOM document and save the
DOM Document into an XML document by serialization.
• VALIDATION: This allows the program to dynamically update the
content and structure of the document while ensuring the document
remains valid.
• EVENTS: extends the functionality of Events specified by DOM
Level 2.
• XPATH: XPATH is a path language that can be used to access
the DOM tree

11. What is JavaScript ?

Ans:-
JavaScript is a dynamic computer programming language. It is lightweight and most
commonly used as a part of web pages, whose implementations allow client-side script to
interact with the user and make dynamic pages. It is an interpreted programming language
with object-oriented capabilities.

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript,
possibly because of the excitement being generated by Java. JavaScript made its first
appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of
the language has been embedded in Netscape, Internet Explorer, and other web browsers.

The ECMA-262 Specification defined a standard version of the core JavaScript language.

• JavaScript is a lightweight, interpreted programming language.

• Designed for creating network-centric applications.
 • Complementary to and integrated with Java.
• Complementary to and integrated with HTML.
• Open and cross-platform

Client-Side JavaScript:
Client-side JavaScript is the most common form of the language. The script should be
included in or referenced by an HTML document for the code to be interpreted by the
browser. It means that a web page need not be a static HTML, but can include programs that
interact with the user, control the browser, and dynamically create HTML content.

The JavaScript client-side mechanism provides many advantages over traditional CGI server-
side scripts. For example, you might use JavaScript to check if the user has entered a valid e-
mail address in a form field. The JavaScript code is executed when the user submits the form,
and only if all the entries are valid, they would be submitted to the Web Server. JavaScript
can be used to trap user-initiated events such as button clicks, link navigation, and other
actions that the user initiates explicitly or implicitly.

Advantages of JavaScript
• Less server interaction: You can validate user input before sending the page off to
the server. This saves server traffic, which means less load on your server.

• Immediate feedback to the visitors: They don't have to wait for a page reload to see
if they have forgotten to enter something.

• Increased interactivity: You can create interfaces that react when the user hovers
over them with a mouse or activates them via the keyboard.

• Richer interfaces: You can use JavaScript to include such items as drag- and-drop
components and sliders to give a Rich Interface to your site visitors.

Limitations of JavaScript:-
We cannot treat JavaScript as a full-fledged programming language. It lacks the following
important features:
• Client-side JavaScript does not allow the reading or writing of files. This has been
kept for security reason.
• JavaScript cannot be used for networking applications because there is no such
support available.
• JavaScript doesn't have any multithreading or multiprocessor capabilities.

Once again, JavaScript is a lightweight, interpreted programming language that allows you to
build interactivity into otherwise static HTML pages.

12. Explain key usage of JavaScript.

Ans:-
What are the uses of JavaScript?

JavaScript is a light-weight object-oriented programming language that is used by several

websites for scripting the webpages. It is an interpreted, full-fledged programming language.
JavaScript enables dynamic interactivity on websites when it is applied to an HTML document.

JavaScript helps the users to build modern web applications to interact directly without
reloading the page every time. JavaScript is commonly used to dynamically
modify HTML and CSS to update a user interface by the DOM API. It is mainly used in web
applications.

Let's discuss the uses of JavaScript. Some of the uses of JavaScript are representing in the
following image.

1. Web Applications

As day-by-day there is a continuous improvement in the browsers, so JavaScript gained

popularity for making robust web applications. We can understand it by taking the example
of Google Maps. In Maps user just requires to click and drag the mouse; the details are visible
just by a click. There is a use of JavaScript behind these concepts.

2. Web Development

JavaScript is commonly used for creating web pages. It allows us to add dynamic behavior to
the webpage and add special effects to the webpage. On websites, it is mainly used for
validation purposes. JavaScript helps us to execute complex actions and also enables the
interaction of websites with visitors. Using JavaScript, it is also possible to load the content in
a document without reloading the webpage.

3. Mobile Applications

Now a day's mobile devices are broadly used for accessing the internet. Using JavaScript, we
can also build an application for non-web contexts. The features and uses of JavaScript make
it a powerful tool for creating mobile applications. The React Native is the widely used
JavaScript framework for creating mobile applications. Using React Native, we can build
mobile applications for different operating systems. We do not require writing different codes
for the iOS and Android operating systems. We only need to write it once and run it on different
platforms.

4. Game

JavaScript is also used for creating games. It has various libraries and frameworks for creating
a game. The game can either be a 2D or 3D. Some JavaScript game engines such as PhysicsJS,
Pixi.js help us to create a web game. We can also use the WebGL (web graphics library),
which is the JavaScript API to render 2D and 3D images on browsers.

5. Presentations

JavaScript also helps us to create presentations as a website. The libraries, such

as RevealJs, and BespokeJs, can be used to create a web-based slide deck. They are easier to
use, so we can easily make something amazing in a short time.

The Reveal.js is used to create interactive and beautiful slide decks with the help of HTML.
These presentations work great with mobile devices and tablets. It also supports all of the CSS
color formats. The BespokeJS includes animated bullet lists, responsive scaling, and a wide
variety of features.

6. Server Applications

A large number of web applications have a server-side to them. JavaScript is used to generate
content and handle HTTP requests. JavaScript can also run on servers through Node.js.
The Node.js provides an environment containing the necessary tools required for JavaScript to
run on servers.

7. Web Servers

A web server can be created by using Node.js. Node.js is event-driven and not waits for the
response of the previous call. The servers created using Node.js are fast and don't use buffering
and transfer chunks of data. The HTTP module can be used to create the server by using
the createServer() method. This method executes when someone tries to access the port 8080.
As a response, the HTTP server should display HTML and should be included in
the HTTP header.

13. Explain 5 inbuilt function of JavaScript.

Ans:-
1. alert() - This function displays an alert box with a message to the user.

alert("Hello, World!"); // displays an alert box with the message "Hello, World!"
 2. prompt() - This function displays a dialog box with a message and allows the user to
input data.

let name = prompt("What is your name?"); // displays a dialog box with the message
"What is your name?" and stores the user's input in the 'name' variable

3. console.log() - This function writes a message to the browser's console for debugging
and testing purposes.

console.log("Hello, World!"); // writes the message "Hello, World!" to the console

4. parseInt() - This function parses a string argument and returns an integer.

let numberString = "42";

let number = parseInt(numberString); // 'number' variable now contains the integer

value 42

5. parseFloat() - This function parses a string argument and returns a floating-point

number.

let floatString = "3.14";

let float = parseFloat(floatString); // 'float' variable now contains the floating-point

value 3.14

6. isNaN() - This function determines whether a value is NaN (Not a Number).

let notANumber = "hello";

let isNotANumber = isNaN(notANumber); // 'isNotANumber' variable now contains the

boolean value true

7. Math.random() - This function returns a random number between 0 (inclusive) and 1

(exclusive).
let randomNumber = Math.random(); // 'randomNumber' variable now contains a
random value between 0 and 1

8. String.fromCharCode() - This function returns a string created from a sequence of

Unicode values.

let charCode = 65; // ASCII code for 'A'

let char = String.fromCharCode(charCode); // 'char' variable now contains the string

"A"

14. How to create a object in JavaScript ?

Ans:-

Creating Objects in JavaScript

There are 3 ways to create objects.

1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)

1) JavaScript Object by object literal

The syntax of creating object using object literal is given below:

object={property1:value1,property2:value2.....propertyN:valueN}

As you can see, property and value is separated by : (colon).

Let’s see the simple example of creating object in JavaScript.

<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>

2) By creating instance of Object

The syntax of creating object directly is given below:

1. var objectname=new Object();

Here, new keyword is used to create object.

Let’s see the example of creating object directly.

<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>

AD

3) By using an Object constructor

Here, you need to create function with arguments. Each argument value can be assigned in the
current object by using this keyword.

The this keyword refers to the current object.

The example of creating object by object constructor is given below.

<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);

document.write(e.id+" "+e.name+" "+e.salary);

</script>

15. How to create an Array in JavaScript ?

Ans:-
JavaScript Array

JavaScript array is an object that represents a collection of similar type of elements.

There are 3 ways to construct array in JavaScript

1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)

1) JavaScript array literal

The syntax of creating array using array literal is given below:

var arrayname =[value1,value2.....valueN];

As you can see, values are contained inside [ ] and separated by , (comma).

Let's see the simple example of creating and using array in JavaScript.

<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>

2) JavaScript Array directly (new keyword)

The syntax of creating array directly is given below:

var arrayname=new Array();

Here, new keyword is used to create instance of array.

Let's see the example of creating array directly.

<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";
 for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>

3) JavaScript array constructor (new keyword)

Here, you need to create instance of array by passing arguments in constructor so that we don't
have to provide value explicitly.

The example of creating object by array constructor is given below.

<script>
var emp=new Array("Jai","Vijay","Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>

16. Explain properties of document object model.

Ans:-

DOM stands for the Document Object Model in javascript. It works as a application
programming interface for web documents (HTML and XML documents). Moreover, it is a
"tree structure" representation built by the browser that allows the HTML structure to be easily
accessed by programming languages such as javascript to change or manipulate the document
structure, style, and content. It represents the document as nodes and objects in a tree structure.

Properties of Document Object

Access to document object properties is essential to manipulate the content of web pages.
Let's look at the properties of the document object that can be accessed and modified by the
document object.

➢ Window Object:- The window object is the top-level object in the hierarchy. It
includes property methods like document, location, etc.
➢ Document Object:- When the web page is loaded into the browser window, it
becomes the document object. it is a tree-like structure that includes all the web
page content. it includes,methods like getElementById , getElementByName to
access the web content via the DOM.
➢ Link Object:- Link objects are objects or attributes set using the link tag.
➢ Anchor Object:- anchor objects are the objects that are represented by the href
tag for reference of the links.
 ➢ Form object:- A Form object is enclosed between <form></form> tags that
represent a form on a web page. Examples of form tags include a checkbox, radio,
etc.
➢ Form Control Elements:- The form can have many elements to control the text
input field, button, radio button, etc.

17. Write a code for design a form with validation function using JavaScript.

Ans:-

<!DOCTYPE html>

<html>

<head>

<title>Form Validation Example</title>

</head>

<body>

<h1>Sign up for our newsletter</h1>

<form>

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

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

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

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

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

</form>

<script>

function validateForm() {

var name = document.forms[0]["name"].value;

var email = document.forms[0]["email"].value;

if (name == "") {
 alert("Name must be filled out");

return false;

if (email == "") {

alert("Email must be filled out");

return false;

if (!validateEmail(email)) {

alert("Please enter a valid email address");

return false;

return true;

function validateEmail(email) {

var re = /\S+@\S+\.\S+/;

return re.test(email);

document.querySelector('form').addEventListener('submit', function (e) {

e.preventDefault();

if (validateForm()) {

alert("Form submitted successfully!");

// Do whatever you want to do with the form data here

});

</script>

</body>

</html>
This program creates a simple form with two fields: name and email. When the user submits
the form, the validateForm function is called to perform validation on the form data. If any
of the fields are empty or the email address is not in a valid format, an alert message is
displayed and the function returns false, preventing the form from being submitted. If all
fields are filled out correctly, the function returns true, allowing the form to be submitted.

The program also includes a helper function called validateEmail which uses a regular
expression to check if the email address is in a valid format.

Finally, an event listener is added to the form's submit button. When the user clicks the
button, the listener calls preventDefault to stop the form from being submitted immediately.
Instead, it calls the validateForm function to perform validation on the form data. If
validation is successful, an alert message is displayed and the form data can be processed as
desired.

18. Explain Document Object properties in JavaScript.

Ans:-

the Document Object Model (DOM) is a programming interface for web documents. It
represents the page so that programs can change the document structure, style, and content.
Here are some of the most common properties and methods of the document object in
JavaScript:

1. document.getElementById(id): This method returns a reference to the first element

in the document with the specified id attribute. If no element is found, it returns null.
For example, if you have an element with the id attribute set to "myElement", you can
reference it in JavaScript like this:

var myElement = document.getElementById("myElement");

2. document.getElementsByClassName(className): This method returns an array-

like object (called a NodeList) containing all elements in the document that have the
specified class name. For example, if you have several elements with the class name
"myClass", you can reference them in JavaScript like this:

var myElements = document.getElementsByClassName("myClass");

3. document.getElementsByTagName(tagName): This method returns an array-like

object (called a NodeList) containing all elements in the document with the specified
tag name. For example, if you have several <p> elements on your page, you can
reference them in JavaScript like this:

var paragraphs = document.getElementsByTagName("p");

 4. document.querySelector(selector): This method returns the first element in the
document that matches the specified CSS selector. For example, if you have an
element with the class "myClass" inside a <div> element with the ID "myDiv", you
can reference it in JavaScript like this:

var myElement = document.querySelector("#myDiv .myClass");

5. document.querySelectorAll(selector): This method returns an array-like object

(called a NodeList) containing all elements in the document that match the specified
CSS selector. For example, if you have several elements with the class "myClass"
inside a <div> element with the ID "myDiv", you can reference them in JavaScript
like this:

var myElements = document.querySelectorAll("#myDiv .myClass");

6. document.cookie: This property returns a string containing all the cookies associated
with the current document. You can read and write cookies using this property. For
example, to read a cookie with the name "myCookie", you can use this code:
This code uses a regular expression to extract the value of the "myCookie" cookie
from the document.cookie string.

var myCookie =
document.cookie.replace(/(?:(?:^|.*;\s*)myCookie\s*\=\s*([^;]*).*$)|^.*$/, "$1");

7. document.write(content): This method writes the specified content directly to the

document. This can be useful for dynamically generating HTML content on the fly.
However, it's generally considered better practice to use the DOM (Document Object
Model) to create and manipulate elements instead of using document.write().

These are just some of the many properties and methods available on the document object.
By using these properties and methods, you can manipulate the structure, style, and content
of a web page dynamically with JavaScript.

19. Write a JQuery code for handling a events.

Ans:-

<!DOCTYPE html>
<html>
<head>
<title>jQuery Event Handling Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myButton">Click Me</button>
 <script>
// Attach an event handler to the button element
$("#myButton").click(function() {
alert("Button clicked!");
});
</script>
</body>
</html>

In this example, we have a button element with an id of myButton. We use the jQuery $
function to select the element, and then call the click function on it to attach an event handler.
The event handler is a function that will be executed when the button is clicked. In this case,
we simply display an alert message saying "Button clicked!".

You can replace the alert message with any other code you want to execute when the button
is clicked. You can also use other event types, such as mouseenter, mouseleave, keydown,
keyup, etc. by replacing click with the appropriate event type.

20. Write a JQuery code for Mouse enter Event.

Ans:-

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("div").mouseenter(function(){
alert('Cursor is in!');
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>Bring cursor over any of the squares to see the result:</p>

<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>