Department of
Computer Science
School of Engineering
University of Virginia
Charlottesville, VA
Jason O. Watson
Curtis M. Buyrn
CS Webmasters
webman@cs.virginia.edu
http://www.cs.virginia.edu/~webman
University of Virginia
Overview
• Web browsers-- Web history/Netscape/Internet
Explorer/Lynx/ difference in various platforms.
• Web Resources-- good sites for learning HTML/books
• Searches-- Altavista/Yahoo!/Lycos/etc. Having a search
strategy.
• Good HTML Conventions-- frames/tables/images
• Web team management-- the CS web team/ practices and
policies/ automation of tasks
• Scanning-- availability/procedures/problems/OCR
• Photoshop-- photos/graphics/filters/image
properties/toolbar
University of Virginia
The Web
• What is it?-- The World Wide Web (known as
“WWW”, “Web” or “W3”) is the universe of
network-accessible information, the embodiment
of human knowledge. (http://www.w3.org)
• Effect on Computing-- Millions of sites around the
world. Billions of dollars are made buy
businesses each year. These numbers continue
increase.
University of Virginia
Electronic Commerce
• Forrester Research, Inc.
projects that in the United
States, intercompany trade
of hard goods over the
Internet will hit $43 billon
dollars in 1998 and will
surge to $1.3 trillion by
2003--an annual growth
rate of 99%.
University of Virginia
The Web
• Some terms-- HTML (hyper-text mark-up
language)
• HTTP (hyper-text transfer protocol)
• CGI (common gateway interface)
• SSI (server side includes)
• URL (uniform resource locator) a.k.a “A link”
• JPEG (joint photographic experts group) image
format of choice
• OCR (optical character recognition)
• FTP (file transfer protocol)
University of Virginia
Web Browsers
• History-- First http (hyper-text transfer protocol)
servers appear in 1991. There were 50 by January
1993. Mosaic, the first widely successful browser
is introduced in early 1993. By the end of that
year, there were over 500 http servers in the
world. By the middle of 1994, there were over 1500
servers. Today there are millions of sites world
wide.
University of Virginia
Web Browsers - Netscape
• Netscape-- the webteam’s browser of choice.
• Estimates are roughly 40-50% of all web users.
• Founded by Marc Andreessen and Jim Kelly- early
‘90s.
• Versions 3.0+ support Java and Javascript
• Available for download at
http://home.netscape.com
• UNIX, Windows, Macintosh
• Different browsers support different features
University of Virginia
Web Browsers- IE
• Microsoft’s Internet Explorer-- attempt to break
into the market held by Netscape
• Has different features than Netscape Navigator,
ex., different tags, appearance, etc.
• Available from http://www.microsoft.com/ and
from most Microsoft software products.
• Java and Javascript supported after version 2
• Macintosh, Windows
University of Virginia
Web Browsers
• Lynx-- text only browser.
• Faster: there are no images, applets, sounds, etc.
to download.
• Does not support Java or Javascript.
• UNIX based.
• Available on the CS machines-- just type lynx
from the UNIX prompt.
University of Virginia
Web Resources
• http://www.wc3.org/ The definitive source for all things HTML
• http://www.webmonkey.com/ Wired Magazine’s multiple tutorials
on web technology (from basic to the most advanced)
• http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
Beginner’s guide to HTML
• http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html
explanation of server side includes.
• http://www.cs.cmu.edu/~tilt/cgh/-- CMU’s guide to composing good
HTML
• HTML for Dummies-- one of the best quick reference books on
HTML out there.
University of Virginia
Searches
• Strategy--know what you are searching for.
Having a plan ahead of time helps to save time.
Good searches can take time.
• Altavista (http://altavista.com)-- great for single
domain searches. Very powerful search engine.
• Yahoo(http://www.yahoo.com)-- One of the most
popular sites on the web. Organized by
categories.
• Lycos(http://www.lycos.com)
• Infoseek(http://www.infoseek.com)
University of Virginia
Searches
• People- Finding URLs, e-mail addresses, etc.
• University and Corporate pages often have search
engines.
• Specific search engines-- phone number
databases, e-mail databases
• Use *,+,- for advanced searches
University of Virginia
Searches
• Indexing your site with the search engines-- best
place to go is http://free.submit-it.com/
• Registering your main URL is often all you need
to do. The search engines have robots (a.k.a.
spiders) that automatically traverse your web site
and index all of your pages for you.
University of Virginia
Good HTML Conventions
• Common tags: <html> begins a html document
• <head> contains <title>
• <body text=… link=… vlink=… bgcolor=…> body
of text
• <p> start a paragraph <br> new line
• <img src=“URL alt=… width=… height=…>
• <ul> un-numbered list <li> list element
• Be sure to close lists, html, head, body tags
University of Virginia
Good HTML Conventions
Frequently Asked Questions
• Changing the color of the text/background
• Using a background image
• Using forms with CGI
• Incorporating tables into your design
• Best way to edit HTML from emacs
University of Virginia
Good HTML Conventions
• Colors-- defined within the <body>
• text - the color of the viewed text (default is black#000000
• bgcolor - the background color (default is white
#FFFFFF or grey)
• link - color of unvisited links (default is blue)
• vlink - color of visited links (default is purple)
• Colors are based on RGB representation
#RRGGBB (where R,G,B accept values from 0-F)
• Netscape and IE allow for color namestext=“yellow”.
University of Virginia
Good HTML Conventions
• Background images-- also defined in <body>
• <body background=“URL”>
• check background at high resolutions-- may wrap
• check to see if text color is easy to read.
Generally dark backgrounds tend not to work.
University of Virginia
Good HTML Conventions
• Using forms and CGI-- be careful!
• Best resource- typing man cgiwrap from the CS
machines
• Debugging-- use cgiwrapd instead of cgiwrap-- for
example-<FORM METHOD="POST” ACTION="http://www.cs.virginia.edu/cgibin/cgiwrap?user=bct7m&script=link_bacon">
University of Virginia
Good HTML Conventions
• Tables-- very effective tool to manipulate text in a
web document.
• Not available with lynx
• Basic tags- <table> opens the table; <th>table
header; <tr>new row; <td> new cell
• BE SURE TO CLOSE YOUR TABLE!
University of Virginia
Good HTML Conventions
• HTML editing-- text editors work best. You have
direct control over the page. Emacs, vi, etc.
• FrontPage ‘97-- good for site design.
• Netscape Editor-- not so good.
University of Virginia
Good HTML Conventions
•
•
•
•
Frames-- Not such a great idea.
Difficulty in navigating
Difficult to print
Can become trapped in endless amounts of
frames
• Blink Tag-- try to avoid. Source of annoyance.
• Check your links!-- Broken links sign of a poorly
maintained web site
• Remember the T-1 Challenged-- most people will
probably access your page over modem.
University of Virginia
Good HTML Conventions
• Server side includes-- using *.shtml instead of
*.html
• This is “parsed” HTML -- the server does
something to the document before it is given to
the client.
• Useful for many things. Ex. The CS error
documents.
• Java/JavaScript-- your pages should not require
the user to be able to view java or javascript. Ex.
The CS/SEAS banners.
University of Virginia
Good HTML Conventions
• Animated GIFs-- use sparingly. Often add nothing
to a page except annoyance.
• Color Schemes-- Make sure that it is readable.
Generally a white background with dark text is a
safe bet.
• Images-- Always use width, height, alt tags within
your images. This speeds up the loading of your
page dramatically.
– GIFS vs. JPEG -http://www.cs.virginia.edu/~webman/readme/imgfmt.html
University of Virginia
Good HTML Conventions
• Success on the web-- coming up with new, useful,
original ideas
• Feedback-- giving an outlet (your e-mail address
or a feedback form) is often a great way to
improve your page.
University of Virginia
Web Site Management
• Maintenance of a large web site-- there is a need
for uniformity across hundreds, even thousands
of pages.
• Maintaining/Creating Web sites is a big business.
• Our solutions-- Makefiles
University of Virginia
Web Site Management
• Makefiles-- allow the use of macros to define
commonly used HTML sequences (ex. headers,
footers)
• Allows for quick and simple updating of hundreds
of pages.
• Uses the C language pre-processor to insert and
expand macros into HTML documents
• Edit *.raw files --> Make into *.html
University of Virginia
Web Site Management
• Macros-- being with #define declaration
• Can accept any number of arguments -- same
fashion as C function call.
• Arguments are separated by commas.
• Sample macro:
#define macro_link(name, URL)
<a href=URL>name</a>
• In raw format:
macro_link(Jason Watson, http://www.cs.virginia.edu/~jow4c)
• Expands into:
<a href=“http://www.cs.virginia.edu/~jow4c/”>Jason Watson</a>
University of Virginia
Web Site Management
• Consistency and Efficiency-- The operation of a
large web site demands that all team members
follow the same conventions of design
• Automation of Tasks-- using scripts to simplify
repetitive tasks. Ex. Recently modified files:
http://www.cs.virginia.edu/~webman/mod.shtml
• Quality Control-- Consider your web page a work
of art. Once you sign your name on it, it’s in a
world viewable gallery. Always run pages through
spell/grammar checks. Always check links. Your
web pages should look good in all browsers and
platforms.
University of Virginia
Scanning Overview
• Scanning availability to graduate students
• Proper procedures on using scanner
• Common problems that might occur while
scanning
• Using the scanner for text - OCR
University of Virginia
Scanning Availability To
Graduate Students
• Hewlett Packard ScanJet 6100c is available in
room Olsson 233
• Software (DeskScan II) for scanner is available on
the Scanner PC.
• Scanner is capable of both color and black and
white at high resolutions.
University of Virginia
Using DeskScan II
• Can be used as an application on its own
• Can be started through Photoshop
– File -> Acquire -> Twain Acquire…
• Can create and save personal settings
– Custom -> Image Type…
• 5 areas of adjustment when scanning
–
–
–
–
Brightness & contrast (self adjust), scaling (manual or setting)
Highlight and Shadow, Color Adjustment, Emphasis
Reverse, negative and lock
Preview/final --> within and exporting
University of Virginia
Common Problems To Be Aware Of
• Scale selected area down to area be scanned
– Straighten page, rotating reduces image quality
• Use/Create proper settings
– Sharp, millions, drawing (GIF), photo; under type
– Light to Dark; Macintosh, PC, UNIX
• Save at proper resolution - Medium is fine
• Use 72 dpi vs. other dpi for web related work
– Set path to “Screen”
University of Virginia
OCR - for text
• Optical character recognition - Omni Page in
Common Applications
• Common Problems
–
–
–
–
Must re-read what is OCR’d: hyphens, 1’s and l’s etc.
Note to OmniPage if scanning more than column
Creases in paper, background graphics
Must be placed in one direction - cannot read
• FTP out as earlier
University of Virginia
Photoshop Overview
• Photos/Graphics
• Filters
• Image Properties
• Toolbar
University of Virginia
Photos & Graphics
• Cropping
– use marquee to select
– edge of pictures
» edit -> copy -> file -> new -> edit ->paste
• Save as
– very important - GIF’s and JPEGs
» use Gifs only for transparent images and
cartoons/sketches
University of Virginia
Using Filters
• Should test these out - very helpful. Can
download new filters from http://www.adobe.com
• Sharpen
– enhances an image - good for drawings
• Blur
– distort, stylish effect
• Adding effects
– combine, possibilities are infinite
University of Virginia
Image Properties
• Size
– keep resolution at 72dpi
– use pixels for web related work
– use constrain proportions option
• Rotating
– arbitrary - good for text that needs to be straightened
• Flip
– horizontal, vertical
• Adjust levels
University of Virginia
Toolbar
• Pointer
• Magnifying Glass
– use shift and control
• Eye Dropper
• Magic Hand
• Smudge
• Text tool
• Gradient
• Marquee
• Background Fill
• Standard Paintbrush
options - use in conjuction
with various toolbars
• Gradient
University of Virginia
Assignment
• Use the guidelines that you have learned today in
the design of your own web page.
• Send all completed URLs to:
webman@cs.virginia.edu
University of Virginia