Web Design with HTML and CSS

30

How web pages work

Web Design with HTML and CSS Digital Classroom

Separating structure, style, and interactivity

Modern websites often consist of pages with HTML or XHTML for the page structure and

content, Cascading Style Sheets (CSS) for the style, and JavaScript, Flash, or Silverlight for the

interactivity. In this exercise, you will look at three examples of source code. Each page has

the same content, but has a diff erent appearance and functionality. If you have not done so

already, be sure to copy the lesson folders for this book onto your local system.

1 Open your web browser — it doesn’t matter if it is Internet Explorer, Firefox, Chrome,

Safari, or another browser. Choose File > Open and browse to the web02lessons folder,

choose the fi le plain.html, and then click Open. The page loads into your browser.

The page displays in your browser. The HTML defi nes the structure of this page and

contains content such as the text and images.

Some browsers may not display the menu bar. In this case, you can use your operating system to

navigate to the web02lessons folder and double-click the fi le to open, or use your keyboard and

press Ctrl. + O (Windows) or Command + O (Mac OS).

A local HTML page can be previewed in your web browser.

2 In your web browser, choose File > Open and browse to the document

plain_with_styles.html located in the web02lessons folder, and click Open. Your browser

displays a more highly formatted web page. It includes a two-column layout, and

background colors for the page. The content on this page is identical to the previous

document; however, the style is being provided by a number of style rules in a Cascading

Style Sheet or CSS.