Using the Web Page Designer | Microsoft Visual Basic 2005 Step by Step (Step by Step (Microsoft))

Using the Web Page Designer

Unlike a Windows form, a Web page can have text added directly to it when it is in the Web Page Designer. In Source mode, the text appears within HTML tags somewhat like the Visual Studio Code Editor. In Design mode, the text appears in top-to-bottom fashion as it does in a word processor such as Microsoft Word, and you'll see no HTML (which is not necessary for simple Web sites). In this section, you'll type text in Design mode, edit it, and then make formatting changes by using buttons on the Formatting toolbar. Manipulating text in this way is usually much faster than adding a Label control to the Web page to contain the text. You'll practice entering the text for your car loan calculator in the following exercise.

Add text in Design mode

Click the Design tab, if it is not currently selected, to view the Web Page Designer in Design mode.

A blinking I-beam appears at the top of the Web page.
Type Car Loan Calculator, and then press Enter.

Visual Studio displays the title of your Web page exactly as it will appear when you open the Web site in your browser.
Type the following sentence below the title:

Enter the required information and click Calculate!

Now you'll use the Formatting toolbar to format the title with bold formatting and a larger point size.
Right-click the Standard toolbar in Visual Web Developer to display the list of toolbars available in the IDE.
Click the Formatting toolbar.

The Formatting toolbar now appears in the IDE. Notice that it contains a few features not usually found on a text formatting toolbar.
Select the text “Car Loan Calculator”.

Before you can format text in Visual Web Developer, you must select it.
Click the Bold button on the Formatting toolbar, and set the font size to 24 point.

Your screen looks like this:

Now you'll examine the HTML code for the text and formatting you entered.

View the HTML for a Web page

Click the Source tab at the bottom of the Designer.

The Source tab displays the actual HTML code for your Web page. To see more of the code, you might want to temporarily close a few programming tools. The HTML code looks like this:

A Web page is made up of file and document information, formatting codes called HTML tags that are enclosed in angle brackets, and the text and objects to be displayed by your Web page. This Web page is still rather short—it contains a header with information about the language you selected when creating the Web application, the name of any code-behind file, and any inherited forms.

HTML tags typically appear in pairs so that you can see clearly where a section begins and ends. For example, the <body> tag identifies the beginning of the document; and the </body> tag identifies the end. Notice that the “Car Loan Calculator” text appears within a line of HTML that formats the text as strong (bold) with a font size of 24 points. Below this text, the second line of text you entered is displayed.

TIP
Remember that the Source tab is an actual editor, so you can change the text you entered by using standard text editing techniques. If you know something about HTML, you can add additional formatting tags and content as well.
Click the Design tab to display your Web page in Design mode, and open the Toolbox if it is not visible.