HTML 4_01 Weekend Crash Course - G. Perry
.pdf
Session 4—Maintaining and Improving Your Web Site |
47 |
WebMonkey provide expert advice and columns that they update regularly to keep you informed. As you create and edit your site, you will enjoy the invaluable help these support sites can provide.
HTML and Company
As you work with HTML, you will think of elements (for example, text, graphics, applets, objects, and Excel spreadsheets) you want to add to your Web site that HTML simply cannot handle. HTML is only the first tool in the HTML programmer’s bag of tricks. Although you have chosen this weekend to learn HTML, you need to know what else is in store for you once you master HTML because if you do not, you’ll be frustrated over HTML’s seeming lack of features. The reality is, HTML is extremely powerful and does its job above and beyond the call of duty. Nevertheless, you need to understand the tools that interact with your HTML code so that you will better understand how active Web pages work and you’ll know what you will be able to use later to improve and maintain your sites.
DHTML
DHTML is known as Dynamic HTML. DHTML actually doesn’t exist as its own language, but it describes a set of tools that browsers might support that activate sites by enabling those sites to respond to actions performed by the users. DHTML includes support for the following items with which you should begin to familiarize yourself:
CSS, or cascading style sheets: With CSS, you can design your own formatting command tags to facilitate easier and more consistent Web site formatting than with HTML alone. Several versions of CSS have been released. Most notably, CSS Level 1 (CSS 1) allows you to define new formats for your Web pages much like Microsoft Word style sheets do, and CSS-P, or cascading style sheets-positioning (also known as CSS 2), enables you to specify exact positions for text, graphics, and other HTML Web page elements.
JavaScript: This is an interactive programming language, much like the C++ programming language, which enables you to embed small programs called applets into your HTML code.
Internet Explorer 3.0 was the first browser to introduce the DHTML concept by offering CSS Level 1 command tags, and other browsers promptly followed. Currently, all releases of all major browsers support CSS, CSS-P, and JavaScript, but when you
Session |
Friday—I Part |
4 |
Evening |
48 |
Friday Evening |
design your sites, you must keep in mind that not all Web users have the latest browsers. If your page contains DHTML but someone views your page with an older browser, many of the active elements on your page may not work properly.
Beginning in Session 19, you will begin learning some of these DHTML concepts in detail. You don’t have to be an advanced JavaScript programmer to take advantage of JavaScript and other DHTML elements in your Web sites. For example, you can produce rollover effects, shown in Figure 4-1, which change buttons on your Web page into other items (such as different colors that appear as the user points to buttons with the mouse, or perhaps buttons that turn into drop-down menus) as the user moves the mouse pointer over those buttons. You can do this by adding some cut-and-paste JavaScript code that you’ll find in later sessions to your HTML pages.
The rollover effect
Figure 4-1
JavaScript enables the buttons on your Web page to change as the mouse pointer is moved over them.
Session 4—Maintaining and Improving Your Web Site |
49 |
XML
XML means extensible Markup Language and provides a sort of extension, or superset language, to HTML and DHTML. XML goes beyond HTML to describe any kind of data file and provides database support. Programs that support XML, such as Microsoft Word, can interpret XML command tags that look and act a lot like HTML tags. Browsers that do not support XML will ignore the XML tags.
|
Generally, browsers are programmed to ignore tags that they |
|
do not recognize as opposed to displaying an error message. |
Note |
Therefore, the browser you obtain today will run tomorrow’s Web |
pages with HTML, XML, and just about any other tag-based lan- |
|
|
guage even though the browser may not execute the commands |
|
requested inside those unknown tags. |
XML supports CSS and all of the DHTML commands. Actually, XML is a superset of DHTML. The extensible in XML, however, goes far beyond HTML or DHTML. With XML, you literally can create your own markup language. The language can closely match your site’s design. For example, if your site sells bread, you can create an XML tag that is called BreadSpecial that you use for the special of the day.
The weekend is not nearly long enough to tackle HTML, DHTML, and XML. Fortunately, if your goal is to develop exciting Web pages, XML is not a language you will need to worry about for some time unless you need to embed external data such as a Microsoft Excel spreadsheet inside your Web pages. (Excel saves its Web-based spreadsheets in the XML format.) Even then, Excel will handle all the XML, and your job is only to locate a browser that can display XML in addition to HTML. XML’s benefits come in handy once you’ve mastered HTML and envision extending HTML to match your site’s goals more closely using XML.
ActiveX controls
Microsoft’s version of Java, ActiveX, offers a way to embed programmable objects, such as input fields. These special controls respond to the user’s events when using the control, such as clicking the control’s panel. One of the drawbacks of ActiveX controls is that when you design the control, you must compile the control on every type of computer that will use the control. The advantage of ActiveX, however, is its cross-platform abilities across various company tools. A Visual Basic programmer can create an ActiveX control, and an HTML programmer can embed that control on the server’s site for distribution along with Web pages.
Session |
Friday—I Part |
4 |
Evening |
50 |
Friday Evening |
CGI
Many commercial Web sites contain CGI, or Common Gateway Interface, code. CGI is not a language but a scripting service by which the server of the Web page contains code written in a procedural Web language, such as Perl. The server executes the code when the user of the Web page triggers the code, as might happen when the user clicks a button to place an online order. The CGI code does not appear
in the HTML code and is not visible to the user.
ASP
ASP stands for Active Server Pages and represents server-side programming, a fancy term for the programs that run on the Web host’s machine as opposed to programs that run on the user’s computer. To utilize ASP, your Web host must utilize Microsoft Web server extensions. Not unlike CGI and other scripting languages, ASP runs on the server’s computer, but the results appear on the user’s Web page. ASP uses the DLL, or Dynamic Link Library, concept so that only one copy of an executable routine has to be in memory at one time, saving on resources.
Note
Not every language and scripting service available to the HTML programmer is discussed here because of time limitations of the weekend. For example, VBScript and Java are languages that an HTML programmer can use to accent a Web page.
REVIEW
A constant maintenance of your site, although necessary, is a timeconsuming job that tends to take longer than expected.
Proofread your Web site to keep a professional appearance and to ensure that the site works well.
Store your Web site in its own folder for simple access to your files.
Consider running a Web server from your own computer if you want maximum control over your site.
If you want to activate your Web site, use DHTML.
HTML programmers can use several scripting languages to add custom and secure features, such as electronic commerce, to a Web site.
Session 4—Maintaining and Improving Your Web Site |
51 |
QUIZ YOURSELF
1.What problems can occur when you make changes to your site? (See “Success Means Constant Web Site Maintenance.”)
2.Which folder should hold your site’s images? (See “The Best Way to Organize Your Files and Folders.”)
3.What are some drawbacks to using your own personal Web server? (See “Should You Turn Your Computer into a Local Web Server?”)
4.True or False: Windows 98 users cannot turn their computers into Web servers. (See “Should You Turn Your Computer into a Local Web Server?”)
5.What do cascading style sheets accomplish? (See “DHTML.”)
Session |
Friday—I Part |
4 |
Evening |
S E S S I O N
5 
Text on Your HTML Page
Session Checklist
Make text the centerpiece of your site
Create a template for your Web pages
Master font selection and learn new tips for adding them
Learn the common text-formatting command tags
This morning you will begin to learn specific mechanics of HTML coding. The cornerstone of any Web page is the text. Although your graphics accent the text message you want to convey, the text contains the detailed information
your users want to know about.
With HTML, your Web page can contain more text-formatting command tags than ever before. Most browsers in use today support all of the text tags that you’ll learn in this session.
58 |
Saturday Morning |
Text Is the Foundation
The text that you put on your Web site speaks to the world. As mentioned in Session 4 of last night’s sessions, you’ll want to proofread your Web page to ensure that you’ve used proper grammar and correct spelling. The text that you display is a reflection on you, the author of the Web page.
|
If your site contains written articles and columns, consider writing |
|
them using a word processor with a grammar and spelling checker. |
Tip |
Then save the article as a text file, with a txt filename extension, |
and import it into your HTML code from within the text editor. |
|
|
Save the file with the htm or html extension if your word proces- |
|
sor saves directly in the HTML format. If, instead, you type the |
|
text directly in your HTML editing program as you write the HTML, |
|
the command tags will get in the way and you won’t have the |
|
benefit of spelling and grammar checking. |
|
Never forget your goal: the Web page’s information, not |
|
the HTML code that you write to produce that information. |
Never |
Concentrate on accuracy and well-flowing text. The text must |
work on its own before it works inside your HTML code. |
Depending on your Web site’s goals, you will need to decide the optimum amount of text to display at any one time. Generally, you’ll want to keep your home page short on text (as well as graphics that will consume loading time). Consider the IDG home page shown in Figure 5-1.
By keeping the text short and placing the opening text snippets on the home page, the user can glance at the overall Web site and select the exact information desired.
Your Web Page General Layout Template
Figure 5-2 shows a general model for the layout of all HTML code. Web pages often contain the following sections:
Header
Title
Body
Footer
Session 5—Text on Your HTML Page |
59 |
Clicking here displays more text
Figure 5-1
Keep text to a minimum on your Web site’s home page.
In Session 2 of last night’s sessions, you learned some of the command tags that produce these Web page sections. The footer section is new to you, but as you can guess, the footer appears at the bottom of your Web page just as the header section starts your Web page. Footers often contain contact information and perhaps a navigational bar that links the Web page user to other pages on the site. No formal footer tags exist; nevertheless, most Web pages have an obvious footer section that helps terminate the information on the page.
One of the ways to ensure that your Web pages contain all the important elements is to create a template that contains a Web page’s bare-bones layout to help you structure the text on your Web page. Listing 5-1 shows one such template. You can store this template on your hard disk, perhaps under the name Template.html, and then load the template and save it under a new filename when you create subsequent Web pages.
Morning Saturday—II Part
5 Session
60 |
Saturday Morning |
<html>
<head>
Header section
</head>
<body>
Body of Web page
Footer Section
</body>
</html>
Figure 5-2
Virtually all Web pages follow this general layout.
Listing 5-1
A template to help you lay out your Web page
<html>
<head>
<title>Window title goes here</title>
</head>
<body>
Session 5—Text on Your HTML Page |
61 |
<p>
The body of the Web page, text and graphics, appears here </p>
</body>
</html>
The <p> and </p> tags begin and end paragraphs. Actually, the end tag, </p>, is optional, but future HTML versions may require the paragraph’s end tag, so get in the good habit now of using </p>. The paragraph tag forces a blank line on the screen that shows the beginning of paragraphs — in effect, inserting a doublecarriage return for each <p>.
The other tags in Listing 5-1 are explained in Session 2.
Cross-Ref
If you create your initial Web page with a Web page designing tool, such as Dreamweaver or FrontPage, the program will handle writing the basic tags in your template as you build the page. Once you have the basic page designed, you can then edit the HTML code to make the page look exactly the way you desire.
|
The Yale C/AIM Web Style Guide site (htttp://info.med. |
|
yale.edu/caim/manual/index.html/) outlines a Web style |
Tip |
guideline that ensures that your site follows an acceptable, |
standard layout. Of course, the Web’s beauty is that your site |
|
|
doesn’t have to conform to all the others. Nevertheless, general |
|
design principles span all Web pages, and as a newcomer to |
|
HTML, you will gain design and layout insights as you scan |
|
this site. |
Dealing with Specific Font Limitations
As you already learned, all text that appears between the <body> and </body> tags appears on the browser’s screen. Without line or paragraph breaks, the text does not appear on separate lines, and without text-formatting tags that might italicize or boldface words and phrases, the text appears in the browser’s default font.
Morning Saturday—II Part
5 Session