Web Application

Published on February 2017 | Categories: Documents | Downloads: 25 | Comments: 0 | Views: 222
of 30
Download PDF   Embed   Report

Comments

Content

User Interface

Introduction to HTML

What is HTML?


Telling the browser what to do, and what props to use. A series of tags that are integrated into a text document. Tags are ; surrounded with angle brackets like this <B> or <I>. Most tags come in pairs exceptions: <P>, <br>, <li> tags … The first tag turns the action on, and the second turns it off.















The second tag(off switch) starts with a forward slash. For example ,<B> text </B> can embedded, for instance, to do this: <HEAD><TITLE> Your text </HEAD></TITLE> it won't work. The correct order is <HEAD><TITLE> Your text </TITLE></HEAD> not case sensitivity. Many tags have attributes. For example, <P ALIGN=CENTER> centers the paragraph following it. Some browsers don't support the some tags and some attributes.

















Basic HTML Document Format

<HTML> See what it <HEAD> looks like: <TITLE>WENT'99</TITLE> </HEAD> <BODY> Went'99 </BODY> </HTML>

Basic Tags
Tag <html> <body> <h1> to <h6> <p> <br> <hr> <!--> Description
Defines an HTML document Defines the document's body Defines header 1 to header 6 Defines a paragraph

Inserts a single line break Defines a horizontal rule Defines a comment

Tag
<b>

Character format tag

Description
Defines bold text Defines big text Defines emphasized text

<i>

Defines italic text Defines small text Defines strong text

Contd..
Tag Description Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text

FRAME TAGS
Tag Description Defines a set of frames Defines a sub window (a frame) Defines a noframe section for browsers that do not handle frames

Add some Link Use <A href=filename|URL></a>tags Kinds of URLs -http://www.women.or.kr - ftp://ftp.foo.com/home/foo - gopher://gopher.myhost.com/ - news://news.nuri.net

Add Images

Use <IMG SRC=imagefilename> tags Attributes of IMG tag -width,height -Alt
-<Img src=”my.gif” width=”50” height=”50” alt=“My image”/>

Introduction
CSS stands for Cascading Style Sheets ●Styles define how to display HTML elements ●CSS can save a lot of work ●CSS are stored in CSS files


ADVANTAGES: ●Separation of content from presentation ●Page reformatting.

CSS RULE
Syntax:
Selector { Property:Value; } Example : P { color:red; }

CSS ID
ID selector : - used to specify a style for a single, unique element. - uses the id attribute of the HTML element, and is defined with a "#". Example : #para1 { text-align:center; color:red; }

CSS Class

class selector -used to specify a style for a group of elements. -used on several elements. Example .center {text-align:center;}

Three Ways to Insert CSS · External style sheet · Internal style sheet · Inline style

External Style Sheet

External style sheets (CSS) allow us to use one style sheet on multiple web pages Example: <head> <link rel="stylesheet"type="text/css"href="mystyle.css " /> </head>

An internal style sheet should be used when a single document has a unique style. We define internal styles in the head section of an HTML page Example: <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {backgroundimage:url("images/back40.gif");} </style> </head>

Internal Style Sheet

Inline Styles

To use inline styles we use the style attribute in the relevant tag. The style attribute can contain any CSS property. Example: <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Cascading order Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element)

JavaScript is
JavaScript is an interpreted programming language


Designed for creating network-centric applications


JavaScript was designed to add interactivity to HTML pages
● ●

Open and cross-platform JavaScript can read and write HTML elements JavaScript can be used to validate data





· Less server interaction: of JavaScript You can validate user Advantagespage off to the server. input before sending the This saves server traffic, which means less load on your server. · Immediate feedback to the visitors: They don't have to wait for a page reload to see if they have forgotten to enter something. · Increased interactivity: You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard. · Richer interfaces: You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site

A JavaScript consists of JavaScript statements that are placed within the <script>... </script> HTML tags in a web page. You can place the <script> tag containing your JavaScript anywhere within you web page but it is preferred way to keep it within the <head> tags. The <script> tag alert the browser program to begin interpreting all the text between these tags as a script. So simple syntax of your JavaScript will be as follows <script ...> JavaScript code </script>

Javascript syntax

The script tag takes two important attributes: · language: This attribute specifies what scripting language you are using. Typically, its value will be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute. · type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set to "text/javascript". So your JavaScript segment will look like: <script language="javascript" type="text/javascript"> JavaScript code </script>

JavaScript Popup Boxes
In JavaScript we can create three kinds of popup boxes: Alert box, Confirm box, and Prompt box. Alert box : When you want to make sure information comes through to the user alert box is used. When an alert box pops up, the user will have to click "OK" to proceed. Syntax: alert("sometext"); Confirm box: If you want the user to verify or accept something, Confirm box is used. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. Syntax: confirm("sometext"); Prompt box: A prompt box is used if you want the user to input a value before entering a page. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. Syntax: prompt("sometext","defaultvalue");

Simple javascript program
<html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click me!“ onclick="displaymessage()" > </form> </body> </html>

Need for Validation
Form validation used to occur at the server, after the client had entered all necessary data.


If some of the data entered in the wrong form or was simply missing, the server would request that the form be resubmitted with correct information.


This was really a lengthy process and over burdening server.


Form validation generally performs two functions. Basic Validation - First of all, the form must be checked to make sure data was entered into each form field that required it. This would need just loop through each field in the form and check for data. Data Format Validation - Secondly, the data that is entered must be checked for correct form and value. This would need to put more logic to test correctness of data.

Example program for validation
<html> <head> <script type="text/javascript"> <!-function validate_form ( ) { valid = true; if ( document.email_form.email.value == "" ) { alert ( "Please fill in the 'Email' box." ); valid = false; } } return valid;

//-->

</script> </head> <body> <form name="email_form" action="submitpage.htm" onsubmit="return validate_form()" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close