Comprehensive Study Material

on Internet and Web Design

Unit 1: Introduction

Lesson 1: Introduction to Internet and Web Design

What is the Internet?

Definition: The Internet is a vast network of interconnected computers

that allows for the exchange of data and information globally through
standardized communication protocols.

History:

1960s: The concept of ARPANET, funded by the U.S. Department of

Defense, aimed at creating a communication system that could
withstand a nuclear attack by decentralizing information storage and
processing. This led to the foundation of the Internet.

1980s: The development of the Transmission Control Protocol/Internet

Protocol (TCP/IP) suite standardized the communication protocols for
different networks to interconnect, laying the groundwork for the
global Internet.

1990s: The invention of the World Wide Web by Tim Berners-Lee

provided a user-friendly interface for accessing Internet resources.
The commercialization of the Internet began, making it accessible to
the general public.

Features:

Decentralized: No single entity controls the Internet, making it robust

and resilient.

Scalable and Flexible Architecture: It can grow and adapt to new

technologies and increasing demand.

Comprehensive Study Material on Internet and Web Design 1

 Support for Various Services: Including email, file transfer, online
gaming, social networking, streaming media, and e-commerce.

Web Design:

Definition: Web design involves the planning, creation, and maintenance

of websites. It encompasses several aspects including web graphic
design, interface design, user experience design, and search engine
optimization.

Components:

Aesthetic Design:

Layout: The way elements like text, images, and navigation menus
are arranged on the webpage.

Color Scheme: A coordinated set of colors used throughout the

website to create visual interest and convey the brand's identity.

Typography: The selection of fonts, sizes, spacing, and styles

used for the text to enhance readability and complement the
design.

Functional Design:

Navigation: The system by which users find information and move

through the website. Effective navigation is intuitive and
straightforward.

Interactivity: Features that allow users to engage with the website,

such as forms, buttons, and multimedia elements.

Goals:

User-Centric Design: Creating websites that are accessible, usable,

and provide a positive user experience.

Compatibility: Ensuring that websites work correctly across various

devices (desktops, tablets, smartphones) and browsers (Chrome,
Firefox, Safari, etc.).

Lesson 2: Basic Concepts of Web Architecture

Comprehensive Study Material on Internet and Web Design 2

 Client-Server Model:

Client: A client is any device (such as a computer or smartphone) that

requests data from a server. The most common client is a web browser.

Server: A server is a powerful computer that stores and serves web pages
to clients upon request. Servers run web server software (like Apache or
IIS) to manage these requests.

Key Web Components:

Web Pages:

Static Web Pages: Content is fixed and does not change unless
manually updated by the webmaster. HTML is the primary language
used.

Dynamic Web Pages: Content is generated in real-time based on user

interactions or other parameters. Server-side scripting languages like
PHP, ASP.NET, or JavaScript are used.

Protocols:

HTTP (HyperText Transfer Protocol): The protocol used for

transferring web pages on the internet.

HTTPS (HyperText Transfer Protocol Secure): A secure version of

HTTP that uses encryption (SSL/TLS) to protect data during
transmission.

Domain Names and URLs:

Domain Name: A unique, human-readable address for a website (e.g.,

www.example.com).

URL (Uniform Resource Locator): The complete address used to

access a specific resource on the Internet (e.g.,
https://example.com/page.html).

Website Hosting:

Types:

Shared Hosting: Multiple websites share the resources of a single

server. It is cost-effective but may impact performance.

Comprehensive Study Material on Internet and Web Design 3

 VPS Hosting (Virtual Private Server): A physical server is divided into
multiple virtual servers, each acting independently. Offers better
performance and control than shared hosting.

Dedicated Hosting: An entire server is dedicated to a single website,

providing maximum performance and control.

Cloud Hosting: Uses multiple servers to host websites, allowing for

scalability and high availability. Resources are adjusted dynamically
based on demand.

Tools:

FTP (File Transfer Protocol): A standard network protocol used to

transfer files from a client to a server on a computer network.

cPanel: A web-based control panel for managing hosting accounts,

domains, emails, databases, and more.

CDNs (Content Delivery Networks): A system of distributed servers

that deliver web content to users based on their geographic location,
enhancing load speeds and reliability.

Unit 2: HTML (Hypertext Markup Language)

Lesson 1: Introduction to HTML

Definition: HTML is the standard markup language used for creating web
pages and web applications. It provides the structure of a webpage.

Features:

Platform-Independent: HTML files can be created and viewed on any

operating system and browser.

Open Standard: HTML is maintained by the World Wide Web Consortium

(W3C) and is universally supported.

Extensible: HTML can be extended with CSS (for styling) and JavaScript
(for interactivity).

Versions:

Comprehensive Study Material on Internet and Web Design 4

 HTML 1.0 to HTML 4.01: The initial versions, each adding new features
and improving standards.

XHTML: A stricter, XML-based syntax for HTML.

HTML5: The latest version, which supports new elements and APIs for
multimedia, graphical content, and interactive applications.

Lesson 2: Structure of an HTML Document

Document Skeleton:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini
tial-scale=1.0">
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>

Tags:

<html> : The root element of an HTML page.

<head> : Contains meta-information about the document, such as the

title, character encoding, and links to stylesheets.

<body> : Contains the content of the web page, including text, images,
and other media.

Lesson 3: Text Formatting and Lists

Formatting Tags:

<b> : Bold text.

Comprehensive Study Material on Internet and Web Design 5

 <i> : Italicized text.

<u> : Underlined text.

<mark> : Highlighted text.

Lists:

Ordered Lists ( <ol> ): Numbered items.

<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>

Unordered Lists ( <ul> ): Bulleted items.

<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>

Definition Lists ( <dl> ): Terms with their definitions.

<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Lesson 4: Hyperlinks and Tables

Hyperlinks:

Anchor Tag: <a href="url">Text</a> .

Attributes:

href : Specifies the URL of the page the link goes to.

Comprehensive Study Material on Internet and Web Design 6

 target="_blank" : Opens the link in a new tab.

rel="nofollow" : Prevents search engines from following the link.

title : Provides additional information about the link.

Tables:

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

Lesson 5: Forms and Multimedia

Forms:

Tags: <form> , <input> , <select> , <button> .

Attributes:

action : URL to submit form data.

method : HTTP method used to submit form data ( GET or POST ).

<form action="submit.php" method="POST">

<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="En
ter your name">
<button type="submit">Submit</button>
</form>

Images:

Comprehensive Study Material on Internet and Web Design 7

 Syntax: <img src="image.jpg" alt="Description"> .

Attributes:

src : Specifies the path to the image.

alt : Provides alternative text for screen readers.

width : Specifies the width of the image.

height : Specifies the height of the image.

Audio and Video:

Embedding Audio:

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Embedding Video:

<video controls width="320" height="240">

<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>

Unit 3: Basics of JavaScript

Lesson 1: Document Object Model (DOM)

Definition: A programming interface for HTML and XML documents
representing them as a tree structure of objects.

Key Methods:

document.getElementById(id) : Retrieves an element by its ID.

document.getElementById("demo").innerHTML = "Hello,

Comprehensive Study Material on Internet and Web Design 8

 World!";

document.querySelector(selector) : Selects the first element that matches

the specified CSS selector.

document.querySelector(".myClass").style.backgroundC
olor = "yellow";

Lesson 2: JavaScript Syntax and Variables

Data Types:

Primitive: string , number , boolean , null , undefined , symbol .

Complex: object , array , function .

Variable Declarations:

let : Block-scoped variable declaration.

const : Block-scoped constant declaration (cannot be reassigned).

: Function-scoped variable declaration (older syntax, generally

var

avoided in modern code).

let name = "John";

const PI = 3.14159;
var age = 30;

Lesson 3: Functions and Events

Functions:

Definition: A block of reusable code designed to perform a particular

task.

Syntax:

function addNumbers(a, b) {
return a + b;

Comprehensive Study Material on Internet and Web Design 9

 }
console.log(addNumbers(5, 3));

Events:

Definition: User interactions that can be detected and handled by

JavaScript.

Examples:

onclick : Triggered when an element is clicked.

onmouseover : Triggered when the mouse pointer is moved over an

element.

document.getElementById("myButton").onclick = functi
on() {
alert("Button clicked!");
};

Lesson 4: Program Flow Control

Conditionals:

If Statement: Executes a block of code if a specified condition is true.

if (score > 50) {

console.log("Passed");
} else {
console.log("Failed");
}

Else If Statement: Adds additional conditions.

if (score > 90) {

console.log("A");
} else if (score > 80) {
console.log("B");

Comprehensive Study Material on Internet and Web Design 10

 } else {
console.log("C");
}

Loops:

For Loop: Repeats a block of code a specified number of times.

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

console.log(i);
}

While Loop: Repeats a block of code as long as a specified condition

is true.

let i = 0;
while (i < 5) {
console.log(i);
i++;
}

Do-While Loop: Similar to the while loop, but the block of code is
executed at least once before the condition is tested.

let i = 0;
do {
console.log(i);
i++;
} while (i < 5);

Lesson 5: Form Validation

Purpose: Ensures that the user input meets required criteria before
submitting the form to the server.

Example:

Comprehensive Study Material on Internet and Web Design 11

 function validateForm() {
let name = document.forms["myForm"]["name"].value;
if (name === "") {
alert("Name is required");
return false;
}
}

Unit 4: Introduction to PHP

Lesson 1: Basic Syntax and Variables

Introduction: PHP (Hypertext Preprocessor) is a popular open-source
server-side scripting language used for creating dynamic web pages.

Basic Syntax:

PHP code is embedded within HTML using <?php ?> tags.

<?php
echo "Hello, World!";
?>

Variables:

PHP variables start with a $ sign, followed by the variable name.

Example:

$name = "John";
$age = 25;
echo "Name: $name, Age: $age";

Lesson 2: Data Types and Operators

Data Types:

Scalar: Integer, Float, String, Boolean.

Comprehensive Study Material on Internet and Web Design 12

 Compound: Array, Object.

Special: NULL.

Operators:

Arithmetic Operators: Perform basic arithmetic operations.

+ (Addition)

(Subtraction)

(Multiplication)

/ (Division)

Comparison Operators: Compare two values.

== (Equal)

!= (Not Equal)

> (Greater Than)

< (Less Than)

Logical Operators: Combine conditional statements.

&& (Logical AND)

|| (Logical OR)

! (Logical NOT)

Lesson 3: Control Structures

Conditional Statements:

If Statement: Executes a block of code if a specified condition is true.

if ($age > 18) {

echo "Adult";
} else {
echo "Minor";
}

Comprehensive Study Material on Internet and Web Design 13

 Else If Statement: Adds additional conditions.

if ($score > 90) {

echo "A";
} elseif ($score > 80) {
echo "B";
} else {
echo "C";
}

Loops:

For Loop: Repeats a block of code a specified number of times.

for ($i = 0; $i < 5; $i++) {

echo $i;
}

While Loop: Repeats a block of code as long as a specified condition

is true.

$i = 0;
while ($i < 5) {
echo $i;
$i++;
}

Do-While Loop: Similar to the while loop, but the block of code is
executed at least once before the condition is tested.

$i = 0;
do {
echo $i;
$i++;
} while ($i < 5);

Comprehensive Study Material on Internet and Web Design 14

 Lesson 4: Functions
Definition: Functions are reusable blocks of code that perform specific
tasks.

Syntax:

function greet($name) {
return "Hello, $name";
}
echo greet("John");

Unit 5: Handling HTML Form with PHP

Lesson 1: Form Handling with GET and POST

Form Submission:

GET Method:

Appends form data to the URL.

Example:

$name = $_GET['name'];
echo "Name: $name";

POST Method:

Sends data as part of the request body.

Example:

$name = $_POST['name'];
echo "Name: $name";

Lesson 2: Validating and Processing Form Data

Validation:

Comprehensive Study Material on Internet and Web Design 15

 Ensures user input meets required criteria before processing or storing it.

Example:

if (empty($_POST['name'])) {
echo "Name is required.";
} else {
$name = htmlspecialchars($_POST['name']);
echo "Name: $name";
}

Explanation:

empty() : Checks if a variable is empty.

: Converts special characters to HTML entities,

htmlspecialchars()

preventing cross-site scripting (XSS) attacks.

HTML Form Example:

<form action="process.php" method="POST">

<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>

Explanation:

action: Specifies the server-side script (process.php) that will handle

the form data.

method: Defines the HTTP method used to send the form data (POST in
this case).

Unit 6: Database Connectivity

Lesson 1: Connecting to a Database

Using MySQLi in PHP:

Comprehensive Study Material on Internet and Web Design 16

 $conn = new mysqli("localhost", "root", "password", "datab
ase");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully!";

Explanation:

new mysqli() : Establishes a new connection to the MySQL server.

connect_error : Checks if there was an error connecting to the database.

die() : Ends the script execution and displays an error message.

Lesson 2: Performing CRUD Operations

Create:

SQL Query:

CREATE TABLE users (

id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50)
);

PHP Code:

$sql = "INSERT INTO users (name) VALUES ('John')";

if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

Explanation:

CREATE TABLE : SQL statement to create a new table.

Comprehensive Study Material on Internet and Web Design 17

 INSERT INTO : SQL statement to insert a new record.

query() : Executes the SQL query.

error : Retrieves the latest error.

Read:

$result = $conn->query("SELECT * FROM users");

if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - Name: " . $row["name"].
"<br>";
}
} else {
echo "0 results";
}

Explanation:

SELECT * FROM : SQL statement to select all records.

num_rows : Returns the number of rows in the result set.

fetch_assoc() : Fetches a result row as an associative array.

Update:

$sql = "UPDATE users SET name='Jane' WHERE id=1";

if ($conn->query($sql) === TRUE) {
echo "Record updated successfully";
} else {
echo "Error updating record: " . $conn->error;
}

Explanation:

UPDATE : SQL statement to update existing records.

WHERE : Specifies the conditions for the update.

Comprehensive Study Material on Internet and Web Design 18

 Delete:

$sql = "DELETE FROM users WHERE id=1";

if ($conn->query($sql) === TRUE) {
echo "Record deleted successfully";
} else {
echo "Error deleting record: " . $conn->error;
}

Explanation:

DELETE FROM : SQL statement to delete records.

Lesson 3: Securing Database Connections

Importance: Secure database connections are crucial to prevent unauthorized
access and protect sensitive data.

Best Practices:

Use Prepared Statements:

Prevents SQL injection attacks by separating SQL code from data.

Example:

$stmt = $conn->prepare("SELECT name FROM users WHERE

id = ?");
$stmt->bind_param("i", $id);
$stmt->execute();
$stmt->bind_result($name);
$stmt->fetch();
echo $name;

Explanation:

prepare() : Prepares an SQL statement for execution.

: Binds variables to the prepared statement as

bind_param()

parameters.

Comprehensive Study Material on Internet and Web Design 19

 execute() : Executes the prepared statement.

bind_result() : Binds the result of the query to a variable.

Use Secure Password Storage:

Hash passwords before storing them in the database to protect against

breaches.

Example:

$password = password_hash("user_password", PASSWORD_

DEFAULT);
// To verify a password
if (password_verify("user_password", $password)) {
echo "Password is valid!";
} else {
echo "Invalid password.";
}

Explanation:

password_hash() : Creates a password hash.

password_verify() : Verifies a password against a hash.

Lesson 4: Advanced Database Operations

Joins:

Inner Join: Combines rows from two or more tables based on a related
column.

SELECT users.name, orders.product

FROM users
INNER JOIN orders ON users.id = orders.user_id;

Left Join: Returns all rows from the left table, and matched rows from the
right table.

Comprehensive Study Material on Internet and Web Design 20

 SELECT users.name, orders.product
FROM users
LEFT JOIN orders ON users.id = orders.user_id;

Indexes:

Definition: Indexes improve the speed of data retrieval operations on a

database table.

Creating an Index:

CREATE INDEX idx_name ON users (name);

Transactions:

Definition: A transaction is a sequence of one or more SQL statements

that are executed as a single unit of work.

Example:

$conn->begin_transaction();
try {
$conn->query("INSERT INTO users (name) VALUES ('Joh
n')");
$conn->query("INSERT INTO orders (user_id, product) V
ALUES (LAST_INSERT_ID(), 'Product1')");
$conn->commit();
} catch (Exception $e) {
$conn->rollback();
echo "Failed: " . $e->getMessage();
}

Explanation:

begin_transaction() : Initiates a new transaction.

commit() : Saves all changes made during the transaction.

Comprehensive Study Material on Internet and Web Design 21

 : Reverts all changes made during the transaction in case
rollback()

of an error.

Comprehensive Study Material on Internet and Web Design 22