HTML Basics
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梚n 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="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="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 id="RadioButton1" name="Gender"
type="radio" value="Female">Female</input></td>
<td><input id="RadioButton2" name="Gender"
type="radio" value="Male">Male</input></td>
</tr>
</table>
<input type="Submit" Value="Submit">
</form>
</BODY>
</HTML>
