| Under the covers, the Web uses the Hypertext Markup Language (HTML) to send information to Web browsers. This common markup language can be used by any browser, on any computer. When you request a response from a Web page, you're getting back an HTML stream, consisting of text "marked up" with HTML elements as tags. If you're going to generate your own Web pages, you need to have at least a basic understanding of HTML and how it renders in the browser. TIP Yes, you can get by without really understanding anything about HTML, and our guess is that most readers already have a reasonable grasp of HTML. However, a basic knowledge of HTML can be important, because ASP.NET generates HTML both at design time and at runtime, and your development experience will go more smoothly if you're comfortable with HTML.
HTML has only a handful of basic tags that you need to learn in order to create just about any Web site you want. Most of these tags are very simple to use. The following subsections introduce some of the more common tags you will encounter. HTML Elements HTML provides a huge list of elements as well as attributes that describe those elements. We're going to cover a tiny portion of the available HTML functionality here, mostly so you'll recognize the HTML elements used throughout the book. The intent here is definitely not to provide an HTML primer, but just to make sure we're all starting at the same place. For more information on HTML, consult the appropriate reference materials on that topic. TIP HTML isn't case sensitive. You'll note in the examples that the various elements are sometimes in uppercase letters, and other times in lowercase letters. You'll see HTML formatted both ways. Although HTML accepts mixed-case elements (for example, <LI></li>), other similar markup languages (such as XML) do not. Don't mix cases like this, or sooner or later it will bite you back.
Hyperlink The hyperlink provides the main form of navigation on a typical Web page. A hyperlink typically appears as a highlighted word or group of words. Clicking the hyperlink makes a request to a particular Web server, which responds with the requested page. To insert a hyperlink, you use text such as this: <a href="Page to load">Text to display</a> Note the matching begin and end tags (<a> and </a>) and the attribute (href="Page to load") that's included within the opening tag. Any element can contain one or more attributes in this case, there's only the one href attribute. The following example, Main.htm, contains a number of hyperlinks. You'll find this example in the InternetBasics folder, and you can either load it into a text editor to see its source, shown in Listing 5.1, or double-click to load it directly into a browser. Listing 5.1 The Contents of Main.htm <HTML> <BODY> <H3>Hyperlink</H3> <a href="UnorderedList.htm">Unordered List</a><br> <a href="OrderedList.htm">Ordered List</a><br> <p> <a href="Select.htm">Select</a><br> <a href="Table.htm">Table</a><br> <a href="Input.htm">Input</a><br> </p> </BODY> </HTML> Line Break HTML output generally flows from left to right, top to bottom through a page (this is generally called flow layout). If you want to insert a line break yourself, you can insert the <br> tag into the document. Unlike most HTML tags, the <br> tag doesn't require an ending tag. You can see the use of this tag in the hyperlink example earlier. NOTE In order to insert a paragraph break, add a <p> element to your document. The sample page, Main.htm, uses a <p> element to break the information into paragraph groupings.
Bulleted List To create a bulleted list of items, use the <UL> tag. In between the <UL> and </UL> tags, use the <LI> and </LI> tags to create each individual list item. The <LI> tag automatically adds a line break after each item. To try out this sample page (see Listing 5.2), which includes an unordered list, locate UnorderedList.htm in the InternetBasics folder. Listing 5.2 Contents of UnorderedList.htm <HTML> <BODY> <H3>Unordered list</H3> <UL> <LI>Arizona</LI> <LI>California</LI> <LI>Nevada</LI> </UL> </BODY> </HTML> Numbered List To create a numbered list of items, use the <OL> tag. In between the <OL> and </OL> tags, use the <LI> and </LI> tags to create each individual list item. The <LI> tag automatically adds a line break after each item. Listing 5.3 includes an example of this technique. To try out this sample page, which includes an ordered list, locate OrderedList.htm in the InternetBasics folder: Listing 5.3 Contents of OrderedList.htm <HTML> <BODY> <H3>Ordered list</H3> <OL> <LI>Wash the car</LI> <LI>Feed the cats</LI> <LI>Take a nap</LI> </OL> </BODY> </HTML> Combo and List Boxes To create a drop-down list or list box containing list items, use the <SELECT> tag. The element supports a size attribute that allows you to control the behavior of the control. If you set the size attribute to 1, you'll get a drop-down (combo box) control. If you set it to a larger value, you'll get a list box control. Each list item in a SELECT element can contain both text, which displays in the control itself, and a text value associated with that list item. Listing 5.4 shows an example of this. When you're programmatically interacting with these elements, later in the book, you'll use the values. To try out this page, load Select.htm in the InternetBasics folder. Listing 5.4 Contents of Select.htm <HTML> <BODY> <H3>Select</H3> <SELECT size=1> <OPTION value="AZ">Arizona</OPTION> <OPTION value="CA">California</OPTION> <OPTION value="NV">Nevada</OPTION> <OPTION value="TX">Texas</OPTION> </SELECT> <SELECT size=4> <OPTION value="AZ">Arizona</OPTION> <OPTION value="CA">California</OPTION> <OPTION value="NV">Nevada</OPTION> <OPTION value="TX">Texas</OPTION> </SELECT> </BODY> </HTML> Table If you wish to create a grid containing items, use the <TABLE> tag. Within the <TABLE> and </TABLE> tags, use a combination of <TR>, <TH>, and <TD> tags to create each row, header, and detail cell for the table. Listing 5.5 shows an example of this. The following page, Table.htm, demonstrates the use of a table, with rows, cells, and headers: Listing 5.5 Contents of Table.htm <HTML> <BODY> <H3>Table</H3> <TABLE Border=1> <TR> <TH>Abbr</TH> <TH>State</TH> </TR> <TR> <TD>AZ</TD> <TD>Arizona</TD> </TR> <TR> <TD>CA</TD> <TD>California</TD> </TR> <TR> <TD>NV</TD> <TD>Nevada</TD> </TR> </TABLE> </BODY> </HTML> Images To display an image within a Web page, use the <IMG> tag. You must supply the src="/books/3/93/1/html/2/FileName" attribute in order to specify the name of the file that contains the picture you wish to display. Table 5.1 contains a list of the different types of files Internet Explorer 5 and later can display. Table 5.1. Image Types Supported by Internet Explorer | File Extension | Description | | .avi | Audio/Visual Interleaved (AVI) | | .bmp | Windows Bitmap (BMP) | | .emf | Windows Enhanced Metafile (EMF) | | .gif | Graphics Interchange Format (GIF) | | .jpg, .jpeg | Joint Photographic Experts Group (JPEG) | | .mov | Apple QuickTime Movie (MOV) | | .mpg, .mpeg | Motion Picture Experts Group (MPEG) | | .png | Portable Network Graphics (PNG) | | .wmf | Windows Metafile (WMF) | | .xbm | X Bitmap (XBM) | NOTE Your browser might not support all the different image types listed in Table 5.1.
To try out using an image, load the following page, Image.htm: <HTML> <BODY> <H3>Pictures</H3> <img src="/books/3/93/1/html/2/Northwind.gif"> </BODY> </HTML> Input Types You'll need some way to allow users to input data onto your page. You can do this using the <INPUT> tag. You can add several attributes to this tag to control the type of input control you get on the page, as listed in Table 5.2. Table 5.2. These Attributes Control the Behavior of Elements Created Using the SELECT Tag | Type | Description | | CheckBox | Displays a box that the user can check or uncheck. | | File | Displays a control that will allow the user to browse for a file on the local computer. | | Hidden | A value that does not show up on the user's screen but will be submitted when the form is posted to the server. | | Image | Displays an image on the page. | | Password | Displays an asterisk for each character the user types in. | | Radio | Displays a mutually exclusive radio button. Use this in combination with other radio input types to create a list that the user can select one and only one value from. | | Reset | Resets all input types to their default states. | | Submit | Posts the form with all input values to the server. | | Text | An input area in which the user can enter text. | | TextArea | A multiline input area in which the user can enter text. | Load Input.htm to try out the sample code shown in Listing 5.6. Listing 5.6 Contents of Input.htm <HTML> <BODY> <H3>Input</H3> <form action="Process.asp" method="post"> <table border=0> <tr> <td>First Name</td> <td><input type="text" value="John" maxlength="20" id=txtFirst></td> </tr> <tr> <td>Last</td> <td><input type="text" value="Smith" maxlength="20" id=txtLast></td> </tr> <tr> <td><input name="Gender" type="radio" value="Female">Female</input></td> <td><input name="Gender" type="radio" value="Male">Male</input></td> </tr> </table> <input type="Submit" Value="Submit"> </form> </BODY> </HTML> | 
