Creating a Web Page o
Creating a Web Page
An Intro
The first phase of the web: the time
of experimentation
•In the early days, most websites were run by webmasters
who did a bit of everything.
•Web authoring with simple hand-coding tools - no special
features to deal with HTML.
•Hobbyists learned HTML by playing around with web sites in
their spare time.
•There wasn't a lot of money in the web. People worked on
web sites because they loved it.
The second phase of the web: big
business overnight.
•Web teams became larger, more structured, and more
fragmented.
•Information architects worked on overall site architecture.
•Visual designers worked on visual designs.
•Production people did the actual HTML code.
Specialized tools for web authoring
began appearing on the market.
Visual tools focused on giving people a more visual way to
work with HTML - WYSIWYG
Dreamweaver - new ways to help people work
visually with technologies such as cascading style
sheet (CSS) - offered more assistance with new
technologies.
Hand-coding tools focused on making hand coding more
efficient by adding special features for HTML and other web
technologies.
HomeSite - improve the efficiency of coders offered more control
The third phase of the web: Isn't
there a better way?
•Corporations still want websites; they just want to spend a lot
less money.
•Design shops still want to do business; need to find a way to
be radically more productive than before.
•Internal web teams still need to get their jobs done; they just
have to make do with less.
The emergence of hybrid tools
Dreamweaver MX - an environment for both hand-coders and
visual authors
The future...
The web will only continue to grow, evolve,
and change.
The the web will become more of a
collaborative communication medium.
Web authoring will become increasingly
componentized.
Keep It Simple
One of the keys to a good website is simplicity. You've heard of
the "KISS" principle? Keep It Simple Silly. This applies doubly
for websites.
It is nice to be able to create frames and tables and font sizes
and animated GIFs, but if you have every possible HTML
feature on every page, it's highly likely that your readers are
going to be overwhelmed rather than impressed.
Remember, just because you CAN create an effect, doesn't
mean you SHOULD. Ask yourself: what value am I adding with
this technique? Is this the best way to communicate what I
want to say?
Simple Doesn't Equal Boring
Simple doesn't necessarily mean dull and boring. Lots of
people confuse fancy effects with effective
communication.
What keeping it simple really means is this: think about
how people will be using your pages and present your
information to them in a way that matches their needs
and expectations. Use technology and effects where
appropriate and where they make for more effective
communication.
Clean design + Good use of technology = A Good
Web site
The Purpose
• Plan carefully and spend time on this part
• Good communication requires clarity of
purpose
– make friends
– make a point
– collect links
– recruit members for …
– publish you résumé
– provide information for your course
• If on campus, what are the policies?
The Audience
• Who will read your page?
• Who do you want to attract to your page?
• These greatly affect
– the level of language
– the style of language
– the design
Know Your Audience
You aren't creating your Web work in a
vacuum or just for yourself! If you were, you'd
keep it on your own computer. You're
publishing a Web page because you expect
someone to stop by and visit it. That someone
is your audience.
The more you understand your audience, the
more effective you can make your site.
Know Your Audience
Are your readers on slow modems?
Then you'd better be extra careful about page
Are they expecting to hear your band's music clips? size.
Then you'd better think about an audio format.
Are they quilters?
Then blood red and black
might not be your best color
choices.
Are they
hard core
Then yougamers?
might want to avoid
pastels and soft-edged
Definition of a good Web site:
A site that delivers
quality content
for its intended
audience
and does so with
Five Fingers
Making your site easy to navigate is critical.
Lots of small factors add up to create easy
paths through your site. For example, one
thing you can do is keep the number of
"next step" choices small so that people
don't become lost in a long list of options.
Did you know that the average human mind
sees five or fewer items as one group, but
when it encounters more than five items it has
to divide them into smaller sub-groups to
process them? Try to keep your selections
arranged in groups of five or less.
less
Three Clicks
Another way to help your Web site be a good experience
for your readers is to make information no more than
three clicks away. One of the fastest ways to frustrate
readers is to make them click ... and click ... and
click... and click .. and click ... and ... to find the
information they want.
Additionally, when you make readers burrow deep into
your site to find content they often become lost and
never make it back to your home page. When people
get lost, they tend to surf off someplace else instead
of fighting their way around a site.
30 Second Attention Spans
• When someone comes into a Web page they should be able
to easily see what options they have and select one quickly.
As a rule of thumb, it should take less than 30 seconds for a
reader to load your page and be able to decide what to do
next. If it takes longer than that, you'll start to lose your
audience.
• Make sure your pages are a reasonable size and don't take
forever to download. If many of your readers are on
modems, try to keep the total page size (that means all
graphics plus HTML file added together) under 30 to 45K.
• Make sure your page layout is clear enough that with a quick
glance your readers can grasp your navigation scheme and
understand how to select a "next step" option.
Words Matter
Remember your fifth grade English teacher? Remember
how she told you that good spelling and grammar were
important? She was right.
The Web has far too many pages whose creators forgot the
basics. Just because your Web page is online doesn't mean
you can toss out all those rules that govern written
communication. Just because it is online doesn't mean you
can forget to proofread it. Take a deep breath and spend a
few extra minutes with your text. Your readers will thank you
for it.
Balance, Balance
Balance is a big part of good Web design.
Balance between text and graphics. Unless the content
dictates an all-text or an all-graphics site, use common sense and
aesthetic judgement so that one doesn't overwhelm the other.
Balance between download time and page content. Of
course you want beautiful pages, but you need to balance the
content of the page with the reality that your readers are out there
logging on through a modem. Is that photo of your wedding trip
really worth a 120 second wait?
Balance between background and foreground. Most of us
print things on white or another solid color paper. On the Web, it's
pretty exciting to be able to create textures and backgrounds, but
it's also easy to let the background overwhelm the content in front.
Frames in Moderation
Frames can be a great addition to your site. Like all Web
features, however, be sure you don't overuse them!
If you want to create a navigational structure that will
always be visible, such as a table of contents, frames
are the way to go.
But frames aren't for every use. For example, if you are
looking to display information in columns or rows, then
tables are the better match.
Keep Learning
Creating Web pages is a continual learning process.
Getting up a first version of your site is just the beginning!
The technology and tools are constantly evolving and our
understanding of how people use the online medium is
changing. To create good websites you can't just rest on
your laurels.
Look at other sites. If you want to be a great novelist you read
great novels. If you want to be a great screenwriter you watch
great movies. By the same token, if you want to design a great
Web site you need to look at other Web sites. As you look at sites,
notice what does and doesn't seems to work.
View the source. When you see something you like, use your
view source function in your browser to see how the effect was
done. It's amazing what you can learn by looking behind the
scenes.
Web Publishing Process
•
•
•
•
•
•
•
Define the purpose
Define the audience
Choose an HTML editor
Make design decisions
Create the page
Test the page
Publish the page
The Editor
• Text editors - HTML is ASCII text
• Word processors have
“Save as HTML” feature
• HTML editors - can click on the tags you want
– Lightning, HomeSite, HTML editor
• WYSIWYG editors -special programs
– Netscape Composer
• Site managers designed
to manage multi document Web sites
– NetObjects Fusion
http://www.macromedia.com/software/dreamweave
r/productinfo/tutorials/
What is JavaScript?
JavaScript is NOT Java. JavaScript is a basic scripting language
that allows Web authors to create dynamic pages that react to user
interaction. In other words, JavaScript is a language
that lets you make your pages interact with your
readers and respond to what they do.
JavaScript is based loosely on the Java programming language.
JavaScript programs are contained within the HTML code of the
Web page and are interpreted by the browser as it its read in
contrast to Java programs that are downloaded separately from the
HTML page. JavaScript is a "safe" programming language, one
that cannot access any system controls or hardware on a user's
computer.
http://javascript.internet.com/
HTML
• HTML = hypertext markup language
– tags - special formatting symbols
opening and closing tags
ex. …
turn bold on and off
ex. … turn a heading on and off
• Works cross-platform
• Identifies the parts of the text
• Standard maintained by W3C (World Wide
Web Consortium)
W3C: www.w3.com
HTML
• Browsers interpret HTLM code
• Different browsers may interpret the codes
differently
– cascading style sheets
style sheet = a listing of what each tag is to do
• Word processors
– have hidden codes and style sheets
– may be read only if a compatible program is
available
The Design
• Knowing how to use HTML does not guarantee
a great looking page
• Rules of thumb
– keep page length to 1 - 3 screens
– (in 2001) assume users view on a 15” monitor with
800x600 resolution
– be consistent with colors, background, font, and
style
– design for your audience
– KIS - “keep it simple”
The Creation
• Global structure
– head - title and show relationship to other
files
• what appears in the window’s title bar
– body - what appears in the browser window
document title
main part of the HTML document
Creating the Body
• Background
– color-
– graphic -
• Font
– color -
– face -
Color Codes: www.htmlgoodies.com/basic_cl.html
Creating the Body
• Headings - six, 1 is largest and 6 is smallest
– appearance depends upon browser’s formats
- typically, is 10 point, bold
• Spaces and paragraph breaks
– extra consecutive spaces ignored
“A
B” is interpreted as “A B”
– the Enter key does NOT give a new line
go to next line - (no closing tag)
skip a line -
Creating the Body
• Lists
– bulleted - (unordered list)
– numbered - (ordered list)
– menu -
Each item in the list begins with , is indented
and begins on a new line.
– alone gives unindented bulleted lists
Creating the Body
• Character attributes
– bold -
– italics -
– underline -
• Signing your page
– provide a contact and date last modified
This adds a preceding blank line and
italicizes the text.
Creating the Body
• Hyperlinks
– anchor text element + reference attribute
screen text
– absolute - a complete URL
– relative - link to a local Web page
– mail to - an email address
• Images
– use GIF or JPEG graphics
The Test
• Always test the page and proof read it
• Use “File Open” and “Browse” option
– typos
– missing < or >
– missing / to end a tag
– missing the entire end tag
– missing quotation marks
Coming Soon - XML
• Extensible Markup Language (XML)
– adds the ability to create your own tags
– permits more exact searching
• XHTML
– defined using XML
– it is extensible
– tags are case-sensitive
– all tags must have an end tag
An Intro
The first phase of the web: the time
of experimentation
•In the early days, most websites were run by webmasters
who did a bit of everything.
•Web authoring with simple hand-coding tools - no special
features to deal with HTML.
•Hobbyists learned HTML by playing around with web sites in
their spare time.
•There wasn't a lot of money in the web. People worked on
web sites because they loved it.
The second phase of the web: big
business overnight.
•Web teams became larger, more structured, and more
fragmented.
•Information architects worked on overall site architecture.
•Visual designers worked on visual designs.
•Production people did the actual HTML code.
Specialized tools for web authoring
began appearing on the market.
Visual tools focused on giving people a more visual way to
work with HTML - WYSIWYG
Dreamweaver - new ways to help people work
visually with technologies such as cascading style
sheet (CSS) - offered more assistance with new
technologies.
Hand-coding tools focused on making hand coding more
efficient by adding special features for HTML and other web
technologies.
HomeSite - improve the efficiency of coders offered more control
The third phase of the web: Isn't
there a better way?
•Corporations still want websites; they just want to spend a lot
less money.
•Design shops still want to do business; need to find a way to
be radically more productive than before.
•Internal web teams still need to get their jobs done; they just
have to make do with less.
The emergence of hybrid tools
Dreamweaver MX - an environment for both hand-coders and
visual authors
The future...
The web will only continue to grow, evolve,
and change.
The the web will become more of a
collaborative communication medium.
Web authoring will become increasingly
componentized.
Keep It Simple
One of the keys to a good website is simplicity. You've heard of
the "KISS" principle? Keep It Simple Silly. This applies doubly
for websites.
It is nice to be able to create frames and tables and font sizes
and animated GIFs, but if you have every possible HTML
feature on every page, it's highly likely that your readers are
going to be overwhelmed rather than impressed.
Remember, just because you CAN create an effect, doesn't
mean you SHOULD. Ask yourself: what value am I adding with
this technique? Is this the best way to communicate what I
want to say?
Simple Doesn't Equal Boring
Simple doesn't necessarily mean dull and boring. Lots of
people confuse fancy effects with effective
communication.
What keeping it simple really means is this: think about
how people will be using your pages and present your
information to them in a way that matches their needs
and expectations. Use technology and effects where
appropriate and where they make for more effective
communication.
Clean design + Good use of technology = A Good
Web site
The Purpose
• Plan carefully and spend time on this part
• Good communication requires clarity of
purpose
– make friends
– make a point
– collect links
– recruit members for …
– publish you résumé
– provide information for your course
• If on campus, what are the policies?
The Audience
• Who will read your page?
• Who do you want to attract to your page?
• These greatly affect
– the level of language
– the style of language
– the design
Know Your Audience
You aren't creating your Web work in a
vacuum or just for yourself! If you were, you'd
keep it on your own computer. You're
publishing a Web page because you expect
someone to stop by and visit it. That someone
is your audience.
The more you understand your audience, the
more effective you can make your site.
Know Your Audience
Are your readers on slow modems?
Then you'd better be extra careful about page
Are they expecting to hear your band's music clips? size.
Then you'd better think about an audio format.
Are they quilters?
Then blood red and black
might not be your best color
choices.
Are they
hard core
Then yougamers?
might want to avoid
pastels and soft-edged
Definition of a good Web site:
A site that delivers
quality content
for its intended
audience
and does so with
Five Fingers
Making your site easy to navigate is critical.
Lots of small factors add up to create easy
paths through your site. For example, one
thing you can do is keep the number of
"next step" choices small so that people
don't become lost in a long list of options.
Did you know that the average human mind
sees five or fewer items as one group, but
when it encounters more than five items it has
to divide them into smaller sub-groups to
process them? Try to keep your selections
arranged in groups of five or less.
less
Three Clicks
Another way to help your Web site be a good experience
for your readers is to make information no more than
three clicks away. One of the fastest ways to frustrate
readers is to make them click ... and click ... and
click... and click .. and click ... and ... to find the
information they want.
Additionally, when you make readers burrow deep into
your site to find content they often become lost and
never make it back to your home page. When people
get lost, they tend to surf off someplace else instead
of fighting their way around a site.
30 Second Attention Spans
• When someone comes into a Web page they should be able
to easily see what options they have and select one quickly.
As a rule of thumb, it should take less than 30 seconds for a
reader to load your page and be able to decide what to do
next. If it takes longer than that, you'll start to lose your
audience.
• Make sure your pages are a reasonable size and don't take
forever to download. If many of your readers are on
modems, try to keep the total page size (that means all
graphics plus HTML file added together) under 30 to 45K.
• Make sure your page layout is clear enough that with a quick
glance your readers can grasp your navigation scheme and
understand how to select a "next step" option.
Words Matter
Remember your fifth grade English teacher? Remember
how she told you that good spelling and grammar were
important? She was right.
The Web has far too many pages whose creators forgot the
basics. Just because your Web page is online doesn't mean
you can toss out all those rules that govern written
communication. Just because it is online doesn't mean you
can forget to proofread it. Take a deep breath and spend a
few extra minutes with your text. Your readers will thank you
for it.
Balance, Balance
Balance is a big part of good Web design.
Balance between text and graphics. Unless the content
dictates an all-text or an all-graphics site, use common sense and
aesthetic judgement so that one doesn't overwhelm the other.
Balance between download time and page content. Of
course you want beautiful pages, but you need to balance the
content of the page with the reality that your readers are out there
logging on through a modem. Is that photo of your wedding trip
really worth a 120 second wait?
Balance between background and foreground. Most of us
print things on white or another solid color paper. On the Web, it's
pretty exciting to be able to create textures and backgrounds, but
it's also easy to let the background overwhelm the content in front.
Frames in Moderation
Frames can be a great addition to your site. Like all Web
features, however, be sure you don't overuse them!
If you want to create a navigational structure that will
always be visible, such as a table of contents, frames
are the way to go.
But frames aren't for every use. For example, if you are
looking to display information in columns or rows, then
tables are the better match.
Keep Learning
Creating Web pages is a continual learning process.
Getting up a first version of your site is just the beginning!
The technology and tools are constantly evolving and our
understanding of how people use the online medium is
changing. To create good websites you can't just rest on
your laurels.
Look at other sites. If you want to be a great novelist you read
great novels. If you want to be a great screenwriter you watch
great movies. By the same token, if you want to design a great
Web site you need to look at other Web sites. As you look at sites,
notice what does and doesn't seems to work.
View the source. When you see something you like, use your
view source function in your browser to see how the effect was
done. It's amazing what you can learn by looking behind the
scenes.
Web Publishing Process
•
•
•
•
•
•
•
Define the purpose
Define the audience
Choose an HTML editor
Make design decisions
Create the page
Test the page
Publish the page
The Editor
• Text editors - HTML is ASCII text
• Word processors have
“Save as HTML” feature
• HTML editors - can click on the tags you want
– Lightning, HomeSite, HTML editor
• WYSIWYG editors -special programs
– Netscape Composer
• Site managers designed
to manage multi document Web sites
– NetObjects Fusion
http://www.macromedia.com/software/dreamweave
r/productinfo/tutorials/
What is JavaScript?
JavaScript is NOT Java. JavaScript is a basic scripting language
that allows Web authors to create dynamic pages that react to user
interaction. In other words, JavaScript is a language
that lets you make your pages interact with your
readers and respond to what they do.
JavaScript is based loosely on the Java programming language.
JavaScript programs are contained within the HTML code of the
Web page and are interpreted by the browser as it its read in
contrast to Java programs that are downloaded separately from the
HTML page. JavaScript is a "safe" programming language, one
that cannot access any system controls or hardware on a user's
computer.
http://javascript.internet.com/
HTML
• HTML = hypertext markup language
– tags - special formatting symbols
opening and closing tags
ex. …
turn bold on and off
ex. … turn a heading on and off
• Works cross-platform
• Identifies the parts of the text
• Standard maintained by W3C (World Wide
Web Consortium)
W3C: www.w3.com
HTML
• Browsers interpret HTLM code
• Different browsers may interpret the codes
differently
– cascading style sheets
style sheet = a listing of what each tag is to do
• Word processors
– have hidden codes and style sheets
– may be read only if a compatible program is
available
The Design
• Knowing how to use HTML does not guarantee
a great looking page
• Rules of thumb
– keep page length to 1 - 3 screens
– (in 2001) assume users view on a 15” monitor with
800x600 resolution
– be consistent with colors, background, font, and
style
– design for your audience
– KIS - “keep it simple”
The Creation
• Global structure
– head - title and show relationship to other
files
• what appears in the window’s title bar
– body - what appears in the browser window
document title
main part of the HTML document
Creating the Body
• Background
– color-
– graphic -
• Font
– color -
– face -
Color Codes: www.htmlgoodies.com/basic_cl.html
Creating the Body
• Headings - six, 1 is largest and 6 is smallest
– appearance depends upon browser’s formats
- typically, is 10 point, bold
• Spaces and paragraph breaks
– extra consecutive spaces ignored
“A
B” is interpreted as “A B”
– the Enter key does NOT give a new line
go to next line - (no closing tag)
skip a line -
Creating the Body
• Lists
– bulleted - (unordered list)
– numbered - (ordered list)
– menu -
Each item in the list begins with , is indented
and begins on a new line.
– alone gives unindented bulleted lists
Creating the Body
• Character attributes
– bold -
– italics -
– underline -
• Signing your page
– provide a contact and date last modified
This adds a preceding blank line and
italicizes the text.
Creating the Body
• Hyperlinks
– anchor text element + reference attribute
screen text
– absolute - a complete URL
– relative - link to a local Web page
– mail to - an email address
• Images
– use GIF or JPEG graphics
The Test
• Always test the page and proof read it
• Use “File Open” and “Browse” option
– typos
– missing < or >
– missing / to end a tag
– missing the entire end tag
– missing quotation marks
Coming Soon - XML
• Extensible Markup Language (XML)
– adds the ability to create your own tags
– permits more exact searching
• XHTML
– defined using XML
– it is extensible
– tags are case-sensitive
– all tags must have an end tag