Print Page

MARK MY WORDS

11/1/2001

You have the band's home page up. The counter works. You've even sold some CDs. You're about to breathe a sigh of relief, but then you sense them coming: XHTML, XML, WML, VRML. It's the invasion of the markup languages! Should you run? Should you hide? Should you take a correspondence course?

Never fear. I'll show you how to tame the tsunami of tag-based technology and give you working examples that you can try. Not all markup languages are equally important to musicians, so I'll start with the most significant ones. I'll also include some more esoteric languages that could become important in the future.

WHAT IS A MARKUP LANGUAGE, ANYWAY?

Markup is a way to add indications to plain text that tell a computer what the text means (for example, a title, a heading, or a paragraph) or how it should look when it's printed or viewed on a video display. Unlike the text, the markup itself isn't displayed. Markup was first used in typesetting; the cryptic snippets between squiggles seen on a Linotype machine are markup.

If you've created a home page, you probably already know this markup:

Bold

It tells a Web browser to render the word bold in, well, bold. A markup instruction, commonly referred to as a tag, is typically enclosed between angle brackets, as seen in the example. Most tags come in pairs — a start and an end tag. A whole set of tags is a markup language.

Standardized Generalized Markup Language (SGML) is a powerful master language for defining markup. SGML has abilities beyond normal markup. It's the realm of markup scientists; you won't encounter it directly. SGML is the parent of the most famous markup language of all, HTML.

HTML, RULER OF THE WEB

HTML, or HyperText Markup Language, was created in the early 1990s from SGML so researchers could share information on networks, and later on the Web, more easily. (At that point, MP3, Yahoo, and eBay were figments of the imagination.) HTML was meant to be easy to use and be compatible with different browsers but still provide powerful features. Look at the following basic HTML example:


<HEAD>
<TITLE>Markup Languages for Electronic Musicians</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF VLINK=#0000FF ALINK=#999999>
<H1>Markup Languages for Electronic Musicians</H1>
<IMG SRC=“e-musician.gif” alt=“Electronic Musician logo” border=0 WIDTH=200 HEIGHT=40><BR>
<BR>
<P>
<A HREF=“http://www.yahoo.com/”>A Link to Yahoo!'s Home Page</A>
</P>
</BODY>
</HTML>

The and tags define the start and end of the document and tell a browser that this is HTML. The and tags define information that the browser needs to understand before it displays the page. In this case, I provided a page title to display in the browser's title bar. The and tags define the information that will be displayed on the page. The

and

tags define a heading (typically rendered by a browser in a large bold font). The tag defines an in-line image (in this case, EM's logo). The <BR> tag provides a line break. The <P> and </P> tags define a paragraph. The <A> and </A> tags define a hyperlink to another Web page (Yahoo's home page).

Note that several tags have additional information inside the tag delimiters (the angle brackets). Those bits of information are called attributes. The <BODY> tag has attributes for the text and link colors, and the <IMG> tag includes attributes for descriptive text and for the image border width and image size. Different tags allow different attributes, though not all Web browsers understand all attributes.

There are many other tags and attributes that you might want to use. Nonetheless, even basic HTML features such as in-line images and hyperlinks can provide a great deal of information to the user, which is one reason why HTML has gained such wide acceptance.

If you've experimented with HTML before, that is probably familiar stuff. But did you know that other kinds of markup can display the same information on all kinds of devices?

WAP: GOING WIRELESS

Wireless Web technology is a hot topic these days because it promises to deliver rich Web content to handheld devices such as cell phones and personal digital assistants (PDAs). Wireless Application Protocol (WAP) is a set of standards that describes how wireless devices are supposed to communicate. Unfortunately, most wireless providers have failed to deliver useful and engaging content, leading to mass consumer discontent that detractors have dubbed Waplash. Does that mean something is wrong with WAP? No! Even base-model Web-enabled cell phones, such as Sprint's Touchpoint, have intuitive navigation, good performance, and can display WAP graphics as well as text. Moreover, fast wireless connections are under development, along with the ability to download and store multimedia files, such as MP3s, to your phone. (Some U.S. cell phones double as MP3 players, but expect cutting-edge gear to arrive in Europe first, where conventional Internet connectivity is comparatively expensive.)

Adding WAP-capable pages to your site is easy, but there's a catch. Deploying WAP means deploying at least two kinds of markup, one for each type of Web-enabled phone.

The first is the Handheld Device Markup Language (HDML). HDML is an older markup for handheld devices that is somewhat limited in scope but is optimized for the technology in U.S. phones. It doesn't look like HTML, except superficially. Unlike an HTML page, an HDML page isn't based on a document, with familiar head and body elements, but on a deck, wherein each related HDML page is called a card, much like a stack of 3-by-5 index cards. That concept may seem a bit strange, but it's fairly intuitive once you get used to it. Common HDML cards include the Display card, used to display images and text, and the Choice card, which shows a choice of tasks, such as links to other HDML cards (a Choice card can also reveal an image or brief text). Here's the home-page example in equivalent HDML, based on a Choice card:


<CHOICE TITLE=“Markup Languages for Electronic Musicians”>
<ACTION TYPE=SOFT1 TASK=GO DEST=bio.hdml LABEL=Bio>
<ACTION TYPE=HELP TASK=GO DEST=help.hdml>
<IMG SRC=e-musician.bmp alt=e-musician>
<CE TASK=GO DEST=http://www.yahoo.com/ LABEL=Link>A Link to Yahoo's Home Page
</CHOICE>
</HDML>

The (Choice Entry) tag defines a single task: the link to Yahoo's home page. (On a phone display, a long link title such as this will autoscroll from left to right to conserve screen space.) You can have as many as ten tags on a Choice card; the HDML browser numbers them automatically. For phones that display text captions, the Label attribute value is shown when you select the associated task. The Action tags allow you to control additional phone functions, based on the supplied attributes. The Type=Soft1 attribute allows you to assign a card and caption to the phone's primary “soft button” (here I linked to a theoretical author bio), and the Type=Help attribute lets you replace the phone's Help menu with your own. Fig. 1 shows how that looks on a generic cell phone.

HDML is pretty useful, but it isn't part of the WAP specification, and Unwired Planet, the company that developed it and that supplies browsers for most Web-enabled U.S. phones, has switched to WAP. WAP incorporates Wireless Markup Language (WML), which is more like HTML. But many Web-enabled U.S. cell phones understand HDML, not WML. In addition, a lot of WML-capable phones display HDML far more legibly than they display WML.

Here is the home page in equivalent WML:


<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN” “http://www.wapforum.org/DTD/wml_1.1.xml”>
<wml>
<card id=“Index” title=“Markup Languages for Electronic Musicians”>
<p align=”left”>
<img src=“e-musician.wbmp”
alt=“e-musician”/>
</p>
<p align=“left”>
<a href=“http://www.yahoo.com/” title=“Jobs”>A Link to Yahoo!&#39;s Home Page</a>
</p>
</card>
</wml>

Also based on a card concept, WML has more elements that are familiar from HTML, such as the

, , and tags. Because of the way WML is defined, tags must be in lowercase and attributes must be enclosed in quotes (to display a single quote, WML uses the character entity '). WML is picky about syntax, so if you try the examples on your site, be careful to enter the markup as shown.

Fig. 2 illustrates how that appears on a generic cell-phone display. The link is displayed rather crudely in the form of text enclosed in square brackets, which wraps to subsequent lines. That is not too user-friendly (it wastes what little screen space there is). Newer European cell phones show links with conventional underlines, which is better. Nevertheless, WML provides features that HDML does not, such as multimedia support, Java support, scripting support (called WMLscript), and secure connections. In the future, when more cell phones can take advantage of those features, WML will become the wireless markup language of choice.

HDML and WML use graphics formats different from HTML. HDML uses the common Windows-compatible bitmap format (BMP), but WML employs the special Wireless Bitmap format (WBMP), which few graphic-editing programs support. Fortunately, several Web-based applications can convert Windows bitmaps to Wireless bitmaps (see the sidebar, “Webliography”). More limiting, though, is the display capability of cell phones and PDAs. Most devices can display only small (about 100-by-50 pixel) monochrome images. That means you have to resample any image you want to use to the smaller size and reduce the color depth, which works best with simple, high-contrast images.

THE LANGUAGE CREATOR: XML

EXtensible Markup Language (XML) is the current techno buzzword. You may have heard that XML will replace HTML. Well, yes and no. XML has the potential to redress some of HTML's deficiencies, and it can also do a lot more, though it can be difficult to use.

So what's wrong with HTML? Consider the example I gave at the beginning of this article. Although the markup is simple, it gives what markup scientists call context to the information on the page. That is, it's easy to detect which text forms a title, a heading, and a paragraph. That's important because a person or a computer program, such as a Web spider or database engine, can determine what the information means, as opposed to how it should look. The downside is that the browser or other software determines the appearance of the page — how big the heading should be, what fonts to use, how closely to space the lines and letters on the page, and so on.

Web designers have employed myriad work-arounds in HTML to obtain more control over page appearance and to add more interactive features. Those work-arounds include images used in place of text, tables used to position objects on the pages (not merely to format rows and columns of data), transparent images used as spacers, embedded scripts and programs, and in-line style definitions. For example, Fig. 3 shows MP3.com's Electronic page (http://genres.mp3.com/music/electronic/), and Fig. 4 shows just the first 63 of the page's 1,100 lines of markup. (See “Square One: What's in a Web Page?” in the March 2001 issue.) That works, but the resulting complexity of tags and features all but obliterates context, no matter how expertly coded the markup is.

Consider how powerful it would be to create a markup language that maintains human-readable context and has custom tags for the information in question. What if that same language provided accurate control of appearance and the ability to add new features and functions as desired? You can do all that with XML. For example, this XML-based markup is intended to store a discography:


<summary>
<title>Schmo Money - Dance Mix</title>
<artist>Joe Schmo</artist>
<label>Joe Schmo Records</label>
<number>001</number>
<format>CD</format>
</summary>
<tracklist>
<track>
<title>Schmo Money - Dance Mix</title>
<time>10:19</time>
<note>Caution: Extreme bass!</note>
</track>
<track>
<title>Schmo Money Live (bonus track)</title>
<time>12:01</time>
<note>Live at the Podunk Amphitheater</note>
</track>
</tracklist>
</discography>

All I did was create a tag set that encompasses the information I might like to store. I defined the context clearly and simply so that a computer (or a human) can understand it. That means that all kinds of devices and programs — Web browsers and spiders, phone browsers, MP3 players, databases, and so on — can use the information in ways that make sense. For example, a Web spider could index the information for future searches, a phone browser could display it as WML, or a database engine could import it. But I have to create only one type of markup, instead of one for each application.

I didn't attempt to define how the information might look when displayed. If I want to specify the layout and appearance of the information for a specific application, I can put those instructions in a separate, related document called a style sheet. I can provide style sheets for various purposes (such as a default style sheet for typical Web displays and a special style sheet that instructs a browser to use larger, high-contrast type to aid visually-impaired users).

The basic concepts behind XML are fairly straightforward. Frustratingly, an XML-based language is useless without an application that understands it. I can't just take the new language and open it in a magic XML reader. I have to create a program (called a parser in techspeak) that understands the tags and knows what to do with them. If I want other people to be able to use the language with their applications, I'll also have to create a Document Type Definition (DTD), which defines in computer terms what the language does. I may also want to create various style sheets. None of that is beyond the reach of a serious avocational Web programmer, but it can be daunting: it's not easy to learn.

Fortunately, XML is becoming widely established, and in the near future, you'll find many complete XML applications available to process many kinds of information. In fact, the example borrows from Discographic Markup Language (discML), which has a simple, browser-based parser and editor available for free. Although XML is called a markup language, it's more correctly considered a metalanguage because it is used to create other languages.

XHTML = HTML IN TRANSITION

Wouldn't it be cool if you could combine some of XML's features with the things that are familiar and easy to use in HTML? That's the idea behind eXtensible Hypertext Markup Language (XHTML). Based on XML, XHTML encompasses the standard tags of HTML version 4.0. Here's the markup language home page in XHTML:


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Markup Languages for Electronic Musicians</title>
</head>
<body bgcolor=“#FFFFFF” text=“#000000” link=“#0000FF” vlink=“#0000FF” alink=“#999999”>
<img src=“e-musician.gif” border=“0” width=“200” height=“40” /><br />
<br />
<a href=“http://www.yahoo.com/”>A Link to Yahoo!'s Home Page</a>
</body>
</html>

Because XHTML is based on XML, its syntax is stricter than HTML's. XHTML documents must be identified as XML-based in the first line, and the XHTML DTD must be referenced explicitly in the second line. Tags and attributes must be in lowercase, attribute values (including numbers) must be in quotes, and “empty” tags, such as the line break (
), must have a closing slash. That's more trouble than regular HTML, but XHTML is designed to be readable by all kinds of devices and applications, which HTML is not, yet still be readable by conventional Web browsers, including older browsers (with some restrictions). XHTML is still in development, but future versions promise the power to add new tags, functions, and features to HTML — the “extensible” part of eXtensible Hypertext Markup Language.

MORE MLS

VRML (pronounced “vur-mul”) is often misidentified as a markup language, but the acronym actually stands for Virtual Reality Modeling Language. VRML allows the creation of dynamic, 3-D scenes, or “worlds,” that can be viewed in a compatible browser (or with a browser plug-in). VRML structure and syntax are very different from those of markup languages and are closer to those of scripting languages. This code fragment defines the right front wheel in a 3-D rendering of a sports car:

DEF RightFrontWheel Separator {
Transform {
translation -2.0 0 -2
}
Material {
diffuseColor 0 1.0 0
}
USE Wheel
}

VRML supports the creation of highly complex scenes from building blocks such as that. Moreover, VRML definitions can be imported into even more powerful modeling tools as a starting point for state-of-the-art visual effects, such as those used in film and video production.

Dynamic HyperText Markup Language (DHTML) is a language that's frequently referenced among Web designers, and it certainly sounds like a markup language — but it doesn't exist. DHTML is just a convenient acronym that refers broadly to the dynamic, interactive features that various Web browsers support. Because dynamic features are such an important part of the Web designer's toolkit, that acronym gets tossed around a lot. Without direct reference to a specific Web browser or software development environment, though, it's rather nebulous.

A MARKUP TEST-DRIVE

If you have a Web site, you can test-drive the HTML, XHTML, HDML, and WML examples. Simply open your favorite text editor (such as Notepad in Windows or SimpleText on the Mac) and enter the markup as shown. Then comes the slightly tricky part. You have to save each file with the correct extension. For HTML or XHTML files, use the extension .html (.htm will also work); for HDML files, use .hdml, and use .wml for WML files. Save the files as text only. Then, upload the files to your site or personal home page as text files (not as binary files). To view your HDML or WML test pages on a cell phone or PDA, access the device's Goto or Enter URL function and enter the complete address, including the extension.

Most Web servers are configured to understand those file types and send them with the correct headers (information that the server sends to the browser to tell it what to expect). If you receive an “unknown file type” or similar error when you attempt to read an XHTML, HDML, WML, or XML file, contact your Web site's administrator for help. For HDML and WML files, you can get a free WAP site from WAPdrive.

Markup languages are the key to unlocking the power of the Web, and as a desktop musician, it's a good idea to learn how they work. I hope this article will help you make the most of these languages, but stay tuned for further developments — markup is a moving target, to say the least.


Former EM contributing editor Alan Gary Campbell is developing the Discographic Markup Language (discML) to facilitate broadly compatible storage of discographic information for sound recordings.

WEBLIOGRAPHY

The Web offers vast resources about markup languages. Here's a sampling:

discML
www.discML.com

HDML Language Reference
http://developer.openwave.com/ja/htmldoc/331h/hdmlref/

Introduction to VRML
http://home.netscape.com/eng/live3d/intro_vrml.html

Introduction to XHTML
www.wdvl.com/Authoring/Languages/XML/XHTML/

Mobilizing the Web with HDML
www.webreview.com/1998/10_09/webauthors/10_09_98_5.shtml

Online WBMP converter
www.teraflops.com/wbmp/

WAPDrive
www.wapdrive.com

WAP/WML School
www.w3schools.com/wap/default.asp

XML 101
www.xml101.com/xml/default.asp

XML FAQ
www.ucc.ie/xml/

  Print Page