HTML and HTML Forms
It would be difficult to describe early websites as web applications. Instead, the first generation
of websites often looked more like brochures, consisting mostly of fixed HTML pages that
needed to be updated by hand.
A basic HTML page is a little like a word-processing document—it contains formatted
content that can be displayed on your computer, but it doesn’t actually do anything. The
3
C H A P T E R 1
following example shows HTML at its simplest, with a document that contains a heading and
single line of text:
<html>
<head>
<title>Sample Web Page</title>
</head>
<body>
<h1>Sample Web Page Heading</h1>
<p>This is a sample web page.</p>
</body>
</html>
An HTML document has two types of content: the text and the elements (or tags) that tell
the browser how to format it. The elements are easily recognizable, because they are designated
with angled brackets (< >). HTML defines elements for different levels of headings,
paragraphs, hyperlinks, italic and bold formatting, horizontal lines, and so on. For example,
<h1>Some Text</h1> uses the <h1> element. This element tells the browser to display Some
Text in the Heading 1 style, which uses a large, bold font. Similarly, <p>This is a sample web
page.</p> creates a paragraph with one line of text. The <head> element groups the header
information together, including the title that appears in the browser window, while the
<body> element groups together the actual document content that’s displayed in the browser
window.
Figure 1-1 shows this simple HTML page in a browser. Right now, this is just a fixed file
(named sample_web_page_heading.htm) that contains HTML content. It has no interactivity,
doesn’t require a web server, and certainly can’t be considered a web application.
Figure 1-1. Ordinary HTML: the “brochure” site
4 CHAPTER 1 n THE .NET FRAMEWORK
nTip You don’t need to master HTML to program ASP.NET web pages, although it’s often useful. For a quick
introduction to HTML, refer to one of the excellent HTML tutorials on the Internet, such as www.w3schools.
com/html. You’ll also get a mini-introduction in Chapter 4.
HTML 2.0 introduced the first seed of web programming with a technology called HTML
forms. HTML forms expand HTML so that it includes not only formatting tags but also tags for
graphical widgets, or controls. These controls include common ingredients such as drop-down
lists, text boxes, and buttons. Here’s a sample web page created with HTML form controls:
<html>
<head>
<title>Sample Web Page</title>
</head>
<body>
<form>
<input type="checkbox" />
This is choice #1<br />
<input type="checkbox" />
This is choice #2<br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
In an HTML form, all controls are placed between the <form> and </form> tags. The
preceding example includes two check boxes (represented by the <input type="checkbox" />
element) and a button (represented by the <input type="submit" /> element). The <br /> element
adds a line break in between lines. In a browser, this page looks like Figure 1-2.
of websites often looked more like brochures, consisting mostly of fixed HTML pages that
needed to be updated by hand.
A basic HTML page is a little like a word-processing document—it contains formatted
content that can be displayed on your computer, but it doesn’t actually do anything. The
3
C H A P T E R 1
following example shows HTML at its simplest, with a document that contains a heading and
single line of text:
<html>
<head>
<title>Sample Web Page</title>
</head>
<body>
<h1>Sample Web Page Heading</h1>
<p>This is a sample web page.</p>
</body>
</html>
An HTML document has two types of content: the text and the elements (or tags) that tell
the browser how to format it. The elements are easily recognizable, because they are designated
with angled brackets (< >). HTML defines elements for different levels of headings,
paragraphs, hyperlinks, italic and bold formatting, horizontal lines, and so on. For example,
<h1>Some Text</h1> uses the <h1> element. This element tells the browser to display Some
Text in the Heading 1 style, which uses a large, bold font. Similarly, <p>This is a sample web
page.</p> creates a paragraph with one line of text. The <head> element groups the header
information together, including the title that appears in the browser window, while the
<body> element groups together the actual document content that’s displayed in the browser
window.
Figure 1-1 shows this simple HTML page in a browser. Right now, this is just a fixed file
(named sample_web_page_heading.htm) that contains HTML content. It has no interactivity,
doesn’t require a web server, and certainly can’t be considered a web application.
Figure 1-1. Ordinary HTML: the “brochure” site
4 CHAPTER 1 n THE .NET FRAMEWORK
nTip You don’t need to master HTML to program ASP.NET web pages, although it’s often useful. For a quick
introduction to HTML, refer to one of the excellent HTML tutorials on the Internet, such as www.w3schools.
com/html. You’ll also get a mini-introduction in Chapter 4.
HTML 2.0 introduced the first seed of web programming with a technology called HTML
forms. HTML forms expand HTML so that it includes not only formatting tags but also tags for
graphical widgets, or controls. These controls include common ingredients such as drop-down
lists, text boxes, and buttons. Here’s a sample web page created with HTML form controls:
<html>
<head>
<title>Sample Web Page</title>
</head>
<body>
<form>
<input type="checkbox" />
This is choice #1<br />
<input type="checkbox" />
This is choice #2<br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
In an HTML form, all controls are placed between the <form> and </form> tags. The
preceding example includes two check boxes (represented by the <input type="checkbox" />
element) and a button (represented by the <input type="submit" /> element). The <br /> element
adds a line break in between lines. In a browser, this page looks like Figure 1-2.
HTML forms allow web application developers to design standard input pages. When the
user clicks the Submit button on the page shown in Figure 1-2, all the data in the input controls
(in this case, the two check boxes) is patched together into one long string of text and
sent to the web server. On the server side, a custom application receives and processes the
data.
Amazingly enough, the controls that were created for HTML forms more than ten years
ago are still the basic foundation that you’ll use to build dynamic ASP.NET pages! The difference
is the type of application that runs on the server side. In the past, when the user clicked a
button on a form page, the information might have been e-mailed to a set account or sent to
an application on the server that used the challenging Common Gateway Interface (CGI) standard.
Today, you’ll work with the much more capable and elegant ASP.NET platform.
user clicks the Submit button on the page shown in Figure 1-2, all the data in the input controls
(in this case, the two check boxes) is patched together into one long string of text and
sent to the web server. On the server side, a custom application receives and processes the
data.
Amazingly enough, the controls that were created for HTML forms more than ten years
ago are still the basic foundation that you’ll use to build dynamic ASP.NET pages! The difference
is the type of application that runs on the server side. In the past, when the user clicked a
button on a form page, the information might have been e-mailed to a set account or sent to
an application on the server that used the challenging Common Gateway Interface (CGI) standard.
Today, you’ll work with the much more capable and elegant ASP.NET platform.
No comments:
Post a Comment