Web Site Functionality
April 1, 2004
What is a Web Browser?
• A client program that uses HTTP to communicate with web servers.
• HTML interpreter
– Reads HTML, determines how to display it
<HTML> <HEAD>
<TITLE>My Jungle Home Page</TITLE> </HEAD>
<BODY>
The scariest jungle: Follow the map to see lions and tigers and bears.
Oh, my! </BODY> </HTML>
What is a Server?
• A computer (hardware) that functions as a server – mercury.cs.uml.edu is a server computer • A program (software) that functions as a server
– apache is a web server program ! The word “server” is used to refer to both.
WWW client/server
HTTP
HyperText Transmission Protocol
• Used for communications between web browser and web server programs.
• Clients send “requests” to the server. • Servers send “responses” to the client.
! The server is a slave in this interaction, it does not initiate, it responds.
HTTP Network Characteristics
• HTTP “runs over” TCP/IP.
– TCP/IP determines the low-level format of the communication, e.g. packets.
– HTTP defines logical formats of requests and responses.
• HTTP is connection oriented.
HTTP request/response
• Most common request is “GET file.html”. • Server responds with contents of file.html.
• If the server cannot satisfy the request, you see an error message in the browser.
– Typically: “The page cannot be found” – or, in case of images, a box with an X in it &
perhaps a text descriptor of the image
What’s a protocol?
a human protocol and a computer network protocol:
Hi Hi Got the time? 2:00 TCP connection request TCP connection accept reply Get http://www.cs.uml.edu/index.html <file> time
Web Server Popularity
No. of Sites Percent
Apache 11,699,238 66.04
Microsoft 4,283,894 24.18 iPlanet 278,999 1.57
Zeus 236,948 1.34
source: netcraft.com, December 2002
Web Site Setup
• Each page is an html file.
• Your web site on cs.uml.edu is in a directory named public_html.
!My site is in ~tcostell/public_html
• The “home” page of your site is named : index.html. If you browse to the site name with no filename specified, index.html will be served.
• If I enter
http://www.cs.uml.edu/~tcostell/image002.gif, then is displayed
Debugging a Web Page
1. Get everything working locally first.
– Use the “My Documents” directory on your computer to hold your local files.
2. Copy files from your PC to the Server. 3. Test your site on the server.
– Be sure to use your Internet URL: http://www.cs.uml.edu/~myname
Mozilla Composer
• Lab instructions will be based on Mozilla Composer. • Mozilla Composer is free and supports all functions
required to do the labs.
• You may use Front Page, Dreamweaver, etc. if you know them and/or own them.
– My ability to answer questions on these programs is limited.
Copying Files to the Server
• In the lab:
Drag and Drop in Microsoft File Explorer. • From elsewhere:
A program that can copy files across the Internet. – WinSCP (recommended)
– Secure FTP
You need your Unix username and password to run these.
HTML & Tags
• Browsers display Web pages by interpreting Hypertext Markup Language, or HTML.
– That's a lot of the mess you see when you look at source code.
• A basic Web page starts with an <HTML> tag. At the end of the page is a corresponding </HTML> closing tag (the slash means it closes the HTML element).
• This idea of opening and closing tags is key to understanding HTML:
– Everything nests. Each new set of tags must fit neatly within the previous set, like Russian
matryoshka dolls, those boxes inside boxes inside
Building Web Pages
• Within your <HTML> and </HTML> tags, you will need to nest some other elements. Start with a set of <HEAD></HEAD> tags. Inside them, nest <TITLE> and </TITLE> tags. The text you place between the opening and closing TITLE tags will show up in the browser's title bar.
• Add <BODY> to Your Page
• Add a <BODY> tag after </HEAD> (the closing HEAD tag), and place the corresponding </BODY> tag just above the </HTML> tag. Between the <BODY> and </BODY> tags, you can type just about anything
• html_1.html
Here's how to try it:
• Open a new file in Notepad, or any other text editor. • Type in the HTML code above.
• Select Save As from the File menu, and save the file as Jungle.html. Be sure to specify All Files in the
Save as type: drop-down menu.
Elements and Attributes and Styles
• You can use HTML elements and their displaycharacteristics to describe your content.
– For example, a heading code, such as <H1>, is automatically bold.
Cascading Style Sheets
• You have the paragraphs and the big bold heading—but what if you want that heading to be green, too? You can modify the way those elements appear by using cascading style sheets (CSS). • Style sheets provide a way to add characteristics to an element,
and they also separate the way your page looks—its presentation—from what's actually in it—the content.
• If you want to make a change, you can make it one place and your change will be reflected throughout the page.
– You can specify many things by using styles, including fonts, sizes, colors, layout, and positioning.
• Style sheets also enable you to have different kinds of elements.
– For example, perhaps you want some paragraphs to be regular text, and some to be italic.
Lab 7 Overview
• Write an index.html page using Composer.
• Put it on the server, replacing the dummy page that is there.
• Write one additional page, linked to by your home page.
