Entry Level PHP Web Application Development/HTML and CSS: Presentation to the User
HTML and XHTML
editHTML and XHTML are content markup languages, and so for Web applications, they are what holds the content. This means that the markup that is given to the Web browser in HTML/XHTML form should look fairly plain when it is presented without any presentation information—that is, Cascading Style Sheets. This chapter focuses on building a simple Web page (without PHP) and showing how CSS can be used to increase the readability of the page while enabling HTML to hold the content.
Basic HTML Page
editLet’s take the “Hello, World” example that we first presented to you:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<p>
Hello, World!
</p>
</body>
</html>
This is a very basic page. In order to make this example a little more useful, let’s add some more markup to it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>
Hello, World! This is an <acronym title="HyperText Markup
Language">HTML</acronym> paragraph.
</p>
<p>
I have some things to tell you:
</p>
<ul>
<li>HTML is the “language of the Web.”</li>
<li>PHP is an excellent server-side language.</li>
<li>CSS makes things look pretty.</li>
<li><em>You want to make efficient use of your time…</em></li>
<li><strong>So, you want to do things correctly.</strong></li>
</ul>
</body>
</html>
Here is what this HTML looks like in Firefox 3. As you can see, it is rather plain looking:
Cascading Style Sheets are designed to make the job of modifying the look of HTML pages easy. Let’s change this a little bit so that the page looks quite different; the following is to be added directly below the <title>…</title> line, in the head section:
<style type="text/css">
* {
margin: 0px;
padding: 0px;
background-color: #99ffff;
font-size: 10px;
}
body {
margin-left: 5px;
margin-right: 5px;
}
h1 {
text-align: center;
font-family: "Times New Roman", serif;
text-decoration: underline;
font-weight: bold;
color: #ffffff;
margin-top: 5px;
margin-bottom: 1em;
font-size: 3em;
}
p {
margin-bottom: 0.4em;
border: 1px dotted #000000;
background-color: #ffffff;
}
acronym {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
cursor: help;
}
ul {
margin-left: 2em;
margin-right: 2em;
font-family: "Times New Roman", serif;
border: 1px dashed #000000;
}
li {
margin-left: 2em;
font-size: 1.3em;
}
strong {
font-size: inherit;
font-family: Arial, sans-serif;
}
em {
font-size: inherit;
font-family: Arial, sans-serif;
}
</style>
What this does is tells the Web browser to decorate the text in various ways, depending on where it is inside of the HTML document. The format of CSS is:
SELECTOR1 SELECTOR2 ... SELECTORn {
property1: value;
property2: value;
...
propertyn: value;
}
Where the selectors tell the browser what we wish to decorate, and the properties and values tell it how we want it decorated. Let’s take a look at the first CSS entry above:
* {
margin: 0px;
padding: 0px;
background-color: #99ffff;
font-size: 10px;
}
The selector here is the asterisk (“*”). This says “I want you to apply these formatting rules to everything.” The result is that all elements lose their default margin, padding, background-color, and font-size settings. It acts as a way to reset the Web browser’s default settings. Notice how the measurements are specified—as a number, and then a unit. There are many ways to pass measurements to the web browser. In this case, the measurement we are using is px, which are pixels.
The next block of CSS tells the browser to apply some margin settings to the contents of the <body> tag, namely setting a left and right margin:
body {
margin-left: 5px;
margin-right: 5px;
}
Again, we use px as the unit of measurement, stating that we want the left and right margins to be 5 pixels away from the edge of the browser’s viewing area—called the viewport.
CSS all works the same way; for the most part, it is quite readable, as well. Note that this is extremely basic CSS, which simply changes the way things look. Here is what the full HTML document now looks like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hello, World!</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
background-color: #99ffff;
font-size: 10px;
}
body {
margin-left: 5px;
margin-right: 5px;
}
h1 {
text-align: center;
font-family: "Times New Roman", serif;
text-decoration: underline;
font-weight: bold;
color: #ffffff;
margin-top: 5px;
margin-bottom: 1em;
font-size: 3em;
}
p {
margin-bottom: 0.4em;
border: 1px dotted #000000;
background-color: #ffffff;
}
acronym {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
cursor: help;
}
ul {
margin-left: 2em;
margin-right: 2em;
font-family: "Times New Roman", serif;
border: 1px dashed #000000;
}
li {
margin-left: 2em;
font-size: 1.3em;
}
strong {
font-size: inherit;
font-family: Arial, sans-serif;
}
em {
font-size: inherit;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>
Hello, World! This is an
<acronym title="HyperText Markup Language">HTML</acronym> paragraph.
</p>
<p>
I have some things to tell you:
</p>
<ul>
<li>HTML is the “language of the Web.”</li>
<li>PHP is an excellent server-side language.</li>
<li>CSS makes things look pretty.</li>
<li><em>You want to make efficient use of your time…</em></li>
<li><strong>So, you want to do things correctly.</strong></li>
</ul>
</body>
</html>
And in the Web browser:
Okay, so that’s not pretty, but it gets the point across: CSS is a pretty powerful mechanism because it lets you control the formatting, while leaving the content of the page alone.
Embedding CSS vs. Including it as a Resource
editIn the most recent example, we saw what CSS can do. However, there is one problem with it—we included the CSS directly in the Web page itself. If we have more than one Web page, it makes sense that we would want to be able to write the CSS once, and have those multiple Web pages make use of that same CSS. We could continue to include the CSS directly in the Web pages, but then what happens when we want to alter the appearance of all of our pages? We’d have to edit them all—and that is a lot of work.
One of the most important principles of software development, by the way, is known as Don't Repeat Yourself, or DRY. Having the CSS embedded in each and every HTML page violates this principle if we have several pages.