HTML Authoring and Web Publishing

Transcript HTML Authoring and Web Publishing

HTML Authoring and Web Publishing
Minder Chen, Ph.D.
[email protected]
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
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
© Minder Chen, 1996-2011
HTML & Web Publishing - 2
References
• 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:
– http://www.w3schools.com/html/
– http://www.htmlcodetutorial.com/
– http://www.htmlcodetutorial.com/quicklist.html
– Steve Krug, Don't Make Me Think: A Common Sense Approach to
Web Usability, 2nd Edition, 2006
– Web Style Guide, http://webstyleguide.com/wsg3/index.html
– Guide to Accessing Student Web Space at
http://www.csuci.edu/it/web/studentwebspace.htm
– Guide to Editing Student Web Pages using Dreamweaver at
http://www.csuci.edu/it/web/documents/HowToCreateAStudentWebSiteUsingDreamweaver-v4.doc
– Creating a Student Website Using FrontPage at
http://www.csuci.edu/it/web/documents/CreatingStudentWebSitesUsingFrontPage-v5.doc
© Minder Chen, 1996-2011
HTML & Web Publishing - 3
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 - 4
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 - 5
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 - 6
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 (30M)
.md
Second
Level
© Minder Chen, 1996-2011
HTML & Web Publishing - 7
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:\InetPub\wwwroot\ that is mapped to the web site's
URL without a directory path.
© Minder Chen, 1996-2011
HTML & Web Publishing - 8
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.
© Minder Chen, 1996-2011
HTML & Web Publishing - 9
Client-Server Model of http
1
helper app
helper app
helper app
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 - 10
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.
(https://URL)
© Minder Chen, 1996-2011
HTML & Web Publishing - 11
The Extended Framework of WWW
HTML
Authoring
Tools/Editors
Web
Browser
Web Designer
& Publisher
External Applications
Non-HTTP objects
Web Programmer
• ColdFusion,
• CGI (Perl)
• ASP & ASP.NET
• JAVA Servlet
• Java Server
Pages
• Java Applet
• JavaScript
Internet
Global Reach
Broad Range
Client
End User
© Minder Chen, 1996-2011
Web
Server
Web Master
HTML & Web Publishing - 12
<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="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query" >
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="http://www.erols.com/aitc/"> Advanced IT Consulting</a>
</body></html>
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.
© Minder Chen, 1996-2011
HTML & Web Publishing - 14
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
Opening tag
Closing
tag
Element
© Minder Chen, 1996-2011
HTML & Web Publishing - 15
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 - 16
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 - 17
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
http://www.askdavetaylor.com/how_do_i_use_textedit_with_html_files_on_mac_os_x.html
© Minder Chen, 1996-2011
HTML & Web Publishing - 18
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 email at [email protected]
</body></html>
AITC Web Site
• Company Introduction
• Products
• How to Contact us
• Online HTML Resources
Developed by
Advanced IT Consulting contact
us at [email protected]
© Minder Chen, 1996-2011
HTML & Web Publishing - 19
Sample Web Site
C:\temp\index.htm
AITC Web Site
• Company Introduction
AITC
• Products
• How to Contact us
• Online HTML Resources
Developed by
Advanced IT Consulting contact
us at [email protected]
profile.htm
AITC Introduction
AITC is …..
contact.htm
product.htm
[Home | Intro | Product | Contact]
Product Listing
ID
100
200
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 - 20
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
– <p>
</p> closing </p> is optional
– <hr>
<br />
• <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 - 21
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
© Minder Chen, 1996-2011
HTML & Web Publishing - 22
Headings: Level 1 to 6
<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>
1. Xxxxx
dsfdsfdsf
2. sadsdsad
2.1 sadsad
2.2 ddddd
2.2.1 xxxx
3. sssss
• Don’t use the <h1>...<h6> to
manipulate your font size.
• Use <font> tag
• Use <big>Test</big> or
<small>Test</small>
© Minder Chen, 1996-2011
HTML & Web Publishing - 23
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.w3.org/)
image file
.gif or .jpg (JPEG)
Multimedia
Authoring Tool
HTML File
<img src="abc.gif">
<a href="def.mov">
Local Developer
Workstation
Dolphin File upload
Web Hosting Environment
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 <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.
© Minder Chen, 1996-2011
HTML & Web Publishing - 25
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 fixedwidth 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 - 26
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 - 27
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>
© Minder Chen, 1996-2011
HTML & Web Publishing - 28
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
• 
•
•
•
•
<h1 align=center>...</h1>
<center>...</center>
<nobr> Do not wrap the enclosed text </nobr>
  Force a space character
© Minder Chen, 1996-2011
HTML & Web Publishing - 29
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 - 30
Horizontal Lines <HR>
<HTML>
<HEAD>
<TITLE>Horizontal Line </TITLE>
</HEAD>
<BODY>
<HR>

<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 - 31
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 - 32
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>
<h3>A Simple Unordered List</h3>
<ul>
<li>First item
<li>Second Item
</ul>
<h3>Multiple Level & Unordered List</h3>
<ul>
<li>Level 1
<ul>
<li>Level 1.1
<li>Level 1.2
</ul>
<li>Level 2
<ul>
<li>Level 2.1
<li>Level 2.2
</ul>
</ul>
</body>
</html>
© Minder Chen, 1996-2011
HTML & Web Publishing - 33
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>
<h3>A Simple Ordered List</h3> • e.g., <OL type="A" start="3"> <li> … <li> … </OL>
<ol>
<li>First item
<li>Second Item
</ol>
<h3>Multiple Level & Ordered List</h3>
<ol>
<li>Level 1
<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 - 34
© 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=big5" >
© Minder Chen, 1996-2011
HTML & Web Publishing - 35
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>
703-334-4566<br>
<p>
Bruce Johnson<br>
703-334-4577<br>
<p>
Robert Smith<br>
703-334-5555<br>
<p><br><br><br><br><br><br><br><br><br><br><br><br>
</body></html>
© Minder Chen, 1996-2011
HTML & Web Publishing - 36
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 - 37
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
© Minder Chen, 1996-2011
HTML & Web Publishing - 38
Intra-document (Internal) Hypertext Links
Intra-document hyperlink links
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 - 39
Inter-document (External) Hypertext Links
Document1
...
Link to document 2
...
Document2
...
...
Link to Section D of Doc3
...
...
ABCD
an image map link
an image link
Toolbox Document
Hammer
...
Screw Driver
....
© Minder Chen, 1996-2011
Document2
...
...
Section D
...
...
Link to Document1
...
...
HTML & Web Publishing - 40
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 - 41
Anchor text
© Minder Chen, 1996-2011
HTML & Web Publishing - 42
Linking and Anchoring
x.htm
<html>
…
<body>
…
<a href="y.htm">Top of y</a>
…
…
<a href="y.htm#sec2">
Section 2 of y</a>
…
</body>
</htm>
© Minder Chen, 1996-2011
y.htm
<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 & Web Publishing - 43
Example: Internal Link
<ul>
<li> <a href="#minder">Minder Chen</a>
<li>Bob Johnson
</ul>
<a name="minder"></a>Minder Chen<br>
703-999-8888<br>
© Minder Chen, 1996-2011
HTML & Web Publishing - 44
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>
703-334-4577<br>
© Minder Chen, 1996-2011
HTML & Web Publishing - 45
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>
703-334-4566<br>
[ <a href="#top">Index </a>]
<p>
<a name="johnson"></a>
Bruce Johnson<br>
703-334-4577<br>
[ <a href="#top">Index </a>]
<p>
<a name="smith"></a>
Robert Smith<br>
703-334-5555<br>
[ <a href="#top">Index </a>]
<p><br><br><br><br><br><br><br><br><br><br><br><br>
</body></html>
© Minder Chen, 1996-2011
HTML & Web Publishing - 46
Use a Relative URL
• Examples:
– <a href="http://www.aitc.com/~mchen/fileX.htm"> 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').
© Minder Chen, 1996-2011
HTML & Web Publishing - 47
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 - 48
Relative URL
© Minder Chen, 1996-2011
HTML & Web Publishing - 49
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
<ul>
<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
<ul>
<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>
</ul>
</ul>
<h3>Links to another file on the same web site but in a different directory </h3>
<ul>
<li>Go to a document in a subdirectory directory 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>
</ul>
</body>
</html>
HTML & Web Publishing - 50
© 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 - 51
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 - 52
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:[email protected]
telnet://osf1.gmu.edu
© Minder Chen, 1996-2011
Send an email ([email protected]) to
<a href="mailto:[email protected]">
Minder Chen</a>
HTML & Web Publishing - 53
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="http://faculty.csuci.edu/minder.chen">Dr. Chen’s Web site</a>
<LI><A href="http://www.yahoo.com/">Yahoo 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.
© Minder Chen, 1996-2011
HTML & Web Publishing - 54
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 - 55
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>
© Minder Chen, 1996-2011
HTML & Web Publishing - 56
ALIGN
© Minder Chen, 1996-2011
HTML & Web Publishing - 57
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 - 58
Example
Small Lion:
<img src="http://www.erols.com/aitc/slion.gif"><br>
Big Lion:
<img src="http://www.erols.com/aitc/blion.gif"><br>
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 - 59
<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 - 60
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 - 61
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
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 - 62
Examples of Using Images
© Minder Chen, 1996-2011
HTML & Web Publishing - 63
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> <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>
<img src="ball2blue.gif"> Using thumbnail
<a href="nailbig2.gif"><img src="nailsmll.gif"> Without
interlace</a><br>
</BODY>
</HTML>
© Minder Chen, 1996-2011
HTML & Web Publishing - 64
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 - 65
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 - 66
Tables: <TABLE > </TABLE>
<HTML>
<HEAD>
<TITLE> Tables </TITLE>
</HEAD>
<H3>Tables </H3>
<BODY>
A basic table that has three columns and two rows.
<table> tag is used
traditionally for page
layout control
<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>
• TD: Table Data
• TR: Table Row
• TH: Table Header (Header Cell)
© Minder Chen, 1996-2011
HTML & Web Publishing - 67
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>PC100</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>
<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)
© Minder Chen, 1996-2011
HTML & Web Publishing - 68
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>
<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 - 69
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
© Minder Chen, 1996-2011
HTML & Web Publishing - 70
Profile.htm: First Version
<HTML><HEAD><TITLE>Form</TITLE>
</HEAD><BODY><H1> Guest Book </H1>
<FORM
ACTION="http://faculty.csuci.edu/minder.chen/FORMSCRIPT.ASPX"
METHOD="POST">
Use this for URL testing purpose
Name: <INPUT TYPE="text" NAME="GuestName"
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 - 71
© Minder Chen, 1996-2011
Server-side script
Web Server
Web Browser
Using Server-Side Script to Process User Inputs via Form
HTML & Web Publishing - 72
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 - 73
INPUT Tag
• Example:
– 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
© Minder Chen, 1996-2011
HTML & Web Publishing - 74
Sample Form HTML Page
© Minder Chen, 1996-2011
HTML & Web Publishing - 75
Profile.htm: HTML Source
<HTML><HEAD><TITLE>Form</TITLE></HEAD><BODY>
<H1> Customer Registration </H1>
<FORM ACTION="http://faculty.csuci.edu/minder.chen/FORMSCRIPT.ASPX"
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>
© Minder Chen, 1996-2011
HTML & Web Publishing - 76
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>
© Minder Chen, 1996-2011
HTML & Web Publishing - 77
Send Form Data to an E-Mail Account
<form method=POST
action="mailto:[email protected]?subject=Customer request"
ENCTYPE="text/plain">
Name: <input type="text" name="customer"><br>
E-mail: <input type="text" name="email"><br>
Interests: <input type="text" name="interest"><br>
<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 protected]&interest=running+chi-kung+%24
© Minder Chen, 1996-2011
HTML & Web Publishing - 78
HTML Extensions
•
•
•
•
Client Pull
Font size
Background color
Image-Tiled Background
© Minder Chen, 1996-2011
HTML & Web Publishing - 79
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.
© Minder Chen, 1996-2011
HTML & Web Publishing - 80
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 - 81
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>
© Minder Chen, 1996-2011
HTML & Web Publishing - 82
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
© Minder Chen, 1996-2011
HTML & Web Publishing - 83
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 - 84
<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
© Minder Chen, 1996-2011
HTML & Web Publishing - 85
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>
© Minder Chen, 1996-2011
HTML & Web Publishing - 86
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 - 87
Class Project Solution
C:\temp\index.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 [email protected]
profile.htm
AITC Introduction
AITC is …..
contact.htm
product.htm
[Home | Intro | Product | Contact]
Product Listing
ID
100
200
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>
<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="http://www.erols.com/aitc/">
Advanced IT Consulting
</a>
contact us
<a href="mailto:[email protected]">by email
</a> at [email protected]
</body></html>
© Minder Chen, 1996-2011
HTML & Web Publishing - 89
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>
© Minder Chen, 1996-2011
HTML & Web Publishing - 90
contact.htm (continued)
<hr width=6>
<a name="chen"></a>
Minder Chen<br>
703-334-4566<br>
[ <a href="#top">Index </a>]
<p>
<a name="johnson"></a>
Bruce Johnson<br>
703-334-4577<br>
[ <a href="#top">Index </a>]
<p>
<a name="smith"></a>
Robert Smith<br>
703-334-5555<br>
[ <a href="#top">Index </a>]
<p><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
© Minder Chen, 1996-2011
HTML & Web Publishing - 91
resource.htm (Graphics examples)
<html>
<head><title>Online Resource: Graphics</title></head>
<body bgcolor="yellow">
<h1>Online Resource</h1>
AITC Logo: <img src="http://www.erols.com/aitc/aitc.gif"><br>
Logo 1: With Transparency <img src="http://www.erols.com/aitc/aitc1.gif"><br>
Logo 2: Without Transparency <img src="http://www.erols.com/aitc/aitc2.gif"><br>
Small Lion: <img src="http://www.erols.com/aitc/slion.gif"><br>
Big Lion: <img src="http://www.erols.com/aitc/blion.gif"><br>
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 - 92
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>
© Minder Chen, 1996-2011
HTML & Web Publishing - 93
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=" http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query ">
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>
<hr>
</body>
</html>
© Minder Chen, 1996-2011
HTML & Web Publishing - 94
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">
<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>
</TD>
</TR></TABLE></BODY></HTML>
© Minder Chen, 1996-2011
HTML & Web Publishing - 95