Web Design

Learning Objectives To familiarize you with the structure of HTML (HyperText Markup Language) To identify some of the qualities of good web design To gain experience using a WYSIWYG HTML editor (What You See Is What You Get) To use CSS (Cascading Style Sheets) to control the formatting of your HTML web page

Basic Rules of HTML HTML tags are enclosed by brackets for example Most tags require a closing tag … Tags must be nested correctly (first tag on, last tag off): My Library Web Site HTML treats all white space as a single blank space; spacing can be controlled using tags, transparent gifs, or CSS … TAGattributevalueclosing tag

Standard HTML Tags ALSO: Text (paragraph) (break) (horizontal rule) Text Link (link) (image)

Standard HTML Attributes Attributes can be added to most tags. align=“value” (center, right, left) valign=“value”(top, middle, bottom) border=“value”(1,2,3... ) bgcolor=“value”; color=“value”(#0000FF; blue) background=“value”([image url]) width=“value”; height=“value”(150; 80%) alt=“value”([user defined]) The following are used in conjunction with CSS: id=“value”; class=“value”([user defined])

Basic Rules of CSS A CSS contains definitions made of a selector, property, and value p {font-size:12px;} Styles can be placed in an external style sheet or can be “in-line” “(inside the HTML). HTML tags can be given classes (.) and IDs (#). IDs should be unique to a page. Attributes “cascade,” which means that they can be inherited by selectors “lower” in the hierarchy

The Power of CSS CSS allows you to store much of the page formatting information in a separate file that you then simply point your HTML to Doing this allows you to keep your HTML code clean and lets you update many HTML files at once. CSS Zen Garden

Steps to Good Web Design Follow best practices (menus at left or top, interactive links) Avoid gimmicks (such as splash pages, scrolling marquees, animated gifs, music) Think access and usability first Make sites easy to maintain Keep things organized

Being able to “tag” documents effectively will become an increasingly important task for professional writers de/stm/

Examples of Bad Web Design Angelyn Staffing Superior Court of California PJP II – Vatican Archived Brown University Page Howard Systems SBs The Cheat Page

XML Patrick Janice Very Don't forget this weekend!

Web Design Tools Fangs Screen Reader Emulator: Firefox Web Developer Toolbar: NVU – free WYSIWYG Editor