Introduction

There are a lot of books about building web pages, so thank you for picking up this one. I’ve spent the last 13 years building websites, so hopefully I’ve picked up a thing or two that I can share with you to make your purchase worthwhile.

If you’re just starting out with building web pages, you’ve picked a great time to get started. The way web pages are built is changing right now in a big way. While the same basic technologies we’ve used for the last 15–20 years are still in place, there are new versions available that have people like me very excited for the future of the web.

This book presents a practical introduction to the process of making websites using a blend of the latest and greatest techniques, as well as a healthy understanding of some older technologies that have been around for a while. The techniques described in this book are informed by having solved real-world problems; so, although it has an eye toward the future it’s grounded in the act of making websites today.

You will learn a few different languages to create effective and attractive web pages:

• HTML is needed to explain the structure of a web page. This page is made up of a lot of words. On web pages, it is the job of HTML to explain the structure of the words—which words form a heading, where paragraphs start and end, and which text should have bullet points. This language also specifies things such as the links between different web pages, where images should appear, where videos should appear, and forms for entering text.
• 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 HTML and CSS, but I teach you just enough JavaScript to write your own basic scripts and to be able to effectively use jQuery, the most popular JavaScript library in the world.

About the Book

As you have already seen, you’ll learn how to control the structure of a web page using HTML, how to style it using CSS, and how to add interactivity using JavaScript and jQuery. Learning how this code works will give you a solid foundation for building websites, 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 websites 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 websites to ensure they do not exclude visitors. A little careful thought before you build your website 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.

Although it is important to learn the latest practices for creating web pages using these languages, if you intend to create websites 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.

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 needs of today’s audiences but can also work on emerging technologies—and therefore the skills you will learn should be relevant longer.

Who This Book Is For

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 them to embrace web standards that not only meet the needs of the new devices that access the web but also help make their 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.

What This Book Covers

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 HTML, 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.

The main technologies covered in this book are HTML and CSS. You will also learn the basics of JavaScript—enough to work on some examples that add interactivity to your pages and enable you to work with jQuery.

The code I encourage you to write is based on what are known as web standards; HTML and CSS are all created and maintained by the World Wide Web Consortium, or W3C (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.

What You Need to Use This Book

All you need to work through this book is a computer with a web browser (preferably the latest version of Firefox, Chrome, or Internet Explorer 9 or higher), and a simple text editor such as Notepad or Sublime Text on Windows or TextEdit or Sublime Text on Mac.

How This Book Is Organized

The first chapter of this book will show you that the main task in creating a website 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 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, Chapters 7, 8, and 9 will show you 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 enable you to create attractive layouts.

Having worked through the three 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.

Chapter 10 introduces 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 one chapter, you will learn how to create your own basic scripts and also how to integrate scripts other people have written into your pages.

Chapters 11 and 12 introduce you to jQuery, a library that helps you code JavaScript more easily. jQuery is by far the most popular library for working with JavaScript. It’s easy to use and fun, and it lies at the center of a vast ecosystem of scripts that you can use to enhance your own site.

The final chapter, Chapter 13, includes some checklists. These bring together some topics that are dotted throughout the book.

I have also included several helpful appendices, including a reference to HTML elements and CSS properties. There is an appendix that explains how HTML 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 that outlines the major differences between the last two major versions of HTML.

Conventions

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.

As for styles in the text:

• I italicize new terms and important words when I introduce them.
• I show keyboard strokes like this: Ctrl+A.
• I show filenames, URLs, and code within the text like so: persistence.properties.
• Code appears like this:

  We use a monofont type with no highlighting for most code examples.

  We use bolding to emphasize code that’s particularly important in the present context.

Source Code

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 www.wrox.com. Specifically for this book, the code download is on the Download Code tab at www.wrox.com/remtitle.cgi?isbn=9781118340189. You can also search for the book at www.wrox.com by ISBN (the ISBN for this book is to find the code.

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 www.wrox.com/dynamic/books/download.aspx to see the code available for this book and all other Wrox books.

Errata

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 have been submitted for this book and posted by Wrox editors.

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.

p2p.wrox.com

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:

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.