Professional Documents
Culture Documents
Web Program
Web Program
Web 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>
</HEAD>
<BODY>
<OL>
<LI> Android
<LI>Blckberry
<LI> iPhone
</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>
</HEAD>
<BODY>
<UL>
<LI> Android
<LI>Blckberry
<LI> iPhone
</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>
<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:-
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
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
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>
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>
</body>
</noframes>
</frameset>
</html>
Output:-
12.Write a program for Special tag and chractertype in HTMl.
Program:-
<!DOCTYPE html>
<html>
<body>
</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:
Output:-
User ID :
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:-
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
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:-
submit
22. Write a program for using following tag password box , radio button ,
check box, text control in HTML .
Program:-
<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>
</form>
23. Write aprogram for java script to print a single statement .
Program:-
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>
</body>
</html>
Output:-
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>
</body>
</html>
Output:-
Program:-
function popup() {
alert("Hello World")
}
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
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>
Output:-
This is red
This is thick
This is green
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
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>
</body>
</html>
Output:-
32. Write a program for document object model in dhtml.
Program:-
<!DOCTYPE html>
<html>
<body>
<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:-
<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>";
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
<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
<!DOCTYPE html>
<html>
<body>
<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.
.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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
You can adjust the shipping rates based on geographical locations, and dig into
sub-regions such as by state or province.
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.
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.
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.
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.
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.
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.
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.
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.
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.]
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
<?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.
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.
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.
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.