Getting Started with the Example

I created an example page to get you started. It already includes the elements you worked with in the previous session (HTML, HEAD, BODY, H1, P, UL, LI, ADDRESS, and so on). In this session, you will be learning more about how to set up your HTML document so that it will be fully compliant with HTML 4.01, as well as about using additional elements that have not been covered yet.

To get started using the example page:

1. Run your text editor.

2. Open tutor2_example.html from the MyHTML folder (located in your My Documents folder if using Windows, or on your Desktop if using a Macintosh).

   Windows users: In Windows Notepad, select File, Open, and open the MyHTML folder (located in your My Documents folder). Select All Files (*.*) as the file type to see tutor2_example.html in the Open window's folder view. Double-click on tutor2_example.html to open it.

   Caution

   Users of Windows Notepad (and most other Windows-based text editors) cannot initially see HTML files (with .html or .htm file extensions), since only text files (with a .txt file extension) are displayed in the Open window's folder view, unless the viewing of all file types is specified.

   Macintosh users: In SimpleText, select File, Open. If the Desktop (or the MyHTML folder) is not already open, click on the Desktop button to open the Desktop, double-click on the MyHTML folder, and then double-click on tutor2_example.html.

3. Resave tutor2_example.html. In Notepad or SimpleText: Select File and Save As, open the MyHTML folder, type tutor2.html as the file name, and click the Save button.

4. Run your browser and open tutor2.html. (If you need help opening a local HTML file in your browser, see "Opening an HTML File in Your Web Browser" in the previous session.) What you see in your browser should closely match what is shown in Figure 3.1.

   
   Figure 3.1: Heading elements (H1, H2, and H3), a bulleted list (UL), and paragraph elements are already included in the example file.

Note

Most screenshots shown in the figures were captured with the browser window set at 800 Ч 600 pixels. To get what is shown in your browser to match what is shown in the figures, just manually adjust the width of your browser window so that the line breaks in the text lines occur at roughly the same points (no need to be absolutely exact). (Windows: If the browser window is maximized, just click the Maximize icon on the right of the browser's title bar, and then manually grab and pull the lower-right corner of the browser window to resize it.) Besides the screen resolution or the browser window width, a number of additional factors can impact how a Web page displays in a particular browser or on a particular platform. Many browsers let users set their own default font size, either by setting browser preferences or specifying a user style sheet. The dot-pitch (dots per inch, or dpi) at which fonts are displayed can also have an impact. The default dot-pitch of fonts on Windows and Macintosh systems differ, for instance, with Windows displaying fonts at 96 dpi and the Macintosh at 72 dpi. This can result in text looking smaller on a Macintosh system than on a Windows system, even though the screen resolution or the browser window width is the same. Internet Explorer 6 for the Macintosh, however, adjusts font sizes so they match those displayed on a Windows system (earlier versions have Larger and Smaller buttons on the toolbar to adjust the font size up or down). Windows users can also adjust the dot-pitch up or down by changing the display settings in the Control Panel. For instance, if you click the Advanced button in the Display Properties window, you can select Large Fonts [120 dpi] to increase the dot-pitch or Other to specify a custom dot-pitch (Small Fonts [96 dpi] is the default).