HTML Authoring and Web Publishing

1
HTML Authoring and Web Publishing

• Minder Chen, Ph.D.
• mchen_at_gmu.edu

HTML Authoring Tools/Editors
Web Publisher
External Applications Non-HTTP objects
CGI Common Gateway Interface
Web Server
Web Browser

Internet Global Reach Broad Range
Client
Web Master
End User
Server
2
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.

3
Client-Server Model of http
1

• Requesting a document via a URL address
• Connection open

helper app
helper app
helper app
helper app
helper app
Web Site
Web Server
Internet or Intranet
Web Client

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

2
Static

• Returning MIME-compliance document
• Connection close

Dynamic
MIME Multipurpose Internet Mail Extension
4
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

5
The Extended Framework of WWW
HTML Authoring Tools/Editors
External Applications Non-HTTP objects
Web Designer Publisher

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

Web Programmer
Web Browser

Internet Global Reach Broad Range
Web Server
Client
Web Master
End User
6

• lthtmlgt
• ltheadgt
• lttitlegt HTML Sampler Web Page lt/titlegt
• lt/headgt
• ltbodygt
• lth1gtHTML Samplerlt/h1gt
• ltimg src"eyes.gif"gtltbrgt
• ltbgt List lt/bgt
• ltulgt
• ltligt Item 1
• ltligt ltfont size2gtItem 2lt/fontgt
• ltligt ltigtItem 3lt/igt
• lt/ulgt
• lttable border1gt
• lttrgt ltthgt Namelt/thgt ltthgtSpeciality lt/thgt lt/trgt
• lttrgt lttdgt Minder Chenlt/tdgt lttdgtMIS lt/tdgt lt/trgt
• lttrgt lttdgt Justin Chenlt/tdgt lttdgtAerospace lt/tdgt
  lt/trgt
• lt/tablegt
• ltpgt

image
list
table
form
link
7
Anatomy of a Tag
ltH1 ALIGN"CENTER"gt HTML Tutorial lt/H1gt ltH1
ALIGN'CENTER'gt HTML Tutorial lt/H1gt ltH1
ALIGNCENTERgt HTML Tutorial lt/H1gt

• ltH1 ALIGN"CENTER" gt HTML Tutorial lt/H1gt

Attributevalue
Closing tag
Opening tag
Element
8
Solution Create a Web Page
Save it at c\temp\index.htm
lthtmlgtltheadgtlttitlegtAdvanced IT Consultinglt/titlegtlt
/headgtltbodygt lth1gtAITC Web Sitelt/h1gt ltulgt ltligtCompa
ny Introduction ltligtProducts ltligtHow to Contact
us ltligtOnline HTML Resources lt/ulgt Developed by
Advanced IT Consulting ltbrgt Contact us by email
at aitc_at_erols.com lt/bodygtlt/htmlgt

• AITC Web Site
• Company Introduction
• Products
• How to Contact us
• Online HTML Resources
• Developed by
• Advanced IT Consulting contact
• us at aitc_at_erols.com

9
Class Project
C\temp\index.htm

• AITC Web Site
• Company Introduction
• Products
• How to Contact us
• Online HTML Resources
• Developed by
• Advanced IT Consulting contact
• us at aitc_at_erols.com

profile.htm
AITC
Home Intro Product Contact AITC
Introduction AITC is .. Guest Book Entry
Name Know HTML
contact.htm
product.htm

• Home Intro Product Contact
• AITC Employees
• Minder Chen
• Bruce Johnson
• Terry Smith
• Minder Chen
• 703-334-4566
• Index
• Bruce Johnson
• 703-334-4577
• Index

Product Listing ID Name Price 100 TV
250 200 PC 999 210 XY
234
Home Intro Product Contact
Resume
Submit
Web Site Home Page Web Page
10
Hypertext and Links

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

11
Intra-document (Internal) Hypertext Links
Intra-document hyperlink links Section
1 aaa This is section 1 ... Back to the Table
of Content Section 2 bbb This is section
2 ...
Viewing area of the document
Table of contents Section 1 aaa Section 2
bbb Section 3 ccc
12
Inter-document (External) Hypertext Links
Document1 ... Link to document 2 ...
Document2 ... ... Link to Section D of
Doc3 ... ...
A B C D
an image map link
an image link
Document2 ... ... Section D ... ... Link to
Document1 ... ...
Toolbox Document Hammer ... Screw Driver ....
13
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 lta name"anchor"gtlt/agt Hyperlink lta
href"URLanchor"gtHot wordslt/agt
14
Linking and Anchoring
y.htm
x.htm
lthtmlgt ltbodygt lth1gtSection 1lt/h1gt lta
href"sec2"gt Go to Section 2lt/agt lta
name"sec2"gtlt/agt lth1gtSection 2lth1gt
lt/bodygt lt/htmgt
lthtmlgt ltbodygt lta href"y.htm"gtTop of
ylt/agt lta href"y.htmsec2"gt Section 2 of
ylt/agt lt/bodygt lt/htmgt
15
Example Internal Link

• ltulgt
• ltligt lta href"minder"gtMinder Chenlt/agt
• ltligtBob Johnson
• lt/ulgt
• lta name"minder"gtlt/agtMinder Chenltbrgt
• 703-999-8888ltbrgt

16
External Link Using Relative URL
index.htm
Contact lta href"contact.htmjohnson"gtBruce
Johnsonlt/agt for web problems.
contact.htm
lta name" johnson "gtlt/agt Bruce Johnsonltbrgt 703-334
-4577ltbrgt
17
Contact.htm

• lthtmlgtltheadgtlttitlegtAITC Contact
  Informationlt/titlegtlt/headgt
• ltbodygtlta name"top"gtltagtlth1gtAITC Contactslt/h1gt
• ltulgt
• ltligtlta href"chen"gtMinder Chenlt/agt
• ltligtlta href"johnson"gtBruce Johnsonlt/agt
• ltligtlta href"smith"gtRobert Smithlt/agt
• lt/ulgt
• lthr width6gt
• lta name"chen"gtlt/agt
• Minder Chenltbrgt
• 703-334-4566ltbrgt
• lta href"top"gtIndex lt/agt
• ltpgt
• lta name"johnson"gtlt/agt
• Bruce Johnsonltbrgt
• 703-334-4577ltbrgt
• lta href"top"gtIndex lt/agt
• ltpgt
• lta name"smith"gtlt/agt

18
Use a Relative URL

• Examples
• lta href"http//www.aitc.com/mchen/fileX.htm"gt
  Another file in the same directorylt/agt
• Can be written as lta href"fileX.htm"gtAnother
  file in the same directorylt/agt
• lta href"subdir/fileY.htm"gtAnother file in the
  subdirectory under current document's
  directorylt/agt
• 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').

19
Document Directory Structure
Web document root
y.htm (in the html folder) lta href"/html/y.htm"gt
Root relative pathlt/agt lta href"../y.htm"gtDocument
relative pathlt/agt
x.htm (lta href"x.htm"gtin the same folderlt/agt)
10_link.htm (Current Document)
10_test.htm (lta href"webpub/10_test.htm"gtlt/agt)
oracle.htm (lta href"../../nvcc/oracle.htm"gtlt/agt
20
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.com80/mydoc/index.html
• Directory path name may be case sensitive.

21
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
• gophermake.up.something
• newscomp.databases.oracle
• mailtoaitc_at_erols.com
• telnet//osf1.gmu.edu

Send an email (aitc_at_erols.com) to lta
href"mailtoaitc_at_erols.com"gt Minder Chenlt/agt
22
Tables ltTABLE gt lt/TABLEgt

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Tables lt/TITLEgt
• lt/HEADgt
• ltH3gtTables lt/H3gt
• ltBODYgt
• A basic table that has three columns and two
  rows.
• ltTABLE BORDERgt
• ltTRgt ltTDgtAlt/TDgt ltTDgtBlt/TDgt ltTDgtClt/TDgt lt/TRgt
• ltTRgt ltTDgtDlt/TDgt ltTDgtElt/TDgt ltTDgtFlt/TDgt lt/TRgt
• lt/TABLEgt
• lt/BODYgt
• lt/HTMLgt

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

23
Product.htm

• ltHTMLgtltHEADgtltTITLEgt AITC Products lt/TITLEgtlt/HEADgt
• ltBODYgtProduct Table
• ltTABLE BORDER3gt
• ltTRgtltTHgtIDlt/THgt ltTH width150gtNamelt/THgt ltTH
  gtPricelt/THgt ltTHgtCommentlt/THgtlt/TRgt
• ltTRgtltTDgtPC100lt/TDgtltTDgtCompaq Computerlt/TDgtltTD
  alignrightgt2,000lt/TDgt
• ltTDgtlta href"http//www.compaq.com/"gtCompaq's Web
  Sitelt/agtlt/TDgt lt/TRgt
• ltTRgt ltTDgtTV25lt/TDgt ltTDgt25 " Sony TVlt/TDgt ltTD
  alignrightgt300lt/TDgt ltTDgtnbsplt/TDgt lt/TRgt
• ltTR valigntopgt ltTDgtPet001lt/TDgt ltTDgtLittle
  Lionlt/TDgt ltTDgt50lt/TDgt ltTDgtltimg
  src"slion.gif"gtlt/TDgt lt/TRgt
• ltTRgtltTD colspan4gt10 discount off the list price
  todaylt/TDgtlt/TRgt
• lt/TABLEgt
• lt/BODYgtlt/HTMLgt

• TH Table Header (Header Cell)