|
||
 |
||
|
| We’re Talkin’ HTML |
 Email This
 Print ThisView My Personal Library |
|
Protocols June 2002 • Vol.6 Issue 6 Page(s) 50-53 in print issue |
We’re Talkin’ HTML Learn How To Speak The Web’s Primary Language | ||
 Beneath the Web's complex jumble of hyperlinks, documents, and multimedia offerings lies a simple yet powerful programming language that keeps all the content in its place. Without this ubiquitous, yet often unseen HTML code to hold the Web together, the medium itself could not exist, and cyberspace would be a vastly different experience for most users. So how exactly does HTML (Hypertext Markup Language) construct and display Web pages? We'll explain how HTML code works as the architectural base of the Web and walk you through some of the language's most common commands. Even if you have never seen programming code in any form, you may be surprised at just how easy HTML is to use and understand.  What Is HTML? Marshall Jansen, senior Web developer for the HTML Writers Guild, says HTML is like a program, such as a word processor, used by a browser to interpret the layout of Web pages. HTML works with the Web's HTTP (Hypertext Transfer Protocol) to format plain-text documents for display on browsers, he says. Just access the code through the View, Source, or similar command in a browser, and you can easily see the code used to control a page's layout, text size, table size and placement, and other formatting parameters, such as bold and italics. However, it's the code's hyperlinking ability that sets HTML apart from other Internet languages such as Perl or JavaScript. Users can simply click an underlined word or picture on a Web page to have their browsers locate, access, and display content spread among millions of Web servers around the world. This instantaneous connection to data serves as the base for the Web itself and is the true power behind the HTML code. "The main reason HTML was created was for the ‘hyper' in the Hypertext Markup Language," Jansen says. "Those hyperlinks are what made HTML what it is." Nevertheless, the idea of hypertext and a better way of indexing information did not originate with HTML. By the time Tim Berners-Lee developed the idea behind the Web and its compatible HTML code in the early 1990s, for example, the first hypertext-based system, which ran on IBM mainframe computers, was already more than 20 years old. In addition, Berners-Lee based HTML, at least in part, on a much older text indexing and referencing code called SGML (Standard Generalized Markup Language), which itself grew out of GML (Generalized Markup Language), created in 1969. "HTML has evolved over the years from something that . . . universities and professors used to put journal documents online to what we have now," Jansen says. Initially, HTML documents did little more than link pieces of text to other text-based files. Today, HTML program writers can embed images, sound, video, and other dynamic elements into a Web document for a complete multimedia experience. Peter Grice, project manager for Web-page design company Custom Web Design, says that despite the complexity of today's pages, HTML has remained a very simple program. Because of this, he says, the code is extremely popular among all levels of Web-page designers, even people with little to no programming experience. "HTML's main asset is its accessibility," Grice says. "Probably no other computer language . . . can claim to have such a large contingent of lay users." Tag. That's It. Creating a simple HTML document involves little more than mastering a relatively small set of predefined commands or tags. Each tag is enclosed in less-than (<) and greater-than (>) signs and defines a specific function for how the text or body of the Web page will appear. Composing a Web page in HTML involves the logical choice and arrangement of HTML tags, together with words, sentences, and paragraphs, Grice says. Although much of the tag placement is up to you as the Web designer, you must still insert some HTML tags, such as <HTML>, <HEAD>, <TITLE>, and <BODY>, in a particular order, as illustrated in the example below of the code for a simple Web page. <HTML> <HEAD><TITLE>My Web Page </TITLE></HEAD> <BODY> This is the text from my first Web page. </BODY> </HTML> "The browser begins to act out the instructions as soon as they're received, even while the file is still downloading," Grice says. This means that if the initial HTML tags are not in order, the browser—which reads a document from top to bottom—cannot begin to process the Web page elements and display the document properly. For example, the first tag within our example, <HTML>, indicates to a browser that this particular document is formatted in HTML code while the end HTML tag, </HTML>, placed at the bottom of the document, lets our browser know when the HTML coding ends. Most HTML tags must include an accompanying end or close tag to let a browser know when that particular HTML command ends. The <HEAD> tag area in our example is typically used to define nondisplay information, such as descriptions of the document for search engines, Grice says. However, any text falling between the beginning and ending <TITLE> tags in the HEAD area appears within a browser's title bar. Text inserted between the beginning and ending <BODY> tags should appear within the browser's window. Together, the <HTML>, <HEAD>, <TITLE>, and <BODY> tags comprise the basic structure of every single page on the Web, Grice says. Beyond this, an HTML document can become much more complex as designers include commands to bold or italicize text, add a background color, set font size, or provide links to other Web content. It's these hyperlink tags, called anchors, that make up the real meat of most HTML-based documents and let users crisscross their way around the Web. You can designate just about any text or image as a hyperlink simply by enclosing the object or words within the beginning and ending anchor tags, as illustrated below. <A HREF="http://www.smartcomputing.com"> The Smart Computing Web Page. </A> Note that the beginning anchor tag contains the URL (uniform resource locator) for the specific Web page while the closing anchor tag, </A>, lets the browser know where the hyperlink itself ends on this page. We can then simply click anywhere within that text in a browser window to activate the hyperlink and access Smart Computing's home page. Anchor tags can also point a browser to files, images, and other objects residing on our own computer. Instead of typing a URL encased in quotes, for example, we could just as easily type "C:\DIRECTORY\FILE\IMAGES\File.html" to display another HTML document residing in our computer's C: drive. With just a little practice, almost anyone can use anchors and other HTML formatting tags to create a functional, attractive Web page. And you don't need a high-priced application in which to write HTML code. Many designers simply use a Windows Notepad or WordPad text-editing program, for example, and save the completed document with an .HTML or .HTM extension. To view your Web page, you can just click Microsoft Internet Explorer's Open command (Open File in Netscape Navigator) on the File menu, enter the file name into the appropriate field, and click OK (Open in Netscape Navigator). If you like, you can bypass the process of learning any HTML code altogether by investing in a WYSIWYG (What You See Is What You Get) Web-page designer program, such as Microsoft FrontPage or Macromedia's Dreamweaver. These programs often feature shortcuts for various formatting options and can automatically load your page into your Web browser. In addition, tutorials and books abound on the Web to walk you through the process of writing your own HTML document. Creating a Web page is not difficult, even for computer users with no programming skills, Grice says. "Most people have taught themselves, simply by peeking at the coding of the pages they like and comparing that with its output in a browser," he says. Padding For The Code. Although HTML is a good starting point for creating effective Web pages, the program itself tends to fall short in today's multimedia Web environment. "To date, HTML hasn't always delivered what people wanted to achieve with Web site development," Grice says. "For example, HTML by itself can't calculate the total of an order, handle a message forum, or maintain a guest book." Todd Robertson, owner of Web-page design company Hyperspective Studios, says, "HTML is fairly limited because it is a simple language. Its main purpose is to display elements and simple linking functionality." However, he says, you can use HTML to display almost anything and to include items written in other programming languages. "HTML can embed other programs, such as JavaScript, multimedia data, streaming video, audio, and other content into a page," Robertson says. For example, using JavaScript, a programmer can include pop-up Windows, icons that change as you pass your mouse over them, and other dynamic content within the Web page itself. "In this case, the HTML code will generally make a reference to a separate file," Robertson says. "This file will have its own properties and instructions to provide its individual functionality within the page." Often, Web page designers choose to simplify the coding process and include some instruction code within an HTML document. For example, a programmer could include beginning and end tags for JavaScript code within an HTML document, as illustrated below, and insert the special instruction code between the two <SCRIPT> tags. The designer would then add the code for the visual aspect of the JavaScript program between the HTML's beginning and ending <BODY> tags (not illustrated in this example). <HEAD> <SCRIPT LANGUAGE="JavaScript"> special JavaScript code </SCRIPT> </HEAD> Other applications, though, work independently of HTML and must be written and saved in a separate document. Applets, for example, operate outside of the HTML code and take over a section of your Web browser window for games, word processors, painting programs, and other applications. The inability to display multimedia content is just one limitation of HTML, Jansen says. HTML was originally created only to link text within technical documents and journals to other text-based pages. Consequently, many of today's programmers find it difficult to encode HTML documents in such a way that a Web page's colors and element placement appear the same in all browsers. To ensure formatting consistency across different browser platforms, Jansen says, many Web-page designers embed CSS (Cascading Style Sheets) code within an HTML document. CSS lets you position page elements and control font sizes, color shades, and other Web page aspects accurately on any compatible browser platform, Jansen says. Programmers then use HTML to control a page's structural elements, such as text, headings, and paragraphs. "X" Marks The Future. While CSS; JavaScript; applets; and plug-ins, such as Macromedia Flash Player, let you create sophisticated, multimedia Web pages, learning to effectively incorporate these into an HTML document takes quite a bit of time and effort. To simplify incorporating multimedia and other components into HTML and keep pace with the expanding demands of Web users, the Web's standardizing body, the W3C (World Wide Web Consortium), released specifications in January 2000 for the next step in HTML. Called XHTML 1.0 (Extensible Hypertext Markup Language), this new code combines HTML version 4.01, which was standardized in December 1999, with XML (Extensible Markup Language). "XML is a way to tell people that . . . a paragraph is about something," Jansen says. HTML, on the other hand, is a good code for defining paragraphs, headings, and tables of information. Using the XML component of the new code, for example, Web-page designers can insert a tag within an HTML document to mark a piece of information based on its subject, Jansen says. Search engines can then return results for a type of data, not just the keyword occurrences within Web documents. A search for an author named Smith, for instance, would return results not only of authors named Smith but also results grouped by different types of authors, such as science fiction, mystery, or romance writers, named Smith. All other nonrelated Smith keywords would then be excluded from the search results. "One of the elegant parts of XHTML is that to most browsers, it looks just like normal HTML," Jansen says. "You can write XHTML documents now, and they'll work on current browsers." Together, XML and HTML expand the possibilities for information retrieval on the Web, Jansen says. XHTML breaks the Web-page design aspect into separate "modules" that help programmers easily design and embed HTML-like multimedia tags for a variety of content into a single HTML document. These modules also let programmers design a single page for display on a variety of browser interfaces, such as cell phones, PDAs (personal digital assistants), and desktop computers. Since 2000, the W3C has been working to standardize XHTML as the new version of the HTML code. However, no matter how many alterations HTML undergoes in the future, Jansen says the basic code that originated with the Web will remain the primary means for formatting Web content. "The advantage of using HTML is that every browser . . . can read HTML," Jansen says. "HTML is really the only way to go if you actually want your document to be globally available."  by Lori Robison View the graphics that accompany this article. (NOTE: These pages are PDF (Portable Document Format) files. You will need Adobe Acrobat to view these pages. Download Adobe Acrobat Reader )
|
|
Home Copyright & Legal Information Privacy Policy Site Map Contact Us