0	index
1	Designing for a Variety of Browsers
2	Other Browsers
3	Design Strategies
4	Good HTML Habits
5	Design for a Variety of Displays
6	Fixed vs Flexible Design
7	HTML
8	Containers
9	Document Structure
10	Tags
11	Tags (Continued)
12	Standalone Tags
13	Attributes
14	Attribute Examples
15	Nesting HTML Tags
16	Nesting Examples
17	Information Browsers Ignore
18	Resource Book
	outline

created using slideshow.cgi by Andy Harris

CSCI N241 Web Design: HTML

1. Designing for a Variety of Browsers

Dominate browsers are Netscape Navigator and Microsoft Internet Explorer (IE)
These account for approximately 90% of browser use today

CSCI N241 Web Design: HTML

2. Other Browsers

America Online browsers - uses 7 possible browsers, some lacking all but the minimal HTML support.
WebTV - uses a specialized browser for viewing web pages, but unable to display frames, Java, JavaScript, ActiveX or anything that requires a plug-in.
Lynx - text-only browser, lowest common denominator, is important to partially sighted users who browse with a speech device.

CSCI N241 Web Design: HTML

3. Design Strategies

Lowest common denominator design
Current version design
Splitting the difference
Something for everyone

CSCI N241 Web Design: HTML

4. Good HTML Habits

Write good HTML
Know your audience
Consider your site's purpose
TEST! TEST! TEST!

CSCI N241 Web Design: HTML

5. Design for a Variety of Displays

Unknown monitor resolutions
Standard monitor sizes and resolutions
Monitor color issues

CSCI N241 Web Design: HTML

6. Fixed vs Flexible Design

Flexible design by default - allows resizing and adapting to various window sizes
- is closer to the spirit and the nature of the medium
Fixed design - gives the designer more control of the page's dimensions
-the page looks the same regardless of the monitor size

CSCI N241 Web Design: HTML

7. HTML

Is a document containing text with embedded tags, which provide instructions for the structure, appearance and function of the contents.
HTML is not a true program language
A document containing two pieces
-head
-body

CSCI N241 Web Design: HTML

8. Containers

Most HTML tags are containers, they have a beginning tag and an end tag.
Text within the tags will follow the tag's instructions
EXAMPLE:
--The weather is gorgeous today.
RESULT:
-- The weather is gorgeous today.

CSCI N241 Web Design: HTML

9. Document Structure

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
Contents of Document
</BODY>
</HTML>

CSCI N241 Web Design: HTML

10. Tags

<HTML>;�</HTML>; is placed at the beginning and end of the document. This tells the browser that the entire document is composed in HTML
<HEAD>�</HEAD> defines the head portion of the document that contains information about the document
<TITLE>�</TITLE> specifies the title of the document

CSCI N241 Web Design: HTML

11. Tags (Continued)

An end tag contains the same name as the start tag, but is proceeded by a slash (/)
It is the "OFF" switch for the tag.

CSCI N241 Web Design: HTML

12. Standalone Tags

The linebreak and the horizontal rule <hr> provide information about a document and don't affect its displayed contents

CSCI N241 Web Design: HTML

13. Attributes

Attributes are added within a tag to extend or modify the tag's action.
You can add multiple attributes within a single tag.
Tag attributes, if any, belong after the tag name, each separated by one or more spaces.
Most attributes take values which follow an equal (=) sign

CSCI N241 Web Design: HTML

14. Attribute Examples

<BODY BGCOLOR="#000000">

CSCI N241 Web Design: HTML

15. Nesting HTML Tags

Tags can be applied to content containing other HTML tags giving you multiple effects on a single document. This is nesting and to do properly, both the beginning and end tags of the enclosed tag must be completely contained within the beginning and end tags of the applied tag.

CSCI N241 Web Design: HTML

16. Nesting Examples

The weather is fabulous today
RESULT:
--The weather is fabulous today.
A common mistake is to overlap the tags
EXAMPLE:
-- The weather is fabulous today

CSCI N241 Web Design: HTML

17. Information Browsers Ignore

Line breaks - line returns are ignored. Text will wrap until it encounters a or
Tabs and multiple spaces
Unrecognized tags
Text in Comments -

CSCI N241 Web Design: HTML

18. Resource Book

Web Design in a Nutshell by Jennifer Niederst

outline

Designing for a Variety of Browsers

Dominate browsers are Netscape Navigator and Microsoft Internet Explorer (IE)
These account for approximately 90% of browser use today

Other Browsers

America Online browsers - uses 7 possible browsers, some lacking all but the minimal HTML support.
WebTV - uses a specialized browser for viewing web pages, but unable to display frames, Java, JavaScript, ActiveX or anything that requires a plug-in.
Lynx - text-only browser, lowest common denominator, is important to partially sighted users who browse with a speech device.

Design Strategies

Lowest common denominator design
Current version design
Splitting the difference
Something for everyone

Good HTML Habits

Write good HTML
Know your audience
Consider your site's purpose
TEST! TEST! TEST!

Design for a Variety of Displays

Unknown monitor resolutions
Standard monitor sizes and resolutions
Monitor color issues

Fixed vs Flexible Design

Flexible design by default - allows resizing and adapting to various window sizes
- is closer to the spirit and the nature of the medium
Fixed design - gives the designer more control of the page's dimensions
-the page looks the same regardless of the monitor size

HTML

Is a document containing text with embedded tags, which provide instructions for the structure, appearance and function of the contents.
HTML is not a true program language
A document containing two pieces
-head
-body

Containers

Most HTML tags are containers, they have a beginning tag and an end tag.
Text within the tags will follow the tag's instructions
EXAMPLE:
--The weather is gorgeous today.
RESULT:
-- The weather is gorgeous today.

Document Structure

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
Contents of Document
</BODY>
</HTML>

Tags (Continued)

An end tag contains the same name as the start tag, but is proceeded by a slash (/)
It is the "OFF" switch for the tag.

Standalone Tags

The linebreak and the horizontal rule <hr> provide information about a document and don't affect its displayed contents

Attributes

Attributes are added within a tag to extend or modify the tag's action.
You can add multiple attributes within a single tag.
Tag attributes, if any, belong after the tag name, each separated by one or more spaces.
Most attributes take values which follow an equal (=) sign

Attribute Examples

<BODY BGCOLOR="#000000">

Nesting HTML Tags

Tags can be applied to content containing other HTML tags giving you multiple effects on a single document. This is nesting and to do properly, both the beginning and end tags of the enclosed tag must be completely contained within the beginning and end tags of the applied tag.

Nesting Examples

The weather is fabulous today
RESULT:
--The weather is fabulous today.
A common mistake is to overlap the tags
EXAMPLE:
-- The weather is fabulous today

Information Browsers Ignore

Line breaks - line returns are ignored. Text will wrap until it encounters a or
Tabs and multiple spaces
Unrecognized tags
Text in Comments -

Resource Book

Web Design in a Nutshell by Jennifer Niederst