eBook
Available on Compatible NOOK devices, the free NOOK App and in My Digital Library.
Related collections and offers
Overview
Product Details
| ISBN-13: | 9781583477267 |
|---|---|
| Publisher: | Mc Press |
| Publication date: | 05/01/2012 |
| Sold by: | Barnes & Noble |
| Format: | eBook |
| Pages: | 234 |
| File size: | 6 MB |
About the Author
Read an Excerpt
Active Server Pages Primer
The iSeries Definitive Guide to ASP
By Mike Faust
MC Press
Copyright © 2003 MC Press Online, LPAll rights reserved.
ISBN: 978-1-58347-726-7
CHAPTER 1
Creating HTML Web Pages
HTML (Hypertext Markup Language) is the backbone of all Web pages. Even with the introduction of newer technologies like Active Server Pages, Java, and Java Server Pages, HTML is still at the heart of every Web page on the Internet. For that reason, your exploration into the world of Active Server Pages starts with a little primer on using HTML tags to create Web pages. If you're already familiar with HTML, you can skip to chapter 2 to dive into Active Server Pages.
HTML Document Structure
HTML tags are the key components of all Web pages. Tags define all of the details of your page — everything from its background color, down to the font used for a specific section of text. HTML tags are identified by enclosing them between less-than and greater-than signs, as shown here:
<tagname>
Most tags require a tag-closing identifier, which is similar to using an ENDIF statement to identify the end of an IFXX group in RPG. Like an IFXX statement, HTML tags are often nested within one another. For example, the following tags identify an HTML table that has just one cell:
cell 1,
In this example, the
(table row) tags must be within a group, and the , (table data) tags must be within a
group. All of the HTML tags that indicate how information is to be displayed within a page, along with any content that is to appear on the page, must be contained within the group. (HTML is not case-sensitive, but its tag names are capitalized in the text of this book to distinguish them from JavaScript and VBScript reserved words.)
Document-Level Tags
Some HTML tags are used to define the attributes of your document. Within any Web page, the tag group identifies the portion of the document that contains HTML. All HTML tags in your document must be contained in this group.
The two main subgroups within the group are the group, which defines header-level document information, and the group mentioned earlier, which defines the displayable portion of the Web page. These tags support additional attributes that can be used in conjunction with them. For example, the tag supports the following optional attributes:
* TEXT — Defines the default color for the text in a document.
* LINK — Defines the color used for the document's hyperlinks.
* VLINK — Identifies the color to be used for a hyperlink that was previously visited.
* ALINK — Sets the color to be displayed when a user clicks a hyperlink.
* BGCOLOR — Defines the background color for a document.
With this in mind, take a look at Figure 1.1. Here is the HTML code for that very basic Web page:
[PROGRAM LISTING NOT REPRODUCIBLE IN ASCII]
Notice that each attribute is set using this format:
Attribute = value
This will be the case with most attributes. Also notice that the values used for the two color attributes reference color names. However, they could also be specified in either of the following ways:
* Specify RGB([red value, green value, blue value]), where each of the color values is a number from zero to 255 that identifies the amount of each color to be used. For example, RGB(0,0,0) represents black, while RGB(255,255,255) represents white.
* Use a pound sign (#) followed by the hexadecimal RGB value for the desired color.
Table 1.1 lists some common HTML color names, and their hex and RGB equivalents. These color definitions can be used with any of the HTML tags that support a color, not just the tag.
Detail-level Tags
As the previous example illustrates, it is possible to create an HTML page using only header-level HTML tags. The resulting page, however, is just a text document with little or no formatting. With the use of additional HTML tags, you can add more interesting formatting to your page. For example, within the element, you can use the element to change the text that appears in the browser window's title bar. Any additional tags defined within the element will not be displayed. The remaining detail-level tags are defined within the element.
Detail-level elements allow you to control more minute details of your Web page. These tags let you do everything from defining font color and point size to displaying images. Many of these tags support their own unique attributes, which are used to further define the element on the page.
Defining Hyperlinks
One of the primary building blocks of an HTML document is the hyperlink, which provides a clickable link from one page to another, or even to a specific spot on a page. To control the definition of a hyperlink, use the tag with the HREF attribute, as shown here:
www.mc-store.com/"MC Store
Note the closing , which defines the end of the hyperlink text. The text between the opening and closing tags will be displayed in the browser window as the hyperlink. The HREF value identifies the page to be loaded when a user clicks the hyperlink. In this example, we are referring to a Web server address. You can also refer to a specific document:
Default Link
In this case, the page "default.html" would be loaded from the current server path. For example, if the Web server where this page was stored were named Webserver, this link would attempt to load "http://Webserver/default.html."
The link in the HREF attribute doesn't have to be to an HTTP location; any registered document type can be referenced. For example, a hyperlink containing the mailto: prefix can be used to launch the user's mail client using the supplied e-mail address. For example, when a page containing the following code is loaded in the browser, a user can click the "Contact me" text to send an e-mail message to the specified address:
Contact me
In addition to this, local file resources can be accessed through the use of the file: prefix. The following example creates a hyperlink labeled "Display File," which, when clicked, loads the file "anyfile.doc" from the user's local c: drive:
Display File
The A HREF tag can be used not only to define a hyperlink, but also to define the positional target for the link on a page. For example, the following hyperlink would instruct the browser to go to the target named "topic2" on the specified HTML document:
Go To Topic 2
If you omitted the document name ("index.html") in this example, the browser would assume that the target is located on the current page.
To create a target location within a document, you also use the <A> tag, but you replace the HREF attribute with the NAME attribute. The following tag would create a target for the previous example:
TOPIC 2
One other attribute of <A> is TARGET. This attribute defines the target frame or window where the document referenced in the HREF attribute will be loaded. (Frames are discussed later in this chapter.) For example, to cause the page in the HREF attribute to be loaded in a new browser window, you would set the TARGET attribute to "_blank":
MC Store
When a user clicked on the hyperlink generated by this line of HTML source, a new browser window would be launched to display the page link.
Text-formatting Elements
There are many HTML elements that let you change the way text is displayed. One important point about text formatting in an HTML document, however, is that any extra lines are ignored. For example, the following segment:
This is the page body
would appear exactly the same as this one when displayed in a browser:
This
is
the
page
body
To cause text to be displayed in a browser exactly as it is formatted within the document, you enclose it in the element (which stands for "preformatted"). This element is often used within a Web page to define a section of program code. Here is an example of the element:
[PROGRAM LISTING NOT REPRODUCIBLE IN ASCII]
You can change the font in which text is displayed by using the element. To change the color of the text, add the COLOR attribute to . The value for this attribute is defined in the same way as the color attributes of discussed earlier in this chapter.
The SIZE attribute of sets the size of the text. You can specify it in one of two ways:
* As a value from one to seven. This value identifies a fixed size that may vary depending on the browser used to display the page.
* As a relative increase/decrease value, such as "+2" or "-1."
Finally, the FACE attribute identifies the name of the font to be used. To provide alternatives in case a particular font is not available on a client computer, include several names in a comma-separated string.
All three attributes of can be used in combination, as shown here:
Test Text
The line "Test Text" would be displayed in red, two sizes larger than the default text size for the document, using Arial or Helvetica (depending on which one is available on the client computer).
To make text appear bold or italicized, place it within the or elements, respectively. These elements can be used independently or in combination with one another, as shown here:
BBold Text
Italicized Text
Bold Italicized Text
In addition to these text-formatting elements, the text can be changed to one of six predefined heading styles based on the browser displaying the page. This is done using the <Hn></Hn> element, where n is a number from one to six. Text placed within the
element would be shown in the largest heading size, while text contained within the element would be shown in the smallest. These elements, too, can be combined with the other text-formatting elements. For example, consider these lines of HTML:This is heading 1 text
This is heading 2 text
Within the first line, the text "heading 1" would be italicized, while in the second line, the word "This" would be italicized. When displayed in the browser, these two lines would appear as shown in Figure 1.2.
Paragraph Formatting
In addition to being able to change the look of your text, you can also define the line and paragraph formatting using several HTML elements. The
element defines a paragraph of text. Placing text within this element will cause that text to be kept together when the page is displayed in a browser. This element supports the ALIGN attribute, which identifies the horizontal alignment for the text within the paragraph as either left, right, center, or justify.You can use the
element to force a line break within your text. For example, the following HTML source would be displayed as two lines in the browser window:
This is line one
and this is line 2
Notice that the
element does not include a closing () tag. This is because the element is not used to define a section of text, but to simply insert a line break. This is one of a few HTML elements that do not require a closing tag.
The element defines a section of text that is to be offset from other text when displayed in the browser. The following example combines the element within the
element:
[PROGRAM LISTING NOT REPRODUCIBLE IN ASCII]
In this example, all of the text will be left-aligned. When displayed in the browser, it will appear as shown in Figure 1.3.
The element creates logical divisions within a document. Like the
element, this element supports the ALIGN attribute. It also supports the COLOR attribute, which can be used to define the font color for text within the element. This element is widely used to create a logical grouping of text and other HTML elements, such as images. These logical groupings can then be accessed as a single entity from a client JavaScript or VBScript function. (You'll learn more about this a little later in the book.)Graphic Elements
Of course, there's more to HTML pages than just text. Graphic elements allow you to create more interesting HTML pages. The element displays an image file (JPEG, GIF, etc.) within your document. Its SRC attribute identifies the location of the file containing the image, as shown in the following two lines:
In the first line, the location for SRC is specified as a relative path to the HTML document. In the second line, the full URL is used.
In addition to the SRC attribute, also supports the ALIGN attribute, which again defines horizontal alignment, and the BORDER attribute, which defines the width of the border displayed around the image. To eliminate the border altogether, set BORDER to zero.
The element can be placed within a hyperlink (<A HREF>) tag to cause the image to act as a hyperlink. This allows you to use an element like an icon within your document. For example, the following source would display the image file named "image.gif " and allow the user to click on the image to load the HTML page "page2.html":
In addition to including image files, you can also insert a simple horizontal line in your page using the element. The height of the line is defined using the SIZE attribute. This value is specified as the number of pixels. The line width is defined using the WIDTH attribute, which is also defined as number of pixels or as a percent of the page width. The optional NOSHADE attribute can be included to remove the line shadow, which is included by default. The following example would create a line that is 50% of the available browsers space in width, and 5 pixels in height, with no shadow:
This element does not require a closing tag.
HTML Tables
Tables are one of the most widely used features of HTML. Not only are they used to display data in rows and columns, but they can also give your Web page a more appealing look. The main element used to create an HTML table is . This element identifies the overall size and look of a table. It supports some attributes that you've already seen, like BGCOLOR to define the table's background color and BORDER to define the table's border width.
The element also supports several other attributes. The CELLPADDING attribute defines the amount of empty space displayed between the cell border and the table data. The CELLSPACING attribute is similar, but defines the amount of space between cells in a table.
The HEIGHT and WIDTH attributes define the overall size of the table. These two attributes can be defined as either a fixed number of pixels or as a percent of the available page space, as with the element discussed earlier. HEIGHT and WIDTH are defined in terms of page space rather than page width or height because you can embed one table within another. For example, if a table has a width of 50% and contains a second table with a width of 50%, the second table will be 25% of the total page width. This is shown in Figure 1.4.
Within the element, several other elements define the rows and columns of the table. The
element identifies a single row in a table. This element supports the BGCOLOR attribute, which will define the row's background color. The
element also supports the ALIGN and VALIGN attributes, which are used to define horizontal and vertical alignment, respectively. The ALIGN attribute is used in the same way as for the element discussed earlier. The VALIGN element defines the vertical alignment of text within the current row as either top, middle, or bottom.
(Continues...)
Excerpted from Active Server Pages Primer by Mike Faust. Copyright © 2003 MC Press Online, LP. Excerpted by permission of MC Press.
All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.
Table of Contents
Contents
Title Page,Copyright Page,
Introduction,
1 - Creating HTML Web Pages,
2 - Introduction to Active Server Pages,
3 - ASP Data Access,
4 - Converting to ASP,
5 - ASP Order Entry,
6 - Ad Hoc Sales Reporting with ASP,
7 - Moving to ASP.NET,
Appendix A - HTML Tag Reference,
Appendix B - Sample Application Installation Instructions,