Aspen Systems
Advanced HTML
Course Outline

Prof. Raymond J. Kimball
Program Director, TechLEAP

Resources
Resource Page

Tutorial - Maricopa Community College Web Tutorial

Castro - HTML for the World Wide Web - Chapters

  1. Survey -- How much do you know
    • How many of you have built a web page?
    • How many of you have built sophisticated web sites?
    • How many of you know HTML code? How much?
    • How many of you know how to create HTML forms, frames, image maps, cascading style sheets?
    • How many of you have used Adobe Photoshop or any image editor to create web based images?
    • What are the three web-acceptable graphic formats, and what are their extensions? g, j, p. What are two common graphic formats that are not particularly web friendly? Why? a. b.
    • How many of you have used Macromedia Flash to create computer animations? Have you built web pages using Flash?
    • How many of you are familiar with JavaScript; Flash ActionScript; Director Lingo? What are the differences?
  2. Exercise. Build a simple web page.
  3. Brief History of the Internet
    • Hobbes Internet Timeline
    • 1957 - Sputnik (Spitnik!)
    • 1958 - President Eisenhower establishes Advanced Research Project Agency (ARPA)
    • 1968 - ARPA orders Universities to share computer files; lets contract for creation of network.
    • 1969 - ARPANET delivered to Santa Barbara California -- first router, first use of "packets" and "packet switching." Bolt Beranek and Newman, Inc. (BBN) awarded Packet Switch contract to build Interface Message Processors (IMPs).
    • 1972. Email invented. Arpanet's first "killer app."
    • 1974 TCP/IP Protocols for sending text-based messages across the web. Vint Cerf and Bob Kahn publish "A Protocol for Packet Network Interconnection" which specified in detail the design of a Transmission Control Program (TCP).
    • 1975 - First Personal Computer (Altair) invented. Bill Gates and Bill Allen (19) leave Harvard as freshmen to build first OS for Altair, using modified version of Basic computer language.
    • 1977-78. Apple II computer, first useful PC, introduced.
    • 1981 - IBM PC introduced using MS-DOS Operating System.
    • 1981 - Lotus Spreadsheet becomes first PC "killer app."
    • 1980's - Network protocols (Ethernet, etc) established. Arpanet network expanded and constructed.
    • 1991World-Wide Web (WWW) released by CERN; Tim Berners-Lee developer
    • 1992 - Congress changes law. Permits internet to be used by commercial, and not just non-commercial, users
    • 1993 - First Mosaic browser developed by Mark Andreeson at U. Ill. Champaign. "Mosaic takes the Internet by storm; WWW proliferates at a 341,634% annual growth rate of service traffic. Gopher's growth is 997%." Hobbes' Time Line.
    • 1994 - Netscape, Mosaic's successor, is fastest-growing company in US history. Browser is free to individuals, licensed for $30 per computer to businesses.
    • 1995. Microsoft introduces Internet Explorer; ties "sales" into MS-DOS Operating System and "gives away" IT for free to businesses.
    • 1996 - Netscape's browser market virtually destroyed by MS business tactics.
    • 1997 - US Dept. of Justice sues MS for mis-use of its monopoly power in the PC Operating System market to destroy competition from Netscape in emerging Internet browser market.
  4. Server-Client internet model
  5. World Wide Web - the network system that uses Hypertext Transfer Protocol
  6. What is the Web?
  7. Uniform Resource Locators - URLS
  8. 255.0.255.22
  9. http://montgomerycollege.org/~rkimball
  10. http:// Protocol - rules for information communication
  11. Webopedia.com
    • TCP/IP
    • SMTP - Simple Mail Transfer Protocol
    • POP - Post Office Protocol
    • MIME - graphics
    • HTTP
    • Gopher
    • Telnet
  12. www. - The name of the Server Computer which contains the software that stores and retrieves web documents at the command of the client's browser software.
  13. Reserved Names - Names you reserve for a fee. Cocanal. Verisign.
  14. Domain Names. The domain with which your reserved name is located.
    • Outside US - country names - .uk, .de, .tv, .us
    • Inside US - more domain names needed -- .com, .org, .net, .gov, .mil
  15. Developing Your first web page.
    • HTML - Hypertext Mark-up Language. The computer language the www broswer reads and interprets to display a document
    • Static - simply marks up text
    • Developing more dynamic languages to display and manipulate graphics (Adobe Photoshop, Macromedia Fireworks) accept, store and retrieve data (CGI/PERL script), make text move (JavaScript); create site-wide rules for text objects (Cascading Style Sheets - CSS); create separate animations (Flash)
  16. Your First HTML Template using HTML Tags
    • Tags - containers. Opening Tag, closing tag.
    • HTML tags based on English Language concepts - fairly easy to understand their formation. Paragraph, Header, List Item, Ordered List, Unordered List, font
    • Tags have 3 parts
      • Element Attribute Value
      The main name of the tag - Anchor <A> The qualities of the tag -- the things the tag can do: <A HREF><
      font color ="red">      		 The value of the attribute; <font color = "red">
    • Four Main Tags: HTML, HEAD,TITLE, BODY
    • Make and save a standard Template.
    • HTML "Editors". Using ASCII-Based, Text-Only NotePad to Create HTML.
    • "WYSISYG" HTML Editors - Dreamweaver, Netscape, Front Page
    • "Real" HTML Editors - Macromedia Homesite
  17. Castro, Ch. 1 - HTML Building Blocks
    • Syntax - Angle Bracket around complete tags, Quotes around values
    • Nesting
    • Ignoring spaces
    • Special symbols
      • See HomeSite for creating.
      • See Castro, Appendix B
    • File Names
      • No capital letters
      • No spaces between words, as in MS word
      • Cool SiTe.html
      • Mom's Pic.jpg
      • mom_pic_013102.jpg
      • Extensions = .htm or .html
    • Absolute URLs - "http://www.cocanal.com"
    • The Three and only three types of Relative URLS
      • Files in same folder. <A HREF="greatfalls.html">
      • File in a different folder inside the current folder. <A HREF="mile14/greatfalls.html">
      • File in a different folder outside the current folder. <A HREF="../mile14/greatfalls.html">
      • Which one's gonna work? Try all three -- you can only be wrong twice!!!
  18. Castro, Ch. 2 - Starting Your Page
    • Designing Your Page
    • Classic Web Page Design - Sklar.
      • <HTML>
      • <Head>
      • <Title>
      • </Title>
      • </Head>
      • <Body>
      • </Body>
      • </HTML>
    • Header Tags<H1></H1>
    • Paragraph Tags<P></P>
    • <>
    • <>
    • Previewing your page in a browser -- tiling the editor and browser.
  19. Using FTP
  20. Web4Students
    • Chapter 3 - Text Formatting
      • The "deprecated" FONT tag
      • Netscape 4.6 and older browsers.
      • Netscape 6.0 broswers
      • What's the alternative to using font tags? Cascading Style Sheets
      • Attributes of the Font Tag
        • face = "Comic Sans MS, Arial, sans-serif"
        • face = "Garamond, Helvetica, Times New Roman, serif"
        • size
          1. = 8 point text
          2. = 10 points
          3. = 12 points (default)

          4. = 14

          5. = 18 points

          6. = 24 points
          7. = 36 points (1/2 inch high)
        • See also <BASEFONT = "4"> tag.
        • color
          • 16 Pre-Defined colors - Castro back flap
          • 216 Browser-Safe Colors = Homesite Artist Pallette Graphic. - For 8-bit monitors. Castro, p. 58.
          • 256 - 40 = 216.
          • Hexadecimal Colors and RGB Colors - Photoshop vs. the Web. Castro, Appendix c. pp. 358-9.
          • "dithering" colors - color combination and reproduction problems.
          • We'll return to the color problem a number of times on graphics, publishing movies, GIF files, etc. Remember, it's all about the pretty picture
        • SUP Tag - Footnotes
        • Sub Tag - Subscripts
        • MonoSpaced fonts - CODE, KBD, SAMP - NOT USED OFTEN
        • Don't BLINK!!!! - Epileptic seizures!