the web… in 15 minutes

1

© Copyright 2000 Ethel Schuster

The Web… in 15 minutes

Ethel Schuster

[email protected]

http://www.cs.uml.edu/~schuster

Http://www.dov-e-games.com/dov-e-games/

2


Goals of the Web

• Sharing information

• Most successful

• Collaboration

• “Not quite”

3


Overview

• Brief discussion of components …

• Create web pages using HTML …

• Install home page “out there in the world”

4


Understanding the Components

• Web Browser (Client) …

• Server …

• Server Side Processing ...

5


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


Web Server …

• Computer software

• Runs on dedicated machine

• Responds to request from browser and sends page

• NCSA, Apache, CERN

7


Server Side Processing …

• Handles dynamic data

• CGI

• Servelet

8


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


Creating Web Pages

• Create a document with HTML tags

• Using a plain text editor

•NotePad, Word

• Using a Web Page editor

•Homesite, FrontPage

10


Understanding HTML

• Hypertext Markup Language• Tags: Special instructions surrounded

by “<>”• Symmetry (usually): matching • “begin” with “<>” and • “end” with “</>”• E.g. <HTML> and </HTML>

11


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


Example Template

• http://www.cs.uml.edu/~schuster/books1.html

13


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


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


Lists in HTML

• Items marked with <li>• Ordered lists• <ol> … </ol>

• Unordered lists• <ul> … </ul>

• http://www.cs.uml.edu/~schuster/books4.html

16


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


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


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


The URL Concept

• Each hyperlink, 2 components:

• Anchor text/graphics

• Trigger hyperlink when clicked

• Universal Resource Locator ...

20


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


Examples

• http://www.magicpen.com

• Http://www.donbarnett.com/art/art_DB.htm

• My web page

• http://www.cs.uml.edu/~schuster

22


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


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


PERL

• Widely used

• Highly portable

• Powerful string manipulation

25


Summary

• Discussed

• Components of the web

• HTML commands to create web page

• Handle Dynamic information

the web… in 15 minutes

Documents