Schongar P.VBScript unleashed.1997
.pdf
Black |
White |
Green |
Maroon |
Olive |
Navy |
Purple |
Gray |
Red |
Yellow |
Blue |
Teal |
Lime |
Aqua |
Fuchsia |
Silver |
These color names can also be used with other tags, including the BODY, HR, MARQUEE, and TABLES tags. If you view Listing 1.4 in your browser, you can get a look at these colors. (See Figure 1.3.)
Figure 1.3 : Colorname values in Internet Explorer 3.0.
Listing 1.4. Colornames.htm.
<HTML>
<HEAD>
<TITLE>Colornames in Explorer 3.0</TITLE>
</HEAD>
<BODY>
<FONT SIZE=6>These are the colornames available to you using the COLOR tag.</FONT>
<P>
<FONT COLOR="BLACK">BLACK</FONT><FONT COLOR="WHITE">WHITE</FONT>
<FONT COLOR="GREEN">GREEN</FONT><FONT COLOR="MAROON">MAROON</FONT>
<P>
<FONT COLOR="OLIVE">OLIVE</FONT><FONT COLOR="NAVY">NAVY</FONT>
<FONT COLOR="PURPLE">PURPLE</FONT><FONT COLOR="GRAY">GRAY</FONT>
<P>
<FONT COLOR="RED">RED</FONT><FONT COLOR="YELLOW">YELLOW</FONT>
<FONT COLOR="BLUE">BLUE</FONT><FONT COLOR="TEAL">TEAL</FONT>
<P>
<FONT COLOR="LIME">LIME</FONT><FONT COLOR="AQUA">AQUA</FONT>
<FONT COLOR="FUCHSIA">FUCHSIA</FONT><FONT COLOR="SILVER">SILVER</ FONT>
</BODY>
</HTML>
Links in Your Documents
Links are the basis of HTML. They allow you to jump to different documents on the Web or at your local web site. In addition, links enable you to jump to specific parts of documents.
A link works by specifying the URL of the linked file. You use the <A> tag along with the HREF= attribute:
This is a link to <A HREF="HTTP://www.microsoft.com/">Microsoft</A>.
TIP
Some UNIX Web servers are case-sensitive. For this reason and others, you should get used to calling URLs in a precise manner. For example, a URL that doesn't specify a filename should always end with a forward slash.
To link to a specific location within an HTML file, you need to have tags inside the file to set the places to which you would like to go. These tags are called anchors. You set an anchor using the NAME= attribute with the <A> tag:
<A NAME="Anchor">This line will be at the top of the page</A>
To set a link to that anchor, simply reference the anchor as you would a URL, using the HREF= attribute:
<A HREF="#Anchor">Link to Anchor</A>
If the anchor is in another file, place the URL to the file in the reference, followed by the anchor:
<A HREF="http://www.someaddress.com/anchor.htm#anchor">Link</A>
For files that are at the same Web address as the file containing the link, all that is needed to open a particular file is the relative path and filename:
<A HREF="page.htm">Page in same directory.</A>
<A HREF="\docs\page.htm">Page in subdirectory.</A>
<A HREF=".\pages\page.htm">Page in another directory.</A>
Graphics
Graphics in Web pages are what has made the Internet popular. Before the Web and its graphically rich HTML, the Internet was useful mostly for its newsgroups and Gopher database. Graphics have put a face on the Internet, and the graphics you put into your Web pages should receive careful consideration.
The two most popular graphics types on the Internet are GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). There are subtypes of each of these formats that progressively render the graphic image. We'll take a quick look at graphics now, but you should get a good HTML reference to study the subtleties of graphics in HTML. One of the best is Teach Yourself Web Publishing with HTML 3.2 in 21 Days by Laura Lemay, published by Sams.net.
GIF
GIF was designed by CompuServe. It is able to use only 256 colors, so it is usually reserved for certain items on the page, such as logos and icons. To display a photograph in a page, you'll most likely use the JPEG format.
To place a graphic image into your HTML file, you use the <IMG> tag. The SRC= attribute contains the URL to the file you want to display:
<IMG SRC="logo.gif">
You can use the ALT= attribute to display a name for the file while it's being loaded by the browser. If the reader is using a nongraphical browser, the text in the ALT= attribute is displayed instead of the image.
Other attributes that you might find useful are ALIGN= and VALIGN=. These attributes determine how text next to an image will be displayed. Possible values for the ALIGN= tag are top, middle, and bottom.
JPEG
Images in JPEG format are displayed in exactly the same way as images in GIF. JPEG images are different from GIF images in a few ways, though:
●JPEG images can contain more than 256 colors.
●JPEG images use lossy compression.
●You can choose the amount of compression you want to use.
As mentioned, in most cases you'll want to use JPEG for photographic images. Keep in mind that increasing the amount of compression in a JPEG file will affect the clarity of the image. Take a look at your JPEG image at a number of compression ratios to determine the best amount of compression for your needs.
Other Graphics Formats
In addition to JPEG and GIF, a new standard file format has been created for the Web: the PNG (Portable Graphics Network) format. PNG was created when questions arose about whether GIF was legally usable in the public domain or
whether CompuServe had retained rights to the format. Even though CompuServe has said that GIF is usable on the Internet, the development and adoption of PNG has gone forward. PNG promises to add JPEG-like compression capabilities to GIF-like files.
The BMP or bitmap format should be familiar to most Windows users. Because these images are uncompressed, they're usually not suitable for anything less than middleband use. On a local system, though, the bitmap format could prove useful to companies that don't want to convert large catalogs of existing images.
Linking from Images
Creating a link from an image file is much like creating a hyperlink in text. Simply place the <IMG SRC= > tag in the same place that you would usually have text:
<A HREF="http://www.microsoft.com/"><IMG SRC="bestwith.gif"
ALT="Internet Explorer 3.0" BORDER=0></A>
Notice that we've added the BORDER=0 attribute to keep a border from being displayed around the link. In addition, we've added the ALT= attribute so that text will be displayed during the graphics download and in case the user stops loading the page before the download is complete.
Multimedia in HTML
Multimedia is one of the main topics of this book. A large part of creating active content in HTML has to do with utilizing the multimedia features of HTML.
Sound
In HTML, there are two ways to use sound in native formats with Internet Explorer 3.0. One way is to simply link a URL to a sound file in the Web page for playback on the client machine. The other way is with the <BGSOUND= > tag, which allows you to specify a WAV or a MID file to be played as a background sound while the page is being viewed. The file can be played once (by default) or repeated.
Video
Video files can be used within a Web page in the same way as image files. The <IMG> tag, along with the DYNSRC= attribute, is used to place an AVI file into a Web page, as shown in Listing 1.5. Placing an SRC= attribute in the tag allows an image to be placed in the file for browsers that aren't capable of playing AVI files or for low-bandwidth machines where the user has opted to turn off the browser's video capabilities.
Listing 1.5. Inline AVI.
<HTML>
<HEAD>
<TITLE>Inline AVI Example</TITLE>
</HEAD>
<BODY>
<H1>AVI file plays inline.</H1>
<HR COLOR="RED">
<IMG DYNSRC="myvideo.avi" SRC="myvideo.gif" CONTROLS>
</BODY>
</HTML>
NOTE
One of the characteristics that sound and video files share is large file size. Current bandwidth considerations make multimedia a tough sell on the Internet. Because it takes longer, in most instances, to download a multimedia file than it does to view it, specialized formats have been developed to make using multimedia in Web pages worthwhile. These new formats enable streaming of audio and video. Streaming allows video and audio to be played on the client machine before the file is completely downloaded. Streaming formats include Internet Wave, RealAudio, and VDOLive. The clients for these new applications are usually free. These formats require specialized server applications, though, which cost money.
If you want to make a small file play indefinitely, you would use the LOOP=INFINITE attribute. You can set the starting point of an AVI file with the START= attribute. Choices for the START= attribute include FILEOPEN, which runs the file as soon as it's loaded, or MOUSEOVER, which runs a file when the mouse passes over it.
Tables
It's amazing how creative Web page designers have become with an element as simple as a table. Tables are now used to place content nearly anywhere on a Web page, with a fair amount of control on the designer's part.
The <TABLE> tag is fairly straightforward but not as intuitive as some of the other tags. You create a table by inserting a table tag and then inserting tags for the rows in your table. You can then place content in the cells of your table and set other parameters. Listing 1.6 shows a simple table.
Listing 1.6. A simple table.
</HTML>
<HEAD>
<TITLE>Simple Table Page</TITLE>
</HEAD>
<BODY>
<H1>This is a simple table</H1>
<HR COLOR="BLUE">
<TABLE BORDER>
<TR>
<TD>Cell 1,1</TD>
<TD>Cell 1,2</TD>
</TR>
<TR>
<TD>Cell 2,1</TD>
<TD>Cell 2,1</TD>
</TR>
</TABLE>
</BODY>
</HTML>
The BORDER attribute in this table creates a grid into which the table data tag, <TD>, is inserted. Another row would be added with another <TR> tag containing the <TD> tags.
In addition to deciding whether you want a grid to show up in your page, you can set the width of cells. To do this, you use the WIDTH= attribute in the <TD> tag. You can set the width value either in pixels or as a percentage of table size:
<TD WIDTH="50%">Wide cell</TD>
Other attributes available to you when working with tables include CELLCOLOR=, BORDERCOLOR=, and BACKGROUND=. The BACKGROUND= attribute takes a URL to a graphics file as a value. CELLCOLOR= and BORDERCOLOR= can use either a color name or a HEX value.
HTML 3.0 tags include the THEAD, TBODY, and TFOOT attributes. Listing 1.7 creates a table using these features.
Listing 1.7. Table with header and footer.
<HTML>
<HEAD>
<TITLE>HTML Table with Header and Footer</HEAD>
</HEAD>
<BODY BGCOLOR=WHITE>
<H1>Table with Header and Footer Attributes</H1>
<TABLE>
<THEAD>Header for the table.
<TR>
<TD>Data 1 in Header</TD>
<TD>Data 2 in Header</TD>
</TR>
</THEAD>
<TBODY RULES=ROWS>
<TR>
<TD COLSPAN=2>Data in Body 1</TD>
</TR>
</TBODY>
<TFOOT>
<TR>Throughout the book you'll see examples of
<TD></TD>
<TD>This is my footer</TD>
</TR>
</TFOOT>
</TABLE>
</BODY>
</HTML>
TIP
As you browse the Web, you'll see all sorts of HTML layouts using tables. Whenever you see something that strikes you as interesting, take a look at the source code and save it. Later on, if you need to do something similar, you'll have a library of demo code to browse for ideas.
Finally, what makes HTML tables extremely versatile is that you can place a table within a table for a desired effect. For example, say that you want to use a table that contains a large graphics image and you want to set up some links in a table right next to the graphics image. Listing 1.8 shows how you would accomplish this task, and Figure 1.4 shows the results.
Figure 1.4 : Table within a table.
Listing 1.8. Table in a table.
<HTML>
<HEAD>
<TITLE>Table in a Table</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<H1>A nested table</H1>
<HR COLOR=RED>
<TABLE BORDER>
<TR>
<TD><IMG SRC="myimage.gif" ALT="My Image"></TD>
<TD>
<TABLE>
<TR>
<TD>ITEM 1</TD>
</TR>
<TR>
<TD>ITEM 2</TD>
</TR>
<TR>
<TD>ITEM 3</TD>
</TR>
<TR>
<TD>ITEM 4</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Forms in HTML
In the past, if you were doing anything interactive on the Web, it was usually with HTML forms. For the most part, forms allow for client input that is processed on the server machine. Output from an HTML form is usually sent to the Web server's CGI_BIN directory, where it is processed by a CGI script. A CGI script is a program that runs on the server and usually processes parameters sent from forms on the Web. CGI scripts can be written in any language that can be compiled or run on the server. The most popular languages for creating CGI scripts have been Perl and Bourne shell, a batch-processing language on UNIX machines.
Form Tags
To create a form in an HTML document, you enclose the graphical elements of the form in the <FORM> </FORM> tags. The ACTION= attribute contains the URL of the CGI script to be run. Using METHOD=, you can determine how things are sent to the server. Possible values for this attribute are GET and POST.
Form Components
Forms are created with the basic elements of the graphical user interface common to most GUI operating systems. These elements include buttons, textboxes, radio buttons, checkboxes, and listboxes.
The form elements are named differently in HTML than in a language such as Visual Basic. Most of the elements are created by setting the TYPE= attribute of the <INPUT> tag. Let's go over each element and then run through a few scenarios in which you might use HTML forms.
Buttons
Buttons are created by setting the value of the TYPE= attribute of the <INPUT> tag to SUBMIT. You can set the caption of a button using the VALUE= attribute. The NAME= attribute is passed to the CGI script along with the value. Listing 1.9 shows these tags and attributes at work.
Listing 1.9. Form with a button.
<HTML>
<HEAD>
<TITLE>Form with button</FORM>
</HEAD>
<BODY>
<H1>This is a button</H1>
<FORM>
<INPUT TYPE="SUBMIT" NAME=Button1 VALUE="This is Button1">
</FORM>
</BODY>
</HTML>
Textboxes
A textbox is created using the TYPE=TEXT attribute. The name of the textbox is set with the NAME= attribute, and the returned value is held in the VALUE= attribute:
<INPUT TYPE="TEXT" NAME="Text1" VALUE="(default value)">
Additional attributes associated with the TEXT type include SIZE=, which determines the size of the textbox, and MAXLENGTH=, which sets a limit on the amount of text that can be typed into the control.
Textareas
A textarea is like a textbox except that it contains more than a single line of text. Like a textbox, a textarea has a NAME= attribute and a VALUE= attribute. In addition, because the textarea is multilined, you can specify the number of columns and rows in the control using the COLS= and the ROWS= attributes: