Creating Web Documents

1
Creating Web Documents

• Drawing
• Web usage, Site design Page Design
• HTML Lists, Tables
• Share experiences
• Homework Complete ftp upload e-mail TA
• Read in HTML text on tables

2
Free hand drawing

• Photo Shop
• Paint Shop Pro

3
Web Increasingly World Wide by internetnews.com
Staff

• January 29, 2001 The Internet was created by
  Americans, but they are no longer in the
  majority, according to a study by WebSideStory,
  the company behind HitBox.
• The survey found that 54.95 percent of
  Web-users are non-American, the first such
  finding ever. The largest group of non-American
  surfers came from Germany (5.6 percent), followed
  by Canada (5 percent), South Korea (4.6percent)
  and Japan (4.3 percent).
• By comparison, the population of America is
  estimated at just over 275 million, Canada's at
  31 million, Germany's at 82 million, South
  Korea's at 47 million and Japan's at 126 million.
  
• As the Net develops, English will cease to
  be the dominant language, with Chinese, French,
  German and other languages generating webs within
  webs, only available to those who speak the
  language and thereby have an understanding of the
  culture.

4
Web usage

• THE COMMERCE Department report, set for release
  Tuesday (5 Feb 2002),
  found that 143 million Americans, or 54 percent
  of the country, were using the Internet as of
  September. The number was up 26 percent from a
  year earlier. The government numbers are slightly
  higher than many private-sector estimates.
  Nielsen/NetRatings, for instance, estimated that
  Internet usage hit 115.2 million in October, up
  15 percent from a year earlier.
• Nielsen//NetRatings data from May 2001 shows that
  in the US, women now make up 52 of the total
  at-home Web population, and the Internet
  population now mirrors the offline population.
  This trend is being replicated at various rates
  worldwide, but most rapidly in
  Asia-Pacific where in Australia, women now
  make up 48 of the Internet population, followed
  by New Zealand (46), South Korea (45), Hong
  Kong (44), Singapore (42), and Taiwan (41)

5
Extra credit opportunity

• Find source and summarize with current (2003)
  data.
• Post in General Discussion forum.
• Any predictions?

6
Site Design concepts

• Chunking information
• Dividing material into small, coherent pieces
  (chunks) of information
• Shallow versus deep organization
• fewer pages, each with many topics versus many
  layers of menus, requiring the user to click
  repeatedly to get to topic
• Hierarchy of importance
• establishing priorities, may also involve general
  to specific
• Splash screen
• aka a site cover, provide aesthetic enticing
  experience or be viewed as needless delay
• Intranet versus internet
• internal to organization versus
  published/available to Web

7
Suggestions

• Design site from users viewpoint, which may or
  may not be how the company/organization is
  organized.
• Be aware that linear narrative is a powerful way
  to organize material, but long linear text does
  not make best use of the Web.
• Be aware also that Web can be viewing mechanism
  and distribution of information meant to be
  printed for off-line reading.

8
Suggestions, continued

• Make each page / hyperlink jump provide
  some/substantial information
• Consider (roughly) ratio of
• information to
• other things on the page decoration unrelated to
  substance or mechanics of site itself.
• Edward Tufte refers to data junk.

9
Web site components

• Mechanism for user feedback
• E-mail, possibly multiple e-mail addresses
• Forms
• Phone numbers / addresses
• Identification of site owner, author, dates,
  special instructions
• Search site capabilities
• Links to other sites

10
Internal links

• You can put in a link to a section of the same
  file
• lta namedetailsgt stuff lt/agt
• lta hrefdetailsgtGo to stuff lt/agt
• The HTML for linking to another HTML file on your
  site is
• lta hreffilename.htmgt More lt/agt
• File in same folder as this HTML page
• lta href/subfolder/filename.htmgtMore lt/agt
• File in subfolder in the folder of this page
• lta href../folder/filename.htmgt more lt/agt
• Go up a level and then back down for file

11
Page Design

• People scan In general, they dont read.
• Your design can help people grasp the
  organization and significance of information.
• Avoid too wide columns to encourage scanning and
  also avoid horizontal scrolling and problems in
  printing.

12
Page Design concepts

• Design grid (could also be viewed as a site
  design concept making the design layout
  consistent across all pages)
• basic layout, blocks of text and images
• Visual hierarchy
• making the design emphasize important elements
  and help visitor navigate the page/site.
• above the fold
• from newspapers here, above the typical scroll
  point
• Display real estate
• area available for your material

13
Discuss experiments viewing Web pages
14
HTML tables

• Tables used for presentation of tabular data AND
  layout. Anything can go in a cell ( table datum)
  including an image.
• lttable border"1"gt
• lttrgt
• lttdgtnbsp lt/tdgt
• lttdgt . lt/tdgt lt/trgt
• lttrgt
• lttdgt lt/tdgt
• lt/trgt
• lt/tablegt

15
Class exercise 1

• Create HTML file with table, 5 columns
• M T W R F
• Note R is the catalog abbreviation for Thursday
• In rows, write the classes you are taking

16
Class exercise 2

• Enhance the table to indicate times. There will
  be empty slots. Add a column (on the left) that
  indicates the times.

17
Table layout example

• Picture next to text. Layout is set at 500
  pixels.
• lttable width500gt
• lttrgt
• lttdgt ltimg srcbird.jpggt lt/tdgt
• lttdgt This is a bird and on and on and on.lt/tdgt
• lt/trgt
• lttrgt
• lttdgtltimg src"frog.jpg"gtlt/tdgtlttdgtThis is a frog
  lt/tdgt
• lt/trgt
• lt/tablegt

18
Class exercise 3a 3b

• a.
• Acquire at least 3 images.
• Use a table to layout the page with images on the
  left and text on the right.
• b.
• Alter text on the right and then text on the
  left.

19
More on tables

• Consider tables within tables (nesting)
• bgcolor and background
• cellpadding
• align
• border, bordercolor, bordercolordark,
  bordercolorlight

20
Class exercise 4

• Use tables within tables to refine your schedule
• Invent another use for tables within tables

21
HTML lists

• Unordered lists
• ltulgt ltligt lt/ligt ltligt lt/ligt lt/ulgt
• Ordered lists
• ltolgt ltligt lt/ligt ltligt lt/ligt lt/olgt
• You need to consider content when deciding
  whether or not order matters in a list.

22
Class exercise 5

• Consider your schedule (again). Use lists of
  lists to display your classes. Note you may use
  ul at the top level and include a day
• ltulgt
• ltligt Monday
• ltolgt
• ltligt lt/ligt ltligt . lt/ligt lt/olgt
• lt/ligt
• Etc.

23
Homework

• Read in text on tables and lists. Experiment
  with attributes (extra information you can put
  within the tag).
• Sign on to CourseInfo
• to check on status of server.
• Review PowerPoint charts (members.bellatlantic.net
  /vze2s839)
• Read other notes (Course Documents)
• Question to ponder for next class is a picture
  worth 1000 words?