1
© Copyright 2000 Ethel Schuster
The Web… in 15 minutes
Ethel Schuster
http://www.cs.uml.edu/~schuster
Http://www.dov-e-games.com/dov-e-games/
2
© Copyright 2000 Ethel Schuster
Goals of the Web
• Sharing information
• Most successful
• Collaboration
• “Not quite”
3
© Copyright 2000 Ethel Schuster
Overview
• Brief discussion of components …
• Create web pages using HTML …
• Install home page “out there in the world”
4
© Copyright 2000 Ethel Schuster
Understanding the Components
• Web Browser (Client) …
• Server …
• Server Side Processing ...
5
© 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
6
© Copyright 2000 Ethel Schuster
Web Server …
• Computer software
• Runs on dedicated machine
• Responds to request from browser and sends page
• NCSA, Apache, CERN
7
© Copyright 2000 Ethel Schuster
Server Side Processing …
• Handles dynamic data
• CGI
• Servelet
8
© 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
9
© 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
10
© 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>
11
© 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 page
12
© Copyright 2000 Ethel Schuster
Example Template
• http://www.cs.uml.edu/~schuster/books1.html
13
© 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/
books2.html
14
© 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.yahoo.com</a>
15
© 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/books4.html
16
© 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/books_table.html
17
© 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-e-games
18
© 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
19
© Copyright 2000 Ethel Schuster
The URL Concept
• Each hyperlink, 2 components:
• Anchor text/graphics
• Trigger hyperlink when clicked
• Universal Resource Locator ...
20
© 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
21
© Copyright 2000 Ethel Schuster
Examples
• http://www.magicpen.com
• Http://www.donbarnett.com/art/art_DB.htm
• My web page
• http://www.cs.uml.edu/~schuster
22
© 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
23
© 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
24
© Copyright 2000 Ethel Schuster
PERL
• Widely used
• Highly portable
• Powerful string manipulation
25
© Copyright 2000 Ethel Schuster
Summary
• Discussed
• Components of the web
• HTML commands to create web page
• Handle Dynamic information