Year 2018
Differentiate between HTML and XHTML documents.
HTML and XHTML both are markup languages used for creating web pages and our applications. HTML and XHTML both are almost similar but some keydifference between HTML and XHTML make them apart from each other. XHTMLis the extended version of HTML only with help of using XML as well invalidatingthe elements.
What is the use of <pre>tag?
The HTML <pre> tag is used for indicating preformatted text. The code tag surrounds the code being marked up. Browsers normally render pre text in a fixed-pitched font, with whitespace in tact, and without word wrap.
Differentiate between <div>and <span>elements.
The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.
Write a source code to place an image in XHTML document.
The source code to place an image in XHTML document is <img src=”image-name” alt=”picture”/>
Define post method for sending the data to the server with an example.
Ans: Post method for sending the data is the non-idempotent method where we can send large amount of data because it is the part of the body. Example:
<form method=”post” action=”submit.html”>
Name<input type=”text” id=”uname” name=”uname”/><br/>
Password<input type=”password” id=”pw” name=”pw”/>
<input type=”submit” name=”submit” id=”submit” value=”Submit”/>
</form>
What do you mean by class selector? Give an example.
The .class selector selects elements with a specific classattribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class.
Example:
.text {
color:red; }
Differentiate between margin and padding.
difference between margin and padding is that while padding deals with the inner space,margin deals with the outer space to the next outer element. Padding is space inside the border, whereas Margin is space outside the border.
What do you mean by relative positioning? Give an example.
Position: relative; An element with position: relative; is positioned relative to its normal position.
div.relative {
position: relative; }
List the types of CSS.
There are three types of CSS which are given below:
- Inline CSS
- Internal or Embedded CSS
- External CSS
Define trim function with an example.
String trim() This function returns a new string, without any of the leading or the trailing white spaces. In this example the trim() function removes all the leading and the trailing spaces in the string str.
Year 2017 Makeup
Differentiate between tags and elements.
Tags are used to mark up the start and end of an HTML element whereas an element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:
Write html code to create nested list.
<ol>
<li>Game</li>
<ul>
<li>Football</li>
<li>Volleyball</li>
</ul>
<li>Music</li>
<ul>
<li>Classical</li>
<li>Rock</li>
</ul>
Write html code to create an image button.
<div class=”container”>
<img src=”img_snow.jpg” alt=”Snow”>
<button class=”btn”>Button</button>
</div>
Why relative path should be used to design websites?
An absolute or full path points to the same location in a file system, regardless of the current working directory. … A filename can be considered as a relative path based at the current working directory.
Why do we need to list more than one fonts in font-family property?
Because if browser doesn’t support one than it looks for another so we need to list more than one fonts.
What is the use of z-index property?
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order
Differentiate between border and outline.
Outline is not part of the elements width/height whereas border is. Each edge of the element can have different border properties.
Why validations is performed on both server side and client side.
The purpose of data validation is to ensure correct user input. Form validation is required to prevent web form abuse by malicious users. Improper validation of form data is one of the main causes of security vulnerabilities
What is the use of <noscript> element?
<noscript> tag defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support script. The <noscript>element can be used in both <head> and <body>.
Write a css rule to add an image as bullet point.
ul {
list-style-image: url(“image.jpg”);
}
Year 2017
Define tags and elements.
Tags are used to mark up the start and end of an HTML element whereas an element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:
What is the use of < PRE> tag?
<pre> tag is used for indicating preformatted text. The <pre> tag surrounds the code being marked up as preformatted. Browsers normally render <pre> text in a fixed-pitched font, with whitespace in tact, and without word wrap.
How is id attribute specified?
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.
What are the things that are considered while using images in a webpage?
- correctly labelled by using Alt tags on your images
- Resize and Optimize Your Images
Define padding?
Padding is the space between its content and its border. The padding property is a shorthand property for: padding-top.
What is the use of overflow property?
The overflow property specifies what should happen if content overflows an element’s box. This property specifies whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area.
Write a CSS rule to use image as bullet points in a list.
ul {
list-style-image: url(“image.jpg”);
}
Differentiate between fixed width design and liquid in a list.
fixed uses pixel where as liquid uses percentage Fixed does not fit the browser window wheras liquid fit browser window.
What is the use of lastIndexOf() function?
The lastIndexOf() method returns the position of the last occurrence of a specifiedvalue in a string. Note: The string is searched from the end to the beginning, but returns the index starting at the beginning, at position 0.
What is the use of substring()?
The java substring() method of String class is used for getting a substring from the string.
Year 2016
Differentiate between block level and inline elements?
Block-level elements start on a new line, accumulating one on top of the other and fill all free width whereas Inline-level elements do not start on a new line. They appear in the standard flow of a document, lining up one after the other, and simply manage the width of their content.
For what purpose float property used?
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it
What do you mean by sitemap?
An HTML sitemap allows site visitors to easily navigate a website. It is a bulleted outline text version of the site navigation.
How is array created in Javascript?
var array_name = [item1, item2, …];
Differentiate between substring and substr functions.
The substring() method the second parameter is the index to stop the search, whereas the second parameter of substr() is the maximum length to return.
How is text-shadow property used?
The text–shadow CSS property adds shadows to text.
text-shadow: 0px 2px 3px red;
X-offset, Y-offset, blur,color
Year 2015
Why is <head> tag used in HTML file?
The HTML tag <head> is one of the most important elements of an HTML document. The <head> element is a container for all the head elements can include a title for the document, scripts, styles, meta information, and more.
List HTML elements that are used to add quotations or citations in web page.
<q>
<blockedquate>
<abbr>
<address>
<cite>
<bdo>
What is the use of <span> elements?
The <span> tag is used to group inline-elements in a document.
How link from one part of the page to another part of the same page is created?
By using anchor tag
What is the use of <img> tag?
To import images in webpage.
List the possible values of overflow property.
- Visible
- Hidden
- Scroll
- Auto
How can you change the color of visited link using CSS?
visited {
color: green;
}
In JavaScript, if you have not given any value to a variable then what value that variable will hold?
Undefined
What would be the output of the following JavaScript program?
<script type=”text/JavaScript>
myString = “judge”;
myString = myString.chartAt(2);
myString = myString.toUppercase();
document.write(myString);
</script>
- What are the uses of CSS? Explain combinators with example.
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments.
CSS combinators are explaining the relationship between two selectors. CSS selectors are the patterns used to select the elements for style purpose. A CSS selector can be a simple selector or a complex selector consisting of more than one selector connected using combinators.
There are four types of combinators available in CSS which are discussed below:
-
- General Sibling selector (~)
- Adjacent Sibling selector (+)
- Child selector (>)
- Descendant selector (space)
- General Sibling selector (~)
div ~ p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
- Adjacent Sibling selector (+)
div + p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
- Child selector (>)
div > p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
- Descendant selector (space)
div p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
- Explain different HTTP methods. Why the web form should be validated? Write a JavaScript program to check whether user entered number is Prime or not.
The most common HTTP methods are GET and POST.
The GET method:
- GET is used to request data from a specified resource.
- GET requests can be cached
- GET requests remain in the browser history
- GET requests can be bookmarked
- GET requests should never be used when dealing with sensitive data
- GET requests have length restrictions
- GET requests is only used to request data (not modify)
The POST method:
- POST is used to send data to a server to create/update a resource.
- The data sent to the server with POST is stored in the request body of the HTTP
- POST requests are never cached
- POST requests do not remain in the browser history
- POST requests cannot be bookmarked
- POST requests have no restrictions on data length
The web form should be validated in order to take valid data from the user. It also helps us to ensure that users fill out forms in the correct format, making sure that submitted data will work successfully with our applications.
Source code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function check()
{
var i;
var count=0;
var n1;
var c=0;
n1=document.getElementById('prime').value;
for(i=2;i<n1;i++)
{
if(n1%i==0)
{
c+=1;
}
}
if(c==0)
{
alert("The entered no. is prime");
}
else
{
alert("The entered no. is not Prime");
}
}
</script>
</head>
<body>
<label>Enter Number </label><input type="number" name="number" id="prime">
<button onClick="check()">Check</button>
</body>
</html>
Get vs. Post
There are many differences between the Get and Post request. Let’s see these differences:
| GET | POST |
| 1) In case of Get request, only limited amount of data can be sent because data is sent in header. | In case of post request, large amount of data can be sent because data is sent in body. |
| 2) Get request is not secured because data is exposed in URL bar. | Post request is secured because data is not exposed in URL bar. |
| 3) Get request can be bookmarked. | Post request cannot be bookmarked. |
| 4) Get request is idempotent . It means second request will be ignored until response of first request is delivered | Post request is non-idempotent. |
| 5) Get request is more efficient and used more than Post. | Post request is less efficient and used less than get. |
– Create a HTML login form which includes username, password and repassword and validate it using java script.
Field should not be empty
Passoword and repassword must be same.
Password must be more than 8 character long.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
input{
display: block;
}
button{
display: block;
padding: 5px 15px;
}
</style>
</head>
<body>
Username : <input type="text" id="username">
Password : <input type="password" id="password">
Re-Password : <input type="password" id="repassword">
<button onclick="validate();">Log In</button>
<script type="text/javascript">
function validate() {
var username=document.getElementById('username');
var password=document.getElementById('password');
var repassword=document.getElementById('repassword');
if(username.value==""||password.value==""||repassword.value==""){
alert("Fields are Empty !!!");
}
if(password.value!=repassword.value){
alert("Passoword doesnot Match !!");
}
if(password.value.length<8){
alert("Password must be greater than 8 character.");
}
}
</script>
</body>
</html>
Also Read: Web Programming – I | Question Bank | BIM 3rd Semester
TU Question Bank Solution
Year 2015 Question No. 7
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Username: <input type="text" name="" placeholder="First"> <input type="text" name="" placeholder="Last"> <br>
Password: <input type="text" name="" placeholder="Password"> (Password must be at least 6 character) <br>
Phone No.: <input type="number" name="" placeholder="Phone No.">(Number must contains 7 digits) <br>
<input type="submit" name="" value="Submit">
</body>
</html>
Year 2016 Question No. 11
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body><p style="align-content: center;">
Trim Number <input type="text" name=""><br>
Form Prepared By<input type="text" name=""><br>
<hr>
Dept/Division <input type="text" name=""><br>
Email<input type="Email" name="">
<Br>
<hr>
Visa Required <input type="radio" name="radio"> Yes
<input type="radio" name="radio"> <br>
Visitor Visa Type <selet>
<option > Please Select </option>
<option>
Indian</option>
</select>
<br>
<hr>
<input type="checkbox" name=""> Send Mail
<br>
<input type="submit" name="" value="send">
<input type="reset" name="" value="reset">
</select></p>
</body>
</html>
Year 2016 Question No. 12
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
input{
display: block;
}
button{
display: block;
padding: 10px 20px;
}
</style>
</head>
<body>
Username :
<input type="text" name="" id="username">
Password :
<input type="password" name="" id="password">
Re-Password :
<input type="password" name="" id="repassword">
<button onclick="validate();"> Validate</button>
<script type="text/javascript">
function validate() {
var username=document.getElementById('username');
var password=document.getElementById('password');
var contat=document.getElementById('repassword');
if (password.value !==repassword.value)
{
alert('Password Doesnot Match');
}
}
</script>
</body>
</html>
Year 2016 Question No. 15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Box</title>
</head>
<style type="text/css">
*{
margin:0px;
}
#container{
height: 400px;
width: 400px;
border-color: red;
border-spacing: 5px;
background-color: black;
}
#upper{
height :200px;
width :400px
}
#left{
height: 200px;
width :200px;
background-color: red;
float:left;
}
#right{
height: 200px;
width :200px;
background-color: yellow;
float:left;
}
#lower{
height :200px;
width :400px
}
#cleft{
height: 200px;
width :200px;
background-color: grey;
float:left;
}
#cright{
height: 200px;
width :200px;
background-color: pink;
float:left;
}
</style>
<body>
<div id="container">
<div id="upper">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="lower">
<div id="cleft"></div>
<div id="cright"></div>
</div>
</div>
</body>
</html>
Year 2018 Question No. 12
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Username:
<input type="Text" name="" id="username">
Password:
<input type="Password" name="" id="password">
<button onclick="validate();"> Submit </button>
<script type="text/javascript">
function validate() {
var username=document.getElementById('username');
var password=document.getElementById('password');
if(username.value==""||password.value=="")
{
alert('Field is Empty !!');
}
if(username.value==password.value)
{
alert("Username and Password must be different.");
}
if(username.value.length && password.value.length<=5)
{
alert('Username and Password should be greater than 5 character');
}
}
</script>
</body>
</html>
Year 2017 Question No. 12
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#a{
border: 1px solid black;
width:80%;
float: left;
height: 30px;
border-bottom: none;
border-right: none;
}
#b{
border: 1px solid black;
width:18%;
float: left;
height: 30px;
border-bottom:none;
}
#c{
border: 1px solid black;
width:18%;
float: left;
height: 80px;
}
#d{
border: 1px solid black;
border-left:none;
width:80%;
float: left;
height: 80px;
}
#e{
border: 1px solid black;
border-top:none;
width:98%;
float: left;
height: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
</body>
</html>
Year 2017 Question No. 14
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
</style>
<body><p>
Agent Name: <input type="text" name=""><input type="text" name=""><input type="text" name=""><br>
Address: <input type="text" name=""><br>
Agent Type: <input type="radio" name="type">Individual <input type="radio" name="type">Organization<br>
Country: <select>
<option>(please select a country)</option>
<option>Nepal</option>
<option>India</option>
<option>Japan</option>
<option>China</option>
</select><br>
Email: <input type="email" name=""><br>
Comments:
<textarea rows="10" cols="50" placeholder="comments write here......"></textarea>
<input type="checkbox" name=""> I, here by, declare that all the information provided are correct.<br><br>
<input type="submit" name="" value="Submit"> <input type="Reset" name="" value="Reset">
</p>
</select>
</body>
</html>
Year 2018 Question No. 11
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#first{
width: 99%;
float: left;
height: 30px;
border:1px solid black;
border-bottom: none;
}
#hari{
height: 30px;
width: 20%;
float: left;
height: 80px;
border:1px solid black;
}
#third{
width:59%;
float: left;
height: 80px;
border:1px solid black;
border-left: none;
border-right:none;
}
#fourth{
width:20%;
float: left;
height: 80px;
border:1px solid black;
}
#fifth{
border:1px solid black;
border-top: none;
width:99%;
float: left;
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="first">Header goes Here</div>
<div id="hari">Topic <br>Html <br>css <br>javascript</div>
<div id="third"> main contain goes here</div>
<div id="fourth"> other contains</div>
<div id="fifth">Copyright @ 2074 www.mysite.com</div>
</body>
</html>
Year 2018 Question No. 12
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Username:<br>
<input type="text" name="" id="username"><br>
Password:<br>
<input type="password" name="" id="password"><br>
Re-password: <br>
<input type="password" name="" id="repassword"><br>
<button onclick="validate();"> Log In</button>
<script type="text/javascript">
function validate(){
var username=document.getElementById("username");
var password=document.getElementById('password');
var repassword=document.getElementById('repassword');
if(username.value==""||password==""||repassword==""){
alert("field cannot be empty!!!");
}
if(username.value==password.value){
alert("username and password must be different");
}
if(username.value.length<=5||password.length<=5){
alert("username and password must be greater than 5 char.");
}
if(password.value!=repassword.value){
alert("password doesnot match")
}
}
</script>
</body>
</html>