In this chapter, you meet the first technologies you need to learn in order to write web pages: HTML and XHTML. In fact,... more

In this chapter, you meet the first technologies you need to learn in order to write web pages: HTML and XHTML. In fact, what you will really be learning is XHTML—although I will be explaining the differences between HTML and XHTML as we go along. (As I already mentioned, you can consider XHTML simply to be the latest version of HTML.)

The main goal of this chapter is to demonstrate how the primary role of XHTML is to describe the structure of your documents.

In this chapter, then, you:

• Learn the difference between tags, elements, and attributes

• See how a web page uses markup to describe how the page should be structured

• Meet the elements that allow you to mark up text such as headings and paragraphs

• Learn many other elements that can add additional presentation information and phrasing to your documents

• See how to add bulleted and numbered lists to documents

• Are introduced to some core concepts that distinguish different types of elements in XHTML

By the end of the chapter you will have a good idea of how to structure a page in XHTML and will have written your first web pages.

... less

What really distinguishes the Web from other mediums is the way in which web pages can contain links that take you directly... more

What really distinguishes the Web from other mediums is the way in which web pages can contain links that take you directly to other pages (and even specific parts of a given page). Known as hyperlinks, these links are often credited with being the secret behind the Web’s phenomenal success. Hyperlinks allow visitors to navigate between web sites by clicking on words, phrases, and images.

The average web site is a group of pages users navigate between using hypertext links. These pages often include links to other web sites as well as to other pages in the same site.

In this chapter, you learn how to create links between the different pages of your site and to specific points within pages of your sites, as well as how to link to other sites known as external sites).

In the same way that the markup you learned in Chapter 1 described the structure of the document, links describe which parts of the document can link to which parts of other documents—so they also form relationships between different documents.

When you learn about links, it is also important to learn some of the key concepts regarding structuring your site into folders known as directories, and how you can use relative URLs to link between pages within your site.

In this chapter, then, you will learn:

• How to structure the folders on your web site

• How to link between pages of your site

• How to link to specific parts of a page in your site

• How to link to other sites

Note

This chapter covers only linking to web pages; it does not cover the mechanisms for linking to and embedding other files, in particular the <link> element (which is covered in Chapter 7 on style sheets) or the <img> and <object> elements (which are covered in Chapter 3).

... less

In this chapter, you begin learning some aspects of web design that will really breathe life into your web pages. You start... more

In this chapter, you begin learning some aspects of web design that will really breathe life into your web pages. You start by learning how to add images into your documents using the <img> element. You will see the difference between some of the main formats used for images on the Web and learn how to prepare your images for use on the Web. You will also learn how to make an image a link, and even how to divide an image up into sections so that different parts of the image link to different pages—this is known as an image map.

Then you will go on to meet the <object> element that you can use to insert all manner of objects into pages, from MP3s and Flash movies to Active X controls and even images.

... less

Tables are commonly used to display all manner of data, such as timetables, financial reports, and sports results. So when... more

Tables are commonly used to display all manner of data, such as timetables, financial reports, and sports results. So when you want to display information in rows and columns, you need to use the markup that you will learn about in this chapter to create a table.

This chapter begins with a discussion of the basic elements that are used to create all tables. Then I introduce some of the more advanced features of tables such as captions, headings, and more complicated table layouts. You will also learn about some deprecated markup that was designed to control the appearance of tables. Even though it is preferable to use CSS to control the way a page looks, you will sometimes need to use the older markup so that viewers with older browsers can see your pages as you intend them to be. The chapter ends with a discussion of accessibility issues that relate to tables because they can have a serious effect, particularly for users with visual impairments.

... less

Almost every time you want to collect information from a visitor to your site you need to use a form. You have probably used... more

Almost every time you want to collect information from a visitor to your site you need to use a form. You have probably used several different kinds of forms on different web sites, from simple search boxes, which allow you to enter keywords in order to find what you are looking for, to complex forms that allow you to order groceries or book a holiday online.

Forms on the Web bear a strong resemblance to paper forms you have to fill out. On paper, there are areas to enter text, boxes to check (or tick), options to choose from, and so on. On the Web, you can create a form by combining what are known as form controls, such as text boxes (to enter text into), checkboxes (to place a tick in), select boxes and radio buttons (to choose from different options), and so on. In this chapter you learn how each of these different types of controls can be combined into a form.

In this chapter, then, you learn:

• How to create a form using the <form> element

• The different types of form control you can use to make a form—such as text input boxes, radio buttons, select boxes, and submit buttons

• What happens to the data a user enters

• How to make your forms accessible

• How to structure the content of your forms

By the end of the chapter you will be able to create all kinds of forms to collect information from visitors to your site.

Note

What you do with the data that you collect depends upon the server your web site is hosted on. XHTML is used only to present the form to the user; it does not allow you to say what happens with that data once it has been collected. To get a better idea of what happens to the data once it has been collected from a form, you will need to look at a book on a server-side language (such as ASP.net, PHP, or JSP). See the book list at Wrox.com for books on at least some of these topics.

... less

Frames divide a browser window into several separate pieces or panes, each pane containing a separate XHTML page. One of... more

Frames divide a browser window into several separate pieces or panes, each pane containing a separate XHTML page. One of the key advantages that frames offer is that you can then load and reload single panes without having to reload the entire contents of the browser window. A collection of frames in the browser window is known as a frameset.

The window is divided into frames much as tables are organized: into rows and columns (although they are usually relatively basic in structure). The simplest of framesets might just divide the screen into two rows, whereas a complex frameset could use several rows and columns.

In this chapter you learn the following:

• How to create a frameset document with multiple frames

• How to create inline frames (or iframes), which are single windows that sit within another page

• How to deal with users whose browsers cannot use frames

Tip

I should warn you early on that there are actually very few cases in which I would consider using frames, although this is a matter of preference and I explain my reasons why in the second section of this chapter—after a simple example that helps you understand what frames really are.

... less

Having learned how to structure the content of your documents using XHTML’s wide variety of elements and attributes, you’re... more

Having learned how to structure the content of your documents using XHTML’s wide variety of elements and attributes, you’re now going to start making your pages look a lot more exciting.

You’re going to learn how to use cascading style sheets (or CSS for short) to take control of the style of your pages, including the colors and size of fonts, the width and colors of lines, and the amount of white space between items on the page. The cascading style sheets specification works by allowing you to specify rules that say how the content of elements within your document should appear. In fact, you can set different rules to control the appearance of every element in your page so that your pages start to look a lot more interesting.

As I have already mentioned, earlier versions of HTML used elements and attributes in the markup of the web page (just like the ones you have met already in the book) to control how a document should appear. However, the W3C (an organization that oversees the development of web technologies) decided quite a while back that the HTML and XHTML languages should no longer contain instructions that indicated how the document appears—rather that CSS should be used to control the appearance of web pages.

The W3C has actually released two versions of CSS. The properties and features you learn in this chapter are taken from CSS1 and CSS2 (as you probably guessed, CSS2 expanded upon CSS1). The W3C is also working on another update, which will be called CSS3; it’s going to be a while before the work on CSS3 is completed; however I will make brief mention of it in a few places where you can see browsers that have already started to implement it. You will also see mention where more recent browsers still fail to support properties. One helpful thing about CSS is that users should still be able to read the document even if the CSS properties are not implemented by the browser—it just won't look quite as you intended.

In this chapter you learn the following:

• What makes up a CSS rule

• How to place CSS rules within your document, and how to link to an external CSS document

• How properties and values control presentation of different elements within your document

• How to control the presentation of text using CSS

• How CSS is based on a box model, and how you set different properties for these boxes (such as width and styles of borders)

By the end of the chapter you should be confidently writing CSS style sheets, and should have learned many of the properties you can use to affect the presentation of any document using the style sheet.

In Chapter 8, you learn more advanced properties from CSS1 and CSS2, as well as how CSS can be used to position the content of elements within a page.

Note

Since the introduction of the Web, those building pages have desired the same control over their pages that print designers have over a printed page. There are, however, some inherent differences in the Internet as a medium when compared with print media. For example, a printed page in a book is always the same size in every copy of the book; viewers do not need to own a font in order to view the page as they generally do on the Web or have the option of printing the page themselves. These are issues that you learn more about in Chapters 9 and 10 when you look at page layout and design issues.

... less

In this chapter, you learn more about working with CSS. You will start by working through many of the remaining properties... more

In this chapter, you learn more about working with CSS. You will start by working through many of the remaining properties from the CSS specifications that allow you to control presentation of links, backgrounds, list styles, table styles, and outlines around boxes (the last of which are different from borders). You then learn about the :before and :after pseudo-classes that allow you to add content that was not in the source document that you are styling before or after a specified element. Finally, you will see how CSS can be used to position boxes on the page—and therefore how they can be used to create layouts instead of using tables.

By the end of the chapter, you will know more about how to use CSS to control the following:

• Presentation of links

• Backgrounds of document

• Styles of bullet points and numbered lists

• Appearance of tables

• Outlines around boxes

• Boxes that can gain focus or are active

• Addition of content to the XHTML document before or after an element

• The three positioning schemes that allow you to determine where on a page a box will appear—something that prepares you to use CSS to create layouts

Note

Some of the features you learn about in this chapter are not yet widely supported in browsers. They are, however, worth learning about so that you are aware of the direction in which CSS is going.

... less

This chapter is the first of two chapters about design issues. It addresses designing and constructing... more

This chapter is the first of two chapters about design issues. It addresses designing and constructing layouts for web pages. Although there is no rule book that says how you should design your page, there are some important factors that you should consider regarding the appearance of a page, and it is these issues you’ll learn about in this chapter.

No one can tell you how to make an attractive page—that is a matter of taste. What you will see in this chapter is a discussion about the aims of the site, the size of your page, what should appear on the page, and where each item should go on that page. You also need to know how to make these designs work in code. This chapter is broadly grouped into four sections to reflect these topics:

• Understanding the aims of the site correctly

• Looking at a page as a whole and addressing the question of how big you should make the page

• Knowing the elements that make up each page such as logos, headings, links, and possibly ads

• Positioning the various elements within the page

Once you have looked at the overall layout of the page in this chapter, see Chapter 10 for some more specific issues of design within the page, such as design of menus, forms, links, and text.

... less

This chapter looks at design issues that affect specific parts of pages—text, menus, tables, and forms. Each is addressed... more

This chapter looks at design issues that affect specific parts of pages—text, menus, tables, and forms. Each is addressed in its own section, and each section contains helpful tips that will make your pages not only look more attractive, but also easy to use for more users.

First, you look at text and how to align it, space it out, and control the width of columns. You will then look at choosing fonts and font sizes, and you’ll also learn how background images can affect readability of text.

Next, you look at navigation. This topic covers three areas: menus, links, and search features. Almost every site has a menu that helps the user navigate between sections of the site. If your menu is not clear, people will not be able to explore your site, and they won’t look at as much of it. So you need to be aware of some key points in designing menus so that they’re easy for the user to understand and use. Most sites also feature links in other parts of the page than just the menu, and you need to make it clear to users what the links are on your site so that they know where they can click. You can use techniques such as color, underlining, and change of cursor icon to indicate to the user where links are. Finally, a search option can help users find what they want on a site rather than having to navigate, or a search option can help if they’ve tried navigating but can't find what they came for.

We’ll look quickly at how adding shading to tables can help a user follow the data more easily. Then, we’ll look at creating usable forms. Forms are the most common way to gather information from a user. Most people, however, don’t like filling out forms, so a well-designed form significantly increases your chances that users will fill them out and—just as importantly—that they fill out the right information.

While this chapter can't teach you how to be a great web page designer—that requires creativity, a good eye, and flair—it will teach you how to achieve some of the effects that contribute to good design and introduce you to some guidelines you can use when approaching a design that will help you improve both the look and usability of your site.

Note

You will see throughout this chapter mentions of programs called screen readers. Screen readers are programs that read a page to a user. While screen readers are commonly used by those with visual impairments, they are likely to become more popular in other web-based scenarios, such as for those who want to access information while they are driving or doing something else that prevents them from actually reading a screen.

... less

In the previous chapters, you learned about a markup language (XHTML) and a style sheet language (CSS). While you can think... more

In the previous chapters, you learned about a markup language (XHTML) and a style sheet language (CSS). While you can think of learning these languages as "starting to program," most seasoned programmers would make a distinction between marking up documents and proper “programming” where calculations are performed on data and decisions are made programmatically based upon some input the program receives. In this chapter, you really are going to start learning to program; you learn the basics of a programming language called JavaScript. JavaScript is a lightweight programming language, often referred to as a scripting language, but in working with it, you can learn many of the basic concepts of programming.

It’s not possible to teach you everything there is to learn about JavaScript in one or two chapters, but what you will learn in this chapter and the next should be enough to help you understand the thousands of free scripts that are available on the Web and allow you to incorporate them into your web pages. You should even be able to customize these scripts and write some of your own based upon what you will learn in this and the following chapter. In addition, it will give you an idea of what programming is really about.

So this chapter is going to cover the basics of JavaScript; then in Chapter 12 you are going to see lots of examples that should both act as a library of helpful scripts that you can use in your own pages and also clarify how the basic concepts you learned in this chapter work in practice.

As you will see, JavaScript gives web developers a programming language for use in web pages and allows them to perform tasks such as the following:

• Read elements from documents and write new elements and text into documents

• Manipulate or move text

• Create pop-up windows

• Perform mathematical calculations on data

• React to events, such as a user’s rolling over an image or clicking a button

• Retrieve the current date and time from a user's computer or the last time a document was modified

• Determine the user’s screen size, browser version, or screen resolution

• Perform actions based upon conditions such as alerting users if they enter the wrong information into a form or if they press a certain button

JavaScript was first introduced into the browser in Netscape 2.0, although it was known as LiveScript at the time. The idea behind it was to add interactive features to documents on the Web, which up to that point had been static. Back then you could only enter a URL or click a link and read the page and view the images. JavaScript allowed web-page authors to access and manipulate features and content of the document and the browsers used to view them.

Tip

You should note that JavaScript is not the same as Java, which is a bigger programming language (although there are some similarities).

You might need to read through this chapter more than once to get a good grasp of what you can do with JavaScript; then once you have seen the examples in the next chapter you should have a better idea of its power. There is a lot to learn, but these two chapters should get you well on your way.

... less

You learned the key concepts behind the JavaScript language in Chapter 11; in this chapter, you see how these concepts come... more

You learned the key concepts behind the JavaScript language in Chapter 11; in this chapter, you see how these concepts come together in working scripts. By examining many examples, you learn different ways in which JavaScript can interact with your web pages. You also learn some new coding practices for writing your own JavaScripts, and some very helpful shortcuts to creating interactive pages.

The chapter covers the following major topics, each relating to different JavaScript techniques or parts of documents:

• Validation of forms: Checking that a user has filled in the appropriate form elements and has put a value that matches what you expect

• Other forms techniques: Giving focus to elements when the page loads, auto tabbing between fields, disabling controls, and converting text case

• Navigation: Image rollovers and highlighting navigation items

• Windows: Creating pop-ups

• Using existing libraries: Taking a look at a couple of existing JavaScript libraries that can give you complex functionality with just a few lines of code

By the end of the chapter, not only will you have learned a lot about using JavaScript in your pages, but you will also have a library of helpful functions you can use in your own pages.

... less

Once you’ve created your web site, you’ll want to make it available for everyone to see. In this final chapter, you are going... more

Once you’ve created your web site, you’ll want to make it available for everyone to see. In this final chapter, you are going to look at how you prepare your site for, and move it onto, the Web. You will also look at how you can help encourage visitors to come to your site.

Web sites live on special computers called web servers that are constantly connected to the Internet. Rather than buying and running your own web server, it’s generally far more economical to rent space on a web server owned by a hosting company. And in order to help you choose the right hosting company and, indeed, the right package from a hosting company, you need to learn the key terminology used by these companies. In this chapter, you will find out what things like shared and dedicated hosting are, how to decide how much space or bandwidth you need, and so on.

But before you put your site on a web server, you should perform some checks and tests, from validating your documents and checking links to making sure the site works in different screen resolutions, and that the text is readable. Putting a site on the Web only to have customers tell you that the link to the products page does not work or that they cannot see the site on their computer will not enhance your reputation. So you must learn how to test your site before it goes live. And then once you have put your site on a web server, you can perform other kinds of checks and tests—after all, while a site can seem to work fine on your computer, there may be issues with the way it is set up on your new server when you move it there.

Once your site is ready for the public to see, you will then want to ensure they know about it! You will want to make sure it gets indexed by the major search engines, such as Google and Yahoo; this can be quite a complex process with lots of trial and error to get your site as near to the top of the rankings as possible. You might also consider a number of other strategies to let people know you are out there, such as Pay Per Click advertising (from the likes of Google’s AdWords or Yahoo’s Overture). After putting all the hard work into creating a site, you want it to be a success.

You'll also take a quick look at some other technologies that you might like to start examining once you are comfortable with what you have learned in this book.

But before you look at all of this, let's take a look at one final element you have not yet seen in this book, and which provides information about documents and their content—the <meta> element.

In this chapter you learn how to do the following:

• Use the <meta> element

• Perform tests to ensure your site will work as you intended

• Check that your site is accessible

• Find a host to make your site available to everyone on the Web

• Move your site from your computer to your host’s web server using FTP

• Submit your site to search engines

• Increase visitor numbers

• Use Pay Per Click advertising

• Discover other technologies you might like to look at next

• Control different versions of your site so that you can make changes without making mistakes

... less

This appendix contains the answers to the exercises found in each chapter.... more

This appendix contains the answers to the exercises found in each chapter.

... less

This appendix is a quick reference to the elements that are in the HTML and XHTML recommendations. They are listed with the... more

This appendix is a quick reference to the elements that are in the HTML and XHTML recommendations. They are listed with the attributes each element can carry and a brief description of their purpose.

Deprecated elements are marked with the word “deprecated” next to them. You should avoid using these elements where possible. I also recommend that stylistic markup and elements be replaced with CSS rules.

The first version of Internet Explorer (IE), Netscape (N), and Firefox (FF) that supported the element are given next to the element’s name, starting with IE3, N3, and FF1. Elements that were supported in Netscape will also be supported in Firefox. The notation “all,” identifies elements that are supported in all browsers from IE3, N3, FF1, and later. Note, however, that not all the attributes will work with the same versions of the browsers—some attributes were introduced in later versions.

Consider the following notes on syntax:

• All element names should be given in lowercase.

• Any attribute listed without a value should have the name of the attribute repeated as its value in order to be XHTML-compliant; for example: disabled = "disabled".

• All attribute values should also be given inside double quotation marks.

... less

This appendix is a reference to the main CSS properties that you will be using to control the appearance of your documents... more

This appendix is a reference to the main CSS properties that you will be using to control the appearance of your documents.

For each property covered, you will first see a very brief description of the property and then an example of its usage. Then the tables on the left show the possible values the property can take, along with the first versions of IE, Netscape, and Firefox to support these properties.

The table on the right indicates whether the property can be inherited, what the default value for the property is, and which elements it applies to.

At the end of the appendix are units of measurement.

While Netscape and Firefox support the inherit value of many properties, if it is unable to set the property to some other value in the first place, then this value is of little use.

Note

The tables indicating which browser version supported a value are based on browsers on the Windows platform. Internet Explorer 5 on a Mac has notably better support for many of the properties than its Windows counterparts.

... less

The first thing you need to learn about color is how to specify exactly the color you want; after all, there are a lot of... more

The first thing you need to learn about color is how to specify exactly the color you want; after all, there are a lot of different reds, greens, and blues, and it is important you choose the right ones.

In XHTML there are two key ways of specifying a color:

• Hex codes: A six-digit code representing the amount of red, green, and blue that make up the color, preceded by a pound or hash sign # (for example, #333333).

• Color names: A set of names that represent over 200 colors, such as red, lightslategray, and fuchsia.

In CSS you can also use values to represent the red, green, and blue values that make up each color.

... less

In Appendix D, I discussed how computers store information, how a character-encoding scheme is a table that translates between... more

In Appendix D, I discussed how computers store information, how a character-encoding scheme is a table that translates between characters, and how they are stored in the computer.

The most common character set (or character encoding) in use on computers is ASCII (The American Standard Code for Information Interchange), and it is probably the most widely used character set for encoding text electronically. You can expect all computers browsing the Web to understand ASCII.

The problem with ASCII is that it supports only the upper- and lowercase Latin alphabet, the numbers 0–9, and some extra characters: a total of 128 characters in all. Here are the printable characters of ASCII (the other characters are things such as line feeds and carriage-return characters).

... less

Some characters are reserved in XHTML; for example, you cannot use the greater-than and less-than signs or angle brackets... more

Some characters are reserved in XHTML; for example, you cannot use the greater-than and less-than signs or angle brackets within your text because the browser could mistake them for markup. XHTML processors must support the five special characters listed in the table that follows.

There is also a long list of special characters that HTML 4.0–aware processors should support. In order for these to appear in your document, you can use either the numerical code or the entity name.

The special characters have been split into the following sections:

• Character Entity References for ISO 8859-1 Characters

• Character Entity References for Symbols, Mathematical Symbols, and Greek Letters

• Character Entity References for Markup-Significant and Internationalization Characters

They are taken from the W3C Web site at www.w3.org/TR/REC-html40/sgml/entities.html.

... less

The following table shows the two-letter ISO 639 language codes that are used to declare the language of a document in the... more

The following table shows the two-letter ISO 639 language codes that are used to declare the language of a document in the lang and xml:lang attributes. It covers many of the world’s major languages.

... less

You have seen the... more

You have seen the type attribute used throughout this book on a number of elements, the value of which is a MIME media type.

MIME (Multipurpose Internet Mail Extension) media types were originally devised so that e-mails could include information other than plain text. MIME media types indicate the following things:

• How the parts of a message, such as text and attachments, are combined into the message

• The way in which each part of the message is specified

• The way the items are encoded for transmission so that even software that was designed to work only with ASCII text can process the message

As you have seen, however, MIME types are not just for use with e-mail; they were adopted by web servers as a way to tell web browsers what type of material was being sent to them so that they could cope with that kind of file correctly.

MIME content types consist of two parts:

• A main type

• A sub-type

The main type is separated from the sub-type by a forward slash character—for example, text/html for HTML.

This appendix is organized by the main types:

• text

• image

• multipart

• audio

• video

• message

• model

• application

For example, the text main type contains types of plain-text files, such as:

• text/plain for plain text files

• text/html for HTML files

• text/rtf for text files using rich text formatting

MIME types are officially supposed to be assigned and listed by the Internet Assigned Numbers Authority (IANA).

Many of the popular MIME types in this list (all those that begin with “x-”) are not assigned by the IANA and do not have official status. (Having said that, I should mention that some of these are very popular and browsers support them, such as audio/x-mp3. You can see the list of official MIME types at www.iana.org/assignments/media-types/.)

Those preceded with .vnd are vendor-specific.

The most popular MIME types are listed in this appendix in a bold typeface to help you find them.

... less

As the versions of HTML and XHTML have developed, quite a lot of markup has been deprecated, which means it has either already... more

As the versions of HTML and XHTML have developed, quite a lot of markup has been deprecated, which means it has either already been removed from XHTML specifications or that it will be removed in coming versions. While you will still be able to use much of this markup with Transitional XHTML, Strict XHTML 1.0 has already removed most of the elements, attributes, and styles that you can read about in this appendix.

I have included it in this book, despite the fact that the markup is deprecated or out-of-date, because you are likely to come across it in other people’s code, and on very rare occasions you might need to resort to some of it in order to get a specific job done (for example, if it has to work in very old browsers such as IE 3 and Netscape 3), and some of these browsers will not support what you want to do with CSS.

In addition to deprecated markup, you will also see some of the browser-specific markup that you may well come across. This is markup that Microsoft or Netscape (and in some cases both companies) added to its browsers to allow users to do more things than its competitors—but these elements and attributes never made it into the HTML recommendations, and are therefore referred to as browser-specific markup.

So not only does this appendix help you deal with markup you come across that has been deprecated, but you might also use some techniques to get the result you want. This appendix covers the following:

• Elements and attributes that have been deprecated in recent versions of HTML and XHTML

• Specifying font appearances without using CSS

• Controlling backgrounds without using CSS

• Controlling presentations of links, lists, and tables without using CSS

• Elements and attributes that control the formatting of a document

• Elements, attributes, and styles that Microsoft added to IE (but that are not supported by other browser manufacturers)

• Elements, attributes, and styles that Netscape added to Navigator (but that are not supported by other browser manufacturers)

Before you look at any of this markup, however, a quick word on why a good part of a chapter is deprecated markup.

... less