web devs ppt.ppsx

WEB DEVELOPMENT
PRESENTED BY:
ASENDRA
CHAUHAN
20ESBCS006
Summer Training with 45
Days

HTML(HYPER TEXT MARKUP
LANGUAGE)
HTML is an acronym which stands for Hyper Text Markup
Language which is used for creating web pages and web
applications.
 Hyper Text: HyperText simply means "Text within Text." A
text has a link within it, is a hypertext.
 Markup language: A markup language is a computer
language that is used to apply layout and formatting
conventions to a text document.
 Web Page: A web page is a document which is commonly
written in HTML and translated by a web browser.

BASIC STRUCTURE OF HTML
<!DOCTYPE>: It defines the document type or it instruct
the browser about the version of HTML.
<html > :This tag informs the browser that it is an HTML
document. Text between html tag describes the web
document.
<title>: As its name suggested, it is used to add title of that
HTML page which appears at the top of the browser
window.
<body> : Text between body tag describes the body
content of the page that is visible to the end user. This tag

FEATURES OF HTML
It is a very easy and simple language. It can be easily
understood and modified.
It is very easy to make an effective presentation with
HTML because it has a lot of formatting tags.
It is a markup language, so it provides a flexible way to
design web pages along with the text.
 It facilitates programmers to add a link on the web pages
(by html anchor tag), so it enhances the interest of browsing
of the user.
It is platform-independent because it can be displayed on
any platform like Windows, Linux, and Macintosh, etc.

FEATURES OF HTML
It facilitates the programmer to
add Graphics, Videos, and Sound to the
web pages which makes it more attractive
and interactive.
HTML is a case-insensitive language,
which means we can use tags either in
lower-case or upper-case.

CSS(CASCADING STYLE SHEET)
Styling: CSS allows web developers to apply various styles to HTML
elements, such as changing the text color, background color, font
size, and type, as well as controlling borders and shadows.
Layout Control: It provides tools to control the layout of web pages,
enabling you to position elements precisely
Responsive Design: CSS plays a crucial role in creating responsive
web designs that adapt to different screen sizes and devices.
Selectors: CSS uses selectors to target specific HTML elements
for styling. Selectors can be based on element types, IDs,
CSS, or Cascading Style Sheets, is a stylesheet language used for
describing the presentation and formatting of web documents written
in HTML

Separation of Concerns: CSS promotes the separation of
content (HTML) from presentation (CSS). This separation
makes it easier to maintain and update web pages because
you can change the look and feel without altering the content.
Reusability: CSS rules can be defined once and applied to
multiple elements or pages, promoting code reusability and
consistency across a website.
Cascading: CSS follows a cascading order of priority, where
styles can be inherited, overridden, or combined from various
sources like user-defined styles, browser defaults, and external
stylesheets. This enables fine-grained control over styling.
In summary, CSS is a fundamental technology for web
development that allows designers and developers to control the
visual appearance and layout of web pages,

IMPLEMENTATION OF CSS
• Inline CSS: In this method, we apply CSS styles directly
to individual HTML elements using the style attribute.
It's useful for making one-off style changes, but it's
not recommended for large-scale projects because it
mixes HTML and CSS, making the code less
maintainable.

• Internal CSS: Internal CSS is defined within the HTML
document itself, typically within the <style> element
within the <head> section. This method is suitable for
smaller websites or when you want to apply styles to
specific pages.

• External CSS: In this approach, we create a separate
CSS file (with a .css extension) and link it to your
HTML documents using the <link> element. External
CSS allows for a centralized style management system,
making it easier to maintain and apply styles
consistently across multiple pages.

JAVASCRIPT
JavaScript is a versatile, high-level, and dynamic programming
language primarily used for web development, although it can
be employed in other application domains as well. It plays a
crucial role in enhancing the interactivity and functionality of
websites.
 Client-Side Scripting: JavaScript is primarily used for
client-side scripting, meaning it runs in a user's web
browser. It can manipulate the Document Object Model
(DOM), which represents the structure and content of a
web page. This allows developers to create dynamic and
interactive web experiences without relying solely on
server-side processing.

AJAX (Asynchronous JavaScript and XML): JavaScript
is a fundamental technology behind AJAX, which allows
web applications to make asynchronous requests to the
server without reloading the entire page. This enables real-
time updates and smoother user interactions, such as auto-
suggest search bars and live chat.
Cross-Browser Compatibility: JavaScript helps ensure
that web applications work consistently across different web
browsers by providing techniques for feature detection and
graceful degradation when certain features are not
supported.
Front-End Frameworks and Libraries: A rich ecosystem
of front-end frameworks and libraries, such as jQuery,
Bootstrap, and D3.js, is built on top of JavaScript. These
tools simplify common web development tasks and provide

APPLICATIONS OF JS
Form Validation: JavaScript can be used to validate form
inputs on the client side before submitting data to the
server, providing instant feedback to users and reducing
server load.
Authentication and Authorization: JavaScript is often
used to implement user authentication and authorization
processes in web applications, enhancing security and user
privacy.
Dynamic Content: JavaScript can be used to update the
content of a web page without requiring a full page reload.
This dynamic content loading is essential for modern web
applications.

IMPLEMENTATION OF JS
Inline JavaScript:
Usage: Inline JavaScript is included directly within the
HTML document using the <script> element.
Pros: Quick and easy for small scripts or event handling.
Cons: Can make the HTML document harder to maintain
as code grows.
In web development, there are several methods for implementing
JavaScript depending on your specific needs and project
requirements. Here are some common methods:
<script>
function sayHello() {
alert('Hello asendra chauhan’);
}
</script>

External JavaScript Files:
Usage: JavaScript code is placed in separate .js files and
linked to HTML documents using the <script> tag's src
attribute.
Pros: Promotes code organization, reusability, and
easier maintenance.
Cons: Requires an additional HTTP request to load the
external file.
<script src="script.js"></script>

Event Listeners:
Usage: JavaScript code can be attached to specific HTML
elements using event listeners to respond to user
interactions.
Pros: Enables interactivity without altering the HTML
structure.
Cons: Code can become complex when handling multiple
events.
const button = document.getElementById('myButton’);
button.addEventListener('click', function()
{
alert('Button clicked!’);
});

PHP(HYPERTEXT PREPROCESSOR)
PHP (Hypertext Preprocessor) is a widely used server-
side scripting language for web development. It is
especially popular for building dynamic web
applications and websites. Here are some key aspects
of PHP and its use in web development:
Server-Side Scripting: PHP is primarily a server-side
scripting language, which means it runs on the web
server and generates HTML dynamically before
sending it to the client's web browser. This allows for
the creation of dynamic and data-driven web
applications.
Embedded Code: PHP code can be embedded within

Database Integration: PHP is often used to interact
with databases like MySQL, PostgreSQL, and SQLite. It
allows you to query databases, insert, update, and
retrieve data, and dynamically generate content based
on database records.
Forms Processing: PHP is commonly used for
processing form data submitted by users. It can
validate form inputs, sanitize data, and store it in a
database or send it via email.
Session Management: PHP provides session handling
capabilities, allowing you to manage user sessions and
maintain user-specific data across multiple web
pages.
PHP is a foundational technology for web development
and is used by countless websites and web applications

BASIC PHP SYNTAX
 Use echo or print to output content to the web page.
Declare variables using the $ symbol (e.g., $name =
"John";).
Use control structures like if, else, while, and for
conditional logic and loops.
Interact with databases using functions like
mysqli_query() or use an ORM (Object-Relational
Mapping) library like PDO.

FORM PROCESSING
• Form Handling: PHP is frequently employed to process
form submissions from web users. It can validate user input,
store data in databases, and generate responses based on
the submitted data.
• Process form data submitted by users using PHP.
Access form values via the $_POST or $_GET
superglobal arrays.
• Perform validation, data sanitation, and database
interactions as needed.

MYSQL
MySQL plays a crucial role in web development as it is
one of the most widely used relational database
management systems
Here are the key roles of MySQL
Data Storage: MySQL is used to store structured data
such as user information, product details, content,
and more. Web applications use MySQL to persistently
store data that can be accessed and manipulated as
needed.
User Authentication and Authorization: MySQL is
often used to store user credentials, such as

User-generated Content: Websites that allow users to
post comments, reviews, and ratings rely on MySQL to
store and retrieve this user-generated content.
Forums and social media platforms also use MySQL for
this purpose.
Data Retrieval and Display: Web applications use SQL
queries to retrieve data from MySQL databases and
display it to users. This includes generating dynamic
web pages, populating forms, and creating data-
driven visualizations.
MySQL's role in web development extends beyond data

IMPLEMENTATION OF MYSQL
To use MySQL in web development with XAMPP, we follow
these steps:
Install XAMPP:
Start XAMPP:
Launch XAMPP Control Panel after installation.
Start the "Apache" and "MySQL" services by clicking the
"Start" buttons next to them. This action will start the
Apache web server and the MySQL database server.
Access phpMyAdmin:phpMyAdmin web interface, which
allows you to manage your MySQL databases.

Create a Database: we can create database using SQL
command “create database db_name”.
Create tables: data store in SQl in table form which have
some rows and columns we can create table using “create
table table_name (att_data_type, att_name,default_value,
primary_key());”

Set Up MySQL Connection in Your Web Application:
In your web application's PHP files, you can establish
a connection to the MySQL database using PHP's
mysqli extension.
• $servername = "localhost";
• $username = "root";
• $password = "";
• $database = "your_database_name";
• $conn = new mysqli($servername, $username, $password, $database);

REACT JS
React, is an open-source JavaScript library for building user
interfaces or user interface components. It has gained
widespread popularity and is commonly used for developing
single-page applications and dynamic web interfaces.
Key features and concepts of ReactJS include:
Component-Based Architecture: React promotes a
component-based approach to building UIs. UI elements are
divided into reusable components that encapsulate their own
logic and rendering.
Virtual DOM (Document Object Model): React uses a virtual
DOM to optimize rendering performance. Instead of directly
manipulating the actual DOM, React builds a virtual
representation of it in memory. When data changes, React

Declarative Syntax: React utilizes a declarative syntax,
which means you describe how your UI should look
based on the application's state, and React takes care
of updating the DOM to match that state. This
approach makes it easier to reason about UI behavior.
JSX (JavaScript XML): React uses JSX, a JavaScript
extension that allows you to write HTML-like code
within JavaScript. JSX makes it more intuitive to define
the structure and appearance of components.
Reusable Components: React components are
designed to be highly reusable. You can create
complex UIs by composing and nesting smaller, self-

REACT LIBRARY(REACT & REACTDOM)
In React, you can create a component using the
React.createElement method and render it to the DOM
using ReactDOM.render. Here's how you can create a
simple React component and render it to a specific
HTML element:
We use the React.createElement method to create a
React element representing an <h1> element with the
text "Hello, React!". The arguments are:
The type of the element ('h1' in this case).
Props (attributes) for the element (null in this case).
The content or children of the element ('Hello, React!'

We use ReactDOM.render to render the MyComponent
to the HTML element with the ID "root." This is the
place where your React component will be displayed in
the DOM.
react Dom

web devs ppt.ppsx

More Related Content

Similar to web devs ppt.ppsx (20)

Recently uploaded (20)

web devs ppt.ppsx