Scribd
Upload
12 views

Foundations of computing

Foundations of computing

Uploaded by

shafna
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

Foundations of computing

Foundations of computing

Uploaded by

shafna
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

MODULE 4

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 word Web Development is made up of two words, that is:
Web: It refers to websites, web pages, or anything that works over the internet.
Development: It refers to building the application from scratch.
Web Development can be classified into two ways
Frontend Development
Backend Development

Front-end Development is the development or creation of a user interface


using some markup languages and other tools. It is basically the development of
the user side where only user interaction will be counted. It consists of the
interface where buttons, texts, alignments, etc are involved and used by the
user.
Popular Frontend Technologies
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.
What is HTML?
HTML stands for HyperText Markup Language. It is the standard language
used to create and design web pages on the internet. It was introduced by Tim
Berners-Lee in 1991 at CERN as a simple markup language. Since then, it has
evolved through versions from HTML 2.0 to HTML5 (the latest 2024 version).
HTML is a combination of Hypertext and Markup language. Hypertext
defines the link between the web pages and Markup language defines the text
document within the tag.

Example: This example shows the basic use of HTML on the web browser.
HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>Hello World! Hello from GFG </p>
</body>
</html>
What is CSS?
CSS or Cascading Style Sheets is a stylesheet language used to add styles to
the HTML document. It describes how HTML elements should be displayed on
the web page.
CSS was first proposed by Håkon Wium Lie in 1994 and later developed by
Lie and Bert Bos, who published the CSS1 specification in 1996.

Basic CSS Example


CSS has 3 ways to style your HTML:
Inline: Add styles directly to HTML elements (limited use).
Internal: Put styles inside the HTML file in a <style> tag.
External: Create a separate CSS file (.css) and link it to your HTML.
Example: This example shows the use of external, internal and inline CSS into
HTML file.
HTMLCSS

<!DOCTYPE html>
<html>
<head>
<!-- Importing External CSS -->
<link rel="stylesheet" href="style.css" />
<!-- Using Internal CSS -->
<style>
h2 {
color: green;
}
</style>
</head>
<body>
<!-- Using Inline CSS -->
<h2 style="text-align: center;">Welcome To GFG</h2>
<p>Showing all type of CSS use - GeeksforGeeks</p>
</body>
</html>

What is JavaScript?
JavaScript is a lightweight, cross-platform, single-threaded, and interpreted
compiled programming language. It is also known as the scripting language for
webpages. It is well-known for the development of web pages, and many non-
browser environments also use it.
JavaScript is a weakly typed language (dynamically typed). JavaScript can be
used for Client-side developments as well as Server-side developments.
JavaScript is both an imperative and declarative type of language. JavaScript
contains a standard library of objects, like Array, Date, and Math, and a core
set of language elements like operators, control structures, and statements.
Example: This example shows the alert by the use of alert method provided by
JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Custom Alert Box</title>
<style>

body {
display: flex;
justify-content: center;
width: 100vw;
margin-top: 20px;
}
.alert {

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f8d7da;
color: #721c24;
padding: 15px 20px;
border: 1px solid #f5c6cb;
border-radius: 5px;
}
</style>
</head>
<body>
<button onclick="showAlert()">Show Alert</button>
<script>
function showAlert() {

const alertBox = document.createElement('div');


alertBox.className = 'alert';
alertBox.textContent = 'This is a custom alert box.';
document.body.appendChild(alertBox);
}
</script>
</body>
</html>
Output:

XHTML

XHTML or EXtensible HyperText Markup Language is a mix of HTML and


XML, very similar to HTML but stricter. It’s like a rulebook for creating web
pages that browsers easily understand. Unlike HTML, you have to be careful and
follow the rules exactly. Most browsers support it. Just think of it as a more precise
way to write web code.
XHTML Element Description

Used to declare the Document Type


Definition (DTD), specifying the rules
<!DOCTYPE>
for the markup language, ensuring
proper rendering in browsers.

Encloses the entire HTML or XHTML


<html>
document, serving as the root element.

Contains meta-information about the


document, such as the title, character
<head>
set, linked stylesheets, and other
essential elements.

Nested within the head section,


specifies the title of the document,
<title>
displayed in the browser’s title bar or
tab.

Encloses the content of the web page,


including text, images, links, and
<body> other HTML elements. It represents
the visible part of the document
displayed in the browser.

Why use XHTML?


 XHTML documents are validated with standard XML tools.
 It is easily to maintain, convert, edit document in the long run.
 It is used to define the quality standard of web pages.
 XHTML is an official standard of the W3C, your website becomes more
compatible and accurate with many browsers.
Benefits of XHTML:
 All XHTML tags must have closing tags and are nested correctly. This
generates cleaner code.
 XHTML documents are lean which means they use less bandwidth. This
reduces cost particularly if your web site has 1000s of pages.
 XHTML documents are well formatted well–formed and can easily be
transported to wireless devices, Braille readers and other specialized web
environments.
 All new developments will be in XML (of which XHTML is an application).
 XHTML works in association with CSS to create web pages that can easily
be updated.

Difference Between HTML and XHTML:

HTML XHTML

XHTML (Extensible HyperText


Markup Language) is a family of
HTML or HyperText Markup
XML markup languages that mirror
Language is the main markup
or extend versions of the widely used
language for creating web pages
Hypertext Markup Language
(HTML)

Flexible framework requiring Restrictive subset of XML which


lenient HTML specific parser needs to be parsed with standard
HTML XHTML

XML parsers

Proposed by Tim Berners-Lee in World Wide Web Consortium


1987 Recommendation in 2000.

Application of Standard
Generalized Markup Language Application of XML
(SGML).

Extended from SGML. Extended from XML, HTML

You might also like