Print this Section

  
  

Working with HTML Documents

HTML documents have a simple, common structure that forms the basis for designing all Web pages. This basic structure of tags is shown in the following listing with associated tags described in the following sections.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>page title goes here</title>
    </head>
    <body>
        *
        page content goes here
        *
    </body>
</html>

Listing 1-9. A web page template.

As you begin coding an HTML page you can start with this template. In fact, you may wish to create this document and save it as a template file. Then, when you start a new page, simply open this document, save it under the name of the new page, and continue coding for the particular information to appear on that page.

The DTD

All HTML documents should begin with the prolog line shown in Listing 1-10. This first line is the Document Type Definition indicating the W3C coding standard used for the page. In this case, the standard used was HTML version 5.

<!DOCTYPE html>

Listing 1-10. Web Page DTD.

The <html> Tag

The <html> container tag surrounds all HTML coding in the document. This tag indicates that the enclosed information contains HTML coding and should be rendered as such in the browser. In conformance with HTML standards, the opening tag includes the lang attribute that specifies the specific language used for the content: English (en).

<html lang="en">

Listing 1-11. The <html> tag.

The <head> Tag

The <head> container tag encloses the head section of the HTML document. The head section supplies a title for the document (see below) along with other information related to the formatting and indexing of the document. For present purposes, only a title appears in the head section. Other tags that can be included in the head section are discussed as needed.

<head>
    <title>page title goes here</title
</head>

Listing 1-12. The <head> tag.

The <title> Tag

The <title> container tag gives a title to the document. This tag encloses a string of text that appears in the browser's Title Bar when the page is opened. The <title> tag provides helpful page identification information to the person visiting the various pages of your Web site. Note that <head> and <title> sections are required for conformance with HTML 5 standards.

Title Tag in Browser

Figure 1-15.

Appearance of the <title> tag on the browser Title Bar.

The <body> Tag

The bulk of the coding of an HTML document appears in the body section surrounded by the <body> container tag. Only information appearing inside this tag is displayed in the browser window. In its simplest form, the body section contains plain text that is displayed in the default font style inside the browser window. Browsers normally display text using Times New Roman font face at approximately 1-em size.

All Web pages begin with this basic document structure. The <body> of the document is then expanded with text and other page elements that are to be displayed inside the browser window. Various arrangements of these display elements as well as control over their appearance are accomplished by enclosing them within additional HTML tags.

In order to view your work, it is not necessary to be connected to the Internet or to be linked to a server on the World Wide Web. You can do all your work locally. If you happen to have an account with an Internet Service Provider that provides personal home directories, then you can copy documents to your directory for viewing on the Web. For purposes of this tutorial, you can create Web pages on your computer's hard drive, on a removable thumb drive or diskette, and view the pages through your browser.

The Web pages created in these tutorials work correctly under Internet Explorer and other browsers that follow W3C standards. You should download the latest version of the browser you are using.

Text Editing with Notepad++

HTML documents are created with text editors or with special HTML editors designed for that purpose. For these tutorials, it is sufficient to use a simple text editor such as Windows Notepad++. After opening this application you enter the text and other page elements that you wish to display, and surround them with HTML tags for layout and styling.

Notepad++

Figure 1-16.

The Notepad++ application with coding for a simple web page.


Text and coding is typed into the editor in free-format style. That is, blank spaces, tabs, indents, and other document editing techniques can and should be used to make the document readable in the editor. These editing layouts are ignored by the browser, which only pays attention to the HTML tags for page layout and formatting instructions. The above code, for example, would be displayed properly in the browser if it were entered in the editor as follows:

<!DOCTYPE html><html lang="en"><head><title>Web Page</title></head><body><h2>Format this line of text.</h2></body></html>

Listing 1.16. Consecutive spaces, line returns, and tabs are ignored.

However, it is easier to compose and edit the document and to understand the layout of the page by spacing its tags and text in a more readable format. Take great care in alignment and indention of code so that it visually represents the structure of content that displays in the browser. Sloppy code inevitably leads to errors. You should choose a monospace font such as Courier New for displaying your code in Notepad++. The monospace font will better able you to align lines of text in the editor.

HTML coding is an exacting art and science. Accuracy of coding is paramount and you need to work with close to 100% accuracy. The browser doesn't know what you "wish" to do; it can only do what you explicitly tell it. At first, coding will be tedious and time consuming. As you practice and gain experience, you should be able to type and edit HTML code with not much more difficulty than straight text.

Saving an HTML Document

Once you have completed coding the HTML document, you need to save it so that it can be retrieved and displayed inside a browser. The document can be saved to your desktop, to a removable storage drive, or in a folder on your hard drive.

You can choose any file name you wish for your Web document, although you should not include any blank spaces or special characters in the name. You also need to make sure that you save the document with the .html or .htm file extension. This extension identifies the document as a Web page and it is needed for the browser to recognize it as such.

Save As Dialog

Figure 1-17.

Saving an HTML document under Notepad++


Displaying an HTML Document

The saved HTML document with the .html extension is now ready to be viewed in your browser. You can open the document directly in the browser by double-clicking its icon, or you can open your browser and use the File menu to navigate to the correct drive, folder, and document. When the document is loaded into the browser, the address appearing in the Address box of your browser indicates this path to the document.

Document Editing and Display

When composing a lengthy Web page, it is not necessary to code the entire page at one time. You can code a few lines, save the document, view the page in the browser, and then return to composing the next section of code. In other words, you can switch back and forth between the editor and the browser as you put together your Web page. Just start with the document template described earlier so that you are editing a complete, valid Web document.

To facilitate this sort of page development, leave both your editor and browser open on the desktop so that they are accessible in the Task Bar. Then you can making changes or corrections to your document and switch immediately to your browser to refresh and view the updated page.

The following illustration shows the computer screen with both Notepad and the browser opened at the same time on the desktop. It is now a simple matter of clicking in the Notepad window to edit the Web document. After saving the changes, click in the browser window and click the Refresh button to reload the changed document. Now switch back to Notepad to continue with page development.

Development Environment for HTML

Figure 1-18.

Web page editor and browser open on the desktop.


TOP | NEXT: Creating Your First Web Page