HTML 4_01 Weekend Crash Course - G. Perry

PDA device-based HDML

HDML stands for Handheld Device Markup Language, and it refers to an HTML offshoot that developers use for small PDAs (personal data assistants) such as browser-ready cell phones and large-screen pocket organizers. The public’s demand for pocket-sized Internet-ready devices far outpaces the supply of good technologies.

PDAs require only an eight-line, one-color (and that color is gray) screen. When you write HTML code that produces Web pages for the world to see, you know after 30 sessions that you don’t write to the lowest-common-denominating system, but you certainly do not implement the latest browser and monitor bells and whistles if you want your site to be revisited. Yet, the proliferation of PDAs makes the demand for small Web content too great to ignore. You cannot create Web pages that satisfy one-color, 8-line screens and also send those pages out onto the Web and expect millions of desktop and laptop computer users to enjoy the page.

You have three choices:

1.Write HTML for a niche audience — either the non-PDA market (with HTML) or the PDA market (with HDML) — and your pages will be marketed towards that niche only.

2.Write two versions of your site: one for non-PDA (with HTML) and one for PDA (with HDML). Good luck; nobody envies your market channeling nightmares.

3.Use a combination of HTML and HDML that somehow sends the proper content of the Web page to the proper kinds of devices.

The reality is that many are using combinations of all three choices. The market will change as the hardware changes and as people better determine what they really want to do with such devices. In the meantime, the W3C (World Wide Web Consortium) is honing an already popular proposed standard for the HDML language that HTML programmers can use today.

A Brief Introduction to HDML

HDML is enough like HTML that you won’t have to learn a whole new command set. It works on the smaller devices whereas HTML falls apart because of its inability to work well on smaller hardware screens. As an introductory taste of HDML, consider its concept: HDML is card-based and not page-based. Obviously, the entire focus of HTML code is the Web page. HDML shrinks that focus to a card analogy, squeezing the programming focus down at the outset. These cards appear on the

Continued

display based on the display tag’s relative location. costs is the name of the next card to display. -->

<action type=accept label=costs task=go dest=#costs> <!-- Text appears on the PDA as a result of the

following line as it would in HTML. --> Last year’s figures are spectacular. <BR><br>

We expect a 7% increase in profits this year. </display>

</HDML>

REVIEW

You will learn various forms of HTML as hardware evolves.

When writing for WebTV, take advantage of the image pre-loading instruction.

Use HDML on small hardware devices whose screens do not allow for full-featured browsing.

QUIZ YOURSELF

1.Who designed the Internet so that it would grow to the size it has become? (See “Growth Increases Demand for HTML.”)

2.What is an information appliance? (See “New Hardware Brings HTML Challenges.”)

3.Name at least one benefit of an Internet appliance. (See “New Hardware Brings HTML Challenges.”)

4.Where do WebTV devices store the pre-fetched papers? (See “WebTV device-based HTML.”)

5.What is HDML and why must you use it and not HTML for pocket-sized browsing devices? (See “The Future: WebTV and PDAs.)

11.You may want to offer lowand high-resolution sites, as well as sites that load quickly and more slowly to please all users. Such multi-layered sites can be difficult to market properly, however.

12.HTML validators analyze your site for loading speed and color correctness.

13.Sequential, hierarchical, and Web

14.The Web Host owns the server that provides the site to the rest of the Internet users.

15.The images folder holds all the site’s images.

16.Name all HTML files with the htm or html filename extension.

17.You have full control over the serving of the pages.

18.DHTML includes JavaScript that enable rollover effects and other special elements that activate your site better than stand-alone HTML can do.

19.True; CGI scripts appear on the Web Host’s server.

20.Rollover effects can be used to make buttons change shape and color as the user points to the buttons with the mouse.

Saturday Morning Review Answers

1.The <title> tag resides in the header.

2.Lowercase keeps your tags consistent and helps distinguish them from values that you use as attributes.

3.The browser substitutes other fonts.

4.Use the <h1> tag.

5.True (some browsers do not render the <p> tag perfectly, however)

6.Use the align=left attribute.

7.<center>

8.Use the <blockquote> and </blockquote> tags.

9.A horizontal rule is a line or bar across a Web page and the <hr> and </hr> tags specify the horizontal rule.

10.An ordered list retains its order as you add and remove items from the list.

11.Definition lists also work well for address books.

12.216

13.A hexadecimal value is a base-16 number that specifies the RGB value of a color combination.

14.Red, Green, and Blue

15.The image appears too grainy.

16.False

17.A location on the screen where the user can click to link to another page.

18.An active link is a link the user has clicked but that has not loaded yet.

19.Use a hyperlink with the target=”_blank” attribute.

20.False

Saturday Afternoon Review Answers

1.The mailto: protocol opens the user’s email message window.

2.The HTML code displays an error message in this rare instance.

3.<!--> and <--> enclose comments.

4.Either of these lines will work:

The <p> tag is an HTML paragraph tag

The <p> tag is an HTML paragraph tag

5.False; tables form from top-to-bottom and left-to-right.

6.<tr> and <td>

7.The <th> defines a header cell that is boldfaced.

8.Cellpadding determines the space between table cell contents and the cell’s edge while cellspacing determines the space between table cells.

9.False; 100 percent makes the cell span the rest of the screen’s width after the first few cells appear.

10.By table percentage and by pixel width

11.The field holds a value and the field label adds a title to the field.

12.By email and via the server’s CGI script

13.Use the type=text attribute inside an <input> tag.

14.The asterisk, *

15.A text area is a multi-lined text field.

16.Scroll bars appear if the contents of the text field do not fit within the pre-defined space of the field on the screen.

17.The user can check more than one check box but only one radio button at a time.

18.Antialiasing adds a grainy background to images.

19.The lowsrc= attribute sends a fast-loading, low-resolution image to the user’s Web page while a larger resolution image loads in the background more slowly.

20.A navigation bar helps the use traverse the pages of the Web site.

Saturday Evening Review Answers

1.The meta tag displays nothing on your Web page.

2.Place meta tags in the header section.

3.The name= and description= attributes determine the placement of the site on a search engine and the text that appears in that search engine listing.

4.True

5.The header, navigation, and detail frames

6.The user cannot reside table borders.

7.Frames are difficult to use and often consume too much screen space.

8.The frameset holds the individual frame pages and acts as the page’s structure.

9.The <noframes> and </noframes> tags enclose content for users without frame-enabled browsers.

10.Sound

11.Multimedia content takes an extremely long time to load.

12.The streaming video begins playing as soon as the user connects to the video’s multimedia element.

13.An external video clip displays controls with which the user can control the playback of the video.

14.The <embed> tag is better supported than <object>.

15.Rollover effects produce a color or shape change as the user moves the mouse pointer over Web page elements such as buttons.

16.An event is something that happens in a graphical user interface, such as the user clicking a mouse.

17.The user will not be able to resize your Web page text if you’ve specified exact font sizes.

18.The margin: characteristic substitutes for both the margin-left and margin-right attributes.

19.Embed styles in the header section of a Web page or link to a centralized Web page of styles.

20.a {text-decoration: none;} a:visited {color: #ff0000 }

Sunday Morning Review Answers

1.The Project Leader coordinates the Web Team, manages the design and production of the site, and acts as the liaison between the team and the client.

2.The client may be a business who wants a Web site for customers to use.

3.A B2B company provides Web services for other companies doing business on the Web (B2B means “Business to Business”).

4.Logos generate brand recognition.

5.False

6.Develop your home page before any other page on the site.

7.The user should gain a feel for your site from your home page.

8.The prototype acts as a model for the Web site’s pages.

9.Graphics programs are great for creating prototypes.

10.Tables hide their structure from users more easily than frames do.

11.Use the prototype and graphics program to draw lines that form the table cells.

12.The template ensures that you include the proper sections for the page.

13.Documentation lists the site creators and editors, explains what HTML code does, and describes how changes can be made to the page.

14.False

15. 

16.The table will have a border that does not match the table’s color and the table will appear more obvious.

17.The table cells may need to appear between a headline’s wording for graphic image placement.

18.All pages on your Web site, with the exception of non-frameset frame pages, should contain meta tags.

19.The closing forward slash can speed the connection to hyperlinked Web pages.

20.Framing graphics helps to accent the images.

Sunday Afternoon Review Answers

1.The mailto: protocol

2.CGI script

3.The email is not encrypted and the email address is obvious.

4.An image might be used as a hyperlink and an image map can be used to support multiple hyperlinks.

5.False

6.Specify image map coordinate values as rectangular, triangular, or circular coordinates.

7.Perform a usability study.

8.Look for the user’s ability to traverse the site without trouble, study the user’s face as the user surfs the site, notice what the user thinks is easy and what the user seems to miss.

9.The click-through rate indicates how deep into your site users tend to surf.

10.Image maps do not always make the clickable areas obvious to the users.

11.Use shading colors or mark image map hot spots so the user knows where to click.

12.False

13.Document Web pages well so that you and others can update the site easily.

14.Break long passages of text into shorter passage, span text across several pages, break text articles into short subjects.

15.False

16.Information appliances

17.Bluetooth offers suppoer for wireless communication between devices.