Insem Solution 2023
Insem Solution 2023
's Educational
Institute’s
Trinity College of Engineering and
Research
Department of Computer
Engineering
Web Technology- Course Code
310252
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.
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>
<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
<head>
<style>
p{
color: green;
font-size: 18px;
</style>
</head>
<body>
</body>
</html>
3. External CSS
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>
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.
Methods of http
The Document Tree in the Document Object Model (DOM) represents the
hierarchical structure of an HTML or XML document.
When a web page is loaded, the browser creates a Document Object Model of
the page.
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 --
>).
<!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
└── body
├── h1
└── p
let n1 = 0, n2 = 1, nextTerm;
console.log('Fibonacci Series:');
console.log(n1);
nextTerm = n1 + n2;
n1 = n2;
n2 = nextTerm;
}
c) What is Angular JS? Explain Angular JS directives for data binding with
example.
AngularJS uses directives for data binding. Some key directives are:
<!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="">
</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>
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>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<span class="error" id="emailError"></span><br><br>
<button type="submit">Register</button>
</form>
<script>
function validateForm() {
let isValid = true;
</body>
</html>
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.
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.
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.
<!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>