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

2. Course Outline Introduction to World Wide Web
HyperText Markup Language: Basic Tags
Publishing on the Web
Anchors, Links, and Uniform Resource Locator
Images and Image Links
Tables
Forms
CSS: Cascading Style Sheet
Class Project Solutions

3. References HTML Online Resources:
Laura Lemay & Colburn, Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: Includes New HTML5 Coverage (6th Edition), SAMS, 2010.
HTML Online Resources:
Steve Krug, Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition, 2006
Web Style Guide,
Guide to Accessing Student Web Space at
Guide to Editing Student Web Pages using Dreamweaver at
Creating a Student Website Using FrontPage at

4. The Architecture of WWW
Benefits of the Web as a delivery mechanism:
Thin clients
Platform independence
Easy for deployment/upgrade
Based on standards
HTML
documents
Web
Browser
HTTP
TCP/IP
Client
End User
Internet or
Intranet
Web
Server

5. Internet: The Virtual Network & Internal Structure
NAP
ISP
Computer
A Regional Network
TELCO
Router
Internet
LAN
NAP: National Access Point ISP: Internet Service Provider

6. Hosts on the Internet IP Datagram Datagram Header
Source: (IP Address)
Destination:
American Registry for Internet Numbers
Total about 4.3 billion IP addresses.
Router

7. Domain Name http://www.godaddy.com for domain name registration edu
DNS (Domain Name Server): Mapping the four octets (32-bit numeric) IP address (such as ) to a domain name such as student.csuci.edu
for domain name registration
The name of a host computer with an IP address
CSUCI.EDU
edu
uiuc
Top country domain name
.us
.tv (30M)
.md cs
vax
First Level
csuci
student
Second Level

8. URL: Universal Resource Locator
Domain
Name
Directory / Virtual Directory Path
/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
The web root is the physical directory path C:\InetPub\wwwroot\ that is mapped to the web site's URL without a directory path.

9. 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 (HyperText 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.

10. Client-Server Model of http1
Requesting a document via a URL address
Connection open
helper app
helper app
helper app
helper app
helper app
Web Site
Web Server
Internet or
Intranet
Web Client
Web contents
HTML documents
Images
Animation
Video clips
Sound bites
Java applets
Java Scripts
CGI scripts
Database access 2
Static
Returning MIME-compliance document
Connection close
Dynamic
MIME: Multipurpose Internet Mail Extension

11. HTTP HTTP: HyperText 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. (

12. The Extended Framework of WWW
HTML Authoring
Tools/Editors
External Applications
Non-HTTP objects
Web Designer
& Publisher
ColdFusion,
CGI (Perl)
ASP & ASP.NET
JAVA Servlet
Java Server Pages
Java Applet
JavaScript
Web Programmer
Web
Browser
Internet
Global Reach
Broad Range
Web
Server
Client
Web Master
End User

13. image list table form link <html> <head>
<title> HTML Sampler Web Page </title>
</head>
<body>
<h1>HTML Sampler</h1>
<img src="eyes.gif"><br>
<b> List: </b>
<ul>
<li> Item 1
<li> <font size=+2>Item 2</font>
<li> <i>Item 3</i>
</ul>
<table border=1>
<tr> <th> Name</th> <th>Speciality </th> </tr>
<tr> <td> Minder Chen</td> <td>MIS </td> </tr>
<tr> <td> Justin Chen</td> <td>Aerospace </td> </tr>
</table>
<p>
A sample of a form:
<form method="post"
action=" >
Name: <input type="text" size=20> <br>
<input type="checkbox" name="html" value="YES"> Know HTML <br>
<b><input type="submit" value="Submit your data"></b>
</form>
<hr> Developed by
<a href=" Advanced IT Consulting</a>
</body></html>
image
list
table
form
link

14. Introduction to HTML
HTML: HyperText 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.

15. Element Anatomy of a Tag
<H1 ALIGN="CENTER"> HTML Tutorial </H1>
<H1 ALIGN='CENTER'> HTML Tutorial </H1>
<H1 ALIGN=CENTER> HTML Tutorial </H1>
<H1 ALIGN="CENTER" > HTML Tutorial </H1>
Attribute=value
Closing
tag
Opening tag
Element

16. 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

17. A Simple HTML Document
<HTML>
<HEAD>
<TITLE>The title shows up on your Web Browser</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Title tag contain information that will be used favorably by search engines in ranking your page.

18. Basic Tools and Editing Process
From Start button
Choose Programs
Choose Accessories
Choose NotePad or WordPad
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 TextEdit if you use Mac

19. Solution: Create a Web Page
Save it at c:\temp\index.htm
<html><head><title>Advanced IT Consulting</title></head><body>
<h1>AITC Web Site</h1>
<ul>
<li>Company Introduction
<li>Products
<li>How to Contact us
<li>Online HTML Resources
</ul>
Developed by Advanced IT Consulting <br>
Contact us by at
</body></html>
AITC Web Site
Company Introduction
Products
How to Contact us
Online HTML Resources
Developed by
Advanced IT Consulting contact
us at

20. Sample Web Site Web Site Home Page Web Page C:\temp\index.htm
AITC Web Site
Company Introduction
Products
How to Contact us
Online HTML Resources
Developed by
Advanced IT Consulting contact
us at
profile.htm
AITC
AITC Introduction
AITC is …..
Guest Book Entry:
Name:
Know HTML
contact.htm
product.htm
AITC Employees
Minder Chen
Bruce Johnson
Terry Smith
[Index]
Product Listing
ID Name Price
100 TV $250
200 PC $999
210 XY $234
[Home | Intro | Product | Contact]
Submit
Resume
Web Site
Home Page
Web Page

21. HTML Elements' General Syntax
<tag_name> text </tag_name>
<title> This is a title </title>
<b> Boldface </b>
<tag_name> Singleton Tags
<br> you can also use newer standard <br />
<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>
Separate attribute-value pair with a space character

22. 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>
<br> and <nobr>
Character Formatting
Physical Versus Logical: Use Logical Tags When Possible
Using Character Tags: <b> <i>
Special Characters
Escape Sequences

23. Headings: Level 1 to 6 Xxxxx dsfdsfdsf sadsdsad 2.1 sadsad 2.2 ddddd
<html>
<head>
<title>Headings </title>
</head>
<body>
<h1>Heading 1 (Top Level)</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 (Bottom Level) </h6>
</body>
</html>
Xxxxx dsfdsfdsf
sadsdsad
2.1 sadsad
2.2 ddddd
2.2.1 xxxx
sssss
Don’t use the <h1>...<h6> to manipulate your font size.
Use <font> tag
Use <big>Test</big> or <small>Test</small>

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

25. 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 <H1> 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.

26. 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.)

27. Physical Styles Examples: <b>Boldface</b>
<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>

28. Logical and Physical Styles
<H3>Physical Styles</H3>
<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>
<H3>Logical Styles</H3>
<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>

29. Paragraph
The browser ignores any indentations or blank lines in the source text. HTML relies almost entirely on the tags for 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
<br> Force a line break
<!-- This is a comment line -->
<h1 align=center>...</h1>
<center>...</center>
<nobr> Do not wrap the enclosed text </nobr>
  Force a space character

30. 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.

31. 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>

32. 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).

33. Unordered Lists: <UL>, <LI>, </UL>
<html>
<head>
<title>Listing </title>
</head>
<body>
<p>
<h3>A Simple Unordered List</h3>
<ul>
<li>First item
<li>Second Item
</ul>
<h3>Multiple Level & Unordered List</h3>
<li>Level 1
<li>Level 1.1
<li>Level 1.2
<li>Level 2
<li>Level 2.1
<li>Level 2.2
</body>
</html>
<UL>...</UL> Netscape Extended Attribute:
TYPE="..." DISC, CIRCLE, SQUARE
<UL TYPE="SQUARE"> …. </UL>

34. Ordered Lists: <OL>, <LI>, </OL>
<html>
<head>
<title>Ordered Listing </title>
</head>
<body>
<p>
<h3>A Simple Ordered List</h3>
<ol>
<li>First item
<li>Second Item
</ol>
<h3>Multiple Level & Ordered List</h3>
<li>Level 1
<li>Level 1.1
<li>Level 1.2
<li>Level 2
<li>Level 2.1
<li>Level 2.2
<li>Mixing order and unorder list
<ul>
<li>Level 3.1
<li>Level 3.2
</ul>
</body>
</html>
<OL>...</OL> Netscape Extended Attributes:
TYPE="..." A, a, I, i, 1
Start="2" The value to start the list with
e.g., <OL type="A" start="3"> <li> … <li> … </OL>

35. 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 ">
<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=big5" >

36. Exercise: Contact Page contact.htm
<html><head><title>AITC Contact Information</title></head>
<body>
<b>[ Home | Profile | Product | Contact | Resource ]</b>
<h1>AITC Contacts</h1>
<ul>
<li>Minder Chen
<li>Bruce Johnson
<li>Robert Smith
</ul>
<hr size=6>
Minder Chen<br>
<br>
<p>
Bruce Johnson<br>
<br>
Robert Smith<br>
<br>
<p><br><br><br><br><br><br><br><br><br><br><br><br>
</body></html>

37. Hypertext and Links
Introduction to hypertext
Intra-document Links and Anchors
Inter-document Links
URL
Images and Inline image
Image links
Image map

38. 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 HyperText 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

39. Intra-document (Internal) Hypertext Links
Intra-document hyperlink links
Section 1: aaa
This is section 1
...
Back to the Table of Content
Section 2: bbb
This is section 2
Viewing area of the document
Table of contents
Section 1: aaa
Section 2: bbb
Section 3: ccc

40. Inter-document (External) Hypertext Links
...
Link to document 2
Document2
...
Link to Section D of Doc3
A B C D
an image map link
an image link
Document2
...
Section D
Link to Document1
Toolbox Document
Hammer
...
Screw Driver
....

41. Hypertext Links Anchor: <a name="anchor"></a> Hyperlink:
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>

42. Anchor text

43. Linking and Anchoring y.htm x.htm <html> … <html>
<body>
<h1>Section 1</h1>
<a href="#sec2">
Go to Section 2</a>
<a name="sec2"></a>
<h1>Section 2<h1>
</body>
</htm>
<html> …
<body>
<a href="y.htm">Top of y</a>
<a href="y.htm#sec2"> Section 2 of y</a>
</body>
</htm>

44. Example: Internal Link
<ul>
<li> <a href="#minder">Minder Chen</a>
<li>Bob Johnson
</ul>
<a name="minder"></a>Minder Chen<br>
<br>

45. 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<br>
<br>

46. Contact.htm
<html><head><title>AITC Contact Information</title></head>
<body><a name="top"><a><h1>AITC Contacts</h1>
<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<br>
<br>
[ <a href="#top">Index </a>]
<p>
<a name="johnson"></a>
Bruce Johnson<br>
<br>
<a name="smith"></a>
Robert Smith<br>
<br>
<p><br><br><br><br><br><br><br><br><br><br><br><br>
</body></html>

47. Use a Relative URL Examples: Reasons to use relative URLs
<a href=" Another file in the same directory</a>
Can be written as <a href="fileX.htm">Another file in the same directory</a>
<a href="subdir/fileY.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').

48. 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>

49. Relative URL

50. Links Between Documents
<html>
<head> <title>Links with Relative URLs </title> </head>
<body>
<h2>Links with Relative URLs</a></h2>
<h3>Links to another file on the same web site and in the same directory </h3>
<ul>
<li>Go to another document in the same directory
<li><a href="10_link.htm">Go to the Anchors and Hyperlinks</a> <br>
<li><xmp><a href="10_link.htm">Go to the Anchors and Hyperlinks</a> <br></xmp>
</ul>
<li>Go to an anchor of another document in the same directory
<li><a href="10_link.htm#section2">Go to Section 2 of the Anchors and Hyperlinks</a> <br>
<li><xmp><a href="10_link.htm#section2">Go to the Section 2 of the Anchors and Hyperlinks</a> <br></xmp>
<h3>Links to another file on the same web site but in a different directory </h3>
<li>Go to a document in a subdirectory directory of the current directory
<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
<li>Go to a document in a different directory
<li><a href="../../nvcc/oracle.htm">Go to Oracle training</a>
<li><xmp><a href="../../nvcc/oracle.htm">Go to Oracle training</a> </xmp>
</body>
</html>

51. 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.

52. 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 Unless someone tells you otherwise, leave it out.
In http, if filename is omitted, a default file such as index.html may be retrieved.
Directory path name may be case sensitive.

53. Resource Types More examples: Resource types:
http: A file on a World Wide Web server
ftp: A file on an anonymous FTP server
mailto: Send an to an 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
telnet://osf1.gmu.edu
Send an to
<a Minder Chen</a>

54. Defining Absolute Hyperlinks: <a href="URL"> Hot words </a>
<HTML><HEAD><TITLE>Hyperlinks to other web sites</TITLE></HEAD><BODY>
<H2>Using Absolute URLs </H2>
<P>Absolute URLs are used to define links to resources on other web sites.
</P>
<UL>
<LI><A href=" Chen’s Web site</a>
<LI><A href=" Directory</A><br>
<LI><a href="ftp://ftp.sausage.com/download.zip">Download hotdog HTML editor software</a><br>
</UL></BODY></HTML>
<BASE href="URL">
Set the absolute URL against which all other relative URLs are resolved.

55. 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):
Apple designer Jonathan Ive enters a new era
The synergy between 'Jony' Ive and Steve Jobs set into motion a decade of hits from the iPod to the iPad. Now Apple will be counting on Ive to deliver breakthrough designs without much input from Jobs.
Comments
Share159
Apple's then-CEO Steve Jobs talks about designer Jonathan 'Jony' Ive at a 2008 meeting in Cupertino, Calif. (Paul Sakuma, Associated Press / September 6, 2011)
Also 14
Apple discontinues 99-cent rentals of TV shows
Diplomatic cable details Apple's problems with Chinese knockoffs
SFPD gave Apple 'assistance' searching home for lost device
Apple fans shocked by Steve Jobs' resignation as CEO
Opinion: Steve Jobs' Midas touch
See more stories »
Without Steve Jobs, how will Apple fare?
By Jessica Guynn, Los Angeles Times September 5, 2011, 6:04 p.m.
Steve Jobs is a tough act to follow at Apple X
Printed on the back of every iPod, iPhone and iPad is "Designed by Apple in California." Those five words speak volumes about the pride Apple Inc. takes in design — and in design chief Jonathan Ive. Steve Jobs may have dreamed up the ideas. But Ive turned them into products with a cult following. The synergy between Apple's co-founder and its top designer set into motion a decade of hits from the iPod to the iPad. Now Apple will be counting on Ive to continue to deliver breakthrough designs without much oversight or support from Jobs, who last month stepped down as chief executive. Ive is one of the world's top industrial designers, and his work has become the stuff of case studies at design schools and permanent collections at New York City's Museum of Modern Art and the Georges Pompidou Center in Paris. All the Apple products he has designed are being featured for the first time in a high-profile design exhibition that recently opened at an art museum in Hamburg, Germany. But his value to Apple is not that his designs pleased his demanding boss or design gurus; it's that his designs helped forge a personal connection with legions of Apple fans in the fickle consumer electronics industry, analysts say. Apple's devotion to design — not just software and hardware — has for decades set the company apart from its competitors. While many electronics companies pinch pennies, Apple gambles on pioneering ideas, new materials and innovative production processes, analysts say. And Apple's design plans are not guided by market research or focus groups. Instead, Apple has relied on the instincts of Jobs and Ive to anticipate what consumers will want, said Tim Bajarin, an analyst who has tracked Apple for decades. Together, he said, Ive and Jobs fueled Apple's turnaround by transforming dull gray boxes into simple, sleek gadgets. And that has made Apple one of the world's most valuable and influential companies. Ive's design eye is so keen, it's "even better than Steve Jobs'," Bajarin said. "Steve had gut sense about industrial design, whereas Jonathan has that plus the professional design experience," he said. The 44-year-old British-born designer known to his friends as "Jony" is by all accounts a soft-spoken, self-effacing craftsman intensely driven not by money or glory (although he has plenty of both) but by the obsessive desire to create products that are meaningful to people. Former colleagues refer to the ability of a product to tap into people's emotions as "having Jony-ness." Ive and his elite team of a dozen or so designers work in secrecy in a design studio deep within Apple's Cupertino, Calif., campus. The studio, sealed off from all but Apple's top executives, is stocked with expensive prototyping equipment. The team eats pizza and listens to music while designing gadgets to make them simple for consumers to use, devoting attention to every detail in a relentless effort to peel away any part that isn't necessary, according to former Apple employees. The team works in concert with Apple's engineers and marketers, and even manufacturers, to make sure the products match the vision. Ive's goal is to "make something that looks like it wasn't really designed at all because it's inevitable," he said in "He seems to embody the very essence of the best of Apple people: a quiet, thoughtful but intense passion to do the very best," said Mike Martucci, a former Apple marketing director. "This manner, this vision and this level of passion is what drove Apple to the top before and, I believe, is driving it again." Apple declined requests to make Ive available for an interview. But in past interviews, he says he was drawn to Apple for its desire to — in the words of its own marketing campaign — "think different." He says the company's revolutionary nature was clear to him from the moment he first touched a Macintosh computer. At the time he was nearing the end of his four-year industrial design studies in England. Not one to read an instruction manual, he was frustrated with personal computers and feared he was "technically inept." Then he turned on a Mac and said he felt an instant connection to the computer and to the people who designed it. "I could just use the product straightaway. It was a really profound moment. I don't think I ever had actually quite the same sense of 'wow' with a product before," Ive said. Ive, who was fascinated by how things were made since he was a teen, joined Apple in 1992 from a small design firm in his native Britain. He called the move "some sort of reckless sense of faith." At the time, Apple was bleeding money and market share. He toiled in obscurity until five years later, when Jobs returned to pull Apple back from the brink of ruin. Jobs conducted an international search for a design director but picked Ive after wandering into the design studio and discovering the work Ive had been doing there. Ive's first product with Jobs was the iMac, the radical line of translucent desktop computers whose bright hues contrasted with the bland-looking products from competitors and whose expense flew in the face of falling prices for computers. Ive and his team even visited a confectioner as they experimented with candy colors and gumdrop shapes. At the time, Ive described brainstorming sessions with Jobs being not about the iMac's chip speed (as was common in the industry), but rather about, "How do we want people to feel about it?" Over time, Ive became so in tune with Jobs that some joke they shared a brain. With Jobs at the helm and Ive leading the design team, Apple produced a decade of cutting-edge products: the iPod in 2001, the iPhone in 2007 and the iPad in Even with millions tethered to Apple products, Ive says it's an "incredible thrill" when he spots someone with telltale white iPod earphones. "Apple was one of the few brands which was able to break out of the beige box of computers," said Thomas Meyerhoffer, who worked for Ive at Apple. "Apple as a brand promised users a different experience with their computers, a different relationship." Can Ive continue to delight consumers with his designs? That may depend on how much faith new CEO Tim Cook places in Ive and his design team and on Cook's willingness to keep investing in elements that set Apple's products apart. "Apple is a company where you are allowed to create products that are more expensive to make. It is the only company doing that," Meyerhoffer said. "Apple sees that cost in a completely different light. It's not a number on a spreadsheet; it's a necessity to make the brand keep its value and accelerate forward."
Reporting from San Francisco—

56. Include Inline Images <HTML><HEAD>
<TITLE>Image </TITLE>
</HEAD>
<BODY>
<H2>Include images in your HTML documents:<xmp><IMG SRC="image.gif"></xmp></H2>
<IMG SRC="money.gif"> How to make money on WWW? <br>
<IMG SRC="phone.gif" ALIGN=TOP> Call us!
<IMG SRC="phone.gif" ALIGN=MIDDLE> Call us!
<IMG SRC="phone.gif" ALIGN=BOTTOM> Call us! <br>
<IMG SRC="phone.gif" ALT="[an image of phone]"> Call us!
</BODY></HTML>

57. ALIGN

58. Download Image Files
Click right mouse button on top of an image in a web page
Save Picture As
Keep the original File Type

59. Example
Small Lion:
<img src="
Big Lion:
<img src="
Hot image using a thumb nail image to link to a larger image:
<a href="
<img src="
</a>

60. <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.

61. Using IMG Tag Image Link: Advanced IMG Tag Attributes:
<IMG SRC="nvcclogo.gif" LOWSRC="low_resolution.gif"
ALT="NVCC Logo"
BORDER=0
HEIGHT=32 WIDTH=32
ALIGN=LEFT>
Image Link:
<A HREF="
<IMG SRC="AITCLOGO.gif"></A>
  ALT attribute is to support Web Accessibility Compliance 508 of visually impaired individuals
Resizing the picture on the fly is not recommended. You should use graphic tool to create images of different sizes

62. Image File Types
GIF (pronounced as jiff): Graphics Interchange Format. Limited to 256 colors. Unisys owns the copyright of the LZW compression algorithm.
GIF87
GIF89a supports transparency and interlacing
Animated GIF: Use tools such as Microsoft GIF Animator at
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.

63. Examples of Using Images

64. HTML Code <HTML> <HEAD>
<TITLE>Find and Use Images and Icons</TITLE>
</HEAD>
<BODY>
<a href="
Clip art collection on Yahoo</a> <br>
<img src="left.gif">
<img src="right.gif">
<img src="down.gif">
<img src="up.gif">
<img src="top.gif">
<img src="eyes.gif"> <br>
<img src="ball2blue.gif"> Go back to where you are! <img src="goback.gif"> <br>
<img src="ball2blue.gif"> Money grows! <img src="money1.gif"> <br>
<img src="ball2blue.gif"> Using thumbnail
<a href="nailbig.gif"><img src="nailsmll.gif">with Interlace </a><br>
<a href="nailbig2.gif"><img src="nailsmll.gif"> Without interlace</a><br>
</BODY>
</HTML>

65. 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>

66. 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 (
Hardware: Scanner, Digital Camera, or Video capturing system

67. Tables: <TABLE > </TABLE>
<HTML>
<HEAD>
<TITLE> Tables </TITLE>
</HEAD>
<H3>Tables </H3>
<BODY>
A basic table that has three columns and two rows.
<TABLE BORDER>
<TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR>
<TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR>
</TABLE>
</BODY>
</HTML>
<table> tag is used traditionally for page layout control
TD: Table Data
TR: Table Row
TH: Table Header (Header Cell)

68. Product.htm TH: Table Header (Header Cell)
<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>PC100</TD><TD>Compaq Computer</TD><TD align=right>$2,000</TD>
<TD><a href=" Web Site</a></TD> </TR>
<TR> <TD>TV25</TD> <TD>25 " Sony TV</TD> <TD align=right>$300</TD> <TD> </TD> </TR>
<TR valign=top> <TD>Pet001</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)

69. More Table Examples
<HTML><HEAD><TITLE> Tables </TITLE></HEAD>
<BODY>
<H3>Tables </H3>
<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><TH>Females</TH><TD>3.6</TD><TD>3.4</TD>
</TABLE>
</BODY></HTML>
<caption align="top | bottom | left | right">
Immediately following the table opening tag.

70. 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 JavaScript 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

71. Profile.htm: First Version
<HTML><HEAD><TITLE>Form</TITLE>
</HEAD><BODY><H1> Guest Book </H1>
<FORM
ACTION=" METHOD="POST">
Name: <INPUT TYPE="text" NAME="GuestName" MAXLENGTH="30"> <BR>
<INPUT TYPE="submit" VALUE="Submit profile">
<INPUT TYPE="reset" VALUE="Reset profile">
</FORM></BODY></HTML>
Use this for URL testing purpose
<HTML><head><title>Form Test</title></head>
<BODY>
<h1>Form Data Submitted</h1>
<table border=3>
<%
Response.Write _
"<TR><TH>Form Variable Name</TH><TH>Form Data Value</TH></TR>"
Set Params = Request.Form
For Each p in Params
Response.Write "<TR><TD>" & p & "</TD><TD>" & _
Params(p) & " </TD></TR>"
Next
%>
</table>
</body></html>

72. Using Server-Side Script to Process User Inputs via Form
Request an HTML form
Return the requested form
Data and environment
variables forwarded to a
CGI or server-side script
Data submitted by user
Web Browser
Web Server
Server-side script
Return output to server
Forward output to Browser

73. Form Elements The Form tag: Form tag attributes: Form elements tags:
<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

74. INPUT Tag Example: TYPE
Last Name: <INPUT TYPE="text" NAME="LastName" 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

75. Sample Form HTML Page

76. Profile.htm: HTML Source
<HTML><HEAD><TITLE>Form</TITLE></HEAD><BODY>
<H1> Customer Registration </H1>
<FORM ACTION=" METHOD="POST">
Name: <INPUT TYPE="text" NAME="GuestName" MAXLENGTH="30"> <BR>
<INPUT TYPE="checkbox" NAME="KnowHTML" 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>

77. 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"> <br>
<INPUT TYPE="image" SRC="slion.gif">
</FORM>
</BODY></HTML>

78. Send Form Data to an E-Mail Account
<form method=POST
request"
ENCTYPE="text/plain">
Name: <input type="text" name="customer"><br>
<input type="text" name=" "><br>
Interests: <input type="text" name="interest"><br>
<input type="submit">
</form>
Note: Your browser needs to be set up
to support function.
Without the ENCTYPE attribute, you will be receiving the following message:

79. HTML Extensions Client Pull Font size Background color
Image-Tiled Background

80. 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=REFRESH2.HTM">
</HEAD>
<BODY>
<A HREF="refresh2.html">Next</A></P>
<H1>This is the first slide</H1>
<P>Hello </P>
</BODY></HTML>
<META HTTP-EQUIV="REFRESH" CONTENT="4”>
Refresh the same page every 4 seconds.

81. 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.

82. BGCOLOR <HTML><HEAD>
<TITLE>This is the second slide</TITLE>
<META HTTP-EQUIV="REFRESH" CONTENT="4; URL=REFRESH3.HTM">
</HEAD>
<BODY BGCOLOR=#FFFF00>
<P><A HREF="refresh1.html">Previous</A> <A HREF="refresh1.html">Top</A> <A HREF="refresh3.html">Next</A></P>
<H1>This is the second slide</H1>
<P><FONT size=+2> world! </FONT></P>
</BODY></HTML>

83. RGB Color Red Green Blue (RGB)
Red: #00 No red <---> #FF bright red
#000000: White
#FFFFFF: Black
<body bgcolor="#FFFF00">
<body bgcolor="magenta">
<body bgcolor="blue4"> Netscape only
blue1 (=blue), blue2, blue3, blue4 (from light to dark)
Color related attributes such as BGCOLOR

84. Color Name http://www.lynda.com
Follow the web color link for RGB values of web safe color

85. <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="#FFFF00" 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

86. Image-Tiled Background
<HTML><HEAD>
<TITLE>This is the third slide</TITLE>
<BODY BACKGROUND="tile.gif" bgproperties="fixed">
<P><A HREF="refresh2.htm2">Previous</A>
<A HREF="refresh1.html">Top</A></P>
<H1>This is the third slide</H1>
<P><FONT size=7> Minder! </FONT></P>
</BODY></HTML>

87. 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 :
Angelfire :
Geocities :
HTML spell checking:

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

89. index.htm <a href="contact.htm#smith">Robert Smith</a> at
<html>
<head>
<title>Advanced IT Consulting</title>
</head>
<body>
<h1>AITC Web Site</h1>
<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="
Advanced IT Consulting
</a>
contact us
<a
</a> at
</body></html>

90. 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> ]
<h1>AITC Contacts</h1>
<ul>
<li><a href="#chen">Minder Chen</a>
<li><a href="#johnson">Bruce Johnson</a>
<li><a href="#smith">Robert Smith</a>
</ul>

91. contact.htm (continued)
<hr width=6>
<a name="chen"></a>
Minder Chen<br>
<br>
[ <a href="#top">Index </a>]
<p>
<a name="johnson"></a>
Bruce Johnson<br>
<br>
<a name="smith"></a>
Robert Smith<br>
<br>
<p><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

92. resource.htm (Graphics examples)
<html>
<head><title>Online Resource: Graphics</title></head>
<body bgcolor="yellow">
<h1>Online Resource</h1>
AITC Logo: <img src="
Logo 1: With Transparency <img src="
Logo 2: Without Transparency <img src="
Small Lion: <img src="
Big Lion: <img src="
Hot image using a thumb nail image to link to a larger image:
<a href="
<img src="
</a>
</body></html>

93. 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>
<h1>AITC Product Listing</h1>
<table border=2>
<tr> <th>ID</th><th width=100>Name</th>
<th align= right width=80> Price</th> </tr>
<tr> <td>100</td> <td>TV</td> <td align= right >$250</td> </tr>
<tr> <td>200</td> <td>PC</td> <td align= right >$999</td> </tr>
<tr> <td>210</td> <td>XY</td> <td align= right >$234</td> </tr>
</table>
</body>
</html>

94. profile.htm <html> <head>
<title>AITC Company Profile </title>
</head>
<body>
<h1>AITC Introduction</h1>
AITC is IT consulting and training firm. ...
<p>
Guest Book Entry:
<hr>
<form method="POST"
action=" ">
Name: <input type="text" name="guestname"><br>
<input type="checkbox" name="html" CHECK> Know HTML <br>
<input type="submit"> <input type="reset" value="Resume">
</form>
</body>
</html>

95. table.htm (background Image)
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso ">
<META NAME="Author" CONTENT="Minder Chen">
<TITLE>Tables and Background Color</TITLE>
</HEAD>
<BODY BACKGROUND="bgc.gif">
<H1>Two Column Format and Background Color</H1>
<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>
</TR></TABLE></BODY></HTML>