Website Building for Beginners

1
Website Building for Beginners

• Robert A. Pickering Jr.

2
Contents

• Background on the web HTML
• URLs and the HTTP Protocol
• Working with HTML
• HTML Editors
• How to Host your Site
• CGIs, Search Engines, and Statistics
• References

3
What is HTML?

• The Hyper-Text Markup Language
• A Document built using tags for formatting
  instructions
• The basis of the World Wide Web

4
HTML Background

• "Information Processing - Text and Office Systems
  - Standard Generalized Markup Language (SGML),
  published by ISO in 1986 (ISO 8879)
• Tim Berners-Lee, (CERN) near Geneva, Switzerland,
  writes proposal in 1989 for a hypertext document
  system (which was labeled "The World-Wide Web" in
  October of 1990).
• Dan Connolly (CERN) writes specifications for
  HTML in 1990.
• January of 1992, CERN releases first Web
  Browser. But text only.
• Marc Andreessen's Mosaic for X, was released by
  NCSA in February of 1993
• Current release of HTML is Version 4.0

5
World Wide Web Background

• Developed at CERN on a NeXT Cube by Tim
  Berners-Lee, serves text documents
• Several Papers delivered to technical committees
  and organizations
• January, 1993 only 50 known web servers
  worldwide
• April 30, 1993, CERN releases HTML and http to
  public domain with no license restrictions
• October, 1993 200 known web servers worldwide
• March, 1994, Mark Andreessen leaves NCSA to form
  Mosaic (later Netscape)
• June, 1994 1500 known web servers worldwide
• Today over 1 million web servers known worldwide

6
URL Definition

• Uniform Resource Locator
• Syntax defined in RFC 1738 as subset of Uniform
  Resource Identifier (URI)
• Syntaxltschemegtltscheme specific partgt
• Valid ltschemegtsftp, gopher, http, mailto,
  news, nntp, telnet, wais, file, prospero
• Syntax for ltscheme specific partgt//ltusergtltpassw
  ordgt_at_lthostgtltportgt/lturl-pathgt
• ltusergt ltpasswordgt are optional, and followed by
  _at_ if present
• lturl-pathgt syntax varies according to scheme

7
Basic Architecture of an HTML Document

• Tags (ltopen_taggttextlt/close_taggt)
• The HTML Document ltHTMLgtlt/HTMLgt)
• The Document Head (ltHeadgtlt/Headgt)
• The Document Title (ltTitlegtlt/Titlegt
• The Document Body (ltbodygtlt/bodygt)

8
The HTML Document

• Can only contain ltHEADgt and ltBODYgt elements.
• Formally optional element of document.
• Good idea in case of new document types
  developing.

9
Document Head

• Contains general information about document.
• ltTitlegt is the most common element found.
• Others include ISINDEX, BASE, LINK, META, and
  NEXTID
• META being used more for including search
  keywords for search engines.

10
Document Body

• Why a Head and a Body?
• HTML is designed to logically separate
  information about the document from the document
  information.
• HEAD elements can also be used to describe
  relationships of this document to others.
• ltBodygt contains bulk of document. Most HTML tags
  will be found in the ltbodygt
• Also supports attributes on the ltBodygt element
  tag
• BACKGROUND, BGCOLOR, TEST, LINK, VLINK

11
How to Hyperlink Documents

• Hyperlinking to a document is performed using a
  Hypertext Anchor
• ltA HREFURLgttext to displaylt/Agt

12
How to Add Graphics

• Graphics are added to documents using IMG SRC
  elements.
• ltIMG SRCURLgt
• Can be imbedded inside of other TAGs

13
Tables Frames, and Why?

• Tables provide a way of laying out a document in
  a structured fashion.
• Spaces are ignored in a HTML document.
• Frames provide a higher degree of continuity in a
  website.

14
Editors

• WYSIWYG What you see is what you getMicrosoft
  Frontpage
• Text EditorsAllaire Homesite
• Hybrid EditorsAdobe Pagemill

15
Hosting my Website

• Domains and subdirectories
• http//www.mydomain.com/ or
• http//www.theirdomain.com/mysite

16
Moving Files

• FTP, HTTP, and SAMBA
• File Transfer Protocol
• Hyper-Text Transfer Protocol
• SAMBA (Windows NT mounting via SMB)

17
CGI Programs

• Email form
• Guestbook
• Counter
• Imagemap

18
Search Engines

• Do I want to be on a search engine?
• How do I get on a search engine?
• META Tags
• Submit IT
• Search Engines
• http//www.altavista.com/
• http//www.yahoo.com/
• http//www.excite.com/

19
Statistics

• Do I want statistics on my site?
• Free Tools
• Analog
• WUsage
• Commercial Tools
• Web Trends

20
New Technologies

• Macromedia Flash
• Dynamic HTML
• VRML
• XML

21
Website References

• Building a Websitehttp//www.fau.edu/divdept/exsc
  i/seacsm/webpage.htm
• HTML Tutorial Websitehttp//www-pcd.stanford.edu/
  mogens/intro/tutorial.html
• Website Teacherhttp//www.webteacher.org/
• Builder.com (by CNet)http//www.builder.com/
• Web Monkeyhttp//www.hotwired.com/webmonkey/