WEB DEVELOPMENT

Presentation on
WEB DEVELOPMENT

OVERVIEW
 INTRODUCTION
 HTML & CSS
 BOOTSTRAP
 SQL
 PHP
 CONCLUSION

Introduction
Web development : Web development refers developing websites for
Hosting via intranet or internet. The Web development process includes Web
design, Web content development,
client-side/server-side scripting.

Introduction (cont.)
 Web design: Web design is the process of creation, with the intention
of presenting the content on electronic web pages, which the end-users
can access through the internet with the help of a web browser

Introduction (cont.)
What does Web Programming mean ?
 Web programming refers to the writing, markup and coding involved in Web
development, which include Web content Web client and server scripting and
network security.

What are the benefits of web
programming?
 Allow you to turn a simple, static HTML page into a dynamic masterpiece.
 Interact with your web site and use the application on any computer
 Easier than programming applications that will run directly on the
computer.
7

Client-side & Server-side
programming
Client-side scripting:
 This code runs in a web browser.
 Client side takes the data and renders it on screen.
 Can send data back to the server.
Server-side scripting:
 This code executes on a web server.
 Server side creates the data and returns it to the client.
8

Client & Server side programming
language
Client Side Server Side
 PHP
 C#
 Java
 HTML
 CSS
 Java Script

HTML
 What is HTML?
• HTML is markup language of describing web pages.
• HTML stands for Hyper Text Markup Language.
• A markup language is a set of markup tags.

HTML Attributes
 HTML elements can have attributes.
 Attributes provide additional information about an element.
 Attributes are always specified in the start tag.
 Attributes come in name/value pairs like: name=“value”.
 The Document Language can be declared in the <html> using lang
attribute.
 HTML paragraphs are defined with the <p> tag.

HTML documents
 All HTML documents must start with a type declaration: <!DOCTYPE
html>.
 The HTML document itself begins with <html> and ends with </html>.
 The visible part of the HTML document is between <body> and
</body>.
 HTML headings are defined with the <h1> to <h6> tags.
 HTML paragraphs are defined with the <p> tag.
 HTML links are defined with the <a> tag.
 The link address is specified in the href attribute.
 HTML images are defined with the <img> tag.
 The source file (src), alternative text (alt), and size (width and height) are
provided as attributes.

Simple code on HTML
<html>
<head>
<title>Presentation</title>
</head>
<body>
<h1> welcome </h1>
</body>
</html>

Introduction to CSS
 What is CSS?
 CSS stands for Cascading Style Sheets.
 Styles define how to display HTML elements.
 External Style Sheets can save a lot of work.
 External Style Sheets are stored in CSS files.

CSS Syntax
 A CSS rule set consists of a selector and a declaration block.
 The selector points to the HTML element you want to style.
 The declaration block contains one or more declarations separated by
semicolons.
 Each declaration includes a property name and a value, separated by a
colon.
 A CSS declaration always ends with a semicolon, and declaration groups
are surrounded by curly braces.

CSS Background
 The background-color property specifies the background color of an
element.
 The background color of a page is defined in the body selector.
 The background-image property specifies an image to use as the
background of an element.
 By default, the image is repeated so it covers the entire element.

CSS Fonts
 The CSS style font-family defines the font to be used for in HTML
element.
 The CSS style font-size defines the text size to be used for in HTML
element.
 The CSS style color defines the text color to be used for in HTML element.

Three Ways to Insert CSS
There are three ways of inserting a style sheet:
Internal Style Sheet
o An internal style sheet should be used when a single document has a
unique style.
External Style Sheet
o An external style sheet is ideal when the style is applied to many pages.
Inline Style Sheet
o Inline styling is useful for applying a unique style to a single HTML
element.

BOOTSTRAP
“The most popular front-end framework for developing
responsive mobile first projects on the web.”

Bootstrap: What is it?
• A tool to develop HTML pages
• Extensible and personalizable
UI: tables, buttons, forms, typography, carousels, panels….

Why use it?
 Browser, desktop and
mobile compatibility.
 Easy to use
 Customizable
 Open Source(MIT)

How do we use it?
Simply start from here
<link href=“bootstrap.css” rel=“stylesheet”>
<script src=“jquery.js”> </script>
<script src=“bootstrap.js”> <script>

Grids
o System based on 12 columns
o Fluid or fixed
o Pluggable
o Optimized for:
xs (-768 px)
sm (768 / 992 px)
md(992 / 1200 px)
lg(1200+ px)

Forms
 Cross-browser Uis
 Horizontal or Vertical
 State ( success, error, warning)
 Size (xs, sm, md, lg)

Buttons
• Thought for web apps.
• Variants : Large, small, extra small, primary, success, infi, warning, danger,
link.

ICONS
 Icon Font with 200 icons (Glyphicons)
 Webapp ready
 Can be changed with another set

Texts
o Titles, paragraphs, lists.
o Size management.
o Formatting: I, b, s, small.
o Labels and Badges.

Tables
 Alternate lines (.table-striped)
 With borders (.table-bordered)
 Active (.table-hover)
 Condensed (.table-condensed)
 Responsive

SQL
(Structured Query Language)

Introduction of Database & SQL
Data : Know facts that can be recorded.
Database : a collection of data.
 represents some aspects of the real world.
 Designed, built & populated for a specific purpose.
Database management system: the software that manages data.
SQL: SQL (Structured Query Language) is a standardized programming
language used for managing relational databases.

Why SQL?
SQL Queries are used to retrieve large amounts of records from a
database quickly and efficiently.
Also used
 For data administration (to create tables, indexes, and views)
 For data manipulation (to add, modify, delete, and retrieve data)
 To query a database for useful information

Data Types:
Data type selection is dictated by nature of data and by intended use.
 Supported data types:
 Numberic, Integer, Smallint.
 Char (L), Varchar (L).
 Date, Time.
 Real, Double, Float.

How to Create database & Table?
 To store data we have to
 Create database structure.
 Create tables that will hold end-user data.
Database Command:
create database Database_name
 Table command:
create table table_name(
col_1 dataType(length),
col_2 dataType(length),
………..
)

How to Insert values & Delete
Table?
 INSERT
 Used to enter data into table
 Syntax:
INSERT INTO column_name
VALUES (value1, value2, …., value_N);
 DELETE
 Delete a table row
 Syntax:
DELETE FROM tablename
[WHERE conditionlist];

Select & Update Operation
 SELECT
 Used to list contents of table
 Syntax:
 SELECT columnlist
 FROM tablename;
 UPDATE
 Modify data in a table
 Syntax:
UPDATE tablename
SET columnname = expression [ columnname=expression]
[WHERE conditionlist];

PHP
PHP: Hypertext Preprocessor
(earlier called, Personal Home Page)

What is PHP?
 PHP is a server scripting language, and a powerful tool for making dynamic
and interactive Web pages.
 PHP is an acronym for Hypertext Preprocessor.
 PHP is a widely-used, free, and efficient alternative to competitors such as
Microsoft’s ASP.
 PHP scripts are executed on the server.
 PHP is free to download and use.
 Basic PHP Syntax :-
 <?php
//PHP code here
?>

What is a PHP File & Why PHP?
What is a PHP File?
 PHP files can contain text, HTML, CSS, JavaScript, and PHP code.
 PHP code are executed on the server, and the result is returned to the
browser as plain HTML.
 PHP files have extension “.php”.
Why PHP?
 PHP runs on various platforms (Windows, Linux,, Unix, Mac OS X, etc.)
 PHP is compatible with almost all servers used today (Apache, IIS, etc.)
 PHP supports a wide range of databases.
 PHP is free.
 PHP is easy to learn and runs efficiently on the server side.

Variables & Constants
 Variables
 Variables are ”containers” for storing information.
 Declaring PHP Variables.
 In PHP, a variable starts with the “$” sign, followed by the name of the
variable.
 Example:- $txt= “HELLO WORLD!”;
 PHP Constants
 A constant is an identifier (name) for a simple value. The value cannot be
changed during the script.
 A valid constant name starts with a letter or underscore (no $ sign before
the constant name).
 Create a PHP Constant
 To create a constant, use the define() function.
 Syntax
o Define(name, value, case-insensitive)

PHP Functions
 A function is a block of statements that can be used repeatedly in a program.
 A user defined function declaration starts with the word “function”.
 Syntax
 Function functionName() {
code to be executed;
}
 Example
 <?php
function writeMsg() {
echo “Helllo World!“;
}
writeMsg(); // call the function
?>

PHP Class
A class is a complex or object data type which stores data and information on how to process that
data.
 Example
 <?php
Class Car {
function Car() {
$this->model= “VW”;
}
}
//create an object
$herbie = new Car();
// show object properties
echo $herbie->model;
?>

PHP $_POST & PHP $_GET
 PHP $_POST
 PHP $_POST is widely used to collect from data after submitting an HTML
from with method=“post”.
$_POST is also widely used to pass variables.
 PHP $_GET
 PHP $_GET can also be used to collect from data after submitting an HTML
from with method=“get”.
 $_GET can also collect data sent in the URL.

When to use GET & POST?
 When to use GET?
 Information sent from a form with the GET method is visible to everyone
(all variables names and values are displayed in the URL). GET also has
limits on the amount of information to send. The limitation is about 2000
characters. However, because the variables are displayed in the URL, it is
possible to bookmark the page. This can be useful in some cases.
 When to use POST?
 Information sent from a form with the POST method is invisible to others
(all names/values are embedded within the body of the HTTP request) and
has NO LIMITS on the amount of information to send.

Conclusion
After completing this slide we have learnt about:
 HTML
 CSS
 BOOTSTRAP
 SQL
 PHP
All this things contribute to build up an efficient web programming.

Name :- Gourav Sharma
Reg. No. :- 11614492
Ph. No. :- 9877150433

WEB DEVELOPMENT

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a WEB DEVELOPMENT

Semelhante a WEB DEVELOPMENT (20)

Último

Último (20)

WEB DEVELOPMENT