Latest news

Press release

USDA and Social Security Administration Collaborate to Improve Nutrition Security through SNAP

The U.S. Department of Agriculture Food and Nutrition Service (FNS) and the Social Security Administration (SSA) today announced a strengthened partnership...

Press release

Social Security Administration Launches Redesigned Website at SSA.gov

Starting today, visitors to SSA.gov will experience a fresh homepage and a new design to help them find what they need more easily.

Every website is a collection of web pages, so it should come as no surprise that your journey to build a complete site starts here, with the writing of a single web page.

Technically, a web page is a special type of document written in a computer language called HTML (that’s short for HyperText Markup Language). Web pages are written for web browsers—programs like Internet Explorer, Google Chrome, and Safari. These browsers have a simple but crucially important job: they read the HTML in a web page document and display the perfectly formatted result for you to read.

This chapter will introduce you to HTML. You’ll see how a basic web page works and learn how to create one of your own. For now, you’ll be working with web pages you store on your computer, visible only to you. Later on, in Chapter 9, you’ll learn to put web pages online so anyone with a web connection can see them.

HTML: The Language of the Web

HTML is the single most important standard in web design—and the only one that’s absolutely required if you plan to create a web page. Every web page is written in HTML. It doesn’t matter whether your page contains a series of blog entries, a dozen pictures of your pet lemur, or a heavily formatted screenplay—odds are that, if you’re looking at it in a browser, it’s an HTML page.

HTML plays a key role in web pages: It tells browsers how to display the contents of a page, using special instructions called tags that tell a browser when to start a paragraph, italicize a word, or display a picture. To create your own web pages, you need to learn to use this family of tags.

HTML is such an important standard that you’ll spend a good portion of this book digging through its features, frills, and occasional shortcomings. Every web page you build along the way will be a bona fide HTML document.

Note

The HTML standard doesn’t have anything to do with the way a web browser retrieves a page on the Web. That task is left to another standard, called HTTP (HyperText Transport Protocol), which is a communication technology that lets two computers exchange data over the Internet. To use the analogy of a phone conversation, the telephone wires represent HTTP, and the juicy tidbits of gossip you exchange with Aunt Martha are the HTML documents.

Cracking Open an HTML File

On the inside, an HTML page is actually nothing more than a plain-vanilla text file. That means that the raw code behind every web page you create will consist entirely of letters, numbers, and a few special characters (like spaces, punctuation marks, and everything else you can spot on your keyboard). Figure 1-1 dissects an ordinary (and very simple) HTML document.

Here’s one of the secrets of web page writing: You don’t need a live website to start creating your own web pages. That’s because you can easily build and test pages using only your own computer. In fact, you don’t even need an Internet connection. The only tools you need are a basic text editor and a standard web browser.

A text editor lets you create or edit an HTML file (in a window like the one you can see in Figure 1-1, bottom). Even many professional web designers stick with simple text-editing tools. There are plenty of fancier editing tools that are designed specifically for editing websites, but you don’t actually need any of them. And if you start using them too soon, you’re likely to end up drowning in a sea of extra frills and features before you really understand how HTML works.

Figure 1-1. Every HTML document is actually an ordinary text file. Top: A web browser displays a simple HTML document, showing all its glorious formatting. Bottom: But when you open the same document in a text editor, you see all the text from the original document, along with a few extra pieces of information inside angle brackets

This text isn't bold. This text is bold.

The type of text editor you use depends on your computer’s operating system:

• If you have a Windows computer, you use the bare-bones Notepad editor. Sail on to the next section.

• If you have a Mac computer, you use the built-in TextEdit editor. But first, you need to make the adjustments described below.

Mac fans need to tweak the way TextEdit works because the program has an “HTML view” that hides the tags in an HTML file and shows you the formatted page instead. This behavior is aimed at making life simpler for newbies, but it presents a serious danger for anyone who wants to write a real web page. To avoid confusion and to make sure you write real, raw HTML, you need to turn HTML view off. Here’s how:

1. Choose TextEdit→Preferences.

   This opens a tabbed window of TextEdit options (Figure 1-2).

   

   Figure 1-2. TextEdit’s Preferences window has two tabs of settings: “New Document” (left) and “Open and Save” (right).

2. Click “New Document” and then, in the Format section, choose “Plain text.”

   This tells TextEdit to start you out with ordinary, unformatted text and to dispense with the formatting toolbar and ruler that would otherwise appear onscreen, which aren’t relevant to creating HTML files.

3. Click “Open and Save” and switch on the first option, “Display HTML files as HTML code instead of formatted text.”

   This tells TextEdit to let you see (and edit) the real HTML markup, tags and all, not the formatted version of the page as it would appear in a web browser.

4. Close the Preferences window, and then close TextEdit.

   Now, the next time you start TextEdit, you’ll begin in the plain-text mode that every self-respecting web developer uses.

As you no doubt know, a web browser is a program that lets you navigate to and display web pages. Without browsers, the Web would still exist, but you wouldn’t be able to look at it.

A browser’s job is surprisingly simple—in fact, the bulk of its work consists of two tasks. First, it requests web pages, which happens when you type in a website address (like www.google.com) or click a link in a web page. The browser sends that request to a far-off computer called a web server. A server is typically much more powerful than a home computer because it needs to handle multiple browser requests at once. The server heeds these requests and sends back the content of the desired web pages.

When the browser gets that content, it puts its second skill into action and renders, or draws, the web page. Technically, this means the browser converts the plain text it receives from the server into a display document based on formatting instructions embedded in the page. The end result is a graphically rich page with different typefaces, colors, and links. Figure 1-3 illustrates the process.

Figure 1-3. A web browser is designed to do two things really well: contact remote computers to ask for web pages, and then display those pages on your computer.

Although you usually ask your browser to retrieve pages from the Web, you can also use it to view a web page that’s stored on your computer, which is particularly handy when you’re practicing your HTML skills. In fact, your computer already knows that files that end in .htm or .html have web page content. So if you double-click one of these files, your computer launches your web browser automatically. (You can get the same result by dragging a web page file and dropping it on an already-open browser window.)

Although ordinary people need only a single web browser, it’s a good idea for web developers-in-training (like yourself) to become familiar with the most common browsers out there (see Figure 1-4). That’s because, when you design your website, you need to prepare for a wide audience of people with different browsers. To make sure your nifty pages don’t turn funky when other people look at them, you should test your site using a variety of browsers, screen sizes, and operating systems.

The following list describes the most popular browsers of today:

• Google Chrome is the current king of web browsers, despite the fact that it’s the newest kid on the block. Tech-savvy web fans love its features, like bookmarks you can synchronize across different computers, and its blistering speed.

  Get with Google Chrome at www.google.com/chrome.

• Internet Explorer is the longest-lived browser and the official standard in many corporate and government environments. It’s also the browser that comes pre-installed on Windows, so it’s the one non-techie people use if they don’t want (or don’t know how) to install something new. Even hotshot web designers need to check that Internet Explorer understands their pages, because even old versions of IE, like IE 8, remain popular.

  To download the most recent version of Internet Explorer, visit www.microsoft.com/ie.

  

  Figure 1-4. Browser usage statistics, which estimate the percentage of people using each major browser, vary depending on what sites you examine and how you count visitors, but at the time of this writing, this is one reasonable estimate. (For current browser usage statistics, check out http://tinyurl.com/stats-browsers.)

• Firefox started life as the modern response to Internet Explorer. It’s still ahead of the game with its incredibly flexible add-ons, tiny programs that other people develop to enhance Firefox with extra features, like a web mail notifier and thumbnails of the sites that show up in a page of search results. Best of all, an army of volunteer programmers keep Firefox rigorously up to date.

  Give Firefox a go at www.mozilla.org/firefox.

• Safari is an Apple-designed browser that comes with current versions of the Mac OS operating system. Apple products like the iPhone, the iPad, and the iPod Touch also use the Safari browser (albeit a mobile version that behaves a bit differently). The fine folks at Apple created an incarnation of Safari for Windows computers but have since abandoned it, making Safari an Apple-only option.

  Go on Safari at www.apple.com/safari.

• Opera is a slimmed-down, easy-to-install browser that’s been around for well over a decade, serving as an antidote to the bloated size and pointless frills of Internet Explorer. For years, Opera was held back by an unfortunate detail—if you wanted an ad-free version, you needed to pay. Today, Opera is free and ad-free, too, just like the other browsers on this list. It has a small but loyal following but runs a distant fifth in web browser standings.

  Check out Opera at www.opera.com.

Tutorial: Creating an HTML File

Now that you’ve prepped your web kitchen, you’re ready to create your very own web page. In this tutorial, you’ll build the basic page that you saw in Figure 1-1.

Tip

Like all the tutorials in this book, you’ll find the solution for this exercise on the companion site at http://prosetech.com/web. Just look in the folder named Tutorial-1-1 (which stands for “Chapter 1, first tutorial,” if you’re curious).

Ready to begin? Here’s what to do:

1. Fire up your text editor.

   On a Windows computer, that’s Notepad. To open Notepad, click the Start button, type “notepad,” and then click the Notepad icon that appears.

   On a Mac, that’s TextEdit. To launch it, go to the Applications folder and then double-click TextEdit.

   When you load up your text editor, it starts you out with a new, blank document, which is exactly what you want.

2. Start writing your HTML code.

   This task is a little tricky because you haven’t explored the HTML standard yet. Hang on—help is on the way in the rest of this chapter. For now, you can use the following very simple HTML snippet. Just type it in exactly as it appears, text, slashes, pointy brackets, and all:

   United Popsicle Workers Union
   We fight for your rights.

   Technically, this two-line document is missing a few structural details that self-respecting web pages should have. However, every browser can read this HTML fragment and correctly interpret what you want: the two lines of formatted text shown in Figure 1-1, top.

3. When you finish your web page, choose File→Save.

   That brings up the Save or Save As window, where you fill in the details for your new file (Figure 1-5).

   

   Figure 1-5. Whether you use Notepad (shown here) or TextEdit, there’s nothing tricky about saving your file. Just make sure to include “.htm” or “.html” at the end of the filename to identify it as an HTML document.

4. Pick a save location for your file, and give it the name popsicles.htm.

   If you’re not sure where to stash your file, you can save it right on your desktop for now.

   When you name your file, make sure you include the extension .htm or .html at the end of the filename. For example, by using the name popsicles.htm or popsicles.html, you ensure that your computer will recognize your document as an HTML file.

   Note for the paranoid: There’s no difference between .htm and .html files. Both are 100% the same—text files that contain HTML content.

   Note

   Technically speaking, you can use any file extension you want. However, using .htm or .html saves confusion (you immediately know the file is a web page) and helps avoid common problems. For example, using an .htm or .html file extension ensures that when you double-click the filename, your computer will know to open it in a web browser and not some other program. It’s also important to use the .htm or .html extension if you plan to upload your files to a web server; prickly servers may refuse to hand out pages that have nonstandard file extensions.

5. If necessary, change the way your text editor encodes your file to UTF-8.

   This is the TextEdit standard, so Mac users can skip this step. But in Notepad, you need to choose UTF-8 in the Encoding list at the bottom of the Save As window.

   Your web page will work even if you don’t take this step, but doing so ensures that you won’t run into problems if you use special characters or a different language in your page.

6. Click Save to make it official.

   If you use TextEdit, the program may ask if you really want to use the .htm or .html extension instead of .txt, the text file standard; click “Use .htm.” No such step is required in Notepad. However, you won’t actually see your HTML files in the list unless you choose “All Files (*.*)” in the “Save as type” box (which initially has “Text Documents (*.txt)” selected).

7. To view your work, open the file in a browser (Figure 1-6).

   If you use the extension .htm or .html, opening a page is usually as easy as double-clicking the filename. Or you can drag your web page file and drop it onto an open browser window.

   

   Figure 1-6. A browser’s address bar reveals where the current web page is really located. If you see “http://” in the address, it comes from a web server on the Internet (top). If you look at a web page that resides on your own computer, you see just an ordinary local file address (middle, showing a Windows file location in Internet Explorer), or you see a URL that starts with the prefix “file:///” (bottom, showing a file location in Chrome).

8. When you finish editing, close your text editor.

   The next time you want to change your document, just fire up your text editor, choose File→Open, and then pick the file you want, or drag the file and drop it on an already-open text editor window.

Tip

Here’s a trick that can help you open HTML files in a hurry. Find your file, and then right-click it (Control-click on a Mac) and choose “Open with.” This pops open a list of programs you can use to open the file. Click Notepad (or TextEdit) in the list to launch a new text editor window and open your HTML file in one fell swoop.

If you leave your web browser window open while you edit your HTML file in a text editor, the browser will hold on to the old version of your file. To see your recent changes, save your text file again (choose File→Save) and then refresh the page in your browser (usually, that’s as easy as right-clicking the page and choosing Refresh or Reload).

Seeing the HTML of a Live Web Page

Most text editors don’t let you open a web page that’s on the Internet. However, web browsers do give you the chance to sneak a peek at the raw HTML that sits behind any web page.

If you’re using Internet Explorer, Chrome, Firefox, or just about any browser other than Safari, you can use a shortcut. Once you navigate to the web page you want to examine, right-click anywhere on the page and choose View Source or View Page Source (the exact wording depends on the browser). A new window appears, showing you the raw HTML that underlies the page.

If you’re using Safari on a Mac, you have to jump through an extra hoop to see a web page’s HTML. First, switch on the Develop menu by choosing Safari→Preferences→Advanced and then turning on the “Show Develop menu in menu bar” checkbox. Once you do, visit the page you want to dissect and choose Develop→Show Page Source.

Tip

Firefox has a handy feature that lets you home in on just part of the HTML in a complex web page. Just select the text you’re interested in on the page itself, right-click the text, and then choose View Selection Source.

Most web pages are considerably more complex than the popsicles.htm example shown in Figure 1-1, so you need to wade through many more HTML tags when you look at the web page markup. You’re also likely to find a dense thicket of JavaScript code stuffed at the top of the page, stripped of all its spacing and almost impossible to read. But even if the markup looks like gibberish, don’t panic. By the time you finish this book, you’ll be able to scan through a jumble of HTML to find the bits that interest you. In fact, professional web developers often use the View Source technique to check their competitors’ work.

Now that you know how to peer into existing HTML files and how to create your own, the next step is to understand what goes inside the average HTML file. It all revolves around a single concept—tags.

HTML tags are formatting instructions that tell a browser how to transform ordinary text into something visually appealing. If you were to take all the tags out of an HTML document, the resulting page would consist of nothing more than plain, unformatted text.

You can recognize a tag by looking for angle brackets, two special characters that look like this:

This text isn't bold. This text is bold.

For example, one simple tag is the

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

On its own, the

This text isn't bold. This text is bold.

You can easily recognize an end tag. They look the same as start tags, except that they begin with a forward slash. That means they start like this

This text isn't bold. This text is bold.

This isn't bold. Pay attention! Now we're back to normal.

This isn't bold. Pay attention! Now we're back to normal.

This text isn't bold. This text is bold.

Most tags come in pairs. When you use a start tag (like

This text isn't bold. This text is bold.

Here’s the basic idea: A pair of tags creates a container (see Figure 1-7). You place content (like text) inside that container. For example, when you use the

This text isn't bold. This text is bold.

Figure 1-7. To get bold text, you need to start with the correct container. It’s the

This text isn't bold. This text is bold.

This isn't bold. Pay attention! Now we're back to normal.5

When someone refers to the

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

This isn't bold. Pay attention! Now we're back to normal.

• This isn't bold. Pay attention! Now we're back to normal.

  9

• This word has bold and italic formatting.

  0 element, which inserts a line break in a web page. Standalone elements don’t come in pairs, as container elements do, and you may hear them referred to as empty elements because you can’t put any text inside them.

This word has bold and italic formatting.

This word has bold and italic formatting.

This word has bold and italic formatting.

This word has bold and italic formatting.4

In the not-so-distant past, web developers were forced to use the empty element syntax—that is, tags that end with a forward slash—because it was an official part of the (now superseded) XHTML language. Today, the trailing slash is optional, so standalone elements can use the same syntax as start tags (which means you can use either

This word has bold and italic formatting.

This word has bold and italic formatting.

This word has bold and italic formatting.

This word has bold and italic formatting.

In the previous example, you applied a simple

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

To see nesting in action, you need another element to work with. For this example, consider what happens if you want to make a piece of text bold and italicized. HTML doesn’t include a single element for this purpose, so you need to combine the familiar

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

This word has bold and italic formatting.

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

This word has italic and bold formatting.

This word has italic and bold formatting.

This word has italic and bold formatting.5

This word has italic and bold formatting.

This word has italic and bold formatting.7

This word has italic and bold formatting.

This word has italic and bold formatting.

This word has italic and bold formatting.

This word has italic and bold formatting.

This word has italic and bold formatting.

This word has italic and bold formatting.

This word has italic and bold formatting.

This word has italic and bold formatting.

This word has italic and bold formatting.

This word has italic and bold formatting.

This word has italic and bold formatting.

This word has italic and bold formatting.

This word has italic and bold formatting.

DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This word has italic and bold formatting.

DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

If you open this document in a web browser, you’ll find that the page is blank, but the title appears (as shown in Figure 1-10).

Figure 1-10. When a browser displays a web page, it shows the page’s title on the browser’s tab or at the top of the window. But be warned: the title won’t always fit.

As it stands right now, this HTML document is a good template for future pages. The basic structure is in place; you simply need to change the title and add some text. That’s the task you’ll undertake next.

DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">6

DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">8

DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

...


...

1. 
   
   ...
   
   
   ...
   
   

   1

   
   
   ...
   
   
   ...
   
   

   2

2. 
   
   ...
   
   
   ...
   
   

   3

   
   
   ...
   
   
   ...
   
   

   4

   
   
   ...
   
   
   ...
   
   

   5

3. 
   
   ...
   
   
   ...
   
   

   6

   
   
   ...
   
   
   ...
   
   

   7

4. 
   
   ...
   
   
   ...
   
   

   8

   
   
   ...
   
   
   ...
   
   

   9

   
   
   Hire Me!
   
   
   I am Lee Park. Hire me for your company, because my work is
   off the hizzle.
   
   

   This example highlights (in bold) the modifications made to the basic HTML skeleton—a changed title and a single line of text. This example uses a single

   This text isn't bold. This text is bold.

   7element inside the paragraph, just to dress up the page a little.

5. 1
   2

Hire Me! I am Lee Park. Hire me for your company, because my work is off the hizzle. 0

Hire Me!


I am Lee Park. Hire me for your company, because my work is
off the hizzle.

Hire Me!


I am Lee Park. Hire me for your company, because my work is
off the hizzle.

Hire Me!


I am Lee Park. Hire me for your company, because my work is
off the hizzle.

Hire Me!


I am Lee Park. Hire me for your company, because my work is
off the hizzle.

This text isn't bold. This text is bold.

2

Like the

This word has bold and italic formatting.

2 element discussed earlier,

Hire Me!


I am Lee Park. Hire me for your company, because my work is
off the hizzle.

6 is a standalone element with no content. For that reason, it makes sense to use the empty element syntax and add a forward slash before the closing angle bracket.

However, there’s an obvious difference between the

This word has bold and italic formatting.

2 element and the

Hire Me!


I am Lee Park. Hire me for your company, because my work is
off the hizzle.

6 element. Although

Hire Me!


I am Lee Park. Hire me for your company, because my work is
off the hizzle.

6 is a standalone element, it isn’t self-sufficient. In order for the element to mean anything, you need to supply two more pieces of information: the name of the image file and some alternate text, which is used in cases where a browser can’t download or display the picture (see Alternate Text). To incorporate this extra information into the image element, HTML uses attributes, extra pieces of information that appear after an element name, but before the closing > character.

The

Hire Me!


I am Lee Park. Hire me for your company, because my work is
off the hizzle.

6 example includes two attributes, separated by a space. Each attribute has two parts—a name (which tells the browser what the attribute does) and a value (a piece of information you supply). The name of the first

Hire Me!


I am Lee Park. Hire me for your company, because my work is
off the hizzle.

6 attribute is

This text isn't bold. This text is bold.

02, which is shorthand for “source”; it tells the browser where to get the image you want. In this example, the value of the

This text isn't bold. This text is bold.

02 attribute is leepark.jpg, which is the name of the file with Lee Park’s headshot.

The name of the second

Hire Me!


I am Lee Park. Hire me for your company, because my work is
off the hizzle.

6 attribute is

This text isn't bold. This text is bold.

05, which is shorthand for “alternate text.” It tells a browser that you want it to show text if it can’t display the image. Its value is the text you want to display, which is “Lee Park Portrait” in this case.

Once you understand the image element, you’re ready to use it in an HTML document. Just place it wherever it makes sense, inside or after an existing paragraph:

This text isn't bold. This text is bold.

3

Figure 1-15 shows exactly where the picture ends up.

Figure 1-15. Here’s a web page that embeds a picture, thanks to the linking power of the image element. To display this document, a web browser performs a separate request to retrieve the image file. As a result, your browser may display the text of the web page before it downloads the graphic, depending on how long the download takes (typically, that’s a fraction of a second).

Note

You’ll learn many more techniques for web graphics, including how to change their size and wrap text around them, in Chapter 4.

This text isn't bold. This text is bold.06

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.09

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

Table 1-2. Basic inline elements.

ELEMENT

NAME

TYPE

DESCRIPTION

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

This text isn't bold. This text is bold.

This word has bold and italic formatting.

Hire Me!


I am Lee Park. Hire me for your company, because my work is
off the hizzle.

This text isn't bold. This text is bold.