Web development it slideWeb development it slidemy web development slide-1.pptx

FUNDAMENTALS OF WEB DEVELOPMENT
BY
ALIYU UMAR
19134160

INTRODUCTION
 Web Development is important because it enables businesses,
organizations and individuals to establish an online presence and
communicate with a global audience. It allows people to create
websites, web applications and other digital platforms that can be
accessed from anywhere, at any time, using a variety of devices.

FRONTEND DEVELOPMENT
 Front-end development primarily focuses on user experience. Using
the related coding and design techniques, you as front-end developers
build the elements of an application that are directly accessed by end-
users with a goal of rendering the entire interface elegant, easy to use,
fast, and secure, fostering user engagement and interaction.

FRONTEND DEVELOPMENT
 Below are the most common programming languages for developing
the front end.
I. HTML :- Hypertext Markup Language
II. CSS :- Cascading Style Sheet
III. JAVASCRIPT

HYPERTEXT MARKUP LANGUAGE (HTML)
 The Hypertext Markup Language (HTML) programming language,
which defines the structure and meaning of web content, is a building
block for front-end development. Through HTML, browsers display
text or load elements, rendering webpages, which contain hyperlinks
and links to other webpages, for users.

 Headings
 HTML provides six levels of headings, from h1 (the largest) to h6 (the
smallest). Headings are used to indicate the importance of different
sections of content on a web page. For example:
 <h1>This is a Heading 1</h1>
 Paragraphs
 The <p> tag is used to define a paragraph of text. For example:
 <p>This is a paragraph of text.</p>

 Links
The <a> tag is used to create links to other web pages or resources. For
example:
 <a href=https://www.example.com>Click here to go to
Example.com</a>
 Images
The <img> tag is used to add images to a web page. For example:
<img src=”image.jpg” alt=”Description of image”>
 Lists
HTML provides two types of lists: ordered lists (ol) and unordered lists
(ul). For example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

CASCADING STYLE SHEETS (CSS)
 Cascading style sheets (CSS) is the standard language that specifies
how to display HTML content: fonts, foreground and background
colors, etc. With CSS, you can control the design layout and its
components for various devices like desktops, tablets, and
smartphones. Examples of the components are the header, body,
footer, content, asides, and sections.
Here are some key features of CSS
 Selectors
CSS uses selectors to target HTML elements and apply styles to them.
For example, you can use the following selector to target all <h>
elements on a page:
h {
color: green;
}

CSS PROPERTIES, CLASSES AND IDS
 Properties
CSS uses properties to define how HTML elements should be styled.
For example, you can use the following property to set the font size of a
<p> element:
p {
font-size: 12px;
}
 Classes and Ids
CSS provides a way to target specific HTML elements using classes and
Ids. For example, you can use the following class selector to target all
elements with the class “example”:
example {
background-color: green;
}

CASCADING AND INHERITANCE
 CSS styles can be cascaded and inherited, which means that styles
applied to a parent element can be inherited by its child elements. This
makes it easier to manage the style of a large website.
 To implement CSS in an HTML document, you can use the following
methods:
 Inline styles
 Internal styles
 External styles

TYPE OF STYLES
 Inline styles
You can add CSS styles directly to an HTML element using the “style”
attribute. For example:
<p style=”color: red; font-size: 14px;”>This text is red and 14 pixels in
size.</p>
 Internal styles
You can add CSS styles to the <head> section of an HTML document
using the <style> tag. For example:
<head>
<style>
p {
color: green;
font-size: 14px;
}
</style>
</head>

TYPE OF STYLES
 External styles
You can create a separate CSS file and link it to an HTML document
using the <link> tag. For example:
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
 In the example above, “styles.css” is the name of the external CSS file.
You can then add CSS styles to the file and they will be applied to the
HTML document.

JAVASCRIPT
 JavaScript is a programming language that is primarily used for
creating interactive and dynamic web pages. It allows developers to add
interactivity and functionality to a website, such as form validation,
animations, and dynamic content.
 JavaScript can be implemented in web development in several ways:
 Inline JavaScript
 Internal JavaScript
 External JavaScript

JAVASCRIPT
 Inline JavaScript
You can add JavaScript code directly to an HTML element using the
“onclick” attribute. For example:
<button onclick=”alert(‘Hello world!’)”>Click me</button>
 Internal JavaScript
You can add JavaScript code to the <head> section of an HTML
document using the <script> tag. For example:
<head>
<script>
function greet() {
alert(‘Hello world!’);
}
</script>
</head>

JAVASCRIPT
 External JavaScript
You can create a separate JavaScript file and link it to an HTML
document using the <script> tag. For example:
<head>
<script src=”script.js”></script>
</head>
 In the example above, “script.js” is the name of the external JavaScript
file. You can then add JavaScript code to the file and it will be applied to
the HTML document.
 JavaScript can also be used with popular web development frameworks
and libraries, such as React, Vue, and jQuery. These frameworks and
libraries provide developers with pre-built components and functionality
that can be used to build complex web applications more quickly and
efficiently.

BACKEND DEVELOPMENT
 Back-end development involves everything that exists in the server.
This includes everything from data modeling and storage to security
concerns. Back-end development makes the front-end of a website
possible by building and maintaining the systems that makes user
interaction possible.
 Back-end development is a crucial part of websites since back ends are
comprised of databases, authentication/authorization features,
application programming interfaces (APIs) and all the different
components that, combined with a front-end, allow users to view and
interact with applications in their browser.
Programming Languages for Backend Development Include
 HyperText Pree Processor {PHP} and
 MY Structured Query Languge (MYSQL}

HYPERTEXT PREE PROCESSOR (PHP)
 PHP (Hypertext Preprocessor) is a server-side scripting language that is
primarily used for creating dynamic and interactive web pages. It is
open source, easy to learn, and widely used in web development.
 PHP can be implemented in web development in several ways:
 Inline PHP
 External PHP

HYPERTEXT PREE PROCESSOR (PHP)
 Inline PHP
You can embed PHP code directly into an HTML document using the
“<?php ?>” tags. For example:
<p><?php echo “Hello world!”; ?></p>
 External PHP
You can create a separate PHP file and link it to an HTML document
using the <form> tag. For example:
<form action=”process.php” method=”post”>
<label for=”name”>Name:</label>
<input type=”text” name=”name” id=”name”>
<input type=”submit” value=”Submit”>
</form>

MY STRUCTURED QUERY LANGUGE (MYSQL)
 MySQL is a relational database management system (RDBMS) that uses
Structured Query Language (SQL) for managing data. It is widely used in
web development, particularly for building dynamic websites and web
applications.
 Some of the basic operations in MySQL include:
 Creating a database
 Creating a table
 Inserting data
 Retrieving data
 Updating data
 Deleting data

CREATING DABASE AND TABLE
 Creating a database
To create a new database in MySQL, you can use the CREATE
DATABASE statement followed by the name of the database. For
example:
CREATE DATABASE mydatabase;
 Creating a table
Once you have a database, you can create tables to store data. To create
a table, you need to specify the table name, columns, and data types.
For example:
CREATE TABLE customers (
Id INT PRIMARY KEY,
Name VARCHAR(50),
Email VARCHAR(50)
);

INSERTING AND RETRIVING DATA
 Inserting data
You can insert data into a table using the INSERT INTO statement. For
example:
INSERT INTO customers (id, name, email)
VALUES (1, ‘aliyu umar’, ‘au@example.com’);
 Retrieving data
To retrieve data from a table, you can use the SELECT statement. For example:
SELECT * FROM customers;
This will return all the rows and columns in the customers table.

Web development it slideWeb development it slidemy web development slide-1.pptx

More Related Content

Similar to Web development it slideWeb development it slidemy web development slide-1.pptx (20)

Recently uploaded (20)

Web development it slideWeb development it slidemy web development slide-1.pptx