Introduction to ClientSide Web Development Introduction to ClientSide
Introduction to Client-Side Web Development Introduction to Client-Side programming using HTML/Applets 27 th January 2005 Bogdan L. Vrusias b. vrusias@surrey. ac. uk 27 th January 2005 Bogdan L. Vrusias © 2005
Introduction to Client-Side Web Development Introduction • Today, the everyday WWW user desires a fancy looking and functional Website for his/her 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: 27 th January 2005 Client-Side Web Development Bogdan L. Vrusias © 2005 2
Introduction to Client-Side Web Development Session I Contents • • • HTML Basics Building Tables Building Forms Using Style Sheets Introduction to Java Applets 27 th January 2005 Bogdan L. Vrusias © 2005 3
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 with HTML, XHTML, or XML. • Java. Script can be used on both client and server side, in order to build entire Web applications. 27 th January 2005 Bogdan L. Vrusias © 2005 4
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. 27 th January 2005 Bogdan L. Vrusias © 2005 5
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 27 th January 2005 Bogdan L. Vrusias © 2005 6
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 27 th January 2005 Bogdan L. Vrusias © 2005 7
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 <br/> • Elements can contain other elements (nested elements). <p>Text <b>Bold Text<b/>…</p> 27 th January 2005 Bogdan L. Vrusias © 2005 8
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. 27 th January 2005 Bogdan L. Vrusias © 2005 9
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</font></h 1> <p>You will learn basic <b>HTML</b> today. </p> </body> </html> 27 th January 2005 Bogdan L. Vrusias © 2005 10
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/ 27 th January 2005 Bogdan L. Vrusias © 2005 11
Introduction to Client-Side Web Development HTML Basics: 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 (<br/>). • 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"> 27 th January 2005 Bogdan L. Vrusias © 2005 12
Introduction to Client-Side Web Development Working with HTML I • URIs – URIs can be absolute or relative (may be case sensitive): – Absolute: <img src="http: //www. abc. ac. uk/img/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. 27 th January 2005 Bogdan L. Vrusias © 2005 13
Introduction to Client-Side Web Development Working with HTML II • 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) ' (apostrophe) > (greater than) " (quotation mark) 27 th January 2005 (non-breaking space) © (copyright symbol) < (less than) α (Greek small letter alpha) Bogdan L. Vrusias © 2005 14
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. 27 th January 2005 Bogdan L. Vrusias © 2005 15
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"> 27 th January 2005 Bogdan L. Vrusias © 2005 16
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. 27 th January 2005 Bogdan L. Vrusias © 2005 17
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> 27 th January 2005 Bogdan L. Vrusias © 2005 18
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. 27 th January 2005 Bogdan L. Vrusias © 2005 19
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_1" 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. 27 th January 2005 Bogdan L. Vrusias © 2005 20
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. 27 th January 2005 Bogdan L. Vrusias © 2005 21
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 <input <input type="button" id="button_1" value="NEXT" /> type="checkbox" id="checkbox_1" /> type="hidden" id="hidden_1" value="n 5569301" /> type="image" src="submit. gif" id="image_1" /> type="password" id="password_1" /> type="radio" id="radio_1" /> type="reset" id="reset_1" /> type="submit" id="submit_1" /> type="text" id="text_1" value="enter name" /> type="textarea" id="textarea_1"></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. 27 th January 2005 Bogdan L. Vrusias © 2005 22
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> 27 th January 2005 Bogdan L. Vrusias © 2005 23
Introduction to Client-Side Web Development HTML Form: Example <form id="form_1" method=“post" action=“login. jsp"> <table border="2"> <tr> <td>username</td> <input type="text" id="username" size="20" maxlength="20"> </td> </tr> <td>password</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> 27 th January 2005 Bogdan L. Vrusias © 2005 24
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". 27 th January 2005 Bogdan L. Vrusias © 2005 25
Introduction to Client-Side Web Development CSS: Inline Example <HTML> <HEAD> <TITLE> CSS example for book </TITLE> </HEAD> <BODY> <H 1 style=“color: cyan”>The heading</H 1> <P style=“font-size: large”> The body text is <I style=“background-color: #32 CD 32; color: white”>displayed</I> here </P> </BODY> </HTML> 27 th January 2005 Bogdan L. Vrusias © 2005 26
Introduction to Client-Side Web Development CSS: Embedded Example <HTML> <HEAD> <TITLE> CSS example for book </TITLE> <STYLE TYPE = “text/css”> I {background-color: #32 CD 32; color: white} H 1{color: cyan} P {font-size: large} </STYLE> </HEAD> <BODY> <H 1>The heading</H 1> <P> The body text is <I>displayed</I> here </P> </BODY> </HTML> 27 th January 2005 Bogdan L. Vrusias © 2005 27
Introduction to Client-Side Web Development CSS: External Example I Course. Style. css 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 } (… continues on next page) 27 th January 2005 Bogdan L. Vrusias © 2005 28
Introduction to Client-Side Web Development CSS: External Example II 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 } (… continues on next page) 27 th January 2005 Bogdan L. Vrusias © 2005 29
Introduction to Client-Side Web Development CSS: External Example III <!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=“Course. 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"> <br/> <a href="Course. List. htm">View a list of our courses</a> <br/> <a href="Mailing. List. htm"><img src="Mailing. gif" alt="Mailing List" /> Sign up for our mailing list </a> </div> </body> </html> 27 th January 2005 Bogdan L. Vrusias © 2005 30
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. 27 th January 2005 Bogdan L. Vrusias © 2005 31
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. 27 th January 2005 Bogdan L. Vrusias © 2005 32
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: <applet codebase=". " code="My. Ap. class" name="Test. Applet" width="200" height="300"> </applet> or <object code="My. Ap. class" width="200" height="300"></object> • 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. 27 th January 2005 Bogdan L. Vrusias © 2005 33
Introduction to Client-Side Web Development Applet Example I import java. applet. Applet; import java. awt. Graphics; public class My. Ap extends Applet { public void paint(Graphics g) { g. draw. String("Hello world", 50); } } 27 th January 2005 Bogdan L. Vrusias © 2005 34
Introduction to Client-Side Web Development Applet Example II import java. applet. *; import java. awt. event. *; public class My. Ap 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); } } 27 th January 2005 Bogdan L. Vrusias © 2005 35
Introduction to Client-Side Web Development Passing Parameters to an Applet. Example. html <applet codebase=". " code="My. Ap. class" name="Test. Applet“> <param name="msg" value="5"> </applet> My. Ap. java … public void init() { … show. Status("Msg = " + get. Parameter("msg")); button. Count = Integer. parse. Int(get. Parameter("msg")); } … 27 th January 2005 Bogdan L. Vrusias © 2005 36
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 27 th January 2005 Bogdan L. Vrusias © 2005 37
Introduction to Client-Side Web Development Compiling an Applet • Write your Java code in a plain text file format (i. e. notepad) and save it with a “. java” extension. • Remember that the name of the file has to be exactly the same as the applets class name. • Open a DOS prompt, go to the directory containing the Applet’s java file, and then type: javac My. Ap. java • That will create a My. Ap. class file that you can call from your HTML page. NOTE: Your system has to have Java SDK installed and the “Environmental Variables” setup, to be able to compile Applets. 27 th January 2005 Bogdan L. Vrusias © 2005 38
Introduction to Client-Side Web Development Applets vs. Application • There a number of differences between Java 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 displayed using visual widgets which reside on the Web page rather than objects such as System. out. – Applets are always developed by extending the Applet class. Applications usually extend the Frame class. 27 th January 2005 Bogdan L. Vrusias © 2005 39
Introduction to Client-Side Web Development Session I: Closing • • Questions? ? ? Remarks? ? ? Comments!!! Evaluation! 27 th January 2005 Bogdan L. Vrusias © 2005 40
- Slides: 40