What is a Web Browser? Web Site Functionality. A client program that uses HTTP to communicate with web servers.

Size: px

Start display at page:

Download "What is a Web Browser? Web Site Functionality. A client program that uses HTTP to communicate with web servers."

Bruce Craig
8 years ago
Views:

1 What is a Web Browser? Web Site Functionality April 1, 2004 A client program that uses HTTP to communicate with web servers. HTML interpreter Reads HTML, determines how to display it A Simple HTML file Browser display of the HTML file <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>

2 What is a Server? WWW client/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. HTTP HTTP Network Characteristics 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 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. Each request/response pair is complete unto itself.

HTTP HTTP Network Characteristics HyperText Transmission Protocol Used for communications between web browser and web server programs. Clients send requests to the server.

3 HTTP request/response What s a protocol? a human protocol and a computer network protocol: 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 Hi Hi Got the time? 2:00 time TCP connection request TCP connection accept reply Get <file> Web Server Popularity Web Site Setup Each page is an html file. No. of Sites Percent Apache 11,699, Microsoft 4,283, iplanet 278, Zeus 236, source: netcraft.com, December 2002 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 then is displayed

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 Hi Hi Got the time?

4 Debugging a Web Page Mozilla Composer 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: 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 boxes.

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.

5 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 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. html_1.html Elements and Attributes and Styles You can use HTML elements and their display characteristics 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.

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.

6 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. Lab 8 & 9 will build on this basic setup.

CREATING WEB PAGES USING HTML INTRODUCTION

CREATING WEB PAGES USING HTML INTRODUCTION Web Page Creation Using HTML: Introduction 1. Getting Ready What Software is Needed FourSteps to Follow 2. What Will Be On a Page Technical, Content, & Visual