HTML Authoring and Web Publishing : HTML Authoring and Web Publishing Minder Chen, Ph.D. Email: mchen@gmu.edu 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


Course Description : 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.


Course Outline : 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


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


The Architecture of WWW : The Architecture of WWW Web Browser Client Web Server End User HTTP TCP/IP HTML documents Internet or Intranet


WWW: What Is It? : 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.


Key Elements of Web : 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.


Client-Server Model of http : Client-Server Model of http Web Server Web Client Requesting a document via a URL address Connection open Returning MIME-compliance document Connection close helper app helper app helper app helper app helper 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 2 Static Dynamic MIME: Multipurpose Internet Mail Extension


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


The Extended Framework of WWW : The Extended Framework of WWW Web Browser Client HTML Authoring Tools/Editors End User Web Master Web Designer & Publisher External Applications Non-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


Roadmap to the Web Master Fast Track Curriculum : Roadmap to the Web Master Fast Track Curriculum HTML IIS Web Server FTP Server Web Site Analysis Internet Security PhotoShop Web Design Process FrontPage DHTML with DreamWeaverMX & JavaScript Active Server Pages Database-Bound Web SQL ColdFusion Content Development Web Programming Server Administration Foundations Web Group Project XML 163 hrs Flash Advanced HTML & Web Technologies Overview ASP.NET Web User Interface Design


Slide12 :

HTML Sampler

• Item 1
• Item 2
• Item 3

A sample of a form: Name:
Know HTML

Extended Quotes 
Addresses 
Line Breaks 
Horizontal Rules 


 and 
Character Formatting 
Physical Versus Logical: Use Logical Tags When Possible 
Using Character Tags:    
Special Characters 
Escape Sequences 


HTML Tags: Document Structure  : HTML Tags: Document Structure  :  start and end of HTML document
: document meta-information start and end
: content of document displayed by the browser


Headings: Level 1 to 6 : Headings: Level 1 to 6 




Heading 1 (Top Level)
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6 (Bottom Level) 

 Don’t use the 
...
 to manipulate your font size. 
Use  tag
Use Test or Test Xxxxx   dsfdsfdsf
sadsdsad
2.1 sadsad
2.2 ddddd
	2.2.1 xxxx
sssss


Physical and Logical Styles in HTML : 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 
 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  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.


Logical Styles : Logical Styles : for a word being defined. Typically displayed in italics. (NCSA Mosaic is a World Wide Web browser.)
: for emphasis. Typically displayed in italics. (Watch out for pickpockets.)
: for titles of books, films, etc. Typically displayed in italics. (A Beginner's Guide to HTML)
: for snippets of computer code. Displayed in a fixed-width font. (The  header file)
: 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.)
: for computer status messages. Displayed in a fixed-width font. (Segmentation fault: Core dumped.)
: for strong emphasis. Typically displayed in bold. (Important)
: 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.)


Physical Styles : Physical Styles : bold text
: italic text
: Underline text (Don’t use it)
: typewriter text, e.g. fixed-width font
: Use a non-proportional font to maintain the white spaces, tabs, and carriage returns. 
Examples: 
Boldface 
 This is 		a tabbed		line 
Correct:   Boldface and italic  

Incorrect:   Boldface and italic  


Logical and Physical Styles : Logical and Physical Styles 
Physical Styles
Italic

Bold

Underline

Type writer font

Bold and Italic

Strikethrough

Blink in Netscape Browser

Maruqee sign in Internet Explorer
Logical Styles
Subscirpt and Superscript

emphasis

strong

sample

code such as main() { }

keyboard

variable xyz, abc,

citation

100 Main Street, Major City, MD 20817



Paragraph : 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 
 tags, the document becomes one large paragraph.
...
   The closing tag 
 is optional 
  Start a new paragraph
   HTML 3.0 feature

 Force a line break 
 
...
 
... 
  Do not wrap the enclosed text 
   Force a space character 


Paragraph: To Break or No To Break : Paragraph: To Break or No To Break This is a paragraph. Spaces,   line breaks, empty lines do
not work in HTML documents. You need to use 

line break tag <br>. 
This line has a line break.

This line is followed by a horizontal line.

Another paragraph after 
 the <hr>
 
This is another paragraph with extra      space.



Horizontal Lines 
 : Horizontal Lines 
 














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


Unordered Lists: 
, 
,  : Unordered Lists: 
, 
, 
 





A Simple Unordered List

   
First item 
   
Second Item 

Multiple Level & Unordered List

   
Level 1
   

      
Level 1.1
      
Level 1.2  
   
   
Level 2 
   

      
Level 2.1
      
Level 2.2  
   






Ordered Lists: 
, 
,  : Ordered Lists: 
, 
, 
 





A Simple Ordered List

   
First item 
   
Second Item 

Multiple Level & Ordered List

   
Level 1
   

      
Level 1.1
      
Level 1.2  
   
   
Level 2 
   

      
Level 2.1
      
Level 2.2  
   
   
Mixing order and unorder list 
   

      
Level 3.1
      
Level 3.2  
   






Menu List:  
 <\menu> : Menu List:  
 <\menu>


Glossary: 
, 
, 
  : Glossary: 
, 
, 
 
  DL: Definition List
DT: Definition Term
DD: Definition Description


Special Characters : 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)


Escape Sequences : Escape Sequences HTML includes character combinations, called escape sequences, to represent these characters in an HTML document, They are:
	< (the escape sequence for <)
	> (the escape sequence for >)
	& (the escape sequence for &)
	" (the escape sequence for “)
     (the escape sequence for space character)

To display 
 as it is in an HTML document, you should write it in the following two ways:  
<HR>
<HR>
Note: It is important to note that escape sequence are case-sensitive , unlike all other HTML tags.  


More Escape Sequences : More Escape Sequences There are many more escape sequences for non-ASCII characters.  Some of the more common ones are:
ö (the escape sequence for a lowercase o with an umlaut, ö)
&ntild; (the escape sequence for lowercase n with a title; ñ)
È (the escape sequence for an uppercase E with a grave accent; è)
© (Netscape extension for ©) 
® (Netscape extension for ®)

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


Document Meta Tags : Document Meta Tags : document title; goes in  session. 
: base reference, the full URL of the current document; goes in HEAD


 
 
 
 
 
 For traditional Chinese: 



Exercise: Contact Page  contact.htm : Exercise: Contact Page  contact.htm 

[ Home  | Profile  | Product | Contact | Resource ]
AITC Contacts

Minder Chen
Bruce Johnson
Robert Smith


Minder Chen

703-334-4566


Bruce Johnson

703-334-4577


Robert Smith

703-334-5555



















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


Introduction to Hypertext : 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.


Intra-document (Internal) Hypertext Links : Intra-document (Internal) Hypertext Links Intra-document hyperlink links









Section 1: aaa
This is section 1
...

Back to the Table of Content

Section 2: bbb
This is section 2
...


    Table of contents
Section 1: aaa
Section 2: bbb
Section 3: ccc
   Viewing area of the document


Inter-document (External) Hypertext Links  : Inter-document (External) Hypertext Links  Document1
...

Link to document 2
...
 Document2
...
...
Link to Section D of Doc3
...
...
 Document2
...
...
Section D
...
...
Link to Document1
...
...
  Toolbox Document
Hammer
...

Screw Driver
....  an image link A B C D an image map link 


Hypertext Links : 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: 


Hyperlink: 
Hot words


Linking and Anchoring  : Linking and Anchoring  
…

Section 1
…

Go to Section 2
…

…

Section 2
  
…

 
…

…
Top of y
…

…
 Section 2 of y
…

 x.htm y.htm


Example: Internal Link : Example: Internal Link 

 Minder Chen
Bob Johnson


Minder Chen

703-999-8888



External Link Using Relative URL : External Link Using Relative URL Contact Bruce Johnson for web problems.  index.htm 
Bruce Johnson

703-334-4577
 contact.htm


Contact.htm : Contact.htm 
AITC Contacts

Minder Chen
Bruce Johnson
Robert Smith



Minder Chen

703-334-4566

[ Index ]


Bruce Johnson

703-334-4577

[ Index ]


Robert Smith

703-334-5555

[ Index ]

















Netscape Communicator (Composer) : Netscape Communicator (Composer) 


Defining a Link in Netscape Composer : Defining a Link in Netscape Composer 


Use a Relative URL : Use a Relative URL Examples: 
 Another file in the same directory  
Can be written as Another file in the same directory 
Another file in the subdirectory under current document's directory
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').


Document Directory Structure : Document Directory Structure 10_link.htm  (Current Document) 10_test.htm  () oracle.htm (  x.htm  (in the same folder) y.htm  (in the html folder)
Root relative path
Document relative path Web document root


Relative URL  : Relative URL  


Links Between Documents : Links Between Documents 
  

Links with Relative URLs
Links to another file on the same web site and in the same directory 

Go to another document in the same directory
	

	
Go to the Anchors and Hyperlinks 

	
<a href="10_link.htm">Go to the Anchors and Hyperlinks</a> <br>
	
Go to an anchor of another document in the same directory
	

	
Go to Section 2 of the Anchors and Hyperlinks 

	
<a href="10_link.htm#section2">Go to the Section 2 of the Anchors and Hyperlinks</a> <br>
	

Links to another file on the same web site but in a different directory 

Go to a document  in a subdirectory directory of the current directory
	

	
Go to a 10_test.htm in the subdirectory /webpub under /tutor  
	
<a href="webpub/10_test.htm">Go to 10_test.htm </a> in a subdirectory webpub   under /tutor 	

Go to a document in a different directory
	

	
Go to Oracle training  
	
<a href="../../nvcc/oracle.htm">Go to Oracle training</a> 
	





Creating Links from Bookmarks in Netscape Composer : Creating Links from Bookmarks in Netscape Composer Drag-and-drop a bookmark item into the HTML document in the editing mode.


URL: Uniform Resource Locator : 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.



Resource Types : Resource Types Resource types: 
http: A file on a World Wide Web server
ftp: A file on an anonymous FTP server
mailto: Send an e-mail to an e-mail address
file: A file on your local system
gopher: A file on a Gopher server
WAIS: A file on a WAIS server
news: An Usenet newsgroup
telnet: A connection to a Telnet-based service
More examples: 
ftp://ftp.ncsa.uiuc.edu/Web
gopher:make.up.something
news:comp.databases.oracle
mailto:aitc@erols.com
telnet://osf1.gmu.edu Send an email (aitc@erols.com) to 
 Minder Chen


Defining Absolute Hyperlinks:  Hot words   : Defining Absolute Hyperlinks:  Hot words   

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


Include Inline Images  : Include Inline Images  



Include images in your HTML documents:<IMG SRC="image.gif">
 How to make money on WWW?  
 
 Call us!  
 Call us!  
 Call us!  

 Call us!



ALIGN : ALIGN 


Download Image Files : Download Image Files Click right mouse button on top of an image in a web page


Example : Example Small Lion: 
	



Big Lion: 
	



Hot image using a thumb nail image to link to a larger image:

	




Netscape Composer: Defining IMG Tag’s Attributes  : Netscape Composer: Defining IMG Tag’s Attributes  


 syntax :  syntax   Text float around the image that is placed on the left. 



Break the floating text.  
Clear="left": The next line begins at the nearest line at either margin following any floating objects. 



Defining Image Link in Netscape Composer : Defining Image Link in Netscape Composer 


Using IMG Tag : Using IMG Tag Advanced IMG Tag Attributes: 
	

Image Link: 
 


  


Image File Types : 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.


Examples of Using Images  : Examples of Using Images 


HTML Code  : HTML Code  




 
             Clip art collection on Yahoo 





  
 

 Go back to where you are!  

 Money grows!  

 Using thumbnail 
                 with Interlace 

 Using thumbnail 
                  Without interlace






Link to an External Image File : Link to an External Image File Text link to an external image file
	 Go to nail   
A thumbnail image link to an external image file
	
Both thumbnail image link and text link to an external image file
	Go to nail



Graphic and Image Tools : 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 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


Tables:   : Tables:   



Tables 

	
A basic table that has three columns and two rows.



  
A
 
B
 
C
 
  
D
 
E
 
F
 






Product.htm : Product.htm 
Product Table

ID
 
Name
 
Price
 
Comment
PC100
Compaq Computer
$2,000
      
Compaq's Web Site
 
  	
TV25
 
25 " Sony TV
 
$300
 	
 
 
  
Pet001
 
Little Lion
 
$50
 	
 
10% discount off the list price today




Editing a Table in Netscape Composer : Editing a Table in Netscape Composer 


New Table Creation : New Table Creation 


Netscape Composer: Cell Properties : Netscape Composer: Cell Properties 


More Table Examples : More Table Examples 

Tables 

Table 1.  WWW Course Grade Analysis

Degree

 
MBA
Others
Gender
Males
3.5
3.1

Females
3.6
3.4


 
Immediately following the table opening tag.   


External Sounds and Animation : 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.


Common MIME File Types for Multimedia Documents : 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 Format
MPEG: Moving Picture Experts Group 5-seconds of audio 
Size		Format
36KB 		WAV
4KB 		RealAudio 14.4
8KB 		RealAudio 28.8


Configure Your Browser for Viewing Multimedia Documents : 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.  


Define Helper Apps: Edit / Preferences... : Define Helper Apps: Edit / Preferences... 


Linking to External Multimedia Files  : Linking to External Multimedia Files  Specify File Size Explicitly Point to site to download the required helper application


HTML Code : 




777 Virtual Tour


In order to take the virtual tour of the 777, you'll need QuickTime VR software on your computer.  Click here to retrieve QuickTime VR and instructions on how to load it onto your machine.  Then come back and take the tour! 


Tour the flight deck of the 777.  (155K)
Tour the spacious first class interior of the 777.  (155k)


 HTML Code Correct File Type


Using