250 likes | 353 Views
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/. Goals of the Web. Sharing information Most successful Collaboration “Not quite”. Overview. Brief discussion of components … Create web pages using HTML …
E N D
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/
Goals of the Web • Sharing information • Most successful • Collaboration • “Not quite”
Overview • Brief discussion of components … • Create web pages using HTML … • Install home page “out there in the world”
Understanding the Components • Web Browser (Client) … • Server … • Server Side Processing ...
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
Web Server … • Computer software • Runs on dedicated machine • Responds to request from browser and sends page • NCSA, Apache, CERN
Server Side Processing … • Handles dynamic data • CGI • Servelet
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
Creating Web Pages • Create a document with HTML tags • Using a plain text editor • NotePad, Word • Using a Web Page editor • Homesite, FrontPage
Understanding HTML • Hypertext Markup Language • Tags: Special instructions surrounded by “<>” • Symmetry (usually): matching • “begin” with “<>” and • “end” with “</>” • E.g. <HTML> and </HTML>
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
Example Template • http://www.cs.uml.edu/~schuster/books1.html
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
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>
Lists in HTML • Items marked with <li> • Ordered lists • <ol> … </ol> • Unordered lists • <ul> … </ul> • http://www.cs.uml.edu/~schuster/books4.html
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
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
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
The URL Concept • Each hyperlink, 2 components: • Anchor text/graphics • Trigger hyperlink when clicked • Universal Resource Locator ...
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
Examples • http://www.magicpen.com • Http://www.donbarnett.com/art/art_DB.htm • My web page • http://www.cs.uml.edu/~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
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
PERL • Widely used • Highly portable • Powerful string manipulation
Summary • Discussed • Components of the web • HTML commands to create web page • Handle Dynamic information