This document provides an overview of key concepts for designing websites, including: 1. Display resolutions, fonts, images and HTML/XHTML basics are covered to ensure cross-browser compatibility and proper sizing of elements. 2. Common markup elements like headings, paragraphs, links and lists are described along with their semantic purpose. 3. Cascading Style Sheets (CSS) are introduced as the standard for controlling visual presentation, with the structure of CSS rules and three methods for applying styles explained.

1. Designing forthe Web Overview
CHAPTER

2. DISPLAY RESOLUTION
• The Current trend is that more and more computers are using a
screen size of 1024x768 pixels or more.
• Account for “Chrome”!
– Chrome refers to scroll bars and other items in a browser window that takes
space away from the viewable page. (Google/Yahoo toolbars)
– 750-775px wide is safe for a 800px wide browser window
– 900-960 wide is safe for a 1024px wide browser window
• Users will scroll! It has become more common for users to
understand that you have to scroll down the page to access certain
content.

3. FONTSFOR THE WEB
• Make sure that your fonts are cross platform compatible! This
means they should be common fonts found on windows/mac
machines.
• Refer to this list:
– http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
• Choose sans-serif fonts for large blocks of text. Sans-serif
fonts are easier to read on a monitor.
• Serif fonts are good for headings and short blocks of text.

4. COMMON WEB IMAGE FORMATS
• JPG - Joint Photographic Experts Group
– used for photorealistic images
– Use a lossy compression method. Some image data will be lost during
compression.
• GIF - Graphic Interchange Format
– used for logos and drawings with limited colors
• PNG – Portable Network Graphics
– PNG-8 – Like a gif image
– PNG-24 – Like a JPG image but supports transparency.
• Images for the web are usually 72dpi (dots per inch)

5. HTML – HYPERTEXT MARKUPLANGUAGE
• Elements –
– Basic structure for HTML markup as they tell the browser what to render.
– All elements usually have a start tag and an end tag.
– Made up of two basic properties: attributes and content.
• Attributes
– Name-value pairs written within the start tag of an element after the element
name. The value is usually enclosed in quotes.
– Ex: <a href=“http://www.com205.safiredesign.com”>Multimedia Apps </a>
• Continuity
– Make sure your elements stay in order!
– <p><b>This is bold!</p></b> is not correct.
– <p><b>This is Bold!</b></p> is correct.

6. XHTML
• XHTML – eXtensible Hypertext Markup Language
– HTML syntax conforms to XML specs.
– All elements and attributes must be in lowercase.
– All element tags must be closed.
– Ex: <p>Paragraph Tag</p>, <br />
• Structural or Semantic Markup
– Tags imply meaning. A list of items in written using one of the list
elements. Headings are denoted using the Heading elements,
etc…

7. HEADING ELEMENTS
• There are 6 heading elements included in HTML.
– <h1> Heading 1 </h1>
– <h2> Heading 2 </h2>
– <h3> Heading 3 </h3>
– <h4> Heading 4 </h4>
– <h5> Heading 5 </h5>
– <h6> Heading 6 </h6>
• Search engines place importance on the text between heading tags.
• Treated correctly regardless of style
• Convey meaning to the user.

8. INLINE STYLES
• Inline styles are used within the HTML document to add
style to the text. Choose strong and emphasized to
convey the most meaning.
– Bold - <b>Bolded Text</b>
– Underline - <u>Underlined Text</u>
– Italic - <i>Italic Text</i>
– Strong - <strong>Strong Text</strong>
– Emphasized - <em>Emphasized Text</em>

9. ANCHORS/LINKS
• Links allows us to point to files or specific sections of a
web page.
– <a href=“http://www.mywebpage.com”> My Page </a>
• Links have different states
– Link – normal state
– Hover – when moused over
– Visited – after link has been clicked

10. TEXT BLOCKS& QUOTES
• Paragraph Tag
– <p>Contents of the paragraph</p>
• Blockquote Tag
– <blockquote>Contents of a blockquote are usually
indented.</blockquote>
• Code Tag
– <code>The code tag is used to place example blocks of
demonstration code</code>

11. TABLES
• Tables are used to markup tabular data like calendars,
spreadsheets, charts, and schedules.
• Table-based layout - Using the grid system of a table to layout an
entire webpage. (Not standards compliant!)
<table cellspacing=“0” cellpadding=“0” border=“1”>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</table>

12. FORMS
• Forms are used to collect data from users.
• Since some forms can be complicated most designers still employ
the use of a table to align all the elements in a form.
<form method=“post” action=“”>
<label for=“email”>Email: </label>
<input type=“text” name=“email” id=“email” />
<input type=“submit” name=“submit” />
</form>

13. LISTS- ORDERED LISTS
• Ordered Lists are used for step by step instructions.
• List items can have either letters, numbers or roman numerals.
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
</ol>

14. LISTS– UNORDERED LISTS
• Unordered lists are used for generic lists of items.
• They can also be styled using CSS and used for navigation.
• Default style is a bulleted list.
• List shapes and style can be changed using CSS.
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>

15. LISTS- DEFINITION LISTS
• Definition lists are used to provide a relationship between
term/definition pairs.
• These can be easily styled using CSS.
<dl>
<dt>Term</dt>
<dd>Definition</dd>
<dt>Term</dt>
<dd>Defininition</dd>
</dl>

16. CSS– CASCADING STYLE SHEETS
• Cascading Style Sheets is the W3C Standard for controlling the
visual presentation of web pages.
• A style sheet consists of one or more rules that describe how page
elements should be displayed.
• A web page can have more than one style sheet attached to it.
• The cascade order provides a set of rules for resolving conflicts
between different style sheets. Styles with more weight take
precedence over styles with lower weight.
• CSS Styles can be applied to a document in 3 ways

17. CSSRULE STRUCTURE
• Every CSS rule has two parts
– the selector – specifies the parts of the document to which the
style should be applied
– the declaration – a combination of the CSS property and a value
for that property.
Declaration
Property Value
Selector
H1 { color: purple }

18. CSS– INLINE STYLES
• Inline Styles – style information is specified for an individual element
using the style attribute within that elements HTML tag.
<h1 style=“color: purple; font-size: 20px;”> Purple Heading</h1>

19. CSS– EMBEDDED STYLES
• Embedded Style Sheets – placed at the top of an HTML document
inside the Style element which must be placed within the head
portion of the document.
<style type=“text/css”>
h1 {
color: purple;
font-size: 20px;
}
</style>

20. CSS– EXTERNAL STYLE SHEETS
• External Style Sheets – style rules that are stored in a
separate document and referenced from an HTML
document in one of two ways.
– <link rel=“stylesheet” type=“text/css” href=“mystyles.css” />
– <style type=“text/css”
@import url(mystyles.css);
</style>