HTML Authoring and Web Publishing HTML Authoring ToolsEditors

HTML Authoring and Web Publishing HTML Authoring Tools/Editors Web Publisher External Applications Non-HTTP objects CGI: Common Gateway Interface Web Browser Web Server Internet Global Reach Broad Range Client End User Web Master Server

The Architecture of WWW Benefits of the Web as a delivery mechanism: • • Web Browser Thin clients Platform independence Easy for deployment/upgrade Based on standards HTML documents HTTP TCP/IP Client End User © Minder Chen, 1996 -2011 Internet or Intranet Web Server HTML & Web Publishing - 2

Internet: The Virtual Network & Internal Structure NAP ISP Computer Router A Regional Network Internet TELCO LAN NAP: National Access Point ISP: Internet Service Provider © Minder Chen, 1996 -2011 HTML & Web Publishing - 3

Hosts on the Internet • IP Datagram – Datagram Header Total about 4. 3 billion IP addresses. • Source: 15. 127. 9. 12 (IP Address) • Destination: 254. 231. 15. 129 • American Registry for Internet Numbers https: //www. arin. net/ Router © Minder Chen, 1996 -2011 HTML & Web Publishing - 4

Domain Name • DNS (Domain Name Server): Mapping the four octets (32 -bit numeric) IP address (such as 217. 156. 3. 14) to a domain name such as student. csuci. edu • http: //www. godaddy. com for domain name registration The name of a host computer with an IP address CSUCI. EDU edu First Level csuci student uiuc cs vax Top country domain name. us. tv (30 M). md Second Level © Minder Chen, 1996 -2011 HTML & Web Publishing - 5

URL: Universal Resource Locator Domain Name Directory / Virtual Directory Path http: //www. aitc. com: 80 /mydir/mysubdir/index. html Port Number Web Resource File Name • Default Port Number for WWW Service is 80 • Default file names are defined by the web administrator, the default file names for IIS are: Default. asp and Default. htm http: //www. aitc. com/mydir/mysubdir/ • The web root is the physical directory path C: Inet. Pubwwwroot that is mapped to the web site's URL without a directory path. © Minder Chen, 1996 -2011 HTML & Web Publishing - 6

Key Elements of Web • Hypertext: Non-linear links to anchors of the same document, or to different documents on the same or different web site. – Using HTML (Hyper. Text Markup Language) links and anchors – Relying on URL (Uniform Resource Locators) addressing scheme • Multimedia: graphics, video, sound, etc. – Web browser can access networked hypermedia. – Hypermedia access of the web browser is facilitated by helper applications, plug-ins, or document viewers. • Network: Global reach and "Universal" access – Based on HTTP which is built on top of the TCP/IP protocol. © Minder Chen, 1996 -2011 HTML & Web Publishing - 7

Client-Server Model of http 1 helper app helper app • Requesting a document via a URL address • Connection open Web Site Web Server Internet or Intranet Web Client 2 Static • Returning MIMEcompliance document • Connection close Dynamic MIME: Multipurpose Internet Mail Extension © Minder Chen, 1996 -2011 Web contents • HTML documents • Images • Animation • Video clips • Sound bites • Java applets • Java Scripts • CGI scripts • Database access HTML & Web Publishing - 8

HTTP • HTTP: Hyper. Text Transfer Protocol • Characteristics: – Runs on top of TCP/IP (Transmission Control Protocol/Internet Protocol) – Has a comprehensive addressing scheme, i. e. URL – An extensible and open representation for data type, using MIME header – Has a stateless protocol. There is no memory between client connections. Cookies are used to track users. – Is efficient – Is portable – Possible extensions, Secure HTTP (SHPPT), SSL. (https: //URL) © Minder Chen, 1996 -2011 HTML & Web Publishing - 9

The Extended Framework of WWW HTML Authoring Tools/Editors Web Browser Web Designer & Publisher External Applications Non-HTTP objects Web Programmer • Cold. Fusion, • CGI (Perl) • ASP & ASP. NET • JAVA Servlet • Java Server Pages • Java Applet • Java. Script Internet Global Reach Broad Range Client End User © Minder Chen, 1996 -2011 Web Server Web Master HTML & Web Publishing - 10

<html> <head> e <title> HTML Sampler Web Page </title> g </head> ma i <body> <h 1>HTML Sampler</h 1> <img src="eyes. gif"> <b> List: </b> ist l <ul> <li> Item 1 <li> <font size=+2>Item 2</font> le <li> <i>Item 3</i> b ta </ul> <table border=1> <tr> <th> Name</th> <th>Speciality </th> </tr> <td> Minder Chen</td> <td>MIS </td> </tr> <td> Justin Chen</td> <td>Aerospace </td> </tr> </table> <p> m A sample of a form: or f <form method="post" action="http: //hoohoo. ncsa. uiuc. edu/cgi-bin/post-query" > Name: <input type="text" size=20> <input type="checkbox" name="html" value="YES"> Know HTML <b><input type="submit" value="Submit your data"></b> </form> <hr> Developed by <a href="http: //www. erols. com/aitc/"> Advanced IT Consulting</a> </body></html> k lin

Introduction to HTML • HTML: Hyper. Text Markup Language; Most web pages on the World Wide Web are created in a standard document format known as HTML. • In practical terms, HTML is a collection of styles (indicated by markup tags) that define the various components of a World Wide Web document. HTML was invented by Tim Berners-Lee while at CERN. • The "Hypertext" in HTML is the links that allow you to surf from one document to the next on the World Wide Web. • All Web browsing tools like Microsoft Internet Explorer, and Firefox, read HTML documents and allow you to browse these documents by traversing these links. • Not all browsing tools interpret or display HTML in the exact same way. This is why some pages look different in one browser than they do in another. It is important to keep this in mind when you are creating your web pages. Test your web pages on different browsers. © Minder Chen, 1996 -2011 HTML & Web Publishing - 12

Anatomy of a Tag <H 1 ALIGN="CENTER"> HTML Tutorial </H 1> <H 1 ALIGN='CENTER'> HTML Tutorial </H 1> <H 1 ALIGN=CENTER> HTML Tutorial </H 1> <H 1 ALIGN="CENTER" > HTML Tutorial </H 1> Attribute=value Opening tag Closing tag Element © Minder Chen, 1996 -2011 HTML & Web Publishing - 13

HTML Tags: Document Structure • <HTML></HTML>: start and end of HTML document • <HEAD></HEAD>: Contain meta-information of the document • <BODY></BODY>: content of document displayed by the browser © Minder Chen, 1996 -2011 HTML & Web Publishing - 14

A Simple HTML Document <HTML> <HEAD> <TITLE>The title shows up on your Web Browser</TITLE> </HEAD> <BODY> Title tag contain information </BODY> </HTML> © Minder Chen, 1996 -2011 that will be used favorably by search engines in ranking your page. HTML & Web Publishing - 15

Basic Tools and Editing Process • • • • From Start button Choose Programs Choose Accessories Choose Note. Pad or Word. Pad Enter your HTML code Save it as Text File – Choose "Text Document" Format – Name the file with. htm extension Open the Internet Explorer Choose File / Open Page … Choose the file you just saved Open the file to view it Go back to edit your HTML code Use ALT-TAB key to switch back to the browser Click "Reload" button to refresh it Use ALT-TAB key to switch back to the Editor Use Text. Edit if you use Mac http: //www. askdavetaylor. com/how_do_i_use_textedit_with_html_files_on_mac_os_x. html © Minder Chen, 1996 -2011 HTML & Web Publishing - 16

Solution: Create a Web Page Save it at c: tempindex. htm <html><head><title>Advanced IT Consulting</title></head><body> <h 1>AITC Web Site</h 1> <ul> <li>Company Introduction <li>Products <li>How to Contact us <li>Online HTML Resources </ul> Developed by Advanced IT Consulting Contact us by email at aitc@erols. com </body></html> AITC Web Site • Company Introduction • Products • How to Contact us • Online HTML Resources Developed by Advanced IT Consulting contact us at aitc@erols. com © Minder Chen, 1996 -2011 HTML & Web Publishing - 17

Sample Web Site C: tempindex. htm AITC Web Site • Company Introduction AITC • Products • How to Contact us • Online HTML Resources Developed by Advanced IT Consulting contact us at aitc@erols. com profile. htm AITC Introduction AITC is …. . contact. htm product. htm [Home | Intro | Product | Contact] Product Listing ID 100 210 Name TV PC XY Price $250 $999 $234 © Minder Chen, 1996 -2011 AITC Employees • Minder Chen • Bruce Johnson • Terry Smith Minder Chen 703 -334 -4566 [Index] Bruce Johnson 703 -334 -4577 [Index] Guest Book Entry: Name: Know HTML Submit Resume • Web Site • Home Page • Web Page HTML & Web Publishing - 18

HTML Elements' General Syntax • <tag_name> text </tag_name> – <title> This is a title </title> – <b> Boldface </b> • <tag_name> Singleton Tags – you can also use newer standard – <p> </p> closing </p> is optional – <hr> • <tag_name attribute=value> text </tag_name> – – <a name="home"> This Is the Top </a> <hr WIDTH=50% ALIGN='left' SIZE=12> <hr WIDTH=50% ALIGN=center SIZE=3> <hr WIDTH=100% ALIGN=left SIZE=6 NOSHADE> © Minder Chen, 1996 -2011 Separate attribute-value pair with a space character HTML & Web Publishing - 19

Basic Elements of HTML Coding • Basic Markup Tags – – Titles Headings Paragraphs Lists • • Unnumbered Lists Numbered Lists Definition Lists Nested Lists – Preformatted Text: <pre> – Extended Quotes – Addresses • Line Breaks – Horizontal Rules <hr> – and <nobr> • Character Formatting – – Physical Versus Logical: Use Logical Tags When Possible Using Character Tags: <b> <i> Special Characters Escape Sequences © Minder Chen, 1996 -2011 HTML & Web Publishing - 20

Headings: Level 1 to 6 <html> <head> <title>Headings </title> </head> <body> <h 1>Heading 1 (Top Level)</h 1> <h 2>Heading 2</h 2> <h 3>Heading 3</h 3> <h 4>Heading 4</h 4> <h 5>Heading 5</h 5> <h 6>Heading 6 (Bottom Level) </h 6> </body> </html> 1. Xxxxx dsfdsfdsf 2. sadsdsad 2. 1 sadsad 2. 2 ddddd 2. 2. 1 xxxx 3. sssss • Don’t use the <h 1>. . . <h 6> to manipulate your font size. • Use <font> tag • Use <big>Test</big> or <small>Test</small> © Minder Chen, 1996 -2011 HTML & Web Publishing - 21

Document source Web Authoring Environment Line Art Drawing Tool HTML Converter Digital Image Tool Graphic File Conversion Tool WYSIWYG HTML Editor HTML Source Editor HTML Validation Tools (http: //validator. w 3. org/) image file. gif or. jpg (JPEG) HTML File <img src="abc. gif"> <a href="def. mov"> Local Developer Workstation Dolphin File upload Web Hosting Environment Multimedia Authoring Tool video/sound file. mov, . avi, . . . Web Site Management Tool ftp tool http: //student. csuci. edu/~bob. smith/ Web Server

Physical and Logical Styles in HTML • If physical and logical styles produce the same result on the screen, why are there both? It is because of the philosophy of SGML, which can be summed in a Zen-like mantra: "Trust your browser. '' • In the ideal HTML universe, content is separated from presentation. Thus, HTML tags a level-one heading as a level-one heading, but does not specify that the level-one heading should be displayed. • The advantage of this approach (it's similar in concept to style sheets in many word processors) is that if you decide to change level-one headings to be 20 -point left-justified Helvetica, all you have to do is change the definition of the level-one heading in the presentation device (i. e. , your World Wide Web browser) or cascading style sheet (CSS). • The other advantage of logical tags is that they help enforce consistency in your documents. It's easier to tag something as <H 1> than to remember that level-one headings are 24 -point bold Times or whatever. The same is true for character styles. For example, consider the <STRONG> tag. Most browsers render it in bold text. However, it is possible that a reader would prefer that these sections be displayed in red instead. Logical styles offer this flexibility. © Minder Chen, 1996 -2011 HTML & Web Publishing - 23

Logical Styles • <DFN>: for a word being defined. Typically displayed in italics. (NCSA Mosaic is a World Wide Web browser. ) • <EM>: for emphasis. Typically displayed in italics. (Watch out for pickpockets. ) • <CITE>: for titles of books, films, etc. Typically displayed in italics. (A Beginner's Guide to HTML) • <CODE>: for snippets of computer code. Displayed in a fixed-width font. (The <stdio. h> header file) • <KBD>: for user keyboard entry. Should be displayed in a bold fixed -width font, but many browsers render it in the plain fixed-width font. (Enter passwd to change your password. ) • <SAMP>: for computer status messages. Displayed in a fixed-width font. (Segmentation fault: Core dumped. ) • <STRONG>: for strong emphasis. Typically displayed in bold. (Important) • <VAR>: for a "metasyntactic'' variable, where the user is to replace the variable with a specific instance. Typically displayed in italics. (rm filename deletes the file. ) © Minder Chen, 1996 -2011 HTML & Web Publishing - 24

Physical Styles • • • <B>: bold text <I>: italic text <U>: Underline text (Don’t use it) <TT>: typewriter text, e. g. fixed-width font <PRE>: Use a non-proportional font to maintain the white spaces, tabs, and carriage returns. Examples: • <b>Boldface</b> • <PRE> This is a tabbed line </pre> • Correct: <b> <i> Boldface and italic </i> </b> • Incorrect: <i> <b> Boldface and italic </i> </b> © Minder Chen, 1996 -2011 HTML & Web Publishing - 25

Logical and Physical Styles <H 3>Physical Styles</H 3> <I>Italic</I> <BR><B>Bold</B> <BR><U>Underline</U> <BR><TT>Type writer font</TT> <BR><B><I>Bold and Italic</I></B> <BR><STRIKE>Strikethrough</STRIKE> <BR><BLINK>Blink in Netscape Browser</BLINK> <BR><marquee>Maruqee sign in Internet Explorer</marquee> <H 3>Logical Styles</H 3> <SUB>Subscirpt</SUB> and <SUP>Superscript</SUP> <BR><em>emphasis</em> <BR><strong>strong</strong> <BR><TT>sample</TT> <BR><code>code such as main() { }</code> <BR><kbd>keyboard</kbd> <BR><var>variable xyz, abc, </var> <BR><cite>citation</cite> <ADDRESS> 100 Main Street, Major City, MD 20817</ADDRESS> © Minder Chen, 1996 -2011 HTML & Web Publishing - 26

Paragraph • The browser ignores any indentations or blank lines in the source text. HTML relies almost entirely on the tags formatting instructions, and without the <P> tags, the document becomes one large paragraph. • <p>. . . </p> The closing tag </p> is optional • <p> Start a new paragraph • <p align=center> HTML 3. 0 feature • Force a line break • <!-- This is a comment line --> • <h 1 align=center>. . . </h 1> • <center>. . . </center> • <nobr> Do not wrap the enclosed text </nobr> •   Force a space character © Minder Chen, 1996 -2011 HTML & Web Publishing - 27

Paragraph: To Break or No To Break <NOBR>This is a paragraph. Spaces, line breaks, empty lines do not work in HTML documents. </NOBR> You need to use line break tag < br> .   This line has a line break. <BR>This line is followed by a horizontal line. <HR> <PRE>Another paragraph after <hr> the < hr> </PRE> This is another paragraph with extra    space. © Minder Chen, 1996 -2011 HTML & Web Publishing - 28

Horizontal Lines <HR> <HTML> <HEAD> <TITLE>Horizontal Line </TITLE> </HEAD> <BODY> <HR> <!-- Netscape extensions --> <HR WIDTH=50% ALIGN=left SIZE=12> <HR WIDTH=50% ALIGN=center SIZE=3> <HR WIDTH=100% ALIGN=left SIZE=6 NOSHADE> </BODY> </HTML> © Minder Chen, 1996 -2011 HTML & Web Publishing - 29

Listing • HTML supplies five list elements. With the exception of DL, list elements are composed of one or more LI (list item) elements. You can nest lists by inserting a UL, OL, etc. , inside a list item (LI). • Five list types: – OL: ordered list. Items in this list are numbered automatically by the browser. The numbering will reflect nesting levels. – UL: unordered list. Items in this list start with a list mark such as a bullet. Browsers will usually change the list mark in nested lists. – MENU: menu list. This is an unordered list. Each LI element in this kind of list should be no longer than one line. – DIR: directory list. This is an unordered list. Each LI element in this kind of list should be no longer than 24 characters. – DL: list of definitions. This is an unordered list. This kind of list is different from the others. Each `item' in a DL consists of one or more terms (DT elements), followed by definitions (DD elements). © Minder Chen, 1996 -2011 HTML & Web Publishing - 30

Unordered Lists: <UL>, <LI>, </UL> <html> <head> • <UL>. . . </UL> Netscape Extended Attribute: <title>Listing </title> • TYPE=". . . " DISC, CIRCLE, SQUARE </head> <body> • <UL TYPE="SQUARE"> …. </UL> <p> <h 3>A Simple Unordered List</h 3> <ul> <li>First item <li>Second Item </ul> <h 3>Multiple Level & Unordered List</h 3> <ul> <li>Level 1. 1 <li>Level 1. 2 </ul> <li>Level 2 <ul> <li>Level 2. 1 <li>Level 2. 2 </ul> </body> </html> © Minder Chen, 1996 -2011 HTML & Web Publishing - 31

Ordered Lists: <OL>, <LI>, </OL> <html> <head> • <OL>. . . </OL> Netscape Extended Attributes: <title>Ordered Listing </title> • TYPE=". . . " A, a, I, i, 1 </head> <body> • Start="2" The value to start the list with <p> <h 3>A Simple Ordered List</h 3> • e. g. , <OL type="A" start="3"> <li> … </OL> <ol> <li>First item <li>Second Item </ol> <h 3>Multiple Level & Ordered List</h 3> <ol> <li>Level 1. 1 <li>Level 1. 2 </ol> <li>Level 2 <ol> <li>Level 2. 1 <li>Level 2. 2 </ol> <li>Mixing order and unorder list <ul> <li>Level 3. 1 <li>Level 3. 2 </ul> </ol> </body> </html> HTML & Web Publishing - 32 © Minder Chen, 1996 -2011

Document Meta Tags • <TITLE></TITLE>: document title; goes in <HEAD> session. • <BASE href="URL">: base reference, the full URL of the current document; goes in HEAD <HTML><HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859 -1"> <META NAME="Author" CONTENT="Minder Chen"> <META NAME="GENERATOR" CONTENT="Mozilla/4. 03 [en] [Netscape]"> <META NAME="Keywords" CONTENT="HTML, hypertext"> <META NAME="description" CONTENT="HTML tutorial for everyone"> <TITLE>test</TITLE></HEAD> For search engine optimization (SEO) For traditional Chinese: <META http-equiv="Content-Type" content="text/html; charset=big 5" > © Minder Chen, 1996 -2011 HTML & Web Publishing - 33

Exercise: Contact Page contact. htm <html><head><title>AITC Contact Information</title></head> <body> <b>[ Home | Profile | Product | Contact | Resource ]</b> <h 1>AITC Contacts</h 1> <ul> <li>Minder Chen <li>Bruce Johnson <li>Robert Smith </ul> <hr size=6> Minder Chen 703 -334 -4566 <p> Bruce Johnson 703 -334 -4577 <p> Robert Smith 703 -334 -5555 <p> </body></html> © Minder Chen, 1996 -2011 HTML & Web Publishing - 34

Hypertext and Links • • Introduction to hypertext Intra-document Links and Anchors Inter-document Links URL Images and Inline image Image links Image map © Minder Chen, 1996 -2011 HTML & Web Publishing - 35

Introduction to Hypertext • Definition of hypertext: "A combination of natural language text with the computer's capacity for interactive branching, or dynamic display. . . of a nonlinear text. " -- Ted Nelson • The idea of hypertext system can be traced back to Vannevar Bush, President Roosevelt's Sciences Advisor, 1945 article "As We May Think" in which he described the idea of mechanize the scientific literature system. • Now hypertext really means hypermedia that include not just text, but also audio, graphic, video, etc. • Hypertext documents on WWW usually are stored in a special format called HTML, stands for Hyper. Text Markup Language. • A browser will be used to the hypertext document retrieved. Think about how you should organize your documents • Short documents for easy consumption • In modular forms for easy maintenance • Tap into other online resources by linking to them • Add multimedia objects to spice up your contents © Minder Chen, 1996 -2011 HTML & Web Publishing - 36

Intra-document (Internal) Hypertext Links Intra-document hyperlinks Table of contents Section 1: aaa Section 2: bbb Section 3: ccc Viewing area of the document Section 1: aaa This is section 1. . . Back to the Table of Content Section 2: bbb This is section 2. . . © Minder Chen, 1996 -2011 HTML & Web Publishing - 37

Inter-document (External) Hypertext Links Document 1. . . Link to document 2. . . Document 2. . . Link to Section D of Doc 3. . . ABCD an image link Toolbox Document Hammer. . . Screw Driver. . © Minder Chen, 1996 -2011 an image map link Document 2. . . Section D. . . Link to Document 1. . . HTML & Web Publishing - 38

Hypertext Links • A hypertext link is a pointer pointing to another document or another part of the current document. • These linked documents can be on the same WWW server or on WWW servers distributed globally. • Hypertext links are represented as a purple color and underlined texts, or as a graphic object (inline graphics). When you move the mouse cursor over a hypertext link, the mouse cursor will change from a pointer to a pointing hand. • You may use Image Maps such that different parts of the graphic representing links to different documents. Anchor: <a name="anchor"></a> Hyperlink: <a href="URL#anchor">Hot words</a> © Minder Chen, 1996 -2011 HTML & Web Publishing - 39

Anchor text © Minder Chen, 1996 -2011 HTML & Web Publishing - 40

Linking and Anchoring x. htm <html> … <body> … <a href="y. htm">Top of y</a> … … <a href="y. htm#sec 2"> Section 2 of y</a> … </body> </htm> © Minder Chen, 1996 -2011 y. htm <html> … <body> <h 1>Section 1</h 1> … <a href="#sec 2"> Go to Section 2</a> … … <a name="sec 2"></a> <h 1>Section 2<h 1> … </body> </htm> HTML & Web Publishing - 41

Example: Internal Link <ul> <li> <a href="#minder">Minder Chen</a> <li>Bob Johnson </ul> <a name="minder"></a>Minder Chen 703 -999 -8888 © Minder Chen, 1996 -2011 HTML & Web Publishing - 42

External Link Using Relative URL index. htm Contact <a href="contact. htm#johnson">Bruce Johnson</a> for web problems. contact. htm <a name=" johnson "></a> Bruce Johnson 703 -334 -4577 © Minder Chen, 1996 -2011 HTML & Web Publishing - 43

Contact. htm <html><head><title>AITC Contact Information</title></head> <body><a name="top"><a><h 1>AITC Contacts</h 1> <ul> <li><a href="#chen">Minder Chen</a> <li><a href="#johnson">Bruce Johnson</a> <li><a href="#smith">Robert Smith</a> </ul> <hr width=6> <a name="chen"></a> Minder Chen 703 -334 -4566 [ <a href="#top">Index </a>] <p> <a name="johnson"></a> Bruce Johnson 703 -334 -4577 [ <a href="#top">Index </a>] <p> <a name="smith"></a> Robert Smith 703 -334 -5555 [ <a href="#top">Index </a>] <p> </body></html> © Minder Chen, 1996 -2011 HTML & Web Publishing - 44

Use a Relative URL • Examples: – <a href="http: //www. aitc. com/~mchen/file. X. htm"> Another file in the same directory</a> – Can be written as <a href="file. X. htm">Another file in the same directory</a> – <a href="subdir/file. Y. htm">Another file in the subdirectory under current document's directory</a> • Reasons to use relative URLs – Less typing is required to enter them. – If you move all the files to a different location but keep the same directory structure you don't have to revise the URLs. – The same file referred to by a relative URL can be accessed by different schemes (for example both 'http' and 'ftp'). © Minder Chen, 1996 -2011 HTML & Web Publishing - 45

Document Directory Structure Web document root y. htm (in the html folder) <a href="/html/y. htm">Root relative path</a <a href=". . /y. htm">Document relative path</a> x. htm (<a href="x. htm">in the same folder</a>) 10_link. htm (Current Document) 10_test. htm (<a href="webpub/10_test. htm"></a>) oracle. htm (<a href=". . /nvcc/oracle. htm"></a> © Minder Chen, 1996 -2011 HTML & Web Publishing - 46

Relative URL © Minder Chen, 1996 -2011 HTML & Web Publishing - 47

Links Between Documents <html> <head> <title>Links with Relative URLs </title> </head> <body> <h 2>Links with Relative URLs</a></h 2> <h 3>Links to another file on the same web site and in the same directory </h 3> <ul> <li>Go to another document in the same directory <ul> <li><a href="10_link. htm">Go to the Anchors and Hyperlinks</a> <li><xmp><a href="10_link. htm">Go to the Anchors and Hyperlinks</a> </xmp> </ul> <li>Go to an anchor of another document in the same directory <ul> <li><a href="10_link. htm#section 2">Go to Section 2 of the Anchors and Hyperlinks</a> <li><xmp><a href="10_link. htm#section 2">Go to the Section 2 of the Anchors and Hyperlinks</a> </xmp> </ul> <h 3>Links to another file on the same web site but in a different directory </h 3> <ul> <li>Go to a document in a subdirectory of the current directory <ul> <li><a href="webpub/10_test. htm">Go to a 10_test. htm in the subdirectory /webpub under /tutor </a> <li><xmp><a href="webpub/10_test. htm">Go to 10_test. htm </a></xmp> in a subdirectory webpub under /tutor </ul> <li>Go to a document in a different directory <ul> <li><a href=". . /nvcc/oracle. htm">Go to Oracle training</a> <li><xmp><a href=". . /nvcc/oracle. htm">Go to Oracle training</a> </xmp> </ul> </body> </html> HTML & Web Publishing - 48 © Minder Chen, 1996 -2011

Creating Links from My Favorites in IE From IE, Favorites > Organize Favorites then drag-and-drop a link from my favorites to an HTML document in the Design mode in VWD. © Minder Chen, 1996 -2011 HTML & Web Publishing - 49

URL: Uniform Resource Locator • Uniform Resource Locator: A standard method of identifying any document or resource on the Internet. • The port number can generally be omitted. The default http port name is 80. Unless someone tells you otherwise, leave it out. • In http, if filename is omitted, a default file such as index. html may be retrieved. – http: //www. aitc. com/mydoc/ – http: //www. aitc. com: 80/mydoc/index. html • Directory path name may be case sensitive. © Minder Chen, 1996 -2011 HTML & Web Publishing - 50

Resource Types • Resource types: – http: A file on a World Wide Web server – ftp: A file on an anonymous FTP server – mailto: Send an e-mail to an e-mail address – file: A file on your local system – gopher: A file on a Gopher server – WAIS: A file on a WAIS server – news: An Usenet newsgroup – telnet: A connection to a Telnet-based service • More examples: – – – ftp: //ftp. ncsa. uiuc. edu/Web gopher: make. up. something news: comp. databases. oracle mailto: aitc@erols. com telnet: //osf 1. gmu. edu © Minder Chen, 1996 -2011 Send an email (aitc@erols. com) to <a href="mailto: aitc@erols. com"> Minder Chen</a> HTML & Web Publishing - 51

Defining Absolute Hyperlinks: <a href="URL"> Hot words </a> <HTML><HEAD><TITLE>Hyperlinks to other web sites</TITLE></HEAD><BODY> <H 2>Using Absolute URLs </H 2> <P>Absolute URLs are used to define links to resources on other web sites. </P> <UL> <LI><A href="http: //faculty. csuci. edu/minder. chen">Dr. Chen’s Web site</a> <LI><A href="http: //www. yahoo. com/">Yahoo Directory</A> <LI><a href="ftp: //ftp. sausage. com/download. zip">Download hotdog HTML editor software</a> </UL></BODY></HTML> <BASE href="URL"> Set the absolute URL against which all other relative URLs are resolved. © Minder Chen, 1996 -2011 HTML & Web Publishing - 52

Easy to Use and Navigate • People often ask: – “What’s the most important thing I should do if I want to make sure my Web site is easy to use? ” • The answer is simple. It’s not – “Nothing important should ever be more than 2 clicks away, ” – “Speak the user’s language, ” – “Be consistent. ” • It’s. . . Don’t make me think!” – Steve Krug, Don’t Make Me Think, 2006. Also read (Apple SVP of Design): http: //www. latimes. com/business/la-fi-apple-ive-20110906, 0, 7852640. story © Minder Chen, 1996 -2011 HTML & Web Publishing - 53

Include Inline Images <HTML><HEAD> <TITLE>Image </TITLE> </HEAD> <BODY> <H 2>Include images in your HTML documents: <xmp><IMG SRC="image. gif"></xmp></H 2> <IMG SRC="money. gif"> How to make money on WWW? <IMG SRC="phone. gif" ALIGN=TOP> Call us! <IMG SRC="phone. gif" ALIGN=MIDDLE> Call us! <IMG SRC="phone. gif" ALIGN=BOTTOM> Call us! <IMG SRC="phone. gif" ALT="[an image of phone]"> Call us! </BODY></HTML> © Minder Chen, 1996 -2011 HTML & Web Publishing - 54

ALIGN © Minder Chen, 1996 -2011 HTML & Web Publishing - 55

Download Image Files Click right mouse button on top of an image in a web page Save Picture As Keep the original File Type © Minder Chen, 1996 -2011 HTML & Web Publishing - 56

Example Small Lion: <img src="http: //www. erols. com/aitc/slion. gif"> Big Lion: <img src="http: //www. erols. com/aitc/blion. gif"> Hot image using a thumb nail image to link to a larger image: <a href="http: //www. erols. com/aitc/blion. gif"> <img src="http: //www. erols. com/aitc/slion. gif"> </a> © Minder Chen, 1996 -2011 HTML & Web Publishing - 57

<img> syntax • <img src="slion. gif" align=left> Text float around the image that is placed on the left. • <img src="slion. gif" align=right> • <br clear="all | left | right | none"> – Break the floating text. – Clear="left": The next line begins at the nearest line at either margin following any floating objects. © Minder Chen, 1996 -2011 HTML & Web Publishing - 58

Using IMG Tag Advanced IMG Tag Attributes: <IMG SRC="nvcclogo. gif" LOWSRC="low_resolution. gif" ALT="NVCC Logo" ALT attribute is to support Web Accessibility Compliance 508 of visually BORDER=0 impaired individuals HEIGHT=32 WIDTH=32 ALIGN=LEFT> Resizing the picture on the fly is not Image Link: recommended. You should use graphic tool to create images of different sizes <A HREF="http: //www. aitc. com/"> <IMG SRC="AITCLOGO. gif"></A> © Minder Chen, 1996 -2011 HTML & Web Publishing - 59

Image File Types • GIF (pronounced as jiff): Graphics Interchange Format. Limited to 256 colors. Unisys owns the copyright of the LZW compression algorithm. – GIF 87 – GIF 89 a supports transparency and interlacing – Animated GIF: Use tools such as Microsoft GIF Animator at http: //www. microsoft. com/imagecomposer/ • JPEG (pronounced jay-peg): Joint Photographic Experts Images. Good for photographic images. • Use thumbnail for big image file. • Use interlacing for big files. • Cut down number of colors used to reduce file size. 8 bit/pixel resolution is 256 colors. • Max 5 seconds download time per page. © Minder Chen, 1996 -2011 HTML & Web Publishing - 60

Examples of Using Images © Minder Chen, 1996 -2011 HTML & Web Publishing - 61

HTML Code <HTML> <HEAD> <TITLE>Find and Use Images and Icons</TITLE> </HEAD> <BODY> <a href="http: //www. yahoo. com/computers/multimedia/pictures/clip_art/"> Clip art collection on Yahoo</a> <img src="left. gif"> <img src="right. gif"> <img src="down. gif"> <img src="up. gif"> <img src="top. gif"> <img src="eyes. gif"> <img src="ball 2 blue. gif"> Go back to where you are! <img src="goback. gif"> <img src="ball 2 blue. gif"> Money grows! <img src="money 1. gif"> <img src="ball 2 blue. gif"> Using thumbnail <a href="nailbig. gif"><img src="nailsmll. gif">with Interlace </a> <img src="ball 2 blue. gif"> Using thumbnail <a href="nailbig 2. gif"><img src="nailsmll. gif"> Without interlace</a> </BODY> </HTML> © Minder Chen, 1996 -2011 HTML & Web Publishing - 62

Link to an External Image File • Text link to an external image file <a href="nailbig. gif"> Go to nail</a> • A thumbnail image link to an external image file <a href="nailbig. gif"><img src="nailsmll. gif"></a> • Both thumbnail image link and text link to an external image file <a href="nailbig. gif"><img src="nailsmll. gif">Go to nail</a> © Minder Chen, 1996 -2011 HTML & Web Publishing - 63

Graphic and Image Tools • Use Paint from Windows Accessories • Adobe Photoshop has been the definitive application for digital image enhancement, retouching, and photo composition and it is also the de facto standard for preparing images for the World Wide Web. • Use tools such as Adobe Illustrator for complicated line art drawings (www. adobe. com) • Hardware: Scanner, Digital Camera, or Video capturing system © Minder Chen, 1996 -2011 HTML & Web Publishing - 64

Tables: <TABLE > </TABLE> <HTML> <HEAD> <TITLE> Tables </TITLE> </HEAD> <H 3>Tables </H 3> <BODY> A basic table that has three columns and two rows. <table> tag is used traditionally for page layout control <TABLE BORDER> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> </BODY> </HTML> • TD: Table Data • TR: Table Row • TH: Table Header (Header Cell) © Minder Chen, 1996 -2011 HTML & Web Publishing - 65

Product. htm <HTML><HEAD><TITLE> AITC Products </TITLE></HEAD> <BODY>Product Table <TABLE Border=3 Cellspacing=10 Cellpadding=5> <TR><TH>ID</TH> <TH width=150>Name</TH> <TH >Price</TH> <TH>Comment</TH></TR> <TR><TD>PC 100</TD><TD>Compaq Computer</TD><TD align=right>$2, 000</TD> <TD><a href="http: //www. compaq. com/">Compaq's Web Site</a></TD> </TR> <TD>TV 25</TD> <TD>25 " Sony TV</TD> <TD align=right>$300</TD> <TD>  </TD> </TR> <TR valign=top> <TD>Pet 001</TD> <TD>Little Lion</TD> <TD>$50</TD> <TD><img src="slion. gif"></TD> </TR> <TR><TD colspan=4>10% discount off the list price today</TD></TR> </TABLE> </BODY></HTML> • TH: Table Header (Header Cell) © Minder Chen, 1996 -2011 HTML & Web Publishing - 66

More Table Examples <HTML><HEAD><TITLE> Tables </TITLE></HEAD> <BODY> <H 3>Tables </H 3> <TABLE BORDER> <CAPTION ALIGN=top>Table 1. WWW Course Grade Analysis</CAPTION> <TR><TH ROWSPAN=2></TH><TH ></TH> <TH COLSPAN=2>Degree</TH> </TR> <TR><TH></TH> <TH>MBA</TH><TH>Others</TH></TR> <TR><TH ROWSPAN=2>Gender</TH> <TH>Males</TH><TD>3. 5</TD><TD>3. 1</TD> </TR> <TR><TH>Females</TH><TD>3. 6</TD><TD>3. 4</TD> </TR> </TABLE> </BODY></HTML> <caption align="top | bottom | left | right"> Immediately following the table opening tag. © Minder Chen, 1996 -2011 HTML & Web Publishing - 67

Forms • Support interactive applications: Guest Books, User Survey, Online Shopping, etc. • Need to use CGI scripts or other server-side scripts to process form inputs • No local input data validation: client-side scripting using Java. Script may allow you to perform local input data validation WWW: One-way Publishing 2 -way Interactions Transaction processing applications Web 2. 0: Platforms for Participation Social networking applications © Minder Chen, 1996 -2011 HTML & Web Publishing - 68

Profile. htm: First Version <HTML><HEAD><TITLE>Form</TITLE> </HEAD><BODY><H 1> Guest Book </H 1> <FORM ACTION="http: //faculty. csuci. edu/minder. chen/FORMSCRIPT. ASPX" METHOD="POST"> Use this for URL testing purpose Name: <INPUT TYPE="text" NAME="Guest. Name" MAXLENGTH="30"> <BR> <INPUT TYPE="submit" VALUE="Submit profile"> <INPUT TYPE="reset" VALUE="Reset profile"> </FORM></BODY></HTML> © Minder Chen, 1996 -2011 HTML & Web Publishing - 69

Using Server-Side Script to Process User Inputs via Form form Web Browser sted e u q e r e Return th Data sub mitted by form user Data and environm ent variables forwarde d to a CGI or se rver-side script er to serv t u p t u o turn Re owser r B o t t u outp Forward © Minder Chen, 1996 -2011 Server-side script an HTML Web Server Request HTML & Web Publishing - 70

Form Elements • The Form tag: – <FORM ACTION="URL">… form elements … </FORM> • Form tag attributes: – ACTION – METHOD: • GET: default, fill-out form contents are appended to the URL. • POST: Fill-out form contents are sent to the server in a data body. • Form elements tags: – INPUT tag: specify a simple input element inside a form. – SELECT tag: List box or dropdown list box – TEXTAREA tag: Multiple line text box input © Minder Chen, 1996 -2011 HTML & Web Publishing - 71

INPUT Tag • Example: – Last Name: <INPUT TYPE="text" NAME="Last. Name" SIZE=20> • TYPE – – – – TEXT: Single line text box PASSWORD: Password entry CHECKBOX: Check box RADIO: Radio button HIDDEN: Hidden field sends a variable and a value SUBMIT: Submit button RESET: Reset button • NAME: required for all form elements other than SUBMIT and RESET buttons • VALUE: default value for textbox; label for submit and reset buttons • CHECKED: Apply to Check box and Radio button • SIZE: Size of the Text box. • MAXLENGTH: Maximum number of characters acceptable in a textbox © Minder Chen, 1996 -2011 HTML & Web Publishing - 72

Sample Form HTML Page © Minder Chen, 1996 -2011 HTML & Web Publishing - 73

Profile. htm: HTML Source <HTML><HEAD><TITLE>Form</TITLE></HEAD><BODY> <H 1> Customer Registration </H 1> <FORM ACTION="http: //faculty. csuci. edu/minder. chen/FORMSCRIPT. ASPX" METHOD="POST"> Name: <INPUT TYPE="text" NAME="Guest. Name" MAXLENGTH="30"> <BR> <INPUT TYPE="checkbox" NAME="Know. HTML" VALUE="on" CHECKED>I know HTML <BR> How would you like to receive information from in the future? <BR> <INPUT TYPE="radio" NAME="media" VALUE="em" CHECKED> By Electronic Mail <BR> <INPUT TYPE="radio" NAME="media" VALUE="fx">By Fax<BR> <INPUT TYPE="radio" NAME="media" VALUE="po"> By Postal Mail<BR> © Minder Chen, 1996 -2011 HTML & Web Publishing - 74

Continue… Choose Your Favorite Color: <SELECT NAME="Color" SIZE="1"> <OPTION value="B">Blue <OPTION>Red <OPTION value="G" SELECTED>Green <OPTION value="BR">Brown <OPTION value="Y">Yellow</SELECT> <BR> Enter your comment here: <TEXTAREA NAME="comment“ ROWS="3"></TEXTAREA><BR> <INPUT TYPE="submit" VALUE="Submit profile"> <INPUT TYPE="reset" VALUE="Reset profile"> <INPUT TYPE="image" SRC="slion. gif"> </FORM> </BODY></HTML> © Minder Chen, 1996 -2011 HTML & Web Publishing - 75

Send Form Data to an E-Mail Account <form method=POST action="mailto: aitc@erols. com? subject=Customer request" ENCTYPE="text/plain"> Name: <input type="text" name="customer"> E-mail: <input type="text" name="email"> Interests: <input type="text" name="interest"> <input type="submit"> </form> Note: Your browser needs to be set up to support email function. Without the ENCTYPE attribute, you will be receiving the following message: customer=Minder+Chen&email=minderchen@yahoo. com&interest=running+chi-k © Minder Chen, 1996 -2011 HTML & Web Publishing - 76

HTML Extensions • • Client Pull Font size Background color Image-Tiled Background © Minder Chen, 1996 -2011 HTML & Web Publishing - 77

Client Pull Using the META Tag Have to be in the Header section <HTML> <HEAD> <TITLE>This is the first slide</TITLE> <META HTTP-EQUIV="REFRESH" CONTENT="4; URL=REFRESH 2. HTM"> </HEAD> <BODY> <A HREF="refresh 2. html">Next</A></P> <H 1>This is the first slide</H 1> <P>Hello </P> </BODY></HTML> <META HTTP-EQUIV="REFRESH" CONTENT="4”> Refresh the same page every 4 seconds. © Minder Chen, 1996 -2011 HTML & Web Publishing - 78

Preventing a Document From Being Cached • You can prevent a document from being cached by adding the following META tag to the document. <META HTTP-EQUIV="Expires" CONTENT="0"> • Preventing the document from being cached ensures that a fresh copy of the document will always be retrieved from the site, even during the user's current session, regardless of how the user has set the browser's caching options. This is useful if the content of the document changes frequently. © Minder Chen, 1996 -2011 HTML & Web Publishing - 79

BGCOLOR <HTML><HEAD> <TITLE>This is the second slide</TITLE> <META HTTP-EQUIV="REFRESH" CONTENT="4; URL=REFRESH 3. HTM"> </HEAD> <BODY BGCOLOR=#FFFF 00> <P><A HREF="refresh 1. html">Previous</A> <A HREF="refresh 1. html">Top</A> <A HREF="refresh 3. html">Next</A></P> <H 1>This is the second slide</H 1> <P><FONT size=+2> world! </FONT></P> </BODY></HTML> © Minder Chen, 1996 -2011 HTML & Web Publishing - 80

RGB Color • • Red Green Blue (RGB) Red: #00 No red <---> #FF bright red #000000: White #FFFFFF: Black <body bgcolor="#FFFF 00"> <body bgcolor="magenta"> <body bgcolor="blue 4"> Netscape only • blue 1 (=blue), blue 2, blue 3, blue 4 (from light to dark) • Color related attributes such as BGCOLOR © Minder Chen, 1996 -2011 HTML & Web Publishing - 81

Color Name • http: //www. lynda. com • Follow the web color link for RGB values of web safe color © Minder Chen, 1996 -2011 HTML & Web Publishing - 82

<font> and <basefont> <basefont size=7>This <font size=-1>is <font size=-2>getting <font size=-3>smaller <font size=3>and this is normal. <font color="#FFFF 00" face="Arial, Helvetica, sans -serif" size=7>Try me </font> You can increase the <font size=+2> size </font> of the text’s font. • Face: Internet Explorer only • Default basefont size is 3 © Minder Chen, 1996 -2011 HTML & Web Publishing - 83

Image-Tiled Background <HTML><HEAD> <TITLE>This is the third slide</TITLE> <BODY BACKGROUND="tile. gif" bgproperties="fixed"> <P><A HREF="refresh 2. htm 2">Previous</A> <A HREF="refresh 1. html">Top</A></P> <H 1>This is the third slide</H 1> <P><FONT size=7> Minder! </FONT></P> </BODY></HTML> © Minder Chen, 1996 -2011 HTML & Web Publishing - 84

Free Web Hosting • Start New Sites: You may want to start new sites for different subjects you want to cover. You can then submit your new sites and link the sites together to share the traffic. Here are places where you can get free sites: – Tripod : http: //www. tripod. com – Angelfire : http: //www. angelfire. com/ – Geocities : http: //www. geocities. com/ HTML spell checking: http: //www. netmechanic. com/ © Minder Chen, 1996 -2011 HTML & Web Publishing - 85

Class Project Solution C: tempindex. htm AITC Web Site • Company Introduction AITC • Products • How to Contact us • Online HTML Resources Developed by Robert Smith at Advanced IT Consulting contact us by mail at aitc@erols. com profile. htm AITC Introduction AITC is …. . contact. htm product. htm [Home | Intro | Product | Contact] Product Listing ID 100 210 Name TV PC XY Price $250 $999 $234 AITC Employees • Minder Chen • Bruce Johnson • Robert Smith Minder Chen 703 -334 -4566 [Index] Bruce Johnson 703 -334 -4577 [Index] Guest Book Entry: Name: Know HTML Submit Resume Web Site Home Page Web Page

index. htm <html> <head> <title>Advanced IT Consulting</title> </head> <body> <h 1>AITC Web Site</h 1> <ul> <li><a href="profile. htm">Introduction</a> <li><a href="product. htm">Products</a> <li><a href="contact. htm">How to Contact Us</a> <li><a href="resource. htm">Online HTML Resources</a> </ul> Developed by <a href="contact. htm#smith">Robert Smith</a> at <a href="http: //www. erols. com/aitc/"> Advanced IT Consulting </a> contact us <a href="mailto: aitc@erols. com">by email </a> at aitc@erols. com </body></html> © Minder Chen, 1996 -2011 HTML & Web Publishing - 87

contact. htm <html> <head> <title>AITC Contact Information</title> </head> <body> <a name="top"><a> [ <a href="index. htm">Home</a> | <a href="profile. htm">Profile</a> | <a href="product. htm">Product</a> | <a href="contact. htm">Contact</a> | <a href="resource. htm">Resource</a> ] <h 1>AITC Contacts</h 1> <ul> <li><a href="#chen">Minder Chen</a> <li><a href="#johnson">Bruce Johnson</a> <li><a href="#smith">Robert Smith</a> </ul> © Minder Chen, 1996 -2011 HTML & Web Publishing - 88

contact. htm (continued) <hr width=6> <a name="chen"></a> Minder Chen 703 -334 -4566 [ <a href="#top">Index </a>] <p> <a name="johnson"></a> Bruce Johnson 703 -334 -4577 [ <a href="#top">Index </a>] <p> <a name="smith"></a> Robert Smith 703 -334 -5555 [ <a href="#top">Index </a>] <p> </body> </html> © Minder Chen, 1996 -2011 HTML & Web Publishing - 89

resource. htm (Graphics examples) <html> <head><title>Online Resource: Graphics</title></head> <body bgcolor="yellow"> <h 1>Online Resource</h 1> AITC Logo: <img src="http: //www. erols. com/aitc. gif"> Logo 1: With Transparency <img src="http: //www. erols. com/aitc 1. gif"> Logo 2: Without Transparency <img src="http: //www. erols. com/aitc 2. gif"> Small Lion: <img src="http: //www. erols. com/aitc/slion. gif"> Big Lion: <img src="http: //www. erols. com/aitc/blion. gif"> Hot image using a thumb nail image to link to a larger image: <a href="http: //www. erols. com/aitc/blion. gif"> <img src="http: //www. erols. com/aitc/slion. gif"> </a> </body></html> © Minder Chen, 1996 -2011 HTML & Web Publishing - 90

product. htm <html> <head> <title>AITC Contact Information</title> </head> <body> <font size=4> [ <a href="index. htm">Home</a> | <a href="profile. htm">Profile</a> | Product | <a href="contact. htm">Contact</a> | <a href="resource. htm">Resource</a> ] </font> <h 1>AITC Product Listing</h 1> <table border=2> <tr> <th>ID</th><th width=100>Name</th> <th align= right width=80> Price</th> </tr> <td>100</td> <td>TV</td> <td align= right >$250</td> </tr> <td>200</td> <td>PC</td> <td align= right >$999</td> </tr> <td>210</td> <td>XY</td> <td align= right >$234</td> </tr> </table> </body> </html> © Minder Chen, 1996 -2011 HTML & Web Publishing - 91

profile. htm <html> <head> <title>AITC Company Profile </title> </head> <body> <h 1>AITC Introduction</h 1> AITC is IT consulting and training firm. . <p> Guest Book Entry: <hr> <form method="POST" action=" http: //hoohoo. ncsa. uiuc. edu/cgi-bin/post-query "> Name: <input type="text" name="guestname"> <input type="checkbox" name="html" CHECK> Know HTML <input type="submit"> <input type="reset" value="Resume"> </form> <hr> </body> </html> © Minder Chen, 1996 -2011 HTML & Web Publishing - 92

table. htm (background Image) <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859 -1"> <META NAME="Author" CONTENT="Minder Chen"> <TITLE>Tables and Background Color</TITLE> </HEAD> <BODY BACKGROUND="bgc. gif"> <H 1>Two Column Format and Background Color</H 1> <TABLE CELLPADDING=0 COLS=2 WIDTH="100%" > <TR VALIGN=TOP> <TD WIDTH="120"> <UL> <LI><A HREF="profile. htm">Profile</A></LI> <LI><A HREF="contact. htm">Contact</A></LI> <LI><A HREF="product. htm">Products</A></LI> <LI><A HREF="resource. htm">Online Resource</A></LI> </UL> </TD> <TD><IMG SRC="logo. gif" HEIGHT=73 WIDTH=183> <B>Advanced IT Consulting is a consulting firm specialized in training and consulting in emerging IT.   </B> </TD> </TR></TABLE></BODY></HTML> © Minder Chen, 1996 -2011 HTML & Web Publishing - 93