Web Development
IS THE BUILDING, CREATING,
AND MAINTENANCE OF WEBSITES
IS Web Development important?
yes, primarily because of the sheer size of the Internet. The number of
online users are increasing at an astronomical rate every year, so HTML, CSS
and Javascript have become a sort of lingua-pura in the programming world.
2021 edition of Stack Overflow’s developer survey:
Web Development can be classified into two ways:
• Frontend Development :
The part of a website that the user interacts directly is termed
as front end. It is also referred to as the ‘client side’ of the
application.
• Backend Development:
Backend is the server side of a website. It is the portion of
software that does not come in direct contact with the users. It is
used to store and arrange data.
Frontend Roadmap
Backend Roadmap
HTML ,CSS and Javascript – An Overview
• HTML
• Hyper Text 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
• Stylesheet language intended to simplify the process of making web
pages presentable. It is used to style our website.
• Javascript
• It is a scripting language used to provide a dynamic behavior to our
website.
HTML
• The first version of HTML was Basic html document:
written by Tim Berners-Lee in
1993. <!DOCTYPE html>
<html>
• HTML documents are text <head>
documents that contain <title>Simple Web Page</title>
formatting instructions called </head>
tags <body>
• Tags are enclosed in brackets <h1>Welcome to GeeksforGeeks</h1>
(<>) and consist of opening <p>A computer science portal </p>
and closing tag </body>
</html>
With and without HTML
CSS
Basic example of external css:
• CSS was first proposed by
Hakon Lie in 1994.At the time, body {
Lie was working with Tim background-
Berners-Lee at CERN. color: lightblue;
}
• describes how HTML elements
are to be displayed on screen, h1 {
paper, or in other media color: white;
text-align: center;
• There are 3 types of css: }
• Inline
• Internal or embedded p {
• External font-family: verdana;
font-size: 20px;
}
Without CSS
With CSS
javascript
• In early to mid-1990s key players like Netscape and Microsoft were in the midst of
browser wars, with Netscape’s Navigator and Microsoft’s Internet Explorer going head to
head.
• In September 1995, a Netscape programmer named brandan eich developed a new
scripting language in just 10 days. It was originally named Mocha, but quickly became
known as LiveScript and, later, JavaScript.
• most popular language among developers for the ninth year in a row.
• a client-side language, meaning it runs on your computer within your browser. However,
more recently the introduction of Node.js has allowed JavaScript to also execute code
on servers.
• It is a cross-platform, object-oriented scripting language used to make webpages interactive
(e.g., having complex animations, clickable buttons, popup menus, etc.).
Internal javascript: <!doctype html>
<html>
<head>
<script>
function jsFun() {
var val, elem;
val = parseInt(document.getElementById("num").value);
if(val) {
if(val<10)
document.getElementById("paraTwo").innerHTML = "Less than 10";
else
document.getElementById("paraTwo").innerHTML = "Greater than 10";
}
}
</script>
</head>
<body>
<p id="paraOne">Enter a Number:
<input id="num"> <button onclick="jsFun()">Enter</button>
</p>
<p id="paraTwo"></p>
</body>
</html>
THANK YOU!
