HTML Essentials for Web Programming

Most HTML elements are made up of four parts, the start tag, the attributes, the content, and the end tag.

<H1 align=center>Hello</H1>

Elements can contain other elements

<H1 align=center><b>Hello</b></H1>

Other Points:

• Not all HTML elements have attributes and/or contents
• HTML tags aren't case sensitive
• Web browsers ignore white space. &nbsp; should be used when a space is required.
• HTML comments use the format <!-- HTML Comment -->

WORKING WITH HTML IN VISUAL STUDIO

If you click on the HTML tab in VS.NET, you can see the quasi HTML generated by the application.

All of the tags generated by VS.NET are lowercase so they conform to the new XHTML Version 1.0 standards. However, VS.NET uses XHTML Version 1.0 transitional which means that you could use uppercase tags. However, since future versions will likely completely follow the standards, this isn't a great idea. XHTML Transitional includes certain HTML elements that are likely going to be phased out in the future. If you include these elements in your source code, you'll receive an error or warning message.

Opening tags without a corresponding end tag have a slash before the closing bracket. This is now required, even with 1.0 transitional
<BR />

Different colors are used to identify various pieces of information:

• element names are in maroon
• attribute names are in red
• attribute values are displayed in blue

Syntax errors are easy to spot since they are underlined with a wavy red line.

VS.NET comes with a statement completion feature that uses intellisense to help you write HTML. Once you type the opening bracket for a tag, intellisense appears to let you choose which tag you want to add. After you type a space a list of attributes appear. Select the attribute from the list and hit the tab key; then type the equal sign and enter the attribute value.  If you have multiple attributes, it doesn't matter which order they appear. You add multiple attributes by typing a comma and a space to redisplay the list. After all of the attributes have been added, type the closing tag bracket. The end tag, if necessary, will then be added automatically.

SOURCE view and design view are directly related. Any changes made in design view affect SOURCE view and vice versa. You can toggle back and forth between the views to see the results of your changes. VS.NET automatically removes any excess whitespace you may have added while in SOURCE view. Changes can also be made in a Web control's property window available in design view. Changes can also be made to element attributes inside of the properties window.

BASIC STRUCTURE OF AN HTML DOCUMENT

VS.NET will generate the entire HTML structure based upon the controls you drag and drop as well as the properties you set while in design mode. VS.NET adds a page directive and a document type element before the opening HTML tag.

The page directive contains the information ASP.NET needs to process the Web form. This includes the location of the code behind file and the partial class name within the code behind file.

<%@ Page Language="vb" AutoEventWireup="False" CodeFile="Order.aspx.vb" Inherits="Order"%>

• <%@ ... %> form a directive block
• The directive is not part of the HTML and the server doesn't send it to the browser.
• Directive blocks are processed by ASP.NET when the page is compiled.
• The language attribute indicates the programming language
• AutoEventWireUp is set to false because setting it to true causes events to automatically be wired to handlers by their name. Leaving it at false allows you to use the HANDLES keyword and change event names. If you set it to true then you can still fire page events automatically. However, they must be named exactly the way VS.NET expects. Page_Init and Page_Load are two examples.
• CodeFile and Inherits attributes link the .aspx page with the code behind page.
• One final attribute you can use is Trace. This displays information about each event that's fired when the page is being generated.

The Doctype declaration contains information the browser can use to help it display the page.

• Used by a browser to determine which version of HTML the document uses
• VS.NET specifies XHTML version 1.0 transitional.
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1-transitional.dtd">

The HTML root element contains a HEAD element and a BODY element. T

he HEAD element contains information that is not displayed in the browser window such as meta tags, JavaScript and the document title that appears in the title bar. If you don't change the document title, it defaults to the name of the class that defines the page. You can change the title directly from the HTML or from the properties window.

A Web form typically encapsulates all of its content inside of a single DIV tag. All of the other elements are CHILD elements of the DIV tag. The DIV tag appears inside of the FORM tag so the FORM tag is its PARENT.

Metadata is additional information about the document. The metadata automatically included by VS.NET is tailored to browsers, search engines, and other programs that need information about your page. The name attribute value indicates the purpose of the meta tag.  See page 193 in the text.

You can add your own metadata tags. Most likely you'll supply keywords or descriptions that increase your search engine ranking and add a human readable description along with your URL:

The BODY element contains all of the page content.

There are basic HTML formatting tags:

• Headings H1 - H6. H1 will display its contents quite large, H6 quite small
• P begins a new paragraph (Multiple P tags do nothing)
• BR forces a line break (Multiple BR tags add additional line breaks)
• B makes text bold
• I italices text
• U underlines text (Don't use!)

TABLES

Common TABLE attributes:

• Border - length of table border in pixels. 0=no border
• cellspacing - The number of pixels between cells
• cellpadding - the number of pixels between the walls of the cells and the content
• width - The width of the table. The table will be wider if contents can't be fit.
• height - Works like width. Generally not used.
• bgColor - Table background color. Can be a named color or a hexadecimal value.

Common TR attributes:

• valign - The vertical alignment of the row content. Can be Top, bottom, or middle
• bgColor - Row background color. Can be a named color or a hexadecimal value.

Common TD attributes:

• align - horizontal cell alignment. Can be left, right or center
• colspan - used if a cell is going to span more than one column
• rowspan - used if a cell is going to span more than one row.
• height - the height of the cell in pixels. Generally not used.
• width - the width of the cell in pixels. The cell will be wider if the contents can't fit.
• valign - The vertical alignment of the cell content. Can be Top, bottom, or middle
• bgColor - cell background color. Can be a named color or a hexadecimal value.

You can use the VS.NET colorpicker to choose colors.

TD attributes override TR attributes which override TABLE attributes.

TABLES FOR CONTROLLING LAYOUT

See pages 180-186

USING VS.NET TO CREATE TABLES

You can use the Insert Table dialog box to add a new table (See page 205). The dialog box lets you choose:

• The number of rows and columns in the table
• How wide the table should be
• The width unit of measurement (pixels or percentage)
• The background color (Can be selected using the colorpicker tool)
• The background image (Can be selected from hard drive)
• The border size
• The table alignment
• The border color
• The highlight color
• The shadow color
• The cell padding
• The cell spacing

Your entries help generate the TABLE tag and its associated TR and TD tags.

After the table appears you can adjust its size and shape by dragging its borders. You can also set properties for the entire table or for just a single cell in the properties window.

You can use commands in the table menu to work with an existing table. Table-->insert allows you to add rows and columns to your table. Table-->delete allows you to delete rows and columns from your table. Table-->merge cells allows you to merge multiple selected cells into one. Table-->Select selects the entire table. If an item is grayed out, it's because your current highlighted table portion prevents that selection from being made.

You can select a row, by placing the mouse pointer to the left of the row. Once it turns into a black arrow, click the left mouse button. You select a column by placing the mouse pointer above the row until it turns into a black arrow. Then you click the left mouse button. To select a cell, place the mouse pointer at the left side of the cell until it turns into a black arrow. Then you click the left mouse button. To select the entire table, click on its border.

The authors usually create the basic HTML table using the Insert Table dialog box. Then they go into HTML view and tweak it themselves. Otherwise it doesn't usually look the way they want it to. This is why it's important to understand the HTML Table tags/attributes.

HOW TO USE STYLES

The current version of HTML allows you to use Cascading Style Sheets (CSS) to control the layout/design of your HTML documents. CSS is more powerful than HTML formatting tags. In addition, CSS can be external, completely separate from the HTML tags that dictate document content.

We're going to give the following bland quasi HTML document some style:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>
	<HEAD>
		<title>WebForm1</title>
		</HEAD>
	<body>
		<form id="Form1" method="post" runat="server">
			<h1>Hello CSS World</h1>
			<asp:Label id="csslabel" runat="server" Width="146px">Label</asp:Label>
			<P>This is a paragraph!</P>
			<P>
			<asp:TextBox id="csstextbox" runat="server">Change my text</asp:TextBox></P>
			<P>
			<asp:Button id="cssbutton" runat="server" Text="I'm a CSS button"></asp:Button></P>
		</form>
	</body>
</HTML>

CSS can be inline, listed at the top of a document or stored in an external file. We'll focus on inline and external style definitions. External definitions are more useful since they can be applied to a variety of documents.

HOW TO USE INLINE STYLES

To use inline styles, include a Style attribute in the appropriate element's tag. Some common properties include:

Here is an abridged version of our document with styles:

<form id="Form1" method="post" runat="server">
	<h1 style="FONT-WEIGHT: bold; FONT-SIZE: 22pt; COLOR: aqua; BACKGROUND-COLOR: orange; 
        TEXT-ALIGN: center">Hello 
		CSS World</h1>
	<asp:Label id="csslabel" runat="server" Width="146px">Label</asp:Label>
	<P style="FONT-WEIGHT: 900; FONT-FAMILY: Tahoma, Verdana, Arial, Sans-Serif">This 
		is a paragraph!</P>
	<P>
		<asp:TextBox id="csstextbox" runat="server">Change my text</asp:TextBox></P>
	<P>
		<asp:Button id="cssbutton" runat="server" Text="I'm a CSS button"></asp:Button></P>
</form>

And its rendering:

It's worth noting that styles applied to parents trickle down to their children (nested tags)

USING THE SPAN ELEMENT TO APPLY STYLES

The span element can be used to apply styles to a portion of an element's text.

<span style="FONT-SIZE: 28pt; FONT-FAMILY: Helvetica">is</span> a paragraph!</P>

This is a paragraph!

USING THE STYLE BUILDER

The Style Builder built into VS.NET can be used to avoid having to hard code styles.

The first way to access the style builder is to write click on the control and choose "style"

The style builder dialog box opens:

The font styles were selected using the font picker. The dialog box opens by clicking the ellipse at the top right edge of the style builder:

The following CSS is rendered:

<asp:Label id="csslabel" runat="server" Width="146px" style="font-size: 16pt; color: blue; font-style: normal;
 font-family: 'Baskerville Old Face', 'Bauhaus 93'; font-variant: small-caps">Label</asp:Label>

You can also access the style builder by choosing format-->Style.

USING AN EXTERNAL STYLE SHEET

To add an external style sheet to a Web site project: 

1) In Solution Explorer, right-click the name of the Web site project to which you want to add a style sheet, and then click Add New Item.

2) Under Visual Studio installed templates, click Style Sheet.

3) In the Name box, type a name for the external style sheet and then click Add. 

A page needs a link element in the document head to connect it to the stylesheet. VS.NET won't do this for you automatically so you need to create it on your own by either typing in the following code in the HEAD of your document or by dragging the stylesheet file from the solution explorer to the form window..

<link href="styles.css" rel="stylesheet" type="text/css" />

You can right click inside of the style sheet and choose "" to add a style