Basic Tags in HTML.
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also has six
levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While
displaying any heading, browser adds one line before and one line after that heading.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
This will produce following result:
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should
go in between an opening <p> and a closing </p> tag as shown below in the example:
Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
This will produce following result:
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line. This tag is an
example of an empty element, where you do not need opening and closing tags, as there is nothing to go
in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older
browsers will have trouble rendering the line break, while if you miss the forward slash character and
just use <br> it is not valid in XHTML
Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
This will produce following result:
Hello
You delivered your assignment ontime.
Thanks
Mahnaz
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
Write a program to create lists.
Lists are a part of everyday life. To-do lists determine what to get done. Navigational routes provide turn-
by-turn lists of directions. Recipes provide lists of ingredients and lists of instructions. With a list for
nearly everything, it’s easy to understand why they are also popular online.
When we want to use a list on a website, HTML provides three different types to choose from: unordered,
ordered, and description lists. Choosing which type of list to use—or whether to use a list at all—comes
down to the content and the most semantically appropriate option for displaying that content.
In addition to the three different types of lists available within HTML, there are multiple ways to style
these lists with CSS. For example, we can choose what type of marker to use on a list. The marker could
be square, round, numeric, alphabetical, or perhaps nonexistent. Also, we can decide if a list should be
displayed vertically or horizontally. All of these choices play significant roles in the styling of our web
pages.
Unordered Lists
An unordered list is simply a list of related items whose order does not matter. Creating an unordered list
in HTML is accomplished using the unordered list block-level element,<ul>. Each item within an
unordered list is individually marked up using the list item element, <li>.
By default, most browsers add a vertical margin and left padding to the <ul> element and precede
each <li> element with a solid dot. This solid dot is called the list item marker, and it can be changed
using CSS.
1 <ul>
2 <li>Orange</li>
3 <li>Green</li>
4 <li>Blue</li>
5 </ul>
6
Unordered Lists Demo
Ordered Lists
The ordered list element, <ol>, works very much like the unordered list element; individual list items are
created in the same manner. The main difference between an ordered list and an unordered list is that with
an ordered list, the order in which items are presented is important.
Because the order matters, instead of using a dot as the default list item marker, an ordered list uses
numbers.
1 <ol>
2 <li>Head north on N Halsted St</li>
<li>Turn right on W Diversey Pkwy</li>
4 <li>Turn left on N Orchard St</li>
5 </ol>
6
Introduction to CSS.
CSS is a complex language that packs quite a bit of power.
It allows us to add layout and design to our pages, and it allows us to share those styles from element to
element and page to page. Before we can unlock all of its features, though, there are a few aspects of the
language we must fully understand.
First, it’s crucial to know exactly how styles are rendered. Specifically, we’ll need to know how different
types of selectors work and how the order of those selectors can affect how our styles are rendered. We’ll
also want to understand a few common property values that continually appear within CSS, particularly
those that deal with color and length.
Let’s look under the hood of CSS to see exactly what is going on.
The Cascade
We’ll begin breaking down exactly how styles are rendered by looking at what is known as the cascade
and studying a few examples of the cascade in action. Within CSS, all styles cascade from the top of a
style sheet to the bottom, allowing different styles to be added or overwritten as the style sheet progresses.
For example, say we select all paragraph elements at the top of our style sheet and set their background
color to orange and their font size to 24 pixels. Then towards the bottom of our style sheet, we select all
paragraph elements again and set their background color to green, as seen here.
Write a program to Show use of alert, confirm and prompt box
Alert Dialog Box
<html>
<head>
<script type="text/javascript">
<!--
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="Warn();" />
</form>
</body>
</html>
Confirmation Dialog Box
<html>
<head>
<script type="text/javascript">
<!--
function getConfirmation(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
document.write ("User wants to continue!");
return true;
}
else{
document.write ("User does not want to continue!");
return false;
}
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="getConfirmation();" />
</form>
</body>
</html>
Prompt Dialog Box
<html>
<head>
<script type="text/javascript">
<!--
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>
</body>
</html>
Create validation Form in JavaScript.
JavaScript provides a way to validate form's data on the client's computer before sending it to the web
server. Form validation generally performs two functions.
Basic Validation − First of all, the form must be checked to make sure all the mandatory fields
are filled in. It would require just a 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. Your code must include appropriate logic to test correctness of data.
<html><head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
Write a program to create XMLHttpRequest .
Why XML HTTP Request object?
Whilst the object is called the XML HTTP Request object it is not limited to being used with XML, it can
request or send any type of document, although dealing with binary streams can be problematical in
javascript.
Creating the object
In Internet Explorer, you create the object using new ActiveXObject("Msxml2.XMLHTTP") or new
ActiveXObject("Microsoft.XMLHTTP") depending on the version of MSXML installed. In Mozilla and
Safari (and likely in future UA's that support it) you use new XMLHttpRequest() IceBrowser uses yet
another method the window.createRequest() method.
This means that you need to show different script to different browsers, as what works in one, will error
in another. The script below does this, and if it's not supported, the variable is set to false to allow for
appropriate error messages and recovery with degrading to more normal HTTP transaction methods when
the object isn't available. This degradation is important, even in IE the objects can often be blocked by
slightly raised security settings (popular due to the commonly exploited holes of course). Where possible
degrade, some approaches are talked about below, if you really can't, I'd recommend providing an
alternative page aswell. GMail for example has said they'll be providing a less demanding version in the
future, hopefully with no javascript at all, full degradation.
Write a program to Addition of two numbers using php.
<!doctype html>
<html>
<head>
<title>question2</title>
<head>
<body>
<?php
$num1=_$POST["num1"];
$num2=_$POST["num2"];
$result=$num1+$num2;
?>
<form action="test.htm" method="post" name="myform" align="center">
Enter number 1:<input type="text" name="num1" />
<br>
Enter number 2:<input type="text" name="num2" />
<br>
<input type="submit" name="result" />
</form>
<hr>
<table border='1' align='center'>
<td>number 1</td><td>calculate</td><td>number 2</td><td>result</td>
<tr>
<td>
<? echo $num1; ?>
</td>
<td>+</td>
<td>
<? echo $num2; ?>
</td>
<td>
<? echo $result; ?> </td>
</table>
</body>
</html>
SUBHARTI INSTITUTE OF TECHNOLOGY AND
ENGINEERING
MEERUT,UTTAR PRADESH
Web design LAB
As per the requirement of “Swami Vivekananda Subharti University” in the partial fulfillment of the
degree”Master of Technology(computer science)”for the academic year 2015-16
Presented To: Presented By:
Dr.Amit Asthana
SWATI GARG
(Head Department of CSE)
M.Tech 1st Year(CS)
Sr. Topic
No.
1 Basic Tags in HTML.
2 Write a program to create lists.
3 Introduction to CSS.
4 Write a program to create menu using HTML and CSS.
5 Introduction to JavaScript.
6 Write a program to print date using JavaScript.
7 Write a program to Sum and Multiply two numbers using JavaScript.
8 Write a program to Show use of alert, confirm and prompt box.
9 Write a program to redirect, popup and print function in JavaScript..
10 Create validation Form in JavaScript.
11 Write a program to create XMLHttpRequest .
12 Introduction to php.
13 Write a program to Addition of two numbers using php.
INDEX
