Chapter 9
In This Chapter
Understanding how HTML, CSS, and JavaScript work together
Using CSS for text styling
Using CSS for positioning text and graphics
Designing web pages with WordPress
Using JavaScript in web pages
The preceding chapter introduced and explained key basics for HTML. Anyone who works in web development needs to know the basics of how HTML works.
In this chapter, we introduce the basics of Cascading Style Sheets (CSS) and JavaScript, which are additional key elements in understanding how web pages are put together. Taken together, this information is crucial for all web developers. But it affects you differently depending on your role.
If you are a novice web developer who will be creating web pages directly, you need to learn this information thoroughly. Good starting resources are the tutorial made available by the World Wide Web Consortium, which you can find at www.w3.org/community/webed/wiki/Category:Tutorials.
If you are an experienced web developer, review this information to gain perspective and clarity on the work you do every day. Consider quickly reviewing the World Wide Web Consortium’s tutorials to see if they show you anything new. Then use these pages to help you explain to colleagues and new employees how you work, and how they can best work with you.
Originally, web pages were all HTML. HTML font elements, such as <b> for bold and <i> for italic, controlled the look of text; tables, misused to contain the entire contents of the page (as described in the preceding chapter), controlled layout. But this has been replaced by a combination of HTML, CSS, and JavaScript.
Why use HTML, CSS, and JavaScript together? Well, creating a useful, usable web page is difficult. Using HTML, CSS, and JavaScript together takes that difficult job and divides it into three parts. Each part is handled by the right tool for the job:
This separation of responsibilities among HTML, CSS, and JavaScript has a bunch of advantages. Among the key pluses are
The World Wide Web Consortium has a useful overview of how these pieces work together, although it emphasizes somewhat different points than we do. To see its take on it, visit www.w3.org/community/webed/wiki/The_web_standards_model_-_HTML_CSS_and_JavaScript.
This web page is shown in Figure 9-1.
In addition to all the good reasons for using HTML, CSS, and JavaScript in combination, there’s another reason: This combination has become the standard. Learning to work the way most of your colleagues do will save you time, energy, and frustration. That doesn’t mean you shouldn’t remember some of your old HTML tricks, and you should learn more modern tools, such as PHP, but recognize what the mainstream has been for a long time now, and be ready to work within that framework as needed.
Before you get too far into the weeds, however, it’s important to take some time to think about what you’re trying to accomplish. Figure 9-2 shows an article called “F-Shaped Pattern for Reading Web Content” from the Nielsen Norman Group. View the article at www.nngroup.com/articles/f-shaped-pattern-reading-web-content/.
This article, and others on the Nielsen Norman site, give you some underlying reasons for designing your web pages in ways that will promote usability and usefulness. See the sidebar, “Jakob Nielsen on web design” for some additional perspective.
As we describe in Chapter 8, HTML was supposed to be somewhat above pedestrian concerns such as how a page actually looked when displayed. Ideally, according to many HTML mavens, you were meant to specify meaning in HTML; the actual display format used to convey that meaning to the user would be decided on by the web browser, such as Microsoft Internet Explorer or Apple’s Safari. The display format chosen by the browser would also reflect the specific device in use.
This approach was only really practical when a web page was made up of one long, single flow of text, with no left-hand column for, say, navigation, and no right-hand column for, say, related articles or advertising. As soon as you wanted to go to even a simple two- or three-column format, the original intention of HTML broke down.
CSS, though, actually allows you to use HTML in something like the way that the purists originally intended. Because CSS not only allows you to specify the display format: It actually allows you to address magazine-type concerns such as the look of your text and the layout of a page, sometimes down to the pixel level.
In Chapter 8, we introduce basic HTML. However, when using CSS with HTML, you use HTML differently.
A lot of things which were only added to HTML several years into its development, such as adding a specific font, are taken right back out. Instead, you define the look of common HTML tags in CSS.
Here’s an example:
body {...
font-size: 14px;
...}
These statements define text within the body of a web page to have a default size of 14 pixels. This works well on most devices. However, you might want to have different style sheets for most devices, which might have different default sizes for body text.
You can also define the look for established HTML tags such as headers and paragraphs. In addition, you can use new names for tags in your HTML file, such as .editornote, and then define them in CSS.
Editornote is a class, a kind of subset of an established tag such as the paragraph tag. In HTML, you define a paragraph of a given class as follows:
<p id="editornote"> ... </p>
Then, in CSS, you have to define what editornote means, or it will be undefined:
p {
.editornote font-weight: bold;
}
Here are some other CSS attributes that you can use for text styles:
Figure 9-3 shows an explanation of how to style text with CSS. See this page for details on specific CSS attributes: www.w3.org/community/webed/wiki/Text_styling_with_CSS.
In the 1990s, as the web grew, web designers became accustomed to using HTML tables for page layout — that is, getting the overall structure of the page right.
For example, a common page layout for the web is a three-column layout, with navigation in a narrow column on the left, the main content or article in a wide column in the middle, and advertising and “related content”-type sections in a narrow column on the right. This kind of layout was implemented as three separate tables within one overarching table that positioned them relative to each other. (People had lively debates about topics such as whether you could do without the overarching table.)
As CSS matured in the late 1990s and early 2000s, it became possible to use it reliably for page layout. To contrast this with the use of HTML tables, such layout is frequently called tableless layout for the web.
In 2002, the World Wide Web Consortium published a how-to on “tableless layout,” shown in Figure 9-4. This is a good introduction to the topic. Check it out at www.w3.org/2002/03/csslayout-howto.
At the time, these layouts only worked with the latest and greatest browser versions because the development of CSS into a tool that could handle the demands of complex web page layouts was a slow and messy process, marked by controversy and some degree of game-playing among major players such as Microsoft and Netscape, which by that time was owned by AOL Time Warner.
Here’s a brief overview of some major CSS elements used for page layout:
These elements are only one way to go. You can use boxes and other, newer CSS techniques to create robust layouts. These layout techniques evolved as the CSS standard evolved to include new capabilities.
Figure 9-5 shows an example of CSS positioning that is best implemented in one way for newer browsers because the newer way is easier to understand, but in a different way for the Microsoft Internet Explorer web browser version 6, which many people at the time were using. This is a solid example of the many ways web designers have had to tweak their layouts over the years as the CSS standard and browser capabilities evolved.
In most web work, your work includes maintaining older pages as well as creating newer ones that are intended to work on different kinds of devices. Given the varied nature of most jobs, you’ll need to get used to a wide variety of different approaches to using CSS, and even to moving pages from an older way of using CSS to a newer one.
JavaScript is a computer programming language that’s part of the trinity of web development: HTML, CSS, and JavaScript. You need to understand the basics of how it’s used in web pages to do any job in web development — and you always have the option to make JavaScript expertise your main calling card as a web developer.
JavaScript is an interpreted programming language, which means you can write it into an HTML file, and it will be interpreted and executed as the web page loads. (Almost all web browsers contain code, called a parser, to execute JavaScript.) You can use various techniques to have some JavaScript only be interpreted and executed after the main page has loaded and some other JavaScript has already executed.
The advantage of JavaScript is that it puts computing power into your actual web page. Usually, if the user is looking at, and responding to, a web page such as a form, you can’t do anything with the form’s content — such as check it — until the user submits the entire form. JavaScript can shortcut this process, checking content as the user enters it.
JavaScript can control animations in a page or change what appears depending on what the user mouses over. Use it in combination with HTML and CSS. Also in combination with back-end code, JavaScript can check the content of an entry field to make sure it’s correct, but you should use back-end code to update a database with the information that’s entered.
JavaScript can be put between the <script> and </script> tags in a web page, or put in a separate JavaScript file that ends with .src, or both. Here’s the code to reference an external JavaScript file and to put up an alert if the browser executing the HTML code in the web page can’t process JavaScript:
<script type="text/javascript" src="yourscript.js">
alert("If you are seeing this message then this browser does not support JavaScript.")
</script>
If you keep JavaScript code in an external file, you can share it among numerous web pages. Browsers cache the file, so it won’t need to be downloaded multiple times. And you can more quickly and easily find and fix problems within your JavaScript.
You can also put your JavaScript code into multiple files and load only the ones you need in each of your web pages.
JavaScript can change the HTML and CSS contents of your web page. The following JavaScript puts text and a clickable button on a web page:
<!DOCTYPE html>
<html>
<body>
<h1>Clickable Button in JavaScript</h1>
<p id="test">JavaScript can change the style of an HTML element.</p>
<script>
function testFunction() {
var x = document.getElementById("test");
x.style.fontSize = "40px";
x.style.color = "blue";
}
</script>
<button type="button" onclick="testFunction()">Click Here!</button>
</body>
</html>
One of the most common uses of JavaScript is for error-checking. You can allow the user to type in a value, and then use JavaScript to parse the value and make sure it make sense. For instance, you can ask users for their phone number, and then make sure that what they enter fits the profile of a valid phone number.
If you need more information about JavaScript, start with the JavaScript tutorials at W3. Here’s the introductory one, shown in Figure 9-6: www.w3.org/community/webed/wiki/Category:Tutorials.