Learning Web Design Third Edition- P7 pot

Part I: Getting Started 46 Monitor Color What is worth noting, however, is that 16-bit monitors use a completely different color spectrum than 24-bit monitors; i.e., it is not a subset of the 24-bit color space. For that reason, when you specify a color numeri- cally in a style sheet or use it in an image, the 16-bit monitor always needs to shift it slightly to a color in its spectrum. Whether it gets shift- ed lighter or darker depends on whether the color is in an image or specified in a style sheet, whether it is in the foreground or the back- ground, which browser and platform is used. In other words, it’s com- pletely unpredictable. The same color may shift different directions in the foreground and background of the same document. What this means is that it is difficult to match a foreground color and background color seamlessly for users with 16-bit monitors (Figure 3-11). This may be problematic if you want an image to blend seamlessly with a background image or color, even if they have identical RGB values. While it will be seamless for the majority of users with 24-bit color monitors, 16-bit users will see the rectangular edges of the image in front of the background and the seamless effect will be ruined. This issue is easily remedied by using a transparent graphic format that permits the back- ground color to show through. Transparency is discussed in Chapter 18, Web Graphics Basics. Coping with monitor color variation Here are some tips and tricks for dealing with color variations from monitor to monitor. Let go of precise color control. Yes, once again, the best practice is to acknowledge that the colors you pick won’t look the same to everyone, and live with it. Precise color is not a priority in this medium where the colors you see can change based on the plaform, monitor bit-depth, or even the angle of the laptop screen. Simulate alternative Gamma settings while you design. Since the major- ity of the web audience today uses Windows machines, designers using Macintosh computers need to be more diligent in testing designs for clarity on Windows. You can simulate what your graphics will look like on Windows using Adobe Photoshop by selecting View→ Proof Setup → Windows RGB (or Macintosh RGB if you are designing on Windows). If it is too light or too dark, make manual adjustments as necessary to the image itself to fix it. To see how the entire page will look with Windows gamma, you can set the brightness of your monitor darker using the Display settings in the System Preferences, or try the inexpensive GammaToggle software that lets you switch back and forth between gamma settings (GammaToggle is available for US$15 from ThankYouWare, www.thankyouware.com). Figure 3-11. On 16-bit monitors, RGB colors get shifted around. In this figure, although the graphic in the foreground uses the identical RGB values as the color in the background, you can still see the outline of the image on the page (top). The only way to fix this is to make the image transparent and allow the background to show through (bottom). Figure 3-11. On 16-bit monitors, RGB colors get shifted around. In this figure, although the graphic in the foreground uses the identical RGB values as the color in the background, you can still see the outline of the image on the page (top). The only way to fix this is to make the image transparent and allow the background to show through (bottom). Know Your Audience Chapter 3, The Nature of Web Design 47 Use transparent images for smooth transitions to the background. There is no way to prevent a noticeable mismatch of foreground and background colors on 16-bit monitors. If you want to be absolutely sure that there is no rectangle around your image for over 99% of users, use a transparent GIF or PNG instead (Figure 3-11). Know Your Audience We’ve established that there are many unknown factors to consider when designing a web page. But there’s one thing that you hopefully do know something about when you begin the design process: your target audience. In professional web development companies, researching the characteristics and needs of the target audience is one of the most important parts of the design process. A good understanding of your audience can help you make better design decisions. Let’s take a look at a few examples: Scenario 1: A site that sells educational toys. If your site is aimed at a con- sumer audience, you should assume that a significant portion of your audience will be using your site from home computers. They may not keep up with the very latest browser versions, or they may be using an AOL browser, or even surfing the Web with their TVs, so don’t rely too heavily on cutting-edge web technologies. They may also be connecting to the Internet through modem connections, so keep your files extra small to prevent long download times. When your bread and butter depends on sales from ordinary consumers, it’s best to play it safe with your page design. You can’t afford to alienate anyone. Scenario 2: A site with resources for professional graphic designers. Because graphic designers tend to have larger computer monitors, this is a case for which you may safely design for an 1024 × 768 pixel screen size. In addition, if they are accessing your pages from work, they are likely to have a connection to the Internet that is faster than the standard modem connection, so you can be a little more lax with the number of size of graphics you put on the page (plus, a good-looking site will be part of the draw for your audience). Scenario 3: A site used to share company information for in-house use only (also known as an intranet). This is the ideal situation for a web designer because many of the “unknowns” become easily known. Often, a company’s system administrator will install the same browser on all machines and keep them up-to-date. Or you might know that everyone will be working on Windows machines with standard 1024 × 768 moni- tors. Bandwidth becomes less of an issue when documents are served internally. You should be able to take advantage of some features that would be risky in the standard web environment. Part I: Getting Started 48 Keeping the Big Picture in Mind Keeping the Big Picture in Mind This chapter should help you to set expectations when starting to design your first web pages. It’s not as precise a medium as print, and you shouldn’t try to force it to be so. Let go of the details and go with the flow. Focus your time and attention on making sure that your content is available for all users, regardless of their browsing devices. As we dive into the details of (X)HTML and CSS in the following chapters, it will be useful to keep the nature of the Web in mind. Test Yourself This chapter covers a number of the quirks of the Web that every new web designer will need to become accustomed to. Describe how each of these factors affect your role as a web designer. Be specific. Answers appear in Appendix A. The variety of browsers in use Macs, PCs, and Unix/Linux systems Each user’s browser preferences Resizable browser windows Modem connections Users with assistive devices 1. 2. 3. 4. 5. 6. IN THIS PART Chapter 4 Creating a Simple Page (HTML Overview) Chapter 5 Marking Up Text Chapter 6 Adding Links Chapter 7 Adding Images Chapter 8 Basic Table Markup Chapter 9 Forms Chapter 10 Understanding the Standards HTML MARKUP FOR STRUCTURE PART II 51 IN THIS CHAPTER An introduction to (X)HTML elements and attributes A step-by-step demonstration of marking up a simple web page The elements that provide document structure Basic text and image elements A simple style sheet Troubleshooting broken web pages Part I provided a general overview of the web design environment. Now that we’ve covered the big concepts, it’s time to roll up our sleeves and start creat- ing a real web page. It will be a simple page, but even the most complicated pages are based on the principles described here. In this chapter, we’ll create a simple web page step by step so you can get a feel for what it’s like to mark up a document with (X)HTML tags. The exercises allow you to work along. This is what I want you to get out of this chapter: Get a feel for how (X)HTML markup works, including an understanding of elements and attributes. See how browsers interpret (X)HTML documents. Learn the basic structure of an (X)HTML document. Get a first glimpse of a style sheet in action. Don’t worry about learning the specific text elements or style sheet rules at this point; we’ll get to those in the following chapters. For now, just pay attention to the process, the overall structure of the document, and the new terminology. A Web Page, Step by Step You got a look at an (X)HTML document in Chapter 2, How the Web Works, but now you’ll get to create one yourself and play around with it in the browser. The demonstration in this chapter has five steps that cover the basics of page production. Step 1: Start with content. As a starting point, we’ll add raw text content and see what browsers do with it. Step 2: Give the document structure. You’ll learn about (X) HTML elements and the elements that give a document its structure. • • • • CREATING A SIMPLE PAGE (HTML Overview) CHAPTER 4 Part II: HTML Markup for Structure 52 Before We Begin, Launch a Text Editor Step 3: Identify text elements. You’ll describe the content using the appropri- ate text elements and learn about the proper way to use (X)HTML. Step 4: Add an image. By adding an image to the page, you’ll learn about attributes and empty elements. Step 5: Change the look with a style sheet. This exercise gives you a taste of formatting content with Cascading Style Sheets. By the time we’re finished, you will have written the source document for the page shown in Figure 4-1. It’s not very fancy, but you have to start some- where. We’ll be checking our work in a browser frequently throughout this demon- stration—probably more than you would in real life—but because this is an introduction to (X)HTML, it is helpful to see the cause and effect of each small change to the source file along the way. Before We Begin, Launch a Text Editor In this chapter and throughout the book, we’ll be writing out (X)HTML documents by hand, so the first thing we need to do is launch a text editor. The text editor that is provided with your operating system, such as Notepad (Windows) or TextEdit (Macintosh), will do for these purposes. Other text editors are fine as long as you can save plain text (ASCII) files with the .html extension. If you have a WYSIWYG web authoring tool such as Dreamweaver or FrontPage, set it aside for now. I want you to get a feel for marking up a document manually (see the sidebar, (X)HTML the Hard Way). Figure 4-1. In this chapter, we’ll write the source document for this web page step by step.Figure 4-1. In this chapter, we’ll write the source document for this web page step by step. HTML the Hard Way With all the wonderful web- authoring tools out there today, chances are you will be using one to create your pages. You may be asking, “If the tools are so great, do I need to learn HTML at all?” The answer is yes, you do. You may not need to have every element memorized, but some familiarity is essential for everyone who wants to make web pages. If you apply for a “web designer” position, employers will expect that you know your way around an (X)HTML document. I stand by my method of teaching (X)HTML the old-fashioned way—by hand. There’s no better way to truly understand how markup works than typing it out, one tag at a time, then opening your page in a browser. It doesn’t take long to develop a feel for marking up documents properly. Understanding (X)HTML will make using your authoring tools easier and more efficient. In addition, you will be glad that you can look at a source file and understand what you’re seeing. It is also crucial for troubleshooting broken pages or fine-tuning the default formatting that web tools produce. (X)HTML (X)HTML is a shorthand way to refer to both HTML and its latest version, XHTML. Authors may write documents in either version. For a detailed explanation of the differences, see Chapter 10, Understanding the Standards. t e R m I n O l O G y Before We Begin, Launch a Text Editor Chapter 4, Creating A Simple Page (HTML Overview) 53 This section shows how to open new documents in Notepad and TextEdit. Even if you’ve used these programs before, skim through for some special set- tings that will make the exercises go more smoothly. We’ll start with Notepad; Mac users can jump ahead. Creating a new document in Notepad (Windows users) These are the steps to creating a new document in Notepad on Windows XP (Figure 4-2). Open the Start menu and navigate to Notepad (in Accessories). 1 Clicking on Notepad will open a new document window, and you’re ready to start typing. 2 Next, we’ll make the extensions visible. This step is not required to make (X)HTML documents, but it will help make the file types more clear at a glance. In any Explorer window, select “Folder Options ” from the Tools menu 3 and select the “View” tab. 4 Find “Hide extensions for known file types” and uncheck that option. 5 Click OK to save the preference and the file extensions will now be visible. 1. 2. 3. Figure 4-2. Creating a new document in Notepad. 1 Open the Start menu and navigate to Notepad (All Programs > Accessories > Notepad) 2 Clicking on Notepad will open a new document. 3 To make the extensions visible go to My Computer > Tools > Folder Options 4 Select the View tab. 5 Find “Hide extensions for known file types” and uncheck. Then click OK to save preference. Figure 4-2. Creating a new document in Notepad. 1 Open the Start menu and navigate to Notepad (All Programs > Accessories > Notepad) 2 Clicking on Notepad will open a new document. 3 To make the extensions visible go to My Computer > Tools > Folder Options 4 Select the View tab. 5 Find “Hide extensions for known file types” and uncheck. Then click OK to save preference. Part II: HTML Markup for Structure 54 Before We Begin, Launch a Text Editor Creating a new document in TextEdit (Macintosh users) By default, TextEdit creates “rich text” documents, that is, documents that have hidden style formatting instructions for making text bold, setting font size, and so on. (X)HTML documents need to be plain text documents, so we’ll need to change the Format, as shown in this example (Figure 4-3). Use the Finder to look in the Applications folder for TextEdit. When you’ve found it, double-click the name or icon to launch the application. TextEdit opens a new document. You can tell from the text formatting menu at the top that you are in Rich Text mode 1 . Here’s how you change it. Open the Preferences dialog box from the TextEdit menu. There are three settings you need to adjust: Select “Plain text”. 2 Select “Ignore rich text commands in HTML files”. 3 Turn off “Append ‘.txt’ extensions to plain text files”. 4 When you are done, click the red button in the top-left corner. 5 Quit TextEdit and restart it to open a new document with the new Plain Text settings. The formatting menu will no longer be on the new document. 6 1. 2. 3. 4. 5. 6. 1 The formatting menu indicates the document is in Rich Text Format 2 This makes TextEdit open new documents in Plain Text Format 3 Check this so TextEdit will display the HTML source document. Otherwise, it displays HTML elements as they would appear in a browser. 4 Turn off the .txt extension so that you can name your files with .html 5 Close the window when you’re done 6 Plain Text documents have no menu Rich Text to Plain text Figure 4-3. Launching TextEdit and choosing Plain Text settings in the Preferences. 1 The formatting menu indicates the document is in Rich Text Format 2 This makes TextEdit open new documents in Plain Text Format 3 Check this so TextEdit will display the HTML source document. Otherwise, it displays HTML elements as they would appear in a browser. 4 Turn off the .txt extension so that you can name your files with .html 5 Close the window when you’re done 6 Plain Text documents have no menu Rich Text to Plain text Figure 4-3. Launching TextEdit and choosing Plain Text settings in the Preferences. To make it easy to get to TextEdit later, follow these instructions to save it in the Dock. With TextEdit running, click and hold on its icon in the Dock, then select “Keep in Dock” from the pop-up menu. The next time you need it, you can double-click its icon in the Dock, launch the program, and alleviate to the need to navigate to the Applications folder. t I P Step 1: Start with Content Chapter 4, Creating A Simple Page (HTML Overview) 55 Step 1: Start with Content Now that we’ve got our new document, it’s time to get typing. A web page always starts with content, so that’s where we begin our demonstration. Exercise 4-1 walks you through entering the raw text content and saving the document in a new folder. exercise 4-1 | Entering content Type the content for the home page into the new document in your text editor. Just copy it as you see it here. Keep the line breaks the same for the sake of playing along. Black Goose Bistro The Restaurant The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. Catering You have fun we’ll handle the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers. Location and Hours Seekonk, Massachusetts; Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight Select “Save” or “Save as” from the File menu to get the Save As dialog box (Figure 4-4). The first thing you need to do is create a new folder that will contain all of the files for the site (in other words, it’s the local root folder). Windows: Click the folder icon at the top to create the new folder. ➊ Mac: Click the “New Folder” button. ➋ 1. 2. Figure 4-4. Saving index.html in a new folder called “bistro”. Windows XP Mac OS X 1 2 Figure 4-4. Saving index.html in a new folder called “bistro”. Windows XP Mac OS X 1 2 exercise 4-1 | Entering content Type the content for the home page into the new document in your text editor. Just copy it as you see it here. Keep the line breaks the same for the sake of playing along. Black Goose Bistro The Restaurant The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. Catering You have fun we’ll handle the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers. Location and Hours Seekonk, Massachusetts; Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight Select “Save” or “Save as” from the File menu to get the Save As dialog box (Figure 4-4). The first thing you need to do is create a new folder that will contain all of the files for the site (in other words, it’s the local root folder). Windows: Click the folder icon at the top to create the new folder. ➊ Mac: Click the “New Folder” button. ➋ 1. 2. Figure 4-4. Saving index.html in a new folder called “bistro”. Windows XP Mac OS X 1 2 Figure 4-4. Saving index.html in a new folder called “bistro”. Windows XP Mac OS X 1 2 Naming Conventions It is important that you follow these rules and conventions when naming your files: Use proper suffixes for your files. (X)HTML files must end with .html (some servers allow .htm). Web graphics must be labeled according to their file format: .gif or .jpg (.jpeg is also acceptable). Never use character spaces within filenames. It is common to use an underline character or dash to visually separate words within filenames, such as robbins_bio. html or robbins-bio.html. Avoid special characters such as ?, %, #, /, :, ;, •, etc. Limit filenames to letters, numbers, underscores, hyphens, and periods. Filenames may be case-sensitive, depending on your server configuration. Consistently using all lowercase letters in filenames, while not necessary, makes your filenames easier to manage. Keep filenames short. Short names keep the character count and file size of your (X)HTML file in check. If you really must give the file a long, multiword name, you can separate words with capital letters, such as ALongDocumentTitle.html, or with underscores, such as a_long_document_title.html, to improve readability. Self-imposed conventions. It is helpful to develop a consistent naming scheme for huge sites. For instance, always using lowercase with underscores between words. This takes some of the guesswork out of remembering what you named a file when you go to link to it later. . Gamma settings while you design. Since the major- ity of the web audience today uses Windows machines, designers using Macintosh computers need to be more diligent in testing designs for clarity. consider when designing a web page. But there’s one thing that you hopefully do know something about when you begin the design process: your target audience. In professional web development. it will be useful to keep the nature of the Web in mind. Test Yourself This chapter covers a number of the quirks of the Web that every new web designer will need to become accustomed to. Describe