+ All Categories
Home > Documents > HTML Authoring and Web Publishing Minder Chen, Ph.D. [email protected] Web Browser Client Web Server...

HTML Authoring and Web Publishing Minder Chen, Ph.D. [email protected] Web Browser Client Web Server...

Date post: 19-Dec-2015
Category:
View: 226 times
Download: 2 times
Share this document with a friend
Popular Tags:
149
HTML Authoring and Web Publishing Minder Chen, Ph.D. [email protected] Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher Server External Applications Non-HTTP objects CGI: Common Gateway Interface Internet Global Reach Broad Range
Transcript
Page 1: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

HTML Authoring and Web PublishingMinder Chen, Ph.D.

[email protected]

Web Browser

Client

Web Server

HTML Authoring Tools/Editors

End User Web Master

Web Publisher

Server

External ApplicationsNon-HTTP objects

CGI: Common Gateway Interface

Internet Global Reach Broad Range

Page 2: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 2

Course Description

The basic architecture of the World Wide Web (WWW) and its implications to business people, IS professionals and end users is the focus of this course. Basic HTML (HyperText Markup Language) tags for defining document structure and appearance, for defining anchors and hyperlinks, plus advanced HTML features including tables, images, forms, and frames will be explained. Participants will create their own web page in the computer lab using HTML authoring tools. Issues on Web page design and style, as well as how to promote a home page will be discussed.

Page 3: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 3

Course Outline• Introduction to World Wide Web • HyperText Markup Language: Basic Tags• Anchors, Links, and Uniform Resource Locator• Images and Image Links• Tables • Multimedia Contents• Forms • HTML Extensions• Frames • Web Publishing • Class Project Solutions

Page 4: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 4

References• Laura Lemay, Teach Yourself Web Publishing With HTML 4 in 21 Days

, Professional Reference Edition, 2nd Edition, SAMS, Feb. 2000.

• HTML Online Resources: – B&N http://www.affiliates.net/affnet/traffic.asp– Introduction to HTML

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

– HTML Resources: http://www.w3.org/MarkUp/

– HTML 3.2: http://www.w3.org/MarkUp/Wilbur/

– http://wdvl.internet.com/Authoring/HTML/4/Tags/

– http://www.htmlcompendium.org/

– http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/

– HTML-kit: An HTML editor

http://www.chami.com/html-kit/#download

Page 5: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 5

The Architecture of WWW

Web Browser

Client

Web Server

End User

HTTPTCP/IP

HTML documents

Internetor

Intranet

Page 6: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 6

WWW: What Is It? • The World Wide Web (WWW) is a breakthrough in new

technology designed to enable global, distributed information systems.

• From a user's perspective, the Web is a collection of documents, or pages, which contain text, images, and hypertext links to other pages.

• WWW merges the techniques of information retrieval and hypertext to create a powerful global information system. By simply pointing and clicking, the user has instant access to a mind-boggling collection of information, distributed across the globe.

• From an information providers point of view, the Web is an easy and efficient way of distributing any kind of information to a very large audience. Nobody is certain of how many users are on the Internet, but estimates start at 20 million.

Page 7: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 7

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 TCP/IP protocol.

Page 8: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 8

Client-Server Model of http

Web Server

Web Client

• Requesting a document via a URL address

• Connection open

• Returning MIME-compliance document

• Connection close

help

er app

help

er app

help

er app

help

er app

help

er app

Web contents• HTML documents• Images• Animation• Video clips• Sound bites• Java applets• Java Scripts• CGI scripts• Database access

Web Site

Internet or Intranet

1

2Static

Dynamic

MIME: Multipurpose Internet Mail Extension

Page 9: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 9

HTTP

• HTTP: HyperText Transfer Protocol• Characteristics:

– Runs on top of TCP/IP– 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.

– Is efficient– Is portable – Possible extensions, Secure HTTP (SHPPT), SSL,

HTTP-Next Generation

Page 10: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 10

The Extended Framework of WWW

Web Browser

Client

HTML Authoring Tools/Editors

End User Web Master

Web Designer& Publisher

External ApplicationsNon-HTTP objects

• ColdFusion, • CGI (Perl)• ASP & ASP.NET• JAVA Servlet• Java Server Pages • Java Applet• JavaScript

Internet Global Reach Broad Range

Web Programmer

Web Server

Page 11: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 11

Roadmap to the Web Master Fast Track Curriculum

HTML

IIS• Web Server• FTP Server• Web Site

Analysis• Internet Security

PhotoShop Web

Desig

n P

rocess

FrontPage

DHTML with DreamWeaverMX & JavaScript

Active Server Pages

Database-Bound Web• SQL• ColdFusion

Content DevelopmentContent Development Web ProgrammingWeb Programming Server AdministrationServer Administration

Fo

un

datio

ns

Fo

un

datio

ns

Web Group Project

XML

163 hrs

Flash

Advanced HTML & Web Technologies Overview

ASP.NET

Web User Interface Design

Page 12: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

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

image

list

table

form

link

Page 13: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

Documentsource

HTML Converter

WYSIWYGHTML Editor

HTML Source Editor

Line Art Drawing Tool

Digital Image Tool

Graphic FileConversion Tool

HTML File<img src="abc.gif">

image file.gif or .jpeg

Multimedia Authoring Tool

<a href="def.mov">

Web Authoring Environment

Web Server

ftp tool

Web Site Management Tool

Web Hosting Environment

video/sound file.mov, .avi, ...

Local Developer Workstation

HTML Validation Tools

Page 14: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 14

Anatomy of a Tag

Opening tag

Attribute=value

Closing 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>

Element

Page 15: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 15

A Simple HTML Document

<HTML>

<HEAD>

<TITLE>The title shows up on your Web Browser</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Page 16: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 16

Basic Tools and Editing Process

• From Start button• Choose Programs • Choose Accessories• Choose 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

Page 17: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 17

Solution: Create a Web Page

AITC Web Site• Company Introduction• Products• How to Contact us• Online HTML ResourcesDeveloped by Advanced IT Consulting contact us at [email protected]

<html><head><title>Advanced IT Consulting</title></head><body>

<h1>AITC Web Site</h1>

<ul><ul>

<li>Company Introduction<li>Company Introduction

<li>Products<li>Products

<li>How to Contact us<li>How to Contact us

<li>Online HTML Resources<li>Online HTML Resources

</ul></ul>

Developed by Advanced IT Consulting <br>

Contact us by email at [email protected]

</body></html>

Save it at c:\temp\index.htmSave it at c:\temp\index.htm

Page 18: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 18

HTML Authoring Tools

• HTML Editor– Notepad / WordPad– AOLPress (www.aolpress.com)– HTML-Kit (www.chami.com/html-kit/) – HTML Assistant Pro (www.brooknorth.com)– HotMetal from SoftQuad (www.sq.com)– HotDog from Sausage Software (www.sausage.com)– Netscape Communicator (www.netscape.com)– PageMill from Adobe– Microsoft FrontPage – Macromedia Dreamweaver– Recommendation: Use first a WYSIWYG authoring tool for common

tasks and use another non-WYSIWYG authoring tool for advanced features not currently supported by the first tool.

• HTML Conversion Tool • HTML Syntax Validation Tool (www.w3.org/MarkUp/html-test/)• Web Site Development Environment (e.g., FrontPage)

Page 19: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 19

HTML Editors• HTML documents are in plain (also known as

ASCII) text format and can be created using any text editor.

• Free HTML editors: – Netscape Composer in Netscape Communicator – FrontPage Express in Internet Explorer 5.0

• HTML editors: – WYSIWYG HTML editors: FrontPage– Non-WYSIWYG HTML editors: HTML Assistant Pro

Page 20: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 20

FrontPage Express

• Install Internet Explore 5.0• Use customized

installation: Under Web Authoring tools: Choose FrontPage Express

• FrontPage Express can be accessed from the Edit button of IE or from Accessories / Internet Tools

Page 21: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 21

Class Project

AITC Web Site• Company Introduction• Products• How to Contact us• Online HTML ResourcesDeveloped by Advanced IT Consulting contact us at [email protected]

AITC

C:\temp\index.htm

AITC Introduction

AITC is …..

Guest Book Entry: Name: Know HTML

Submit Resume

profile.htm

AITC Employees• Minder Chen• Bruce Johnson• Terry Smith

Minder Chen703-334-4566[Index]

Bruce Johnson703-334-4577[Index]

contact.htm

Product Listing

ID Name Price100 TV $250200 PC $999210 XY $234

[Home | Intro | Product | Contact]

product.htm

Web SiteHome PageWeb Page

Page 22: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 22

Introduction to HTML• Most web pages on the World Wide Web are created in a

standard document format know as Hypertext Markup Language, or 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 Netscape Navigator, 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.

Page 23: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 23

Anatomy of a Tag

Opening tag

Attribute=value

Closing 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>

Element

Page 24: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 24

HTML Elements' General Syntax• <tag_name> text </tag_name>

– <title> This is a title </title> – <b> Boldface </b>

• <tag_name> Singleton Tags– <br> <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>

Page 25: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 25

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

Page 26: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 26

HTML Tags: Document Structure • <HTML></HTML>: start and end of HTML

document• <HEAD></HEAD>: document meta-information

start and end• <BODY></BODY>: content of document

displayed by the browser

Page 27: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 27

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>

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

• Don’t use the <h1>...<h6> to manipulate your font size.

• Use <font> tag• Use <big>Test</big> or

<small>Test</small>

1. Xxxxx dsfdsfdsf

2. sadsdsad2.1 sadsad2.2 ddddd

2.2.1 xxxx3. sssss

Page 28: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 28

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

Page 29: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 29

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

Page 30: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 30

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>

Page 31: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 31

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>

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

Page 32: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 32

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>• &nbsp; Force a space character

Page 33: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 33

Paragraph: To Break or No To Break

<NOBR>This is a paragraph. Spaces, line breaks, empty lines donot work in HTML documents.</NOBR> You need to use

line break tag &lt;br&gt;.&nbsp;This line has a line break.<BR>This line is followed by a horizontal line.<HR><PRE>Another paragraph after <hr> the &lt;hr&gt;</PRE> This is another paragraph with extra&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; space.

Page 34: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 34

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>

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

Page 35: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 35

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

Page 36: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 36

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 &amp; 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>

<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 &amp; 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>

• <UL>...</UL> Netscape Extended Attribute: • TYPE="..." DISC, CIRCLE, SQUARE• <UL TYPE="SQUARE"> …. </UL>

• <UL>...</UL> Netscape Extended Attribute: • TYPE="..." DISC, CIRCLE, SQUARE• <UL TYPE="SQUARE"> …. </UL>

Page 37: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 37

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 &amp; 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>

• <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>

• <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>

Page 38: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 38

Menu List: <menu> <li> <\menu><html><head><title>Menu </title></head><body><p><h3>A Simple Menu</h3><menu> <li>First menu item <li>Second menu item </menu><h3>Multiple Level Menu</h3><menu> <li>Level 1 <menu> <li>Level 1.1 <li>Level 1.2 </menu> <li>Level 2 <menu> <li>Level 2.1 <li>Level 2.2 </menu></menu></body></html>

<html><head><title>Menu </title></head><body><p><h3>A Simple Menu</h3><menu> <li>First menu item <li>Second menu item </menu><h3>Multiple Level Menu</h3><menu> <li>Level 1 <menu> <li>Level 1.1 <li>Level 1.2 </menu> <li>Level 2 <menu> <li>Level 2.1 <li>Level 2.2 </menu></menu></body></html>

Page 39: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 39

Glossary: <DL>, <DT>, <DD> </DL><html><head><title>Glossary </title></head><body><p><h3>WWW Glossary</h3><dl> <dt> HTML <dd> HyperText Markup Language. HTML is a

markup language that is used to define web pages.

<dt> URL <dd> Uniform Resource Locator. URL is used

to locate (specify the address) a document (or resource) on the WWW.

<dt> WWW <dd> World Wide Web. An Internet-based

networked hypertext system. </dl></body></html>

<html><head><title>Glossary </title></head><body><p><h3>WWW Glossary</h3><dl> <dt> HTML <dd> HyperText Markup Language. HTML is a

markup language that is used to define web pages.

<dt> URL <dd> Uniform Resource Locator. URL is used

to locate (specify the address) a document (or resource) on the WWW.

<dt> WWW <dd> World Wide Web. An Internet-based

networked hypertext system. </dl></body></html>

DL: Definition ListDT: Definition TermDD: Definition Description

Page 40: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 40

Special Characters• There are four characters that have special

meanings in HTML. When you want to use them, you need to have a special sequence pf characters (escape sequence) to represent them.

• These four characters are:< (the left angle bracket)

> (the right angle bracket)

& (ampersand)

" (quotation marks)

Page 41: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 41

Escape Sequences• HTML includes character combinations, called escape

sequences, to represent these characters in an HTML document, They are:

&lt; (the escape sequence for <)&gt; (the escape sequence for >)&amp; (the escape sequence for &)&quot; (the escape sequence for “)

&nbsp; (the escape sequence for space character)

• To display <HR> as it is in an HTML document, you should write it in the following two ways: – &lt;HR&gt;– <xmp><HR></xmp>

• Note: It is important to note that escape sequence are case-sensitive , unlike all other HTML tags.

Page 42: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 42

More Escape Sequences• There are many more escape sequences for non-ASCII

characters. Some of the more common ones are:

&ouml; (the escape sequence for a lowercase o with an umlaut, ö)

&ntild; (the escape sequence for lowercase n with a title; ñ)

&Egrave; (the escape sequence for an uppercase E with a grave accent; è)

&copy; (Netscape extension for ©)

&reg; (Netscape extension for ®)

• Reference for special characters: http://hotwired.lycos.com/webmonkey/reference/special_characters/

Page 43: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 43

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, aitc">

<META NAME="description" CONTENT="HTML tutorial for everyone">

<TITLE>test</TITLE></HEAD>

For traditional Chinese: <META http-equiv="Content-Type" content="text/html; charset=big5" >

Page 44: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 44

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>

Page 45: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 45

Hypertext and Links

• Introduction to hypertext

• Intra-document Links and Anchors

• Inter-document Links

• URL

• Images and Inline image

• Image links

• Image map

Page 46: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 46

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 window will be used to view part of the hypertext document retrieved.

• On your Netscape Browser, the underlying HTML link to another Web document will be displayed at the message bar when you move mouse pointer over a link.

Page 47: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 47

Intra-document (Internal) Hypertext Links

Intra-document hyperlink links

Section 1: aaaThis is section 1...

Back to the Table of Content

Section 2: bbbThis is section 2...

Table of contentsSection 1: aaaSection 2: bbbSection 3: ccc

Viewing area of the document

Page 48: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 48

Inter-document (External) Hypertext Links

Document1...

Link to document 2...

Document2......Link to Section D of Doc3......

Document2......Section D......Link to Document1......

Toolbox DocumentHammer...

Screw Driver....

an image link

A B C D

an image map link

Page 49: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 49

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>

Page 50: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 50

Linking and Anchoring

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

x.htm y.htm

Page 51: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 51

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>

Page 52: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 52

External Link Using Relative URL

Contact <a href="contact.htm#johnson">Bruce Johnson</a> for web problems.

index.htm

<a name=" johnson "></a>Bruce Johnson<br>703-334-4577<br>

contact.htm

Page 53: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 53

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>

Page 54: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 54

Netscape Communicator (Composer)

Page 55: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 55

Defining a Link in Netscape Composer

Page 56: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 56

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

Page 57: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 57

Document Directory Structure

10_link.htm (Current Document)

10_test.htm (<a href="webpub/10_test.htm"></a>)

oracle.htm (<a href="../../nvcc/oracle.htm"></a>

x.htm (<a href="x.htm">in the same folder</a>)

y.htm (in the html folder)

<a href="/html/y.htm">Root relative path</a><a href="../y.htm">Document relative path</a>

Web document root

Page 58: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 58

Relative URL

Page 59: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 59

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>

Page 60: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 60

Creating Links from Bookmarks in Netscape Composer

Drag-and-drop a bookmark item into the HTML document in the editing mode.

Page 61: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 61

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.

Page 62: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 62

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

Send an email ([email protected]) to <a href="mailto:[email protected]"> Minder Chen</a>

Page 63: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 63

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://www.aitc.com/~mchen/justin/spelling.htm#week1">Justin'sfirst week's spelling </A> <br><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>

<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://www.aitc.com/~mchen/justin/spelling.htm#week1">Justin'sfirst week's spelling </A> <br><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.

<BASE href="URL">

Set the absolute URL against which all other relative URLs are resolved.

Page 64: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 64

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>

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

Page 65: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 65

ALIGN

Page 66: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 66

Download Image FilesClick right mouse button on top of an image in a web page

Page 67: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 67

ExampleSmall 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>

Page 68: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 68

Netscape Composer: Defining IMG Tag’s Attributes

Page 69: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 69

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

Page 70: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 70

Defining Image Link in Netscape Composer

Page 71: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 71

Using IMG TagAdvanced 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="http://www.aitc.com/">

<IMG SRC="AITCLOGO.gif"></A>

Page 72: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 72

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.

Page 73: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 73

Examples of Using Images

Page 74: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 74

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>

Page 75: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 75

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>

Page 76: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 76

Graphic and Image Tools• Shareware product: Paint Shop Pro for Windows 95/NT

4.0 from JASC, Inc. at http://www.jasc.com/pspdl.html– Resizing– File format conversion

• Use tools such as Adobe Illustrator for more complicated drawings (www.adobe.com)

• Adobe PhotoshopAdobe 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.

• Hardware: Scanner, Digital Camera, or Video capturing system

Page 77: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 77

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>

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

• TD: Table Data• TR: Table Row• TH: Table Header (Header Cell)

• TD: Table Data• TR: Table Row• TH: Table Header (Header Cell)

Page 78: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 78

Product.htm<HTML><HEAD><TITLE> AITC Products </TITLE></HEAD>

<BODY>Product Table

<TABLE BORDER=3><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>&nbsp;</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)• TH: Table Header (Header Cell)

Page 79: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 79

Editing a Table in Netscape Composer

Page 80: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 80

New Table Creation

Page 81: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 81

Netscape Composer: Cell Properties

Page 82: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 82

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>

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

Page 83: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 83

External Sounds and Animation• If you want to do the animation, video and audio,

you need other multimedia applications development tools.

• You can use your own favorite applications tools to design your own graphics , audio, videos and so on by giving proper file extension.

Page 84: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 84

Common MIME File Types for Multimedia Documents

• The Netscape browser will be able to recognize the file followed by these extensions– AIFF sound .au– JPEG graphic .jpeg or .jpg– MPEG movie .mpeg or .mpg– PostScript document .ps– QuickTime movie .mov– WAVE sound .wav

AIFF: Audio Interchange File FormatMPEG: Moving Picture Experts Group

5-seconds of audio Size Format36KB WAV4KB RealAudio 14.48KB RealAudio 28.8

Page 85: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 85

Configure Your Browser for Viewing Multimedia Documents

• In Netscape: General Preferences|Helpers• Use the General Helpers preferences panel to create or

reconfigure how a file's format maps to a external helper application.

• Netscape has the built-in capability to interpret and display several formats, including the HTML format used by HTTP servers.

• Helper applications are used by Netscape to interpret files that it has retrieved but is unable to read.

• You can designate MIME file types (a method of differentiating file formats using a suffix appended to a file name), helper applications and their associated actions.

• When you display the Helpers general preferences panel, you see a scrolling text field that lists the file formats and helper applications available to Netscape.

Page 86: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 86

Define Helper Apps: Edit / Preferences...

Page 87: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 87

Linking to External Multimedia Files

Specify File Size Explicitly

Point to site to download the required helper application

Page 88: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 88

<html><head><title>777 Virtual Tour</title></head><body><h1>777 Virtual Tour</h1><img src="/gif/777.gif"><p>In order to take the virtual tour of the 777, you'll need QuickTime VR software on

your computer. Click here to retrieve <a href="http://qtvr.quicktime.apple.com/">QuickTime VR</a> and instructions on how to load it onto your machine. Then come back and take the tour!

<p><ul><li><a href="/qtvr/777fd.mov">Tour the flight deck of the 777</a>. (155K)<li><a href="/qtvr/777in.mov">Tour the spacious first class interior of the 777</a>.

(155k)</ul><hr></body></html>

HTML Code

Correct File Type

Page 89: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 89

Using <object> Tag for Multimedia ObjectsHTML 4.0<html><head><title>MPEG Video</title></head><body><object data="test.mpg" type="video/mpeg">Demo of a movie</object></body></html>

<html><head><title>MPEG Video</title></head><body><a href="test.mpg">Demo of a movie<a> <embed src="test.mpg" HEIGHT=300 WIDTH=200> Demo of a movie </embed></body></html>

<embed src="test.mpg"> Demo of a movie</embed>

Test.mpg can be found at http://www.erols.com/aitc/html/test.mpg

Page 90: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 90

Forms

• Support interactive applications: Guest Books, User Survey, Online Shopping, etc.

• Need to use CGI scripts to process form inputs

• No local input data validation: client-side scripting using VB Script or JavaScript may allow you to perform local input data validation

Page 91: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 91

Profile.htm: First Version<HTML><HEAD><TITLE>Form</TITLE>

</HEAD><BODY><H1> Guest Book </H1>

<FORM ACTION="http:// 65.168.115.6 /asp/formtest.asp"

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>

Page 92: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 92

Sample Form HTML Page

Page 93: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 93

Using Server-Side Script to Process User Inputs via FormW

eb

Bro

wse

r

We

b S

erv

er

Se

rve

r-s

ide

scr

ipt

Request an HTML form

Return the requested form

Data submitted by user

Data and environment variables forwarded to aCGI or server-side script

Return output to server

Forward output to Browser

Page 94: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 94

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

Page 95: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 95

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

Page 96: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 96

Profile.htm: HTML Source<HTML><HEAD><TITLE>Form</TITLE></HEAD><BODY><H1> Customer Registration </H1><FORM ACTION="http://65.168.115.6/asp/formtest.asp"

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>

Page 97: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 97

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>

Page 98: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 98

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.

customer=Minder+Chen&[email protected]&interest=running+chi-kung+%24

Without the ENCTYPE attribute, you will be receiving the following message:

Page 99: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 99

HTML Extensions • Client Pull • Font size • Background color • Image-Tiled Background

Page 100: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 100

Client Pull Using the META Tag

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

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

Have to be in the Header

section

Page 101: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 101

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.

Page 102: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 102

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>

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

Page 103: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 103

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

Page 104: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 104

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

Page 105: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 105

<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

Page 106: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 106

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>

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

Page 107: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 107

Format / Page Colors and Properties

Page 108: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 108

Using Background Color and Table Togetherhttp://www.erols.com/aitc/html/bgc.gif

<BODY BACKGROUND="bgc.gif"><TABLE COLS=2 WIDTH="100%" ><TR VALIGN=TOP><TD WIDTH="120"> 1st column </TD><TD>2nd column</TD></TR></TABLE>

<BODY BACKGROUND="bgc.gif"><TABLE COLS=2 WIDTH="100%" ><TR VALIGN=TOP><TD WIDTH="120"> 1st column </TD><TD>2nd column</TD></TR></TABLE>

Page 109: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 109

A Simple Example of Frame<HTML><HEAD>

<TITLE>The Frame Sampler</TITLE>

</HEAD>

<frameset cols="20%,80%">

<frame src="a.htm">

<frame src="e.htm" name="e_frame" scrolling=YES>

</frameset></html>

http://home.netscape.com/assist/net_sites/frames.html

Page 110: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 110

An Example of Frame

Page 111: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 111

HTML Code<HTML><HEAD><TITLE>The Frame Sampler</TITLE></HEAD><frameset rows="50%,50%"> <frameset cols="33%,33%,33%"> <frame src="a.htm"> <frame src="b.htm"> <frame src="c.htm"> </frameset> <frameset cols="33%,33%,33%"> <frame src="d.htm"> <frame src="e.htm"> <frame src="f.htm" name="f_frame" scrolling=YES> </frameset></frameset>

If you want another link to go to this named frame, you write the link as: <A HREF="http://www.aitc.com/test.htm" TARGET="f_frame">link</A>

Page 112: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 112

E.HTM Source

<html>

<head>

<title></title>

</head>

<body>

<h1>E.HTM </h1>

<p>This is a test of the Frame. <a HREF="f.htm"> A Link to Frame F in F.HTM </a></p>

</body>

</html>

Page 113: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 113

Uses for Frames• The Backward and Forward navigation tools in

the web browser don't work under frames. • Elements that the user should always see

– Title graphics– Copyright notices– Control bars– Table of contents

Page 114: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 114

Exercise

Page 115: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 115

Book.htm<HTML>

<HEAD>

<TITLE>Book</TITLE>

</HEAD>

<FRAMESET ROWS="30%,70%">

<FRAME SRC="aitc.htm" SCROLLING="No" NORESIZE>

<FRAMESET COLS="38%,62%">

<FRAME SRC="toc.htm" NORESIZE>

<FRAME SRC="chap1.htm" NAME="chapter_fr">

</FRAMESET>

</FRAMESET>

<NOFRAMES>

<BODY>

<P>You need a browser that supports frame to view this page

</BODY>

</NOFRAMES>

</HTML>

Page 116: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 116

aitc.htm<HTML>

<HEAD>

<TITLE>AITC Web Site </TITLE>

</HEAD>

<BODY>

<h1>AITC Web Site</h1>

</BODY>

</HTML>

Page 117: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 117

toc.htm<HTML>

<HEAD>

<TITLE>Table of Contents </TITLE>

</HEAD>

<BODY>

<UL>

<LI> <A HREF="chap1.htm" TARGET="chapter_fr">Chapter 1</A>

<LI><A HREF="chap2.htm" TARGET="chapter_fr">Chapter 2</A>

<LI><A HREF="chap3.htm" TARGET="chapter_fr">Chapter 3</A>

</UL>

<P>

</BODY>

</HTML>

Use the <BASE target="chapter_fr">in the head section to define default target frame.

Use the <BASE target="chapter_fr">in the head section to define default target frame.

Page 118: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 118

Chap1.htm<HTML><HEAD><TITLE>Created With HTML Assistant Pro - 10/2/96</TITLE></HEAD>

<BODY><font size=+2>This is chapter 1</font>

<A HREF="chap2.htm">Go to chapter 2</A><br><a href="chap2.htm" target="_blank">

Document opens in a new unnamed window </a><br><a href="chap2.htm" target="_parent">

Document opens in the immediate FRAMESET parent of the current frame. </a><br>

<a href="chap2.htm" target="_self">Document opened in the same frame as the originating link </a><br>

<a href="chap2.htm" target="_top">Document opens in the full original window. </a><br>

</BODY></HTML>

Page 119: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 119

Chap2.htm

<HTML>

<HEAD>

<TITLE>Chapter 2</TITLE>

</HEAD>

<BODY>

<P>

This is chapter 2

<P>

<A HREF="chap3.htm">Go to chapter 3</A>

</BODY></HTML>

Page 120: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 120

<frameset> and </frameset>• This is the main container for a Frame. It has 2

attributes: ROWS and COLS. • A frame document has no <BODY> tag, and no

tags that would normally be placed in the BODY can appear before the FRAMESET tag, or the FRAMESET will be ignored.

• The FRAMESET tag has a matching end tag, and within the FRAMESET you can only have other nested FRAMESET tags, FRAME tags, or the NOFRAMES tag.

• FRAMESET attributes include:– ROWS="row_height_value_list" – COLS="column_width_list"

Page 121: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 121

<frame> </frame>• Load information independent of other frames• Can be given a target name• Can resize dynamically• This <frame> tag defines a single frame in a

frameset. • It has 6 possible attributes:

– SRC: The URL of the document to be displayed. – NAME: This is used to assign a name to a frame so that it can be

targeted by other links.– MARGINWIDTH: The left and right margin from the boundary of the

frame to the document and the value is in pixels.– MARGINHEIGHT: The upper and lower margins – SCROLLING: yes | no | auto– NORESIZE: Make the frame nonresizable. Frames are resizable by

default. – FRAMEBORDER: yes | no

Page 122: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 122

One More Example<frameset rows="66%,33%"> <!--- Divide into 2 rows ---!>

<frameset cols="33%,33%,33%"> <!--- Row 1: make 3 columns ----!>

<frame src="A.html"> <!--- Column 1: A ---!>

<frameset rows="50%,50%"> <!---Column 2: Divide into 2 rows: 1A and 1B---!>

<frame src="B.html"> <!--- Column 2: Row 1A: B ---!>

<frame src="D.html"> <!--- Column 2: Row 1B: D---!>

</frameset>

<frameset rows="50%,50%"> <!--- Column 3: Divide into 2 rows: 1A and 1B---!>

<frame src="C.html"> <!--- Column 3: Row 1A: C ---!>

<frame src="E.html"> <!--- Column 3: Row 1B: E ---!>

</frameset>

</frameset> <!--- Close up Row 1 ---!>

<frameset cols="33%,66%"> <!--- Row 2: make 2 columns ----!>

<frame src="F.html"> <!--- Column 1: F ---!>

<frame src="G.html"> <!--- Column 2: G ---!>

</frameset>

</frameset>

Page 123: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 123

<FRAMESET ROWS="value_list" COLS="value_list"></FRAMESET>

• A frame's window space can be divided into rows and columns.

• ROWS="value_list": This is a comma separated list of values. These values can be expressed in an absolute number of pixels, as a percentage (between 1 and 100) or as relative scaling values.

• Percentage: <FRAMESET ROWS="20%,60%,20%">• Pixels: <FRAMESET ROWS="100,500,100">; You'll almost certainly

want to use these values in combination with other percentage based or relative values.

• Relative scaling: <FRAMESET ROWS="50, 2*, *">; This is a mix of fixed and relative values. In this case the first ROW is 50 pixels wide. The other two rows are divide the remaining space. A single "*" means that the frame gets all of the remaining space. When more than one "*" appear, you can give them relative portions of the remaining space. In this case, the second row gets 2/3 of the

remaining space and the third row gets 1/3 of the remaining space.

Page 124: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 124

Setting Up Your Home Page on the Server• Get an account such as [email protected] on the

computer where web server is. • Make your directory world-executable (don't forget the

trailing space & period) at the system prompt.– chmod a+x .

• Create an directory in your account as follows:– mkdir public_html – chmod a+rx public_html

• Change into this new directory.– cd public_html

• Create an HTML file index.html and make the file world readable:– chmod a+r index.html

• index.html is the default file name in a directory• Invoke a WWW browser to see what you have created!• Use URL: http://mason.gmu.edu/~mchen

Page 125: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 125

File Transfer Protocol: ftp• http://www.ipswitch.com/cgi/download_eval.pl?product=WL-1000• http://www.ftpplanet.com/

Page 126: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 126

Page 127: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 127

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/

Page 128: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 128

Build Own Web Site Vs. Pay Hosting Service

PROS CONS

Build Your Own Web Site:

. Full control over contents. . Set up expenses plus monthly

. Easy to gather information connection fee.

from visitors via forms . You must manage the server.

. Ability to choose security tools. . Larger, dedicated staff required

. Ability to rent server space

Pay a Hosting Service:

. Less expensive . Dependent on Provider for site

. No system maintenance security and upkeep

. Minimal staff requirement . Maybe dependent on provider for content changes.

. May not be able to implement forms and scripts

Page 129: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 129

Let Your Web Site Be Known• Key words used in searches of your sites must be present in your top-level home

page.• Get Listed on the News groups: For general announcement of new websites:

comp.infosystems.www.anounce• Negotiate Mutual Pointers with sites trying to attract audience similar to your

audience.• Online Resource: http://www.ftpplanet.com/webmaster/web_promotion.htm• Sites to Help You Submit Your: SiteThese sites will submit your site to many

search engines and directories for you. – Bcentral: http://www.BCentral.com– The Promoter: http://www.tila.com/promote/ -- submits to search engines and

link pages for free. – Submit-it!: http://submitit.linkexchange.com/ -- submits to more than 400 search

engines and link pages. – Submit-it! Free: http://siteowner.linkexchange.com/Free.cfm -- submits to search

engines for free. – WebStep 100: http://www.mmgco.com/top100.html -- submits to top web sites for

free. – Virtual Stampede: http://www.virtualstampede.com/ – Postmaster: http://www.netcreations.com/postmaster/registration/try.html

Page 130: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

Class Project Solution

AITC Web Site• Company Introduction• Products• How to Contact us• Online HTML ResourcesDeveloped by Robert Smith atAdvanced IT Consulting contact us by mail at [email protected]

AITC

C:\temp\index.htm

AITC Introduction

AITC is …..

Guest Book Entry: Name: Know HTML

Submit Resume

profile.htm

AITC Employees• Minder Chen• Bruce Johnson• Robert Smith

Minder Chen703-334-4566[Index]

Bruce Johnson703-334-4577[Index]

contact.htm

Product Listing

ID Name Price100 TV $250200 PC $999210 XY $234

[Home | Intro | Product | Contact]

product.htm

Web SiteHome PageWeb Page

Page 131: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 131

index.htm<html><head><title>Advanced IT Consulting</title></head><body><h1>AITC Web Site</h1><ul><li><a href="profile.htm">Company 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>

Page 132: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 132

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>

Page 133: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 133

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>

Page 134: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 134

In Netscape (Edit / Preferences)• Set up email server

Page 135: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 135

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>

Page 136: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 136

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>

Page 137: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 137

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>

Page 138: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 138

table.htm (background Image)<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] (Win95; I) [Netscape]"> <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 trainingand consulting in emerging IT.&nbsp;</B></TD></TR></TABLE></BODY></HTML>

Page 139: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 139

Imagemap• ISMAP: The ISMAP (is map) attribute identifies an image as

an image map. Image maps are graphics in which certain regions are mapped to URLs. By clicking on different regions, different resources can be accessed from the same graphic. Example of use:

• <A HREF="book1.map"> <IMG SRC="sample.gif" ISMAP> </A>

• To be able to use image maps in HTML documents, the HTTP server which will be controlling document access must have the correct cgi-bin software installed to control image map behavior.

• Files needed: – "Map" image: sample.gif in the example.– Map file: e.g., book1.map in the example. Has two

formats: NCSA and CERN and you can use MapEdit or MAP This to create it.

– Imagemap CGI program on the web server

Page 140: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 140

Map File: CERN and NCSA

default map_dflt.htm#The rectangle at the bottomrect (1,122) (129,163) rect.htm#The circle at the middlecircle (60,85) 35 circle.htm#Polygon at the toppoly (56,1) (8,50) (104,50) polygon.htm

default map_dflt.htm#The rectangle at the bottomrect (1,122) (129,163) rect.htm#The circle at the middlecircle (60,85) 35 circle.htm#Polygon at the toppoly (56,1) (8,50) (104,50) polygon.htm

map_cern.map

default map_dflt.htm

#The rectangle at the bottom

rect rect.htm 1,122 129,163

#The circle at the middle

circle circle.htm 60,85 88,106

#Polygon at the top

poly polygon.htm 56,1 8,50 104,50

default map_dflt.htm

#The rectangle at the bottom

rect rect.htm 1,122 129,163

#The circle at the middle

circle circle.htm 60,85 88,106

#Polygon at the top

poly polygon.htm 56,1 8,50 104,50

map_NCSA.map

Page 141: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 141

Map THIS

http://www6.zdnet.com/cgi-bin/texis/swlib/hotfiles/info.html?fcode=0007SG

Where to get it:

Page 142: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 142

Save the Map File

CSIM: Client Side Image Map

Page 143: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 143

Limitations of Image Maps

• Image maps only work over the HTTP protocol.

• A server transaction is always required.

• The implementation of image maps is server-dependent.

Page 144: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 144

Area Coordination Specifications<map name="map_spec"> <area shape=circle coords="50,50,20" href="circle_link.html"> <area shape=rectangle coords="70,70, 90,90" href="rect_link.html"> <area shape=polygon coords="10,10,10,20,15,20" href="rect_link.html"></map>

<map name="map_spec"> <area shape=circle coords="50,50,20" href="circle_link.html"> <area shape=rectangle coords="70,70, 90,90" href="rect_link.html"> <area shape=polygon coords="10,10,10,20,15,20" href="rect_link.html"></map>

(0,0)

(100,100)

x

y

• Use noref attribute in the <area> tag to indicate no action should be taken.

• Must include an href or a noref attribute for each <area> tag.

Page 145: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 145

Sample Map Specification<HTML><HEAD><TITLE>Client-Side Image Map</TITLE></HEAD><BODY><h1>Try out the following client-side image map</h1> <p> <img src="map1.gif" usemap="#map_spec">

<map name="map_spec"><area shape=polygon coords="8,50, 56,1, 104,50" href="polygon.htm"><area shape=circle coords="60, 85, 35" href="circle.htm"><area shape=rectangle coords="1,122,129,163" href="rect.htm"><area shape=rectangle coords="0,0,129,163" href="default.htm">

</map>

</BODY></HTML>

Page 146: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 146

Including Both Client-Side and Server-Side Processing

• Netscape 2.0+ and Internet Explore support client-side image map. Other browsers may ignore the usemap attribute in the <img> tag.

• For the same image map, we can include both client-side (honored by the browsers that can handle it) and server-side processing (for backward compatibility).

<a href="/cgi-bin/imagemap/pics/bart.map"><img src="/pics/bart3.gif" usemap="#map2" ismap ></a>

<map name="map2"> <area shape=circle coords=…><area shape=polygon coords=…>

</map>

Page 147: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 147

Advanced Table Tags<body bgcolor="blue" text="yellow" link="white" vlink="black" alink="red"> <table border=1 width="475"><colgroup span="2" with="50"></colgroup><colgroup align="right">

<col span="1" width="75"><col span="2" width="50"><col span="1" width="200"></colgroup>

<thead><th>PID</th><th>Price</th><th>Type</th><th>Footage</th><th>BR/FB/HB</th><th>Address</th>

</thead><tfoot>

<th>PID</th><th>Price</th><th>Type</th><th>Footage</th><th>BR/FB/HB</th><th>Address</th>

</tfoot><tbody>

<tr><td>1</td><td>$400,000</td><td>TH</td><td>8,000</td><td>3/2/1</td><td>123 Main St.</td></tr><tr><td>2</td><td>$350,000</td><td>SFH</td><td>8,000</td><td>4/2/2</td><td>777 Main St.</td></tr>

</tbody></table>Contact <a href="http://www.erols.com/aitc/ger.htm">GE Reality</a> if you want to buy a house.<br>Contact <a href="http://www.microsoft.com/">Microsoft</a> if you have problem with IE.</body>

Page 148: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 148

Web User Interface Design• Web Style Guide: Basic Design Principles for Creating Web Sites, Yale University

Press, March of 1999– http://info.med.yale.edu/caim/manual/

• Designing Web Usability, Jacob Nielsen, New Riders Publishing, Dec. 1999. • David Siegel, Creating Killer Web Sites, Second Edition

– http://www.killersites.com/core.html• Collaborative Web Development: Strategies and Best Practices for Web Teams, by

Jessica R. Burdman, Addison-Wesley, 1999. • Jakob Nielsen on web user interface design

– http://www.useit.com/ and http://www.useit.com/alertbox/– http://www.sun.com/sun-on-net/uidesign/

• Designing Web Graphics.3 by Lynda Weinman, New Rider, 1999– Lynda's web site at http://www.lynda.com/

• Norman and Nielsen Group at http://www.nngroup.com/• Webmonkey design site_building at

http://www.hotwired.com/webmonkey/design/site_building/• Web Workshop - Electronic Commerce Site Design at

http://msdn.microsoft.com/workshop/design/layout/site021599.asp • IBM Ease of Use Web Site:

http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/561• Accessibility standards: www.access-board.gov/508.htm & www.cast.org/babby

www.section508.gov

Page 149: HTML Authoring and Web Publishing Minder Chen, Ph.D. mchen@gmu.edu Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.

© Minder Chen, 1996-2002 HTML & Web Publishing - 149

URL and Security• URLs are standardized in RFC1738, and in their most

generic form, they are defined as

• <scheme>:<scheme-specific-part>

• The best-known scheme is the Common Internet (http for WWW), in which the <scheme> is the name of a protocol and the <scheme-specific-part> is defined as:

• //<user>:<password>@ <user>:<password>@ <host>:<port>/<url-path> in which only the host part is mandatory. – The ":" and "@" characters have a special meaning and thus the

server can parse the entire string.

– If a user and a password are provided, the host part only comes after the @ character.

• http://www.microsoft.com:[email protected]/pub/mskb/Q209354.asp


Recommended