Programming the web

Explain following tags, with example: i) Select ii) Frame iii) Textarea iv) Div 8M
i) Select:
1. <select> tag represents a selection list on an HTML form. Using this tag select object is
created on HTML form.
2. The select object is also called as property of the form object.
3. Attributes of select tag:
Name: this indicates label of the selection.
Size: this indicates the number of list items to be displayed.
Multiple: it is used to select more than one selection.
Selected: it is used to display an item is selected.
4. <option> tag is used inside to the <select> tag to insert options.
5. Syntax:
<select name=”name” size=”size”><option value=”value”>……</select>
6. Example:
<select name=”n1” size=”1”>
<option value=”0”>
</select>
Output:
ii) Frame:
1. The <frame> tag defines single frames in frameset.

2. To insert frames into HTML document <frame> tag is used with <frameset> tag.
3. Attributes of <frame> tag:
Src: the URL of the document to be displayed in the frame.
Name: it identifies name of the frame.
Border: the size of the frame border.
Marginheight: it specifies margin height of the frame.
Marginwidth: it specifies margin width of the frame.
Scrolling: the default scrolling value is “auto” and “yes” or “no” are depends on the user.
Noresize: cannot resize frame window.
4. Syntax:
<html>
<head><title>frames</title></head>
<frameset cols/rows=””>
<frame src=”URL”>
</frameset>
</html>
5. Example:
<html>
<head><title>frames</title></head>
<frameset cols=”50%,50%”>
<frame src=”frame1.html”>
<frame src=”frame2.html”>
</frameset>
</html>

Output:
iii) Textarea:
1. <textarea> tag represents HTML textarea element.
2. Attributes/Properties of <textarea> tag:
Name: name of the textarea object.
Value: the value of the textarea object.
Rows: the number of rows displayed in the textarea object.
Cols: the number of column to be displayed.
3. Syntax:
<form>
<textarea name=”” rows=”” cols=”” value=””>
Text
</textarea>
</form>
4. Example:

<html>
<head><title>textarea</title>
</head>
<body>
<form>
<textarea name=”txt1” rows=”10” cols=”40”>
Displayed text
</textarea>
</form>
</body>
</html>
Output:
iv) Div:
1. The <div> tag defines a division or a section in an HTML document.
2. The <div> tag is used to group block-elements to format them with CSS.
3. Attribute of <div> tag:

Align: left, center, right or justify. It specifies the alignment of the content of <div> tag.
4. Syntax:
<div style="" align=””>
<h3>text</h3>
<p>text<p>
</div>
5. Example:
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
Output:
Write a JavaScript to read and email ID from the user using prompt and validate it. It
should contain a '@' and '.' (dot). 4M
emailvalidate.html:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()

{
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address! It should contain '@' and '.'");
return false;
}
else
{
alert("Email validation successful...")
}
}
</script>
</head>
<body>
<form name="myForm" action="" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:

Write a JavaSript program tocheck the validity of phone number. 8M
Mobilevalidation.html:
<!DOCTYPE html>
<html>
<head>
<script>
{
var x = document.forms["myForm"]["mobile"].value;
if(x=="") alert("Enter Mobile Number");
else if(x.length<10) alert("Mobile number Should be 10 numbers");
else if(x.length>10) alert("Mobile number Should be 10 numbers");
else
{

for(i=0;i<x.length;i++)
{
x=x.charAt(i);
if(x=='0' || x=='1' || x=='2' || x=='3' || x=='4' || x=='5' || x=='6' || x=='7' || x=='8' || x=='9')
{
c=1;
break;
}
else
c=0;
}
}
if(c==0) alert("Mobile number consists only numbers");
else alert("Entered Mobile number is validate");
}
</script>
</head>
<body>
<h3>Enter your phone number:</h3><br>
Mobile Number: <input type="text" name="mobile" size="10">
</form>
</body>

Explain syntactic differences between HTML and XHTML. 6M
No. HTML XHTML
1 HTML stands for Hypertext Markup
Language.
XHTML stands for Extensible Hypertext
Markup Language.
2 HTML is main markup language. XML is family of XML language.
3 HTML is not mandatory for one root
element.
XHTML documents must have one root
element.
4 HTML is used to format data. XHTML is markup language used to describe
data.
5 HTML is developed by W3C and
WHATWG.
XHTML is developed by World Wide Web
Consortium.
6 Internet media types for HTML: text/html Internet media types for XHTML:
application/xhtl+xml
7 Filename extensions for HTML: .htm and
.html
Filename extension for XHTML: .xhtml, .xht,
.xml, .html and .htm
8 Web pages are written in HTML. Web pages are written in XML.
9 You cannot create your own tags. You can create your own tags.
10 An HTML document can be XML. An XML document cannot be HTML.
11 Versions of HTML: HTML2, HTML3.2,
HTML4.0 and HTML5
Versions of XHTML: XHTML1, XHTML1.1,
XHTML2 and XHTML5
Explain with an example the following tags:
i. <a> ii. <img> iii. <meta> iv. <pre> 8M
i. <a>:
1. <a> tag stands for anchor tag.
2. This tag is used to give hyperlinks on the web pages.
3. Attributes of <a> tag:
Href: URL of the file to be open.
Target: _blank: new window
_self: same window
_parent: parent window
_top: full body of window
Download – filename(to download file)

Type – media_type
4. Syntax of <a> tag:
<a href=”URL” target=””>text</a>
5. Example:
<html><body>
<a href="feedback.html" target="_blank">Click here to give feedback</a>
</body></html>
Output:
ii. <img>:
1. To insert images on webpage <img> tag is used.
2. <img> tag is also used to add videos on webpages.
3. Attributes of <img> tag:
Src: path of the image with name and extension.
Dynsrc: path of the video file to be inserted with name and extension.
Height: height of the image.
Width: width of the image.
Align: alignment of the image.
4. Syntax of <img> tag:
<img src=”url of image” height=”number” width=”number” align=”alignment”>
5. Example:
<html><body>
<img src="image1.png" height="200" width="200" align="left">

</body></html>
Output:
iii. <meta>:
1. The <meta> tag provides metadata about the HTML document.
2. Meta elements are typically used to specify page description, keywords, author of the
document, last modified and other metadata.
3. The metadata can be used by browsers, search engines or other web services.
4. Attributes of <meta> tag:
Style: to give style.
charset: Specifies the character encoding for the HTML document
content: Gives the value associated with the http-equiv or name attribute
http-equiv: Provides an HTTP header for the information/value of the content attribute
name: Specifies a name for the metadata
scheme: Specifies a scheme to be used to interpret the value of the content attribute
5. Syntax of <meta> tag:
<meta style=””> name=”” content=””>=””>>
6. Example:
Setting the viewport to make your website look good on all devices:

1. <pre> tag defines pre-formatted text. Text flow cannot control by browser.
line breaks.
4. Example:
<pre>
This is pre tag.
</pre>
Output:
ii. <blockquote>:
1. <blockquote> tag defines a quoted, indented text block.
2. To validate <blockquote> element as XHTML, it must contain other block level elements.
Syntax:
<blockquote><p>paragraph text</p></blockquote>
Example:
<html>
<head><title>blockquote</title></head>
<body>
<blockquote>
<p>This is paragraph.</p>

</blockquote>
</body></html>
Output:
iii. <a>:
1. <a> tag is anchor tag.
2. It defines a hyperlink to another Web page.
3. Attributes of <a> tag:
Href: URL of the file to be open.
Target: _blank: new window
_self: same window
_parent: parent window
_top: full body of window
Download – filename(to download file)
Type – media_type
4. Syntax:
<a href=”URL” target=””>text</a>
5. Example:
<html><body>
<a href="feedback.html" target="_blank">Click here to give feedback</a>
</body></html>
Output:

iv. <meta>:
charset: Specifies the character encoding for the document
5. Syntax:
6. Example: Setting the viewport to make your website look good on all devices:
Difference between primitives and objects in JavaScript 4M
No. Primitives Objects
1 A primitive is a data type that is
composed of no other data types.
An object can be thought of a molecule,
consisting of more than one primitive type.
2 It cannot break down any further type. It can break down further.
3 Primitives are passed by value, i.e. a copy
of the primitive itself is passed.
The copy of the reference is passed, not the
object itself.
4 Primitives are independent data types. Every Object is descendent of class "Object".
5 The primitives do not have any default Every object has some default methods.

methods.
6 No need to take special care of primitives. Need to take special care of object.
7 Primitives are like an atom. Objects are similar to molecules.
Illustrate with JavaScript program handling of events from button elements. 6M
Events of button elements are as follows:
i. onclick
ii. onDblclick
iii. onmousedown
iv. onmouseup
v. onmousemove
vi. onmouseout
vii. onmouseover
JavaScript program to illustrate above events:
buttonevent.html:
<html>
<head>
<title>events of button element</title>
<script language="javascript">
function f1()
{
alert("onclick event occurs");
}
function f2()
{
alert("onDblclick event occurs");

}
function f3()
{
alert("onmousedown event occurs");
}
function f4()
{
alert("onmouseup event occurs");
}
function f5()
{
alert("onmousemove event occurs");
}
function f6()
{
alert("onmouseout event occurs");
}
function f7()
{
alert("onmouseover event occurs");
}
</script>
</head>
<body>

<br><br>
<input type="button" name="b1" onclick="f1()" value="click here"><br><br>
<input type="button" name="b2" onDblclick="f2()" value="Double click here"><br><br>
<input type="button" name="b3" onmousedown="f3()" value="press mouse button"><br><br>
<input type="button" name="b4" onmouseup="f4()" value="press and release mouse
button"><br><br>
<input type="button" name="b5" onmousemove="f5()" value="move mouse
pointer"><br><br>
<input type="button" name="b6" onmouseout="f6()" value="move mouse pointer
out"><br><br>
<input type="button" name="b7" onmouseover="f7()" value="move mouse pointer"><br><br>
</body>
</html>
Output:
i. onClick: first button “click here” is pressed.

ii. onDblclick: double click on second button “Double click here”.
iii. onmousedown: press mouse button on third “press mouse button” button.
iv. onmouseup: release mouse button after pressing it on fourth button “press and release
mouse button.

v. onmousemove: move pointer on fifth button i.e. “move mouse pointer”.
vi. onmouseout: move out pointer from sixth button “move mouse pointer out”.
vii. onmouseover: move pointer on senenth button i.e. “move mouse pointer”. It is similar to
onmousemove event.

Write a program to illustrate the nested ordered list in XHTML. 7M
Nestedol.html:
<html>
<head><title>nested ordered list in XHTML</title></head>
<body>
<h1>Nested Ordered List of city</h1>
<ol>
<li>Mumbai</li>
<ol>
<li>with railway stations</li>
<ol>
<li>DADAR</li>
<li>ANDHERI</li>
<li>MALAD</li>
</ol>
<li>without railway stations</li>
<ol>
<li>WORLI</li>

<li>JUHU</li>
<li>COLABA</li>
</ol>
</ol>
<li>Navi Mumbai</li>
<ol>
<li>with railway stations</li>
<ol>
<li>VASHI</li>
<li>BELAPUR</li>
<li>JUINAGAR</li>
</ol>
<li>without railway station</li>
<ol>
<li>SANPADA</li>
<li>MANPADA</li>
</ol>
</ol>
</ol>
</body>
</html>
Output:

Explain ordered and unordered list with example. 7M
Ordered list:
1. An ordered list is list of ordered values. Ordered list are numbered values.
2. An ordered list is used when the sequence of items is important.
3. Ordered list is created using <OL> tag and its ending </OL> tag.
4. List items are created using <LI> tag.
5. OL stands for ordered list and LI stands for list item.
6. Syntax:
<ol>
<li>
<li>
</ol>
7. Example:
<html>
<head><title>ordered list</title></head>

<body>
<b>Railway stations</b>
<ol>
<li>DADAR</li>
<li>ANDHERI</li>
<li>MALAD</li>
</ol>
</body>
</html>
Output:
Unordered list:
1. An unordered list is list of unordered values. Unordered list are bulleted values.
2. An unordered list is used when the sequence of items is not important.
3. Unordered list is created using <UL> tag and its ending </UL> tag.
4. List items are created using <LI> tag.
5. UL stands for unordered list and LI stands for list item.
6. Syntax:
<ul>
<li>
<li>

</ul>
7. Example:
<html>
<head><title>unordered list</title></head>
<body>
<b>Railway stations</b>
<ul>
<li>DADAR</li>
<li>ANDHERI</li>
<li>MALAD</li>
</ul>
</body>
</html>
Output:
Discuss the following tags with syntax and examples: i. <pre> ii. <meta> 4M
i. <pre>:
1. The HTML <pre> tag is used for indicating preformatted text.
line breaks.
3. Attributes of <pre> tag:
Width: specifies the maximum number of characters per line. Not supported by HTML5

5. Example:
<pre>
This is pre tag.
</pre>
Output:
ii. <meta>:
charset : Specifies the character encoding for the HTML document
5. Syntax of <meta> tag:

6. Example:
Setting the viewport to make your website look good on all devices:
Write a regular expression to validate the mail of the following type abc@yahoo.co.in
in a Javascript Function. 6M
Emailvalidate.html:
<!DOCTYPE html>
<html>
<head>
<script>
{
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".co.in");
if (atpos<1 || dotpos<2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address! It should contain '@' and '.'(It should be in the form of
'ABC@yahoo.co.in')");
return false;
}
else
{
alert("Email validation successful...")

}
}
</script>
</head>
<body>
Email: <input type="text" name="email">
</form>
</body>
</html>
Output:
Develop a complete XHTML document with proper headings, a table with four rows
and three columns, a form with two labels, two textbox three checkbox, three radio
buttons, a submit and a reset button. (Assume suitable content for the web page). 8M

Form.html:
<html> <head><title>form</title> </head>
<body>
<h1 align="center">Fill your information below</h1>
<h3 align="center">All the information should be filled properly</h3>
<table rows="4" cols="3" border="1" align="center" width="500" height="200">
<tr><th>Name</th>
<th>Address</<th>
<th>Contact</th></tr>
<tr><td>Don't do spelling mistakes</td>
<td>Enter full address</td>
<td>It may be mobile or landline</td></tr>
<tr>
<td>Don't include Mr, Mrs, etc.</td>
<td>Also include Pin Code</td>
<td>Also include country code</td></tr>
<tr><td>Check before submitting</td>
<td>Check before submitting</td>
<td>Check before submitting</td></tr></table>
<font size="5"><form align="center">
First Name: <input type="text" size="20">
Last Name: <input type="text" size="20"></br>
Gender: <input type="radio" name="r1"><label for="Male">Male</label> <input type="radio"
name="r1"><label for="Female">Female</label> <input type="radio" name="r1">Other</br>

Interest: <input type="checkbox" name="c1">Singing <input type="checkbox"
name="c2">Dancing <input type="checkbox" name="c3">Acting</br> <input type="submit"
name="submit" value="Submit"> <input type="reset" name="reset" value="Reset"></font>
</body></html>
Output:
Explain URL, MIME with proper examples. 6M
URL:
1. URL stands for Uniform Resource Locator.
2. It provides a way to locate resource on the web.
3. The URL contains two parts:
i. First part of URL identifies what protocol is used.
ii. Second part of URL identifies the IP address or Domain name.
4. A URL is mainly used to locate a webpage or website.
5. URL is a path of file which is stored on the server.

6. Example:
http://www.stupidsid.com
The resource is to be retrieved using HTTP protocol on the web.
MIME:
1. MIME stands for Multi-Purpose Internet Mail Extension.
2. It is extension of email protocol that helps people to exchange their data or files.
3. MIME has been adopted by web servers to tell web browsers what type of material is being
sent.
4. There are two parts of MIME content:
i. A main type
ii. A sub type
5. The main type is separated from sub type by a forward slash character.
6. Example:
content-type:text/plain; charset=iso-8080-2
In the above example text is main type and plain is sub type.
Explain how to create a Hello World example. 10M
1. To create Hello World example in JavaScript include <script> tag inside <head> tag and its
ending </head> tag.
2. The type attribute of <script> tag defines the type of the script code and the language
attribute defines language of the script code.
3. To create Hello World example in JavaScript we have taken value of language is “JavaScript”.
4. To display Hello World text a function is used called as document.write().
5. Hello World text is inserted inside the document.write() using double inverted commas.
6. The following line illustrates the above sentence,
document.write(“Hello World”)

7. The function should end with “;” character.
8. Then the file is saved using filename.html or filename.htm.
9. To display the example, double click on the file i.e. filename.html or give the path of the file
into the address bar of the browser.
10. The file which will be displayed on the web browser is the example of “Hello World”.
11. Example:
Helloworld.html:
<html>
<head>
<title>Hello World</title>
<script type="text/javascript" language="javascript">
document.write("Hello World");
</script>
</head>
<body></body>
</html>
12. Output:

Rails 5M
1. Rails is a server side web application framework written in ruby. Ruby is a high-level
programming language.
2. Ruby originated in Japan. Factors such as open source, easy to learn, very easy to extend and
helpful community are responsible for popularity of Ruby.
3. Rails is a model–view–controller (MVC) framework which provides default structure for a
database, a web service, and web pages.
4. David Heinemeier Hansson first released Rails as a open source in July 2004.
5. Developer can develop a web application at least ten times faster with Rails as compare to
typical Java framework.
6. In this framework compilation phase is not required.
7. Rails requires fewer lines of code than other framework.
8. Rails encourages and facilitates the use of web standards such as JSON or XML to transfer
data and HTML, CSS and JavaScript to display data and for user interface.
9. Rails is separated into various packages are Active Record, Active Resource, Action Pack,
Active Support and Action Mailer.
10. Features of rails:
i. Meta programming
ii. Active record
iii. Convention over configuration
iv. Scaffolding
v. Built-in testing
11. Rails gives you three environments:
i. Development: Creation of program/application.
ii. Testing: Testing of application.
iii. Production: Making your application available for customers or users.

Write a XHTML program to illustrate a form which accepts buyer’s Name, Address,
City, State, zip, Product name (Book, Mobile, Pen drive), Price, Quantity, Payment
method (Visa, master card, Discover, Check), submit button and clear form button. 7M
Orderform.html:
<html>
<head><title>form</title>
</head>
<body>
<p align="center"><font color="red" size="7" face="Baskerville Old Face"><b>Fill following form
to place order</b></font></p>
<form align="center" method="post" name="order">
Buyer's Name: <input type="text" size="40"></br></br>
Address: <input type="text" size="20"> City:
<select><option>Mumbai</option><option>Goa</option><option>Pune</option></select></b
r></br>
State: <input type="text" size="20"> zip: <input type="text" size="20"></br></br>
Product name:<input type="radio" name="r1">Book <input type="radio" name="r1">Mobile
<input
type="radio" name="r1">Pen drive</br></br>
Price: <input type="text" size="20"> Quantity: <input type="text" size="5"></br></br>
Payment method:<select><option>Visa</option><option>master
card</option><option>Discover</option><option>Check</option></select></br></br>
<input type="submit" value="submit"> <input type="reset" value="clear">

</form>
</body></html>
Output:
With the help of an example, explain any one event associated with the following elements
i. Body ii. Button iii. Textbox. 6M
i. Body:
onClick event-
ii. Button:
iii. Textbox:

Programming the web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Programming the web

Ähnlich wie Programming the web (20)

Mehr von chirag patil

Mehr von chirag patil (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Programming the web