HTML + CSS + JavaScript = Content + Style + Behavior
This the one of the guiding principles of the way I make sites. We want to keep our content/data, in the form of HTML (HyperText Markup Language) code, neatly separated from the rules that tell the browser what it’s supposed to look like, in the form of one or more CSS (Cascading Style Sheets) and rules that tell the browsers what it’s supposed to do, for our purposes, written in JavaScript.
Why?
Well, there are many reasons. I’ll give you two big ones and then it’s onto the next section. We’ve got a lot to cover.
-
It’s easier to maintain. When you’ve got your styles and script centrally located in a single file and not spread out over your entire site, it’s much easier to make changes. Need to change the size of your <h2>s? Simple open up your site style sheet, update the rule, save it, upload it to your server and you’re done. Without that separation you’re doing some sort of crazy find and replace. We used to have to do that. Trust me, it’s no fun.
This separation also allows more than one person to work on the site at once. If everything was contained on one page (the way things used to be) trying to divide and conquer can get pretty hairy, pretty quickly.
-
It’s faster. Separating out your script and style information means that stuff is cacheable. Which simply means your browser keeps a local copy of those files so it doesn’t have to ask your server for them every time it loads one of your pages. Which is cool, because then all the browser needs to do is download the corresponding HTML page and it’s ready to start drawing the page. One of the goals of this series will be to give you habits that will make your sites fast by default. Leveraging the cache is one core concept.
Now that we’ve got that out of the way, let’s quickly look at the three components. Then it’s onto the page itself.
HTML
HTML is the lifeblood of the Internet. For the sake of this series it represents the content or data the user is looking for. It’s our job to get it to them in a pleasant, efficient manner.
Beyond the content that it contains, HTML also provides the structure upon the whole thing rests. More on this later.
CSS
CSS defines how web pages should appear in the browser. While the pages we build should work without CSS, they won’t be very pretty and they certainly won’t be as usable.
JavaScript
JavaScript tells the browser what to do. This can be in response to user interaction or can be done behind the scenes- for example, queing up new content or saving the users data to a server for safe keeping.
Let’s Look At a Simple Sample Page
This is a somewhat simplified example of an HTML page. I just want to point out four things and then we’re ready to move on to more detail starting with the next post in this series. Take a look and I’ll see you on the other side.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Our Sample Page</title>
<link rel="stylesheet" href="_assets/styles/styles.css" />
</head>
<body>
<div id="container">
<h1>H1 Header for topics Lorem Ipsum Dolor Sit Amet, Consector Adipiscing </h1>
<p>Donec nec <em><em></em> emphasis justo eget felis facilisis fermentum.
Aliquam porttitor mauris sit amet orci. Aenean <strong><strong></strong>
dignissim pellentesque felis.</p>
<p><img src="_assets/images/sample.png" alt="sample image" width="500" height="375" /> </p>
<h2>H2 Header for topics Lorem Ipsum Dolor Sit Amet, Consector Adipiscing </h2>
<p>orem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque
volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh,
viverra non, semper suscipit, posuere a, pede.</p>
<h3>H3 Header for subtopics Lorem Ipsum Dolor Sit Amet, Consector Adipiscing Elit</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque
volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh,
viverra non, semper suscipit, posuere a, pede.</p>
</div>
<script type="text/javascript" src="_assets/scripts/base.js"></script>
</body>
</html>
Wasn’t that fun?
Anyway, I just wanted to point out four sections of the page to orient you a little bit before we delve into specifics. I made a handy image as a guide:
The important bits to walk away with:
- The head generally contains information about the page. What language it’s in, a short description of it and several other things we won’t get into just yet. With the exception of the title (and one other tag I won’t talk about just yet) nothing in the
headis displayed directly to the user. - The
headcontains a link to the CSS file that contains all of the display rules for the site. Now you know where the style sheet lives. - The body is where your content lives. There are some other things in there, but for now, just know that everything you see in the browser window basically lives in the
body. - The
bodycontains a link to the JavaScript file that contains all of the behavior for the site. Now you know where the JavaScript lives*.
And that’s it, the basic anatomy of a web page. There’s plenty more detail to follow, but that will serve us well as a foundation as we work our way through the whole process.
Until next time….
*I should point out that, yes, JavaScript can (and will) live other places. For this series, it lives at the bottom :).
One thought on “How To Make a Web Site the Modern Way. Part 1: The Anatomy of an HTML Page”