How it all Works

Before we dive into the meat of creating pages, a little explanation is required. It's important that you know how the whole process of the Web works, from the user requesting a page, through what happens in ASP.NET, to what the user gets back. It's fairly simple:

• The user requests a page. This can either be from typing it in the address bar of a browser, or by clicking a link on a page.

• The request is sent to the web server hosting that page.

• The web server does one of two things:

• For a pure HTML page it sends the page straight back to the user.

• For dynamic pages (such as ASP.NET), the server processes the page. This means that ASP.NET will examine the page and see if there's anything it needs to do. This is defined as server-side processing, as it's happening on the server. The end result of the processing is HTML, which is sent back to the user.

• The user receives the HTML page, and the browser examines the HTML and shows the page with all of the formatting – this is called rendering.

The important point is that HTML is rendered by the browser, on the user's machine. All the server sends back is a stream of text.

What is HTML?

The basis of all web documents is HTML, the HyperText Markup Language. HTML is a way of annotating text to define the look and feel of a page. For example, consider the following:

 <h1>Some Poetry</h1> <font face="Verdana" size="5"> Tiger, Tiger, <b>burning</b> bright <br /> It looks like your tail's alight </font> 

The HTML is the bits in angle brackets, < and >. These are called HTML tags, and they specify how the text within the elements formed by pairs of tags should be shown. The ones above are:

• •<h1> </h1> – The text within this element is a heading. There are 6 standard headings levels, ranging from h1 to h6.

• •<font> </font> – Defines what font should be used for the enclosed text.

• •<b> </b> – The text should be shown in bold.

• •<br /> – Output a new line.

There are two types of HTML elements – those that have start and end tags and enclose text (like the heading and bold ones), and those that have a single tag (like the new line). The new line one illustrates an interesting point about HTML – it ignores repeated whitespace (space and tab characters) and new lines in the text. You have to specifically add these if required.

HTML Elements can also have attributes, which these specify additional characteristics of the element. For example, in the font tag above we specified a specific font and size to use. The attributes consist of a name and value (often called a name-value pair). Here, we said that the browser should use the font called Verdana (in HTML the font name is called its face), and a size of 5.

When creating pages using the Web Matrix designer, the Toolbox has a tab called HTML Elements. Dragging these onto a page automatically creates HTML elements for you, and you can use the Properties window to set the attributes.

Web Controls

One of the other tabs in the Toolbox is the Web Controls tab, which contains similar elements to the HTML Elements tab. You can drag these onto pages in just the same way as HTML elements, so what's the difference? Underneath, these web controls actually produce HTML, so in many cases, there seems to be little difference, but it's actually a little more important than that.

Web controls provide a more consistent and easily understood view of what you want on a page. For example, on the HTML Elements tab what are Div, Span, Anchor? What's the difference between TextBox and TextArea? If you don't know HTML this can be confusing. Web controls have been designed to avoid this confusion. For example, the TextBox and TextArea are essentially the same, the former being for single lines of text, and the latter being for multiple lines. Web controls just have a single control called TextBox, and you can set a property to define how many rows it allows.

Web controls are also server based controls, which means that they are designed to be processed on the server.

Processing on the Server

So how does ASP.NET know what parts of a page it can process and what is HTML? There are two ways, although for the most part when using Web Matrix you're unaware of them. That's because Web Matrix lets you use the page designer, so the underlying code is hidden. As a result of this, you won't need to add these yourself, but it's worth knowing what they are so that when you use the HTML view you can understand what's what.

The first of these methods is by the addition of a specific attribute to an element. This is the runat attribute, which has a value of server. For example, consider the following HTML tag:

 <input type="text"> 

The input element, unsurprisingly, allows input by the user; it shows up as a textbox in the browser. The trouble with this though, is that it is HTML, and therefore rendered by the browser. How then, can we access the contents of this input element when the server is processing the page? We can't unless we do this:

 <input type="text" runat="server"> 

Now we've added the runat="server" attribute, the HTML element becomes a hybrid. It's still handled by the browser in the same way, but ASP.NET can also access it. When processed by ASP.NET the runat="server" attribute is stripped off, so the browser only sees the HTML parts.

For web controls, what you see in the HTML view doesn't look like HTML. For example, to allow text entry you use:

 <asp:TextBox runat="server"></asp:TextBox> 

This doesn't look like HTML, but because it's a server control, when ASP.NET processes the page, the TextBox actually outputs HTML. In fact, it outputs the following:

 <input name="_ctl1" type="text" /> 

This is a standard HTML element that the browser knows how to display.

The second way of specifying server-side processing is to use the <% and %> tags. These are specific to ASP.NET and anything within them is handled by ASP.NET, and is never sent back to the browser. We won't be using these much in this book, but it's worth knowing about them so you don't wonder what they are if you see them.

Should I use HTML or Server Controls?

When designing web pages, you have to make the decision as to whether you are going to use HTML elements or server controls. It seems a confusing choice, because they both provide much the same thing. In actuality, the choice is simple – only use server controls when you need to access the control from ASP.NET code.

For example, when just displaying text you don't even need HTML elements – you can just type the text straight in. You only need to add HTML when you want formatting. If you want to display text from ASP.NET code, then you need a server control, in this case, you could use the Label from the web controls. This is a server control that allows text display.

For text entry and buttons, you'll want to use server controls (TextBox and Button), so that you can use ASP.NET code to process the text. Using the HTML equivalents of these will mean you only get HTML, and they won't be available for use in your ASP.NET pages.

Important

For the remainder of the book we'll be using web controls unless
otherwise noted.

Page Layout

Before we can talk about layout you have to understand how what you type on a page in design view relates to what you see in your browser. Web pages work by displaying what you put on them, in the order it appears on the page. This is much like the way we read, where what you put on a page just flows from top to bottom, and left to right. However, there are certain HTML elements that don't flow in this way, and so, they cause the layout of a page to be disrupted. Another problem when laying out pages is lining controls up, such as getting textboxes to align vertically. For example, consider the following:

This is standard information to ask the user to supply, but it looks very untidy as the controls aren't lined up. No matter how well your website works, and how flash the design, it will never look professional if the controls are all jumbled like this.

Let's look at a way around this:

Try It Out—Using HTML Tables for Layout

1. Create a new ASP.NET Page called TableLayout.aspx.

2. From the menu bar, select HTML, then Insert Table... to insert a table 5 rows deep and 2 columns wide. Don't use the Table element from the HTML Elements tab, as this doesn't offer you the chance to define the number of columns and rows.

3. Into the rows for the first column, type the text from the above form: Name, Address, and so on. Don't worry about the table resizing itself as it is just allowing room for the text you type. Your form should now look like the following:

   

4. For the second column, drag TextBox controls from the Web Controls toolbox into the first three rows, and DropDownList controls into the second two rows.

5. For the TextBox in the Address row, change the TextMode property to MultiLine, and the Rows property to 5:

   

6. Save the file, and hit F5 to run the page:

   

   Already, this looks much better as the text entry fields line up neatly. One minor issue is that the label for Address is centered in the middle of the text – it would look better if it were at the top of the text area.

7. In Design view, click on the cell that contains the Address: text. From the Properties window change the vAlign property to Top. When you run the page again, the result of this change looks like this:

   

How It Works

There's not a lot to explain here, since using an HTML table is similar to the way you'd use cells in a spreadsheet, or a ruler and graph paper to line things up. By default, the HTML table you've inserted doesn't show up because the border isn't shown, so the user doesn't see how the alignment is done.

For the Address: text, we changed the vAlign property of the table cell to Top, which indicates that we want any text displayed in the cell to be aligned to the top of the cell. This is only necessary because the cell spans more than one line, and by default, the alignment of text is to the middle of the cell.