In the early days ..
In the early days of the web, it was normal that the content, layout, look, functionality and scripting on web page were all included together in the main HTML markup body. This proved to be difficult from the perspective of maintaining and evolving pages, and is no longer considered appropriate. Here is a sample of an "old style" web page:
<!DOCTYPE html>
<html>
<head>
<title>This is the old way</title>
</head>
<body>
<h1>This is a sample</h1>
Welcome to the sample program.
<b>We are not saying that this is how things should be done.</b>
Rather, we are saying that this is how things
<font color="red">used to be</font>.<p>
<a href="#" onclick="javascript:alert('this link was clicked');">
This is a link that you should click</a><p>
</body>
</html>
Separating content and appearance
Documents written this way quickly became difficult to maintain, and were difficult to develop flexibly with regards to their appearance. It became desireable to separate content from appearance., and CSS was the technology that was first developed to address this problem. The same sample above, then, using CSS, would look like the following. Note that the look is completely separated from the content.
<!DOCTYPE html>
<html>
<head>
<title>Using CSS to separate appearance and content</title>
<!-- Appearance is declared in a separate style block -->
<style>
.important {
font-weight: bold;
}
.warning {
color: red;
}
</style>
</head>
<!-- The actual document body contains only content -->
<!-- and does not say anything about apperance -->
<body>
<h1>Sample that uses CSS</h1>
<p>Welcome to the sample program. <span class="important">
Now we are saying that this is how things should be done.</span>
Before CSS, this was not how things <span class="warning">used to be</span>.</p>
<p><a href="#" onclick="javascript:alert('this link was clicked');">
This is a link that you should click</a></p>
</body>
</html>
Separating functionality
In addition to separating the look and feel, the functionality (Javascript) portions of the application can also be kept separately, and could be done as follows:
<!DOCTYPE html>
<html>
<head>
<title>Separating functionality from content</title>
<style>
.important {
font-weight: bold;
}
.warning {
color: red;
}
</style>
<script>
window.onload = function() {
var link = document.getElementById('mylink');
link.onclick = function() {
alert('The link was clicked!');
}
}
</script>
</head>
<body>
<h1>Sample that uses CSS</h1>
<p>Welcome to the sample program. <span class="important">Now we are saying that this
is how things should be done.</span> Before CSS, this was not how things
<span class="warning">used to be</span>.</p>
<p><a href="#" id="mylink">This is a link that you should click</a></p>
</body>
</html>
Furthermore, since three (HTML, CSS and Javascript) are now completely separate from each other, they can (and should) be also saved in separate files:
Style sheets should be saved in .css files
Functionality should be saved in .js files
Content should be saved in .html files
The style sheets and functionality are then referenced in the HTML file.
The final version of this page could, therefore, be as follows:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Separating functionality from content</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="functionality.js"></script>
</head>
<body>
<h1>Sample that uses CSS</h1>
<p>Welcome to the sample program. <span class="important">Now we are saying that this
is how things should be done.</span> Before CSS, this was not how things
<span class="warning">used to be</span>.</p>
<p><a href="#" id="mylink">This is a link that you should click</a></p>
</body>
</html>
style.css
.important {
font-weight: bold;
}
.warning {
color: red;
}
functionality.js
window.onload = function() {
var link = document.getElementById('mylink');
link.onclick = function() {
alert('The link was clicked!');
}
}
