The Internet & Website Construction

Transcript The Internet & Website Construction

1/28: The Internet & Website Design
• What is the Internet?
– Parts of the Internet
– Internet & WWW basics
– Searching the WWW
• Website design considerations
• HTML (Hypertext Markup Language)
• Resources for website design on the WWW
The Internet
• Where did it come from?
– History: ARPA network
• Largest computer network in the
world: a network of networks
– network: two things connected for communication
• Many parts:
– WWW, gopher, telnet, ftp, Usenet, e-mail, chat rooms
• Who owns it? No one.
Parts of the Internet: Capabilities
•
•
•
•
•
WWW: World Wide Web
GOPHERS: Use menus to locate text material
TELNET: Log on one computer, work on another
FTP: Transfer files from computer to computer
USENET NEWSGROUPS: Electronic bulletin
boards for discussion groups
• E -MAIL: Person -to-person messaging;
document sharing
• CHAT ROOMS: Interactive conversations
The World Wide Web
• A part of the Internet
– history: CERN
• Getting access
– Service providers: AOL, SLU,
Primary Network, Southwestern
Bell, Charter Communications,
etc.
• Look at a browser
• “Browsing” vs. “surfing”
Internet & WWW basics
• Location bar: name of file viewed
– URL: Uniform Resource Locator
http://www.adbook.net/teach022/index.htm#classes
protocol
domain
folder(directory) file
fragment
• Hypertext Transfer Protocol (http):
communication standard for sending web pages.
• Hypertext Markup Language (html):
most common language for creating web pages.
• Website: file displayed in the browser
Internet & WWW basics
• Common browsers: Netscape Navigator, MS
Internet Explorer
• Home page: Organization’s main page
• Portal: Point of entry for the WWW
• “Push” technology: Server automatically delivers
content to browser; user does nothing to get it.
Searching the WWW
• search engines look through their own databases
of web pages
• index: a list of web pages, either directory-style
or searchable
• keywords: important words in a web page
• spiders: programs that wander
the web, collecting
information
Common Search Engines
•
•
•
•
•
•
•
•
Yahoo
Excite
Hotbot
Ask Jeeves
Altavista
Lycos
Google
Your
browser
Searching the WWW: Better results
• Use phrases in quotes
– “Saint Louis restaurants”, not Saint Louis
restaurants
• Use Boolean operators
– AND, OR, NOT
• look at “Advanced Search”
tips on search sites
• Don’t know what it’s called?
– Yahoo – wander through categories
Why Learn About Webpage Design?
• It will increase your understanding of design
concepts in general
• It will increase awareness of customer needs
• It will help you understand webpage navigation.
images courtesy of http://www.dreamweaver.com
Website design considerations
• Ease of navigation
– no dead links, no dead ends
– logical layout
• Proper labeling
– bottom of each page
• Page size: consider the default screen size of 640x480
• Speedy downloading
– “fat” page = unvisited page
– image considerations
Hypertext Markup Language
<html>
<head>
<title>just a wee little page</title>
</head>
<body>
This is a web page.
This is italics, bold
face,and underlined.
<A HREF=“1-28.ppt">Return from whence
you came...</A>
</body>
Show it
</html>
HTML elements
Header: page elements that are not in the body.
Title: shown in the blue bar at the top of the window.
Metatags: keywords, language settings, etc.
Body: what appears in the main window of the
browser.
Tags: pairs of markers that surround elements for
formatting.
Hyperlink: reference to a different file or fragment:
<A HREF=http://www.yahoo.com>
IMG: hyperlink reference to an image file.
Resources on the Web
• Webpagesthatsuck.com
“learn good design from looking at bad design”
• NCSA’s tutorial on HTML
• Guide to Creating a Successful Website
Homework #1: Building a Website
• Homework details
– web page on a subject of your choice
– Should include (at least) 1 page, 4 pictures, and 4
links to other web pages.
– Should follow guidelines for good design.
– Should be posted on a web site that advertises “free
website hosting,” such as GeoCities, Xoom.com,
Angelfire, Tripod, Homestead,
How to use GeoCities
• With a browser, access http://www.geocities.com.
• Click on “Free web site – Sign up now!”
• Set up an account with Yahoo! if you don't have
one already. Record your name & password.
• Build your webpage using whatever program you
choose.
• Use the GeoCities FTP manager to upload all
your files. Record the URL for your
convenience.
Tools for Making Webpages
• Microsoft Word
• Netscape Composer (part of Communicator)
• DreamWeaver (30-day trial downloadable from
Macromedia.com)
• Microsoft FrontPage
• Lots and lots of other programs…
Homework #1: Building a Website
• Homework details
– web page on a subject of your choice (don’t be crude)
– Should include (at least) 1 page, 4 pictures, and 4
links to other web pages.
– Should follow guidelines for good design.
– See other details on the homework page.
– Should be posted on a web site that advertises “free
website hosting,” such as GeoCities, Xoom.com,
Angelfire, Tripod, Homestead,

The Internet & Website Construction

Transcript The Internet & Website Construction

Directory