Most hosting providers actually require that you use FTP to transfer your pages onto their servers, which
means that you need an FTP program (sometimes referred to as an FTP client) to put your files on a server.
Most FTP programs have two windows, each with a file explorer. One represents the files and folders on
your computer; the other represents the folders on the web server. In Figure 13-7, you can see the folders
on my computer, and on the right you can see those on a web server.
Figure 13-7
The table that follows shows some of the most popular FTP programs.
Each of the programs is slightly different, but they all follow similar principles.
Product Name URL OS
FireFTP
/>Windows and Mac OS X
Cute FTP
www.cuteftp.com/
Windows and Mac OS X
FTPX
www.ftpx.com/
Windows
Fetch
www.fetchsoftworks.com/
Mac
Transmit
www.panic.com/transmit/
Mac
521
Chapter 13: Putting Your Site on the Web
59313c13.qxd:WroxPro 3/23/08 9:38 PM Page 521
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
When you register with a host, this host will send you details of how to FTP your site to its servers. This
will include:
❑ An FTP address (such as
ftp.example.com
dard marketing practice. It’s good to review your search engine ranking at least once a quarter — or
once a month if possible.
You should never just rely upon the search engine sites to find your site and index it. For example, sites
such as
dir.yahoo.com
and
dmoz.org
are Internet directory sites based upon categories, and you have
to navigate through the categories to find the site you want. This manual categorization of sites requires
that you submit the URL of your site to them; it can then take anywhere from a couple of weeks to a few
months for your site to appear on theirs.
Some sites charge for the privilege of being listed on their site, and in such cases you should carefully
consider whether it’s worth the money. While it may be worthwhile to pay to be featured on large popu-
lar sites, unless you personally know the site, you may find it does not provide many referrals. This is
discussed more in the next section.
Once you have manually notified a search engine, you should wait at least a month before submitting the
URL again. If you over-list a site it’s considered spamming, and you might not get listed at all. If you have
made significant changes to your site, it is always worth re-submitting it (not too frequently) so that the
changes get identified.
Personally, I ignore programs that promise to submit my site to thousands of Internet directories and
would rather do the work myself. Spending just an hour a day for a couple of weeks, first submitting
the site manually to major search engines and then looking for other relevant web sites and asking them
to list my new site. I do this because some of the programs used generate so many submissions to web
search engines that they are considered spam (and as a result are ignored). Remember that if the offer of
results sounds too good (guaranteeing you top ten placements on thousands of search engines), the offer
may well be too good to be true!
Designing Your Page to Maximize Rankings
Search engines that use programs to automatically index sites are using increasingly sophisticated rules
to determine who gets the highest ranking (top) results in a web page. Following are some points to con-
sider when designing your pages to help ensure that your site gets the highest ranking it can:
car dealers linking to a pet shop as being a relevant link.
❑ The more users who click on links to your site when it comes up in the search engine, the better
your rating should be. While things such as the title, keywords in the text,
<meta>
tags, and the
number of links may help you appear nearer the top of the search engines, if nobody clicks on
the links to visit your site, your ranking will soon fall.
It can take a long time to build up your search engine rankings, but constant attention will help you get
better and better. See the section “Other Web Marketing Possibilities” a bit later in this chapter for addi-
tional marketing tips to help you build traffic on your site. But first I’ll show you what to do if you do
not want your pages indexed.
robots.txt
On some web sites, there will be pages that you do not want to be indexed — for example administration
pages and test pages. To prevent pages from being indexed by a search engine, you can include a simple
text file on your site called
robots.txt
(which you write in a simple text editor such as Notepad on
Windows or SimpleText or TextEdit on a Mac).
The
robots.txt
file can contain simple commands that prevent parts of the site from being indexed by
the web crawlers (the little programs that index sites), which are often programmed to read these files.
You should have only one
robots.txt
file for your site, and it should be placed in a folder called
htdocs
in the root folder of your web server. Some web hosting companies create the
htdocs
folder for you; other
hosts require you do this yourself if you need one.
decide whether the cost is justified by the amount of traffic it will bring you. You could always
ask some people in your industry if they use the site and thus gauge whether you are likely to
get many referrals from it.
❑ Many sites offer reciprocal links; that is, they will link to you in return for your linking to them.
It is a way for everyone to boost traffic. But make sure that you are not putting someone on the
front page of your site when they are going to put a link to you tucked away on a page that few
people will come across — the term is reciprocal linking, after all.
❑ Use a few search engines to search for related companies and find out who is linking to them —
the sites that link to related sites may well link to you, too, if you ask. You may find sites that you
have never heard of before but would be happy to have link to you.
❑ You can provide buttons or banners on your site so that people can integrate them into their sites.
This is more likely to happen with community sites than with commercial sites, but hobbyists will
often link to special-interest sites, and it is a lot easier for them to do this if you have already pro-
vided links for them. If the links look great, too, they are more likely to want to add them.
❑ Take a look at Pay Per Click (PPC) advertising. Google has a PPC system called AdWords, for
which you specify keywords, and when a user searches using those words, the ads appear on the
right side of the page. These ads can also appear on other special-interest sites. AdWords works in
a very clever way. You pay for an advertisement only when the user clicks it. The ranking of which
ads appear first is based upon the amount you are prepared to pay each time someone clicks the
ad, and the number of people who actually click on your ad. If users do not click the ad, it slips
down in position, no matter how much you pay (after all, Google stands to make more money if
10 people click a cheaper link than if one person clicks a slightly more expensive link, and more
users are getting value from their service). Generally speaking, this is a very cost-effective way to
generate traffic to your site. Yahoo offers a similar service called Overture, and Microsoft has a sys-
tem called adCenter.
❑ There are many other forms of paid advertising you can take out on the Web. Lots of sites take out
banner advertising, and lots of sites allow you to pay to be listed. You will have to judge each of
these on whether you think you will get enough traffic to justify the money. Remember that a lot
of web users are immune to advertising and just scan pages to find what they really want — so if
you are going to create a banner, make sure it’s visually attractive and that people will want to
tor — so if there are ten people, all of whom work in the same building, looking at the same site at once,
then that might look like only one user instead of ten. Different packages also tend to count visits as dif-
ferent lengths of times; some packages remember an IP address for a whole day, so if the same person
comes to the site in the morning and then again in the evening it is counted as just one visit. Others will
remember the IP address for only 15 minutes.
You will also find that some advertisers will ask for the number of unique visitors you receive each
month — again different statistics packages can count unique users in different ways, so this figure
can be a little misleading.
Most statistics packages will actually offer you a lot more information than I have mentioned here. For
example, it is quite common for these packages to tell you how people arrived at your site — what pages
and sites people came from and how many came from each. This helps you learn how people are finding
out about and coming to your site, which then helps you determine good places to market your site.
Statistics packages also frequently tell you what terms people were searching on in order to find your
site — so you can tell what keywords have been entered into search engines for users to find you, and
then work on enhancing the frequency of these words in pages and enhancing your search engine posi-
tion. Figure 13-9 shows you some of the terms used to find a site about printing equipment and services.
526
Chapter 13: Putting Your Site on the Web
59313c13.qxd:WroxPro 3/23/08 9:38 PM Page 526
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 13-9
Some other information you might be able to find out includes:
❑ Which page users arrived at on your site and which they left from. This is very helpful because
you can get an idea what people are coming to the site for and where they leave from. If there is
one page that makes a lot of people leave, you can do something about improving the design of
that page to try to make visitors stay on your site longer.
❑ Which country users are from
❑ What browsers users were using
❑ The language that users’ operating systems are set to, and therefore which language they are
likely to speak
with the same name. For example, you can simply add a date and time to any file before saving over it.
If you want to change your home page
index.html
, you can save a copy with the date you change it.
The advantage to this is that you also know when it was last changed.
This does take up more space on your hard drive, but if you regularly make an archive copy of your sites
and remove older files that are never used, you can regularly clear up the space they take and maintain a
manageable set of files.
You can also use your own
<meta>
tags to indicate a version as well as the name of the last person to
update the file. You might remember from the beginning of the chapter that I said you can use anything
you like as the value of the
name
attribute of the
<meta>
tag; this is a good example of doing exactly that.
For example, here are
<meta>
tags to indicate the last modified date and who made the last changes:
<meta type=”last-modified” content=”16-04-04:12:34:00 GMT” />
<meta type=”last-changes-by” content=”Jon Duckett” />
Remember that you also have the
<ins>
and
<del>
elements, although these are not likely to be
as much use when simply making updates to a site — they are more useful for tracking versions of
documents.
It is also good practice to add comments into code when you change something that other people have
your site. You learn how to create a blog, how to add discussion groups or forums to your sites, and how to
add search features. While these might all sound complicated — and they certainly are advanced features —
they can be remarkably easy to implement and you will see how they can be powerful and impressive fea-
tures on any site.
Much like Hotmail offers e-mail over the Web, most of these services are implemented using other
companies’ servers and code — all you have to do is customize them to make them appear like part
of your site.
Blogs
The word “blog” is short for weblog. Blogs were initially devised as a way to add online journals or diaries
to a personal web site. The idea behind blogs was to allow users to easily add new entries or posts to their
web site without having to manually re-code the page (often called one-click publishing). The user goes
to the web site of the company who made the blog, writes a post into a form, and the entry then appears
on the web site.
The posts are added to the site in a chronological order, and while they are often used for online diaries or
journals, they have been used for a wide variety of other purposes, such as a way for people to add news,
posts about a topic of shared interest, links, and so on.
Indeed, while blogs started as a way for anyone to share thoughts with the rest of the Web, they soon
started to appear on company intranets (as a way to share information), and on public web sites as a
news feature (rather than just being used as a diary).
529
Chapter 13: Putting Your Site on the Web
59313c13.qxd:WroxPro 3/23/08 9:38 PM Page 529
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Several different companies and web sites give you the tools to add a blog to your web site. Two of the
more popular ones are:
❑
www.blogger.com/
❑
www.movabletype.org/
Both of these sites give you the tools to add posts to your blog without having to manually update your
that you can add a Google search utility to your site, and you can even customize the search by going to
www.google.com/coop/cse/
. Another site that offers a free customizable search service on sites of up
to 500 pages is the Atomz Express service at
www.Atomz.com/
(you may need to follow the links for the
trial service).
530
Chapter 13: Putting Your Site on the Web
59313c13.qxd:WroxPro 3/23/08 9:38 PM Page 530
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
The addition of a search facility to your site can mean the difference between users’ finding what they
hoped to find or simply giving up and leaving; after all, many visitors will not hang around long enough
to browse through lots of pages if the information they want is not easily accessible.
With both the Google and Atomz services, you are given the code for a form that will allow users to send
queries to the respective company’s web site. The company’s servers will then return a page to your users
with the results of the search. Both services allow you to create custom headers for the page so that it con-
tains your branding, although the results are generated by the company’s servers.
Introducing Other Technologies
This section provides an introduction to some other technologies, what they can do, and how you can
make use of them on web sites. I hope this helps you decide what technology you might want to start
learning next when you have gained experience with everything you’ve learned in this book.
Server-Side Web Programming: ASP.NET, and PHP
You’ve already seen the very basics of what a programming language such as JavaScript can do in a
browser, but when a programming language is used on a web server, it becomes even more powerful.
Any time you want to collect information from a visitor to your site and return a page that is customized
for that visitor, you will want to look at server-side programming. Here are some examples of applications
where different users will need different pages:
❑ Searching for content on a site: The user enters a term that he or she wants to search for into a
form that is sent to the application on the server. The application then creates a page that contains
You can code these pages on your desktop computer with the right software installed, but you will want
to host the finished web site on a web server.
The first applications created using a script on a server were known as CGI scripts. You may still see
CGI
or
CGI-bin
in the URL of some applications. However, the languages discussed here are in far
higher demand and are more powerful.
Different developers will have different opinions about which language to choose. But most people learn
one environment and stick to it (although to a certain degree it is much simpler to learn a second language
and environment when you already understand one and know what can be done with server-side script-
ing languages).
If you are learning any technology in order to get a job, then it’s a good idea to keep an eye on job advertise-
ments. You will be able to track the technologies required and also (if you look regularly) you will be able to
see the emerging technologies early on — first there will be only one or two mentions of these technologies,
and then the mentions will come more regularly. Job ads can therefore be quite a good barometer for tech-
nologies you should consider learning. (And if your boss catches you looking at job ads, you’ve got a great
excuse — you’re just researching which technologies are going to be more popular in the near future.)
Content Management
One of the key aspects of many sites is a content management system. This is actually a fancy name for
something that will allow you to easily update the content of your web site without actually having to
create a new page for each new article, posting, or product for sale.
Content management systems tend to be based on a relational database. Relational databases contain
one or more tables, each of which is like a spreadsheet. Figure 13-10 shows you a database used in a site
about music.
You can see that there are several rows in this table, each containing the details of a different advertisement.
The columns each contain different information about the article in that row:
❑
articleid
is a number used to uniquely identify each article in the system.
template for all the articles, and the title, headline date, and article are added into the page at the
same place in each article. You can see an example of an article in Figure 13-11.
Look at the structure of the URL for this ad; it is the key to how this template-based system works:
/>Figure 13-10
533
Chapter 13: Putting Your Site on the Web
59313c13.qxd:WroxPro 3/23/08 9:38 PM Page 533
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 13-11
The
article.aspx
page is requested, and when it is requested, the article identifier
1496
is also
requested. This corresponds with the number in the first column of the table in Figure 13-11. All the details
of this article are then placed into the template. So, where the text says “Thursday December 6, 2007” this is
the headline date field from the database.
This approach is also what makes it possible for many authors to update the same site without having to
know how to code each individual page. Rather, they log into a simple administration tool that allows
them to submit articles using a simple form. Figure 13-12 shows one of the pages that allows users to
enter new articles.
534
Chapter 13: Putting Your Site on the Web
59313c13.qxd:WroxPro 3/23/08 9:38 PM Page 534
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 13-12
This approach of storing content in a database is employed in many different types of sites. For example,
auction sites such as eBay store each item for sale in a row of a database; likewise, e-commerce stores
tend to store product details in a database, with each product stored in a row of one of the tables. When
these sites use a row of a table for each article or product, new articles or products can be added using
❑ A photo editing and manipulation package such as Adobe Photoshop or the “lite” version,
Photoshop Elements. These work with bitmapped graphics.
❑ A vector art package such as Adobe Illustrator or Macromedia Freehand. These work with vec-
tor graphics (line drawings created using coordinates), which are then filled in with colors.
You learned a bit about the difference between bitmapped graphics and vector graphics in Chapter 3.
Adobe Photoshop is by far the most popular graphics program used for developing web graphics. You
need only look at job ads for web designers and you’ll see that knowing Photoshop is often a prerequi-
site. Photoshop not only allows you to work with photos, but it can also be used to create text and logos
(although an experienced designer would usually favor a vector program when it comes to creating logos
and diagrams from scratch).
Photoshop is a valuable tool to know because it not only allows you to edit photos, but also lets you create
all kinds of images, such as navigation images and logos. It will then take these images and create opti-
mized versions of them ready for the Web with smaller file sizes for quicker downloads.
When working in Photoshop, you can create an image built up from many layers — each layer is like a
piece of clear film over the first image you start with, allowing you to make changes on top of the image.
When you have experience with a photo package you might want to learn a vector image package, espe-
cially if you are going to be creating lots of logos or diagrams. Vector packages are of little use if you are
working with photos, but they are great for doing line-based work. By their nature, vector graphics scale
very well, and logos are often created in a vector format because they allow you to scale an image to a large
size for a poster or shrink it down for a small web graphic. By contrast, if you blow up a bitmapped image
to a very large size it will look grainy — you will be able to see all of the pixels that make up the image.
Of course, there are many other technologies you could learn, but the ones you have learned about in
this section offer you the next logical steps in your web development career. If you want to work more
with graphics I advise you to start with Photoshop or Flash, whereas if you want to work more on pro-
gramming, start learning a server-side programming language.
536
Chapter 13: Putting Your Site on the Web
59313c13.qxd:WroxPro 3/23/08 9:38 PM Page 536
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Summary
The final part of the chapter looked at where you can go next with your site. You saw that there are serv-
ices such as blogs, discussion boards, and search features that have already been developed by compa-
nies that allow you to integrate these services into your site. If you are interested in programming, you
should consider learning a server-side language such as ASP.NET or PHP. Alternatively, if you are more
interested in the visual appearance and design of sites you should consider learning a graphics program
such as Adobe Photoshop, and possibly some animation software such as Flash.
This book has covered a lot, and the best way to make sure you have understood it properly is to get out
there and build some sites. Perhaps you can create a site about a hobby or interest of yours, or maybe you
can create a site for friends who run their own small business.
Remember that if you like the way someone has done something on a site (perhaps you like the layout, or
the size and type of font used) you can simply go to the View menu on your browser and select the option
to display the source for the page. While you should never copy someone else’s design or layout, you can
learn a lot from looking at how other people have built their sites. But remember that they might not be
using XHTML; a lot of pages are out there that were built using earlier versions of HTML. HTML is not
strict about how you write your pages, and there are a lot of coders out there who are not as aware of
537
Chapter 13: Putting Your Site on the Web
59313c13.qxd:WroxPro 3/23/08 9:38 PM Page 537
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
such things as which elements require closing brackets, when to use quotes for attributes, or how to use
CSS well.
While older, more relaxed ways of coding may seem easier, by being strict with how you use markup, sep-
arating as much of your markup from styling as possible, and using JavaScript only to enhance pages, you
end up with pages that will be available to more browsers and more people for a longer time.
So, thank you for choosing this book, and congratulations on making it to the end. I wish you all the best
in creating your first web site and hope that it is the first of many!
538
Chapter 13: Putting Your Site on the Web
59313c13.qxd:WroxPro 3/23/08 9:38 PM Page 538
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
<h1>Ricotta pancake ingredients:</h1>
<ul>
<li>1 <del>1/2</del><ins>3/4</ins> cups ricotta</li>
<li>3/4 cup milk</li>
<li>4 eggs</li>
59313bapp01.qxd:WroxPro 3/23/08 1:48 PM Page 539
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
<li>1 cup plain <ins>white</ins> flour</li>
<li>1 teaspoon baking powder</li>
<li><del>75g</del><ins>50g</ins> butter</li>
<li>pinch of salt</li>
</ul>
Chapter 2
1.
Look back at the Try It Out example where you created a menu, and create a new page that has
links, like those at the top of the menu page, to each of the courses in the menu example. Then
add a link to the main Wrox Press Web site (
www.wrox.com
).
A.
Your code should look something like this:
<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“ /><html xmlns=” lang=”en”>
<head>
<title>Links to menu</title>
</head>
<body>
<h1>Links to the Wrox Cafe Menu</h1>
<div id=”links”>
<a>testimonials</a> page.</p>
540
Appendix A: Answers to Exercises
59313bapp01.qxd:WroxPro 3/23/08 1:48 PM Page 540
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.