Scribd
Upload
10 views56 pages

Web Design Notes

This document covers the fundamentals of web design, including the Internet's basic concepts, HTML structure, and the use of CSS and JavaScript for dynamic web pages. It explains key components such as Internet domains, server identities, and various HTML elements like forms and lists. Additionally, it discusses DHTML and the advantages of JavaScript, including data types, variables, and interactive features for web development.

Uploaded by

sivavigneshwarant
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views56 pages

Web Design Notes

This document covers the fundamentals of web design, including the Internet's basic concepts, HTML structure, and the use of CSS and JavaScript for dynamic web pages. It explains key components such as Internet domains, server identities, and various HTML elements like forms and lists. Additionally, it discusses DHTML and the advantages of JavaScript, including data types, variables, and interactive features for web development.

Uploaded by

sivavigneshwarant
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

THIRD YEAR – SEMESTER – VI

Core Paper XV - Web Design (Theory)

Unit-I

Internet: Basic Concepts – Communicating on Internet – Internet Domains – Internet Server


Identities – Establishing Connectivity on the Internet

1. Internet: Basic Concepts

The Internet is a global network of interconnected computers that communicate using standard
protocols such as TCP/IP (Transmission Control Protocol / Internet Protocol).
It allows users to share information, exchange messages, and access services like email,
websites, and online applications.

Key features:

 Global connectivity: Links millions of computers worldwide.


 Client-server model: Clients request services (like a web page), and servers provide
them.
 Protocols: Rules for communication (e.g., HTTP, FTP, SMTP).
 Resources: Web pages, files, videos, etc., available online.

2. Communicating on the Internet

Communication on the Internet happens through various services and tools that allow people to
share information instantly.

Common communication methods:

 Email (Electronic Mail): Sending and receiving messages electronically.


 Chat and Instant Messaging: Real-time text communication (e.g., WhatsApp,
Messenger).
 Video Conferencing: Real-time audio and video communication (e.g., Zoom, Google
Meet).
 Social Networking: Platforms like Facebook, X (Twitter), and Instagram for sharing and
connecting.
 Forums and Blogs: Online discussion or publishing platforms.

All these rely on Internet protocols like SMTP (for emails), HTTP (for web browsing), and
VoIP (for voice/video calls).
3. Internet Domains

An Internet domain is a human-readable name used to identify websites and network


addresses instead of using numeric IP addresses.

Example:

 IP address: [Link]
 Domain name: [Link]

Domain structure:

 Top-Level Domain (TLD): The last part of a domain name (e.g., .com, .org, .edu, .in).
 Second-Level Domain: The main name (e.g., google in [Link]).
 Subdomain: A part of a larger domain (e.g., [Link]).

Domain Name System (DNS): Converts domain names into IP addresses so that computers can
locate each other on the Internet.

4. Internet Server Identities

Servers on the Internet have unique identities to provide and manage services.

Types of Internet servers:

 Web Server: Hosts web pages (e.g., Apache, Nginx).


 Mail Server: Handles emails (e.g., Gmail servers).
 FTP Server: Manages file transfers.
 DNS Server: Translates domain names into IP addresses.

Server identity is defined by:

 IP address: A unique numerical label (e.g., [Link]).


 Domain name: A human-friendly version of the IP address.
 URL (Uniform Resource Locator): The complete address to access a specific resource
(e.g., [Link]

5. Establishing Connectivity on the Internet

To connect to the Internet, a user must establish a connection between their device and the global
network.
Steps and components involved:

1. Internet Service Provider (ISP): A company that provides Internet access.


2. Hardware requirements:
o Modem or Router
o Network Interface Card (NIC)
3. Connection types:
o Dial-up: Older, slower method using telephone lines.
o Broadband: High-speed connection via DSL, fiber, or cable.
o Wireless: Using Wi-Fi or mobile networks (4G/5G).
4. Configuration:
o Setting up IP addresses (static or dynamic).
o Using DNS for name resolution.
o Verifying connection via a browser or network command (e.g., ping).

Once connectivity is established, data can be sent and received globally using Internet protocols.

---------------------------------------------------------------------------------------------------------------------
Unit II
Introduction to HTML: Anchor Tag – Hyperlink - Head and Body Section – Heading -
Horizontal Ruler – Paragraphs – Tags - Images and Picture – Lists – Tables – Frames - Forms
and forms elements.
Introduction to HTML

HTML (HyperText Markup Language) is the standard language used to create and design
web pages.
It uses tags to structure content like text, images, links, tables, and forms on a webpage.
Every HTML document begins with <html> and ends with </html>.

Basic structure:

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my first webpage.</p>
</body>
</html>

1. Anchor Tag (<a>) and Hyperlink

The anchor tag <a> is used to create hyperlinks — clickable text or images that connect one
webpage to another.

Syntax:

<a href="[Link] Google</a>

Attributes:

 href → Specifies the URL (destination).


 target="_blank" → Opens link in a new tab.
 title → Shows tooltip text on hover.

Example:

<a href="[Link]" target="_blank" title="About Us">About Page</a>


2. Head and Body Section

HTML documents have two main parts:

Head Section (<head>)

Contains metadata (information about the page) and links to external files like CSS or
JavaScript.
Example:

<head>
<title>My Website</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="[Link]">
</head>
Body Section (<body>)

Contains the visible content of the webpage (text, images, tables, etc.).
Example:

<body>
<h1>Welcome!</h1>
<p>This is the content area.</p>
</body>

3. Heading Tags

HTML provides six levels of headings from <h1> (largest) to <h6> (smallest).

Example:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>

Use:
Headings help organize content and improve SEO (search engine optimization).

4. Horizontal Ruler (<hr>)

Used to create a horizontal line across the page to separate sections.

Example:

<p>Introduction</p>
<hr>
<p>Details</p>

Attributes:

 size → thickness of the line


 color → color of the line
 width → length of the line

Example:

<hr size="3" color="blue" width="80%">

5. Paragraphs (<p>)

Used to define paragraphs of text. Browsers automatically add space before and after
paragraphs.

Example:

<p>This is a paragraph of text.</p>

Attributes:

 align="left|center|right|justify" → text alignment

Example:

<p align="justify">This text is justified.</p>

6. Tags

Tags are the building blocks of HTML.


They usually come in pairs: an opening tag <tag> and a closing tag </tag>.

Types of tags:

 Container tags: Have both opening and closing (e.g., <p>...</p>, <body>...</body>).
 Empty tags: Have no closing tag (e.g., <br>, <hr>, <img>).
7. Images and Picture (<img>)

Used to display images on a webpage.

Syntax:

<img src="[Link]" alt="Description" width="300" height="200">

Attributes:

 src → Path or URL of the image


 alt → Alternative text (shown if image not found)
 width and height → Image dimensions

8. Lists

Lists are used to display items in an organized way.

(a) Ordered List (<ol>) → numbered


<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
(b) Unordered List (<ul>) → bulleted
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
(c) Definition List (<dl>)
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>

9. Tables

Used to display data in rows and columns.

Basic structure:

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>

Tags:

 <table> → Table container


 <tr> → Table row
 <th> → Table header cell (bold & centered)
 <td> → Table data cell

10. Frames

Frames are used to divide a webpage into multiple sections where each section can load a
different HTML document.
(⚠️Note: Frames are obsolete in modern HTML, replaced by CSS and <iframe>.)

Example using <iframe>:

<iframe src="[Link]" width="500" height="300"></iframe>

11. Forms and Form Elements

Forms are used to collect user input (like login details, feedback, etc.).

Basic structure:

<form action="[Link]" method="post">


Name: <input type="text" name="username"><br>
Password: <input type="password" name="password"><br>
Gender:
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female<br>
<input type="submit" value="Submit">
</form>
Common Form Elements:

Tag Description

<input> Used for text fields, checkboxes, radio buttons, etc.

<textarea> For multi-line text input

<select> and <option> Drop-down menu

<button> Adds a clickable button

<label> Describes an input field

<fieldset> and <legend> Group form elements

---------------------------------------------------------------------------------------------------------------------
Unit III
DHTML and Style sheets: Defining styles - Elements of style - Linking a style sheet to a html
documents - Inline style - External style sheets - Multiple styles- Web page designing.

DHTML and Style Sheets

1. Introduction to DHTML

DHTML (Dynamic HTML) stands for Dynamic HyperText Markup Language.


It is not a single technology but a combination of several web technologies used together to
create interactive and animated web pages.

DHTML = HTML + CSS + JavaScript + DOM (Document Object Model)

Purpose:
To make web pages dynamic, responsive, and interactive without reloading the page.

Example features:

 Moving text or images


 Drop-down menus
 Interactive forms
 Real-time content updates

2. Defining Styles

Style defines how HTML elements appear on a web page — including color, font, size, spacing,
and layout.
Styles are written using CSS (Cascading Style Sheets).

Syntax:

selector {
property: value;
}

Example:

p{
color: blue;
font-size: 16px;
}
Here,

 p → selector (applies to all paragraph tags)


 color and font-size → properties
 blue and 16px → values

3. Elements of Style

The elements of style refer to the different CSS properties that control the appearance of
HTML elements.

Common style elements:

Element Example Description

Color color: red; Changes text color

Font font-family: Arial; Changes text font

Size font-size: 20px; Sets text size

Background background-color: yellow; Adds background color

Margin margin: 10px; Adds space outside element

Padding padding: 5px; Adds space inside element

Border border: 1px solid black; Adds border around element

Text alignment text-align: center; Centers the text

4. Linking a Style Sheet to an HTML Document

You can link an external CSS file to your HTML document using the <link> tag inside the
<head> section.

Example:

<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>

Explanation:
 rel="stylesheet" → Specifies the relationship between the HTML and CSS file.
 href="[Link]" → Specifies the path of the external CSS file.

This method allows one CSS file to control the design of multiple web pages.

5. Inline Style

Inline CSS is used to apply a style directly to a single HTML element using the style attribute.

Example:

<p style="color: green; font-size: 18px;">This is a styled paragraph.</p>

Use: Quick formatting for individual elements.


Limitation: Hard to maintain for large websites.

6. External Style Sheets

An external style sheet is a separate .css file that contains all the styles for your website.

Example:
File: [Link]

body {
background-color: lightblue;
}
h1 {
color: darkblue;
text-align: center;
}

Link it to HTML:

<link rel="stylesheet" href="[Link]">

Advantages:

 Can be reused across multiple pages


 Easier to maintain and update
 Keeps HTML code clean and organized
7. Multiple Styles

A single webpage can use multiple style sheets — internal, external, or inline.

Priority order (highest to lowest):

1. Inline style (inside HTML tag)


2. Internal style sheet (<style> tag in <head>)
3. External style sheet (linked CSS file)
4. Browser default style

Example:

<head>
<link rel="stylesheet" href="[Link]">
<style>
p { color: red; }
</style>
</head>
<body>
<p style="color: blue;">This text will be blue (inline style wins).</p>
</body>

8. Web Page Designing

Using DHTML and CSS, we can design attractive and interactive web pages.

Steps for designing a webpage:

1. Plan the layout and content.


2. Create HTML structure for headings, text, images, links, etc.
3. Apply CSS styles to control colors, fonts, and layout.
4. Add interactivity using JavaScript (e.g., form validation, animations).
5. Test and optimize for different browsers and devices.

Example:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is an example of web page designing using DHTML and CSS.</p>
</body>
</html>

✅ Summary

Concept Description

DHTML Combines HTML, CSS, and JavaScript for dynamic web pages

CSS Defines the style and layout of HTML elements

Inline Style Applied within the tag

External Style Sheet Separate .css file linked to HTML

Multiple Styles Different style sheets can be used together

Web Page Designing Uses HTML for structure, CSS for design, and JS for interactivity

--------------------------------------------------------------------------------------------------------------------

Unit IV
Introduction to Java script: Advantage of JavaScript - Data type - Variable – Array - Operator
and Expression - Control and looping Constructs - Functions - Dialog Boxes.
Introduction to JavaScript

1. What is JavaScript?

JavaScript is a client-side scripting language used to make web pages interactive and
dynamic.
It runs directly in the web browser and can change content, validate forms, handle events, and
more — without reloading the page.

Example:

<script>
[Link]("Welcome to JavaScript!");
</script>

JavaScript is used for:

 Form validation
 Creating animations
 Interactive buttons and menus
 Dynamic web page content
 Web and app development (with frameworks like React, [Link])

2. Advantages of JavaScript

Advantage Description

Fast Execution Runs directly in the browser without needing a server.

Easy to Learn Simple syntax similar to C and Java.

Interactive Web Pages Makes pages dynamic and responsive.

Client-Side Processing Reduces server load by executing on the user’s computer.

Cross-Platform Works on all major browsers and operating systems.

Event Handling Reacts to user actions like clicks, hovers, etc.

3. Data Types

JavaScript supports different data types to store values.


Basic Data Types:

Data Type Example Description

Number var a = 10; Numeric values (integer or float).

String var name = "John"; Text enclosed in quotes.

Boolean var isOn = true; Logical value: true or false.

Undefined var x; A variable declared but not assigned.

Null var y = null; Represents an empty or no value.

Object var person = {name:"John", age:25}; Collection of key-value pairs.

Array var colors = ["red", "green", "blue"]; List of values.

4. Variable

A variable is used to store data that can be used and changed later in the program.

Syntax:

var name = "Alice";


let age = 20;
const pi = 3.14;

Keywords:

 var → global or function scope (older version)


 let → block scope (modern usage)
 const → constant value (cannot be changed)

Example:

let message = "Hello World";


[Link](message);

5. Array

An array is a collection of multiple values stored in a single variable.

Syntax:
let fruits = ["Apple", "Banana", "Mango"];

Accessing array elements:

[Link](fruits[0]); // Output: Apple

Array methods:

 push() → Add element at end


 pop() → Remove last element
 length → Count elements
 sort() → Sort elements

Example:

let numbers = [10, 20, 30];


[Link](40);
[Link]([Link]); // Output: 4

6. Operators and Expressions

Operators are symbols that perform operations on values and variables.

Types of Operators:

Type Example Description

Arithmetic +-*/% Mathematical operations

Assignment = += -= Assign or modify values

Comparison == != > < >= <= Compare two values

Logical `&&

String + Concatenation

Increment/Decrement ++ -- Increase or decrease value by 1

Example:

let a = 10, b = 5;
let c = a + b;
[Link](c); // Output: 15
7. Control and Looping Constructs

Used to control the flow of a program.

Conditional Statements

(a) if statement

if (age >= 18) {


[Link]("Eligible to vote");
}

(b) if...else

if (marks >= 50)


[Link]("Pass");
else
[Link]("Fail");

(c) else if ladder

if (marks >= 90) [Link]("A Grade");


else if (marks >= 75) [Link]("B Grade");
else [Link]("C Grade");
Looping Statements

Used for repetitive tasks.

(a) for loop

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


[Link](i + "<br>");
}

(b) while loop

let i = 1;
while (i <= 5) {
[Link](i + "<br>");
i++;
}

(c) do...while loop

let i = 1;
do {
[Link](i + "<br>");
i++;
} while (i <= 5);

8. Functions

A function is a block of code designed to perform a specific task.


It helps in reusing code and reduces repetition.

Syntax:

function functionName(parameters) {
// code to execute
}

Example:

function add(a, b) {
return a + b;
}

[Link](add(5, 10)); // Output: 15

9. Dialog Boxes

JavaScript provides three types of dialog boxes to interact with users.

Dialog Box Function Description

alert() alert("Message"); Displays a message box.

confirm() confirm("Are you sure?"); Displays OK/Cancel dialog. Returns true or false.

prompt() prompt("Enter your name:"); Asks user for input and returns the value.

Example:

alert("Welcome to the site!");


let name = prompt("Enter your name:");
confirm("Are you sure you want to continue?");

✅ Summary Table
Concept Description

JavaScript Client-side scripting language for web interactivity

Advantages Fast, easy, interactive, client-side

Data Types Number, String, Boolean, Object, Array, Null, Undefined

Variable Used to store data (var, let, const)

Array Collection of multiple values

Operators Arithmetic, logical, comparison, etc.

Control & Loops if, else, for, while, do-while

Functions Reusable block of code

Dialog Boxes alert(), confirm(), prompt()

---------------------------------------------------------------------------------------------------------------------

Unit V:
JavaScript Document Object Model: Event Handling - Form Object - Built in Object - User
Defined Object-Cookies

JavaScript Document Object Model (DOM)

1. Introduction to DOM

The Document Object Model (DOM) is a programming interface that represents an HTML or
XML document as a tree structure.
Each element (like <p>, <div>, <form>, etc.) is treated as an object that can be accessed and
modified using JavaScript.

Example:

<p id="demo">Hello!</p>
<script>
[Link]("demo").innerHTML = "Welcome to JavaScript DOM!";
</script>

Explanation:

 document → represents the whole HTML page


 getElementById() → finds an element by its ID
 innerHTML → changes the content of that element

Uses of DOM:

 Change content or style dynamically


 Add or remove elements
 Validate forms
 Handle user events

2. Event Handling

An event is an action that happens in the browser, such as a click, keypress, mouse move, or
form submit.
Event handling means writing JavaScript code to respond to these actions.

Common Events:

Event Description

onclick When a user clicks an element

onmouseover When the mouse pointer is moved over an element

onmouseout When the mouse pointer leaves an element

onload When a page finishes loading

onsubmit When a form is submitted

onchange When the value of an input changes

Example:

<button onclick="showMessage()">Click Me</button>

<script>
function showMessage() {
alert("Button clicked!");
}
</script>

Explanation:
When the user clicks the button, the event handler (onclick) calls the function showMessage().

3. Form Object

The Form Object represents an HTML <form> element and allows JavaScript to access and
manipulate form data.

Example of a Form:

<form name="myForm">
Name: <input type="text" name="username"><br>
<input type="button" value="Show Name" onclick="displayName()">
</form>

<script>
function displayName() {
let name = [Link];
alert("Your name is: " + name);
}
</script>

Explanation:

 [Link] → refers to the form named myForm


 .[Link] → gets the value entered in the input box

Common Form Properties:

Property Description

action URL where the form data is sent

method HTTP method (GET or POST)

elements List of all elements in the form

length Number of form elements

4. Built-in Objects
JavaScript provides several built-in (predefined) objects to perform common tasks.

Object Description Example

String Used for text manipulation "Hello".toUpperCase() → HELLO

Number Used for numerical operations [Link](3.7) → 4

Date Used to handle dates and time new Date()

Math Used for mathematical functions [Link](25) → 5

Array Stores multiple values [10, 20, 30]

Boolean True or False values let x = true;

Example:

let today = new Date();


[Link]("Today is: " + today);

5. User Defined Objects

You can create your own custom objects in JavaScript to represent real-world entities.

Example:

function Student(name, age, course) {


[Link] = name;
[Link] = age;
[Link] = course;
[Link] = function() {
[Link]("Name: " + [Link] + "<br>Age: " + [Link] + "<br>Course: " +
[Link]);
}
}

let s1 = new Student("Ravi", 20, "BCA");


[Link]();

Explanation:

 Student() → is a constructor function


 this → refers to the current object
 s1 → is an object of type Student
6. Cookies

A cookie is a small piece of data stored on the user’s computer by a website.


Cookies are used to remember user information between visits — for example, login names,
preferences, or session data.

Creating a Cookie:

[Link] = "username=John; expires=Sat, 31 Dec 2025 12:00:00 UTC; path=/";

Reading a Cookie:

let allCookies = [Link];


alert(allCookies);

Deleting a Cookie:

[Link] = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

Key Attributes:

Attribute Description

name=value Stores data

expires Sets expiration date

path Defines where the cookie is accessible

domain Specifies which domain the cookie belongs to

Uses of Cookies:

 Storing user preferences


 Tracking user sessions
 Managing login details

✅ Summary Table

Concept Description

DOM Represents the structure of a web page as objects


Concept Description

Event Handling Executes code when user actions occur

Form Object Accesses and validates form input

Built-in Objects Predefined objects like Date, Math, String

User Defined Object Custom objects created by the programmer

Cookies Small data stored on the client for user info

Question Bank
Unit I
Internet: Basic Concepts – Communicating on Internet – Internet Domains – Internet Server
Identities – Establishing Connectivity on the Internet
Section A:
No Question Options Answer

The Internet is a network of (a) Local computers (b) Networks (c)


1 (b) Networks
________. Satellites (d) Mainframes

The standard protocol used for


2 communication on the Internet is (a) HTML (b) TCP/IP (c) FTP (d) SMTP (b) TCP/IP
________.

(a) Universal Resource Locator (b)


(b) Uniform
The full form of URL is Uniform Resource Locator (c) Unified
3 Resource
________. Resource Locator (d) Unique Reference
Locator
Locator
No Question Options Answer

Which of the following is used


(a) Domain name (b) IP address (c) MAC
4 to uniquely identify a computer (b) IP address
address (d) Port number
on the Internet?

The main function of a web (a) Store webpages (b) Send emails (c) (a) Store
5
server is to ________. Transfer files (d) Manage databases webpages

(a) Data Name System (b) Domain Name


(b) Domain
6 DNS stands for ________. System (c) Digital Network Service (d)
Name System
Distributed Naming Setup

Which of the following is a top-


7 (a) google (b) www (c) .com (d) http (c) .com
level domain (TLD)?

The device used to connect a


8 computer to the Internet is called (a) Switch (b) Router (c) Modem (d) Hub (c) Modem
a ________.

The part of a URL that identifies


(a) Protocol (b) Domain (c) Path (d) File (d) File
9 the type of resource is the
extension extension
________.

Which protocol is used for


10 (a) FTP (b) SMTP (c) HTTP (d) POP (b) SMTP
sending emails?

The organization responsible for


11 managing domain names is (a) ICANN (b) ISO (c) W3C (d) IEEE (a) ICANN
________.

A website’s identity on the


(a) IP address (b) Server name (c) (c) Domain
12 Internet is known as its
Domain name (d) Port name
________.

Which of these is an Internet (a) Google (b) Airtel (c) Yahoo (d)
13 (b) Airtel
service provider (ISP)? Wikipedia

The protocol used to transfer


14 files over the Internet is (a) FTP (b) HTTP (c) SMTP (d) POP3 (a) FTP
________.

Which layer of TCP/IP handles (a) Application layer (b) Network layer
(d) Network
15 the physical connection to the (c) Transport layer (d) Network Access
Access layer
network? layer
Section B:
No Question Answer (Key Points)

The Internet is a global system of


interconnected computer networks that
1 Explain the basic concept of the Internet. use TCP/IP protocol to communicate. It
allows sharing of data, email, files, and
online resources across the world.

Global connectivity, client-server


model, resource sharing, use of
2 What are the main features of the Internet? protocols, communication services
(email, web, etc.), and multimedia
support.

A domain name is a human-readable


address for websites (e.g.,
3 What is a domain name? Give examples. [Link]). It replaces numeric
IP addresses and is managed by the
Domain Name System (DNS).

Includes email, chat, video


Write short notes on Internet communication conferencing, social networking,
4
services. forums, and VoIP — all enable real-
time communication among users.

ISPs provide Internet access to users via


What is the role of an Internet Service Provider broadband, fiber, or mobile data. They
5
(ISP)? assign IP addresses and offer email and
web hosting services.

Domains are structured hierarchically:


→ Root Domain → Top-Level Domain
6 Define and explain Internet domain hierarchy. (TLD) (.com, .org) → Second-Level
Domain (google) → Subdomain
([Link]).

A web server stores, processes, and


delivers web pages to clients using
7 What is the function of a web server?
HTTP or HTTPS protocols. Examples:
Apache, Nginx.

Explain the steps in establishing Internet (1) Choose an ISP, (2) Connect
8 hardware (modem/router), (3) Configure
connectivity.
IP settings, (4) Test connection, (5)
No Question Answer (Key Points)

Access via web browser.

Section C:

1. Explain the basic concepts and working of the Internet.

Answer:
The Internet is a global network of interconnected computers that communicate using the
TCP/IP (Transmission Control Protocol/Internet Protocol).
It allows users to share information, access resources, and communicate worldwide.

Key Points:

 Client and Server: The client (user device) requests services, and the server provides
them (like web pages or emails).
 IP Address: Every device connected to the Internet has a unique IP address (e.g.,
[Link]).
 Domain Name System (DNS): Converts domain names into IP addresses.
 Protocols: Rules for communication—e.g., HTTP (web), SMTP (email), FTP (file
transfer).
 Routers & Modems: Devices that route and transmit data over networks.

Working:

1. A user types a web address (URL) in a browser.


2. The browser contacts a DNS server to get the IP address.
3. The request is sent via routers over the Internet to the web server.
4. The web server sends the requested data (webpage) back to the client.

2. Describe various methods of communication on the Internet with examples.

Answer:
The Internet supports many ways of communication:

1. Email (Electronic Mail):


o Used for sending and receiving text, images, and files.
o Uses SMTP, POP3, and IMAP protocols.
2. Chat and Instant Messaging:
o Real-time text communication (e.g., WhatsApp, Messenger).
3. Video Conferencing:
o Enables face-to-face communication using webcams (e.g., Zoom, Google Meet).
4. Social Networking:
o Platforms like Facebook, Instagram, and LinkedIn allow users to connect and
share information.
5. Forums and Blogs:
o Online communities for discussion and sharing information.

Conclusion:
Internet communication is fast, global, cost-effective, and supports both personal and
professional interactions.

3. Explain in detail the structure of Internet domains.

Answer:
A domain name is a readable address for identifying a website on the Internet.
Example: [Link]

Structure:

1. Protocol: http:// or https:// – defines how the browser communicates.


2. Subdomain: www – optional part that identifies a subdivision of the main site.
3. Second-Level Domain (SLD): google – identifies the organization or name.
4. Top-Level Domain (TLD): .com, .org, .net, .in – represents the category or country.

Types of Domains:

 Generic TLDs (gTLDs): .com, .org, .edu, .net


 Country Code TLDs (ccTLDs): .in (India), .us (USA), .uk (UK)

Purpose:
Domains simplify access to websites by replacing numerical IP addresses with readable names.

4. What is the Domain Name System (DNS)? Explain its working and importance.

Answer:
Definition:
The Domain Name System (DNS) is an Internet service that translates human-friendly domain
names into IP addresses.

Working Process:

1. User enters a URL like [Link].


2. The browser sends a request to a DNS resolver.
3. The resolver queries the root server, then the TLD server, and finally the authoritative
DNS server.
4. The server returns the corresponding IP address.
5. The browser connects to the web server using this IP address.

Importance:

 Makes Internet usage simple and human-readable.


 Allows flexibility (domain names can change servers without affecting users).
 Reduces errors in accessing websites.

5. Explain the concept of Internet Server Identities and their types.

Answer:
Definition:
Internet servers are systems that store, manage, and deliver data or services to clients over the
Internet. Each server has a unique identity (IP address and domain name).

Types of Servers and Identities:

1. Web Server:
o Stores and delivers web pages using HTTP or HTTPS. (e.g., Apache, IIS).
2. Mail Server:
o Handles sending and receiving of emails using SMTP and POP3.
3. FTP Server:
o Manages file transfers between systems.
4. DNS Server:
o Resolves domain names to IP addresses.
5. Database Server:
o Stores and manages large sets of data.

Conclusion:
Each server’s identity ensures data is correctly routed and retrieved by the right client.

6. Explain the process of establishing connectivity on the Internet.

Answer:
To connect a computer to the Internet, the following steps are followed:

1. Choose an Internet Service Provider (ISP):


o Examples: Airtel, Jio, BSNL.
2. Connect Hardware:
o Use modem, router, or network cables to connect the device.
3. Configure Network Settings:
o Assign IP address, DNS server, and gateway.
4. Establish Connection:
o Through dial-up, broadband, fiber, or Wi-Fi.
5. Test the Connection:
o Use commands like ping or open a web browser.
6. Ensure Security:
o Use firewalls, antivirus, and encryption for safe access.

Result:
Once established, the computer can send and receive data across the global Internet.

7. Discuss the TCP/IP model and its importance in Internet communication.

Answer:
Definition:
TCP/IP (Transmission Control Protocol / Internet Protocol) is a set of communication protocols
that enables network devices to connect and exchange data.

Layers of TCP/IP:

1. Application Layer: User interaction layer (HTTP, FTP, SMTP).


2. Transport Layer: Ensures reliable communication (TCP, UDP).
3. Network Layer: Handles routing and addressing (IP protocol).
4. Network Access Layer: Physical data transmission through cables/wireless.

Importance:

 Standardized communication framework for all networks.


 Enables interoperability between different systems and devices.
 Ensures reliable and error-checked data transfer.

Conclusion:
TCP/IP is the foundation of all Internet communication.

8. Describe the advantages and applications of the Internet in daily life.

Answer:
Advantages:

1. Global Communication: Easy access to email, video calls, and instant messaging.
2. Information Access: Search engines provide knowledge instantly.
3. E-Commerce: Online shopping and banking made easy.
4. Education: E-learning platforms and online courses.
5. Entertainment: Movies, music, and gaming.
6. Remote Work: Enables work-from-home and online collaboration.

Applications:

 Education: Online classes and digital libraries.


 Business: Digital marketing, e-payments.
 Government: E-Governance, online services.
 Healthcare: Telemedicine and health apps.

Conclusion:
The Internet has become an essential tool for communication, business, learning, and
entertainment, making the world more connected and efficient.

Unit II
Introduction to HTML: Anchor Tag – Hyperlink - Head and Body Section – Heading -
Horizontal Ruler – Paragraphs – Tags - Images and Picture – Lists – Tables – Frames - Forms
and forms elements.
Section A
No Question Options Answer

(a) Hyper Text Markup Language (b) High Text


1 HTML stands for ________. Machine Language (c) Hyper Tabular Markup (a)
Language (d) None

The HTML document starts


2 (a) <head> (b) <body> (c) <html> (d) <title> (c)
with ________ tag.

The <head> section contains (a) Main content (b) Page information (c) Images (d)
3 (b)
________. Tables

The visible part of an HTML


4 document is within the (a) <head> (b) <body> (c) <title> (d) <html> (b)
________ tags.

Which tag is used to create a


5 (a) <img> (b) <a> (c) <link> (d) <url> (b)
hyperlink in HTML?

The href attribute is used in


6 (a) <img> (b) <a> (c) <p> (d) <h1> (b)
________ tag.

7 The <hr> tag is used for (a) Horizontal line (b) Heading (c) Table row (d) (a)
No Question Options Answer

________. Paragraph break

Which tag is used to display


8 (a) <image> (b) <src> (c) <img> (d) <pic> (c)
an image?

The correct syntax to display (a) <img src="[Link]"> (b) <image="[Link]">


9 (a)
an image is ________. (c) <pic src="[Link]"> (d) <src img="[Link]">

Which tag is used to create a


10 (a) <ol> (b) <ul> (c) <li> (d) <dl> (a)
numbered list?

The <table> tag is used to (a) Draw lines (b) Create tables (c) Create lists (d)
11 (b)
________. Insert frames

Each table row is defined by


12 (a) <td> (b) <th> (c) <tr> (d) <table> (c)
________.

The <frame> tag is used to (a) Create sections (b) Divide window into frames
13 (b)
________. (c) Add border (d) Insert video

Which tag is used to create a


14 (a) <input> (b) <form> (c) <text> (d) <data> (b)
form in HTML?

The <input> tag is used for (a) Creating lists (b) Taking user input (c)
15 (b)
________. Displaying text (d) Adding links

Section B
No Question Short Answer

HTML stands for Hyper Text Markup Language. It is the


Define HTML and explain its
1 standard language for creating web pages. It uses tags to
importance.
structure text, images, and links on a webpage.

The <head> section contains metadata like title, scripts, and


Explain the purpose of
2 styles. The <body> section contains visible page content such
<head> and <body> sections.
as text, images, tables, and links.

What is an anchor tag? Give The anchor tag <a> is used to create hyperlinks. Example: <a
3
an example. href="[Link] Google</a>.

Headings are defined using <h1> to <h6>. <h1> is the largest


Write short notes on headings
4 and <h6> is the smallest. They represent importance and
in HTML.
structure in a webpage.
No Question Short Answer

Explain the use of <hr> and <hr> creates a horizontal line for separation. <p> defines a
5
<p> tags. paragraph, adding spacing and readability.

Lists display information in ordered (<ol>) or unordered


What is the purpose of lists in
6 (<ul>) format. Each item uses <li> tag. Example:
HTML?
<ul><li>Apple</li><li>Banana</li></ul>.

What are HTML tables used Tables are used to arrange data in rows and columns using
7
for? <table>, <tr>, <th>, and <td> tags.

What are HTML forms and Forms collect user input. Example: login or registration. Tags
8
why are they used? used: <form>, <input>, <textarea>, <select>, <button>.

Section C:

1. Explain the structure of an HTML document.

Answer:
An HTML document has a hierarchical structure:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my first webpage.</p>
</body>
</html>

Explanation:

 <!DOCTYPE html> declares HTML version.


 <html>: Root of the document.
 <head>: Metadata (title, styles).
 <body>: Content displayed in browser.
Conclusion: Defines the structure of any webpage.

2. Explain Anchor Tag and Hyperlinks with examples.


Answer:

 Anchor Tag: <a> is used to link one page to another.


 Syntax: <a href="URL">Link Text</a>
Example:

<a href="[Link] Google</a>

 Types of Links:
o External link: Links to another site.
o Internal link: Links within same site.
o Email link: <a href="[Link] Email</a>
Conclusion: Hyperlinks connect documents and enable website navigation.

3. Explain Head and Body sections in HTML.

Answer:
Head Section:

 Contains metadata, title, scripts, and styles.


Example:

<head>
<title>My Page</title>
<meta charset="UTF-8">
</head>

Body Section:

 Contains content displayed to users.


Example:

<body>
<h1>Hello</h1>
<p>Welcome to HTML.</p>
</body>

Conclusion: The head defines document information; the body defines visible content.

4. Explain different heading, paragraph, and horizontal line tags in HTML.


Answer:
Heading Tags: <h1> to <h6> – define titles.
Example: <h1>Main Title</h1>
Paragraph Tag: <p> – defines text blocks.
Example: <p>This is a paragraph.</p>
Horizontal Line Tag: <hr> – draws a horizontal rule.
Example: <hr>
Conclusion: These tags improve readability and document structure.

5. Explain how to insert images and pictures in HTML.

Answer:
Tag Used: <img>
Attributes:

 src – image source


 alt – alternate text
 width and height – size of the image
Example:

<img src="[Link]" alt="Flower" width="200" height="150">

Explanation:

 The image file must be in the same folder or linked using a full path.
 alt text appears if the image cannot load.
Conclusion: Images enhance visual appeal of web pages.

6. Describe different types of lists in HTML with examples.

Answer:
Types of Lists:

1. Ordered List (<ol>):

<ol>
<li>Apple</li>
<li>Banana</li>
</ol>

2. Unordered List (<ul>):


<ul>
<li>Car</li>
<li>Bike</li>
</ul>

3. Definition List (<dl>):

<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
</dl>

Conclusion: Lists organize data clearly for better presentation.

7. Explain tables in HTML with structure and example.

Answer:
Purpose: Tables organize data in rows and columns.
Tags Used:

 <table> – defines table


 <tr> – table row
 <th> – header cell
 <td> – data cell
Example:

<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>John</td><td>25</td></tr>
</table>

Explanation:

 <th> text is bold and centered by default.


 border adds a visible border.
Conclusion: Tables are used for structured data presentation.

8. Explain HTML Forms and Form Elements with examples.

Answer:
Purpose: To collect input from users.
Main Tag: <form>
Common Elements:

 <input> → for text boxes, radio, checkbox


 <textarea> → multiline input
 <select> → dropdown list
 <button> → submit button
Example:

<form action="[Link]" method="post">


Name: <input type="text" name="username"><br>
Gender: <input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female<br>
<input type="submit" value="Submit">
</form>

Conclusion: Forms enable interactivity and data submission in websites.

Unit III
DHTML and Style sheets: Defining styles - Elements of style - Linking a style sheet to a html
documents - Inline style - External style sheets - Multiple styles- Web page designing.
Section A:
No Question Options Answer

(a) Dynamic Hyper Text Markup Language (b)


1 DHTML stands for ________. Document Hyper Text Markup Language (c) (a)
Design HTML (d) None

(a) Create static web pages (b) Create dynamic and


The main purpose of DHTML
2 interactive web pages (c) Design databases (d) (b)
is to ________.
None

(a) Creative Style Sheets (b) Cascading Style


3 CSS stands for ________. Sheets (c) Colorful Style Sheets (d) Computer (b)
Style Sheets

(a) Structuring content (b) Designing and styling


4 CSS is used for ________. web pages (c) Creating databases (d) Compiling (b)
code

Which tag is used to link an


5 (a) <script> (b) <link> (c) <style> (d) <css> (b)
external CSS file?

6 The style attribute is used for (a) External CSS (b) Inline CSS (c) Internal CSS (b)
No Question Options Answer

________. (d) Both b and c

Which property is used to


7 (a) font-color (b) text-color (c) color (d) font (c)
change text color in CSS?

Which property changes the (a) background (b) background-color (c) bgcolor
8 (b)
background color? (d) color

Inline CSS is written using


9 ________ attribute inside the (a) design (b) style (c) css (d) link (b)
tag.

External style sheets are saved


10 (a) .html (b) .css (c) .js (d) .txt (b)
with the extension ________.

Which CSS property is used to


11 (a) font-size (b) text-size (c) size (d) font (a)
set font size?

Multiple styles can be (a) External CSS only (b) Internal CSS only (c)
12 (c)
combined by using ________. Inline, Internal, and External CSS (d) None

DHTML combines HTML,


13 (a) Java (b) JavaScript (c) XML (d) C++ (b)
CSS, and ________.

The <style> tag is placed inside


14 the ________ section of (a) <body> (b) <head> (c) <title> (d) <html> (b)
HTML.

The z-index property in CSS is (a) Font alignment (b) Stacking order of elements
15 (b)
used for ________. (c) Background setting (d) Indentation

Section B:
No Question Short Answer

Define DHTML DHTML stands for Dynamic HTML, which combines HTML, CSS,
1 and explain its and JavaScript to make web pages dynamic and interactive. It allows
importance. content to change without reloading the entire page.

What are the Elements: Selectors, Properties, and Values. Example: h1 { color: red;
2 elements of style in font-size: 20px; } – where h1 is the selector, color is the property, and
CSS? red is the value.

3 Write the syntax of Syntax: selector { property: value; }


No Question Short Answer

CSS. Example: p { color: blue; font-size: 16px; }

What are the types Three types: Inline CSS, Internal CSS, and External CSS. Each can
4
of CSS? define styles in different ways based on the requirement.

What is Inline
Inline style is defined inside an HTML tag using the style attribute.
5 Style? Give
Example: <p style="color:blue;">Hello</p>
example.

What is an External It’s a separate .css file linked to HTML using <link> tag. It allows
6
Style Sheet? reusing same style across multiple web pages.

Define Multiple Multiple styles allow using more than one CSS type (inline, internal,
7
Styles. external). Priority: Inline > Internal > External.

Web Page Designing involves creating visually appealing and user-


What is Web Page
8 friendly web pages using HTML, CSS, and DHTML for layout, color,
Designing?
and interactivity.

Section C

1. Explain DHTML. What are its components and advantages?

Answer:
Definition: DHTML (Dynamic HTML) is an advanced form of HTML that allows web pages to
change dynamically without reloading.
Components:

1. HTML – Provides structure.


2. CSS – Provides style and formatting.
3. JavaScript – Adds interactivity.
4. DOM (Document Object Model) – Connects scripts to page elements.
Advantages:

 Dynamic content changes.


 Interactive user interfaces.
 Animation and visual effects.
 Faster updates without reloading the page.

2. Define and explain the elements of style in CSS.


Answer:
Elements of Style:

1. Selector – Identifies HTML element to style.


2. Property – Specifies what aspect to change (e.g., color, font).
3. Value – Defines the setting for the property.
Example:

p{
color: red;
font-size: 18px;
}

Here, p is the selector, color and font-size are properties, and red, 18px are values.
Conclusion: These elements control the appearance of web content efficiently.

3. Explain different methods of linking a style sheet to an HTML document.

Answer:
There are three ways to link a CSS style sheet:

1. Inline CSS: Uses style attribute inside tags.


Example: <h1 style="color:red;">Title</h1>
2. Internal CSS: Uses <style> tag inside <head>.
Example:
3. <style>
4. h1 {color:blue;}
5. </style>

6. External CSS: Linked using <link> tag.


Example:
7. <link rel="stylesheet" href="[Link]">

Conclusion: External CSS is best for large sites; inline CSS for quick edits.

4. Write short notes on Inline Style and External Style Sheet with examples.

Answer:
Inline Style:

 Defined inside an HTML tag.


 Affects only that tag.
Example:

<p style="color:green;">Hello!</p>

External Style Sheet:

 Defined in a separate .css file.


 Reusable across pages.
Example:

<link rel="stylesheet" href="[Link]">

[Link]:

p { color: blue; }

Conclusion: Inline is local; external is reusable and easier to maintain.

5. Explain how multiple styles are used in a single webpage.

Answer:
Concept:
HTML supports Inline, Internal, and External CSS together.
Priority Order:

1. Inline (highest)
2. Internal (middle)
3. External (lowest)
Example:

<link rel="stylesheet" href="[Link]">


<style>p {color: blue;}</style>
<p style="color: red;">This is red</p>

The paragraph will appear red because inline CSS overrides others.
Conclusion: Multiple styles provide flexibility and layering.

6. What are the advantages of using CSS in web designing?

Answer:
1. Consistency: Same style applied to multiple pages.
2. Separation of content and design: Easier to maintain.
3. Faster Loading: Smaller code and better caching.
4. Responsive Design: Adapts to screens.
5. Accessibility: Easier customization for different users.
Conclusion: CSS improves design efficiency and user experience.

7. Explain the steps involved in designing a web page using HTML and CSS.

Answer:
Steps:

1. Plan the Layout: Decide structure and sections.


2. Write HTML: Add headings, text, images, and forms.
3. Apply CSS: Style content (colors, fonts, layout).
4. Add Interactivity: Use JavaScript/DHTML if needed.
5. Test the Page: Check responsiveness and browser compatibility.
6. Publish: Upload files to a web server.
Conclusion: Good design combines layout, style, and interactivity effectively.

8. Differentiate between Inline, Internal, and External Style Sheets.

Answer:

Type Definition Syntax Example Scope Priority

Inline CSS inside tag <p style="color:red;"> Single element Highest

Internal CSS in <style> tag <style>p{color:blue;}</style> One page Medium

External Separate CSS file <link rel="stylesheet" href="[Link]"> Many pages Lowest

Conclusion:
External CSS is best for large sites, while inline is suitable for one-time styling.

Unit IV
Introduction to Java script: Advantage of JavaScript - Data type - Variable – Array - Operator
and Expression - Control and looping Constructs - Functions - Dialog Boxes.
Section A:
No Question Options Answer

(a) Programming (b) Scripting (c) Markup


1 JavaScript is a ________ language. (b)
(d) Styling

JavaScript was developed by (a) James Gosling (b) Tim Berners-Lee (c)
2 (c)
________. Brendan Eich (d) Dennis Ritchie

JavaScript code is executed by (a) Server (b) Compiler (c) Browser (d)
3 (c)
________. Database

Which HTML tag is used to include (a) <js> (b) <javascript> (c) <script> (d)
4 (c)
JavaScript code? <code>

Which symbol is used for single-line


5 (a) /* */ (b) // (c) # (d) <!-- --> (b)
comments in JavaScript?

The correct way to declare a variable (a) var name; (b) int name; (c) variable
6 (a)
in JavaScript is ________. name; (d) name = variable;

Which of the following is not a (a) String (b) Number (c) Boolean (d)
7 (d)
JavaScript data type? Character

Arrays in JavaScript are written with


8 (a) { } (b) ( ) (c) [ ] (d) < > (c)
________.

Which operator is used to assign a


9 (a) == (b) = (c) === (d) != (b)
value?

(a) Assigns value (b) Compares values (c)


10 What does == operator do? (b)
Checks type (d) Adds numbers

Which loop executes at least once


11 (a) for (b) while (c) do...while (d) if (c)
even if the condition is false?

The function to display an alert box is (a) prompt() (b) alert() (c) confirm() (d)
12 (b)
________. display()

The function to get user input through (a) prompt() (b) input() (c) confirm() (d)
13 (a)
dialog box is ________. alert()

The length property of an array (a) Total elements (b) First element (c) Last
14 (a)
returns ________. element (d) Undefined

A function in JavaScript is defined (a) method (b) function (c) define (d)
15 (b)
using the keyword ________. procedure
Section B:
No Question Short Answer

JavaScript is a client-side scripting language used to make web


Define JavaScript and its
1 pages dynamic and interactive. It is used for form validation,
uses.
animations, and handling user events.

1. Fast execution in browser.2. Easy to learn.3. Platform-


List the advantages of
2 independent.4. Can manipulate HTML/CSS.5. Supports
JavaScript.
interactivity.

What are the data types 1. String2. Number3. Boolean4. Undefined5. Null6. Object7.
3
in JavaScript? Symbol

Define variable. How is Variable is a name for storing data values. Declared using var, let,
4
it declared in JavaScript? or const. Example: var x = 10;

Define array with An array stores multiple values in one variable. Example:var fruits
5
example. = ["apple", "banana", "mango"];

What are operators? Operators perform operations on values. Example:+, -, *, /, %, ==,


6
Give examples. !=, &&, `

Write short notes on Control statements determine flow of execution:1. if, if...else,
7
control statements. switch – decision making2. for, while, do...while – loops

Dialog boxes are used to interact with users:1. alert() – displays


8 What are dialog boxes? message2. prompt() – asks for input3. confirm() – asks for
confirmation

Section C:

1. Explain the advantages and features of JavaScript.

Answer:
Advantages:

1. Lightweight and Fast: Runs directly in browsers.


2. Platform Independent: Works on all OS and browsers.
3. Easy to Learn: Simple syntax similar to C.
4. Interactivity: Creates dynamic user experiences.
5. Integration: Works with HTML and CSS easily.
6. Validation: Checks input before sending to server.
Features:

 Dynamic typing
 Event handling
 Object-based language
 Case-sensitive
 Rich built-in functions

2. Explain JavaScript data types with examples.

Answer:
1. String: Represents text.

var name = "John";

2. Number: Represents numeric values.

var age = 25;

3. Boolean: True or False.

var isPass = true;

4. Undefined: Variable declared but not assigned.

var x;

5. Null: Represents empty value.

var data = null;

6. Object: Collection of properties.

var person = {name:"John", age:25};

7. Array: Ordered list of values.

var colors = ["red","green","blue"];

3. Explain variables in JavaScript and their types.


Answer:
Variables store data temporarily in memory.
Declaration Keywords:

1. var – Function-scoped.
2. let – Block-scoped.
3. const – Constant, cannot change.

Example:

var a = 10;
let b = 20;
const c = 30;

Rules:

 Must start with letter, _, or $.


 Case-sensitive.
 Cannot use reserved words.

4. Explain JavaScript arrays with examples.

Answer:
Definition: Array stores multiple values in a single variable.
Syntax:

var arr = [value1, value2, value3];

Example:

var fruits = ["apple", "banana", "cherry"];


[Link](fruits[1]); // Output: banana

Array Methods:

 push() – Add element


 pop() – Remove last element
 length – Count elements
 sort() – Sort elements

5. Explain operators and expressions in JavaScript.


Answer:
Operators: Perform operations on operands.

Type Examples Use

Arithmetic + - * / % Mathematical calculations

Comparison == != > < Compare values

Logical `&&

Assignment = += -= Assign values

String + Join strings

Example:

var x = 5, y = 10;
var sum = x + y; // 15

6. Explain control and looping constructs with examples.

Answer:
Control Statements:

if (a > b)
alert("A is greater");
else
alert("B is greater");

Switch:

switch(day){
case 1: alert("Monday"); break;
case 2: alert("Tuesday"); break;
default: alert("Invalid");
}

Loops:

 for loop:

for (var i=1; i<=5; i++) [Link](i);

 while loop:
var i=1;
while(i<=5){ [Link](i); i++; }

 do...while loop:

var i=1;
do{ [Link](i); i++; } while(i<=5);

7. Explain functions in JavaScript with example.

Answer:
Definition: Function is a reusable block of code that performs a specific task.
Syntax:

function functionName(parameter){
// code block
}
functionName(argument);

Example:

function greet(name){
alert("Hello " + name);
}
greet("John");

Advantages:

 Reusable code
 Easier debugging
 Modular design

8. Explain different types of dialog boxes in JavaScript.

Answer:
1. Alert Box – Displays information.

alert("Welcome!");

2. Confirm Box – Gets confirmation.

var result = confirm("Are you sure?");


3. Prompt Box – Takes input from user.

var name = prompt("Enter your name:");


alert("Hello " + name);

Use: Dialog boxes are used for user interaction, form validation, and alerts.

Unit V
JavaScript Document Object Model: Event Handling - Form Object - Built in Object - User
Defined Object-Cookies
Section A:
No Question Options Answer

(a) Data Object Model (b) Document Object Model


1 DOM stands for ________. (b)
(c) Digital Object Model (d) Dynamic Object Model

The DOM represents a web


2 (a) Stack (b) Tree structure (c) Table (d) Graph (b)
page as a ________.

(a) getElementsByTagName() (b) getElementById()


Which method is used to
3 (c) getElementsByClassName() (d) (b)
access an element by its id?
querySelectorAll()

In JavaScript, an event is (a) An error (b) An action by the user or browser (c)
4 (b)
________. A data type (d) A keyword

Which of the following is an (a) onclick (b) onload (c) onmouseover (d) All of
5 (d)
event? these

The submit event is


6 associated with which (a) Button (b) Form (c) Window (d) Link (b)
object?

Which property of the form


7 object represents all input (a) elements (b) fields (c) inputs (d) values (a)
fields?

A built-in JavaScript object


8 used for working with dates (a) Math (b) Date (c) String (d) Array (b)
is ________.

The Math object method to


9 (a) sqrt() (b) [Link]() (c) [Link]() (d) root() (b)
find square root is ________.
No Question Options Answer

Which built-in object is used


10 to store data locally on a (a) File (b) Cookie (c) Session (d) Cache (b)
browser?

Cookies are stored on (a) Server (b) Client computer (c) Cloud (d)
11 (b)
________. Database

To set a cookie in JavaScript, (a) [Link] (b) [Link] (c)


12 (b)
we use ________. [Link] (d) cookie()

The alert() function is part of


13 (a) Window (b) Document (c) Form (d) Math (a)
which object?

User-defined objects can be (a) object() (b) new keyword and constructor
14 (b)
created using ________. function (c) var (d) prototype only

Which event occurs when the


(a) onfocus (b) onmouseover (c) onmouseout (d)
15 mouse is moved over an (b)
onclick
element?

Section B:
No Question Short Answer

What is the DOM is a tree-like representation of an HTML document where each


1 Document Object element is treated as an object that can be accessed and manipulated
Model (DOM)? using JavaScript.

What is event Event handling allows JavaScript to respond to user actions such as
2 handling in clicks, mouse movements, or key presses using event attributes (like
JavaScript? onclick, onchange) or event listeners.

The form object represents an HTML <form> element in the DOM. It


Define the form
3 provides properties and methods to handle form data such as elements,
object.
submit(), and reset().

List any four built-


String, Array, Math, Date, Boolean, Object are common built-in
4 in objects in
objects.
JavaScript.

Define a user-
User-defined objects are created using constructor functions or object
5 defined object with
literals. Example:var student = {name:"John", age:21};
an example.

6 What is a cookie? A cookie is a small piece of data stored on the client’s computer by the
No Question Short Answer

browser to remember user information across sessions.

Write short notes on The Math object provides mathematical constants and functions such as
7
the Math object. [Link], [Link](), [Link](), [Link]().

Mention the steps to


To create: [Link]="username=John; expires=Fri, 31 Dec
8 create and read a
2025";To read: [Link];
cookie.

Section C:

1. Explain the structure and importance of the Document Object Model (DOM).

Answer:

 DOM represents an HTML or XML document as a tree structure.


 Each node represents an element, attribute, or text.
Main objects:

1. window – top-level object


2. document – represents the web page
3. form, image, link – represent specific elements

Importance:

 Allows access to modify HTML/CSS dynamically


 Enables creation and deletion of elements
 Supports event handling
 Forms the core for dynamic web pages

Example:

[Link]("demo").innerHTML = "Welcome!";

2. Explain event handling in JavaScript with examples.

Answer:
Definition: Event handling is the process of executing code when an event occurs.
Common events:

 onclick – when element is clicked


 onmouseover – mouse pointer moves over element
 onload – page is loaded
 onchange – input field changes

Methods:

1. Inline Event:

<button onclick="alert('Hello!')">Click Me</button>

2. Event Listener:

[Link]("btn").addEventListener("click", showMsg);
function showMsg() { alert("Button clicked!"); }

Advantages: Better control, interactivity, and dynamic behavior.

3. Explain the Form object and its methods with example.

Answer:
Definition: The form object represents an HTML form and lets you access form fields using
JavaScript.
Properties:

 elements[] – collection of form controls


 name – form name

Methods:

 submit() – submits form programmatically


 reset() – resets all fields

Example:

<form name="myForm">
<input type="text" name="user">
<input type="button" value="Submit" onclick="submitForm()">
</form>

<script>
function submitForm() {
[Link]();
}
</script>
4. Describe built-in objects in JavaScript with examples.

Answer:

1. String Object:

var s = "Hello";
[Link]([Link]);

2. Array Object:

var colors = ["red","green","blue"];


[Link](colors[0]);

3. Math Object:

[Link]([Link](16));

4. Date Object:

var d = new Date();


[Link]([Link]());

Use: These provide predefined methods to simplify programming tasks.

5. Explain user-defined objects with example.

Answer:
Definition: Objects created by the programmer for custom data types.

Example 1: Object Literal

var student = {
name: "John",
age: 21,
display: function() {
[Link]([Link] + " is " + [Link] + " years old");
}
};
[Link]();

Example 2: Constructor Function


function Car(model, color) {
[Link] = model;
[Link] = color;
}
var car1 = new Car("BMW", "Black");

Advantage: Helps organize code using real-world entities.

6. Explain cookies in JavaScript.

Answer:
Definition: Cookies store small data (name/value pairs) on client’s computer.
Creating a cookie:

[Link] = "username=John; expires=Fri, 31 Dec 2025 12:00:00 UTC; path=/";

Reading cookies:

alert([Link]);

Deleting cookies:

[Link] = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";

Uses: Remember login info, preferences, and session management.

7. Explain the Date and Math objects in detail with examples.

Answer:
Date Object: Used to work with dates and times.

var d = new Date();


[Link]([Link]());
[Link]([Link]()+1);
[Link]([Link]());

Math Object: Provides mathematical constants and functions.

[Link]([Link]);
[Link]([Link](2,3));
[Link]([Link]());
Use: Helpful for calculations, date/time display, and random number generation.

8. Write a short note on cookies, form object, and event handling.

Answer:

 Cookies: Used to store small pieces of user data like usernames or preferences.
 Form Object: Represents HTML forms, provides control over inputs and submission.
 Event Handling: Responds to user interactions like mouse clicks or key presses using
event listeners.

Example:

<form onsubmit="alert('Form Submitted!')">


<input type="text" name="user">
<input type="submit" value="Send">
</form>

You might also like