Introduction to ClientSide Web Development Introduction to ClientSide

Introduction to Client-Side Web Development Introduction to Client-Side programming using HTML/Applets 29 th January 2004 Bogdan L. Vrusias b. vrusias@surrey. ac. uk 29 th January 2004 Bogdan L. Vrusias © 2004

Introduction to Client-Side Web Development Introduction • Today the everyday WWW user desires a fancy looking and functional Website for his needs. • Client-side scripts, XML, cascading style sheets, and technologies for building fancy graphical user interfaces are essential for building interactive and high-performance Web applications. • Introducing: 29 th January 2004 Client-Side Web Development Bogdan L. Vrusias © 2004 2

Introduction to Client-Side Web Development Session I Contents • • • Introduction to the Web HTML Basics Building Tables Building Forms Using Style Sheets Introduction to Java Applets 29 th January 2004 Bogdan L. Vrusias © 2004 3

Introduction to Client-Side Web Development What the Web is • Web is the network of computers that contain information that one can view from a browser. • The internet consists of computers that communicate through an Internet Service Provider (ISP). • The intranet is a private network that allows access only to computers directly connected to it. • An extranet extends the intranet by allowing specific customers to access parts of the intranet. 29 th January 2004 Bogdan L. Vrusias © 2004 4

Introduction to Client-Side Web Development What the Web is • The World Wide Web (WWW) is the collection of interlinked documents (also called Web pages) over the Internet. • The Web pages can be viewed through a Web browser (such as Microsoft Internet Explorer, Netscape, Mozilla, Opera, etc. ) • The Web pages are located on a Web server, from which a Web browser downloads the page to the client and displays it. • The collection of Web pages is called a Web site. 29 th January 2004 Bogdan L. Vrusias © 2004 5

Introduction to Client-Side Web Development What the Client-Side is • The client-side of developing Web applications consists of the browser, the e. Xtensive Hyper. Text Markup Language (XHTML) and the scripting languages. • Client-side refers to anything happening within the browser. • Java. Script is a "simple" and "easy" programming language that works perfectly with HTML, XHTML, or XML. • Java. Script can be used on both client and server side, in order to build entire Web applications. 29 th January 2004 Bogdan L. Vrusias © 2004 6

Introduction to Client-Side Web Development History: The Internet • 1960… beginning of the Internet • The Advanced Research Projects Agency (ARPA) of the Department of Defence implemented the ARPAnet (grandparent of today's Internet). • Multiple users where able to send and receive information over a common communication path simultaneously. • Internet and Intranet evolved very fast and ARPA created the TCP/IP as a combined set of protocols for communication. 29 th January 2004 Bogdan L. Vrusias © 2004 7

Introduction to Client-Side Web Development History: WWW • The information carrying capacity (bandwidth) and the popularity has increased tremendously over the years, and lots of businesses rapidly realised the benefits of the Internet. • 1990… Tim Berners-Lee of CERN (the European Laboratory of Particle Physics) developed the World Wide Web (WWW). • WWW allowed businesses and everyday users to browse or even create multimedia-based documents over the Web. 29 th January 2004 Bogdan L. Vrusias © 2004 8

Introduction to Client-Side Web Development Clients and Servers • A server is a computer which carries out a service such as printing out a file or responding to a web page. – A file server provides files for the clients that ask for its service. – Database servers are computers which store large collections of data which are structured. – Groupware is software which organises the work of a number of staff in some enterprise. – A web server is a typical type of file server that contain files which store the various components of a web site. – A mail server is a computer which has the task of receiving, storing, and sending email. – Object servers are design to hold distributed objects and provides facilities for programs executing on a client computer. – A print server is a computer which receives requests from clients for printing. – An application server is a server which is dedicated to one or more particular applications and contains special-purpose programming code that is specific to that application. • A client is some computer which requires a service. 29 th January 2004 Bogdan L. Vrusias © 2004 9

Introduction to Client-Side Web Development Web Server • A Web server is a server which dispenses documents that reside on the World Wide Web. 29 th January 2004 Bogdan L. Vrusias © 2004 10

Introduction to Client-Side Web Development The Client-Side • Browsers – The door to the Web where the user can interact. – The interface of a Web-based application. – Types: Microsoft Internet Explorer, Netscape, Mozilla, Opera, etc. • XHTML – Is a markup language that provides formatting and structure to the content of a document. – Is a reformulation of HTML in XML. • Scripting Languages – Scripting languages provide substantial capabilities when working with XHTML elements and objects. – Java. Script is the leading scripting language. Other scripting languages are VBScript and Perl. Script. 29 th January 2004 Bogdan L. Vrusias © 2004 11

Introduction to Client-Side Web Development How the Web Works • The user requests to view a Web page from the Web Server by opening a Transport Control Protocol (TCP). • Each Web page has a Uniform Resource Identifier (URI), which is a uniform naming scheme for all the resources on the Internet (or Intranet). There are two types of URIs the Uniform Resource Locator (URL) and the Uniform Resource Name (URN). – URL: http: //www. computing. surrey. ac. uk/courses/ – URN: urn: def: //Java. Script • Each Web server has a unique Internet Protocol (IP) address (e. g. University of Surrey has 131. 227. 76. 230). • The URI is translated into the corresponding IP address through the Domain Name System (DNS). 29 th January 2004 Bogdan L. Vrusias © 2004 12

Introduction to Client-Side Web Development How the Web Works • The user communicates with the server through the Hyper. Text Transport Protocol (HTTP), the network protocol for the Web. • The server then processes the client's request and sends the response to the client's browser • The browser then parses the HTML it receives, and then it displays it's content. 1. Author writes instructions 5. HTML stream returned to browser 6. Browser processes HTML and displays page. 3. Web server locates instructions file 4. Web server processes instructions to create HTML 29 th January 2004 2. Client request web page Bogdan L. Vrusias © 2004 13

Introduction to Client-Side Web Development DHTML Basics • Dynamic Hyper. Text Markup Language (DHTML) is the combinative use of technologies that is needed to output dynamic behaviour in your Web application. • The main technologies used for a dynamic behaviour are: – – – HTML Cascading Style Sheets (CSS) Browser Object Model Document Object Model (DOM) Scripting Language (Java. Script) Java Applets 29 th January 2004 Bogdan L. Vrusias © 2004 14

Introduction to Client-Side Web Development HTML Basics • Hyper. Text Markup Language (HTML) is the basic language of the Web, which allows the developer to specify formatting, layout, and style for the Web document. • An HTML document is divided into the markup syntax and the pure content. – The markup syntax (called HTML tags) is surrounded by angle brackets (< … >) to distinguish them from the contents. – The Web browser parses these tags in order to determine how to display the document content. • The HTML tags contain elements and each element may have attributes. – Elements define structure, layout, formatting and behaviour. – Attributes give control over the look and behaviour of the elements 29 th January 2004 Bogdan L. Vrusias © 2004 15

Introduction to Client-Side Web Development HTML Basics: Elements • HTML Elements are divided with a beginning tag (<Tag. Name>) and an ending tag (</Tag. Name>). <b>Text</b> • The text between the beginning and ending tag is the content of the element. • Some elements contain no content. or </br> or • Elements can contain other elements (nested elements). <p>Text <b>Bold Text<b/>…</p> 29 th January 2004 Bogdan L. Vrusias © 2004 16

Introduction to Client-Side Web Development HTML Basics: Attributes • Attributes are placed within the beginning tag of the element. An attribute consists of its name, followed by an equal sign, followed by a value within single ('value') or double ("value") quotes. <font color="red" size="3">Red Text</font> <input type="checkbox" checked /> • A Web document that conforms to the HTML syntax rules is called a well-formed HTML document. 29 th January 2004 Bogdan L. Vrusias © 2004 17

Introduction to Client-Side Web Development HTML Basics: The basic HTML Document Example: <html> <head> <!-- This text will not appear in the browser --> <title>Title of the page</title> </head> <body bgcolor="red"> <h 1><font color="blue">Welcome to the course</font></h 1> <p>You will learn basic <b>HTML</b> today. </p> </body> </html> 29 th January 2004 Bogdan L. Vrusias © 2004 18

Introduction to Client-Side Web Development HTML Basics: XHTML • The e. Xtensible Hyper. Text Markup Language (XHTML) is the newest version of HTML, and can be defined as the application of the e. Xtensible Markup Language (XML) to HTML. • The purpose of XHTML is to provide a more consistent interpretation and display of the HTML in any browser. • See: http: //www. w 3. org/TR/xhtml 1/ 29 th January 2004 Bogdan L. Vrusias © 2004 19

Introduction to Client-Side Web Development HTML Basics: XHTML • XHTML basic characteristics: – – – Documents must be well-formed. The root element must be the <html> tag. All tags must be in lowercase (<b>, not <B>). Empty tags must have a trailing slash ( ). All non empty tags must have an end tag (</b>). All attributes must be defined (<input … checked="checked">, not <input … checked>). – When defining identities the id attribute must be used where the name attribute was used before. The id attribute must be unique. – All body elements must be contained within block-level elements, such as <p>, <div>, or <table>. – There must be a doctype declaration before any element in the document: <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> 29 th January 2004 Bogdan L. Vrusias © 2004 20

Introduction to Client-Side Web Development Working with HTML • URIs – URIs can be absolute or relative (may be case sensitive): – Absolute: <img src="http: //www. somewhere. ac. uk/images/banner. gif" /> <img src="/images/banner. gif" /> – Relative: <img src="banner. gif" /> <img src="images/banner. gif" /> <img src=". . /images/banner. gif" /> • Colours – Logical names: <body bgcolor="blue">…</body> – Hexadecimal RGB (where 00 is minimum and FF is maximum): <body bgcolor="#0000 FF">…</body> – There is a browser-safe palette with 216 colours to support the limitations of 256 colour display systems. 29 th January 2004 Bogdan L. Vrusias © 2004 21

Introduction to Client-Side Web Development Working with HTML • Fonts – Fonts have three basic properties: style, size, and color: <font face="times, courier, arial" size="3" color="blue">text</a> • Hyperlinks – The anchor tag: <a href="welcome. html">Welcome page</a> <a href="welcome. html"><img src="logo. gif"/></a> • Character Entities – Character entities are used when you want to display a character that has a special meaning to HTML syntax. – They begin with an ampersand (&) and end with a semicolon (; ): & (ampersand) &apos; (apostrophe) > (greater than) " (quotation mark) 29 th January 2004   (non-breaking space) © (copyright symbol) < (less than) α (Greek small letter alpha) Bogdan L. Vrusias © 2004 22

Introduction to Client-Side Web Development Browser Compatibility Issues • Not all browsers follow the W 3 C standards. • If a browser does not support a specific element or attribute, it will either display the page in a different way, or not at all. • There are several ways to go around that problem: – Limit to very basic HTML supported by most browsers. – Predetermining the type of browser and having several versions of the same page for each browser. – Determine what most people use and only support these browser compatibilities. • Always test your pages with several browsers before launching a Web page. 29 th January 2004 Bogdan L. Vrusias © 2004 23

Introduction to Client-Side Web Development HTML Tips & Tricks • Screen Resolution: Optimise your page to fit a small resolution monitor, or when user resizes its browser's window. • Directories and Files: You may create logical names for each file and directory, in order to remember which file is which. • Default Web Page: Make sure you have the default page named default. htm or index. html (depending on your Web server), so that the Web server can locate it. • Images: The most popular graphics file format for images are gif, jpeg, and png. Reduce the resolution and colour depth as much as possible to ensure small file size (especially for colour block images). • Search engines: Use the meta data information tags to specify keywords and description of your page. <meta name="keywords" content="client-side, Java. Script, training course"> <meta name="description" content="Client-side web development training course"> 29 th January 2004 Bogdan L. Vrusias © 2004 24

Introduction to Client-Side Web Development HTML Table: Basics • An HTML table consists of rows and columns. Each block formed by the intersection of a row and a column is called cell. • HTML tables can be used to display tabular data, or they can be used as an invisible grid to arrange the elements on the page. • The main elements related to a table are: – – – <table> which states the beginning of a table. <tr> which states the beginning of a row. <td> which states the beginning of a column. <th> which states the beginning of a column's header. <caption> which represents the caption for a table. • The <table> element has attributes such as: – Border, cellpadding cellspacing, width, height, align, etc. • The <td> element has attributes such as: – Align, valign, width, height, colspan, rowspan, etc. 29 th January 2004 Bogdan L. Vrusias © 2004 25

Introduction to Client-Side Web Development HTML Table: Example <table border="1"><caption>CS 381 - Course</caption> <tr> <th>Week</th><th>Subject</th> </tr> <td>First</td><td>Introduction</td> </tr> <td>Second</td><td>Client-Side Web Development</td> </tr> <td>Third</td><td>Server-Side Web Development</td> </tr> </table> 29 th January 2004 Bogdan L. Vrusias © 2004 26

Introduction to Client-Side Web Development HTML Table: Tips & Tricks • Use fixed column widths when possible, because the browser needs to calculate them before displaying the table. • Limit the use of nested tables where possible. • Empty cells may not appear correctly, so use   or dummy (transparent) one pixel images. • If you have a long data table you can use scroll bars (<div> tags) to control its appearance. 29 th January 2004 Bogdan L. Vrusias © 2004 27

Introduction to Client-Side Web Development HTML Form: Basics • HTML forms provide the user the ability to interact with the server. • Forms are vital for developing Web applications. • Forms contain control elements (such as buttons and text fields) where users can enter data and submit the form to the server. • The basic form element is: <form id="frm_user" method="get" action="login. jsp">…</form> • You can have more than one forms in a document (each with a unique id), but you cannot nest forms within other forms. • All controls within the form should have an id, otherwise the values of these controls will not be submitted to the server for process. • Data is submitted in pares (name=value), where name is the name attribute and value is the value attribute of an element. 29 th January 2004 Bogdan L. Vrusias © 2004 28

Introduction to Client-Side Web Development HTML Form: The Method Attribute • The method attribute can take two parameters get and post: – Submitting a page with the GET method: • • • Default value. The data form appears in the URI, and can be edited by the user. Prevents non-ASCII character data from being submitted. Is limited to the amount of characters that the browser can handle. The user can bookmark the page. – Submitting a page with the POST method: • • • Form data is submitted in the body of the page. The user cannot see the submitted values. Supports non-ASCII characters. Supports large amounts of data. The user cannot bookmark the page. 29 th January 2004 Bogdan L. Vrusias © 2004 29

Introduction to Client-Side Web Development HTML Form: Control Elements • The form elements are also called controls or fields. Some of these are: – <input></input> <input type="button" id="button_1" value="NEXT" /> <input type="checkbox" id="checkbox_1" /> <input type="hidden" id="hidden_1" value="n 556993001" /> <input type="image" src="submit. gif" id="image_1" /> <input type="password" id="password_1" /> <input type="radio" id="radio_1" /> <input type="reset" id="reset_1" /> <input type="submit" id="submit_1" /> <input type="text" id="text_1" value="enter name" /> <input type="textarea" id="textarea_1"></input> <input type="file" id="file_1" /> – Basic attributes for the input tags are: align, checked (checkbox or radio only), maxlength (for text fields), size (for text fields), disabled, and readonly. 29 th January 2004 Bogdan L. Vrusias © 2004 30

Introduction to Client-Side Web Development HTML Form: Control Elements • Other important controls are: – <select><option></select> <select id="choice_1"> <option selected value="choice_1_0">Please select</option> <option value="choice_1_1">Yes</option> <option value="choice_1_2">No</option> </select> – <textarea></textarea> <textarea id="text_1" rows="50" cols="100"> This is the text area. </textarea> – <label></label> <label for="email">e-mail address</label> <input type="text" id="email" /> or <label>e-mail address<input type="text" id="email" /></label> 29 th January 2004 Bogdan L. Vrusias © 2004 31

Introduction to Client-Side Web Development HTML Form: Example <form id="form_1" method="get" action=""> <table border="2"> <tr> <td>username</td> <td><input type="text" id="username" size="20" maxlength="20"></td> </tr> <td>password</td> <td><input type="password" id="pswrd" size="8" maxlength="8"></td> </tr> <td colspan="2" align="middle"><input type="submit" value="Login"></td> </tr> </table> </form> 29 th January 2004 Bogdan L. Vrusias © 2004 32

Introduction to Client-Side Web Development Cascading Style Sheets • Cascading Style Sheets (CSS) is a specification that defines how HTML elements should be formatted and displayed on the browser's page. • In a CSS you can define a set of properties such as font size, color and name, for a specific element on the page. • The basic syntax is as follows: element, … {property: value; …} • The specific element style is applied to every element for every page that uses that style sheet. • CSS can be defined in three basic ways in the HTML document: – Inline: using the style attribute of an element – Embedded: within the HTML page – External: as an external file with extension ". css". 29 th January 2004 Bogdan L. Vrusias © 2004 33

Introduction to Client-Side Web Development CSS: Benefits • Save time: You only have to modify one file that can affect many pages, instead of each page individually. • Simplify maintenance: CSS are easy to edit and maintain, and with just one simple change you could update the entire Web site. • Consistency: You can specify which exactly element and which attribute to be formated, within a page or the whole Web site. • Improve appearance: CSS provide you with many formatting capabilities even some that are not provided by HTML. 29 th January 2004 Bogdan L. Vrusias © 2004 34

Introduction to Client-Side Web Development CSS: Example p{ margin-left: 0. 5 in; font-family: arial; position: relative } p. key { font-size: 20 pt; color: red } p. normal { font-size: 15 pt; color: navy }. margin { margin-left: 0. 5 in } body { background-color: #D 2 B 48 C } (… to be continued) 29 th January 2004 Bogdan L. Vrusias © 2004 35

Introduction to Client-Side Web Development CSS: Example div. foreground { margin-left: 0. 5 in; color: #E 2 C 48 C; font-family: arial; font-size: 120 pt; position: absolute; top: 50 px; left: 20 px; z-index: 0 } div. shadow { margin-left: 0. 5 in; color: #C 2 A 48 C; font-family: arial; font-size: 120 pt; position: absolute; top: 52 px; left: 22 px; z-index: 0 } (… to be continued) 29 th January 2004 Bogdan L. Vrusias © 2004 36

Introduction to Client-Side Web Development CSS: Example <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "DTD/xhtml 1 -strict. dtd"> <html> <head><title>Welcome Page</title> <link rel="stylesheet" type="text/css" href="Training. Style. css" /> </head> <body> <div class="shadow">Courses</div> <div class="foreground">3 Day Courses</div> <h 1 class="margin">Welcome</h 1> <p class="key"> Our training courses are the best in the industry. </p> <p class="normal">Sign up for one of our courses today. </p> <div class="margin"> <a href="Training. Course. List. htm">View a list of our courses</a> <a href="Training. Mailing. List. htm"><img src="Mailing. List. gif" alt="Mailing List" /> Sign up for our mailing list </a> </div> </body> </html> 29 th January 2004 Bogdan L. Vrusias © 2004 37

Introduction to Client-Side Web Development Java Applets • Applets are found embedded within Web pages and contain visual widgets and Panel objects. • A small piece of Java code that cannot execute independently. • Applets enable the developer to embed functionality within a Web page. • Typical examples of the use of applets include: – – Providing forms in which the user can put information. Providing simple animations on a Web page. Displaying data from a database. Implementing graphical devices such as image maps: graphics in which hyperlinks are embedded. 29 th January 2004 Bogdan L. Vrusias © 2004 38

Introduction to Client-Side Web Development Applets & HTML • An applet is embedded into a Web page by writing some very simple statements in HTML. • The simplest form for this HTML is: <OBJECT code="My. Ap. class" WIDTH="200" HEIGHT="300"></OBJECT> or <APPLET CODEBASE=". " CODE="My. Ap. class" NAME="Test. Applet" WIDTH="200" HEIGHT="300"> </APPLET> • As well as enhancing the functionality of Web pages, applets are useful because they transfer some of the processing load from a server to a client; rather than overload a server with the processing required for an applet’s functionality it is shared round all the clients accessing the server. 29 th January 2004 Bogdan L. Vrusias © 2004 39

Introduction to Client-Side Web Development Applet Example import java. applet. *; import java. awt. event. *; public class simple. Applet extends Applet implements Action. Listener { private Button click. Button; private int button. Count; public void init() { click. Button = new Button("Click here"); add(click. Button); button. Count = 0; click. Button. add. Action. Listener(this); } public void action. Performed(Action. Event ae) { button. Count++; show. Status("Click total = " + button. Count); } } 29 th January 2004 Bogdan L. Vrusias © 2004 40

Introduction to Client-Side Web Development Applet Life Cycle • init() – Called the first time that an applet is loaded • start() – Called after the init() method, and thereafter each time a browser returns to a page on which an applet is contained • stop() – Called any time a browser leaves a Web page containing the applet • destroy() – Called before a browser completely shuts down 29 th January 2004 Bogdan L. Vrusias © 2004 41

Introduction to Client-Side Web Development Applets vs. Application • There a number of differences between applets and Java applications. These are: – Applets do not use constructors; they use the overridden init method to carry out tasks such as initialising instance variables. – They are not allowed to use System. exit() to terminate. It is the browser which terminates the execution of applets. – All output is to visual widgets which reside on the Web page rather than to objects such as System. out. – Applets are always developed by extending the Applet class. Applications usually extend the Frame class. 29 th January 2004 Bogdan L. Vrusias © 2004 42

Introduction to Client-Side Web Development Session I: Closing • • Questions? ? ? Remarks? ? ? Comments!!! Evaluation! 29 th January 2004 Bogdan L. Vrusias © 2004 43