Top Banner
CS 607 Web Programming http://www.cs.ucc.ie/ j.bowen/cs607/
38
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: CS 607 Web Programming

CS 607

Web Programming

http://www.cs.ucc.ie/j.bowen/cs607/

Page 2: CS 607 Web Programming

http://www.cs.ucc.ie/j.bowen/cs607/

Page 3: CS 607 Web Programming

Assumptions

• You have had no formal training in web programming

• But it is assumed that you have picked up a lot of relevant material already

• Nevertheless, the course will review basic notions, to ensure a “level playing field”

Page 4: CS 607 Web Programming

Servers and Browsers

• Servers make web documents, which are specified in HTML, available on request to browsers

• Browsers display, to users, web documents which have been received from servers

Page 5: CS 607 Web Programming

Servers and Browsers

Page 6: CS 607 Web Programming

Web Programming

• Programming for the World Wide Web involves both– server-side programming, and– client-side (browser-side) programming

Page 7: CS 607 Web Programming

Client-side programming

• In this module, we will consider the following mechanisms for client-side programming:– HTML 4.0– Cascading Style Sheets– Javascript– Java applets

Page 8: CS 607 Web Programming

Server-side Programming

• In this module, we will consider – the Hyper Text Transfer Protocol (HTTP)– the Common Gateway Interface (CGI) protocol

for sending information between servers and appln programs running on the same machines

– server-side programming in Perl, PHP and Java

Page 9: CS 607 Web Programming

Other topics

• We will also consider– user-interface design– security

Page 10: CS 607 Web Programming

Assessment

• Of the marks available for the module,– 70% are available from the end-of-year written

examination– 30% are available from continuous assessment,

a series of in-class tests that will be administered from time to time

Page 11: CS 607 Web Programming

HTML: HyperText Markup Language

Page 12: CS 607 Web Programming

Assumption

• It is assumed that you have already used HTML quite a bit, even though you have had no formal course in it

• Beware that good HTML programming methodology is still evolving

• This course will adhere rigidly to the latest standards for coding in HTML 4.0, even though browsers tend to be more tolerant

Page 13: CS 607 Web Programming

• HTML is the language used for specifying WWW documents

• A specification, in HTML, of a WWW document contains raw content (text, video, etc.) along with items called tags which are used to tell browsers about the content

Page 14: CS 607 Web Programming

HTML Specification of a Simple Document

<HTML> <HEAD> <TITLE> Hello Document </TITLE> </HEAD> <BODY> Hello there </BODY> </HTML>

Page 15: CS 607 Web Programming

Viewing this document using Netscape

Page 16: CS 607 Web Programming
Page 17: CS 607 Web Programming

• The HTML fragment <TITLE> Hello Document </TITLE> tells the browser what title to place on the top line

of the browser display

Page 18: CS 607 Web Programming

• The HTML fragment <BODY> Hello there </BODY> tells the browser what to put in its content display region

Page 19: CS 607 Web Programming

Viewing the document using Explorer

Page 20: CS 607 Web Programming
Page 21: CS 607 Web Programming

Browsers treat documents slightly differently

• See how the document titles are placed differently on the top line of the browser

• See how the content display regions have different colours

Page 22: CS 607 Web Programming

Testing your web-site

• When you make you web-site live, it may be accessed by anybody on the WWW

• You have no idea which browser they will be using

• But it is a good idea to test you site on the most likely browsers

Page 23: CS 607 Web Programming

• Got here on 28 9 2004

Page 24: CS 607 Web Programming

The items below are called tags

<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>

Page 25: CS 607 Web Programming

Notice that tags come in pairs:

Page 26: CS 607 Web Programming

A tag pair contains something:

• The tag pair <HTML> … </HTML> contains a HTML specification of a document, including always– “header” information, that is info about the

document– the content of the document

Page 27: CS 607 Web Programming

• The tag pair <HEAD> … </HEAD> contains the header information about the document, including– the title of the document (always present)– other information (optional)

• the tag pair <TITLE> … </TTLE> contains the title of the document

Page 28: CS 607 Web Programming

• The tag pair <BODY> … </BODY> contains the content of the document

Page 29: CS 607 Web Programming

Thus, the simplest HTML specification is of the form:

<HTML>

<HEAD>

<TITLE> Some-title </TITLE>

</HEAD>

<BODY> Some-content </BODY>

</HTML>

Page 30: CS 607 Web Programming

Example document spec:

<HTML>

<HEAD>

<TITLE> A silly document </TITLE>

</HEAD>

<BODY> Isn’t this easy???? </BODY>

</HTML>

Page 31: CS 607 Web Programming
Page 32: CS 607 Web Programming

Another example specification:

<HTML>

<HEAD>

<TITLE> Silly document #2 </TITLE>

</HEAD>

<BODY> Well, well!! </BODY>

</HTML>

Page 33: CS 607 Web Programming
Page 34: CS 607 Web Programming

Dividing text into paragraphs:

Page 35: CS 607 Web Programming

Dividing text into paragraphs<HTML>

<HEAD> <TITLE> The Ironies of History </TITLE> </HEAD>

<BODY>

<P>In August 1914, a bullet was fired in Sarajevo which led,

indirectly, to the deaths of thousands of Congolese in 1999.

The bullet in Sarajevo caused World War I which, in turn, caused

the Russian Revolution. </P>

<P>The Russian Revolution led, eventually, to the Cold War. The Cold

War caused The West to support Mobutu in his kleptocratic rule of

the Congo, leading to such a breakdown of society that the Congo

has experienced a series of civil wars in the late 1990s. </P>

</BODY>

</HTML>

Page 36: CS 607 Web Programming
Page 37: CS 607 Web Programming

The Paragraph tags:

• The tag <P> is used to start a paragraph while the tag </P> is used to end a paragraph

• Ensure you use the </P> tag at the end of a paragraph:– some browsers do not insist on it but other

programs rely on its presence

• NEVER use a </P> tag to get “white space”

Page 38: CS 607 Web Programming

CS 607 got here on 7/10/2003