1. 1 © Copyright 2000 Ethel Schuster The Web… in 15 minutes Ethel Schuster schuster@cs.uml.edu http://www.cs.uml.edu/~schuster Http://www.dov-e-games.com/dov-e-games/

2. 2 © Copyright 2000 Ethel Schuster Goals of the Web Sharing information Most successful Collaboration “Not quite”

3. 3 © Copyright 2000 Ethel Schuster Overview Brief discussion of components … Create web pages using HTML … Install home page “out there in the world”

4. 4 © Copyright 2000 Ethel Schuster Understanding the Components Web Browser (Client) … Server … Server Side Processing...

5. 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. 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. 7 © Copyright 2000 Ethel Schuster Server Side Processing … Handles dynamic data CGI Servelet

8. 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. 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. 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. and

11. 11 © Copyright 2000 Ethel Schuster Basic HTML Document to mark the page as an HTML document to specify comments to mark begin and end of header for page to mark the title of the page to mark the body of the page

12. 12 © Copyright 2000 Ethel Schuster Example Template http://www.cs.uml.edu/~schuster/book s1.htmlhttp://www.cs.uml.edu/~schuster/book s1.html

13. 13 © Copyright 2000 Ethel Schuster HTML commands Change color of background and font Can use hexadecimal values Introduce different headers with, and Center the text with Paragraphs in HTML using http://www.cs.uml.edu/~schuster/book s2.htmlhttp://www.cs.uml.edu/~schuster/book s2.html

14. 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 http://www. yahoo.com

15. 15 © Copyright 2000 Ethel Schuster Lists in HTML Items marked with Ordered lists … Unordered lists … http://www.cs.uml.edu/~schuster/book s4.htmlhttp://www.cs.uml.edu/~schuster/book s4.html

16. 16 © Copyright 2000 Ethel Schuster Tables in HTML Tables specified with tag Rows use tag Cells use tag, for header Optional: modify width, alignment, bgcolor, height http://www.cs.uml.edu/~schuster/book s_table.htmlhttp://www.cs.uml.edu/~schuster/book s_table.html

17. 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- gameshttp://www.dov-e-games.com/dov-e- games

18. 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. 19 © Copyright 2000 Ethel Schuster The URL Concept Each hyperlink, 2 components: Anchor text/graphics Trigger hyperlink when clicked Universal Resource Locator...

20. 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. 21 © Copyright 2000 Ethel Schuster Examples http://www.magicpen.com Http://www.donbarnett.com/art/art_DB. htmHttp://www.donbarnett.com/art/art_DB. htm My web page http://www.cs.uml.edu/~schuster

22. 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. 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. 24 © Copyright 2000 Ethel Schuster PERL Widely used Highly portable Powerful string manipulation

25. 25 © Copyright 2000 Ethel Schuster Summary Discussed Components of the web HTML commands to create web page Handle Dynamic information