Separation of Concerns
How do we help prevent website code from becoming too large? Beforehand, we split the design elements (CSS) away from the information (HTML) by putting the CSS between <style></style> tags, in the <head> section of the code. This works, but what if we wanted to apply the same design elements to multiple pages? This is where the CSS can be stored in a separate file, and applied to multiple HTML documents.
See below, where the CSS has been separated from the HTML. The styling has been called into the HTML document using <link />.
<!DOCTYPE ... >
<html xmlns ... >
<head>
<title>Title goes here.</title>
<link rel="stylesheet" type="text/css" href="design.css" />
</head>
<body>
<div id="geocities-preview">
<div id="geo_contenttable">
<div class="marquee"><h1>Here is a title.</h1></div>
<div class="geo_content">
<img src="window.gif" alt="window" />
</div>
<div class="geo_content">
<p>This paragraph of text has a window either side of it.</p>
</div>
<div class="geo_content">
<img src="window.gif" alt="window" />
</div>
</div>
<div class="geo_divider">
<img src="animateline.gif" alt="divider" />
</div>
<div id="geo_content2">
<div class="geo_content2section">
<img src="rex.gif" alt="T-Rex" />
</div>
<div class="geo_content2section">
<p>Fill this part with text. It stretches over 2 columns. Table cells allow for rigid positioning of objects. There is a T-Rex to the left of this paragraph.</p>
</div>
</div>
</div>
</body>
</html>
#geo_contentttable {
position: relative;
display: table;
border-spacing: 0px;
width: 100%;
}
.geo_content {
display: inline-block;
max-width: 350px;
text-align: center;
font-family: 'Century Gothic';
color: #f00;
}
.geo_divider{
width: 100%;
text-align: center;
}
#geo_content2{
position: relative;
display: table;
border-spacing: 1px;
width: 100%;
background-color: #ff3;
color: #00f;
}
.geo_content2section{
display: inline-block;
max-width: 430px;
font-family: 'Verdana';
text-align: right;
vertical-align: top;
}
How would this work with JavaScript? It works in practically the same way as the CSS. Write the code in a separate .js file, and import it into the main HTML document.
An example is shown below, using the code that is used to display these three panels and how to switch between them.
<!DOCTYPE ... >
<html xmlns ... >
<head>
<title>Title goes here.</title>
<link rel="stylesheet" type="text/css" href="design.css" />
<script type="text/javascript" src="interact.js"></script>
</head>
<body>
[...]
<div class="panel-switch">
<a href="#" onclick="p_switch('boxA');">base.html</a>
<a href="#" onclick="p_switch('boxB');">design.css</a>
<a href="#" onclick="p_switch('boxC');">interact.js</a>
</p>
<div id="boxA">
(HTML code here)
</div>
<div id="boxB">
(CSS code here)
</div>
<div id="boxC">
(JS code here)
</div>
[...]
.panel-switch{
/* design the links */
}
pre {
/* design the pre tag */
}
code {
padding: 5px;
margin: 0;
border: 0;
}
#boxA {
display: block;
}
#boxB {
display: none;
}
#boxC {
display: none;
}
function p_switch(id) {
if(id == 'boxA') {
document.getElementById('boxA').style.display = "block";
document.getElementById('boxB').style.display = "none";
document.getElementById('boxC').style.display = "none";
}
if(id == 'boxB') {
document.getElementById('boxB').style.display = "block";
document.getElementById('boxA').style.display = "none";
document.getElementById('boxC').style.display = "none";
}
if(id == 'boxC') {
document.getElementById('boxC').style.display = "block";
document.getElementById('boxA').style.display = "none";
document.getElementById('boxB').style.display = "none";
}
}