video2 - UM Personal World Wide Web Server
Download
Report
Transcript video2 - UM Personal World Wide Web Server
Beginning Web
Publishing
• Community
Information
Toolkit
• Video # 2
Agenda
• Overview of HTML
– Basic concepts
• HTML Authoring Tools
• Working with Digital Images
– Formats; ways to use images
– Using Scanners and Digital Cameras
• Image Editors
• Principles of Good Web Design
Before We Begin: A Word
About Copyright
• Most content on the Web is copyrighted
• The copyright symbol
© is not required
• It is generally not acceptable to republish
text and images from Web sites -- nor
from books, magazines, etc.
– Even if your use is non-profit
• Civil and criminal penalties apply
• Get permission, or don’t do it!
http://lcweb.loc.gov/copyright
CGI Scripts
Java
Streaming
Media
JavaScript
Active Server
Pages
Shockwave
Animated
GIFs
Static HTML Pages
Basic Web Server
Basic HTML: Your Primary
Publishing Medium
• HTML is a rich presentation language
• HTML, along with inline graphics,
offers many ways to control how
your content appears
• HTML can be:
– Written on any platform
– ...Using a wide variety of authoring tools
– Delivered by any Web server
What Makes a Web Document?
• The basic document language for the
Web is HTML -- HyperText Markup
Language
• HTML editing is analogous to using
word processors such as MS-Word,
except:
– You’re designing for a Web browser
window, not the printed page
– The codes, or tags, are visible to the
author
HTML: Text and “Tags” Reside
in the Same File
<title>Community Information</title>
...
<h1>Welcome to Smallville</h1>
<p>Smallville is a picturesque town on
the banks of the Au Sable River
</p>
<title>Basic Web Sample</title>
<h1>A Sample HTML Document</h1>
The Browser
Interprets Your
HTML Tags ...
HTTP: HyperText
Transfer Protocol
Web Server
User’s Web
Browser
The Internet
HTTP
session
www.smallville.mi.us
HTML
document
user.isp.com
Definitions
• Web browser: software used to "surf" the
Web
– Netscape Navigator, Microsoft Internet Explorer,
Web TV browser, Opera
• Web server: hardware and software that
deliver Web pages on demand
• Web "page": a single HTML document as
displayed by a Web browser
– One page may consist of multiple files on server
• URL: "Uniform Resource Locator" = the
address of a Web server or a Web page
Common File Types
• Most basic Web site has only two file
types:
– HTML, for HTML documents
– GIF: Graphics Interchange Format
• For photographs, logos, diagrams, charts
referred to in your HTML documents
• Many additional formats are used
– JPEG: Image format well-suited to
photographs
– Innumerable special formats
Your Jobs as a Web Author
• Prepare HTML files
– By hand or by using “authoring tools”
• Prepare image files
– Scanned images, or created with
“drawing” programs
• Organize files into a coherent site
• Place files on server
• Check to make sure everything
works
“Manual” HTML Editing
• Any word processor will work just
fine
• “Flat file editors” are good for
manual HTML construction
– Windows WordPad is a good choice
– On Mac, BBedit is popular
• Strategy:
– Create and edit files on local hard disk
– Review progress using browser
– When satisfied, move files to server
Using a Text Editor -“Blank Slate” Approach
<h1>Editing</h1>
Type text and tags
into your favorite
text editor…
Windows Wordpad
Is Popular for
"Hand" Editing
HTML
Wordpad
Window
Netscape Browser Window
When Manually Editing, Hop
Between Wordpad and Browser
Using the Windows Taskbar to return to WordPad
HTML Overview
Basic HTML Document Structure
[
[
<html>
<head>
<title>The Historical
Society of YourTown,
Michigan
</title>
</head>
<body>
This is an HTML document
about our historical
society.
</body>
</html>
The <HEAD> tag
marks “front
matter” such as the
document (page)
title.
The <BODY>
holds the text of
the page
Notes About HTML Tags
• “Case” doesn't matter
– <title> and <Title> and <TITLE> and
<tiTLe> are all the same
• Spacing in your source document
doesn't matter
– Include as many carriage returns and
extra spaces in your source document as
you wish
– Web browser looks only at tags to
determine layout on screen
Paragraphs <P>
<h2>Paragraphs in
HTML</h2>
<p>
This is paragraph 1.
</p>
<p>
This is paragraph 2.
</p>
Headings <H1...H6>
<H1>High School</H1>
<H2>Middle School</H2>
<H3>Elementary Schools</H3>
<H4>Pre-Schools</H4>
<H5>Library Storytimes</H5>
<H6>Other Education
Organizations</H6>
<CENTER> Tag: Centers Text within
Windows
<CENTER><H1>Welcome to The
Historical Society of YourTown,
Michigan</H1></CENTER>
<HR> - Horizontal Rule
<BR> - Break ("hard return")
<HR>
<H3>Contact
Information</H3>
<B>The Historical
Society</B><BR>
1212 Main Street<BR>
YourTown, MI 48195<BR>
Each <br>
causes
local carriage
return, no
line feed
Creating Links:
The Anchor Tag
All Anchor Tags have three parts...
<A HREF="name and location of document">
Text that appears as a link</A>
The
Beginning
Anchor Tag
The text or
image(s) that the
user would click
on
The
End
Anchor
Tag
Creating Links to Other Web Sites
<H3>Contact Information</H3>
<B>The Historical Society</B><BR>
1212 Main Street<BR>
YourTown, MI 48195<BR>
<HR>
<A HREF="http://milf.tln.lib.mi.us/mcin/comm.htm">Go to
the Milford Community Network</a>
Background Colors
<HTML>
<HEAD>
<TITLE>Backgrounds</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
This page has a blue
background.
<P>
</BODY>
</HTML>
Background Images
<HTML>
<HEAD>
<TITLE>Background
Images</TITLE>
</HEAD>
<BODY BACKGROUND="mi.gif">
This page has the state of
Michigan
as a background.
</BODY>
</HTML>
Basic Tables
<TABLE>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
</TR>
</TABLE>
Placing an Image into an HTML
Document
<IMG SRC="yahoo.gif”
ALT=“Yahoo Logo”>
<p>
<IMG SRC="yahoo.gif” ALT=“Yahoo Logo”>
<A HREF=“http://www.yahoo.com">Yahoo</A>
</p>
<p>
<A HREF="http://www.yahoo.com”
ALT=“Yahoo Logo”>
<IMG SRC="yahoo.gif">
</A> Yahoo
</p>
Organizing Your HTML Files
on the Server
/home/webdata/
index.html
picture1.gif
/topic1/
index.html
picture1.gif
topic1a.html
topic1a.gif
/topic2/
...
Web Server
www.smallville.mi.us
Relative and Absolute References
to Same File...
http://www.smallville.mi.us/topic1a.html
…includes this absolute reference to topic1a.gif image:
<img src="http://www.smallville.mi.us/topic1a.gif">
/home/webdata/
/topic1/
...
topic1a.html
topic1a.gif
http://www.smallville.mi.us/topic1a.html
…includes this relative reference to topic1a.gif image:
<img src="topic1a.gif">
Server File Layout
Determines Each Page's URL
http://
www.smallville.mi.us
Protocol
Server
Address
/events/may.html
Path to
File
Those Are the Basics
• With basic tags…
• …and simple inline images
• You can build a very effective Web
site
• So start writing Web pages now!
• You can learn fancier tricks of the
trade later
HTML
Authoring Tools
Authoring Tools
• Translators
– Translate from another format to HTML
– MS Word, WordPerfect, Pagemaker, etc
• HTML Editors
– What You See is What You Get
– Adobe Pagemill, Netscape Composer,
HTML Assistant Pro, MS Frontpage
Tables: Much Easier
With an Editor
HTML Forms: Easy with
Authoring Tools
<FORM>
<H3><FONT COLOR="#000000">Smallville Softball
Reservations</FONT></H3>
<P><FONT COLOR="#000000">Which field do you
want?</FONT></P>
<P><FONT COLOR="#000000"><INPUT TYPE="radio"
VALUE="radio" NAME="radio253910"
CHECKED="1">Moseley Park<BR>
<INPUT TYPE="radio" VALUE="radio" NAME="radio254583"
CHECKED="1">Hines
Park<BR>
<INPUT TYPE="radio" VALUE="radio" NAME="radio255700"
CHECKED="1">Gardiner
Park</FONT></P>
<P><FONT COLOR="#000000">What date?
<INPUT NAME="name" TYPE="text"
SIZE="25"><BR>
What time?<INPUT NAME="name" TYPE="text"
SIZE="25"></FONT></FORM>
FrontPage: Authoring Tool and
Web Project Manager
• What You See Is What You Get
(WYSIWYG) editing
• Add pages, links using graphical
commands
• Each new project is called a FrontPage
"web"
• Multiple "views" of your site
• Built-in tools for specific applications
– Comment forms, simple discussion forum
Navigation View
Folder View
Hyperlink View – Visualize Internal Links
The FrontPage Editor In
Normal View
The FrontPage Editor
in HTML View
FrontPage: Predefined Themes
Pre-Created Templates
Managing Files with
Authoring Tools
• Many authoring tools automate the
process of publishing pages
• “One-button publishing”
– A little tricky to set up
– Webmaster may have to install
extensions on server
– Just click "Publish" button when done
editing a page
Manually Moving Files to the
Server: WS-FTP Example
logo.jpg
logo.jpg
Netscape Composer OneButton Publish
Site Management
• Some authoring tools provide ways to
manage an entire site
– Beyond editing individual pages
• Other advanced features:
– Check link integrity
• Identify links that point to dead sites or missing files
– Validate HTML (make sure tags are valid)
– FrontPage: project management features
• Assign tasks to team members
• Set priorities, update status
FrontPage Project
Management
• Define tasks to be done
• Assign to team members, give
priorities
Web Sites That Evaluate Your
Web Site
• Tools to examine your site
– HTML validity
– Link integrity
– Speed of page downloads
– Whether your GIF images are optimized
• Can offer many of the advantages of
authoring tools
• Easy to apply to your entire site
NetMechanic: Check Your Site’s
HTML Validity, Links, etc.
NetMechanic
Setup
NetMechanic Results
Working with
Digital Images
Digital Image Input Choices
• Digital cameras
• Scanners
• Have photo lab deliver in digital form
– Floppies
– Photo CD
– Even directly to the Web
Scanners
• From paper to digital documents
• Newsletters, pages from books,
photographs -- even small objects
can be scanned
• Three basic kinds of images to scan:
– Photographs
– Line art
– Text
Types of Scanners
• Most applications call for flat-bed
scanners
– Useful for most everyday applications
– Some offer automatic sheet feeders
• Useful for bulk scanning jobs
• Many other scanners exist
– 35MM slides, negatives
– Book scanners, handheld scanners
Choosing a Scanner
• Many brands to choose from: HP,
Visioneer, Canon, Epson, Umax...
• Quality varies with price
– Probably want to spend at least $300
– More expensive scanners offer better
resolution, faster speed
• You want at least 600 dots per inch optical
resolution
– Look for at least 24 bit color
– Check for bed size, speed of scan
Software Bundled with Scanners
• Image editing software
– E.g., Adobe Photodeluxe, Corel
Photopaint
• Software to perform optical character
recognition (OCR)
– E.g., Caere Ominpage, Xerox
Textbridge
• Related tools: Adobe Acrobat, fax
software, image file managers, etc.
Installing Your Scanner
• Unpack
• Install the software
• Connect the scanner to the PC
– Parallel (printer) port
• Often use pass-through to your printer
– SCSI
• Not all PCs have this (all Macs do)
– USB: new Universal Serial Bus -- autoinstalls under Windows 98
Installation is Easy under
Windows 98
• Plug scanner into USB port
• Automatic software installation
• Your PC must have a USB port!
Steps In Scanning
•
•
•
•
•
Position your original on the bed
Close the cover, power on
Start your software
Select Preview
Use the mouse to select part of page
to scan…
• …or leave to full-page if desired
Getting Ready to Scan
Preview
and
Select
Area to
Scan
Setting the Output Type
Setting the Resolution
• A relatively low resolution may work
well
• E.g. 150 dots per inch
• Computer monitor screens only offer
about 72 dpi
• You may need higher resolutions if:
– Your readers will download and print the
file
– You will manipulate the file with an image
editor
OCR Results
Letter from the AFCN
President
Greetings all!
Well, it's been more
than a month since
our get- together in
San Jose, and what a
fine gathering it
was. I am also glad
to report I had the
opportunity for a
nice drive
Scanning Tips
• Scan multicolumn text one column at a
time
• Choose the right resolution and
screening for photographs
• Choose a vector format if you’re
scanning in a logo or graphic to reuse
• Use image editor to crop, resize, finetune
• Watch file sizes on what you serve!
Image Editing Software
Working With Images
• Get a good image editor
– Paint Shop Pro (shareware)
– Adobe Photoshop
– Adobe Photodeluxe
• A stripped-down version of Photoshop
• With many user-friendly features and
effects
– Corel PhotoPaint
What Image Editors Can Do
• Convert among various formats
• Rotate images
• Resize or crop images
– Standard video monitor is at least 640 X
480 pixels
• Adjust contrast, brightness, number
of colors
• Add text, even combine images
• Apply a variety of special effects
Adobe PhotoDeluxe Example
PhotoDeluxe Effects
PhotoDeluxe "Sketch" Effect
Image Size Matters
• Reduce your image to the minimum
possible to convey your meaning
– A 100 kilobyte image is too large!!!
– Reduce size of image
– Reduce number of colors in image
– Use a GIF optimizer in image editor
• Use thumbnails instead of full-size
images
– Thumbnail is small, points to larger
image
<a href=“large.jpg”> "Thumbnail"
Concept
<img src=“small.jpg”>
</a>
Thumbs-Plus Software:
Automates Web Thumbnails
Working With Colors
• Digital color representation requires
compromises
• Video cards, monitors, and software
each have their own characteristics
• Newest computers have 24 bit color
– Over 16 million colors; known as “true
color”
• Older PCs have less capability
– As few as 256 colors
Minimize Number of Colors
• Video cards, operating systems, and
browsers have limits on color
handling
• Minimize the number of different
colors you use
• Use 216 or fewer distinct colors per
page:
– Speeds up page loading
– Ensures better control over final display
Browser-Friendly Palette
GIF Features to Explore
• Transparency
– Pick a color in your image to render as
transparent
• E.g. the wall behind a human subject
– The picture will blend into the Web page
• Animation
– This is how banner ads work
– Very easy to set up
• Many image editors can handle
transparency and animation
Principles of
Good Web Design
6/12/98 tmw
Characteristics of a
Good Web Site
•
•
•
•
•
Well-organized
Easy to navigate
Attractive
Useful
Up-to-date
Steps to a well designed
Web site
•
•
•
•
•
Have a goal
Target your audience
Create a plan
Select a Web service provider
Try it out
– Using different PCs and browsers
– Over slow dial-up lines
• Maintain it
Few graphics makes it more accessible to everyone.
Organized by department.
Organized by audience type.
Organized by subject.
No scrolling necessary to start navigating.
Standard tool bars and a brief menu for easy
navigation.
Avoid backgrounds that wash out your text.
Imagemaps can provide easy means of navigation.
Tables
• Standard text, images or links are
arranged in tabular format with or
without borders
• Pros
– Allows creator to place items on a page
– Looks neat
• Cons
– Can be tricky, but tables are amazingly
useful to the designer.
Tables provide Web designers with control
over layout.
Frames
• Divides the browser's window into
two or more scrollable areas
– Useful for site-wide menus
• Pros
– Can provide an area that makes
updating or changes very simple
– Can help with navigation
• Cons
– Used improperly can make a huge
mess!
Frames can be used to provide a static navigation
window.
Tips
• Emulate a site you like.
• Pick a style for the site
– Test the style before you build entire site
• Keep things simple.
• Provide a search function if possible.
• Test your site
– Are pages legible?
– Is site easy to navigate?
– Does site provide the information users
would expect to find?
Avoid littering your opening page with
your awards.
Web Design and HTML
References
• WebReference.com
• WebDeveloper.com
• Serverwatch.com
• www.zdnet.com
• www.cnet.com
• … and many more!