At the heart of modern web applications there lays 3 main
components which helps/guides users to do shopping on Amazon web site, purchase air tickets from Delta Airlines, connect friends worldwide through Facebook, transfer money from your
account to a friend via Bank of America
and many other services to better/improve the standard of living of humans.
Let’s briefly go through each component, understand what it means
and what it does:
HTML
Hyper Text Markup Language, here markup means marking a word
bold or italic or underline or make paragraph by markups like
, PS, HTML is the product of printing technology. So that’s where the word markup came from. In general HTML helps to structures the data or holder of the data. So if user wants to see their data structured then they should format their data according to html tags/elements.
, PS, HTML is the product of printing technology. So that’s where the word markup came from. In general HTML helps to structures the data or holder of the data. So if user wants to see their data structured then they should format their data according to html tags/elements.
CSS
Cascading Style Sheets, it’s the styling language used to do
designing/presentation/formatting of
structured data aka HTML tags/elements. In simple words, via CSS we can say
what is the color of font/ size, how and where to position the images, what
type of fonts, size of the grid/table etc. User must follow the rules of CSS
styling language.
JavaScript
Plays behavioral role
or it interacts with the user, for ex: Alerting users through message boxes, or
when user clicks on submit button, JavaScript validates user has entered all
the required/mandatory field before submitting data to sever, etc. Through JS
user can request data from server for ex: their checking account balances or
transaction data.
Each of the above components are worth of a book or more.
But in general it is simple, Structure + Present + Behavior combined all these three makes the web working and helps human to improve their standard
of living or simplify.
A very simple/real working example of all of the above
components is as follows:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Simple web app</title>
<style>
button
{
color: white;
background-color: lightblue;
}
</style>
<script type="text/javascript">
function Hello() {
alert("Thanks for
clicking me!");
}
</script>
</head>
<body>
<div>
<button onclick="Hello();">Please Click On Me!</button>
</div>
</body>
</html>
You can copy and paste it on a notepad/textpad and open it
from a browser, then you should see a screen like below (I opened it through
Google chrome)
