Tanishaaa
Tanishaaa
DECLARATION I
ACKNOWLEDGEMENT II
ABSTRACT III
LIST OF TABLES IV
LIST OF FIGURES V
ASSIGNMENT 19-21
BIBLOGRAPHY 22
LIST OF TABLES
LIST OF FIGURES
CHAPTER-1
INTRODUCTION TO WEB DEVELOPMENT
1.1 INTRODUCTION
Web development refers to the creating, building, and maintaining of websites. It includes aspects such
as web design, web publishing, web programming, and database management. It is the creation of an
application that works over the internet i.e. websites.
The part of a website where the user interacts directly is termed as front end. It is also referred to as the
‘client side’ of the application.
• HTML: HTML stands for HyperText Markup Language. It is used to design the front end
portion of web pages using markup language. It acts as a skeleton for a website since it is used
to make the structure of a website.
• CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended
to simplify the process of making web pages presentable. It is used to style our website.
• JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our
website.
• Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive websites
and web applications. It is the most popular CSS framework for developing responsive, mobile-
first websites. Nowadays, the websites are perfect for all browsers (IE, Firefox, and Chrome)
and for all sizes of screens (Desktop, Tablets, Phablets, and Phones).
• PHP: PHP is a server-side scripting language designed specifically for web development.
• Java: Java is one of the most popular and widely used programming languages. It is highly
scalable.
• Python: Python is a programming language that lets you work quickly and integrate systems
more efficiently.
• Node.js: Node.js is an open source and cross-platform runtime environment for executing
JavaScript code outside a browser.
2.4 LISTS
HTML lists allow web developers to group a set of related items in lists.
• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items
will be marked with bullets (small black circles) by default.
• An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items will
be marked with numbers by default.
EXAMPLE-
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
DEPARTMENT OF CSE, MBSCET 4
WEB DEVELOPMENT
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
OUTPUT-
2.5 TABLES
The <table> tag defines an html table.
An html table consists of one <table> element and one or more <tr>, <th>, and <td> elements.
• To add a border, use the CSS border property on table, th, and td elements. To avoid having
double borders, set the CSS border-collapse property to collapse.
• Cell padding is the space between the cell edges and the cell content.By default the padding is
set to 0.To add padding on table cells, use the CSS padding property.
• Cell spacing is the space between each cell.By default the space is set to 2 pixels.To change the
space between table cells, use the CSS border-spacing property on the table element.
EXAMPLE-
<!DOCTYPE html>
<html>
<head>
<title>TIME TABLE</title>
</head>
<body>
<table border = "1" cellspacing="1" bordercolor="blue" bgcolor="yellow">
<tr>
DEPARTMENT OF CSE, MBSCET 5
WEB DEVELOPMENT
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
</body>
</html>
OUTPUT-
2.6 FORMS
An HTML form is used to collect user input. The <form> element is a container for different types of
input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
• The HTML <input> element is the most used form element. An <input> element can be
displayed in many ways, depending on the type attribute.
i. <input type="text"> (Displays a single-line text input field)
ii. <input type="text">( Displays a radio button)
iii. <input type="checkbox"> (Displays a checkbox)
iv. <input type="submit">(Displays a submit button)
v. <input type="button">( Displays a clickable button)
3.3 SELECTORS
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set.
CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS ELEMENT SELECTOR - The element selector selects the HTML element by name.
2. CSS ID SELECTOR - The id selector selects the id attribute of an HTML element to select a
specific element. It is written with the hash character (#), followed by the id of the element.
3. CSS CLASS SELECTOR - The class selector selects HTML elements with a specific class
attribute. It is used with a period character (full stop symbol) followed by the class name.
4. CSS UNIVERSAL SELECTOR - The universal selector is used as a wildcard character.
selects all the elements on the pages.
5. CSS GROUP SELECTOR - the grouping selector is used to select all the elements with the
same style definitions. Grouping selector is used to minimize the code. Commas are used to
separate each selector in grouping.
The box model allows us to add a border around elements, and to define space between elements.
• Header Section: The header section is generally placed either at the top of the Website or
just below a top navigation menu. It often comprises of the name of the Website or the logo
of the Website.
• Navigation menu: a navigation bar/menu is basically a list of links that allows visitor to
navigate through the website comfortably with easy access.
• Content section: the content section is the main body of the website. The user can divide the
content section in an n-column layout.
• Footer section: a footer section is placed at the bottom of the webpage and it generally consists
of information like contact info, copyrights, about us etc.
Syntax:
Selector
{
EXAMPLE –
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
text-align: center;
text-decoration: underline;
text-indent: 80px;
text-shadow: 3px 1px blue;
word-spacing: 15px;
}
</style>
</head>
<body>
<h1>TEXT FORMATTING</h1>
</body>
</html>
OUTPUT -
1. Border Style: The border-style property specifies the type of border. None of the other border
properties will work without setting the border style.
Eg - border-style: double/dotted/solid/hidden/none;
Following are the types of borders:
• dotted – It describes a dotted border
• dashed – It describes a dashed border
• solid – It describes a solid border
• double – It describes a double border
• groove – It describes a 3D grooved border.
• none – It describes no border
• hidden – It describes the hidden border
2. Border Width: Border width sets the width of the border. The width of the border can be in px, pt,
cm or thin, medium, and thick.
Eg - border-width: 8px;
3. Border Color: This property is used to set the color of the border. Color can be set using the color
name, hex value, or RGB value. If the color is not specified border inherits the color of the element
itself.
Eg - border-color: red;
4. Border radius property: It is used to round the corner of the border that looks more attractive.
Eg - border-radius: 20px;
CHAPTER-4
BOOTSTRAP
4.1 WHAT IS BOOTSTRAP?
• Bootstrap is a free front-end framework for faster and easier web development
• Bootstrap includes HTML and CSS based design templates for typography, forms, buttons,
tables, navigation, modals, image carousels and many other, as well as optional JavaScript
plugins.
• Bootstrap also gives you the ability to easily create responsive designs.
Bootstrap Grid System is responsive and the columns are re-arranged automatically according to the
screen size.
You can combine the above classes to create more dynamic and flexible layouts.
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
First; create a row (<div class="row">). Then, add the desired number of columns (tags with
appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
The following example shows how to get a three equal-width columns starting at tablets and scaling to
large desktops. On mobile phones or screens that are less than 768px wide, the columns will
automatically stack:
Example – <div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
The following example shows how to get two various-width columns starting at tablets and scaling to
large desktops:
Example –
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
DEPARTMENT OF CSE, MBSCET 12
<div class="col-sm-8">.col-sm-8</div>
</div>
WEB DEVELOPMENT
5.2 SQL
SQL stands for Structured Query Language.SQL lets you access and manipulate databases.SQL
became a standard of the American National Standards Institute (ANSI) in 1986, and of the
International Organization for Standardization (ISO) in 1987.There are several SQL-supported
database servers such as MySQL, PostgreSQL, sqlite3 and so on. Data can be stored in a secured
and structured format through these database servers. SQL queries are often used for data
manipulation and business insights better.
CREATE DATABASE
The CREATE DATABASE command is used is to create a new SQL database.
The following SQL creates a database called "testDB":
Example -
CREATE DATABASE testDB;
DROP DATABASE
The DROP DATABASE command is used is to delete an existing SQL database.
The following SQL drops a database named "testDB":
BACKUP DATABASE
The BACKUP DATABASE statement is used in SQL Server to create a full back up of an existing
SQL database.
Syntax-
BACKUP DATABASE databasename
TO DISK = 'filepath';
CREATE TABLE
The CREATE TABLE command creates a new table in the database.
The following SQL creates a table called "Persons" that contains five columns: PersonID, LastName,
FirstName, Address, and City:
Example –
CREATE TABLE Persons (
PersonID int,
LastName varchar(255),
FirstName varchar(255),
Address varchar(255),
City varchar(255)
);
A JOIN clause is used to combine rows from two or more tables, based on a related column between
them.
2. LEFT (OUTER) JOIN: Returns all records from the left table, and the matched records from
the right table.
3. RIGHT (OUTER) JOIN: Returns all records from the right table, and the matched records
from the left table.
4. FULL (OUTER) JOIN: Returns all records when there is a match in either left or right table.
CHAPTER-6
PHP
6.1 WHAT IS PHP?
• PHP is an acronym for "PHP: Hypertext Preprocessor".
• PHP is a widely-used, open source scripting language.
• PHP scripts are executed on the server.
EXAMPLE-
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
?>
</body>
</html>
OUTPUT-
Hello World!
6.3 COMMENTS
• Any text between // and the end of the line will be ignored (will not be executed).You can also
use # for single line comments
• Multi-line comments start with /* and end with */.
6.5 OPERATORS
Operators are used to perform operations on variables and values.
PHP divides the operators in the following groups:
1. Arithmetic operators -The PHP arithmetic operators are used with numeric values to perform
common arithmetical operations, such as addition, subtraction, multiplication etc.
2. Assignment operators - The PHP assignment operators are used with numeric values to write a
value to a variable.The basic assignment operator in PHP is "=". It means that the left operand
gets set to the value of the assignment expression on the right.
3. Comparison operators - The PHP comparison operators are used to compare two values
(number or string)
4. Increment/Decrement operators - The PHP increment operators are used to increment a
variable's value.The PHP decrement operators are used to decrement a variable's value.
5. Logical operators - The PHP logical operators are used to combine conditional statements.
For successfully completing my project report, I have taken references from the following:-
• https://www.geeksforgeeks.org/
• https://www.w3schools.com/
• https://developer.mozilla.org/
• https://www.tutorialspoint.com/