How to create Web sites and applications with HTML, CSS

329 Pages·2009·10.03 MB·English

by  Robert Schifreen

How to create Web sites and
applications with HTML, CSS,
Javascript, PHP and MySQL.

By Robert Schifreen
This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

The Small Print. Please Read.

This book is free of charge for personal use. You can use it to help you develop
sites for yourself or for anyone else.

You may not share the PDF file or upload it to online services. If a friend or
colleague wants a copy, please ask them to download it from our web site.

To distribute copies of this book for commercial purposes, such as a textbook
for a school class or a training course, or if you’re an internet service provider
and you want to give or sell copies to your customers, you need to buy a licence
for each copy that you distribute. See www.the-web-book.com for details.

Producing derivative works is forbidden. You may not create your own version
of this book, regardless of whether a fee is charged. In addition, you may not
create a web site the content of which is wholly or partly based on text
extracted from this book.

Separate editions of The Web Book are available, featuring examples from
different hosting companies and configured for different printer page sizes.
Refer to the web site to see the latest offerings.

The Web Book is published by Oakworth Business Publishing Ltd.
Registered in the UK. Company number 2783266.
Telephone [phone] (UK)
[phone] (International)

Edition 2.1 (September 2009).
All content copyright © Robert Schifreen
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
2
This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Contents

Contents........................................................................................................................3
About The Web Book.....................................................................................................7
Why We Recommend Hostmonster.com.............................................................................................8
A Custom Edition For Your Company..................................................................................................8
Who’s Written This Book? And Why?..................................................................................................8
Why We’re Here..................................................................................................................................10
From Word Processor to Web Site.......................................................................................................13
But How Long will All This Take?........................................................................................................13
What Is a Web Site Anyway?.........................................................................................14
How the Web Works............................................................................................................................14
Domain Names.....................................................................................................................................15
The Simple Option..............................................................................................................................19
The Flexible Option.............................................................................................................................20
About Web Content.............................................................................................................................23
Do you need a development server?...................................................................................................24
Getting Everything Together........................................................................................25
Domain Name and Hosting .........................................................................................27
It’s Not Rude to Point..........................................................................................................................33
HTML Editor and FTP Client.......................................................................................35
Amaya..................................................................................................................................................35
Make A Web Work Folder...................................................................................................................35
Filezilla................................................................................................................................................36
Creating Your First Web Page......................................................................................39
Now step away from the computer!.............................................................................44
WWW – What, Why, Who?................................................................................................................44
Importing Existing Content................................................................................................................45
Writing For The Web...........................................................................................................................46
Fonts and Colours...............................................................................................................................47
Hyperlinks..................................................................................................................48
Linking to Other Sites.........................................................................................................................50
Mailto: Links.......................................................................................................................................50
Understanding The Basics of HTML............................................................................52
Meta tags.............................................................................................................................................55
HTML Accessibility, Accuracy and Privacy........................................................................................56
Validating your HTML........................................................................................................................56
A Bit More about Accessibility............................................................................................................57
Cascading Style Sheets................................................................................................59
About DOCTYPEs................................................................................................................................60
Getting Started with CSS.....................................................................................................................60
A Word About Fonts............................................................................................................................67
Classes.................................................................................................................................................69
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
3
This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Making Styles Work For You..............................................................................................................70
HTML Tags Names..............................................................................................................................70
A Better CSS Editor..............................................................................................................................71
ID-based Styles....................................................................................................................................74
Extreme CSS........................................................................................................................................75
Page Layouts and Div Tags ..........................................................................................78
The CSS Box Model.............................................................................................................................83
Pictures On Pages........................................................................................................84
About Image Sizes...............................................................................................................................85
Pictures As Links.................................................................................................................................86
Finding Images to Use on Your Site....................................................................................................87
A Browser Icon for your Site.......................................................................................88
Short Cuts to Great Web Pages....................................................................................92
Using an Open Source Design.............................................................................................................94
Tweaking the Text...............................................................................................................................95
Changing the Pictures.........................................................................................................................96
Changing the CSS Styles......................................................................................................................97
Which Style Is This?............................................................................................................................99
Adding Pages and Navigation............................................................................................................101
Uploading the Finished Files............................................................................................................104
Rules, Tables and Image Maps...................................................................................106
Horizontal Rules................................................................................................................................106
Tables.................................................................................................................................................108
Image Maps........................................................................................................................................110
Password-Protecting your Web Pages ........................................................................113
The .htaccess File...............................................................................................................................113
The .htpasswd File..............................................................................................................................115
Protecting Multiple Folders...............................................................................................................117
CMSes and Other Software.........................................................................................118
CMSes and Templates.......................................................................................................................120
Automatic Installers...........................................................................................................................121
Try Before You Install.......................................................................................................................122
A Word about Patching.....................................................................................................................123
Setting Up A Database.......................................................................................................................124
General Installation Procedures.......................................................................................................126
Uninstalling........................................................................................................................................127
Joomla.......................................................................................................................128
Uploading the Files...........................................................................................................................128
Configuring Joomla...........................................................................................................................129
Your New Joomla Site.......................................................................................................................134
WordPress.................................................................................................................139
Downloading the Software................................................................................................................139
Make a Database...............................................................................................................................139
Configure WordPress........................................................................................................................139
Upload The Software..........................................................................................................................141
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
4
This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Final Configuration............................................................................................................................141
phpBB........................................................................................................................146
File Permissions.................................................................................................................................147
Plogger.......................................................................................................................154
Getting Started...................................................................................................................................154
The Installation Process.....................................................................................................................156
Uploading Your Pictures...................................................................................................................158
Avoiding Data Overload....................................................................................................................160
Installing the PSPad Editor........................................................................................162
Javascript...................................................................................................................166
Choose Your Side...............................................................................................................................166
Javascript and Semicolons.................................................................................................................174
Email Address Obfuscation................................................................................................................174
Why Upload?......................................................................................................................................175
Security and Cookies..........................................................................................................................176
Morning All!.......................................................................................................................................178
Getting the Screen Size.......................................................................................................................179
Javascript Toolkits and Frameworks.................................................................................................179
Finding Out More..............................................................................................................................180
Web-hosted Databases with MySQL...........................................................................182
Databases, Tables, Fields, Rows and Columns.................................................................................183
Normalization....................................................................................................................................183
Referential Integrity..........................................................................................................................186
Creating A Database...........................................................................................................................187
Port Problems....................................................................................................................................190
Using phpMyAdmin..........................................................................................................................190
Creating The Customers Table..........................................................................................................192
Inserting Some Data...........................................................................................................................197
Querying the Customers Table..........................................................................................................199
Introducing PHP.......................................................................................................208
Don’t Panic!.......................................................................................................................................208
Your First PHP Program...................................................................................................................209
Some More PHP.........................................................................................................216
Random Numbers.............................................................................................................................216
Sending Email with PHP...................................................................................................................219
Passing Information to PHP.............................................................................................................222
Never Forget to Sanitize....................................................................................................................224
Loop the Loop....................................................................................................................................227
Arrays.................................................................................................................................................229
User-Defined Functions....................................................................................................................233
HTML Forms.............................................................................................................236
Creating a Form with Amaya............................................................................................................238
Naming the Form Objects.................................................................................................................241
Handling Form Data and Quote Marks............................................................................................244
Testing The Form..............................................................................................................................246
Retrieving Textarea and Dropdown Data.........................................................................................249
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
5
This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Checkbox Arrays................................................................................................................................250
Feedback Forms................................................................................................................................252
Hidden Fields....................................................................................................................................252
Accessing MySQL Databases with PHP...................................................................... 255
Counting Rows..................................................................................................................................257
Reading Data.....................................................................................................................................259
Searching A Table..............................................................................................................................264
Preventing SQL Injection Attacks.....................................................................................................269
Adding Data to a Table......................................................................................................................270
Editing a Data Record.......................................................................................................................276
Deleting Data.....................................................................................................................................284
Putting it All Together.......................................................................................................................285
Debugging and Global Variables................................................................................287
Syntax Errors.....................................................................................................................................287
Coding Errors....................................................................................................................................288
The $_SERVER Variables.................................................................................................................292
Application Structure Revisited.................................................................................295
Web Servers and the Real World......................................................................................................296
Saving State.......................................................................................................................................297
How to Back Up your Web Site..................................................................................298
Don't Forget the Data........................................................................................................................298
Restoring Lost Information..............................................................................................................300
Promoting and Profiting............................................................................................302
Promoting Your Site..........................................................................................................................302
Making Money...................................................................................................................................304
Accepting Online Payments..............................................................................................................306
Managing your Marketing.................................................................................................................308
Search Engine Optimisation.......................................................................................313
SEO Tips.............................................................................................................................................313
Keeping the Crawlers Away................................................................................................................315
If at First you Don’t Succeed, Pay.....................................................................................................316
The End. So, What Now?............................................................................................318
Appendix A – Building a Test Server...........................................................................319
Our Goal............................................................................................................................................319
First Install the OS............................................................................................................................320
Some Useful Commands...................................................................................................................321
Get Updated.......................................................................................................................................322
Test Your Web Server........................................................................................................................323
Install the Telnet Server....................................................................................................................323
An FTP server....................................................................................................................................324
Webmin.............................................................................................................................................326
Webalizer...........................................................................................................................................327
PHP and MySQL...............................................................................................................................328

To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
6
This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

About The Web Book

If you want to create web sites, there are hundreds of books and web pages that claim to
show you how. Some of them are very good indeed. But this book isn’t like all those other
books and web pages, for a number of important reasons:

1. The Web Book is an electronic book, or e-book. You simply download it as a PDF file
from www.the-web-book.com and print it yourself. Or read it on-screen.

2. The Web Book covers all of the technologies that you need to know in order to create
Web sites, both using static HTML pages and database-driven sites.

3. Unlike many books on the subject that were written some years ago, The Web Book
teaches you up-to-date methods. Follow the instructions here and you can be
confident that you’re doing things in the right way, rather than using old-fashioned
techniques that are now frowned upon.

4. I’ve tried my hardest to keep everything non-technical. If you’re "into" computers,
you should be able to follow everything just fine. You certainly don’t need to be a
professional techie. In fact, if you are, you’ll probably take offence at the way I’ve
simplified some things. For which I apologise.

5. If you already look after a web site, perhaps for your school or college, or the
department you work for, you may be itching to take your skills to the next level. Or
maybe you didn’t actually get much training when you took on the responsibility, and
you don’t really understand how everything fits together. In which case, this book is
perfect for you. We don’t just tell you to press buttons. We explain what those
buttons do, and why you need to press (or not press!) them.

6. Here’s the best bit. The Web Book is free of charge. So if you want to teach yourself
how to do Web stuff, whether for creating your own sites or to make sites for other
people, just grab a copy of the PDF file, print out the book, and away you go.

One word of warning, though. Creating a web site and doing it properly isn’t a simple task
that can be done in an afternoon. Yes, we’ve all seen 2-page magazine articles that imply
otherwise, but sadly it’s just not true. Even at 329 pages, this book is only a basic
introduction to some of the more complex topics. It’s quite possible to buy books on HTML,
CSS, PHP and MySQL which each run to 800 pages. I wouldn’t recommend it, however,
unless you have trouble sleeping.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
7
This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Why We Recommend Hostmonster.com

If you want to create web sites, you need a company to host them for you. There are
thousands of such companies out there. The examples in this book are based around one in
particular, namely www.hostmonster.com. We chose this company because their
products appear to be good, and they offer good value. They host the site from which you
will have downloaded this book.

If you’re looking for a web host, we’d love you to use hostmonster because, if you sign up via
our web site at www.the-web-book.com, we get a small amount of commission. But the web
is all about freedom of choice, so if you want to go elsewhere you’re more than welcome to do
so. You’ll need to adapt the examples slightly, but details of any settings or concepts that are
unique to hostmonster are clearly identified in the text.

If you’re considering using a different host, check our web site first. There may be a custom
edition of the book available for that host. We're working on new ones all the time.
A Custom Edition For Your Company

If your company sells web hosting services and you wish to give away or sell copies of this e-
book, we can create a custom version of the book for you, where all the examples feature your
hosting. You can then point your customers at our web site to download their copy.

For information on this service, see www.the-web-boook.com/customize.html or
email [email protected].
Who’s Written This Book? And Why?

The Web Book is written by Robert Schifreen, a UK-based journalist, writer and technical
author. I have more than 25 years’ experience of writing all sorts of technical articles for
various computer magazines, and 9 years’ experience developing web sites for myself and
clients. I’ve also written a "traditional" book before, that was published in 2006 and was
available as a real hardback in real bookshops. A Google search for "defeating the hacker"
will find it for you.

Having taught web development to the 2,500 staff at a UK-based university for the past few
years, I thought it might be helpful to turn my course into a book, which is loosely based on
the stuff I teach and is also inspired by the questions that my students ask. From now on,
when people ask me how to create a web site, or whether it’s easy, I don’t have to spend time
explaining everything. I can just say "go to www.the-web-book.com and download my
free book, which tells you everything you need to know".
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
8
This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

This is the book which I really wish had existed when I started doing web stuff all those years
ago. But, you’re probably asking, why am I giving it away instead of selling it? There are 3
reasons.

One. I quite like the idea of being able to write what I want for a change, without having
publishers and editors to answer to.

Two. I want as many people as possible to see this book, because I think it’s useful. The
trouble with traditional publishing is that, of the hard-earned money that you hand over to
pay for a copy of a traditional book, most of it is swallowed up by the publishers and their
marketing costs. The author, the guy who sat in front of his PC for months writing the thing,
typically gets around 15% of your cash. Sometimes less. So I’ve decided to try something
different. This book is free to download and use. It is financed in 3 ways:

• If you want to make a small donation via www.the-web-book.com/donate.html
you're more than welcome.
• If you run a web hosting company and you would like me to produce a custom
version of the book that features your hosting service, please see the page online at
www.the-web-book.com/customize.html for details and pricing.
• If you want to sign up with a web host, I'd really appreciate you signing up with
Hostmonster (who are featured in this edition of the book). Just click the
Hostmonster icon on www.the-web-book.com/download.php and everything
happens automatically. This brings me a small commission payment, which helps to
pay for the 5 solid months it took me to write The Web Book. It won't cost you any
more, but it means a lot to me.

And the third reason why I'm giving away the book? Having been a professional IT
journalist, editor and writer since 1983, I’ve seen what the internet is doing to the publishers
of magazines and books. Especially those companies which produce IT-related publications.
Computer magazines across the world are being shut down and book sellers are having a
hard time, because the Web, not the pages of a book, is undoubtedly the best place to find
information about technical subjects.

In many cases, those publications shut down not because the product was poor, but because
the publishers failed to see the internet coming and failed to act accordingly. Publishers
need to work with the internet, not against it. Sure, a search engine means that I can find an
answer to a technical problem instantly without having to plough through shelves of books
and magazines. But the Web is also the greatest, biggest, best, cheapest and most efficient
way of copying and disseminating information that’s ever been invented. Just ask the music
industry. So by promoting this book on the internet as a free download I hope that I can
exploit the power of the internet rather than trying to work against it.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
9
This book is free of charge. To get the latest version, see www.the-web-book.com
Please do not make copies of the PDF file for others. All downloads must be from www.the-web-book.com
We can produce custom versions of this book for other web hosts. Email [email protected] for details.

Why We’re Here

No one could have believed, in the last years of the 20th century, that the way we’d all been
doing Web sites was about to change so dramatically. But it did, in two fundamental ways.

Firstly, Web sites generally consisted of a collection of HTML document files. Each page of
the site was a separate file (don’t worry if you don’t understand much of what I'm saying here
- everything will be explained more fully shortly). While this works for relatively simple
sites, with just a few pages, there are better ways to create web sites. Using database
technologies such as MySQL, and programming languages such as PHP, you can create not
just simple informational web sites that allow you to publish information, but two-way sites
that allow your visitors to interact. Stop thinking "electronic newspaper" and think Facebook
or Ebay or Amazon.

The second major change was in the fundamental way that web pages were structured, in
terms of layout and formatting. Font tags gave way to something called CSS, or Cascading
Style Sheets.

In a nutshell, creating web sites has become vastly more complicated over the past decade.
You’ll see from the front cover that this book covers HTML, CSS, Javascript, PHP and
MySQL. If you’re daunted by all that, then don’t be. We’ll cover everything in a logical
order, building up your knowledge in layers, so that all the new material you learn will make
perfect sense because you’ll be able to see it in context.

You are, of course, free to dip into the book as you wish, reading sections in whatever order
pleases you. If you want to know what PHP or MySQL is all about, then by all means skip
straight to those chapters. But if you can possibly spare the time, you’ll find it much more
beneficial to read everything in order. It’ll make much more sense in the long run.

Of course, you may not actually need this book at all, if all you want to do is to put some
information online as quickly as possible so that other people can access it over the web.
There are plenty of free services out there that will allow you to do this, quickly and easily.
Among the best-known of these services are:

www.myspace.com A social networking site, especially good if you want to upload
pictures and music rather than text.
www.facebook.com The best-known social networking site, where you can post
information about yourself.
www.wordpress.com If you want a blog but you don’t want to run your own version of the
WordPress blogging software, this site will host a blog for you. Just
sign up for free on the web.
To sign up with the web hosting company featured in this book, please visit www.the-web-book.com/hosts.html
It costs you just the same, but brings me a small commission that funds the development of this book. Thanks!
10