Web Program

You might also like

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 88

WEB TECHNOLOGY PROGRAM

1. Write a program to print togs such as title , head and body in HTML.
Program:-

<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>

Output:-
Hello World!
2. Write a program for ordered list in HTML.

Program:-
<HTML>

<HEAD>

<TITLE>Javatechig | List Example </TITLE>

</HEAD>

<BODY>

<H1> Mobile Operating System</h1>

<OL>

<LI> Android

<LI>Blckberry

<LI> iPhone

<LI> Windows Phone

</OL>

<H1>Mobile Manufacturers</h1>

<OLTYPE="A">

<LI> Samsung

<LI> HTC
<LI>Micromax

<LI> Apple

</OL>

</BODY>

</HTML>

Output:-
3. Write a program for unordered list in HTML.

Program:-
<HTML>

<HEAD>

<TITLE>Javatechig | List Example </TITLE>

</HEAD>

<BODY>

<H1> Mobile Operating System</h1>

<UL>

<LI> Android

<LI>Blckberry

<LI> iPhone

<LI> Windows Phone

</UL>

<H1>Mobile Manufacturers</h1>

<ULTYPE="SQUARE">

<LI> Samsung

<LI> HTC

<LITYPE="DISC">Micromax
<LITYPE="CIRCLE"> Apple

</UL>

</BODY>

</HTML>

Output:-
4. Write a program for Definition list in HTML.

Program:-
<!DOCTYPE html>
<html>
<body>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

</body>
</html>

Output:-

Coffee
Black hot drink
Milk
White cold drink
5. Write a program for Nesting list in HTML.

Program:-

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>

Output:-
A Nested List

 Coffee
 Tea
o Black tea
o Green tea
 Milk
6. Write a program using following tag tr, td and th in HTML.
Program:-
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Output:-

Row 1, Column 1 Row 1, Column 2


Row 2, Column 1 Row 2, Column 2

7. Write a program for Cellpdding in HTML.

Program:-

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>

</body>
</html>

Output:-

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000


8. Write a program for Cellspacing in HTMl.

Program :-

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Output:-

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000


9. Write a program for Rowspan in HTML.

Program:-

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<tableborder="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><tdrowspan="2">Row 1 Cell 1</td><td>Row 1 Cell
2</td><td>Row 1 Cell 3</td></tr><tr><td>Row 2 Cell
2</td><td>Row 2 Cell 3</td></tr>

<tr><tdcolspan="3">Row 3 Cell 1</td></tr>


</table>
</body>
</html>
Output:-

Column 1 Column 2 Column 3


Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1
10.Write a program for Column span in HTML.

Program:-
<table>
<caption>Life Expectancy By Current Age</caption>
<tr>
<thcolspan="2">65</th>
<thcolspan="2">40</th>
<thcolspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
Life Expectancy By Current Age

Output:-

65 40 20
Men Women Men Women Men Women
82 85 78 82 77 81
11.Write a program for frame in HTML.

Program:-
<!DOCTYPE html>

<html>

<head>

<title>HTML Frames</title>

</head>

<framesetrows="10%,80%,10%">

<framename="top"src="/html/top_frame.htm"/>

<framename="main"src="/html/main_frame.htm"/>

<framename="bottom"src="/html/bottom_frame.htm"/>

<noframes>

<body>

Your browser does not support frames.

</body>

</noframes>

</frameset>

</html>
Output:-
12.Write a program for Special tag and chractertype in HTMl.

Program:-

<!DOCTYPE html>
<html>
<body>

<p>I will display &euro;</p>


<p>I will display &#8364;</p>
<p>I will display &#x20AC;</p>

</body>
</html>

Output:-

I will display €

I will display €

I will display €
13.Write a program for Text control in HTML.

Program:-

<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form>
First name: <inputtype="text"name="first_name"/>
<br>
Last name: <inputtype="text"name="last_name"/>
</form>
</body>
</html>

Output:-

First name:   
Last name: 

14.Write a program for password field in HTMl.


Program:-
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form>
User ID : <inputtype="text"name="user_id"/>
<br>
Password: <inputtype="password"name="password"/>
</form>
</body>
</html>

Output:-

User ID :     
Password: 

15.Write a program for Radio button in HTMl.


Password:-

<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<inputtype="radio"name="subject"value="maths">Maths
<inputtype="radio"name="subject"value="physics"> Physics
</form>
</body>
</html>

Output:-

 Maths   Physics
16.Write a program for Checkbox in HTML.

Program:-
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<inputtype="checkbox"name="maths"value="on">Maths
<inputtype="checkbox"name="physics"value="on"> Physics
</form>
</body>
</html>

Output:-

 Maths   Physics
17.Write a program for Reset button in HTML:-

Program:-

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name
here!">
<br><input type="submit" value="Send me your
name!"> <input type="reset" value="Reset!"><br>
</div>
</form>
</body>
</html>

Output:-

Enter your name here!

Send me your name! Reset!


 
18. Write a program for Submit button in HTMl:-

Program:-

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<inputtype="hidden"name="pagename"value="10"/>
<inputtype="submit"name="submit"value="Submit"/>
<inputtype="reset"name="reset"value="Reset"/>
</form>
</body>
</html>

Output:-

This is page 10
Submit Reset
 
19. Write a program for Dropdown list in HTMl.

Program:-

<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<selectname="dropdown">
<optionvalue="Maths"selected>Maths</option>
<optionvalue="Physics">Physics</option>
</select>
</form>
</body>
</html>

Output:-

Maths
  

20.Write a program for Scrolled list in HTML.


Program:-

<B>Select some fruit:</B><BR>


<SELECT NAME="Morefruit" SIZE="4" MULTIPLE >
<OPTION SELECTED> Apples
<OPTION> Bananas
<OPTION> Oranges
<OPTION> Watermelon
<OPTION> Kiwi
<OPTION> Cantaloupe
<OPTION> Strawberries
</SELECT>

Output:-

Apples
Bananas
Oranges
Watermelon

  
21. Write a program for Text area in HTML.

Program:-
<!DOCTYPE html>
<html>
<head>
<title>HTML textarea Tag</title>
</head>
<body>
<formaction="/cgi-bin/hello_get.cgi"method="get">
Fill the Detail: <br/>
<textarearows="5"cols="50"name="description">
Enter your name
</textarea>
<inputtype="submit"value="submit"/>
</form>
</body>
</html>

Output:-

Fill the Detail: 

 
submit
22. Write a program for using following tag password box , radio button ,
check box, text control in HTML .

Program:-

<form id="contact-form" action="script.php" method="post">

<ul>
<li><label for="name">Name:</label> <input type="text" name="name" id="name"
value="" /></li>
<li><label for="email">Email:</label> <input type="text" name="email"
id="email" value="" /></li>
<li><label for="pwd">Password:</label> <input type="password" name="pwd"
id="pwd" value="" /></li>
</ul>

<ul>
<li>Please check all the emotions that apply to you:
<ul>
<li><label for="angry">Angry</label> <input type="checkbox" name="angry"
id="angry" value="angry"></li>
<li><label for="sad">Sad</label> <input type="checkbox" name="sad"
id="sad" value="sad"></li>
<li><label for="happy">Happy</label> <input type="checkbox" name="happy"
id="happy" value="happy"></li>
<li><label for="ambivalent">Ambivalent</label> <input type="checkbox"
name="ambivalent" id="ambivalent" value="ambivalent"></li>
</ul>
</li>
<li>How satisfied were you with our service?
<ul>
<li><label for="vsat">Very satisfied</label> <input type="radio"
name="satisfaction" id="vsat" value="vsat"></li>
<li><label for="sat">Satisfied</label> <input type="radio"
name="satisfaction" id="sat" value="sat"></li>
<li><label for="dcare">Didn't care</label> <input type="radio"
name="satisfaction" id="dcare" value="dcare"></li>
<li><label for="disat">Dissatisfied</label> <input type="radio"
name="satisfaction" id="disat" value="disat"></li>
<li><label for="vdisat">Very dissatisfied</label> <input type="radio"
name="satisfaction" id="vdisat" value="vdisat"></li>
</ul>
</li>
<li><label for="comments">Further comments:</label> <textarea
name="comments" id="comments" cols="25" rows="3"></textarea></li>
</ul>

<ul>
<li><label for="photo">Bio photo:</label> <input type="file" name="photo"
id="photo" value="" /></li>
<li><label for="location">Location visited:</label>
<select name="location" id="location">
<option value="">Select location</option>
<option value="nyork">New York</option>
<option value="vancouver">Vancouver</option>
<option value="atlantis">Atlantis</option>
<option value="alpha">Alpha Centauri</option>
<option value="blackpool">Blackpool</option>
<option value="bognor">Bognor Regis</option>
</select></li>
</ul>

<li><input type="submit" value="submit" /></li>

</form>
23. Write aprogram for java script to print a single statement .

Program:-

<!DOCTYPE html>
<html>
<body>

<p>In HTML, JavaScript statements are "commands" to the browser.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>

</body>
</html>

Output:-

In HTML, JavaScript statements are "commands" to the browser.

Hello Dolly.
24. Write aprogram for head and body tag in java script .

Program:-

<!DOCTYPE html>
<html>
<head>
<script>
functionmyFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>

<h1>JavaScript in Head</h1>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

Output:-

JavaScript in Head JavaScript in Head


Paragraph changed.
A Paragraph.
Try it
Try it
25.Write a program in java script for external file .

Program:-

File myjs.js Contents:

function popup() {
alert("Hello World")
}

HTML & JavaScript Code:


<html>
<head>
<script src="myjs.js">
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Click Me!">
</body>
</html>

Output:-

Display:
Click me
26. Write a program in java script to convert meter into centimeter.

Program:-
<TABLE cellSpacing=0 cellPadding=0 width=250 border=0>
<FORM name=cminch method="post">
<TBODY>
<TR>
<TD>
<FONT face="Arial Narrow"><INPUT
onblur=cmconvert() value=2.54 name=cm></FONT><FONT face="Arial Narrow"
size=-1>cm</FONT></TD>
</TR>
<TR>
<TD>
<FONT face="Arial Narrow"><INPUT
onblur=feetconvert() value=0 name=feet></FONT><FONT face=Arial
size=-1>feet</FONT></TD>
</TR>
<TR>
<TD>
<FONT face="Arial Narrow"><INPUT
onblur=inchconvert() value=1 name=inch></FONT><FONT face=Arial
size=-1>inch</FONT></TD>
</TR>
<TR>
<TD width="50%">
<p align="center"><input type="button" value="Submit" name="B3"></p>
</TD>
</TR></TBODY></FORM></TABLE>
<p align="left">
<FONT face="Arial Narrow" size="2">Note: 1 Inch = 2.54 cm, 1 Feet = 30.48 cm,
1
Feet = 12 Inch</FONT>
<BR>

<SCRIPT language=JavaScript>

/*
cm/inch/feet converter - credit must stay intact for use
By Ada Shimar ada@chalktv.com
For this script and more,
Visit http://javascriptkit.com
*/

functionroundit(which){
returnMath.round(which*100)/100
}

functioncmconvert(){
with (document.cminch){
feet.value = roundit(cm.value/30.84);
inch.value = roundit(cm.value/2.54);
}
}

functioninchconvert(){
with (document.cminch){
cm.value = roundit(inch.value*2.54);
feet.value=roundit(inch.value/12);
}
}
functionfeetconvert(){
with (document.cminch){
cm.value=roundit(feet.value*30.48);
inch.value=roundit(feet.value*12);
}
}
</SCRIPT>
<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>

Output:

2.54
 cm
0
 feet submit
1
 inch
27. Write a program to create inline stylesheet in dhtml.

Program:-
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<pstyle="color:red;">This is red</p>

<pstyle="font-size:20px;">This is thick</p>
<pstyle="color:green;">This is green</p>
<pstyle="color:green;font-size:20px;">This is thick and
green</p>
</body>
</html>

Output:-

This is red

This is thick
This is green

This is thick and green


28. Write a program for embeded style sheet dhtml.

Program:-
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<styletype="text/css">
.red{

color: red;

.thick{

font-size:20px;

.green{

color:green;

</style>
</head>
<body>
<pclass="red">This is red</p>

<pclass="thick">This is thick</p>
<pclass="green">This is green</p>

<pclass="thick green">This is thick and green</p>


</body>
</html>

Output:-

This will produce following result:

This is red

This is thick
This is green

This is thick and green


29. Write a program for external style sheet in dhtml.

Program:-
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<linkrel="stylesheet"type="text/css"href="/html/style.css">
</head>
<body>
<pclass="red">This is red</p>
<pclass="thick">This is thick</p>
<pclass="green">This is green</p>
<pclass="thick green">This is thick and green</p>
</body>
</html>

Output:-

This is red

This is thick
This is green

This is thick and green


30. Write a program for grouping CSS code in dhtml.

Program:-

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

Output:-

Hello World!
Smaller heading!

This is a paragraph.
31. Write a program for background CSS in dhtml.

Program:-

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

Output:-
32. Write a program for document object model in dhtml.

Program:-

<!DOCTYPE html>
<html>
<body>

<h1>My First Page</h1>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

Out put:-

My First Page
Hello World!
33.Write a program for moving object in dhtml.

Program:-

<?xml version="1.0" encoding="iso-88591"?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title> Some Moving Texts - ex0902.htm</title></head>
<body style="background:#000088;font-family:arial;font-size:28pt;
color:#ffff00;font-weight:bold;text-align:center">
<div align="center">Some Moving Texts <br /></div>
<div name="myObj1" id="myObj1"
style="position: absolute;
top: 120px;
left: 40px;
height: 100px;
width: 250px;
background: #ffffff;
color: #000000;
font-size: 20px;
font-family: Times">
My first object has dimension<br />
height: 100px <br /> width: 250px</div>

<div id="myObj2" id="myObj2"


style="position: absolute;
top: 280px;
left: 200px;
height: 100px;
width: 290px;
background: #ffff00;
color: #880000;
font-size: 24px;
font-family: Times">
My second object has dimension<br />
height: 100px <br /> width: 290px</div>

<script>
varixDelta = 5
variyDelta = 5
varlxPos = 0
varlyPos = 0

function MoveLeft()
{
lxPos = parseInt(document.getElementById("myObj1").style.left)+ixDelta
if (lxPos>= 400 || lxPos< 0) ixDelta = ixDelta * -1
document.getElementById("myObj1").style.left = lxPos + "px"
}

function MoveUp()
{
lyPos = parseInt(document.getElementById("myObj2").style.top)+iyDelta
if (lyPos>= 320 || lyPos< 0) iyDelta = iyDelta * -1
document.getElementById("myObj2").style.top = lyPos + "px"
}

setInterval("MoveLeft();MoveUp()",50)
</script>
</body>
</html>

functionMoveLeft()
{
lxPos = parseInt(document.getElementById("myObj1").style.left)+ixDelta
if (lxPos>= 400 || lxPos< 0) ixDelta = ixDelta * -1
document.getElementById("myObj1").style.left = lxPos + "px"
}

output:-
34. Write a program in xml for DOM .

Program:-

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var parser, xmlDoc;
var text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";

parser = new DOMParser();


xmlDoc = parser.parseFromString(text,"text/xml");

document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>

</body>
</html>

Output:-

Everyday Italian
35.Write a program in xml for external DTD declaration.

Program:-

<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>

Output:-

Tove Jani Reminder 
Don't forget me this weekend!
36.Design a Home Page of Website using HTML Tags.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>

</html>

Output:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>

Output:
37.Write an HTML Document to provide a form that collects names and phone
numbers.

<html>
<head>
<title>My Website2</title>
</head>
<body>
<h1>Contact Details</h1>
<p>Please use the details below to get in contact</p>
<h2>Telephone</h2>
<p>Name: Shashi<br />
Mobile: 1010101010101<br />
</p>
<h2>Email</h2>
<p>1010101@10100101.com</p>
</body>
</html>
h2 { color : red }
h1 { color : blue; text-decoration : underline }

Output:

Contact Details
Telephone
Please use the details below to get in contact
Name: Shashi
Mobile: 1010101010101

Emai 1010101@10100101.com

38.Write a program in Java Script to compare numbers whose inputs will be


taken from HTML Form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Assignment 10 Form</title>

<script type="text/javascript">

function greaterNum(){
var value1;
var value2;
value1 = document.First_num.value;
value2 = document.last_num.value;
if (value1 > value2){
alert('Value 1 is greater than value 2');
document.body.style.background = "orange";
}

</script>

<style type="text/css">
body{background-color: #40FF00;
margin-left: auto;
margin-right: auto;
width: 60%;
}

#container{
border: 2px solid yellow;
padding: 20px;
}

</style>

</head>

<body>
<h1>Assignment 10</h1>

<div id="container">
<div class="Num">
<form>
<label class="label1">Enter Value 1:</label>
<input type="text" name="First_num" value=" " />
<label class="label1">Enter Value 2:</label>
<input type="text" name="last_num" value=" " />
<br/>
<input type="button" value=" Which number is greater? " onclick="greaterNum();"
/>
</form>

</body>
</html>
39.Write a JAVA Script function to display current date and time using Date
Object.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Output

Fri Dec 02 2016 19:21:17 GMT+0530 (India Standard Time)


40.Write a Java Script to generate Random Numbers

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display a random number.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
</script>

</body>
</html>

Output
41. Design three pages of your Home Page and link all of them to a single style
sheet.

styles.css (your single stylesheet with all your classes)


body {
background-color: cyan;
}

.class-for-index {
color: red;
}

.class-for-page {
color: blue;
}
index.html (link to the single stylesheet)
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>

<body class="class-for-index">
Page 1
</body>
</html>
page.html (link to the single stylesheet)
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>

<body class="class-for-page">
Page 2
</body>
</html>
42.Design a web page that demonstrates blinking and scrolling text.

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
<marquee direction="up">The direction of text will be from bottom to top.</marquee>
</body>
</html>

Output:
43. Design a e-Commence Site displaying the detail of the items that are sold in
that store. The Site should provide a feature to sort the items based on the prize of
the Items.

Product, Storefront and Category Pages

A) Product Pages
One of the key things that make Weebly eCommerce stand out is their ability to
allow you to create standalone, dedicated Product Pages for each of your products.

(i) Product Images


On these Product Pages, you can insert multiple images, with the main image and
“sub-images” below the main image in a gallery where your shoppers can click on
to see.

When you hover your mouse cursor over the main image, it will show you a
zoomed-in version of the image, allowing your prospective customers to see your
product in detail.   The overall experience of this feature is very smooth and
functions very well.
(ii) Multiple Product Variations
Weebly allows you to have full control over product variations to give your
customers the ability to choose from various variations of the same product.
You can customize this in Weebly Editor and add multiple product options for
your customers to select.
For instance, a common example is the ability for someone to purchase a large,
green, collared shirt.  Weebly gives you full control to display variations (size,
color, type) of your products, which is a very powerful and flexible feature in our
view.

The example that I provided above (large, green collared shirt) is only an
example.  You can setup whatever product variations you want to suit your
needs.

After you’ve configured your own product options, they will show up on your
Product Page so your customers can select whichever variation they want to
purchase from you.
This is a very nice Weebly eCommerce feature and will give you a lot of flexibility
to run your online store.

(iii) Sales Option, Product Description, and Social Sharing


Weebly gives you a sales option, which displays the discounted price next to the
crossed-out regular price. This is a very effective tactic to draw on people’s love
for sales, and Weebly gives you this display option.
You can also add your own custom product description in your Product Page,
and you have the ability to do some basic styling such as bold, underline, italicize,
and insert numerical or bullet points.  Crafting an attractive product description can
really help you sell more products.
Weebly has also enabled social sharing buttons for each Product Page, making it
very painless and easy for your shoppers to share your products with their friends
and family through their social network accounts.  They just have to click on one
of the buttons and your product will be shared.  This is a very powerful way to
broaden your product reach, and this feature is free with Weebly eCommerce.
(iv) Drag and Drop Zones
Directly below the main image and the product variation controls, you have a full
drag and drop zone where you can insert various Weebly elements into this area,
such as more text description, slideshows, image gallery, maps, videos, contact
forms, etc.
This enables you to add more details to your products, or even display product
videos which are very powerful ways to engage your shoppers in convincing them
to purchase.

B) Storefront Page
One of the nice options from Weebly is that you can insert a Storefront Page where
you can pick and choose what products you want to display on this Page.

This allows you to highlight selected products to showcase to your shoppers


which are particularly helpful in highlighting your best sellers, seasonal items
or promotional sales.  Your shoppers can click on any one of them to get to the
product pages.  A very effective way to direct your shoppers  to relevant product
pages.

C) Category Pages
Weebly also allows you to categorize your products into different categories so
your shoppers can start narrowing their search to get to what they want to see.
You can create multiple categories, and pick and choose which product to insert
into each category.
Overall, enabling you to create Product Pages, Storefront Page and Category
Pages, Weebly eCommerce gives you the much-needed flexibility to shape your
website into a very interactive and full-featured online store.

Adding a Product Page, Storefront Page or Category Page is quite simple:


Try Weebly eCommerce
2. Fully Integrated Shopping Cart

When you turn on your eCommerce function in Weebly, a shopping cart menu
item will show up on the menu bar, and indicates to your shoppers how many
product items they have inserted into the shopping cart.
When they go through the checkout process, your shoppers will remain in your
store as they fill in their information, while having their Order Summary displayed
on the same page to remind the what they are about to purchase.

If you upgrade to Weebly’s Business or Performance plans (more details about


pricing below), the entire process will be under your custom domain name.  If
you choose not to upgrade to these specific plans, the checkout process, while will
still be styled the same way as the rest of your website (to make sure you
shoppers have a consistent experience), will be using a Weebly sub-domain.
For example, if you are using the Business or Performance plans, on the checkout
page, the URL will read (example):

www.yourdomain.com/checkout (“yourdomain.com” will just be your own custom


domain)
If you choose not to use the Business or Performance lans, the checkout page URL
will be:

youraccount.checkout.weebly.com (“youraccount” is just your Weebly account


name)

So if you subscribe to Weebly’s Business or Performance plans, your shoppers will


not know that your website is powered by Weebly and you retain full control over
the branding and checkout experience – your shoppers will be comforted by the
fact that they are still on your website and not re-directed somewhere else.

This is an important factor to consider, as when your shoppers are ready to


purchase, you want to minimize any uncertainty they may have if they are re-
directed to an unfamiliar URL such as youraccount.checkout.weebly.com
This is worth a mention – typically if you have an online store and you want to
conduct financial transactions (selling products) under your own domain name,
you will need to purchase a SSL Certificate (which secures your shopping cart –
this is the difference between just seeing “HTTP” in front of a domain name
(unsecured) versus “HTTPS” (secured))
An SSL Certificate typically costs $70 and above per year
(source: GoDaddy.com).  If you upgrade to Business or Performance plans,
Weebly gives your custom domain name an SSL certificate so your customers
can safely and securely purchase from you
This is the main reason why if you choose not to use these specific plans, your
shopping cart has to be hosted on Weebly’s secure checkout by using their
subdomain (youraccount.checkout.weebly.com)
3. Payment Options

Aside from pure online store builders (Shopify, Bigcommerce), Weebly gives you
the most payment processing options amongst its peers.  Their setup process is
fully integrated within Weebly so setting up your processor just takes a few clicks.
Weebly allows you to choose from 4 different leading payment processors:

1. PayPal
2. Stripe
3. Square
4. Authorize.net
(i) PayPal (Requires Weebly Business or Performance plans – see more
information below)
PayPal goes without saying, is probably the most well-known payment processor.
Using them conveys a sense of trust to your shoppers due to PayPal’s brand.  This
is a basic option that all website builders provide.

One downside of PayPal (for some people) is that upon final confirmation of
purchase, your shoppers will actually have to leave your Weebly site to make the
payment.

(ii) Stripe (Can be used with all Weebly plans)


Stripe is a fast growing payment processor which allows you to deposit money
directly into your bank account.  The application process for a Stripe account is
fast and painless, so you can get up and running in a day.
The entire check out process, from beginning to the end, your shoppers
remains on your site the entire time and the check out cart is branded as your
own shopping cart.  This helps preserve branding and re-directing your
shoppers to another site.
It takes 7 days to transfer money directly into your bank account, mainly due to
Stripe  needing to hold a reserve just in case if your customers have any complaints
or chargebacks. Similarly, if you were to withdraw money from PayPal to your
bank account, it will take 5 – 7 business days for processing as well.

However, at the time of this review article, Stripe is not available to all countries
around the world.  They are available to merchants in the US, Canada, Australia,
some countries in Europe, and some countries in Asia .

They are expanding geographically, but at this point, merchants outside of these
countries will have to use PayPal or Authorize.net (limited – see below). Click
here to see updates on where Stripe is available.
Just to be clear, you can still sell to international customers, you just have to be
based in the mentioned countries to be able to use Stripe for your store.

(iii) Square (Requires Weebly Business or Performance plans – see more


information below)
Square is a very fast growing payment processor and you probably know of them
as the tiny credit card processor that plugs into a smartphone so people can make
payments with their mobile phones (so you can accept payments in person).
Your funds are deposited into your bank account in 1 – 2 business days which is
much faster than Stripe.

Just like Stripe, your customers’ entire checkout process from the beginning


to the end will remain on your website and is branded as your own shopping
cart.
Currently, you have to be a merchant based in the US, Canada, Australia or
Japan in order to use Square.  But you can still sell to international customers, but
you just have to be based in the countries mentioned.
(iv) Authorize.net (Requires Weebly Business or Performance plans – see more
information below)
Authorize.net is also very reputable payment transaction processor online.
However, applying for an account can take a while and understanding their vast
number of features can be confusing.  So if you are a smaller business, we would
suggest you consider either Stripe or PayPal.
Having said that, we are not saying that Authorize.net is inferior in any way, but
mainly due to our limited knowledge with this payment processor.  They are very
large, reputable organization.

Like Stripe, the entire checkout process from the beginning to the end will
remain on your website and is branded as your own shopping cart.
Currently at the time of this article, Authorize.net is only available in the US,
Canada, Australia, the UK and rest of Europe.  If you are outside of these
geographic locations, PayPal may be your only option here.
Just to be clear, you can still sell to international customers, you just have to be
based in the mentioned countries to be able to use Authorize.net for your store.

4. Other Weebly eCommerce Features

There are other practical and flexible eCommerce tools from Weebly:
(i) Mobile Ready (available to all plans)
Weebly built in a mobile shopping cart for all their websites that show up on
mobile devices (which are smaller than desktops), so that your shoppers can also
purchase from their phones or tablets if they choose to.  The checkout process is
also secure (as mentioned above).  So it’s nice that Weebly has catered to this as
mobile shopping is definitely a growing trend.

Weebly also has iPhone or Android mobile apps so that you can monitor and
update your online store at all times while you are on the go.  You can add new
products, photos, descriptions, product variations / options and update prices while
you are away from your computer.  You can also get instant notifications to your
phone whenever someone purchases something from you!
(ii) Filtered Product Search (available to Weebly Pro, Business and Performance
plan users)
Weebly’s filtered product search allows your shoppers to find the most relevant
products quickly.  You can search by filtering products by attributes like price,
color, or whatever product variation you have set up (see our detailed discussion
on product variation above).

The faster you can help your customers get to the product they want, the higher
probability they will purchase from you.  This Weebly feature, if used properly,
can help you grow your sales.

(iii) Flexible Shipping Options (available to Business and Performance plan


users)
If you subscribe to the Business or Performance plans, you have the option to fine
tune your shipping rates based on price, weight and also define shipping carriers
(e.g. UPS, USPS, Fedex) and delivery time frame (ground, 3-day, overnight).

You can adjust the shipping rates based on geographical locations, and dig into
sub-regions such as by state or province.

You can even offer free shipping on select orders.

(iv) Detailed Tax Control (available to Business and Performance plan users)


Don’t forget taxes!  With Weebly, they provide and maintain the current city, state
and province level tax rates for the US and Canada for you.

If you are located in the US, they even have an Automatic Tax Calculator that will
do all the heavy lifting for you.  You just have to insert a US address and the
relevant taxes will all be calculated for you. That’s pretty handy!

If you are outside of the US or Canada, you have the flexibility to manually define
your own tax rates.

(v) Inventory Tracking & Management (available to Business and Performance


plan users)
You can display and track your level of inventory for each of your product.  But
showing how many units per product is left available, you can let your
shoppers know if you still have plenty of product in stock, or if you are temporarily
out of stock.

(vi) Sell Digital Products (available to Business and Performance plan users)


If you are selling digital products (e-books, music, software, or other non-physical
products), Weebly eCommerce allows you to do this.

Your digital product files are delivered via email with a secure link, so your
customers can download their purchases that way.

(vii) Importing Products from Etsy, Shopify or from CSV File (available to all
plans)
Weebly has made it easy if you want to import products externally (either from
Etsy, Shopify or from a CSV file).

Just select the one you want to import from and upload the files.  Etsy and Shopify
allow you to export your product details into a CSV file (think of it like an Excel
spreadsheet), so you don’t have to manually re-create a lot of the information.

If you are not using Etsy or Shopify, most other online store builders can export
your product details into a CSV file, so you can upload it into Weebly.
This makes switching from other platforms to Weebly eCommerce much easier
and faster process.

(viii) Coupon Builder (available to Business and Performance plan users)


Weebly has a Coupon Builder that allows you to create and manage a couponing
system directly in your Weebly store dashboard.  You can create coupons by code,
date, and quantity.  The coupons can be dollar-based or can be a percentage of the
sale.

You can also restrict the coupons to be only used for specific products, for orders
over a certain dollar amount and only for certain product categories.  You can even
set up coupons to grant your customers free shipping!

In our view, this is a very comprehensive coupon building engine that gives you a
lot more flexibility in terms of coupon set up, compared to some other e-commerce
online store builders.

(xi) Quickbooks and CSV Export (available to Business and Performance plan


users)
Have to deal with bookkeeping?  You bet, especially if you want to run a
successful e-commerce online store.  Weebly gives you the ability to export your
orders / sales into a file that can be directly imported into Quickbooks accounting
software which is very handy.

Don’t use Quickbooks?  Weebly can export your sales data in a CSV file format (a
basic spreadsheet), which is an industry standard file in that can be easily imported
into most accounting software.
The ability to export your data  will save you a lot of time and administrative work
every single month.  Even if you are using a bookkeeper, he/she can just get your
exported file, and upload it into their accounting software versus  manual data
entry.  The less time your bookkeeper spends, the less he/she charges you.

(xii) Gift Card Products (available to Performance plan users)


If you subscribe to Weebly’s Performance plan, you can setup gift cards so your
customers can purchase a certain denomination and the digital gift cards
are emailed to whoever they want to gift this card to.

The recipients can then visit your online store and redeem the gift cards for your
products. These cards don’t incur additional fees and they never expire!
A customer can just select the dollar amount they want to gift, insert his/her name,
insert the recipient’s name and email, and insert a gift message (optional).  Once
that is done, just add the card to the shopping cart and check out as usual.

Once the purchase is complete, Weebly’s ecommerce platform will automatically


email the recipient the gift card with a redemption code and he/she can apply the
code to purchases of your products.  The recipient of the gift card can use the card
multiple times, as long as there is still balance on the card.

(xiii) Abandoned Cart Recovery (available to Performance plan users)


Did you know that studies have shown that out of 100 shoppers that reach the
checkout cart, about 69 of them decide not to purchase and leave your website?
That’s 2 out of 3 shoppers!
Shoppers abandon shopping carts for a variety of reasons.  Maybe they got
distracted and left the computer. Maybe they have questions that your website
didn’t answer. Maybe they couldn’t find a coupon code (everybody loves a good
deal.)

Source: Baymard.com
For whatever reason, these shoppers had the intent to purchase but they didn’t.

The abandoned cart recovery tool allows you to automatically email them to start a
conversation with them to encourage them to return to your store to complete their
purchases.  You can also email them a coupon code to motivate them as well.

The beauty of this tools is that studies have shown that a good portion of shoppers
does come back! And this tool is engaged automatically without you having to do
anything.

Weebly’s ecommerce platform automatically detects abandonment and fire off


“recovery emails” to them. You can style and customize your email messages as
you please.
Track the performance of your recovery efforts
How does the system know whom to email?

Well, when your shopper populates his/her email during the checkout process, the
Weebly “remembers” the email and so when the purchase wasn’t complete,
Weebly knows to email them to nudge them to return.

This tool could literally help you recover a lot of sales that would have fallen
through the cracks. It’s well worth the investment in our view, even if you just get
a hand full of shoppers to return to complete their purchases.

5. What’s Missing From Weebly?

Now that we can see that Weebly’s eCommerce functions have a lot of tools to
effective help you power your online store, are they missing anything really
important?
Here are just a couple of thoughts:
A) Integration of newsletter service (auto-responders)
What would be nice is to have a full integration with a newsletter service (such as
Mailchimp, Aweber, Constant Contact) so that when a person purchases a product
from you, the customer is automatically added to the newsletter system, and will
start receiving newsletter emails from you.

These emails can contain promo codes, product announcements, just staying
in touch with the customer to build a relationship with them.  This can be a
very powerful tool to build customer and brand loyalty so they may return to buy
from you again. Squarespace commerce has an integration with Mailchimp.
Just to be clear, Weebly allows you to send automated emails to your customers,
including order confirmations, download confirmations (for digital products),
product shipped notifications, refund notifications, and cancellation of order
notifications.  However, what we are referring to, that we hope Weebly includes in
future updates, are the ability for you to set up a series of newsletters and
marketing materials that can be sent out in a pre-determined sequence to your
customers.

[UPDATE – Weebly now has a newsletter feature called Weebly Promote where


you can send newsletters to your contact list or customers.  This is a good
addition to its existing range of ecommerce tools.  
Weebly Promote is free, and you have the option of upgrading if you need more
“horsepower” relating to running newsletter marketing campaigns.]
 

B) Live Estimates of Shipping Costs


Shipping costs have always been a bit of a headache for online stores.  Research
has shown that a lot of times, when “almost” customers are in your checkout cart
and they are greeted with a surprise shipping cost, they walk away and you lose the
sale.

One of the painful things that merchants face is the ability to provide updated, live
estimates of shipping costs for customers directly from the carriers (so the
customers know they’re paying for real shipping costs).

If Weebly can somehow integrate live estimates from carriers such UPS,
Fedex or USPS, this will provide much comfort to these “almost” customers.
“Pure” ecommerce providers such as Shopify and BigCommerce, or
even Squarespace(similar to Weebly than the pure ecommerce builders) include
real-time shipping quotes as part of their pricing plans.  Having said that, the price
points for these plans are higher than Weebly’s Business plan.  But at least they
provide this function as an option to you.
[UPDATE – Weebly introduced Real Time Shipping tool, where the shipping
rates are calculated in real time based on your customers’ order and shipping
address. This solves a huge headache for you, and gives your shoppers confidence
that the shipping fees are calculated properly.
The shipping address has to be in the US, Canada or Mexico.  The Real Time
Shipping tool can be connected with USPS, DHL, FedEx and UPS. This feature is
only available to Performance plan users.]
 

C) Advanced eCommerce Analytics

One helpful tool that Weebly is missing is advanced ecommerce analytics.  For
some other ecommerce website builders, at the right pricing plan, they will provide
you with in-depth statistics so you can better understand the performance of your
business.

You can have an overview dashboard that will summarize over a set period of
time your revenues, units sold, the number of orders, conversion rates, etc.  You
can also dig into stats for each of your product, including where the customer came
from (Google, Facebook, Yahoo, etc) and what device he/she used (desktop, tablet,
smartphone).

These analytics insights are invaluable as you can gain a better understanding
of where your customers are coming from, and which product are they
purchasing.  
For instance, you can quickly filter through your sales statistics and find out that
Product A is your best seller, and the majority of your customers that purchased
this product used their smartphones, and they found your website via Facebook.
Now, you can craft a plan to either further optimize this sales channel or work on
improving other products since this specific product is doing well.
What you do with the information is up to you.  But at the very minimum, you
should have these data at the tips of your fingers.

Weebly allows you to integrate your store with Google Analytics’ ecommerce
tracking function.  But the user experience is not as good when compared to
advanced ecommerce analytics dashboard that is built into other online store
builders such as Shopify,BigCommerce or even Squarespace.
This is something Weebly could introduce to help you improve your business by
keeping you better informed of trends and patterns based on your customers.Try

6. WEEBLY ECOMMERCE PRICING (WORTH IT?)

You can use some of Weebly’s eCommerce features only if you subscribe to at


least their Starter plan (you can’t access ecommerce tools with Weebly’s free
plan).  However, if you upgrade to their Business or Performance plans, you get
substantially more powerful features.
As mentioned in various sections above, upgrading to their Business or
Performance plans gives you:

 A free SSL certificate (valued at around $70 and above


(source: GoDaddy.com)
 Fully integrated shopping cart that uses your own custom domain name
throughout the entire checkout experience (beneficial to you as your
shoppers never leaves your website through the entire purchase process)
 Inventory control & management
 Full shipping configuration options
 Shipping & Tax calculator
 Discount code engine
 Ability to use PayPal, Stripe, Authorize.net and Square to power your
shopping cart
 1 free custom domain name for 1 year
 Real time shipping rates (only available to Performance Plan users)
 Abandoned cart recovery (only available to Performance Plan users)
 Gift card products (only available to Performance Plan users)

44. Design a XML document using basic syntax.

<?xml version="1.0" encoding="UTF-8"?>
<breakfast_menu>
<food>
    <name>Belgian Waffles</name>
    <price>$5.95</price>
    <description>
   Two of our famous Belgian Waffles with plenty of real maple syrup
   </description>
    <calories>650</calories>
</food>
<food>
    <name>Strawberry Belgian Waffles</name>
    <price>$7.95</price>
    <description>
    Light Belgian waffles covered with strawberries and whipped cream
    </description>
    <calories>900</calories>
</food>
<food>
    <name>Berry-Berry Belgian Waffles</name>
    <price>$8.95</price>
    <description>
    Belgian waffles covered with assorted fresh berries and whipped
cream
    </description>
    <calories>900</calories>
</food>
<food>
    <name>French Toast</name>
    <price>$4.50</price>
    <description>
    Thick slices made from our homemade sourdough bread
    </description>
    <calories>600</calories>
</food>
<food>
    <name>Homestyle Breakfast</name>
    <price>$6.95</price>
    <description>
    Two eggs, bacon or sausage, toast, and our ever-popular hash
browns
    </description>
    <calories>950</calories>
</food>
</breakfast_menu>

Output
45. Uploading websites on FTP and Local Server.

The process of transferring a file from your computer to your website is


often referred to as "uploading" that file or "publishing" it. For web
hosts that support FTP, or the File Transfer Protocol, you need a
program called an "FTP client" to transfer the file. You can find a list
of free FTP clients at
http://www.thefreecountry.com/webmaster/freeftpclients.shtml

This tutorial only deals with how you can transfer a file to your web
server using a free FTP client known as FileZilla. Versions for
Windows, Linux and Mac OS X are available. I will describe the
Windows version of this program, but if you use another operating
system, chances are that it will work very similarly.

Download and Install FileZilla

First, go to the FileZilla download page and obtain the appropriate


version for your system. For Windows, get the Setup version; at the time
I wrote this, it's the one labelled "(recommended)" under the Windows
section.

Once you have downloaded the program, you will have to install it. Go
to your desktop and doubleclick the file that you have just downloaded.
Follow the instructions to install it to your hard disk.

Preliminary Steps

Before you can upload any file to your site, you will also need some
information from your web host. In particular, you will need to find out
the following:
 The name of the FTP server for your website. For example, your
host may tell you that your FTP hostname is "ftp.example.com".
 Your user id or login username for your FTP account.
 Your password for your FTP account.
 The directory where you need to place your files so that they can
be seen by a web browser visiting your site. For example, your
host may tell you to place the files in a subdirectory called "www"
or "public_html" or even the default directory that you see when
you log into your FTP site.

If your web host tells you that you do not have FTP access, you cannot
use this tutorial. You will have to use whatever method the web host has
designated for you to upload your files.

Steps to Uploading or Publishing a File to Your Web Server

For the purpose of this tutorial, I will assume that you wish to upload a
file called "feedback.php". Everytime you see "feedback.php"
mentioned, you can substitute that name with the name of the file you
actually wish to upload. FileZilla does not restrict you to uploading only
files of that name. You can upload images (eg, GIF, JPG, PNG, etc),
HTML files, video clips, music files (eg MP3 files, WAV files, MIDI
files), Perl scripts, PHP scripts, and so on. For the curious: I use
"feedback.php" as the example file because this guide was originally
written to help those who use my free Feedback Form Wizard to upload
the generated form to their website.

1. Click the "File" menu followed by the "Site Manager" item on that
menu. A dialog box will appear.

2. Click the "New Site" button on that dialog box. This creates a new
item under "My FTP Sites" called "New FTP site". Rename "New
FTP site" to the name of your site if you wish. By default, the
keyboard cursor would have been placed in the name portion of
"New FTP site" allowing you to change the name immediately.
3. If you have lost the cursor because you accidentally clicked
somewhere else in the dialog box, you can get it back by simply
clicking once on the name. Note that this name can be anything
you wish - it is not required for accessing your site. However, you
will probably make your life easier if you change the name to that
of your site rather than the cryptic "New FTP site".

4. Under the tab "General", enter the name of your FTP server in the
"Host" input box. For example, if your web host told you that your
FTP hostname is "ftp.example.com", enter "ftp.example.com" into
the space provided.

5. Leave the "Port" and the "Servertype" entry boxes alone. Use your
mouse and select "Normal" from the drop down list box for
"Logontype". This will enable the "User" and "Password" boxes
for the next step.

6. Enter your user id or your login name (or whatever your web host
calls it) into the "User" input box. Likewise, enter your password
into the "Password" input box. Note that this information is
automatically saved onto your computer and will be re-used the
next time you run FileZilla, so you do not have to re-enter them
again. (It also means that you should not use FileZilla in this way
on computers that others may have access to, such as those found
in an Internet cafe or a public library.)

7. Click the "Connect" button. FileZilla will proceed to log you into
your server. If it is successful, you will see a directory listing of
your website's account in the right hand side of the FileZilla
window. The left hand side of the FileZilla window shows the
directories and files on your own computer.
8. If your web host told you to only upload in a specific subdirectory
on the web server, such as in the "www" or "public_html"
directory, change to that directory by doubleclicking its name in
the folder portion of the right window pane (the "Remote Site"
window pane). FileZilla will open that folder and show you its
contents in the files portion of the Remote Site window pane.

9. Next, locate the file that you wish to upload in the left window
pane (the "Local Site" pane). Both window panes behave mostly
like a Windows Explorer windows, so navigating them should not
be unduly hard. Once you have located the file you wish to upload,
say "feedback.php", doubleclick it to upload it to your website.
Alternatively, you can drag that file from the left window pane to
the right window pane. The file will be uploaded to the folder that
is currently open on the right window pane, so make sure you have
changed to the directory you want before dragging the file there.

10. As FileZilla proceeds to upload your file to your site, you


should be able to see the upload progress in the bottommost
window pane in FileZilla. When the upload has completed, you
can disconnect from your website. Do this by clicking the "Server"
menu followed by the "Disconnect" item.

Congratulations! You have successfully uploaded a file to your website


using an FTP client, FileZilla

You might also like