Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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