An HTML file (also known as a webpage file or document) is a plain-text file. That’s why you can use a plain-text editor like Notepad to edit an HTML file. Within that file is literal text (that is, text that will literally appear on the screen when you display the page in a browser) plus tags that tell the browser how to format and arrange the text.

HTML tags are codes inside angle brackets, like this: <p>. There are dozens of tags defined in the HTML5 standard. You can use these tags to specify where formatting should be applied, how the layout should appear, what pictures should be placed in certain locations, and more.

For example, suppose you wanted a certain word to appear in bold, like this:

Save up to 50% on clearance items.

In HTML, there’s no Bold button to click (like there is in a word-processing program). Therefore, you have to “tag” the word or characters that you want to be bold. The tag to turn on bold is <b>, and the code to turn bold off is </b>. Your HTML code would look something like this:

Save up to <b>50%</b> on clearance items.

That’s an example of a two-sided tag, which encloses text between an opening tag and a closing tag, in this case <b> and </b>. Note the forward slash (/) in the closing tag (</b>). That slash differentiates an opening tag from a closing tag. With a two-sided tag, there is always a corresponding closing tag for every opening tag.

To understand how this system of tagging came about, you need to know that back in the early days of the Internet, nearly everyone connected to it by using dial-up modems at speeds ranging from 2400 bps to 28.8 Kbps. That’s really slow. Text files transfer much faster than binary files, so for any type of information-sharing system to be popular, it had to be text-based. Otherwise, people would doze off while waiting for a page to load.

People designing webpages also wanted their pages to be attractive. They couldn’t just format pages in a word processor, though, because every word processor handled formatting differently and it was impossible to know which word processor a visitor might be using. Word-processing files are also much larger than plain-text files.

The web’s creators developed an elegant solution. Instead of sending the formatted pages over the Internet, they created an application—a web browser—that could interpret plain-text code (HTML tags) as formatting instructions. The text could be sent quickly and efficiently in plain-text format, and then be processed and displayed attractively and graphically on the local PC.

HTML worked great all by itself for all kinds of text formatting, but some web designers wanted to include graphics on their pages. To accommodate this, the <img> tag was created, which designers use to refer to a graphic stored on a server. When the web browser gets to that tag, it requests that the image file be downloaded from the server and displayed on the page. (You’ll learn how to insert images in Chapter 9.)

The <img> tag is different in several ways from the <b> tag. It is one-sided, meaning it does not have a closing tag, and it takes attributes. An attribute is text within the tag that contains information about how the tag should behave. For example, for an <img> tag, you have to specify a source (abbreviated src). Here’s an example:

<img src="tree.gif">

This <img> tag uses the src= attribute and specifies that the file tree.gif be displayed.

Many tags accept attributes, either optional or required. You’ll see many examples throughout the exercises in this book. Attributes are usually written in pairs in the form name=value, where the name of the attribute is on the left side of the equals sign, and the value on the right.

With HTML, you can also create hyperlinks from one page to another. When a visitor clicks a hyperlink, the web browser loads the referenced page or jumps to a marked section (a “bookmark”) within the same page. You will learn to create hyperlinks in Chapter 5.

The tag for a hyperlink is <a>, a two-sided tag, but most people wouldn’t recognize it without the attribute that specifies the file or location to which to jump. For example, to create a hyperlink with the words Click Here that jumps to the index.htm file when clicked, the coding would look like this:

<a href="index.htm">Click Here</a>

There’s a lot more to HTML, but that’s basically how it works. You mark up plain text with tags that indicate where you want to apply elements such as formatting, hyperlinks, and graphics. Then a web browser interprets those tags and displays the page in its formatted state, a process called rendering. The trick, of course, is to know which tags to use, where they’re appropriate, and what attributes they need. And that’s the subject of this book. Starting in Chapter 2, you’ll begin building a website from scratch, learning about each individual tag as you go. By the time you finish this book, you will have created a multi-page website using nothing but Notepad and the tags that you have personally learned about and typed. Talk about boot camp! There are professional web designers out there today who have never done this and who don’t have the fundamental HTML coding skills that you’ll have when you finish this book.

The rest of this book assumes that you will be working in Notepad or some other text editor, so you’ll need a basic understanding of whatever text editor you select. Notepad is included with all versions of Windows. It’s a simple text editor that saves only in plain-text format. That’s ideal for HTML editing because you don’t need to worry about any extra word-processing formatting being included in the file.

When saving or opening files in Notepad, the default file extension is .txt. The Save dialog boxes and Open dialog boxes are set by default to filter file listings so only those files with .txt extensions appear. That means each time you browse for a file, you need to change the file type to All Files so you can browse for webpages (which have .htm or .html extensions).

In the following exercise, you will open a webpage in Notepad and examine its text and tags.

Other Ways of Opening Webpages in Notepad

A quick way to open most file types in their default applications is to double-click them from any File Explorer (or Windows Explorer) window. However, the problem with doing that for HTML files is that the default application is your web browser, not Notepad. So when you double-click an HTML file, the file doesn’t open in Notepad; the file opens in your web browser. One way to get around this is to right-click a file in File Explorer, point to Open With, and then click Notepad (see Figure 1-1). This opens Notepad and loads the file.

Figure 1-1. You can open a file with Notepad by right-clicking the file, pointing to Open With, and then clicking Notepad.

Note

File Explorer is the file management interface in Windows 8. In earlier versions of Windows, that same interface is called Windows Explorer.

Here’s another method: You can create a shortcut to Notepad on your desktop and then drag-and-drop individual HTML files onto that shortcut whenever you want to open an HTML file in Notepad. To create a desktop shortcut for Notepad in Windows 8, locate Notepad from the Start screen, right-click its tile, and then click Open File Location. In the File Explorer window that displays, right-click Notepad, point to Send To, and then click Desktop (Create Shortcut). See Figure 1-2. In earlier Windows versions, locate Notepad on the Start menu (Start | All Programs | Accessories), right-click it, point to Send To, and then click Desktop (Create Shortcut).

Figure 1-2. To copy the Notepad shortcut to the desktop, right-click it, point to Send to, and then click Desktop (create shortcut).

Caution

Theoretically, you could set Notepad as the default application for opening files that have an .htm or .html extension. But that would cause more problems than it’s worth, because then all your HTML content would open in Notepad not just the pages you are using for these lessons.

Adding a Location to the Favorites List

While working through this book, you will open many files in Notepad. To save yourself the trouble of navigating to the data file folder each time, you might want to add that folder to your Favorites bar, which displays in the navigation pane in the Open dialog box.

In the following exercise, you learn how to add a shortcut that brings you directly to the HTML 5 Start Here folder from the Favorites list.

Add a Location to Your Favorites List

1. In Notepad, click File | Open.

   Note

   You can actually do this in almost any application (especially the Microsoft ones), but Notepad is handy because you worked with it in the preceding exercise.

2. Navigate to the folder containing the practice files for this book.

   On the Places bar, click Documents (or click My Documents if you are using Windows XP). In the Open dialog box, double-click Microsoft Press. The HTML 5 Start Here folder displays as an icon. Depending on your View setting, the icon might be a different size than shown here. The icon size is not important for the task at hand.

3. Drag the HTML 5 Start Here folder icon to the Favorites list on the left side of the window.

   A shortcut for that folder displays on the Favorites list.

Now, the next time you want to open a file in the Open dialog box, you can click that shortcut, and then double-click the folder for the chapter you are working on, which is much more convenient!

Because Notepad is not a WYSIWYG (“What You See Is What You Get”) program, you won’t be able to immediately see how the tags you type will look in the finished product. To work around this, most people like to keep a browser window open next to Notepad so they can see their work by looking at their browser.

You can preview your work in any browser; you do not need to use Internet Explorer 10 (although that’s what I use in this book’s examples). In fact, as you progress with your web development skills, you will probably want to acquire several different browsers in which to test your pages, because each browser might display page elements a little differently. For beginners, though, Internet Explorer is a good choice because it’s one of the most popular browsers—one that a large percentage of your target audience is likely to be using. Other popular browsers include Google Chrome, Firefox, Safari, and Opera.

If you are using Windows 8, you have two different versions of Internet Explorer: the regular desktop version and the customized Windows 8 app version. You can start the desktop version of Internet Explorer from the Internet Explorer icon that’s pinned to the left of the taskbar on the desktop. You can start the custom version from the Internet Explorer tile on the Start screen. This book uses the desktop version of Internet Explorer, but you might want to check your work in the custom version when you start developing your own sites.

In the following exercise, you will display an HTML file in Internet Explorer. I use the desktop version of Internet Explorer 10 for the examples in this book. To see the displayed file and the underlying code at the same time, open the file in Notepad and then arrange the windows so that both are visible at once.

Open a Webpage in Internet Explorer

Open a Webpage in Internet Explorer

1. Using File Explorer (or Windows Explorer), open DocumentsMicrosoft PressHTML 5 Start Here1Basics and then double-click welcome.htm. The file opens in Internet Explorer (or your default browser, if you’re not using Internet Explorer).

   Note

   If Internet Explorer is not your default browser but you want it to be, from within Internet Explorer, click Tools | Internet Options, click the Programs tab, and then click Make Default.

   That’s by far the easiest way if File Explorer is already open and displaying the file’s location. Follow the next steps to learn another way that might be preferable when Internet Explorer is already open but File Explorer (or Windows Explorer) isn’t.

2. In Internet Explorer, click File | Open.

   The Open dialog box displays.

   Note

   If the menu bar does not display in Internet Explorer, press the Alt key to display it.

   

3. Click the Browse button and then browse to DocumentsMicrosoft PressHTML 5 Start Here1Basics.

   Tip

   If you created the shortcut in the Favorites bar earlier in the chapter, you can use that to save a few clicks when browsing for the location.

4. Click welcome.htm and then click Open.

   

   The path to the file displays in the Open dialog box.

   

5. Click OK.

   The file opens in Internet Explorer. Leave Internet Explorer open for the next exercise.

Tip

Remember, not all web browsers display pages the same way. For example, one browser’s idea of what text should look like might be different from another. It’s a good idea to check your pages in multiple web browsers, such as Firefox, Netscape, and Opera. These are available as free downloads from www.firefox.com, www.netscape.com, and www.opera.com, respectively.

After you’ve made a change to a webpage, you will probably want to see how that change looks in a browser. If you set up your Internet Explorer and Notepad windows side by side in the preceding two exercises, it’s easy to view those changes. Simply save your work in Notepad and then refresh the display in Internet Explorer by clicking the Refresh button or pressing F5.

In the following exercise, you will change us to me in the welcome.htm file and then preview that change in Internet Explorer. This exercise builds on the previous two, so make sure you have completed them before starting this exercise. You can use this procedure throughout the rest of the book to preview your work from each exercise.

In this chapter, you explored HTML and you were introduced to some basic skills that will be essential in following along with the exercises in upcoming chapters. Here are the key points to remember from this chapter: