Friday

Web Design

The Web and HTML

• Tweet
• Sharebar

• Tweet

Cascading Style Sheets (CSS) speak for a major breakthrough in how Web-page designers work by expanding their ability to control the appearance of Web pages, which are the documents that people publish on the Web.

For the first few years after the World Wide Web (the Web) was made in 1990, people who sought after to place pages on the Web had small control over what those pages looked like. In the beginning, authors could only specify structural aspects of their pages (for example, that some piece of text would be a bearing or some other piece would be straight text). Also, here were ways to make text bold or italic, amongst a few other effects, but that’s everywhere their control finished.

In the scientific environments everywhere the Web was born, people are more concerned with the content of their documents than the presentation. In a research report, the choice of typefaces (or fonts, as we call them in this book) is of small importance compared to the scientific results that are reported. But, when authors outside the scientific environments learned the Web, the limitations of Web document formats became a source of continuing frustration. Authors often came from a paper-based periodical environment everywhere they had full control of the presentation. They sought after to be able to make text red or black, make it look more spaced out or more squeezed, to center it or place it against the right margin, or anywhere else they sought after. Many Web designers have a desktop-publishing background, in which they can do all these things and more to improve the appearance of printed material. They want the same capabilities when they design Web pages. But, such capabilities have been slow to develop – slow by Internet speed standards, that is. So, designers devised techniques to sidestep these limitations, but these techniques now and again have unfortunate side effects. We discuss those techniques and their side effects later in this chapter.

CSS also works with XML, which is another document format for the Web. See next Chapter, “XML Documents,” for how to use CSS and XML collectively.

This book discusses a new method to design Web pages. CSS works with HTML (the HyperText Markup Language), which is the primary document format on the Web. HTML describes the document’s structure; that is, the roles the various parts of a document play. For example, a piece of text may be designated as a bearing or a paragraph. HTML doesn’t pay much attention to the document’s appearance, and in fact, it has only very limited capability to influence appearance. CSS, but, describes how these fundamentals are to be presented to the document’s booklover. Now, using CSS, you can better specify the appearance of your HTML pages and make your pages available to more Web users worldwide. CSS momentously enhances the potential of HTML and the Web.

A style sheet is a set of stylistic guidelines that tell a browser how an HTML document is to be presented to users. With CSS, you can specify such styles as the size, color, and spacing of text, as well as the placement of text and images on the page. CSS can also do much more.

A key feature of CSS is that style sheets can cascade. That is, several different style sheets can be attached to a document and all of them can influence the document’s presentation. In this way, an author can start a style sheet to specify how the page must look, while a booklover can attach a personal style sheet to adjust the appearance of the page for human or technological limitations, such as poor eyesight or a personal preference for a certain font.

CSS is a simple language that can be read by humans, in contrast to some computer languages. Perhaps even more vital, but, is that CSS is simple to write. All you need to know is a small HTML and some basic desktop-publishing terminology: CSS borrows from that terminology when expressing style. So, those of you who have experience in desktop publishing must grasp CSS promptly. But, if you’re new to HTML, desktop publishing, or Web-page design, don’t despair. You are likely to find CSS surprisingly simple to grasp. This book includes a brief review of basic HTML and tips on page design.

To know how revolutionary CSS is, you first need to know Web-page design as it has been and the problems that CSS can help solve. In this chapter, we start with a brief tour of the Web and the problems Web designers and others have faced prior to the introduction of CSS. Then, we promptly review the basics of HTML. For those of you who are already publishing on the Web, this all may be ancient news. For those of you who are new to the thought of designing Web pages, this helps place things in perspective. In next Chapter, we step you through the basics of how to use CSS. In subsequent chapters, we delve more deeply into CSS, covering how you can specify the text, background, color, spacing, and more in the design of Web pages.

The Web

The Web is a vast collection of documents on the Internet that are linked collectively via hyperlinks. The Internet consists of millions of computers worldwide that communicate electronically. A hyperlink is a predefined link between two documents. The hyperlinks allow a user to access documents on various Web servers without concern for everywhere they are located. A Web server is a computer on the Internet that serves out Web pages on request. From a document on a Web server in California, the user is just one mouse click away from a document that is stored, perhaps, on a Web server in France. Hyperlinks are integral to the Web. Without them, here would be no Web.

Users gain access to the Web through a browser. A browser is a computer program that lets users browse – or “surf” – the Web by fetching documents from Web servers and showing them to the user. To go from one document to another, the user clicks a highlighted (often underlined) word or image that represents a hyperlink. The browser then retrieves the document that is at the other end of the hyperlink and displays it on the screen. For example, a user could be in a document about baroque music and click the highlighted words Johann Sebastian Bach that are linked to “Bach’s home page.” (On the Web, all celebrities – and everyone else who desires one – have a home page.) After the browser fetches Bach’s home page (instantly, in the best case), it appears on the user’s screen.

Enhancement of the Web

The Web was invented around 1990 by Tim Berners-Lee with Robert Cailliau as a close ally. Both of them were then working at CERN, which is the European Laboratory for Particle Physics. Tim is a graduate of Oxford University and a long-time computer and software expert, and is now the director of the World Wide Web Consortium (W3C), an organization that coordinates the enhancement of the Web. He also is a principal research scientist at Massachusetts Institute of Technology’s Laboratory for Computer Science and Artificial Intelligence (MIT CSAIL). Robert is a 30-year veteran at CERN, everywhere he still works. Robert organized the first Web conference in Geneva in 1993. Both Tim and Robert were awarded the ACM Software System Award in 1995 because of their work on the Web. (Robert wrote the Foreword to this book.)

Tim made the language HTML, which is used by people to exchange information on the Web. We discuss what HTML is in the next part and give a brief review of its basics later in the chapter. Tim also started work on style sheets soon afterward, but when the Web really ongoing taking off in 1993, the work on them was not complete.

The world outside scientific laboratories learned the Web around 1994. In view of the fact that then, the Web’s growth has been tremendous. Had style sheets been available on the Web from its beginning, Web-page designers would have been spared much frustration. But, releasing CSS1 two years later did offer some advantages. First, in the interim, we learned much about what visual effects Web designers want to realize on their pages. Second, we learned that users also want their say in how documents are presented on their computer screens; for example, the visually impaired may want to make fonts larger so that they can be read more easily. As a result, we were able to grant functionality to meet as many of these needs as possible, and even more was added when CSS2 was issued in 1998. Hence, the CSS of 1999 is a better solution than a style-sheet solution years earlier would have been.