Drafted 2/20/00 10/4/01
Constantly being Updated!

COSC 330

LEARNING MODULE III
BASIC HTML/XHTML AUTHORING
FOR "TWEAKERS"

       This learning module is an introduction to HTML and its successor, XHTML, from a practicioner's point of view. It is the first of a two module presentations of HTML; in this LM III we consider  basic page layout and in LM IV we cover complex pages that contain tables, frames, forms, and other components.  Instead of presenting HTML as a programming language with which to code HTML programs, we will consider HTML/XHTML as a collection of resources with which we can generate HTML documents.  For the sake of efficiency, whenever possible, I advocate the use of WYSIWYG HTML authoring tools to prototype HTML documents,only resorting to coding tools can not accomplish the desired effect.  This approach conforms to Tim Berners-Lea's vision of HTML as enunciated in his interview on ZDTV's Big Thinkers. Note that the concise, tabulated presentation of HTML tags in the LM is intended to be an alternative to that of the textbook and Web references that complements those formats.  (See the Study Guide for this learning module.) Tell me what you think.

The Objectives of this learning module are to:

1. understand the differences between various markup languages
2. become familiar with the current trend from HTML to XHTML
3. become familiar enough with HTML so that code generated by authoring systems can be "tweaked" to achieve desired effects
4. become familiar with the tags and techniques needed for basic page layout with HTML
5. identify some HTML resources on the Web

This LM follows the sequence of chapthers in Niederst, Web Design in a Nutshell, but edits out older, deprecated tags as well as most of those tags that are browser dependent.  The sequence of presentations in this learning module is as follows.   You can click on any link to jump directly to that section.

1. OVERVIEW OF MARKIP LANGUAGES
2. BASIC HTML AUTHORING
3. STRUCTURAL HTML TAGS
4. FORMATTING TEXT
5. CREATING LINKS
6. ADDING IMAGES AND OTHER PAGE ELEMENTS

        HTML's primary purpose was to give the user ultimate control a Web presentation, a unique characteristic of Web documents.  The language itself is a special case of class of programming languages called "markup languages" which consist of "tags" which are used to "mark up" the text with instructions to a browser about how to display the document and insert multimedia into it.  To understand HTML it is important to survey the properties of markup languages in general and examine the basic properties of other markup languages.The most frequently used tags can be inserted using a  WYSIWYG authoring tool, however the tags that can be automatically inserted (using menus and dialog boxes) depends not only on the authoring tool but also on the type of Browser (e.g. Netscape Navigator or Internet Explorer) but also on the version of the particular browser.  This browser/version dependency combined with the fact that many tags are not automatically inserted by authoring tools makes it advisable for Web developers to be familiar with all HTML tags and be able to quickly look up the syntax for inserting such tags into their documents.

1. OVERVIEW OF MARKUP LANGUAGES:

      Markup languages are very high level ( VHLL) authoring systems that allow developers to "mark up" text with tags that format it, incorporate multimedia into it, and create hyperlinks in it.  The most commonly known example is HTML, in which this learning module is written, but it is being superceded  by newer more sophisticated languages.

1. Standard General Markup Language (SGML) is a generic markup language for representing documents..  It is not a language itself but a "metalanguage" that specifies how a markup language like HTML, DHTML, XML, etc. will work.  It is used to specify the  tag set of the markup language as well as it's syntax.
1. The foundation of SGML is the idea that a document has a format and components which can be specified independently of how that document will be displayed, for example, by a           (1). When displayed, the actual appearance of such a document will depend on the output device and style preferences.
2. A document written in a SGML-based language uses a Document Type Definition (DTD) file that specifies the          (2), embedded within it.
3. Because SGML is an international (ISO) standard, based on simple ASCII text, that is platform-independent, portable to all types of hardware, and adaptable to various I/O formats, it has the follownig  advantages:
1.                                       (3). Document design is independent of display devices and application programs, so a document can be created by considering its inherent format without worrying about how it will appear when displayed.  Therefore, display devices and application programs can be changed knowing that these documents can always be displayed, and that they will retain their basic format and structure.  Also, organizations can confidently write their documents in SGML-based languages and store their output without being limited to a specific vendor.
2.                        (4).  Documents can be accessed from different computer environments because the document type definition (DTD), is independent of both the hardware on which the documents are displayed and the software from which they are accessed.
3.             (5). The separation of content from its presentation allows for different output formats like  HTML, text, CD-ROM, etc.  Text can easily be adapted for the type of display device, e.g. the computer monitor, or TV.
4.                              (6). SGML is a core data standard that enables SGML-compliant applications to interact with each other and share data seamlessly.
2. Hypertext Markup Language (HTML) is the VHLL that is currently used to create                     (7).  It is based on SGML, i.e. HTML implements, with its tags and syntax, the specifications defined in SGML.
1. HTML itself is the set of customizable "markup" tags that are inserted into HTML document govern its format, multimedia content, and hyperlinks.  Such documents can be displayed by any HTML viewer but they are normally viewed using a Web browser.
2. HTML is a programming language in that an HTML document is a program that, when "run" by a browser, displays its text as hypermedia (multimedia with hyperlinks).
3. The "language" HTML is really only a collection of predefined tags which, when incerted into regular text, tell a Web browser how to:
1. format the document and its text,
2. incorporate                     (8), i.e. incert a graphic image, video sequence, or sound clip into the displayed document,
3. link to other locations, in the same document, in another Web page, or even on another computer (server), or
4. link to other programs written in VRML, Java, JavaScript, or other languages (called CGI applications).
4. Raggett's "Getting started with HTML", found at http://www.w3.org/MarkUp/Guide/ is the introduction provided by HTML's official sponsor the World Wide Web Consortium (WC3).   This nice little guide and its extension, Adding a touch of style, is considered part of this Learning module, so if you have not read it during the lab sessions, be sure to do so now. It's content is assessable on preassessments as well as assessments.
5. HTML is being transformed into XHTML (extensible HTML).  (See section F, below.)
1. More information:
1. ZDNET's excellent resource page for HTML developers at:
http://www.zdnet.com/devhead/filters/0,,2133211,00.html
2. ZDNET's quick reference to HTML tags at:
http://www.zdnet.com/devhead/stories/articles/0,4413,2392694,00.html
3. Twenty clarifying questions on HTML (with answers) can be found at:
http://webbuilder.netscape.com/Authoring/Html40/?st.bl.advtech..html4
4. An excellent starting point for further information on HTML is CNET's Spotlight on HTML at
http://home.cnet.com/category/0-3880.html.

3. Dynamic HTML (DHTML) is not a language in itself; it is a collective term for a combination of new HTML tags and options, style sheets, and programming that will let you create Web pages more animated and interactive than standard HTML. Simple examples of DHTML pages would include (1) having the color of a text heading change when a user passes a mouse over it or (2) allowing a user to "drag and drop" an image from one page to another. DHTML is supposedly a simpler way of adding animation and interactivity to Web pages than Java and JavaScript, the popular way to do this now.  Some of the more important capabilities of DHTML include:
1. a scripted, object-oriented view of a Web page and its elements.  This means any element on a page, e.g. a heading, can treated as a distinct object, i.e. it can be named, given attributes of text style and color.  More importantly, such objects can be addressed, by name, in  "scripts" (small progams) placed within the DHTML. These scripted objects can change as the result of a specified event (e.g. a mouse passing over it or being clicked or a time interval elapsing).  Also, an image object can be dragged and dropped from one page location to another.
2. cascading style sheets (CCS) allows the developer to specify, in a separate file, different style sheets or style statements with predefined levels of precedence within a page or group of related pages. The style can be scripted to change as a result of user interaction causing the appearance of the Web page to change. "Cascading" means that a page can have multiple layers of style sheets (e.g. a style sheet within a style sheet within a style sheet, etc.). A new style sheet may vary one or more objects in the style sheet above it.
3. layering allows existing content objects to be replaced by or superimposed with new content. Layers can be programmed to appear as
1. part of a timed presentation or
2. the result of user interaction.
4. Dynamic fonts, a feature introduced in Netscape Communicator, allows Web page designers to include font files containing specific font styles, sizes, and colors as part of a Web page and to have these fonts downloaded with the page. Therefore, font choice, no longer dependent on the browser itself, depends on the fonts available on the client's system.
For more information on DHTML, See the informative article, DHTML, More Client, Less Server, from PC Magazine at: http://www.zdnet.com/pcmag/issues/1613/pcmg0066.htm
4. XML (eXtensible Markup Language) is a Web document formating language that is newer and more functional than HTML.  (It may compete with            (9) to be the successor of HTML, or it may, at least in the near future, be used in conjunction with DHTML to complement HTML in Web applications.)
1. Instead of using only predefined tags (like HTML does) to format a page and insert MIME files in it,  XML allows tags to be defined by the developer of the XML document. Thus, tags for virtually any data type (e.g. product, quantity, and price) can be used for specific applications (like an online shopping site), allowing Web pages to function like database management systems.
2. XML syntax, which is much more strictly enforced than HTML syntax, requires the developer to:
1. make tags case-sensitive,
2. include end tags for all delimiting tags e.g. </p> and </li>, formally nonexistent, are now required,
3. add a / to empty tags, e.g. <br /> and <hr />, and
4. quote all attribute values, e.g. <img src="duck.jpg" />
XHTML uses lower-case for tags and attributes. Old browsers can render XHTML 1.0 provided simple guidelines are followed.
3. XML is a subset of SGML (See section A, above.) whereas HTML is a document type of SGML.
4. XML is              (10) because, unlike HTML, the markup symbols are unlimited and self-defining.
5. XML is being supported by the United Nations as a premier standard for e-business.
6. More information:
1. An excellent introduction to XML can be found in the ACM student magazine Crossroads.
2. For focused questions and answers on essential XML concepts see:
http://webbuilder.netscape.com/Authoring/Xml20/?st.bl.advtech..xml20
1. For an introduction to XML try the informative article from SunWorld at:
http://www.sunworld.com/swol-06-1999/swol-06-itarchitect.html?0615a
5. SMIL (Synchronized Multimedia Integration Language), pronounced "smile", was first released in the Fall, 1997.  It is designed to facilitate the definition of and synchronization of streaming multimedia elements (video, sound, still images).  Using HTML, each multimedia element on the Web page is distinct so complex programming is necessary to coordinate them.  SMIL makes it possible to separately transmit multiple video, image and sound files but coordinate their association on a Web page.  Each multimedia object is identified with a unique (URL) thus allowing their coordination and reuse.
1. SMIL tagss are  similar to those those of HTML so the language can be used anywhere that HTML is used.   A presentation can be described using only three XML elements.
2. SMIL  supports multimedia streaming protocols such as RTSP.
3. SMIL also lets the "producer" store a multimedia object in multiple "versions", each with a different size so that a smaller version can be transmitted to users who have low bandwidth channels.  The bandwidth of the user can be determined and the version most appropriate for that is automatically transmitted using a switch statement.  SMIL also makes it possible to have multiple language versions of soundtracks on a Web page.

6. XHTML (Extensible HTML) has been designed to supercede HTML by recasting HTML 4.01 as an XML application into XHTML 1.0, i.e. a reformulation of HTML with XML specifications and syntax.  This is officially documented in the W3C's HTML Activity Statement at:
http://www.w3.org/MarkUp/Activity.html This very important document should be considered to be an integral part of Learning Module III.
1. According to the above Activity Statement, in order to write XHTML you need to use the XML syntax.  (See section 1.D.b, above.)
2. A nice review of XHTML and comparison with HTML is found in XHTML, Our Last Best Hope for Clean Code.
3. XHTML is actually written in XML; therefore, it is an XML              (11).
4. Since XHTML is XML, an XHTML document can be viewed, edited, and validated with standard XML tools. On the other hand, XHTML documents perform better than HTML 4 in existing HTML 4 complient browsers.
5. Apparantly HTML 4 will be the last version of HTML, so browser developers will have to incorporate XHTML support into their browsers in order to display future Web pages.  However, Web developers can make current HTML documents complient with XHTML by following XML syntax rules.
6. The W3C gives two primary reasons for switching from HTML to XHTML:
1. XHTML, since it's an XML application, is designed to be extensible—that's the "X" in all the acronyms. This means that new tags or "elements" in the official W3C jargon can be added without altering the entire DTD that the document is based on.
2. XHTML is designed for portability. web browsers have become behemoths of code bloat. You name it, there's code in the newest browsers to do it. But according to some estimates cited by the W3C, by 2002, 75 percent of web document viewing will be through non-desktop devices like PDAs, wireless devices, and home electronics appliances, rather than through PC browsers. "Your web-enabled toaster will have less room for bloated code, and its browser will need to be able to count on standards-based documents. It may not be able to display current incarnations of HTML because of the non-standard code involved."
7. WML (Wireless Markup Language) is an XML language (XML application) that allows the text of Web pages to be displayed on WAP (Wireless Application Protocol) devices such as cellular telephones, PDAs, pagers, etc.  (Currently, multimedia is not supported.)  WML is defined in the WAP specification, which is backed by such companies as Phone.com, Nokia and Ericsson.  The protocol has yet to be adopted by standards organizations such as the W3C but can be used in conjunction other communication protocols such as TCP/IP as well as others.
1. WML is public domain software, available royalty-free.
2. Creation of WML applications requires a working knowledge of HTML, CGI, and SQL.   (Filter programs can be written that automatically translate HTML documents into WML.)
3. WML pages are currently displayed on a WAP device by a "micro browser", a limited version of Web browsers that display HTML and XML documents.  The capabilities of a micro browser are constrained by the device itself.
4. WML was formerly called HDML (Handheld Devices Markup Language); some Web sites still refer to this older name.
5. WMLscript (functionally similar to JavaScript) is the scripting language associated with WML which makes WML documents                            (12).
6. For further information see the following:
1. Specifications of WML are available at Phone.com's Web site.
2. The authoritative source for WAP is www.wapforum.org.
3. An introductory tutorial to WML and WMLscript at allNetDevices.
7. I heard, on ZDTV's show Big Thinkers, that  Naveen Jain, founder of Infospace, thinks WAP (and thus WML) will not be successful because it is limited when compared to XHTML.  According to him, Europe which is ahead of the U.S.A. in cellphone technology is not adopting WAP. (Obviously we are in the middle of a transition, so it's anyone's (educated) guess what will happen.)

2. BASIC HTML AUTHORING (See Niederst, Chap. 5.):

2.1 HTML Authoring Tools:

1. HTML editors vary from simple pure ASCII text editors, like                            (13), to editors (like HomeSite for the PC and BBEdit for the Mac)  specifically designed for creating and modifying HTML documents.
2. WYSIWYG authoring tools are what Tim Berners-Lee envisioned developers using to create Web sites, i.e. they make HTML editing invisible to the developer.  Expertise in one or two of these are the goal of this course.  However, one should be familiar with HTML structure and tags enough to be able to modify the code generated by an authoring tool in order to obtain any desired results.  Tools include:
1. Macromedia Dreamweaver (http://www.macromedia.com/) is the current industry standard for platform independent code.
2. Microsoft FrontPage () is Microsoft's rival to Dreamweaver.  It has many Windows-specific features that can only be used on Web servers that run Windows NT with FrontPage Server Extensions.  The most useful feature of FrontPage is its extensive collection of page templates.  The most disturbing feature is that it will modify the HTML code of any document opened with it to Microsoft-specific tags!  (Fortunately, because browsers ignore tags they don't understand this does not cause the inconvenience that one might think.)
3. Netscape                            (14) is a simple, user-friendly tool that is part of the Netscape Communicator suite.  It's best feature is the quick way one can edit and save a Web page one is browsing.  However, it currently can not edit frames and it has non-WYSIWYG features like list creation, in which one can not see the actual item numbers of the list.
4. Other authoring tools, not featured in COSC 330, include:
1. FileMaker Claris Home Page
2. Adobe PageMill
3. GoLive cyberStudio (Mac only)

2.2 Basic HTML Document Structure:

1. All HTML documents have the same basic structure enclosed within the tags <HTML> and </HTML>:
1. the head contains information about the HTML document itself, typically contained in meta tags
2. the body contains the formatted text, links to incorporated multimedia, and hyperlinks.
2. The simplest blank documment would be defined by the HTML:
 
<html>
<head>
</head>
<body>
</body>
</html>
The additional tags that appear in a blank page generated by Composer, FrontPage, and Dreamweaver are shown in the following table^.

3. HTML Tags are program instructions executed by a browser.  They consist of a tag name and an optional list of attributes, all of which appear between angled brackets.  Earlier versions of HTML were not case sensitive, but some attribute values could be case sensitive, particularly URLs, path names, and file names on Unix systems.
1. Most HTML tags are containers that act as delimiters, i.e. a beginning tag, <tagname attribute list>, and closing tag, </tagname> enclose the text they control.  Only the begging tag contains                            (15).
2. Formerly some tags were optional and some tags had no closing tags; however, the new XHTML standard changes this so this old fashioned practice should be avoided.  (See section 1.D.b, above.)
3. Tag attributes:
1. attributes are separated by one or more spaces; their order is not significant.
2. attribute values are designated by an equal sign following the attribute name, and to conform to XHTML, should appear in                            (16).
4. HTML Tags may be nested.
5. The following tags (and their enclosed text) in an HTML document are ignored when displayed in a browser:
1. comments inclosed in special tag beginning with <!-- and ending with -->, e.g. <!-- This is a comment -->.  The text of the comment can appear on several lines.
2. unrecognized tags.  Unlike traditional programming languages, unrecognized tags are simply ignored by a browser.  This is normally a convenience, but an author must remember that the viewer is totally unaware of such missing content.
3. multiple paragraph tags, <p>.
4. Color can be specified in HTML two ways:
1. by RGB values represented by hexidecimal numbers.  This is the method used by WYSIWYG authoring tools when colors are selected from a palette.  Color manipulation was discussed in LM II, section 3.A and is presented in Niederst pp. 75+.
2. by 140 color names.  (See Niederst pp. 78+.)
5. Character entities are used in HTML to specify displayable characters and symbols that are not included in the normal alphanumeric character set.  In a manner similar to colors, these can be specified either by names ( syntax: &name) or decimal values (syntax: &#nnn where n = decimal digit).

3. STRUCTURAL HTML TAGS (See Niederst, Chap. 6.):

1. Structural tags are that subset of HTML tags that are used to
1. organize the structure of an HTML document,
2. provide information about the HTML document that can be accessed by the user, and
3. specify the basic appearance in a browser.
2. HTML tags may be fundamentally subdivied into tags that appear in the document header (header elements) and those that appear in the body.
1. Header elements are not displayed by the browser; they are used to specify information about the document.  These include:
1. <base>, <link>, and <meta> which are covered in this section,
2. <script> which delimits program code embedded within an HTML document.  This is discussed in LMs VI and VII  {use the Find in Frame... feature until I make links}, and
3. <style> which specifies style sheets that govern a document's appearance in a browser.  This is discussed in LM VIII.  {use the Find in Frame... feature until I make links}
2. Body elements appear within the <body>...</body> section of an HTML document.  These governs what is displayed by a browser and how it is displayed.
Note the single exception to this categorization is the <!doctype> tag which is the first tag in an HTML document; see the Netscape composer code in section 2.  The <!doctype ...> tag is unusual because it is an SGML (Standard Generalized Markup Language) tag that indicates the version name of HTML used in the current document.  This tag is required if your pages are to be W3C standard compliant.

SAQ 8: What is the important similarity between <html>, <head>, and <body> tags?
4. FORMATTING TEXT (See Niederst, Chap. 7.):

1. Actually, HTML does not give the author much control over the appearance of documents; that is governed by the user, or more accurately the window size of the user's browser.
2. Formatting was originally specified only in tags, but recent trends provide formatting mainly in stylesheets.  This is a more effective approach.
3. Block-level elements govern the formatting of paragraphs and headings (5 tags)

TEXT FORMATTING HTML TAGS

TAG	ATTRIBUTES	DESCRIPTION
<address>...  </address>		specifies ownership or authorship
<blockquote>..  </blockquote>		specifies that the enclosed text is indented from both right and left Browsers differ in the way they display blockquotes.
<div>...   </div>	align=center|left|right	delimits a division of a page; especially useful with stylesheets
<hn>...</hn>    where n =1 to 6	align=center|left|right	specifies enclosed text is one of six heading styles where 1 is largest
<p>...</p>	align=center|left|right	delimits a paragraph

1. Inline styles govern the appearance of text.

1. Spacing and positioning tab:

1. Lists...

5. CREATING LINKS (See Niederst, Chap. 8.):
 
 

LINKING TAGS

TAG	ATTRIBUTES	DESCRIPTION
<a>...</a>	href=url method=value (typically an application; rarely used) name=text title=text target=text (frame in which page is displayed) New in HTML 4.0: accesskey=character charset=character coords=x,y coordinates hreflan=language code shape=shape name tabindex=number type=MIME type	Defines an "anchor" used to link to another location in any Web document.
<area>	coords=values (comma delimited pixel coordinates) href=url nohref shape=rec|rectangle|circ|circle|poly|polygon	Used within the <map> tag to define a "hot" area of a client-side imagemap
<map>...  </map>	name=text	encapsulates client-side imagemap specifications

NOTES:

1. You have now covered the material required to answer questions 1-15 on PREASSESSMENT 330-2, with is self checking so you can make mistakes and correct them without anyone even knowing!  There is also an HTML version (which you can clone and add questions to). Be sure to review the preambles and associated descriptions of the preassessments so that you fully understand their purpose.
2. You can also try questions 1-15 on the "PROFICIENCY EVALUATION 2".  (These also have a clonable HTML version.)  It has a format that is identical to that of the gradeable Assessment 2.  If you begin the an assessment having 100% understanding of the associated Proficiency Evaluation, you should have a fundamental understanding of the most import concepts covered and be in good shape to take the assessment. Be sure to read the preambles and associated descriptions of the proficiency evaluations so that you fully understand their purpose.