Planning an HTML Document

To create a webpage, you can use a text editor, a simple program that includes multiple features for working with webpages and websites, or a program that includes functionality to convert your document to a webpage. Two commonly used text editors are the Notepad and WordPad apps that are part of the Windows operating system. When you use a text editor to create a webpage, you type the content of the webpage and the tags that you need to format the content. In this case, you must have a thorough understanding of HTML and be able to manage the document structure and enter the tags on your own. The second option is to use a program such as Adobe Dreamweaver, or one of the many websites that provide website creation platforms that make it easy for novices to design websites online. These types of programs and website platforms provide a graphical user interface (GUI) in which you type the content of your webpage and use toolbar buttons and menus to format it. The program creates all of the necessary tags to format the page. The third option is to convert your document to a format that a browser can display, such as when you use the Save As command in Microsoft Word to save your document as a webpage.

No matter which approach you use, it is important to understand some basic HTML before you begin working. The examples in this book will use Notepad to create webpages, but you can use any text editor or word processing program to complete your work. Figure 8-2 shows the webpage you will create.

Chief Silva’s page includes several elements. The first line of the webpage contains a heading that is centered and formatted using a larger, bolder font than other text on the page. As you have learned, an HTML document uses tags to format text. The tags that format the headings, such as the document’s title, “Lakeside Police Department,” are called heading tags, as shown in the Session 8.1 Visual Overview. Because this document’s title is a level-one heading, you will code it with the <h1> tag.

The subtitle, “Women’s Self-Defense Class,” is a level-two heading, so it is coded with an <h2> tag. In addition to using the <h2> tag, you will include attributes to change the font color to red.

The paragraph below the subtitle is a normal paragraph that uses 12-point Times New Roman font, one of the web-safe fonts for web pages because it is correctly displayed on most devices. The fonts displayed in a web page depend on which fonts exist on the device; as you install different apps on your device, they might install new fonts. For example, when you install Microsoft Office, you might allow new fonts on to your device at the same time. You might also install new fonts by downloading them from websites or from a font program that you purchased.

In any case, the fonts that are available on your device are not always the same as those found on other devices. A good rule for beginning web page developers is to use web-safe fonts, which are considered to be common on all devices, as shown in Figure 8-3.

Insight Using Fonts in a Web page By using web-safe fonts on your web pages, you can ensure consistency across browsers and devices. Web developers can embed fonts in a website so that all users can display the specific choice the developer used. Keep in mind that there are tradeoffs when you create a web page that uses embedded fonts. When pages contain embedded fonts, the files that must be downloaded to each user’s device are much larger. As an HTML beginner, you should use the commonly installed fonts on all computers to ensure that they are displayed correctly when viewed by others.

The paragraph in the web page that you will create also includes two nested elements: the italicized sentence and the bold class date and time. Also, the list of items below the paragraph is formatted as a bulleted list. The items in the list in Chief Silva’s page appear with the default bullet characters for webpages. After you finish the webpage, Chief Silva will ask you to create other pages and to format the items in this bulleted list as hyperlinks that open the documents describing the self-defense classes for the elderly, children, and the disabled.