HTML and Some Scripting

HTML Example
Begins the HTML document

<html>  <head> <title>Hypertext Markup Language (HTML) Example</title> </head> HTML docs contain both  a head and body section <body bgcolor="#0000AA"> <font color="#FFFFFF"> <h1><u>Hypertext Markup Language</u></h1> Hypertext Markup Language (HTML) allows users to: <ol> <li>format and display text</li> Sets browsers background colour <li>display images </li> to blue and font colour to white <li>and so much more </li> </ol> Creates a bulleted list of items <img src="HTMLexample.jpg"> <a href="#top">Go to top of page</a> Inserts an image </font> </body> </html> Creates a hyperlink back to the top of the page
HTML-Hyper text markup language Language used to create web pages Web page is a text file that contains instructions in the form of html codes Container tags- html instruction/commands that require a start tag and end tag Start tag is < > and end tag is </ > <tagname [attributes]> </tagname> Attributes for additional information Section tags- <html></html>, <head></head>, <body></body>
Empty tag- do not require a end tag eg:<br> - break tag. Eg: pgm <html> <head><title>example program</title></head> <body> <p> hello </p> </body></html> Save the content with the extension html Eg: ProgramName.html Run using a web browser like internet explorer or Netscape
Text formatting tags <b></b> - bold font <i></i> - italic font <u></u> -underline <sub></sub> - subscript <sup></sup> - superscript Eg: <body> <b> hello</b> <i> hello</i> <u>hello</u> </body>
Eg: <body bgcolor=yellow text=red > <font color= #ff0000 face=Arial bold size=6> <p align=right> this is a sample text for font </p> </font> <p> this is normal text </p> </body> Eg: <body> H<sub>2</sub>O x<sup>2</sup>+y<sup>2</sup> </body>
The img tag lets u place a graphics image on a web page The img tag uses a src attribute with a relative pathname Eg: <body> <p> this first para above the picture</p> <img src=/D:folder1/folder2/image.jpg > </img> <p> this second para below the picture</p> </body>
<div> tag let u assign one or more formatting attributes to a group of html tags Eg: <body> <div align=center> <p> this first para above the picture</p> <img src=image.jpg <p> this second para below the picture</p> </div> </body> Eg: <body> <marquee align=top behaviour=scroll bgcolor=yellow height=40 width=300 direction=down loop=infinite> HELLO FRIENDS</marquee></body>
Document type definition(DTD) Identifies the version of the HTML used. Given at the top of the html document before the <html> tag <!doctype html public version name url> !doctype is the tag which doesnt need a closing tag Html is the version of html Public whether accessible by public Version name complete name of the specific version of html url indicates where on the world wide web a public definition of the html code resides. Eg: <!doctype html public -//W3C//DTD HTML 4.01 Transitional//EN WWW.W3.org/TR/html4/loose.dtd >
Comment a line <! Comments --> Eg: <body> hi <! hello --> </body> Heading level tags <H1></H1> <H2></H2> <H3></H3> <H4></H4> <H5></H5> <H6></H6>
Alignment <center> </center> - to center the graphics image and text Eg: <Body> <center><img src=flower.jpg> <p> text centered</p> </center> <p> text </p> </body>
Adding a link Eg: for information <a href=info.html> click here</a> To connect to yahoo <a href=http://www.yahoo.com>click here </a> Horizontal rule <hr> - to create horizontal rule thats separates the text Eg: <body> <p> contact us </p> <hr width=25> <p> help </p> <hr> </body>
Eg: <body> <p> contact us </p> <hr width=50% align=left noshade size=2 > <p> help </p> </body> Blockquote tags for indenting the text ie for increasing the margins Eg: <body> <p> this regular text</p> <blockquote> this text is blockquoted</blockquote> </body>
LISTING 1. Ordered list 2. Unordered list
Ordered list <Body> <h2>course u wish to join</h2> <ol> <li> MBA</li> <li> MCA</li> </ol> </body>
Type is an attribute of <ol> which indicates which type of listing is needed <ol type=1 > default <ol type=a > <ol type=A > <ol type=i > <ol type=I > Start is another attribute <ol type=a start=5>
UnOrdered list <Body> <h2>shopping list</h2> <ul> <li> bread</li> <li> butter</li> <li> jam</li> </ul> </body> Type attribute can be disc, square, circle where default is dot eg: <ul type=disc>
Nested list <Body> <h2>shopping list</h2> <ul> <li> bread</li> <li> butter</li> <li> sweets</li> <ol type=a> <li> jam</li> <li> strawberrys</li> </ol> </ul> </body>
Page frame Contains separate URL for each frame Applicable when u want to display more than one page in a single application window Frames simply arrange multiple web pages within a single document window There will be either body tag or frameset tag Frameset tag to create frames in a web page Col attribute of frameset tells the web browser to draw 2 frames and to make the respective pixel width frames.
Src attribute of frameset will tell the name of the web page to be displayed within the frame when the browser is initially loaded. Eg: <html> <head><title>framed document</title></head> <frameset cols=80,400> <frame name=menu src=menu.html> <frame name=content src=Content.html> </frameset> </html>
<a href=aboutus.html target=content > About Us </a> <frameset cols=80,*,400,*> <frame name=menu src=menu.html> <frame name=content src=Content.html> <frame name=sample1 src=about.html> <frame name=sample2 src=scms.html> </frameset>
Creating table <table> </table> - to treat the text between these tags as table <tr></tr> - to treat as row <td> </td> - to treat as column example:1 <table > <tr> <td> 1 </td> <td> 2 </td> </tr> <tr> <td> K.S Chitra </td> <td> Sonu Nigam </td> </tr> </table>
Eg:2 <table border=1 > <caption> headings in a row</caption> <tr> <th> SI No: </th> <th> Singers </th> </tr> <tr> <td> K.S Chitra </td> <td> Sonu Nigam </td> </tr> </table>
Eg:3 <table border=1 > <caption> headings in a column </caption> <tr> <th> Alex </th> <td> mark1 </td> <td> mark2 </td> </tr> <tr> <th align=right> kishore </th> <td align=left> mark1 </td> <td> mark2 </td> </tr> </table>
To set color
Bordercolor sets the bordercolor for the table Eg: <table bordercolor=#00008B > <td bordercolor=#008000> Eg: <table border=1 bgcolor=#0000FF > Eg: <table background=images/picture.gif>
Cellspacing attribute to increase the blank space between cells in table. Eg: <table border=1 cellspacing =10> Cellpadding attribute to increase the blank space between the sides of the cell and the content in the cell Eg: <table border=1 cellpadding =5> Table dimension eg: <table width=764 height=558> eg: <table width=100% height=100%>
Cell dimension <td width=200 height=300> sonu nigam </td> <td width=33% height=40%> sonu nigam </td> Cell alignment <td width=25% height= 25% align=top> sonu nigam </td>
Example <table border=2 cellspacing =6 cellpadding =5 > <tr> <td width=25% height= 25% align=center><img height=32 width=32 src=giraffe.jpg></td> <td width=25% height= 25% align=top><img height=32 width=32 src=lion.jpg></td> <td width=25% height= 25% align=bottom><img height=32 width=32 src=sheep.jpg></td> </tr> </table>
Example
<table border=2 cellspacing =4 cellpadding =7 >

<tr> <td><a href=http://www.yahoo.com>for yahoo click here </a></td> <td><a href=http://www.msn.com> for msn click here </a></td> <td><a href=http://www.rediff.com> for rediff click here </a></td> </tr> </table>
Form Tags
The form element creates a form for user input. A form can contain textfields, checkboxes, radio-buttons and more. Forms are used to pass user-data to a specified URL.
Tag
<form> <input> <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button>
Description
Defines a form for user input Defines an input field Defines a text-area (a multi-line text input control) Defines a label to a control Defines a fieldset Defines a caption for a fieldset Defines a selectable list (a drop-down box) Defines an option group Defines an option in the drop-down box Defines a push button
<html> <body> <form> Name: <input type=text name=a size=5 value= id=text1> Password:<input type=password name=b id=pwd1> Address: <TextArea name=txtmsg rows=5 cols=60> </textarea> Sex: <input type=checkbox name=ck1 value=on> male <input type=checkbox name=ck2 value=on > female
may we give ur email id to others: <input type=radio value=yes name=rd1> yes <input type=radio value=no name=rd1> no <select size=1 name=course> <option value=s1> MBA </option> <option value=s2> MBA </option> </select> <input type=button value= click this button onclick=clickedcall()> <input type=submit value=submit name=sub1 onclick=add()> <input type=reset value=clearform onclick=clear()> </form> </body> <html>
Example:1 <html> <head> <title> creating forms </title> <script language=javascript> Function checklogin() { .stmts..; } </script> </head> <body> <form name=form1> User name <input type=text name=txt1>
<input type=button value=click onclick=checklogin() > </form> </body> </html> -------------------------------------------------------------------------Function checklogin() { document.form1.text1.value=hello; alert ( thanks for stopping by! ) ; } Syntax: document.formname.control document.formname.control.property document.formname.control.method(arguments)
Event handlers Syntax: Eventhandler= functionname() Onblur, onclick, onerror, onfocus, onkeydown, onkeypress, onkeyup, ondragdrop, ondoubleclick, onchange,onmousedown, , onreset,onsubmit, onload, onunload etc etc..
Function mycompute() { A=document.frm1.txt1.value B=document.frm1.txt2.value C=document.frm1.txt3.value D=eval((A*B)/C); Alert (the value is:+D); } Document.frm1.txt1.value=A
Function mycompute() { var A A=document.frm1.txt1.value Alert (variable A is displayed:+A); } <html> <head> <script language=javascript> Function nal(num) { if(num= = 0)
alert(hai) if(num= = 1) alert(hello) if(num= = 2) alert(goodafternoon) } <form> <input type=button value=hai onclick=nal(0)> <input type=button value=hello onclick=nal(1)> <input type=button value=goodafter onclick=nal(2)> </form> </body></html>
Var A=document.f1.t1.value <html> <head> <script language=javascript> Function naloo() { var wind document.writeln(going to open a new window) wind=window.open(x1.html,[400]); }
<script langauge=javascript> Function budget() Var budget budget=20 If (budget>20) { Document.writeln(expensive) } Else { Document.writeln(inexpensive) } </script>
Switch(grade) { case first: stmts break; case distinction: stmts break; case second: stmts break; }
For.. loop syntax for (intialization; test; increment) { code } Eg: For (var a=1;a<=10;a++) { document.writeln(hello from javascript for loop) }
While(condition) { Code } Eg: Var abc=0 While( abc <=2001) { abc++ }
Do { Code }while (condition) Eg; Do{ Document.writeln(goodevening) }while (condition=red)

HTML and Some Scripting

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML and Some Scripting

Hochgeladen von

Copyright:

Verfügbare Formate

HTML Example

Begins the HTML document

LISTING 1. Ordered list 2. Unordered list

<table border=2 cellspacing =4 cellpadding =7 >

While(condition) { Code } Eg: Var abc=0 While( abc <=2001) { abc++ }

Do { Code }while (condition) Eg; Do{ Document.writeln(goodevening) }while (condition=red)

Das könnte Ihnen auch gefallen