Presentation Template

Transcript Presentation Template

The Web… in 15 minutes
Ethel Schuster
[email protected]
http://www.cs.uml.edu/~schuster
Http://www.dov-e-games.com/dov-e-games/
1
© Copyright 2000 Ethel Schuster
Goals of the Web
• Sharing information
• Most successful
• Collaboration
• “Not quite”
2
© Copyright 2000 Ethel Schuster
Overview
• Brief discussion of components …
• Create web pages using HTML …
• Install home page “out there in the
world”
3
© Copyright 2000 Ethel Schuster
Understanding the
Components
• Web Browser (Client) …
• Server …
• Server Side Processing ...
4
© Copyright 2000 Ethel Schuster
Web Browser ...
• Main two roles:
• Finds web server on Internet &
requests page to display at local
machine
• Knows how to interpret HTML tags
to display page as intended
• Netscape, Internet Explorer,
Amaya, Opera
© Copyright 2000 Ethel Schuster
5
Web Server …
• Computer software
• Runs on dedicated machine
• Responds to request from browser and
sends page
• NCSA, Apache, CERN
6
© Copyright 2000 Ethel Schuster
Server Side Processing …
• Handles dynamic data
• CGI
• Servelet
7
© Copyright 2000 Ethel Schuster
Web Page ...
• File with text, graphics, hyperlinks,
sound, video
• Contains all above along with HTML
tags
• Tags tell web browser how to display
the page
8
© Copyright 2000 Ethel Schuster
Creating Web Pages
• Create a document with HTML tags
• Using a plain text editor
• NotePad, Word
• Using a Web Page editor
• Homesite, FrontPage
9
© Copyright 2000 Ethel Schuster
Understanding HTML
• Hypertext Markup Language
• Tags: Special instructions surrounded
by “<>”
• Symmetry (usually): matching
• “begin” with “<>” and
• “end” with “</>”
• E.g. <HTML> and </HTML>
10
© Copyright 2000 Ethel Schuster
Basic HTML Document
• <HTML> to mark the page as an
HTML document
• <!--> to specify comments
• <HEAD> to mark begin and end of
header for page
• <TITLE> to mark the title of the page
• <BODY> to mark the body of the
11
page
© Copyright 2000 Ethel Schuster
Example Template
• http://www.cs.uml.edu/~schuster/book
s1.html
12
© Copyright 2000 Ethel Schuster
HTML commands
• Change color of background and font
• Can use hexadecimal values
• Introduce different headers with <H1>,
<H2> and <H3>
• Center the text with <center>
• Paragraphs in HTML using <p>
• http://www.cs.uml.edu/~schuster/book
13
s2.html
© Copyright 2000 Ethel Schuster
Hyperlinks in HTML
• One of the most important capability of
HTML:
• To create hyperlinks to documents
elsewhere
• How? Use anchors
• <a href =
“http://www.yahoo.com”>http://www.
14
yahoo.com</a>
© Copyright 2000 Ethel Schuster
Lists in HTML
• Items marked with <li>
• Ordered lists
• <ol> … </ol>
• Unordered lists
• <ul> … </ul>
• http://www.cs.uml.edu/~schuster/book
s4.html
15
© Copyright 2000 Ethel Schuster
Tables in HTML
• Tables specified with <table> tag
• Rows use <tr> tag
• Cells use <td> tag, <th> for header
• Optional: modify width, alignment,
bgcolor, height
• http://www.cs.uml.edu/~schuster/book
s_table.html
16
© Copyright 2000 Ethel Schuster
Graphics
• Most images are GIF or JPG files
• Can be scanned, downloaded or
generated with
• Editor
• E. g. Paint Shop Pro, PhotoShop
• http://www.dov-e-games.com/dov-egames
17
© Copyright 2000 Ethel Schuster
Putting the Page up for
the World
• Internet service provider (ISP)
• College allocates space
• Specify the directory to place files
• Unix: public_html (convention
used but not everywhere)
• Make files accessible
• “Home Page” file is index.html
18
© Copyright 2000 Ethel Schuster
The URL Concept
• Each hyperlink, 2 components:
• Anchor text/graphics
• Trigger hyperlink when clicked
• Universal Resource Locator ...
19
© Copyright 2000 Ethel Schuster
Universal Resource
Locator (URL)
• What happens when hyperlink is
activated
• Protocol to reach
• Target server
• Host system (server name) where
doc is
• Directory path
• Filename
© Copyright 2000 Ethel Schuster
20
Examples
• http://www.magicpen.com
• Http://www.donbarnett.com/art/art_DB.
htm
• My web page
• http://www.cs.uml.edu/~schuster
21
© Copyright 2000 Ethel Schuster
Common Gateway
Interface: CGI
• Used to create dynamic content
• Output can change, e.g.,
• Search for an author in an online
bookstore
• Have partial name
• Dynamically create a list of books by
that author
22
© Copyright 2000 Ethel Schuster
How CGI scripts work
• Instead of displaying a page
• => execute a program
• Output of execution is a web page
• sent to browser requesting the page
• Output is executable code
• E.g. C or PERL script
23
© Copyright 2000 Ethel Schuster
PERL
• Widely used
• Highly portable
• Powerful string manipulation
24
© Copyright 2000 Ethel Schuster
Summary
• Discussed
• Components of the web
• HTML commands to create web page
• Handle Dynamic information
25
© Copyright 2000 Ethel Schuster