There are a lot of books about designing and building web pages, so thank you for picking up this one. During the relatively short life of the Web, many technologies have been introduced to help you create web pages, some of which have lasted, others of which have disappeared. Now the dust is beginning to settle, and commonly accepted best practices are emerging; so the aim of this book is to teach you how to create pages for the Web as it is today and will be for the next few years.
This book is different from many books because it teaches you more than just the code you need to learn to write web pages; I wanted to share some of the practical experience I have gained designing and building web sites over the past 12 years. Therefore, alongside the usual technical information, you will see advice on topics that range from how to approach the task of creating a new site to chapters that let you in on the techniques used by designers to make their pages more attractive. You will also find information about important topics such as accessibility and usability that any professional web programmer needs to understand. And, once you have worked through this book, it should continue to serve as a helpful reference text you can keep nearby and dip into as you need to.
As the title of this book suggests, you will be learning a few different languages in order to create effective and attractive web pages:
HTML and XHTML are needed to explain the structure of any web pages. If you look at this page it is made up of a lot of words. On web pages it is the job of HTML and XHTML to explain the structure of the words — which words form a heading, where paragraphs start and end, and which text should have bullet points. These languages also specify links between different web pages and where images should appear.
This book focuses mainly on teaching you XHTML, but you will be glad to know that by learning XHTML you will automatically be able to write HTML (because you can consider XHTML to be exactly the same as HTML, but with a few extra rules added — making it a little more strict). At the end of the book is a preview of HTML 5, the next version of HTML.
CSS is used to control how your pages look. For example, you can use CSS to specify that a typeface should be a large, bold Arial typeface or that the background of a page should be a light green. You can also use CSS to control where different items appear on a page, such as placing three columns of text next to each other.
JavaScript can add interactivity to your web pages. JavaScript is a huge topic in itself, so it is not covered in the same depth as XHTML and CSS, but I will teach you just enough JavaScript to write your own basic scripts and to enable you to incorporate many of the thousands of JavaScripts that are available for free on the Web.
As you have already seen, you'll be learning how to control the structure of a web page using XHTML, how to style it using CSS, and how to add interactivity using JavaScript. Learning how this code works will give you a solid foundation for building web sites, and alongside this you will see plenty of practical advice that helps you learn about issues you are likely to meet when you start building sites.
While learning how to code, you will see lots of advice on usability — how to build web sites that are easy to use and enable visitors to achieve what they came for. In several parts of the book I also discuss issues regarding accessibility — making a site available to as many users as possible (in particular, people with disabilities, who may have impaired vision or difficulty using a mouse). In the same way that many countries have laws requiring architects to design buildings that are accessible, there are strict accessibility guidelines for building web sites to ensure they do not exclude visitors. A little careful thought before you build your web site means that people with vision impairments can either view your site with larger text or have it read to them by a piece of software called a screen reader. Whole books are dedicated to the topics of usability and accessibility and are aimed at web developers who need to learn how to make their code more accessible and usable. My aim is to teach you to code with these principles in mind from the start.
In addition to learning how to code usable and accessible web sites, I will also be sharing lots of tips and techniques that professional web designers use when creating new sites. These techniques make it easier for anyone to lay out pages in a more attractive way.
You will even learn about creating sites that work on devices such as mobile phones and game consoles, which are increasingly being used to access the Web. You will probably be relieved to know that many of the browsers on such devices employ the same languages that you will be learning in this book — and that by learning to use XHTML with CSS you will be able to create web sites that work on a variety of platforms, and will therefore last much longer than those written in older versions of HTML.
While it is important to learn the latest practices for creating web pages using these languages, if you intend to create web sites that anyone can access, you will also have to learn some older aspects of the languages you meet. This is important because not everyone has the latest web browser installed on his or her computer; as a result, the latest features may not work for everyone, and in such cases you need to learn techniques that will work in some older browsers that are still popular today. In order to make sure pages work in older browsers, you will see several occasions throughout the book where certain features of a language are marked as deprecated; this means that while this feature should still workin modern browsers, you are being warned that software might not support itmuch longer.
By the end of this book, you will be writing web pages that not only use the latest technologies, but also are still viewable by older browsers — pages that look great, and can also be accessed by those with visual and physical impairments. These are pages that not only address the needsof today's audiences but can also work on emerging technologies — and therefore the skills you will learn should be relevant longer.
This book is written for anyone who wants to learn how to create web pages, and for people who may have dabbled in writing web pages (perhaps using some kind of web-page authoring tool), but who want to really understand the languages of the Web, to give them more control over the pages they create.
More experienced web developers can also benefit from this book because it teaches some of the latest technologies and encourages you to embrace web standards that not only meet the needs of the new devices that access the Web, but also help make your sites available to more visitors.
You don't need any previous programming experience to work with this book. This is one of the first steps on the programming ladder. Whether you are just a hobbyist or want to make a career of web programming, this book will teach you the basics of programming for the Web. Sure, the term "programmer" might be associated with geeks, but as you will see by the end of the book, even if you would prefer to be known as a web designer, you need to know how to code in order to create great web sites.
By the end of this book, you will be able to create professional-looking and well-coded web pages.
Not only will you learn the code that makes up markup languages such as HTML and XHTML, but you will also see how to apply this code so you can create sophisticated layouts for your pages, positioning text and images where you would like them to appear and getting the colors and fonts you want. Along the way, you will see how to make your pages easy to use and available to the biggest audience possible. You will also learn practical techniques such as how to make your web site available on the Internet and how to get search engines to recognize your site.
The main technologies covered in this book are HTML, XHTML, and CSS. You will also learn the basics of JavaScript — enough to work on some examples that add interactivity to your pages and allow you to work with basic scripts. Along the way I introduce and point you to other technologies you might want to learn in the future.
The code I will encourage you to write is based on what are known as web standards; HTML, XHTML, and CSS are all created and maintained by the World Wide Web Consortium, or W3C (http://www.w3.org/), an organization dedicated to the development of the Web. You will also learn about some features that are not in these standards; it is helpful to know about some of these in case you come across such markup and need to know what it does. Where these are introduced, I make it clear they are not part of the standard.
All you need to work through this book is a computer with a web browser (preferably Firefox 2 or higher, Safari 2 or higher, or Internet Explorer 6 or higher), and a simple text editor such as Notepad on Windows or TextEdit on Mac.
If you have a web-page editor program, such as Macromedia Dreamweaveror Microsoft FrontPage, you are welcome to use it. I will not be teaching you how to use these programs; rather, I will be teaching you how to write by hand the code that these programs produce. Even if you use one of these tools, when you understand the code it generates you can then go in and editit, which means you have much greater control over how your sites look and the ability to make them more attractive.
The first chapter of this book will show you that the main task in creating a web site is marking up the text you want to appear on your site, using elements and attributes. As you will see, these elements and attributes describe the structure of a document (what is a heading, what is a paragraph of text, what is a link, and so on).
The first six chapters of the book describe the different elements and attributes that make up HTML and XHTML and how you can use them to write web pages. These chapters are organized into task-related areas, such as structuring a document into headings and paragraphs; creating links between pages; adding images, audio and video; and displaying tables. With each task or topic that is introduced, you will see an example first to give you an idea of what is possible; then you can look at the elements and attributes used in detail.
When you first read this book, you do not need to closely read the detailed explanations of every single element. As long as you understand the gist of the markup, feel free to move on, and then come back and look at the finer detail when you need it.
Each chapter ends with exercises designed to get you working with the concepts you've just learned. Don't worry if you have to go back and review the content of the chapter in order to complete the exercises: this book has been created with the intention that it should be a helpful reference for years to come, so don't feel that you need to learn everything by heart. Along the way, you'll see which browsers support each element and you'll learn plenty of handy tips, tricks, and techniques for creating professional web pages.
Once you have seen how to create and structure a document using HTML and XHTML, you will then learn how to make your pages look more attractive using CSS. For example, you'll learn how to change the typefaces and size of fonts, color of text backgrounds, and borders that go around items. In addition, you'll learn how to control where items appear on the page, which will allow you to create attractive layouts.
Having worked through the two chapters on CSS, and using the examples in the book, you should be able to write quite complex web pages. The chapters up to that point can then act as a helpful reference you can keep coming back to, and the examples will act as a toolkit for building your own sites.
Chapters 9 and 10 start to build on the theory you learned in the first half of the book, with practical advice on how to approach the creation of a new web site, determine who it is aimed at, and ensure that it meets the needs of its target audience.
These chapters also introduce many key issues regarding the design of web pages and how to make them more attractive. The design sections cover both the bigger picture — how to lay out your page — and also more detailed aspects, such as how to create effective navigation that allows users to find the pages they want on your site, and how to create effective forms to gather information from visitors.
Chapters 11 and 12 introduce you to JavaScript, a programming language that enables you to add interactivity to your pages. While the entire JavaScript language is too large to teach you in two chapters, you will learn how to create your own basic scripts and also how to integrate scripts other people have written into your pages. Thousands of free JavaScripts are already available on the Web, and having learned the basics of JavaScript, you'll see how easy it can be to add some very complex functionality to your site with just a few lines of code.
Chapter 13 prepares you to put your site on the Internet and covers web hosting, FTP, and validating your code. Finally, I will give you some ideas about where you can go next once you've worked through this book; there are lots of other things that you might want to add to your site or learn in order to advance your web skills, and this chapter gives you an idea of what else is possible.
The final chapter, Chapter 14, includes some checklists. These bring together some topics that are dotted throughout the book, such as accessibility and the differences between HTML and XHTML.
I have also included several helpful appendices, including a reference to XHTML elements and CSS properties. There is an appendix that explains how XHTML and CSS specify colors. Other appendices show you available character encodings, language codes, and escape characters that can be used with HTML, XHTML, CSS, and JavaScript. Finally, there is an appendix on old markup that should not really be used any longer — but that you might still come across when working on a site.
To help you get the most from the text and keep track of what's happening, I've used a number of conventions throughout the book.
Note
Boxes like this one hold important, not-to-be forgotten information that is -directly relevant to the surrounding text.
Notes, tips, hints, tricks, and asides to the current discussion are offset and placed in italics like this.
As for styles in the text:
I highlight new terms and important words when we introduce them.
I show keyboard strokes like this: Ctrl+A.
I show file names, URLs, and code within the text like so:
persistence.properties.Code appears like this:
In a monospaced font.
As you work through the examples in this book, you may choose either to type in all the code manually or to use the source code files that accompany the book. All of the source code used in this book is available for download at http://www.wrox.com. Once at the site, simply locate the book's title (either by using the Search box or by using one of the title lists) and click the Download Code link on the book's detail page to obtain all the source code for the book.
Because many books have similar titles, you may find it easiest to search by ISBN; this book's ISBN is 978-0-470-54070-1.
Once you download the code, just decompress it with your favorite compression tool. Alternately, you can go to the main Wrox code download page at http://www.wrox.com/dynamic/books/download.aspx to see the code available for this book and all other Wrox books.
I've made every effort to ensure that there are no errors in the text or in the code. However, no one is perfect, and mistakes do occur. If you find an error in this book, such as a spelling mistake or faulty piece of code, I would be very grateful for your feedback. By sending in errata you may save another reader hours of frustration, and at the same time you will be helping to provide even higher quality information.
To find the errata page for this book, go to www.wrox.com and locate the title using the Search box or one of the title lists. Then, on the book details page, click the Book Errata link. On this page you can view all errata that has been submitted for this book and posted by Wrox editors.
A complete book list including links to errata is also available at
www.wrox.com/misc-pages/booklist.shtml.
If you don't spot "your" error on the Errata page, click the Errata Form link and complete the form to send us the error you have found. We'll check the information and, if appropriate, post a message to the book's errata page and fix the problem in subsequent editions of the book.
For author and peer discussion, join the P2P forums at p2p.wrox.com. The forums are a Web-based system for you to post messages relating to Wrox books and related technologies and interact with other readers and technology users. The forums offer a subscription feature to e-mail you topics of interest of your choosing when new posts are made to the forums. Wrox authors, editors, other industry experts, and your fellow readers are present on these forums.
At http://p2p.wrox.com you will find a number of different forums that will help you not only as you read this book, but also as you develop your own applications. To join the forums, just follow these steps:
Go to
p2p.wrox.comand click the Register link.Read the terms of use and click Agree.
Complete the required information to join as well as any optional information you wish to provide and click Submit.
You will receive an e-mail with information describing how to verify your account and complete the joining process.
You can read messages in the forums without joining P2P but in order to post your own messages, you must join.
Once you join, you can post new messages and respond to messages other users post. You can read messages at any time on the Web. If you would like to have new messages from a particular forum e-mailed to you, click the Subscribe to this Forum icon by the forum name in the forum listing.
For more information about how to use the Wrox P2P, be sure to read the P2P FAQs for answers to questions about how the forum software works as well as many common questions specific to P2P and Wrox books. To read the FAQs, click the FAQ link on any P2P page.