[go: up one dir, main page]

0% found this document useful (0 votes)
16 views16 pages

Insem Solution 2023

The document outlines a web technology course, covering key topics such as the differences between the WWW and the Internet, HTML heading tags, and CSS. It includes practical examples of HTML code for a GATE Examination registration page, CSS usage, and JavaScript functions for form validation and Fibonacci series generation. Additionally, it discusses the Document Object Model (DOM), AngularJS directives, and the advantages of jQuery.

Uploaded by

Anisha Dhuri
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
0% found this document useful (0 votes)
16 views16 pages

Insem Solution 2023

The document outlines a web technology course, covering key topics such as the differences between the WWW and the Internet, HTML heading tags, and CSS. It includes practical examples of HTML code for a GATE Examination registration page, CSS usage, and JavaScript functions for form validation and Fibonacci series generation. Additionally, it discusses the Document Object Model (DOM), AngularJS directives, and the advantages of jQuery.

Uploaded by

Anisha Dhuri
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
You are on page 1/ 16

K.J.

's Educational
Institute’s
Trinity College of Engineering and
Research
Department of Computer
Engineering
Web Technology- Course Code
310252

T.E. (Computer Engg.) (Insem) WEB TECHNOLOGY


(2019 Pattern) (Semester - II) (310252)-2023

INSEM SOLUTION
Q1(i) . Explain following:
i) WWW Vs Internet
ii) HTML heading tags with syntax.
Feature World Wide Web (WWW) Internet
A system of interlinked web A global network of computers
Definition pages and content accessed via and other devices connected for
web browsers. communication and data exchange.
Provides websites, hyperlinks, Supports multiple services like
Function and multimedia content using email, FTP, VoIP, cloud computing,
HTTP/HTTPS. and the WWW.
Uses TCP/IP, FTP, SMTP, DNS,
Main Uses HTTP, HTTPS for web
etc. for communication and
Protocols browsing.
networking.

Accessed via different applications


Access Accessed via web browsers
like email clients, messaging apps,
Method (Chrome, Firefox, Edge, etc.).
and browsers.

The Internet exists independently


Depende The WWW depends on the
of the WWW and supports other
ncy Internet to function.
services.

Q1 (ii) In HTML, heading tags (<h1> to <h6>) define headings, with <h1>
being the largest and <h6> the smallest.
<h1>: Most important and largest heading.
<h2> to <h6>: Decreasing in importance and size.
Used to structure web pages for better readability and SEO

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Heading Tags</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>

Q2. Write HTML code for GATE Examination registration page. Web page
should have elements such as text box, password field, checkbox, radio button,
select box, submit and reset button etc.

Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GATE Examination Registration</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
}
.container {
max-width: 400px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background: #f9f9f9;
}
label, input, select {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>GATE Examination Registration</h2>
<form action="submit.php" method="post">
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<label>Gender:</label>
<input type="radio" id="male" name="gender" value="Male" required>
Male
<input type="radio" id="female" name="gender" value="Female"
required> Female

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required>

<label for="branch">Select Branch:</label>


<select id="branch" name="branch" required>
<option value="">--Select--</option>
<option value="CSE">Computer Science</option>
<option value="ECE">Electronics & Communication</option>
<option value="ME">Mechanical Engineering</option>
<option value="CE">Civil Engineering</option>
</select>

<label>
<input type="checkbox" name="terms" required> I agree to the terms
and conditions
</label>

<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</div>
</body>
</html>
Q3 What is CSS? Explain CSS inheritance with example.
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of
HTML documents. It controls the layout, colors, fonts, and overall visual appearance of web
pages. CSS allows developers to separate content (HTML) from design, making websites more
maintainable and scalable.

CSS - Syntax

A CSS comprises of style rules that are interpreted by the browser and then
applied to the corresponding elements in your document. A style rule is made of
three parts −
Selector − A selector is an HTML tag at which a style will be applied. This could
be any tag like <h1> or <table> etc.
Property − A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could
be color, border etc.
Value − Values are assigned to properties. For example, colorproperty can have
value either red or #F1F1F1 etc.

CSS Inheritance
Inheritance in CSS is the mechanism by which some properties of a parent
element are automatically passed down to its child elements. However, not all
CSS properties are inherited—only text-related properties (like color, font-
family, and visibility) are inherited by default.
Q2) a) Differentiate HTML Vs HTML5

Q2 b) . Write the HTML code with example to explain internal and external CSS

 Defined within a <style> tag inside the <head>


section of an HTML document.
 Useful for applying styles to a single webpage.
<html>

<head>
<style>

p{

color: green;

font-size: 18px;

</style>

</head>

<body>

<p>This is an internal CSS example.</p>

</body>

</html>

3. External CSS

 A separate CSS file (.css) is linked to an HTML document using the


<link> tag.
 Helps in maintaining consistency across multiple pages.

Style.css

p{

color: red;

font-size: 20px;

Sample.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>This is an external CSS example.</p>
</body>
</html>

Q3 . Explain the HTTP request and HTTP response model in brief

http stands on Hypertext text transfer Protocol , It set up the communication in between
of your Browser and Web Server It is based on Client – Server model.

It is stateless, connection less. It is Media independent

HTTP request/response model describes how a client (like a web browser)


communicates with a server by sending an "HTTP request" to ask for a resource, and
the server then replies with an "HTTP response" which contains the requested data or
an error message, effectively acting as a back-and-forth conversation to retrieve
information from the web; essentially, the client initiates the communication by
requesting something, and the server responds with the requested data or an indication
of whether the request was successful or not.

Methods of http

Get- to read/fetch the data from the web server

Post – to create the data


Put – to update the data-

Delete- to delete the data

Q3 a ) Explain Document Tree in DOM.

The Document Tree in the Document Object Model (DOM) represents the
hierarchical structure of an HTML or XML document.

It is an important concept that helps web browsers and developers manipulate


web pages dynamically.

The HTML DOM model is constructed as a tree of Objects

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

Structure of the Document Tree

1. Root Node: The root of the document tree is always the document object.
2. Element Nodes: Represent HTML elements (<html>, <body>, <div>,
etc.).
3. Attribute Nodes: Represent attributes of elements (class, id, etc.), though
they are usually considered part of element nodes.
4. Text Nodes: Represent the actual text inside an element.
5. Comment Nodes: Represent HTML comments (<!-- This is a comment --
>).

Example of Document tree

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<h1>Hello World</h1>

<p>This is a paragraph.</p>
</body>

</html>

document

└── html

├── head

│ └── title

│ └── "DOM Example"

└── body

├── h1

│ └── "Hello World"

└── p

└── "This is a paragraph."

Q3 b) Write the JavaScript function for generating Fibonacci series

// program to generate fibonacci series up to n terms

const number = parseInt(prompt('Enter the number of terms: '));

let n1 = 0, n2 = 1, nextTerm;

console.log('Fibonacci Series:');

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

console.log(n1);

nextTerm = n1 + n2;

n1 = n2;

n2 = nextTerm;

}
c) What is Angular JS? Explain Angular JS directives for data binding with

example.

Solution :- AngularJS is a JavaScript framework developed by Google, designed to build


dynamic, single-page web applications (SPAs). It extends HTML with additional attributes
and provides a structured way to develop front-end applications. It follows the Model-View-
Controller (MVC) architecture and enables two-way data binding, making it powerful for
building interactive web applications.

AngularJS Directives for Data Binding


Data binding in AngularJS allows synchronization between the model (JavaScript variables)
and the view (HTML). It provides two-way data binding, meaning changes in the UI reflect
in the model and vice versa.

AngularJS uses directives for data binding. Some key directives are:

ng-model (Two-way Data Binding)


 Binds input fields (e.g., <input>, <textarea>, <select>) to a variable in the scope.
 Any changes in the input field update the model, and vice versa.

<!DOCTYPE html>

<html lang="en">

<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></
script>

</head>

<body ng-app="">

<h2>AngularJS ng-model Example</h2>

<p>Enter your name: <input type="text" ng-model="name"></p>

<p>Hello, {{ name }}!</p>

</body>

</html>
ng-bind (One-way Data Binding)
 Binds a model value to an HTML element.
 Similar to {{ expression }}, but updates more efficiently.

<p ng-bind="name"></p>

ng-init (Initialize Data)


Used to initialize variables in AngularJS.

<div ng-app="" ng-init="message='Hello, AngularJS!'">


<p ng-bind="message"></p>
</div>

Q4) a) Write the JavaScript code for name, email and mobile number validation
in registration form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form Validation</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.error {
color: red;
font-size: 14px;
}
</style>
</head>
<body>

<h2>Registration Form</h2>

<form id="registrationForm" onsubmit="return validateForm()">


<label for="name">Full Name:</label>
<input type="text" id="name" name="name">
<span class="error" id="nameError"></span><br><br>

<label for="email">Email:</label>
<input type="text" id="email" name="email">
<span class="error" id="emailError"></span><br><br>

<label for="mobile">Mobile Number:</label>


<input type="text" id="mobile" name="mobile">
<span class="error" id="mobileError"></span><br><br>

<button type="submit">Register</button>
</form>
<script>
function validateForm() {
let isValid = true;

// Get input values


let name = document.getElementById("name").value.trim();
let email = document.getElementById("email").value.trim();
let mobile = document.getElementById("mobile").value.trim();

// Name validation (only alphabets and space, min 3 characters)


let namePattern = /^[A-Za-z\s]{3,}$/;
if (!namePattern.test(name)) {
document.getElementById("nameError").innerText = "Enter a valid name (min 3 letters).";
isValid = false;
} else {
document.getElementById("nameError").innerText = "";
}

// Email validation (basic pattern)


let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
document.getElementById("emailError").innerText = "Enter a valid email address.";
isValid = false;
} else {
document.getElementById("emailError").innerText = "";
}

// Mobile number validation (exactly 10 digits)


let mobilePattern = /^[0-9]{10}$/;
if (!mobilePattern.test(mobile)) {
document.getElementById("mobileError").innerText = "Enter a valid 10-digit mobile
number.";
isValid = false;
} else {
document.getElementById("mobileError").innerText = "";
}

return isValid; // If false, form submission is prevented


}
</script>

</body>
</html>

Q4 b) Explain the concept of Document Object Model.

The Document Object Model (DOM) is a programming interface for web documents. It
represents the structure of an HTML or XML document as a tree of objects, where each node
corresponds to a part of the document (such as elements, attributes, and text). The DOM
allows developers to manipulate web content dynamically using programming languages like
JavaScript.
Key Concepts of the DOM:

1. Tree Structure:
o The document is structured as a hierarchical tree with a root node ( document object).
o Nodes include elements (<div>, <p>, etc.), attributes, and text.

2. Accessing the DOM:


o JavaScript can access and modify the DOM using methods like
document.getElementById() or document.querySelector().

3. Modifying the DOM:


o Developers can dynamically change the content, structure, and style of a webpage.
o Example: document.getElementById("demo").innerHTML = "Hello,
World!";

4. Event Handling:
o The DOM allows event-driven programming (e.g., onclick, onmouseover events).
o Example:
document.getElementById("btn").addEventListener("click",
function() { alert("Clicked!"); });

5. Types of Nodes:
o Element Nodes (<h1>, <p>, <div>, etc.)
o Text Nodes (content inside an element)
o Attribute Nodes (e.g., class="example")

6. DOM Levels:
o The DOM has evolved over time, with specifications from DOM Level 1 to Level 4,
improving functionality and performance.

Q4 c) Explain the advantages of jQuery. Explain jQuery syntax with example.

Solution:- jQuery is a lightweight, "write less, do more", JavaScript library. The


purpose of jQuery is to make it much easier to use JavaScript on your website.
Here are some key advantages:

1. Simplified Syntax – jQuery makes it easier to write JavaScript code with less effort.
2. Cross-Browser Compatibility – It handles browser inconsistencies, ensuring code
runs smoothly across different browsers.
3. DOM Manipulation – It provides powerful methods for manipulating the Document
Object Model (DOM).
4. Event Handling – Simplifies event handling like clicks, hovers, and keypresses.
5. AJAX Support – Provides simple AJAX methods for asynchronous requests.
6. Built-in Animations – Includes pre-defined effects and animations.
7. Lightweight Library – The minified version is small in size, reducing page load
time.
8. Extensibility – It supports plugins to extend its functionality.
9. SEO Friendly – Unlike Flash, jQuery is search engine friendly.
10. Large Community Support – A vast community provides extensive plugins and
support.

The basic syntax of jQuery follows this pattern:


$(selector).action();
 $: The jQuery symbol, used to define and access jQuery.
 selector: Specifies the HTML element to be selected.
 action(): Specifies the jQuery function to be performed on the selected elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").hide(); // Hides all <p> elements when button is
clicked
});
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id="btn">Hide Paragraphs</button>

</body>
</html>

You might also like