III B.
Tech II Semister Skill Oriented Course Report
at
Vasireddy Venkatadri Institute of Technology
Submitted in partial fulfillment of the requirements for the award of
the Web Development Course in Electronics and Communication
Engineering.
Name
(Reg. No. )
Department of Electronics and Communication Engineering
Vasireddy Venkatadri Institute of Technology
Nambur, Guntur Dt.- 522508
Department of Electronics and Communication Engineering
Vasireddy Venkatadri Institute of Technology
Nambur, Guntur Dt.- 522508
CERTIFICATE
This is to certify that [Name of the Student] (Reg. No: [XXXXX]) has
successfully completed the skill-oriented course on Web Development
during III B.Tech II Semester.
Submitted for Viva-voce Examination held on______________________.
Internal Examiner External
Examiner
Mr. M Rambhupal
Asst.Professor
Head of the Department
(Dr. M.Y.Bhanu Murthy )
III-Year-II Semester
SC3204
WEB DEVELOPMENT
Course Objectives:
1. Creating web pages using HTML5 and CSS
2. Implementing Interactive web interfaces with client-side technologies.
3. Create and validate XML documents.
4. Interacting with Database
Unit-I:
HTML: Basic Syntax, Standard HTML Document Structure, Basic Text
Markup, HTML styles, Elements, Attributes, Heading, Layouts, HTML media,
Iframes Images, Hypertext Links, Lists, Tables, Forms, GET and POST method,
HTML 5, Dynamic HTML
Unit-II:
Javascript - Introduction to Javascript, Objects, Primitives Operations and
Expressions, Control Statements, Arrays, Functions, Constructors, Pattern
Matching using Regular Expressions
Unit-III:
Working with XML: Document type Definition (DTD), XML schemas, XSLT.
Unit-IV:
PHP Programming: Introduction to PHP, Creating PHP script, Running PHP
script. Working with variables and constants: Using variables, Using constants,
Data types, Operators. Controlling program flow: Conditional statements,
Control statements
Unit-V:
My SQL: Creating Database, Data Types, Basic Operations on tables (Create,
Select, Delete and Update).
Text Books
1. HTML5 Black Book Covers CSS3, Java script, XML, XHTML, AJAX, PHP
and jQuery, Dream tech Press (2011).
2. Robin Nixon, Learning PHP, My SQL, Java Script & CSS‖, 2nd Edition,
O'REILLY (2012).
Course Outcomes:
Upon successful completion of the course, the student will be able to
CO1 Describe the concepts of World Wide Web, and the requirements of
effective web design.
CO2 Develop web pages using the HTML and CSS features with
different layouts as per need of applications.
CO3 Use the JavaScript
CONTENTS
UNIT CONTENT PAGE
1 HTML
2 JAVA SCRIPT
3 XML
4 PHP
5 MySQL
UNIT 1 - HTML
1.Basic Syntax
HTML (HyperText Markup Language) is used to structure web pages using
elements enclosed in tags (<tag>).
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
2. Standard HTML Document Structure
Every HTML document follows a basic structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Standard HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
<!DOCTYPE html>: Defines the document as HTML5.
<html>: Root element of the page.
<head>: Contains metadata, title, and links.
<body>: Contains visible content.
3.Basic Text Markup
Bold Text: <b>Bold</b> or <strong>Strong</strong>
Italic Text: <i>Italic</i> or <em>Emphasized</em>
Underline: <u>Underlined</u>
Strikethrough: <s>Strikethrough</s>
Example:
<p><b>Bold</b> and <i>Italic</i> text.</p>
4. HTML Styles
HTML elements can be styled using CSS inside the <style> tag or inline.
<p style="color: red; font-size: 20px;">This is styled text.</p>
5. Elements and Attributes
HTML elements are tags like <p>, <h1>, <a>, etc. Attributes provide
additional information.
Example:
<a href="https://www.example.com" target="_blank">Visit Example</a>
href: Defines the link URL.
target="_blank": Opens the link in a new tab.
6. Headings
HTML provides six heading levels:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
7. Layouts
HTML layouts can be created using <div>, <span>, and CSS.
Example:
<div style="width:50%; border:1px solid black; padding:10px;">
<h2>Box Layout</h2>
<p>Content inside a div.</p>
</div>
8. HTML Media
Images:
<img src="image.jpg" alt="Example Image" width="300">
Videos:
<video controls width="400">
<source src="video.mp4" type="video/mp4">
</video>
9. Iframes
Used to embed another webpage within a page.
<iframe src="https://www.example.com" width="600"
height="400"></iframe>
10. Hypertext Links
Links navigate between pages.
<a href="https://www.google.com">Go to Google</a>
11. Lists
Ordered List:
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
Unordered List:
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
12. Tables
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
13. Forms and GET/POST Methods
HTML Form:
<form action="submit.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
GET vs POST:
GET: Data is sent in the URL (method="GET"). Used for searches.
POST: Data is sent securely (method="POST"). Used for sensitive data.
14. HTML5 Features
New Input Types: email, number, date, range, etc.
Semantic Tags: <header>, <footer>, <article>, <section>
Audio and Video Support
Example:
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>
15. Dynamic HTML (DHTML)
DHTML combines HTML, CSS, and JavaScript to create interactive web pages.
Example:
<button onclick="changeText()">Click Me</button>
<p id="demo">Hello!</p>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "Text Changed!";
</script>
Conclusion
HTML structures web pages with elements and attributes.
CSS is used for styling.
JavaScript adds interactivity (DHTML).
HTML5 introduces new elements and media support.
UNIT 2 - JavaScript
1. Introduction to JavaScript
JavaScript is a scripting language used to create dynamic and interactive web
pages. It runs in the browser and enhances HTML and CSS functionalities.
Basic JavaScript Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1>Welcome to JavaScript</h1>
<script>
document.write("Hello, World!");
</script>
</body>
</html>
2. Objects in JavaScript
Objects in JavaScript store key-value pairs and can have properties and
methods.
Example:
let person = {
name: "Alice",
age: 25,
greet: function() {
return "Hello, " + this.name;
};
console.log(person.greet());
3. Primitive Data Types, Operations, and Expressions
JavaScript has the following primitive data types:
String: "Hello"
Number: 42
Boolean: true/false
Null: Empty value
Undefined: Variable declared but not assigned a value
Symbol: Unique identifier
Example:
let x = 10;
let y = 5;
console.log(x + y); // Addition
console.log(x * y); // Multiplication
console.log(x > y); // Boolean Expression
4. Control Statements
Control statements help in decision-making and loops.
Conditional Statements (if-else):
let num = 10;
if (num > 0) {
console.log("Positive number");
} else {
console.log("Negative number");
Looping (for, while):
for (let i = 0; i < 5; i++) {
console.log("Iteration " + i);
let i = 0;
while (i < 5) {
console.log("Count: " + i);
i++;
}
5. Arrays in JavaScript
Arrays store multiple values in a single variable.
Example:
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // Banana
fruits.push("Mango"); // Adds a new element
console.log(fruits);
6. Functions in JavaScript
Functions are blocks of reusable code.
Function Declaration:
function greet(name) {
return "Hello, " + name;
console.log(greet("Alice"));
Arrow Function (ES6+):
const sum = (a, b) => a + b;
console.log(sum(5, 3));
7. Constructors in JavaScript
Constructors are used to create object instances.
Example:
function Person(name, age) {
this.name = name;
this.age = age;
let person1 = new Person("Alice", 25);
console.log(person1.name);
8. Pattern Matching using Regular Expressions
Regular expressions (RegEx) are patterns used to match strings.
Example:
let text = "Hello, JavaScript!";
let pattern = /JavaScript/;
console.log(pattern.test(text)); // true
Replacing Text with RegEx:
let newText = text.replace(/JavaScript/, "JS");
console.log(newText); // Hello, JS!
Conclusion
JavaScript is a powerful language for building interactive web pages. It
includes features like objects, arrays, functions, constructors, and regular
expressions to enhance web development.
UNIT 3 - Working with XML
1. Introduction to XML
XML (eXtensible Markup Language) is a markup language designed to store
and transport data in a structured manner. It is both human-readable and
machine-readable.
Features of XML:
Self-descriptive and hierarchical.
Platform-independent data representation.
Supports Unicode for multilingual data.
Allows validation using DTD and XML Schema.
Can be transformed using XSLT.
2. Document Type Definition (DTD)
DTD defines the structure and legal elements of an XML document. It can be
defined internally within an XML document or externally as a separate file.
Example: Internal DTD
<!DOCTYPE note [
<!ELEMENT note (to, from, heading, body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Alice</to>
<from>Bob</from>
<heading>Reminder</heading>
<body>Don't forget our meeting at 10 AM.</body>
</note>
Example: External DTD
DTD File (note.dtd):
<!ELEMENT note (to, from, heading, body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
XML File (note.xml):
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Alice</to>
<from>Bob</from>
<heading>Reminder</heading>
<body>Don't forget our meeting at 10 AM.</body>
</note>
3. XML Schema (XSD)
XML Schema Definition (XSD) is a more powerful and flexible alternative to
DTD for defining the structure and data types in an XML document.
Example: XML Schema (XSD)
XSD File (note.xsd):
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
XML File (note.xml) using XSD:
<note xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="note.xsd">
<to>Alice</to>
<from>Bob</from>
<heading>Reminder</heading>
<body>Don't forget our meeting at 10 AM.</body>
</note>
4. XSLT (Extensible Stylesheet Language Transformations)
XSLT is used to transform XML documents into different formats like HTML,
plain text, or another XML structure.
Example: XSLT Transformation
XSLT File (transform.xsl):
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Note Details</h2>
<p><b>To:</b> <xsl:value-of select="note/to"/></p>
<p><b>From:</b> <xsl:value-of select="note/from"/></p>
<p><b>Heading:</b> <xsl:value-of select="note/heading"/></p>
<p><b>Body:</b> <xsl:value-of select="note/body"/></p>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
XML File (note.xml):
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
<note>
<to>Alice</to>
<from>Bob</from>
<heading>Reminder</heading>
<body>Don't forget our meeting at 10 AM.</body>
</note>
Output (Rendered as HTML in Browser):
Note Details
To: Alice
From: Bob
Heading: Reminder
Body: Don't forget our meeting at 10 AM.
Conclusion:
DTD defines basic XML structure but lacks data type enforcement.
XSD is more powerful, allowing type definitions and namespaces.
XSLT helps transform XML into human-readable formats.
These technologies ensure structured, validated, and well-formatted XML data
for various applications.
UNIT 4 - PHP
1. Introduction to PHP
PHP (Hypertext Preprocessor) is a server-side scripting language used for web
development. It is embedded in HTML and executed on the server.
Features of PHP:
Open-source and widely used for web development.
Server-side execution with dynamic content generation.
Supports multiple databases (MySQL, PostgreSQL, etc.).
Loosely typed language with built-in session management.
Compatible with various web servers (Apache, Nginx, IIS).
2. Creating and Running a PHP Script
Creating a PHP Script:
PHP scripts are written inside <?php ... ?> tags.
Example:
<?php
echo "Hello, World!";
?>
Running a PHP Script:
To run a PHP script, follow these steps:
1. Install a web server like Apache with PHP support (XAMPP, WAMP, or LAMP).
2. Save the script with a .php extension.
3. Place the file inside the htdocs (XAMPP) or www (WAMP) folder.
4. Start the web server and open a browser.
5. Access the script via http://localhost/filename.php.
3. Working with Variables and Constants
Using Variables:
PHP variables start with $.
No need to declare the type explicitly.
Example:
<?php
$name = "John";
$age = 25;
echo "Name: $name, Age: $age";
?>
Using Constants:
Defined using define() or const.
Cannot be changed after declaration.
Example:
<?php
define("SITE_NAME", "MyWebsite");
echo SITE_NAME;
?>
Data Types:
PHP supports the following data types:
String: $name = "Alice";
Integer: $age = 30;
Float: $price = 99.99;
Boolean: $isAvailable = true;
Array: $colors = array("Red", "Green", "Blue");
Object: class Car { public $brand = "Toyota"; }
NULL: $var = NULL;
Operators in PHP:
1. Arithmetic Operators (+, -, *, /, %, **)
2. Comparison Operators (==, !=, >, <, >=, <=)
3. Logical Operators (&&, ||, !)
4. Assignment Operators (=, +=, -=, *=, /=, %=, .= (concatenation))
Example:
<?php
$a = 10;
$b = 5;
echo "Sum: " . ($a + $b);
?>
4. Controlling Program Flow
Conditional Statements:
if Statement
<?php
$age = 18;
if ($age >= 18) {
echo "You are an adult.";
?>
if-else Statement
<?php
$marks = 75;
if ($marks >= 50) {
echo "Pass";
} else {
echo "Fail";
}
?>
if-elseif-else Statement
<?php
$grade = 85;
if ($grade >= 90) {
echo "A";
} elseif ($grade >= 80) {
echo "B";
} else {
echo "C";
?>
Switch Case
<?php
$day = "Monday";
switch ($day) {
case "Monday":
echo "Start of the week!";
break;
case "Friday":
echo "Weekend is near!";
break;
default:
echo "Normal day.";
?>
Control Statements (Loops):
for Loop
<?php
for ($i = 1; $i <= 5; $i++) {
echo "Number: $i <br>";
?>
while Loop
<?php
$i = 1;
while ($i <= 5) {
echo "Count: $i <br>";
$i++;
?>
do-while Loop
<?php
$i = 1;
do {
echo "Count: $i <br>";
$i++;
} while ($i <= 5);
?>
foreach Loop (for arrays)
<?php
$colors = array("Red", "Green", "Blue");
foreach ($colors as $color) {
echo "Color: $color <br>";
?>
Conclusion:
PHP is a powerful server-side scripting language for dynamic web applications.
Variables and constants store data for processing.
Operators help in calculations and logic-building.
Conditional statements and loops control the program flow.
UNIT 5 - MySQL
Introduction to MySQL
MySQL is an open-source relational database management system
(RDBMS) that is widely used for storing and managing data. It uses
SQL (Structured Query Language) to perform database operations
like creating tables, inserting data, updating records, and retrieving
information.
Features of MySQL:
Open-source and free to use.
Supports large databases and multiple users.
Provides high performance and scalability.
Compatible with various programming languages (PHP, Python, Java,
etc.).
Supports security features like user authentication and encryption.
MySQL Data Types
MySQL provides different data types to store various kinds of data.
These are categorized as follows:
1. Numeric Data Types
Used for storing numbers.
Data Type Description Example
INT Stores whole numbers 100, -50
TINYINT Stores small integers (1 byte) 127, -128
Stores medium-sized integers (2
SMALLINT 32,000
bytes)
9,223,372,036,854,77
BIGINT Stores large integers (8 bytes)
5,807
DECIMAL(p,
Stores fixed-point numbers 99.99
s)
Stores floating-point numbers
FLOAT 3.14
(single precision)
Stores floating-point numbers
DOUBLE 3.1415926535
(double precision)
2. String (Character) Data Types
Used for storing text and characters.
Data Type Description Example
CHAR(n) Fixed-length string (0-255 'Hello'
Data Type Description Example
characters)
VARCHAR( Variable-length string (up to 65,535
'World'
n) characters)
'This is a long
TEXT Large text data
paragraph'
BLOB Stores binary data like images, files Binary data
3. Date and Time Data Types
Used for storing date and time values.
Data Type Description Example
Stores only the date (YYYY-
DATE '2025-03-19'
MM-DD)
Stores only time
TIME '14:30:00'
(HH:MM:SS)
'2025-03-19
DATETIME Stores both date and time
14:30:00'
TIMESTAM Stores time since 1970 (Unix '2025-03-19
P time) 14:30:00'
Example: Creating a Table in MySQL
CREATE TABLE Students (
id INT PRIMARY KEY,
name VARCHAR(50),
age TINYINT,
dob DATE,
gpa DECIMAL(3,2)
);
This table stores student details with an integer id, a name (string),
an age (small number), a date of birth, and a GPA (decimal number).
SQL Commands: DDL, DML, and DCL with Examples
SQL commands are categorized into three main types:
DDL (Data Definition Language)
DML (Data Manipulation Language)
DCL (Data Control Language)
1. DDL (Data Definition Language)
DDL commands are used to define and manage database objects like tables,
schemas, and indexes. These commands affect the structure of the database.
Common DDL Commands:
Command Description
Creates a new database object (table, schema,
CREATE
view, etc.).
ALTER Modifies an existing database object.
DROP Deletes a database object permanently.
Removes all records from a table but retains the
TRUNCATE
structure.
Examples:
1.1 CREATE TABLE
CREATE TABLE Students (
ID INT PRIMARY KEY,
Name VARCHAR(50),
Age INT,
Course VARCHAR(50)
);
1.2 ALTER TABLE
ALTER TABLE Students ADD Email VARCHAR(100);
1.3 DROP TABLE
DROP TABLE Students;
1.4 TRUNCATE TABLE
TRUNCATE TABLE Students;
2. DML (Data Manipulation Language)
DML commands deal with modifying and retrieving data from tables.
Common DML Commands:
Comma
Description
nd
INSERT Adds new records into a table.
UPDATE Modifies existing records.
Removes specific records from a
DELETE
table.
Comma
Description
nd
SELECT Retrieves data from a table.
Examples:
2.1 INSERT
INSERT INTO Students (ID, Name, Age, Course) VALUES (1, 'John Doe', 20,
'Computer Science');
2.2 UPDATE
UPDATE Students SET Age = 21 WHERE ID = 1;
2.3 DELETE
DELETE FROM Students WHERE ID = 1;
2.4 SELECT
SELECT * FROM Students;
3. DCL (Data Control Language)
DCL commands control access to the database and its objects.
Common DCL Commands:
Comma
Description
nd
Gives a user specific
GRANT
permissions.
Removes permissions from a
REVOKE
user.
Examples:
3.1 GRANT
GRANT SELECT, INSERT ON Students TO user1;
3.2 REVOKE
REVOKE INSERT ON Students FROM user1;
Summary Table:
Catego
Commands Purpose
ry
CREATE, ALTER, DROP, Defines and modifies database
DDL
TRUNCATE structures.
INSERT, UPDATE, DELETE,
DML Manipulates data within tables.
SELECT
DCL GRANT, REVOKE Controls access to the database.
