Internet Technology Questions THEORY

Internet Technology (BCAC501)
Sample Question
Topic-HTML, Web Technology, CSS, JavaScript
Q. Topic Page
No. Nos
1. State different type of lists with example in HTML 02 - 08
2. State the use of <pre> and <del> tags 09 - 09
3. Usage of hover, active, focus dynamic pseudo classes 10 - 11
4. Difference between class selector and id selector is CSS 12 - 12
5. Given coding example for inline style of CSS 13 - 13
6. Distinguish between GET and POST method in HTML 14 - 18
7. & 8. Features of scripting language. Difference with mark-up 19 - 20
9. Why XML is superior to HTML. 21 - 22
10. Static & Dynamic webpages; External CSS; META Tag 23 - 27
11. Different technology for making dynamic webpage 28 - 29
12. Role of JavaScript in client-side data validation 30 - 30
13. HTML DOM 31 - 33
14. HTML image map 34 - 41
15. JavaScript program to validate email id 42 - 43
16. basic tags of a HTML 43 - 43
17. Cookies and Session 44 - 45
18. Client-side scripting V/S Server-side scripting 45 - 46
19. CSS Types 46 - 46
20. Section where we can write Java Script 47 - 48
21. Frame 49 - 50
22. CGI 50 - 53
COMPILED BY: TMSL 1

1. State different type of lists with example in HTML.
HTML Lists help to display a list of information semantically. There are three types of lists
in HTML:
• Unordered list or Bulleted list (ul)
• Ordered list or Numbered list (ol)
• Description list or Definition list (dl)
HTML Unordered List or Bulleted List

In HTML unordered list, the list items have no specific order or sequence. An unordered list
is also called a Bulleted list, as the items are marked with bullets. It begins with the <ul> tag
and and closes with a </ul> tag. The list items begin with the <li> tag and end with </li> tag.
Syntax:
<ul>List of Items</ul>
Example of HTML Unordered List
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ul>
</body>
</html>
Output:
COMPILED BY: TMSL 2

Ordered List or Numbered List (ol)
In HTML, all the list items in an ordered list are marked with numbers by default instead of
bullets. An HTML ordered list starts with the <ol> tag and ends with the </ol> tag. The list
items start with the <li> tag and end with </li> tag.
Syntax:
<ol>List of Items</ol>
Example of HTML Ordered List
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ol>
</body>
</html>
Output:
Different Types of Ordered Lists in HTML
Instead of numbers, you can mark your list items with the alphabet: A, B, C or a,b,c, or
roman numerals: i, ii, iii, etc. You can do this by using the type attribute in the <ol> tag. Let’s
explore how to order lists with alphabets and roman numbers.
COMPILED BY: TMSL 3

To mark the list items with letters A, B, C, etc., you will have to specify A as the type
attribute’s value in the <ol> tag.
Here is an example to show the use of Upper case letters to list the items.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type="A">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>
</body>
</html>
Output:
Here is an example to show the use of Lower case letters to list the items.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type="a">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>
</body>
COMPILED BY: TMSL 4

</html>
Output:
Here is an example to show the use of Roman numerals to list the items.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type="i">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>
</body>
</html>
Output:
COMPILED BY: TMSL 5

HTML Description List or Definition List
In an HTML Description list or Definition List, the list items are listed like a dictionary or
encyclopedia. Each item in the description list has a description. You can use a description
list to display items like a glossary. You will need the following HTML tags to create a
description list:
• <dl> (Definition list) tag – Start tag of the definition list

• <dt> (Definition Term) tag – It specifies a term (name)
• <dd> tag (Definition Description) – Specifies the term definition
• </dl> tag (Definition list) – Closing tag of the definition list
Example of HTML Description List

<!DOCTYPE html>
<html>
<head>
<title>HTML Description List</title>
</head>
<body>
<dl>
<dt><b>Apple</b></dt>
<dd>A red colored fruit</dd>
<dt><b>Honda</b></dt>
<dd>A brand of a car</dd>
<dt><b>Spinach</b></dt>
<dd>A green leafy vegetable</dd>
</dl>
</body>
</html>
Output:
COMPILED BY: TMSL 6

HTML Nested Lists
An HTML Nested list refers to a list within another list. We can create a nested ordered list,
a nested unordered list, or a nested ordered list inside an unordered list.
Let us explore some examples of HTML lists within lists:
Example of an HTML Nested Ordered List

<!DOCTYPE html>
<html>
<head>
<title>HTML Nested Ordered List</title>
</head>
<body>
<ol>
<li>Banana</li>
<li> Apple
<ol>
<li>Green Apple</li>
<li>Red Apple</li>
</ol>
</li>
<li>Pineapple</li>
<li>Orange</li>
</ol>
</body>
</html>
Output:
Example of an HTML Nested Unordered List

<!DOCTYPE html>
<html>
<head>
<title>HTML Nested Unordered List</title>
COMPILED BY: TMSL 7
</head>
<body>
<ul>
<li>Fruits</li>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Orange</li>
</ul>
<li>Vegetables</li>
<ul>
<li>Spinach</li>
<li>Cauliflower</li>
<li>Beetroot</li>
</ul>
<li>Cereals</li>
<li>Nuts</li>
</ul>
</body>
</html>
Output:
COMPILED BY: TMSL 8

2. State the use of <pre> and <del> tags.
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font, and the text

preserves both spaces and line breaks. The text will be displayed exactly as
written in the HTML source code.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The pre element</h1>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
</body>
</html>
O/P:
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
The <del> tag defines text that has been deleted from a document. Browsers
will usually strike a line through deleted text.
Example:
COMPILED BY: TMSL 9

3. What are the usage of hover, active, and focus dynamic pseudo classes?
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
• Style an element when a user mouses over it

• Style visited and unvisited links differently
• Style an element when it gets focus
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
Anchor Pseudo-classes
Links can be displayed in different ways:
Example
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */

a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
COMPILED BY: TMSL 10

</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>
• a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective.
• a:active MUST come after a:hover in the CSS definition in order to be effective.

4. What is difference between class selector and id selector is css?
The difference between Class and ID: A Class name can be used by multiple
HTML elements, while an ID name must only be used by one HTML element
within the page.
Class selector
The class selector selects elements with a specific class attribute. It matches all
the HTML elements based on the contents of their class attribute. The . symbol,
along with the class name, is used to select the desired class.
Syntax
ID selector
The ID selector matches an element based on the value of its id attribute. In
order for the element to be selected, its ID attribute must exactly match the value
given in the selector. The # symbol and the id of the HTML element name are
used to select the desired element.
Syntax

5. Given coding example for inline style of css?
Using CSS
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
The most common way to add CSS, is to keep the styles in external CSS
files. However, in this tutorial we will use inline and internal styles, because
this is easier to demonstrate, and easier for you to try it yourself.
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>

6. Distinguish between GET and POST method in HTML.
What is HTTP?
The Hypertext Transfer Protocol (HTTP) is designed to enable communications
between clients and servers.
HTTP works as a request-response protocol between a client and server.
Example: A client (browser) sends an HTTP request to the server; then the
server returns a response to the client. The response contains status
information about the request and may also contain the requested content.
HTTP Methods
• GET
• POST
• PUT
• HEAD
• DELETE
• PATCH
• OPTIONS
• CONNECT
• TRACE
The two most common HTTP methods are: GET and POST.
The GET Method

GET is used to request data from a specified resource.
Note that the query string (name/value pairs) is sent in the URL of a GET
request:
/test/demo_form.php?name1=value1&name2=value2
Some notes on GET requests:
• GET requests can be cached

• GET requests remain in the browser history
• GET requests can be bookmarked
• GET requests should never be used when dealing with sensitive data
• GET requests have length restrictions
• GET requests are only used to request data (not modify)

The POST Method
POST is used to send data to a server to create/update a resource.
The data sent to the server with POST is stored in the request body of the
HTTP request:
POST /test/demo_form.php HTTP/1.1
name1=value1&name2=value2
Some notes on POST requests:
• POST requests are never cached

• POST requests do not remain in the browser history
• POST requests cannot be bookmarked
• POST requests have no restrictions on data length
Compare GET vs. POST

The following table compares the two HTTP methods: GET and POST.
GET POST
BACK Harmless Data will be

button/Reload re-submitted
(the browser
should alert the
user that the
data are about
to be re-
submitted)

Bookmarked Can be bookmarked Cannot be
bookmarked
Cached Can be cached Not cached
Encoding type application/x-www-form-urlencoded application/x-

www-form-
urlencoded or
multipart/form-
data. Use
multipart
encoding for
binary data
History Parameters remain in browser history Parameters are

not saved in
browser
history
Restrictions on Yes, when sending data, the GET method adds the No restrictions
data length data to the URL; and the length of a URL is limited
(maximum URL length is 2048 characters)
Restrictions on Only ASCII characters allowed No restrictions.

data type Binary data is
also allowed

Security GET is less secure compared to POST because data POST is a little
sent is part of the URL safer than GET
because the
Never use GET when sending passwords or other parameters are
sensitive information! not stored in
browser
history or in
web server
logs
Visibility Data is visible to everyone in the URL Data is not

displayed in
the URL
The PUT Method

PUT is used to send data to a server to create/update a resource.
The difference between POST and PUT is that PUT requests are idempotent.
That is, calling the same PUT request multiple times will always produce the
same result. In contrast, calling a POST request repeatedly have side effects
of creating the same resource multiple times.
The HEAD Method

HEAD is almost identical to GET, but without the response body.
In other words, if GET /users returns a list of users, then HEAD /users will
make the same request but will not return the list of users.
HEAD requests are useful for checking what a GET request will return before
actually making a GET request - like before downloading a large file or
response body.

The DELETE Method
The DELETE method deletes the specified resource.
The PATCH Method

The PATCH method is used to apply partial modifications to a resource.
The OPTIONS Method

The OPTIONS method describes the communication options for the target
resource.
The CONNECT Method

The CONNECT method is used to start a two-way communications (a tunnel)
with the requested resource.
The TRACE Method

The TRACE method is used to perform a message loop-back test that tests
the path for the target resource (useful for debugging purposes).

7. Write down the features of scripting language. How mark-up language is
different from scripting language.
8.
scripting language:
A scripting language is a programming language that executes tasks within

a special run-time environment by an interpreter instead of a
compiler. They are usually short, fast, and interpreted from source
code or bytecode.
features of scripting language:
Easy to learn and use

They are often pointed as great starting points for those interested in
learning programming.
That is because they are considerably easier to learn and use than
traditional languages. This means that you can quickly implement the
scripts you need without them requiring a lot of time and resources to be
invested in them.
Open-source and free

Anyone can use scripting languages without any restrictions.
All they have to do is learn them and implement their capabilities into their
structure. They are all open-source, which means anybody can
contribute to their development on a global scale.
This also contributes to the security of systems that use them.

Portable and cross-platform
Since scripting languages run off a remote server or from the visitor’s web
browser, they have another highly valuable benefit: they are portable and
cross-platform.
This means no additional software needs to be installed to run

them and any browser can execute their functions under any operating
system and platform such as WordPress.
Lighter memory requirement

Unlike what happens with traditional programming, scripting languages do
not require compilers to store an executable file to be run.
Instead, they use interpreters, which contributes to a much smaller

memory requirement on the system running them — either the server or
the user’s local machine.
How mark-up language is different from scripting

language:
Scripting Language: As the name suggest, it’s all about giving the script to
perform some certain task. Scripting languages are basically the subcategory
of programming languages which is used to give guidance to another program
or we can say to control another program, so it also involves instructions. It
basically connects one language to one another languages and doesn’t work
standalone. Javascript, PHP, Perl, Python, VBScript these all are the
examples of scripting language. Scripting languages need to be interpreted
(Scanning the code line by line, not like compiler in one go) instead of
compiled. There is no scope of compiler in scripting languages. Scripting
languages are most widely used to create a website.
Markup Languages: Markup languages are completely different from

programming languages and scripting languages. Markup languages prepare
a structure for the data or prepare the look or design of a page. These
are presentational languages and it doesn’t include any kind of logic or
algorithm, for example, HTML. HTML is not asking any kind of question to the
computer or it’s not comparing things and it’s not asking any logical question.
It’s just used to represent a view inside a web browser. It tells the browser how
to structure data for a specific page, layout, headings, title, table and all or
styling a page in a particular way. So basically it involves formatting data or it
controls the presentation of data. Examples of Markup languages are
HTML, CSS or XML. These languages are most widely used to design a
website.

9. Why XML is superior to HTML.
XML stands for eXtensible Markup Language and the full form of HTML is
Hypertext Markup Language.
XML focuses on the transport of data without managing the appearance or

presentation of the output. This makes XML easy to use as HTML focuses
on presentation and has complex coding.
The key difference between HTML and XML is that HTML displays data and
describes the structure of a webpage, whereas XML stores and transfers
data. XML is a standard language which can define other computer
languages, but HTML is a predefined language with its own implications.
Difference between HTML and XML: There are many differences

between HTML and XML. These important differences are given below:
HTML XML
HTML stands for Hyper Text XML stands for extensible Markup
Markup Language. Language.
HTML is static in nature. XML is dynamic in nature.
XML provides framework to define
HTML is a markup language. markup languages.
HTML can ignore small
errors. XML does not allow errors.
HTML is not Case sensitive. XML is Case sensitive.
HTML tags are predefined
tags. XML tags are user defined tags.
There are limited number of
tags in HTML. XML tags are extensible.
HTML does not preserve
white spaces. White space can be preserved in XML.
HTML tags are used for XML tags are used for describing the
displaying the data. data not for displaying.
In HTML, closing tags are
not necessary. In XML, closing tags are necessary.
HTML is used to display the
data. XML is used to store data.
HTML does not carry data it XML carries the data to and from
just display it. database.
HTML offers native object IN XML , the objects are expressed by
support. conventions using attributes.
XML document size is relatively large
as the approach of formatting
HTML document size is
and the codes both are lengthy.
relatively small.

Additional application is not
required for parsing of DOM(Document Object Model) is
required for parsing JavaScript
JavaScript code into the
HTML document. codes and mapping of text.
Example:
• html
<!DOCTYPE html>
<html>
<head>
<title>IT</title>
</head>
<body>
<h1>Internet Technology</h1>
<p>A Computer Application portal for Students</p>
</body>
</html>
Example:
• xml
<?xml version = "1.0"?>

<contactinfo>
<address category = "college">
<name>EM4/1</name>
<College>TECHNO</College>
<mobile>1234567890</mobile>
</address>
</contactinfo>
Output:
EM4/1
TECHNO
1234567890

10. Why do we need to have a dynamic webpage? What is the advantage of
using style sheet in formatting the different elements of webpages in a
websites? How can we link a style sheet to a webpage?
What are advantages and limitation of static web pages?
What is a Static Web Page?

A static website contains simple HTML pages and supporting files (e.g.,
Cascading Style Sheets (CSS), JavaScript (JS)) hosted on a web server.
When a site visitor requests a static page, say, by clicking a link, selecting
a browser bookmark, or entering a URL; the web server sends the page
directly to the web browser without modifying the final content of the page.
Benefits
• Little everyday maintenance. The content remains the same
until it is updated.
• Faster loading speed. The website doesn’t have to contact the
back-end system every time a web page loads.
• Accommodates any kind of user traffic
Disadvantages
• Usually lack components such as logins and real time
notifications.
• User interactivity is limited. This discourages user retention.
• Can be time consuming and prone to technical errors. Each
time a new component is added, the entire website must be rebuilt
and redeployed to the server.
What is a Dynamic Web Page?

A dynamic page displays different content for different users while retaining
the same layout and design. Such pages, usually written in CGI, AJAX, ASP

or ASP.NET, take more time to load than simple static pages. They’re
frequently implemented to show information that changes frequently, e.g.,
weather updates or stock prices.
Dynamic pages usually contain application programs for different services

and require server-side resources like databases. A database allows the
page creator to separate the website’s design from the content to be
displayed to users. Once they upload content into the database, it is
retrieved by the website in response to a user request.
Benefits
• Easy to add new elements. Adding new content to the website
as dynamic websites can be updated easily and quickly
• Easy to redesign entire website. Site-wide changes to design
can be made instantly. If you want a new colour theme or choice
of font, it’s a lot easier to change this on a dynamic website.
Usually one click is made and the whole website has the change,
unlike a static website where each page would have to be changed
individually.
• More interactive. A dynamic website can allow for personalised
user experience. Logging into an account and personalised product
suggestions are some great ways to incorporate user
personalisation.
Disadvantages
• Prone to slow load times. The server processes user input and
then renders the result page.
• Can be costly. Creating a dynamic website requires technically
skilled programmers who understand how to build a website.
• Database and server must be purchased
Two Types of Dynamic Web Pages

• Client-side Scripting: A web page that changes in response to an
action within it (“client-side event”) uses client-side scripting. These
scripts generate “client-side content” on the user’s computer, rather
than the web server.
• Server-side Scripting: A web page that changes when it’s loaded
or visited, or based on what’s submitted to it, uses server-side
scripting. When the pages are loaded, server-side content is
generated. Examples include login pages, shopping carts and
submission forms.
How are Dynamic Web Pages Processed?

When the web server receives a user request for a dynamic page, it does
not send the page directly to the requesting browser as it would do with a
static page. Instead, it passes the page to the application server which then
completes three activities:
• Read the code on the page
• Finish the page according to the code’s instructions
• Remove the code from the page
This results in a static page that’s passed back to the web server by the
application server, and then to the requesting browser for display.
The application server cannot communicate directly with the database, so

it requires a database driver that functions as an interpreter and lets the
application read and manipulate data that would otherwise be
indecipherable.
What are the Benefits of CSS?

There are a number of benefits of CSS, including:
1) Faster Page Speed

More code means slower page speed. And CSS enables you to use less
code. CSS allows you to use one CSS rule and apply it to all occurrences of
a certain tag within an HTML document.
2) Better User Experience

CSS not only makes web pages easy on the eye, it also allows for user-
friendly formatting. When buttons and text are in logical places and well
organized, user experience improves.
3) Quicker Development Time

With CSS, you can apply specific formatting rules and styles to multiple
pages with one string of code. One cascading style sheet can be replicated
across several website pages. If, for instance, you have product pages that
should all have the same formatting, look, and feel, writing CSS rules for
one page will suffice for all pages of that same type.
4) Easy Formatting Changes

If you need to change the format of a specific set of pages, it’s easy to do
so with CSS. There’s no need to fix every individual page. Just edit the
corresponding CSS stylesheet and you’ll see changes applied to all the
pages that are using that style sheet.
5) Compatibility Across Devices

Responsive web design matters. In today’s day and age, web pages must
be fully visible and easily navigable on all devices. Whether mobile or tablet,
desktop, or even smart TV, CSS combines with HTML to make responsive
design possible.
How can we link a style sheet to a webpage?
External Styles
External style sheets are the most common method of applying styles to a
website. Most modern websites use an external stylesheet to apply site-
wide styles to the whole website.
External styles refer to creating a separate file that contains all style
information. This file is then linked to from as many HTML pages as you
like. This will often be the whole website.
To add an external stylesheet to a web page, use the <link> tag, providing
the URL of the style sheet in the href attribute, as well as rel="stylesheet".
For the following example, I've taken the styles from the above (embedded)
example, moved them to an external style sheet, then linked to that file.
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<link rel="stylesheet" href="/css/tutorial/example.css">
</head>
<body>
<h1>Embedded Styles</h1>
<p id="intro">Allow you to define styles for the whole
document.</p>
<p class="colorful">This has a style applied via a
class.</p>
</body>
</html>

HTML <meta> Tag
Definition and Usage
The <meta> tag defines metadata about an HTML document. Metadata is

data (information) about data.
<meta> tags always go inside the <head> element, and are typically used
to specify character set, page description, keywords, author of the
document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page),

search engines (keywords), and other web services.
There is a method to let web designers take control over the viewport (the
user's visible area of a web page), through the <meta> tag
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
O/P:-
All meta information goes in the head section...

11. What are the different technology available to make a webpage dynamic?
Web pages that use server-side scripting are often created with the help of
server-side languages such as PHP, Perl, ASP, ASP.NET, JSP,
ColdFusion and other languages. These server-side languages typically
use the Common Gateway Interface (CGI) to produce dynamic web pages.
list some of the popular technologies that are used to develop

a dynamic website.
Angular:
Features of Angular:
• Angular is an easy-to-use Client-side framework with a very sharp

learning curve.
• It is a completely secured Client-Side web framework with top
features like DOM sanitation.
• Angular helps the developers with different app development modes
including Web, Mobile Web, Native Desktop, Native Mobile, and so
on.
• Angular is extensively prevalent in the industry as it has been
developed by Google.
ReactJS:
Features of React.js:
• Speed: Since the developer can write code for an individual part of
the application that doesn’t affect any other part of the code, it results
in boosting the development process.
• Flexibility: Compared to other frameworks, ReactJS tends to be
more flexible due to its modular framework.
• Reusable components: One of the main advantages of using
ReactJS is its ability to reuse components. Developers can save time
as they do not have to write a variety of different codes for the same
features. Additionally, any changes made to one part of the
application will not affect other parts.
Laravel Framework:
Features of Laravel:
• Easy to get started: Developing websites and web applications

using the Laravel PHP framework is easy and accessible. You don’t
need to write repetitive codes again and again. Laravel offers libraries
that you can use to build a website or web application from scratch.
• Open-source: This free, open-source framework allows you to easily
build large and complex web applications. You only need a text editor
and a PHP installation to get started.
• Community support: Due to its large community, it is one of the
strongest players among other frameworks. When you report a bug
or security breach in the framework, the community responds
quickly.
• Object-oriented libraries: Unlike other PHP frameworks, Laravel
comes with a wide range of pre-installed object-oriented libraries.
One of these libraries is the authentication library. All of these
libraries are jam-packed with amazing features that can be
implemented and used by developers of all levels.
WordPress:
Features of WordPress:
• User-Friendly CRM: WordPress with its user-friendly CRM makes it

easy for the developer to navigate through the backend of their
WordPress, edit pages, upload content, and more without a lot of
effort.
• Plugins: More than 54,000 plugins are available to WordPress users,
most of them free. With these plugins, you can customize and
enhance any WordPress site.
• Search Engine Optimization Ready: WordPress sites have
everything an SEO-ready site needs. WordPress makes sites rank
higher in search results with its constant codes for favorable Google
indexing, customizable SEO components for each page, and SEO
plugins.

12. Write a brief notes on the role of JavaScript in client side data validation
with suitable example. State also briefly the need of client side validation.
Why scripting required?
Different types of client-side validation

There are two different types of client-side validation that you'll encounter
on the web:
• Built-in form validation uses HTML form validation features, which

we've discussed in many places throughout this module. This
validation generally doesn't require much JavaScript. Built-in form
validation has better performance than JavaScript, but it is not as
customizable as JavaScript validation.
• JavaScript validation is coded using JavaScript. This validation is
completely customizable, but you need to create it all (or use a
library).
Validating forms using JavaScript

You must use JavaScript if you want to take control over the look and feel
of native error messages. In this section we will look at the different ways
to do this.
JavaScript Example
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
Need of validation at client side:

• We want to get the right data, in the right format. Our applications
won't work properly if our users' data is stored in the wrong format, is
incorrect, or is omitted altogether.
• We want to protect our users' data. Forcing our users to enter secure
passwords makes it easier to protect their account information.
• We want to protect ourselves. There are many ways that malicious
users can misuse unprotected forms to damage the application.

13. Write Short note on HTML DOM.
The HTML DOM is an Object Model for HTML. It defines:
• HTML elements as objects

• Properties for all HTML elements
• Methods for all HTML elements
• Events for all HTML elements
The HTML DOM is an API (Programming Interface) for JavaScript:
• JavaScript can add/change/remove HTML elements

• JavaScript can add/change/remove HTML attributes
• JavaScript can add/change/remove CSS styles
• JavaScript can react to HTML events
• JavaScript can add/change/remove HTML events
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
Finding HTML Elements

When you want to access HTML elements with JavaScript, you have to find
the elements first.

There are a couple of ways to do this:
• Finding HTML elements by id

• Finding HTML elements by tag name
• Finding HTML elements by class name
• Finding HTML elements by CSS selectors
• Finding HTML elements by HTML object collections
Finding HTML Element by Id

The easiest way to find an HTML element in the DOM, is by using the element
id.
This example finds the element with id="intro":
Example
var myElement = document.getElementById("intro");
If the element is found, the method will return the element as an object (in
myElement).
If the element is not found, myElement will contain null.
Finding HTML Elements by Tag Name

This example finds all <p> elements:
Example
var x = document.getElementsByTagName("p");
This example finds the element with id="main", and then finds all <p>
elements inside "main":
Example
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Finding HTML Elements by Class Name

If you want to find all HTML elements with the same class name, use
getElementsByClassName().
This example returns a list of all elements with class="intro".

Example
var x = document.getElementsByClassName("intro");
Finding HTML Elements by CSS Selectors

If you want to find all HTML elements that matches a specified CSS selector
(id, class names, types, attributes, values of attributes, etc), use the
querySelectorAll() method.
This example returns a list of all <p> elements with class="intro".
Example
var x = document.querySelectorAll("p.intro");

14. HTML image map.
With HTML image maps, you can create clickable areas on an image.
Image Maps
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.
Try to click on the computer, phone, or the cup of coffee in the image below:
Example
Here is the HTML source code for the image map above:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="comput
er.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.h
tm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.ht

m">
</map>
How Does it Work?

The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.
To create an image map you need an image, and some HTML code that
describes the clickable areas.
The Image
The image is inserted using the <img> tag. The only difference from other
images is that you must add a usemap attribute:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.
Tip: You can use any image as an image map!
Create Image Map

Then, add a <map> element.
The <map> element is used to create an image map, and is linked to the
image by using the required name attribute:
The name attribute must have the same value as the <img>'s usemap attribute
.
The Areas
Then, add the clickable areas.

A clickable area is defined using an <area> element.
Shape
You must define the shape of the clickable area, and you can choose one of
these values:
• rect - defines a rectangular region

• circle - defines a circular region
• poly - defines a polygonal region
• default - defines the entire region
You must also define some coordinates to be able to place the clickable area
onto the image.
Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis and one
for the y-axis.
So, the coordinates 34,44 is located 34 pixels from the left margin and 44
pixels from the top:

The coordinates 270,350 is located 270 pixels from the left margin and 350
pixels from the top:
Now we have enough data to create a clickable rectangular area:
Example
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
This is the area that becomes clickable and will send the user to the page
"computer.htm":

Shape="circle"
To add a circle area, first locate the coordinates of the center of the circle:
337,300
Then specify the radius of the circle:
44 pixels
Now you have enough data to create a clickable circular area:

Example
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
"coffee.htm":
Shape="poly"
The shape="poly" contains several coordinate points, which creates a shape
formed with straight lines (a polygon).
This can be used to create any shape.
Like maybe a croissant shape!
How can we make the croissant in the image below become a clickable link?

We have to find the x and y coordinates for all edges of the croissant:
The coordinates come in pairs, one for the x-axis and one for the y-axis:
Example
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,
329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
"croissant.htm":
Image Map and JavaScript

A clickable area can also trigger a JavaScript function.
Add a click event to the <area> element to execute a JavaScript function:
Example
Here, we use the onclick attribute to execute a JavaScript function when the
area is clicked:
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="m
yFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>

15. Write a JavaScript program to validate email id using regular expression.
function ValidateEmail(mail)
{
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))
{
return (true)
}
alert("You have entered an invalid email address!")
return (false)
}
Example of total Program:
Regular Expression Pattern

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking email</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input an email and Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li> </li>
<li class="submit"><input type="submit" name="submit" value="Submit"
onclick="ValidateEmail(document.form1.text1)"/></li>
<li> </li>
</ul>
</form>
</div>
<script src="email-validation.js"></script>
</body>
</html>
JavaScript Code
function ValidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
alert("Valid email address!");
document.form1.text1.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}
}
CSS Code
li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}
16. Illustrate the basic tags of a HTML page with example.
REFERENCE: Given in 1st pdf (HTML related)

17. What are cookies and session? Why is a session object considered more
secure and advantages than cookies?
Difference Between Session and Cookies:
Cookie Session
Cookies are client-side files

on a local computer that hold Sessions are server-side files that contain
user information. user data.
When the user quits the browser or logs

Cookies end on the lifetime out of the programmed, the session is
set by the user. over.
It can only store a certain

amount of info. It can hold an indefinite quantity of data.
We can keep as much data as we like

within a session, however there is a
The browser’s cookies have a maximum memory restriction of 128 MB
maximum capacity of 4 KB. that a script may consume at one time.
Because cookies are kept on

the local computer, we don’t
need to run a function to start To begin the session, we must use the
them. session start() method.
Session are more secured compare than

Cookies are not secured. cookies.
Cookies stored data in text

file. Session save data in encrypted form.
Cookies stored on a limited

data. Session stored a unlimited data.
In PHP, to get the data from

Cookies , $_COOKIES the In PHP , to set the data from Session,
global variable is used $_SESSION the global variable is used

In PHP, to destroy or remove the data
We can set an expiration date stored within a session, we can use the
to delete the cookie’s data. It session_destroy() function, and to unset
will automatically delete the a specific variable, we can use the unset()
data at that specific time. function.
18. Difference between client-side scripting and server-side scripting.
Difference between client-side scripting and server-side scripting:
Client-side scripting Server-side scripting
Source code is not visible to the user

because its output
Source code is visible to the of server-sideside is an HTML page.
user.
Its main function is to provide Its primary function is to manipulate

the requested output to the and provide access to the respective
end user. database as per the request.
In this any server-side technology can

be used and it does not
It usually depends on the depend on the client.
browser and its version.
It runs on the user’s

computer. It runs on the webserver.
There are many advantages The primary advantage is its ability to

linked with this like faster. highly customize, response
response times, a more requirements, access rights based on
interactive application. user.
It does not provide security

for data. It provides more security for data.

Client-side scripting Server-side scripting
It is a technique that uses scripts on

It is a technique used in web the webserver to produce a response
development in which scripts that is customized for each client’s
run on the client’s browser. request.
HTML, CSS, and javascript

are used. PHP, Python, Java, Ruby are used.
No need of interaction with It is all about interacting with the

the server. servers.
It reduces load on processing It surge the processing load on the

unit of the server. server.
19. What are the different ways of adding style (CSS) to a webpage?
REFERENCE: Given in 1st pdf (HTML related)

20.
JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed

when "called" for.
For example, a function can be called when an event occurs, like when the
user clicks a button.
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML

page, or in both.
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of

an HTML page.
The function is invoked (called) when a button is clicked:

Example
<html><head>
<script>
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body></html>

JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an

HTML page.
The function is invoked (called) when a button is clicked:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>

21. What is Frame? Explain merits and demerits of frame.
Not Supported in HTML5.

The <frame> tag was used in HTML 4 to define one particular window
(frame) within a <frameset>.
What to Use Instead?

Example
Use the <iframe> tag to embed another document within the current HTML
document:
<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe src="https://www.TMSL.com" title=" Engineering College">
</iframe>
</body>
</html>
The advantages / merits of HTML frames include:
• The main advantage of frames is that it allows the user to view multiple
documents within a single Web page.
• It is possible to load pages from different servers in a single frameset.
• The concern that older browsers do not support frames can be addressed
using the <noframe> tag. This tag provides a section in an HTML
document to include alternative content for browsers without support
for frames. However, it requires that the Web designer provide two
formats for one page.
The major disadvantages / demerits of using frames are:
• Bookmarks only bookmark the top level pages (the framesets

themselves). A user is unable to bookmark any of the Web pages viewed
within a frame.
• Frames can make the production of a website complicated, although
current software addresses this problem.
• It is easy to create badly constructed websites using frames. The most
common mistake is to include a link that creates duplicate Web pages
displayed within a frame.
• Search engines that reference a Web page only give the address of that
specific document. This means that search engines might link directly to
a page that was intended to be displayed within a frameset.

• Users have become so familiar with normal navigation using tables, the
back button, and so on, that navigating through a site that uses frames
can be a problem.
• The use of too many frames can put a high workload on the server. A
request for, say, ten files, each 1 Kilobyte in size, requires a greater
workload than a request for a single 10 Kilobyte file.
• Older browsers do not support frames.
22. What is CGI?
Common Gateway Interface (CGI)
The Common Gateway Interface (CGI) provides the middleware

between WWW servers and external databases and information sources.
The World Wide Web Consortium (W3C) defined the Common Gateway
Interface (CGI) and also defined how a program interacts with a Hyper
Text Transfer Protocol (HTTP) server. The Web server typically passes the
form information to a small application program that processes the data
and may send back a confirmation message. This process or convention
for passing data back and forth between the server and the application is
called the common gateway interface (CGI).
Features of CGI:
• It is a very well defined and supported standard.

• CGI scripts are generally written in either Perl, C, or maybe just a
simple shell script.
• CGI is a technology that interfaces with HTML.
• CGI is the best method to create a counter because it is currently the
quickest
• CGI standard is generally the most compatible with today’s browsers
Advantages of CGI:
• The advanced tasks are currently a lot easier to perform in CGI than in
Java.
• It is always easier to use the code already written than to write your
own.
• CGI specifies that the programs can be written in any language, and
on any platform, as long as they conform to the specification.
• CGI-based counters and CGI code to perform simple tasks are available
in plenty.

Disadvantages of CGI:
• In Common Gateway Interface each page load incurs overhead by

having to load the programs into memory.
• Generally, data cannot be easily cached in memory between page
loads.
• There is a huge existing code base, much of it in Perl.
• CGI uses up a lot of processing time.
Each script line starts with a command character which specifies a

command for the script interpreter. The scripting language itself is simple
and works as follows:
The script interpreter include a file from the file system and sends the
i content to the web browser.
t The line of text that follows will be sent to the browser.
Calls the function netCGI_Script from the HTTP_Server_CGI.c file. It

c may be followed by a line of text which is passed to netCGI_Script as a
pointer to an environment variable.
# This is a comment line and is ignored by the interpreter.
. Denotes the end of the script.
The script files need to use the reserved filename extension of cgi, for the
HTTP server's script interpreter to recognize and process the files
accordingly.
The script line length is limited to 120 characters.
Application Example
Here is an example of a web page written in the scripting language. This

web page is used to edit or change the system password. The web page is
stored in three files. Two of them are
static: pg_header.inc and pg_footer.inc. The third (the main file) is the
script file that generates dynamic data: system.cgi. It contains the
following:
t <html><head><title>System Settings</title>
t <script language=JavaScript>
t function changeConfirm(f){
t if(!confirm('Are you sure you want\nto change the password?')) return;
t f.submit();
t }
t </script></head>
i pg_header.inc
t <h2 align=center><br>System Settings</h2>
t <p><font size="2">This page allows you to change the system
t <b>Password</b>, for the username <b>admin</b>. Default <b>realm</b>,
t <b>user</b> and <b>password</b> can be set in configuraton file.<br><br>
t This Form uses a <b>POST</b> method to send data to a Web server.</font></p>
t <form action=index.htm method=post name=cgi>
t <input type=hidden value="sys" name=pg>
t <table border=0 width=99%><font size="3">
t <tr bgcolor=#aaccff>
t <th width=40%>Item</th>
t <th width=60%>Setting</th></tr>
# Here begin data setting which is formatted in HTTP_Server_CGI.C module

c d 1 <tr><td><img src=pabb.gif>Authentication</TD><TD><b>%s</b></td></tr>
t <tr><td><img src=pabb.gif>Password for user 'admin'</td>
c d 2 <td><input type=password name=pw0 size=10 maxlength=10

value="%s"></td></tr>
t <tr><td><img src=pabb.gif>Retype your password</td>
c d 2 <td><input type=password name=pw2 size=10 maxlength=10

value="%s"></td></tr>
t </font></table>
# Here begin button definitions

t <p align=center>
t <input type=button name=set value="Change" onclick="changeConfirm(this.form)">
t <input type=reset value="Undo">
t </p></form>
i pg_footer.inc
. End of script must be closed with period.

The web page header, which is static and does not change when the web
page is generated, is moved into the separate header file pg_header.inc.
It is included in the final HTML that will be delivered by the HTTP server.
This is done using
i pg_header.inc
The web page footer is also static and is moved into

the pg_footer.inc file. It is not changed when the web page generates but
is simply included in the script using
i pg_footer.inc
This is how the generated web page looks like, with the dynamically
generated items in the Setting column:

Internet Technology Questions THEORY

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Internet Technology Questions THEORY

Uploaded by

Copyright:

Available Formats

Internet Technology (BCAC501)

COMPILED BY: TMSL 1

HTML Unordered List or Bulleted List

COMPILED BY: TMSL 2

Different Types of Ordered Lists in HTML

COMPILED BY: TMSL 3

COMPILED BY: TMSL 4

COMPILED BY: TMSL 5

• <dl> (Definition list) tag – Start tag of the definition list

Example of HTML Description List

COMPILED BY: TMSL 6

Let us explore some examples of HTML lists within lists:

Example of an HTML Nested Ordered List

Example of an HTML Nested Unordered List

COMPILED BY: TMSL 8

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font, and the text

COMPILED BY: TMSL 9

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it

The syntax of pseudo-classes:

Links can be displayed in different ways:

/* mouse over link */

COMPILED BY: TMSL 10

COMPILED BY: TMSL 11

COMPILED BY: TMSL 12

• Inline - by using the style attribute inside HTML elements

An inline CSS uses the style attribute of an HTML element.

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

COMPILED BY: TMSL 13

HTTP works as a request-response protocol between a client and server.

The GET Method

Some notes on GET requests:

• GET requests can be cached

COMPILED BY: TMSL 14

POST /test/demo_form.php HTTP/1.1

Some notes on POST requests:

• POST requests are never cached

Compare GET vs. POST

BACK Harmless Data will be

COMPILED BY: TMSL 15

Cached Can be cached Not cached

Encoding type application/x-www-form-urlencoded application/x-

History Parameters remain in browser history Parameters are

Restrictions on Only ASCII characters allowed No restrictions.

COMPILED BY: TMSL 16

Visibility Data is visible to everyone in the URL Data is not

The PUT Method

The HEAD Method

COMPILED BY: TMSL 17

The PATCH Method

The OPTIONS Method

The CONNECT Method

The TRACE Method

COMPILED BY: TMSL 18

A scripting language is a programming language that executes tasks within

features of scripting language:

Easy to learn and use

Open-source and free

This also contributes to the security of systems that use them.

COMPILED BY: TMSL 19

This means no additional software needs to be installed to run