IT Chap 8

CLIENT-SIDE TECHNOLOGIES
HTML (HyperText Markup Language)
Definition: HTML is the standard language used to create and design documents on the web.
It structures content and enables the creation of hyperlinks between web pages.
Features of HTML
1. Simple and Easy to Learn:

o HTML is straightforward and can be learned quickly.
2. Platform Independent:
o HTML code is supported by all browsers and platforms.
3. Rich Media Support:
o Supports embedding images, videos, and audio files.
4. Hyperlinking:
o Allows linking to other web pages and resources.
5. Forms and Input:
o Enables the creation of interactive forms to collect user data.
Structure of an HTML Document
An HTML document is structured with various elements enclosed in tags. The basic structure
includes the <!DOCTYPE>, <html>, <head>, and <body> tags.
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML Document</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a sample HTML document.</p>
</body>
</html>
Paragraphs
Definition: The <p> tag is used to define a paragraph in HTML.
Example:
<p>This is a paragraph in HTML.</p>
Headings
Definition: HTML provides six levels of headings, from <h1> (highest level) to <h6> (lowest
level).
Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>
Image Tag
Definition: The <img> tag is used to embed images in an HTML document.
Example:
<img src="image.jpg" alt="Description of the image" width="500"

height="300">
Lists
Ordered List: Uses the <ol> tag to create a numbered list.
Example:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Unordered List: Uses the <ul> tag to create a bulleted list.
Example:
<ul>
<li>First item</li>
<li>Third item</li>
</ul>
Forms
Definition: The <form> tag is used to create an interactive form for user input. It can include
various input types like text fields, checkboxes, radio buttons, and submit buttons.
Example:
<form action="/submit-form" method="post">

<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">

</form>
Example HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph introducing the website.</p>
<h2>About Me</h2>
<p>This paragraph contains information about me.</p>
<h2>My Favorite Foods</h2>

<ul>
<li>Pizza</li>
<li>Sushi</li>
<li>Chocolate</li>
</ul>
<h2>My Projects</h2>
<ol>
<li>Project One</li>
<li>Project Two</li>
<li>Project Three</li>
</ol>
<h2>Contact Me</h2>

</form>
<h2>Gallery</h2>
<img src="image1.jpg" alt="An example image" width="500" height="300">
</body>
</html>
Basic HTML Tags with Examples
HTML tags are the building blocks of web pages. Each tag serves a specific purpose and
defines different parts of the HTML document.
1. <!DOCTYPE html>
Purpose: Declares the document type and version of HTML being used.
<!DOCTYPE html>
<html>

</html>
2. <html>
Purpose: The root element that encompasses the entire HTML document.
html
<!DOCTYPE html>
<html>

</html>
3. <head>
Purpose: Contains meta-information about the HTML document, such as the title, character
set, styles, and links to external resources.
<html>
<head>
<title>Page Title</title>
</head>
</html>
4. <title>
Purpose: Sets the title of the HTML document, which appears in the browser's title bar or
tab.
<head>
<title>My Web Page</title>
</head>
5. <body>
Purpose: Contains the content of the HTML document, such as text, images, links, forms,
and other elements.
<html>
<body>

</body>
</html>
6. <h1> to <h6>
Purpose: Define headings, with <h1> being the highest (most important) level and <h6> the
lowest (least important).
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>
7. <p>
Purpose: Defines a paragraph of text.
<p>This is a paragraph.</p>
8. <br>
Purpose: Inserts a line break.
<p>This is a line break<br>Example of another line.</p>

9. <hr>
Purpose: Inserts a horizontal rule (line), typically used to separate content.
<p>First section</p>
<hr>
<p>Second section</p>
10. <a>
Purpose: Defines a hyperlink to another page or resource.
<a href="https://www.example.com">Visit Example</a>

11. <img>
Purpose: Embeds an image in the HTML document.
<img src="image.jpg" alt="Description of image" width="500" height="300">

12. <ul> and <ol>
Purpose: Define unordered (bulleted) and ordered (numbered) lists, respectively.
<ul>
<li>First item</li>
</ul>
<ol>
<li>First item</li>
</ol>
13. <li>
Purpose: Defines a list item within <ul> or <ol>.
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
14. <div>
Purpose: Defines a division or section in an HTML document, used to group block-level

content.
<div>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</div>
15. <span>
Purpose: Defines an inline section of content, often used for styling purposes.
<p>This is a <span style="color: red;">highlighted</span> word.</p>

16. <form>
Purpose: Defines an interactive form for user input.


</form>
17. <input>
Purpose: Defines an input field within a form.
<form>
<input type="text" id="name" name="name">
</form>
18. <label>
Purpose: Defines a label for an <input> element.
<input type="text" id="name" name="name">
19. <button>
Purpose: Defines a clickable button.
<button type="button" onclick="alert('Hello!')">Click Me</button>

20. <table>, <tr>, <td>, <th>
Purpose: Define a table and its elements: table rows (<tr>), table data cells (<td>), and table
headers (<th>).
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Example HTML Document Using Basic Tags

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph with some <span style="color: red;">highlighted
text</span>.</p>
<p>Here is an image:</p>
<img src="image.jpg" alt="A beautiful scenery" width="300"
height="200">
<h2>Favorite Foods</h2>
<ul>
<li>Pizza</li>
<li>Sushi</li>
<li>Chocolate</li>
</ul>
<h2>Contact Me</h2>

</form>
<h2>Table Example</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<hr>
<p>Footer Information</p>
</body>
</html>
Syntax Rules of HTML
Understanding the syntax rules of HTML is crucial for creating well-structured and valid web
documents. Here are the key syntax rules:
1. Tags and Elements
• Tags: HTML tags are enclosed in angle brackets (< and >). Most tags come in pairs,
an opening tag and a closing tag.
o Example: <p> and </p>
• Elements: An HTML element is defined by a start tag, some content, and an end tag.
o Example: <p>This is a paragraph.</p>
2. Nesting
• HTML elements can be nested within other elements. Properly nested tags should have the
inner tags closed before the outer tags.
o Correct: <div><p>This is a paragraph.</p></div>
o Incorrect: <div><p>This is a paragraph.</div></p>
3. Attributes
• Attributes provide additional information about an element and are always included in the
opening tag. They are written as name-value pairs.
o Example: <img src="image.jpg" alt="Description" width="300"
height="200">
• Attribute values should be enclosed in quotes, either single (') or double ("), although
double quotes are more common.
4. Case Sensitivity
• HTML tags and attributes are not case-sensitive, but it is a common practice to write them in
lowercase.
o Example: <p> is equivalent to <P>, but <p> is preferred.
5. Self-Closing Tags
• Some HTML elements are self-closing, meaning they do not have a closing tag. These
elements usually represent void content (e.g., line breaks, images).
o Example: <img src="image.jpg" alt="Description" />
6. Doctype Declaration
• The <!DOCTYPE> declaration must be the very first line in an HTML document. It defines the
document type and version of HTML.
o Example: <!DOCTYPE html>
7. Comments
• HTML comments are used to add notes or explanations within the code that will not be
displayed on the webpage. Comments are enclosed in .
o Example: 
8. Character References
• Special characters that cannot be typed directly or could be misinterpreted as HTML code
are represented using character references.
o Example: < for <, > for >, & for &
Example: Well-Structured HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph with some <span style="color: red;">highlighted
text</span>.</p>
<p>Here is an image:</p>
<img src="image.jpg" alt="A beautiful scenery" width="300"
height="200">
<h2>Favorite Foods</h2>
<ul>
<li>Pizza</li>
<li>Sushi</li>
<li>Chocolate</li>
</ul>
<h2>Contact Me</h2>

</form>
<h2>Table Example</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<hr>
<p>Footer Information</p>
</body>
</html>
Summary of Key Points
• Tags: Enclosed in angle brackets, usually come in pairs.

• Nesting: Properly close inner tags before outer tags.
• Attributes: Written as name-value pairs inside opening tags.
• Case Sensitivity: Tags and attributes are not case-sensitive, lowercase is preferred.
• Self-Closing Tags: Some elements do not have closing tags.
• Doctype Declaration: Must be the first line in the HTML document.
• Comments: Enclosed in .
• Character References: Used for special characters.
What is an attribute.
An attribute in HTML provides additional information about an element. Attributes are

always included in the opening tag of an element and typically come in name-value pairs like
name="value". Attributes modify the default behavior of an HTML element or provide
additional functionality.
Syntax
<tagname attribute="value">Content</tagname>
Example
Here is an example of an HTML element with various attributes:
<!DOCTYPE html>
<html>
<head>
<title>HTML Attribute Example</title>
</head>
<body>

<img src="image.jpg" alt="A description of the image" width="500"
height="600">

<a href="https://www.example.com" target="_blank">Visit Example.com</a>

<input type="button" value="Click Me">
</body>
</html>
In this example:
1. The img tag uses the src attribute to specify the image file, the alt attribute to
provide alternative text, and the width and height attributes to set the image size.
2. The a tag uses the href attribute to specify the URL of the link and the target
attribute to open the link in a new tab.
3. The input tag uses the type attribute to define the input type as a button and the
value attribute to specify the button's label.
Frames
In HTML, a frame is a section of a webpage that can display a separate HTML document.
Frames were used to create complex layouts by dividing the browser window into multiple
sections, each capable of displaying a different document. However, the use of frames is
largely outdated and discouraged in modern web development due to usability, accessibility,
and SEO concerns. Instead, developers use CSS and JavaScript to create dynamic layouts.
Syntax of Frames
HTML frames are defined using the <frameset> element, which replaces the <body>
element when frames are used. The <frameset> element specifies the number of columns or
rows and their dimensions. Each frame within the frameset is defined using the <frame>
element.
Basic Syntax:
<frameset rows="row_height1, row_height2, ...">
<frame src="URL_of_document1">
...
</frameset>
<frameset cols="column_width1, column_width2, ...">

...
</frameset>
Example:
This example divides the browser window into two rows. The first row is 30% of the window
height and the second row takes the remaining 70%. The first row loads header.html and
the second row loads content.html.
<!DOCTYPE html>
<html>
<head>
<title>Frames Example</title>
</head>
<body>
<frameset rows="30%,70%">
<frame src="header.html">
<frame src="content.html">
</frameset>
</body>
</html>
Nested Framesets
Framesets can be nested to create more complex layouts. For example, you can divide the
window into two columns, where the second column is further divided into two rows.
<!DOCTYPE html>
<html>
<head>
<title>Nested Frames Example</title>
</head>
<body>
<frameset cols="30%,70%">
<frame src="menu.html">
<frameset rows="50%,50%">
<frame src="top.html">
<frame src="bottom.html">
</frameset>
</frameset>
</body>
</html>
Attributes of <frame>
• src: Specifies the URL of the document to be displayed in the frame.

• name: Assigns a name to the frame, which can be targeted by links from other frames.
• scrolling: Controls the scrollbars in the frame. Values can be yes, no, or auto.
• noresize: Prevents the user from resizing the frame.
• frameborder: Controls whether the frame has a border. Values can be 0 (no border) or 1
(border).
What is Cascading Style Sheets? explain CSS with syntax with examples.
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a
document written in HTML or XML. CSS defines how elements should be rendered on
screen, on paper, in speech, or on other media. It allows developers to separate content
(HTML) from presentation (CSS), making it easier to maintain and update websites.
CSS Syntax
A CSS rule consists of a selector and a declaration block. The selector targets the HTML
elements to be styled, while the declaration block contains one or more declarations, each
consisting of a property and a value.
Basic Syntax:
selector {
property: value;
property: value;
...
}
• Selector: Specifies the HTML element to be styled.

• Property: Defines the aspect of the element to be styled (e.g., color, font-size).
• Value: Specifies the value for the property.
Example
Here is an example of CSS applied to an HTML document:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>CSS Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<div class="container">
<p class="text">Styled text inside a div.</p>
</div>
</body>
</html>
CSS (styles.css):
/* Selector for the <h1> element */

h1 {
color: blue;
font-size: 24px;
text-align: center;
}
/* Selector for all <p> elements */

p {
color: green;
font-size: 16px;
}
/* Class selector for elements with class "container" */

.container {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
/* Class selector for elements with class "text" */

.text {
color: red;
}
Types of CSS
1. Inline CSS: Inline CSS is used to apply a unique style to a single HTML element. It
is added using the style attribute within the HTML element.
html
<h1 style="color: blue; text-align: center;">Hello, World!</h1>
2. Internal CSS: Internal CSS is used to define styles for a single HTML document. It
is placed inside a <style> element within the <head> section of the HTML
document.
html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
<title>Internal CSS Example</title>
</head>
<body>
</body>
</html>
3. External CSS: External CSS is used to apply styles to multiple HTML documents. It
is defined in an external file with a .css extension and linked to HTML documents
using the <link> element.
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>External CSS Example</title>
</head>
<body>
</body>
</html>
CSS Selectors
CSS selectors are used to select the HTML elements you want to style. Here are some
common selectors:
• Element Selector: Targets all instances of a specific element.
css
p {
color: green;
}
• Class Selector: Targets elements with a specific class. Classes are defined with a dot
(.) before the class name.
css
.container {
}
• ID Selector: Targets an element with a specific ID. IDs are defined with a hash (#)
before the ID name.
css
#uniqueElement {
background-color: yellow;
}
• Universal Selector: Targets all elements on the page.
css
* {
margin: 0;
padding: 0;
}
• Descendant Selector: Targets elements that are descendants of a specified element.
css
div p {
color: blue;
}
• Pseudo-class Selector: Targets elements based on their state or position.
css
a:hover {
color: red;
}
Example with Pseudo-class and Pseudo-element:

css
/* Pseudo-class to style links on hover */

a:hover {
color: red;
}
/* Pseudo-element to style the first line of a paragraph */

p::first-line {
font-weight: bold;
}
By using CSS, developers can create visually appealing and well-structured web pages that
are easier to maintain and update.
Properties of css with syntax and example.
CSS (Cascading Style Sheets) provides a wide range of properties to style HTML elements.
Below is a comprehensive list of common CSS properties along with their syntax and
examples:
Basic Text Properties
1. color
o Syntax: color: value;
o Example:
css
p {
color: red;
}
2. font-family
o Syntax: font-family: value;
o Example:
css
h1 {
font-family: Arial, sans-serif;
}
3. font-size
o Syntax: font-size: value;
o Example:
h2 {
font-size: 20px;
}
4. font-style
o Syntax: font-style: value;
o Example:
em {
font-style: italic;
}
5. font-weight
o Syntax: font-weight: value;
o Example:
strong {
font-weight: bold;
}
6. text-align
o Syntax: text-align: value;
o Example:
h1 {
text-align: center;
}
7. text-decoration
o Syntax: text-decoration: value;
o Example:
a {
text-decoration: none;
}
8. line-height
o Syntax: line-height: value;
o Example:
p {
line-height: 1.5;
}
Background Properties
1. background-color
o Syntax: background-color: value;
o Example:
body {
background-color: #f0f0f0;
}
2. background-image
o Syntax: background-image: url('path/to/image');
o Example:
div {
background-image: url('background.jpg');
}
3. background-repeat
o Syntax: background-repeat: value;
o Example:
div {
background-repeat: no-repeat;
}
4. background-position
o Syntax: background-position: value;
o Example:
div {
background-position: center;
}
5. background-size
o Syntax: background-size: value;
o Example:
div {
background-size: cover;
}
Box Model Properties
1. width
o Syntax: width: value;
o Example:
div {
width: 50%;
}
2. height
o Syntax: height: value;
o Example:
div {
height: 100px;
}
3. margin
o Syntax: margin: value;
o Example:
p {
margin: 20px;
}
4. padding
o Syntax: padding: value;
o Example:
div {
padding: 10px;
}
5. border
o Syntax: border: width style color;
o Example:
div {
}
6. border-radius
o Syntax: border-radius: value;
o Example:
button {
border-radius: 5px;
}
Positioning Properties
1. position
o Syntax: position: value;
o Example:
div {
position: relative;
}
2. top, right, bottom, left

o Syntax: top: value;, right: value;, bottom: value;, left: value;
o Example:
div {
position: absolute;
top: 10px;
left: 20px;
}
3. z-index
o Syntax: z-index: value;
o Example:
div {
position: absolute;
z-index: 10;
}
4. float
o Syntax: float: value;
o Example:
img {
float: left;
}
5. clear
o Syntax: clear: value;
o Example:
div {
clear: both;
}
Display Properties
1. display
o Syntax: display: value;
o Example:
span {
display: block;
}
2. visibility
o Syntax: visibility: value;
o Example:
p {
visibility: hidden;
}
3. overflow
o Syntax: overflow: value;
o Example:
div {
overflow: scroll;
}
Flexbox Properties
1. display: flex
o Syntax: display: flex;
o Example:
.container {
display: flex;
}
2. flex-direction
o Syntax: flex-direction: value;
o Example:
.container {
flex-direction: row;
}
3. justify-content
o Syntax: justify-content: value;
o Example:
.container {
justify-content: center;
}
4. align-items
o Syntax: align-items: value;
o Example:
.container {
align-items: center;
}
Grid Properties
1. display: grid
o Syntax: display: grid;
o Example:
.grid-container {
display: grid;
}
2. grid-template-columns
o Syntax: grid-template-columns: value;
o Example:
.grid-container {
grid-template-columns: 1fr 1fr;
}
3. grid-template-rows
o Syntax: grid-template-rows: value;
o Example:
.grid-container {
grid-template-rows: 100px 200px;
}
4. gap
o Syntax: gap: value;
o Example:
.grid-container {
gap: 10px;
}
Other Common Properties
1. opacity
o Syntax: opacity: value;
o Example:
div {
opacity: 0.5;
}
2. cursor
o Syntax: cursor: value;
o Example:
a {
cursor: pointer;
}
3. box-shadow
o Syntax: box-shadow: value;
o Example:
div {
box-shadow: 2px 2px 5px grey;
}
4. transition
o Syntax: transition: property duration timing-function delay;
o Example:
div {
transition: all 0.3s ease-in-out;
}
5. transform
o Syntax: transform: value;
o Example:
div {
transform: rotate(45deg);
}
Pseudo-classes and Pseudo-elements
1.
o Syntax: selector:hover { ... }
o Example:
a:hover {
color: red;
}
2.
o Syntax: selector:first-child { ... }
o Example:
p:first-child {
font-weight: bold;
}
3. ::before
o Syntax: selector::before { ... }
o Example:
p::before {
content: "Note: ";
color: red;
}
4. ::after
o Syntax: selector::after { ... }
o Example:
p::after {
content: " End.";
color: blue;
}
What is java Script? Explain java script working with syntax and examples.
JavaScript is a high-level, interpreted programming language that is widely used to create

interactive effects within web browsers. It is a core technology of the World Wide Web,
alongside HTML and CSS, enabling dynamic content and enhancing user experiences.
JavaScript can be used for a variety of tasks, including manipulating HTML and CSS,
handling events, validating form data, and making asynchronous requests (AJAX).
How JavaScript Works

JavaScript is typically executed in the browser, but it can also run on servers using
environments like Node.js. When a web page is loaded, the browser's JavaScript engine
executes the script, allowing it to interact with the HTML and CSS to create dynamic web
pages.
Syntax and Examples
Including JavaScript in HTML
1. Inline JavaScript: JavaScript code can be placed directly within an HTML element
using the onclick attribute or other event attributes.
html
<button onclick="alert('Hello, World!')">Click me</button>
2. Internal JavaScript: JavaScript code can be included within a <script> tag inside
the HTML document.
html
<!DOCTYPE html>
<html>
<head>
<title>Internal JavaScript Example</title>
<script>
function showMessage() {
alert('Hello, World!');
}
</script>
</head>
<body>
<button onclick="showMessage()">Click me</button>
</body>
</html>
3. External JavaScript: JavaScript code can be placed in an external file and linked to
the HTML document.
html
<!DOCTYPE html>
<html>
<head>
<title>External JavaScript Example</title>
<script src="script.js"></script>
</head>
<body>
<button onclick="showMessage()">Click me</button>
</body>
</html>
javascript
// script.js
function showMessage() {
alert('Hello, World!');
}
Basic Syntax
Variables
Variables are used to store data. In JavaScript, you can declare a variable using var, let, or
const.
javascript
let name = "John";

const age = 30;
var isStudent = true;
Data Types
JavaScript supports various data types, including:
• String: "Hello, World!"

• Number: 42
• Boolean: true or false
• Array: [1, 2, 3]
• Object: {name: "John", age: 30}
• Null: null
• Undefined: undefined
Functions
Functions are reusable blocks of code designed to perform a particular task.
javascript
function greet(name) {
return "Hello, " + name + "!";
}
let message = greet("Alice");

console.log(message); // Output: Hello, Alice!
Conditional Statements
Conditional statements are used to perform different actions based on different conditions.
javascript
let age = 18;
if (age < 18) {

console.log("You are a minor.");
} else if (age >= 18 && age < 65) {
console.log("You are an adult.");
} else {
console.log("You are a senior.");
}
Loops
Loops are used to repeat a block of code multiple times.
javascript
// For loop
for (let i = 0; i < 5; i++) {
console.log(i);
}
// While loop
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
Arrays
Arrays are used to store multiple values in a single variable.
javascript
let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[0]); // Output: Apple
fruits.push("Orange"); // Add an item to the end of the array

console.log(fruits.length); // Output: 4
Objects
Objects are collections of key-value pairs.
javascript
let person = {
name: "John",
age: 30,
greet: function() {
return "Hello, " + this.name + "!";
}
};
console.log(person.name); // Output: John

console.log(person.greet()); // Output: Hello, John!
Event Handling
JavaScript can respond to user interactions like clicks, mouse movements, and keyboard
inputs.
html
<!DOCTYPE html>
<html>
<head>
<title>Event Handling Example</title>
<script>
function changeText() {
document.getElementById("myText").innerHTML = "Text changed!";
}
</script>
</head>
<body>
<p id="myText">Click the button to change this text.</p>
<button onclick="changeText()">Click me</button>
</body>
</html>
DOM Manipulation
JavaScript can manipulate the Document Object Model (DOM) to dynamically update the
content and structure of web pages.
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Example</title>
<script>
function addParagraph() {
let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);
}
</script>
</head>
<body>
<button onclick="addParagraph()">Add Paragraph</button>
</body>
</html>
AJAX (Asynchronous JavaScript and XML)
AJAX is a web development technique used for creating interactive web applications. It
allows web pages to be updated asynchronously by exchanging small amounts of data with
the server behind the scenes. This means that it is possible to update parts of a web page
without reloading the entire page.
How AJAX Works
AJAX uses a combination of:
• HTML/CSS for presenting the content.

• JavaScript for making asynchronous requests to the server and updating the web page
dynamically.
• XML/JSON for receiving and sending data.
Example of AJAX
Here's a simple example of how AJAX can be used to fetch data from a server and update the
web page without reloading it.
HTML
html
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
<script>
function loadData() {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("content").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "data.txt", true);
xhr.send();
}
</script>
</head>
<body>
<h1>AJAX Example</h1>
<button onclick="loadData()">Load Data</button>
<div id="content">Content will be loaded here.</div>
</body>
</html>
Explanation
1. HTML Structure:
o A button is provided to trigger the AJAX request.
o A div with the id content where the fetched data will be displayed.
2. JavaScript Function (loadData):
o Creates an instance of XMLHttpRequest.
o Defines the onreadystatechange event handler to specify what should happen
when the server response is ready.
o Opens a GET request to fetch data.txt.
o Sends the request.
Features of AJAX
1. Asynchronous Processing: AJAX allows for asynchronous communication, meaning

multiple requests can be handled simultaneously without blocking the user interface.
2. Partial Page Updates: AJAX can update parts of a web page without reloading the
entire page, enhancing the user experience by making web applications faster and
more responsive.
3. Cross-Browser Compatibility: AJAX works with most modern browsers, making it
a widely applicable technology.
Advantages of AJAX
1. Improved User Experience: AJAX allows for smoother and faster interactions by
updating only parts of the page, reducing the wait time for the user.
2. Reduced Server Load: By only sending and receiving the necessary data, AJAX can
reduce the amount of data transfer between the client and the server, leading to lower
server load and bandwidth usage.
3. Increased Speed: Partial updates and asynchronous processing lead to faster
interactions and improved performance of web applications.
Disadvantages of AJAX
1. Browser Compatibility Issues: While AJAX works with most modern browsers,
there can be inconsistencies or issues with older browsers.
2. Security Risks: AJAX can introduce security vulnerabilities, such as cross-site
scripting (XSS) and cross-site request forgery (CSRF), if not implemented carefully.
3. Complexity: Adding AJAX to a web application can increase the complexity of both
client-side and server-side code, making it harder to debug and maintain.
Bootstrap Framework
Bootstrap is a free, open-source front-end framework for developing responsive and mobile-
first websites. It includes HTML, CSS, and JavaScript components for creating a wide range
of web designs and interfaces.
Features of Bootstrap
1. Responsive Design:
o Built to create responsive, mobile-first projects on the web.
2. Pre-styled Components:
o Offers a plethora of pre-styled components like buttons, forms, navigation bars, and
modals.
3. Grid System:
o Utilizes a flexible grid system for creating complex layouts.
4. Customizable:
o Highly customizable with LESS or SASS variables.
5. Cross-Browser Compatibility:
o Ensures consistent design across different browsers and devices.
Example of Bootstrap
HTML
Here's a simple example of a Bootstrap webpage with a navbar, grid layout, and a button.
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>

<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
" rel="stylesheet">
</head>
<body>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>


<div class="container mt-5">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="card">
</div>
</div>
</div>
<div class="card">
</div>
</div>
</div>
</div>
</div>


<div class="text-center mt-5">
<button type="button" class="btn btn-primary">Primary Button</button>
</div>


<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></sc
ript>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min
.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"><
/script>
</body>
</html>
Explanation
1. Bootstrap CSS:
o The Bootstrap CSS file is included in the <head> section using a CDN.
2. Navbar:
o A responsive navigation bar is created using Bootstrap classes such as navbar,
navbar-expand-lg, and navbar-light.
3. Grid Layout:
o A grid layout with three columns is created using the container, row, and col-
md-4 classes.
4. Button:
o A styled button is created using the btn and btn-primary classes.
5. Bootstrap JS and Dependencies:
o Bootstrap JavaScript and its dependencies (jQuery and Popper.js) are included at the
end of the document.
Advantages of Bootstrap
1. Ease of Use:
o Bootstrap is easy to use and includes extensive documentation and examples.
2. Responsive Design:
o Built with mobile-first approach, ensuring responsiveness across all devices.
3. Consistency:
o Provides a consistent design and appearance across different browsers and devices.
4. Customizable:
o Highly customizable using LESS or SASS variables and mixins.
5. Pre-styled Components:
o Offers a wide range of pre-styled components, saving development time.
6. Community Support:
o Has a large community of developers, providing extensive support and resources.
Disadvantages of Bootstrap
1. Heavy:
o Including the entire Bootstrap library can be heavy, which might affect page load
time.
2. Learning Curve:
o Despite its ease of use, learning all the components and classes can be
overwhelming for beginners.
3. Generic Look:
o Websites using Bootstrap can look similar if not customized, leading to a lack of
uniqueness.
4. Overuse of Classes:
o Using too many Bootstrap classes can clutter HTML code, making it less readable.
5. Dependency on JavaScript:
o Some Bootstrap components rely on JavaScript libraries (like jQuery), which can
increase complexity and load time.
AngularJS Framework
AngularJS is a structural framework for dynamic web applications. It lets you use HTML as
your template language and extend HTML's syntax to express your application's components
clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of
the code you would otherwise have to write.
Core Features of AngularJS
1. Two-Way Data Binding: Synchronizes data between the model and the view.
2. MVC Architecture: Separates application logic, data, and view.
3. Directives: Extend HTML with custom attributes and elements.
4. Dependency Injection: Handles service creation and dependency resolution.
5. Filters: Format data displayed to the user.
6. Modules: Encapsulate various components of an application.
Example of AngularJS
HTML
Here is a simple example of an AngularJS application that displays a list of items and allows
the user to add a new item to the list.
html
Copy code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Example</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
$scope.addItem = function() {
$scope.items.push($scope.newItem);
$scope.newItem = '';
};
});
</script>
</head>
<body>
<div ng-controller="myCtrl">
<h1>My Items</h1>
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
<input type="text" ng-model="newItem" placeholder="Add a new item">
<button ng-click="addItem()">Add</button>
</div>
</body>
</html>
Explanation
1. AngularJS Script:
o AngularJS library is included via a CDN.
2. ng-app Directive:
o Defines the root element of the AngularJS application.
3. ng-controller Directive:
o Attaches the controller myCtrl to the div element.
4. Controller:
o Contains the application logic. In this case, it manages the list of items and provides
a function to add a new item.
5. ng-repeat Directive:
o Repeats an HTML element for each item in a collection.
6. ng-model Directive:
o Binds the value of HTML controls (input, select, textarea) to application data.
7. ng-click Directive:
o Specifies a behavior when an element is clicked.
Advantages of AngularJS
1. Two-Way Data Binding:

o Simplifies the synchronization between the model and the view, reducing
boilerplate code.
2. MVC Architecture:
o Promotes the separation of concerns and organizes code efficiently.
3. Reusable Components:
o Directives and components can be reused, making the code modular and
maintainable.
4. Dependency Injection:
o Improves testability and manageability by providing built-in dependency injection.
5. Community and Support:
o Large community with extensive documentation, tutorials, and third-party tools.
Disadvantages of AngularJS
1. Complexity:
o Steeper learning curve for beginners, especially those new to JavaScript frameworks.
2. Performance Issues:
o Can be slower with large datasets or complex DOM manipulations due to its two-
way data binding mechanism.
3. Verbose:
o Can require a lot of boilerplate code, making it verbose compared to some newer
frameworks.
4. Backward Compatibility:
o AngularJS (1.x) is not backward compatible with Angular (2+), requiring significant
changes for migration.
5. Scopes:
o Scope hierarchy and digest cycle can be confusing and lead to unexpected behaviors
if not managed properly.

IT Chap 8

Uploaded by

Copyright:

Available Formats

IT Chap 8

Uploaded by

Document Information

Original Title

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

IT Chap 8

Uploaded by

Copyright:

Available Formats

CLIENT-SIDE TECHNOLOGIES

HTML (HyperText Markup Language)

1. Simple and Easy to Learn:

Structure of an HTML Document

Definition: The <p> tag is used to define a paragraph in HTML.

<p>This is a paragraph in HTML.</p>

Definition: The <img> tag is used to embed images in an HTML document.

<img src="image.jpg" alt="Description of the image" width="500"

Ordered List: Uses the <ol> tag to create a numbered list.

Unordered List: Uses the <ul> tag to create a bulleted list.

<form action="/submit-form" method="post">

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

Example HTML Document

<h2>My Favorite Foods</h2>

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

Basic HTML Tags with Examples

Purpose: Defines a paragraph of text.

Purpose: Inserts a line break.

<p>This is a line break<br>Example of another line.</p>

Purpose: Inserts a horizontal rule (line), typically used to separate content.

Purpose: Defines a hyperlink to another page or resource.

<a href="https://www.example.com">Visit Example</a>

Purpose: Embeds an image in the HTML document.

<img src="image.jpg" alt="Description of image" width="500" height="300">

Purpose: Define unordered (bulleted) and ordered (numbered) lists, respectively.

Purpose: Defines a list item within <ul> or <ol>.

Purpose: Defines a division or section in an HTML document, used to group block-level

<p>This is a <span style="color: red;">highlighted</span> word.</p>

Purpose: Defines an interactive form for user input.

<form action="/submit-form" method="post">

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

Purpose: Defines an input field within a form.

Purpose: Defines a label for an <input> element.

Purpose: Defines a clickable button.

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

Example HTML Document Using Basic Tags

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

Syntax Rules of HTML

1. Tags and Elements

Example: Well-Structured HTML Document

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

Summary of Key Points

• Tags: Enclosed in angle brackets, usually come in pairs.

An attribute in HTML provides additional information about an element. Attributes are

Here is an example of an HTML element with various attributes:

<frameset cols="column_width1, column_width2, ...">

• src: Specifies the URL of the document to be displayed in the frame.

• Selector: Specifies the HTML element to be styled.

Here is an example of CSS applied to an HTML document:

/* Selector for the <h1> element */

/* Selector for all <p> elements */

/* Class selector for elements with class "container" */

/* Class selector for elements with class "text" */

<h1 style="color: blue; text-align: center;">Hello, World!</h1>

• Element Selector: Targets all instances of a specific element.

• Universal Selector: Targets all elements on the page.

• Descendant Selector: Targets elements that are descendants of a specified element.

• Pseudo-class Selector: Targets elements based on their state or position.

Example with Pseudo-class and Pseudo-element: