Web Technology

Shri Venkteshwar Institute Of Technology
Experiment 1
AIM: Introduction to HTML and XHTML
HTML is a markup language. It tells the web browser what content to display.
HTML separates "content" (words, images, audio, video, and so on) from
"presentation" (the definition of the type of content and the instructions for
how that type of content should be displayed). HTML uses a pre-defined set of
elements to identify content types. Elements contain one or more "tags" that
contain or express content. Tags are surrounded by angle brackets, and the
"closing" tag (the one that indicates the end of the content) is prefixed by a
forward slash.
For example, the paragraph element consists of the start tag "<p>" and the
closing tag "</p>". The following example shows a paragraph contained
within the HTML paragraph element:
<p>You are beginning to learn HTML.</p>
When this content is displayed in a web browser, it looks like this:
You are beginning to learn HTML.
Elements the basic building blocks
HTML consists of a set of elements. Elements define the semantic
meaning of their content. Elements include everything between two
matching element tags, including the tags themselves.
A very simple but complete web page looks like this:
<html>
<body>
<p> you are in your begining stage of HTM</p>
</body>
</html>
1
Tags
HTML documents are written in plain text. They can be written in any text editor
that allows content to be saved as plain text, such as Notepad, Notepad++, or
Sublime, but most HTML authors prefer to use a specialized editor that highlights
syntax and shows the DOM. Tag names may be written in either upper or lower
case.
This is an an example of valid code:
<em>I <strong>really</strong> mean that</em>.
XHTML
XHTML stands for Extensible HyperText Markup Language and is the next step in
the evolution of the Internet. The XHTML 1.0 is the first document type in the
XHTML family.
XHTML was developed by the W3C to help web developers make the
transition from HTML to XML. By migrating to XHTML today, web
developers can enter the XML world with all of its attendant benefits, while
still remaining confident in their content's backward and future compatibility.
Developers who migrate their content to XHTML 1.0 will realize the following
benefits:
XHTML documents are XML conforming. As such, they are readily viewed,
edited, and validated with standard XML tools. XHTML documents can be
written to operate better than they did before in existing browsers as well as in
new browsers. XHTML documents can utilize applications like scripts and
applets that rely upon either the HTML Document Object Model or the XML
Document Object Model1.
All tag and attribute names must be in lowercase. Thus, you can't write
<A HREF="foo.html">...</A>
but must instead write this in lowercase, as :
<a href="foo.html">...</a>
2
2. "Empty" tags must be written with an extra slash at the end.

An empty tag is one like <br> or <img src="foo.html"> that doesn't have a </br>
or <img> to end it. In XHTML, such tags must
be written as: <br />, and <img src="foo.gif" />.
3. You can never omit an end tag. With HTML, you could
sometimes leave off an end tag, as in
<p> ..... paragraph text
<p> ..... more paragraph text
With XHTML, you must always put in the end tag, so that the preceding
must be written as:
<p> ..... paragraph text </p>
<p> ..... more paragraph text </p>
4. Attributes must always have a value. In HTML you can sometimes
omit atttibute values, as in
<hr size="2" noshade>
in XHTML, this would need to be written as:
<hr size="2" noshade="noshade" />
5. Attributes values must always be quoted.. In HTML you can sometimes
omit the quotes,as in
<hr size=2>
in XHTML, this would need to be written as:
<hr size="2" />
Experiment 2
3
AIM: Basic Tags in HTML.

<html>
<head>
<title>this is my first bgcolor=pink>
<h1>welcome to html</h1><br/>
<b>tag for bold</b><br/>
<i>tag for
italic</b><br/> <u>tag
for underline</u><br/>
<del>tag for
delete</del><br/>
<h2>creating
tables</h2> <table
border="2">
<th>table
head</th> <tr>
<td>row1</t>
<td>row2</td
> </tr>
</table>
4
<h2>creating text
box</h2> <input
type="text"
name"text"> password
<input type="password"
name="pws"><br/> radio
button<br/>
male<input type="radio" name="male">
female<input type="radio" name="female">
</br>checkbox<br/>
Bike <inputtype=checkbox"name="bike"><br/>
car<input type="checkbox"name="car"><br/>
submitbutton<b>
<inputtype="submiit"value="submit"><br/>
selectbox<br/><select>
<option>one </option>
<option> two </option>
<option>three </option>
<option>four</option>
Experiment 3
5
AIM: Write a program to create lists..

<html>
<body>
<p><b><u> Ordered List</b></u> </p>
<ol>
<li>a</li>
<li>s</li>
</ol>
<p><b><u> Unordered List</b></u> </p>
<ul>
<li>a</li>
<li>s</li>
</ul>
<p><b><u> Nested List</b></u> </p>
<OL TYPE = A START =3>
<LI> Fruits
<OL TYPE = I>
<LI> Apple
<LI> MANGO
<LI> Orange
Page 20 of 115
</OL>
<LI> VEGETABLES
<OL TYPE = I>
<LI> Brinjal
<LI> Cabbage
<LI> Tomato
</OL>
</OL>
<p><b><u> Definition List
</b></u></p> <dl>
<dt> Coffee </dt>
<dd> Black Hot Drink
</dd> <dt> Milk </dt>
<dd> White Cold Drink </dd>
</dl>
</body>
</html>
Experiment 4
AIM: Introduction to CSS..
Cascading Style Sheets (CSS) is a style sheet language used for
describing the look and formatting of a document written in a markup
language. While most often used to style web pages and interfaces
written in HTML and XHTML, the language can be applied to any kind
of XML document, including plain XML, SVG and XUL.
CSS is designed primarily to enable the separation of document content
from document presentation, including elements such as the layout,
colors, and fonts.[1] This separation can improve content accessibility,
provide more flexibility and control in the specification of presentation
characteristics, enable multiple pages to share formatting, and reduce
complexity and repetition in the structural content (such as by allowing
for table less web design.
Example:<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="cs.css" />
<style type="text/css">
.di
{
Shri Venkteshwar Institute Of

Technology
background-color:#99FF00;
margin-left:300px; width:100px;
height:100px;
}
.mm
{
background-color:#660099;
width:200px; height:100px;
}
#mn
{
background-color:#3333FF;
margin-left:500px; width:300px;
height:300px;
}
#ss
{
background-color:#3333FF;
width:300px;
height:100px;
}
</style>
</head>
<body>
<div id="container">
<h1>Inline CSS</h1>
<p style="color:#FF0000; margin-left:20px; font-size:14px;
background-color:#CCFF00; width:500px; height:300px">
Inline CSS exaple for background color, font size, margin-left and for
width.</p>
<h1>internal CSS</h1>
<div class="di">
<table border="2">
<tr>
<td>row1</td>
<td>row2</td>
</tr>
10
</table>
</div>
<div class="mm">text box

<input type="text" name="text" style=" color:#00FF33; background-color:#FF0000;
font-size:18px">
</div>
<div id="mn">
<h1>introduction</h1><br/>
<b>tag for bold</b><br/>
<h2>about clg</h2><br/>
<h3>create options</h3>
passwords
<input type="password"rollno="pws"><br/>
</div><br/>
<br/>
<h1>external css</h1>
<p class="ab">external css</p>
</div>
11
Experiment 5
AIM: Write a program to create menu using HTML and CSS..
<html>
<head> <title>menu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li> <li>Web
Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog
<ul>
<li>Web Design</li> <li>Web
Development</li>
<li>Illustrations</li>
</ul></li>
<li>Contact</li>
<li>Facilities</li>
<li>Downloads
<ul><li>apendix
c</li>
<li>apendix
d</li>
<li>apendix g</li>
</ul>
</li>
12
</ul>
</body>
</html>
External CSS Coding.
body {
font-family: Arial, Helvetica, sans-serif, Helvetica,
Arial, sans-serif; padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background:
#E3CAA1;
}
ul {
text-align:
left;
display:
inline;
margin: 0;
padding: 15px 4px
17px 0; list-style:
none;
}
ul li {
font: bold 12px/18px
sans-serif; display:
inline-block; marginright: -4px;
position:
relative;
padding: 15px
13
20px;
background:
#fff; cursor:
pointer;
}
ul li:hover
{ background:
#555; color:
#fff;
}
ul li ul
{ paddin
g: 0;
position:
absolute; top:
48px;
left: 0;
width:
150px;
opacity: 0;
visibility: hidden;
14
Shri Venkteshwar Institute Of

Technology
}
ul li ul li {
background:
#CCCC33; display:
block;
color: #FF0000; textshadow: 0 -1px 0
#000;
}
ul li ul li:hover { background:
#9966CC; } ul li:hover ul {
display:
block;
opacity: 1;
visibility:
visible;
}
15
Experiment 6
AIM: Introduction to JavaScript..
What Exactly Is JavaScript?
JavaScript is a scripting language designed primarily for adding
interactivity to Web pages and creating Web applications. The language
was first implemented by Netscape Communications Corp. in Netscape
Navigator 2 beta (1995). JavaScript is different from the Java language
(developed in the 1990s at Sun Microsystems). However, the two
languages can interoperate well. Client-side JavaScript programs, or
scripts, can be embedded directly in HTML source of Web pages. (Note:
There is also server-side JavaScript, but it's beyond the scope of this
FAQ collection.) Depending on the Web developer's intent, script code
may run when the user opens the Web page, clicks or drags some page
element with the mouse, types something on the keyboard, submits a
form, or leaves the page.
JavaScript is an object-oriented language with prototypal inheritance.
The language supports several built-in objects, and programmers can
create or delete their own objects. Prototypal inheritance makes
JavaScript very different from other popular programming languages
such as C++, C#, or Java featuring classes and classical inheritance.
JavaScript does not have classes in the C++ or Java sense. In
JavaScript, objects can inherit properties directly from each other,
forming the object prototype chain.
JavaScript is widely supported. It is available in the following browsers:
Netscape Navigator (beginning with version 2.0)
Microsoft Internet Explorer (beginning with version 3.0)
Firefox
Opera
Google Chrome
Any other browser whose vendor licensed or implemented JavaScript.
16
Experiment 7
AIM: Write a program to print date using JavaScript.
<!DOCTYPE
html> <html>
<body>
<h1>My First JavaScript</h1>
<p>Click the button to display the date.</p> <p
id="demo"></p>
<button type="button" onclick="myFunction()">print
date</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
17
Experiment 8
AIM: Write a program to redirect, popup and print function in
JavaScript.
<html>
<head>
<title>java script</title>
<script type="text/javascript"> <!-function delayer(){
// window.location = "../java/5.html"
window.location = "4.html"
}
//-->
<!-function myPopup2() {
window.open( "http://www.google.com/", "myWindow", "status = 1,
height = 300, width = 300, resizable = 0" )
}
//-->
</script>
</head>
<body onLoad="setTimeout('delayer()', 5000)"> <h1> Redirect,
Popup and Print Function using java script</h1>
<h2>Prepare to be redirected!</h2>
<p>This page is a time delay redirect, please update your
bookmarks to our new
location!</p>
<form style="height:200px; width:210px; backgroundcolor:#FF9999;">
<h3> Java Script Popup Box.</h3>
<input type="button" onClick="myPopup2()" value="POP2!"> </form>
<p onClick="myPopup2()">CLICK ME TOO!</p>
<form>
18
<input type="button" value="Print This Page"

onClick="window.print()" />
</form>
</body>
</html>
19
Experiment 9
AIM: Introduction to Ajax.
AJAX = Asynchronous JavaScript and XML
AJAX is not a new programming language, but a new way to
use existing standards.
AJAX is the art of exchanging data with a server, and
updating parts of a web page - without reloading the whole
page.
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by
exchanging small amounts of data with the server behind the
scenes. This means that it is possible to update parts of a web
page, without reloading the whole page.
Classic web pages, (which do not use AJAX) must reload the
entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail,
Youtube, and Facebook tabs.
In essence, Ajax is an efficient way for a web application to
handle user interactions with a web page - a way that reduces
the need to do a page refresh or full page reload for every
user interaction. This enables rich behavior (similar to that of
a desktop application or plugin-based web application) using
a browser. Ajax interactions are handled asynchronously in
the background. As this happens, a user can continue
working with the page. Ajax interactions are initiated by
JavaScript code. When the Ajax interaction is complete,
JavaScript updates the HTML source of the page. The
changes are made immediately without requiring a page
20
refresh. Ajax interactions can be used to do things such as

validate form entries (while the user is entering them) using
server-side logic, retrieve detailed data from the server,
dynamically update data on a page, and submit partial forms
from the page.
AJAX is Based on Internet Standards
AJAX is based on internet standards, and uses a combination of:
o XMLHttpRequest object (to exchange data
asynchronously with a server) JavaScript/DOM (to
display/interact with this information)
o CSS (to style the data)
o XML (often used as the format for transferring data)
Google Suggest
AJAX was made popular in 2005 by Google, with Google Suggest.
Google Suggest is using AJAX to create a very dynamic web interface:

When you start typing in Google's search box, a JavaScript sends the
letters off to a server and the server returns a list of suggestions.
As you type in the search box, you can find information quickly by
seeing searches that might be similar to the one you're typing. For
example, as you start to type [google], you may see searches for other
popular google-related searches.
Syntax for creating an XMLHttpRequest object:
variable=new XMLHttpRequest();
Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:
variable=new ActiveXObject("Microsoft.XMLHTTP");
21
Experiment 10
AIM: Introduction to php.
PHP started out as a small open source project that evolved as more
and more people found out how useful it was. Rasmus Lerdorf
unleashed the first version of PHP way back in 1994.
PHP is a recursive acronym for "PHP: Hypertext Preprocessor".
PHP is a server side scripting language that is embedded in
HTML. It is used to manage dynamic content, databases, session
tracking, even build entire e-commerce sites.
It is integrated with a number of popular databases, including
MySQL, PostgreSQL, Oracle, Sybase, Informix, and Microsoft
SQL Server.
PHP is pleasingly zippy in its execution, especially when
compiled as an Apache module on the UNIX side. The MySQL
server, once started, executes even very complex queries with
huge result sets in record-setting time.
PHP supports a large number of major protocols such as POP3,
IMAP, and LDAP. PHP4 added support for Java and distributed
object architectures (COM and CORBA), making n-tier
development a possibility for the first time.
PHP is forgiving: PHP language tries to be as forgiving as
possible. PHP Syntax is C-Like.
Common uses of PHP:
PHP performs system functions, i.e. from files on a system it
can create, open, read, write, and close them.
PHP can handle forms, i.e. gather data from files, save data to a
file, thru email you can send data, return data to the user.
You add, delete, modify elements within your database
thru PHP. Access cookies variables and set cookies.
Using PHP, you can restrict users to access some pages of your
website. It can encrypt data.
22
Experiment 11
AIM: Write a program to connect to database.
<?php
$con=mysql_connect("localhost","root","");
if($con)
{
echo"connected";
echo "<br>";
}
else
{
echo "not connected";
}
?
23
Experiment 12
AIM: Write a program to insert data in database.
<?php
require_once("connect.php")
; error_reporting(0);
if($_POST['submit'])
{
$fn=$_POST['nam
e'];
$rn=$_POST['roll'
];
$sn=$_POST['sem
'];
mysql_select_db("
exmp",$con);
$query="INSERT INTO exmp1(name,roll,sem) VALUES
('$fn','$rn','$sn')"; if(mysql_query($query,$con))
{
header("Location:test.php");
}
else
{
echo"die";
}
}
?>
<html>
<head>
<body>
24
<form method="post" action="insert.php">

First name:<input type="text" name="name"><br/><br/>
stud roll:<input type="text" name="roll"><br/><br/>
stud sem :<input type="text" name="sem"><br/><br/>
<input type="submit" name="submit" value="submit"><br/>
</form>
</body>
</head>
25
26

Web Technology

Uploaded by

Copyright:

Available Formats

Web Technology

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technology

Uploaded by

Copyright:

Available Formats

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

2. "Empty" tags must be written with an extra slash at the end.

Shri Venkteshwar Institute Of Technology

AIM: Basic Tags in HTML.

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

AIM: Write a program to create lists..

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

<div class="mm">text box

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

<input type="button" value="Print This Page"

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

refresh. Ajax interactions can be used to do things such as

Google Suggest is using AJAX to create a very dynamic web interface:

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

Shri Venkteshwar Institute Of Technology

<form method="post" action="insert.php">

Shri Venkteshwar Institute Of Technology

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.