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");
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;