Web Design Primer

Chapter 1 – Introduction

So you want to learn how to design documents for the World Wide Web (www)? Well, before we get started it is important to learn why it was invented in the first place. Back in the year 1989, the Web was attributed to British scientist Tim Berners-Lee, who proposed it to facilitate communication between researchers. (Sir Timothy, who was knighted by Queen Elizabeth for his contributions to science, is now head of the W3C organization that sets standards for the web.)

Fast forward to present day, it serves as a primary tool to not only communicate, but also to entertain, collaborate and educate individuals. In this textbook, we aim to teach you the basics and fundamentals of how you can add value to the online space by building your own website.

Print vs. Web

We will assume you have some experience with page-layout programs for creating printed documents with text and graphics. With printed documents, the designer can specify the paper size and has control over the page dimensions. On the web, the designer has no idea which browser, display, or window size the reader will use. Analogous structures between printed and web pages are shown in Table 1-1. A basic web page is shown in Figure 1-1.

Table 1-1. HTML and analogous page layout elements 

Figure 1-1. Structure of a basic HTML page for viewing with a web browser. Adobe® Dreamweaver® screenshot(s) reprinted with permission from Adobe Systems Incorporated.

Inline vs. Block Elements

HTML elements are described as either inline or block, depending upon how they are arranged on the web page (Table 1-2). Inline elements fall into a series from left to right, like letters or words on a page (in a Western literary tradition)—like print elements with spaces in between. Block elements arrange themselves vertically on the page, like page elements with paragraph returns after them.

Incidentally, the “float” style can be used to convert block elements to inline, while the division <div> tag can be used to make inline into block elements.

Table 1-2. Basic Page Elements 

HTML, CSS, and JavaScript

These three components work together to create structured web pages with attractive styles and user interaction. HTML and its tags provide the structure of the page. CSS styles the tags, including size, colour, position, and many other characteristics. JavaScript adds interactivity, such as when users click buttons or submit forms.

The content and structure of a web page is defined by tags, abbreviations enclosed in less-than and greater-than symbols, like <p> for paragraph. Most tags need to be closed using the same symbol, preceded by a forward slash, e.g., </p>. Some tags are self-closing, such as image <img/>, line break <br/>, and horizontal rule <hr/>.

Cascading style sheets (CSS) define the style of tagged elements, such as size, colour, position, margins, borders, and many other attributes. CSS refers to a separate file of type .css that contains the style specifications. The “cascade” also refers to the hierarchy of style specifications, which can be placed in any of three places:

1. Within the tag, or inline, such as <p style=”text-align: left”>
2. In the head of the document, or embedded, and enclosed with <style></style> tags and enclosed by braces {} after a selector that designates what tag the specifications are applied to
3. In a separate document of filetype .css

The hierarchy is that the first, or inline style, takes precedence over the embedded style, which takes precedence over the external .css file.