0% found this document useful (0 votes)
12 views22 pages

Web Development Notes Sem 5 DU DSE

This document provides comprehensive study material on Internet and Web Design, covering topics such as the history and features of the Internet, web design principles, HTML structure, JavaScript basics, and PHP programming. It includes lessons on web architecture, HTML elements, JavaScript syntax, and form handling with PHP. The material is structured into units and lessons, making it suitable for learners seeking to understand web development concepts and practices.

Uploaded by

09wqdf2uxg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
12 views22 pages

Web Development Notes Sem 5 DU DSE

This document provides comprehensive study material on Internet and Web Design, covering topics such as the history and features of the Internet, web design principles, HTML structure, JavaScript basics, and PHP programming. It includes lessons on web architecture, HTML elements, JavaScript syntax, and form handling with PHP. The material is structured into units and lessons, making it suitable for learners seeking to understand web development concepts and practices.

Uploaded by

09wqdf2uxg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

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

You might also like