DIG6137 Information Architecture

							DIG6137 Information
   Architecture


            LECTURE 2: HTML
                AND CSS

             DR. MCDANIEL
               FALL 2007
                          Outline

 Review of information content and quality equations
    and sample problems
   Discussion of readings
   A brief history of the Internet
   Basic HTML tutorial
   Basic CSS tutorial
   Minor Assignment 1 details
                     Information Equations

I = -p log2 p and C = W log2 (1 + S/N)
Example question: What is the total information involved in gaining knowledge
   of the event of tossing a coin and turning up heads?
I = -1/2 (log2 (1/2)) = -1/2(-1) = .5 We are expecting heads. We will be surprised
   half of the time!

Turning up tails? This is the same probability, so we will still be surprised half of
  the time.

Tossing a coin? Now we must add both probabilities. I = -1/2 (log2 (1/2)) + -1/2
  (log2 (1/2)) = -1/2 * -1 + -1/2 * -1 = 1 bit. We will be surprised all of the time,
  since we are expecting neither heads nor tails!
                  Sample Questions

 Sample questions on information transfer will focus more
  on understanding binary encoding and logarithms than on
  understanding probability.
 Example: ASCII is a 7-bit code. How many unique “codes”
  can be stored in ASCII format?
 Example: Razzamaraz Joyce is a secret agent working for
  the Dutch. Her communiqués are strings of numbers (zero
  through nine). If her message contains ten distinct encoded
  numbers, how many bits are needed to encode her message
  for transmission? What size is ideal for encoding each
  distinct number: a byte, half-byte, or single bit?
                 What is the Internet?

 Operationally, we can define the Internet as a vast
 network of Web servers that allows us to:
    Provide access to our own Web sites
    Link to other Web sites
    Display images and multimedia information
    Connect with databases
    Access unlimited amounts of porn
    Reach out and touch the world
 Are the Internet and the World Wide Web the same
 thing?
     Key Events in the Internet Evolution

 1965: The term “hypertext” is coined by Ted
    Nelson
   1969: Goldfarb, Mosher, and Lorie invent the
    Generalized Markup Language (GML)
   1969: ARPANET is formed
   1986: SGML, derived from GML, is adopted as
    an ISO standard
   1987: 10,000 Internet hosts
   1989: Tim Berners-Lee begins work on the
    World Wide Web Project
                      Tim Berners-Lee

    Hoped to connect the distributed work of physics
     researchers.
    Devised a prototype system based on three
     components:
    1.   A uniform address
    2.   A protocol for transmitting information
    3.   A language for encoding information
    The prototype system was called Worldwideweb.
                           HTML

 HTML was derived from SGML, but with a few key
 differences:
    It was simplified.
    It was universal.
    It was degradable. New versions of HTML must never break
     older releases of the language.
                Key Events (cont.)

 1991: First draft of Hypertext Markup Language
    (HTML) is online
   1993: Mosaic is developed
   1994: Netscape Navigator is released
   1995: Internet Explorer is released
   1995: 10 million Internet hosts
   1996: CSS becomes a W3C recommendation
               Key Events (cont.)

 1997: Dynamic HTML is supported in 4.0 browsers
 1998: eXtensible markup language (XML) becomes a
  W3C recommendation
 2000: 75 million Internet hosts
 2004: 275 million Internet hosts
 2005: AJAX appears and heralds Web 2.0.


 Hobbe’s Timeline:
 http://www.zakon.org/robert/internet/timeline/
     Learning to be an Information Architect

 Anyone can create BAD Web pages.
 Anyone can create INEFFICIENT Web pages.
 Our goal is to learn how to think like an information
 ARCHITECT. What does that mean?
    Careful planning and analysis
    Usability testing and considerations
    Using interactivity wisely
    Taking advantage of the latest technologies
    Making the information work for us
    Learning how to code and script! We don’t need no stinkin’
     WYSIWYGs!
                        HTML Basics

 The building blocks of HTML are called elements.
  Examples of elements include BODY, P, and OL.
 When we surround these elements with angle
  brackets, we have <BODY>, <P>, and <OL>, which
  we now call tags.
 Elements in HTML normally have three parts:
    1.    Start tags
    2.    Content
    3.    End tags
        Here is an example: <P>Hello there!</P>.
                   HTML Tags




 For a more comprehensive list, see the HTML 4.01
 Quick List available here:
 http://www.w3schools.com/html/html_quick.asp.
                     Other Notes

 HTML elements/tags are case-insensitive (i.e.,
  <B>=<b>)
 Some elements have no content (e.g., <br>)
 Some elements have no end tags
 Comments can be used in this format
 <!– This is a comment in HTML code -->
 If you are new to HTML and CSS, a reference book is
 highly recommended! I like both the Visual
 Quickstart series of books as well as the HTML Bible
 series. There are also lots of good tutorials online.
                  Basic Document Outline




meta tags are optional but useful for some search engines
A Document With Content
            HTML Tables (Code View)




 See http://www.w3schools.com/html/html_tables.asp for
 a good tutorial on tables.
HTML Tables (Browser View)
            Establishing Good Habits

 Although some tags such as <LI> and <P> do not
  require end tags (because their ending can be
  determined by the beginning of the next tag) it is a
  good idea to close them with an end tag anyway.
 Use indenting to line up blocks of nested tags.




                                    NOT SO GOOD


         GOOD
             Linking to other Pages

 This new file will be named example2.html.


                                   Let’s add a link from our
                                   example1.html file to this
                                   new example2.html file.

                                   We’ll let the user click on
                                   the Strawberry Jam link
                                   and open up this list of
                                   vendors.
Adding the Link
                     Voila! Hyperlink.



                                Clicking Here….


   (example1.html)




Leads to Here…

                                                  (example2.html)
           Content versus Formatting

 Another good habit to learn is to separate the
  descriptive data in your site from the formatting
  data.
 Why is this a good idea?
 We can accomplish this using Cascading Style Sheets
  (CSS).
 There are several ways to use CSS in your HTML
  documents. The way we will learn in this class is to
  link to an external stylesheet.
                Linking a CSS File

 Using the link tag, we can specify an external
 stylesheet to be loaded when rendering the content
 on our page.
alpaca_style.css (Example CSS file)
Browser Output
                     CSS Syntax

 CSS Syntax uses three parts: a selector, a property,
 and a value. A semicolon should follow each value.
                                        body, h1, p, and td are
                                        selectors.

                                        background, color,
                                        font-size, and font-
                                        family are properties.

                                        #CCFFFF, green,
                                        34px, Garamond…,
                                        blue, 28px,
                                        Helvetica…, are
                                        values.
                   Using Classes




 Classes allow you to further customize elements in
 your page and define more than one look for a given
 element in your page.
   Remove all formatting code from HTML

 Before




 After
Browser Output
                    Positioning in CSS

 CSS can also be used to position elements within
 your Web page.
    Relative positioning means that an element is positioned
     relative to its normal position.
    Fixed positioning means that an element is positioned relative
     to the browser window.
    Absolute positioning means that an element can be positioned
     anywhere on the page according to exact coordinates.
 You can find lots of examples for each online. We’ll
 just look at one example here – relative positioning.
Relative Positioning (Code)

                              CSS File




                                HTML File
Relative Positioning (Browser)

                          Note the two HTML
                          elements that are
                          indented relative to
                          their original
                          positions.
           Reading tasks this week

 Read chapter 3 in the Polar Bear book.
 Complete the Online Tutorials #2-3 on
  Information Architecture (linked from WebCT).
 Complete an online tutorial of your choice on
  basic HTML or CSS (I recommend
  http://www.w3schools.com/html/default.asp
  and
  http://www.w3schools.com/css/default.asp).
 Read the handout by Tim Berners Lee.
          Additional tasks for this week

 Complete Minor Project 1
 On your own, research how to:
 1.   Use hyperlinks to open new browser windows
 2.   Use named anchors
 3.   Insert images into your HTML pages
 4.   Use ordered and unordered lists
 5.   Use pseudo-classes in CSS to customize link behaviors
 Begin working on IIS-report
 (Optional) Read draft chapter on XML and CSS (will be
 posted to WebCT later this week).
                  Minor Project 1

 Create a Web page that displays an inventory of at
  least 30 items for sale for a hypothetical online
  outlet. Use CSS to format and style your page.
 Name your file “tutorial1.php” and upload it to your
  Sulley account. Link an external CSS sheet and
  upload that as well. Edit the prior “index1.php” file
  to comment out lines 17-21 (see next slide).
 If done correctly, your assignment 1 should
  automatically show up as a link from your main Web
  site (the one linked from our class Wiki) and the
  server information should no longer appear.
                Editing index.php

 Use the comment format to begin your comment on
 line 17 with <!-- and end it on line 21 with -->. In
 PHP we will learn a slightly different syntax for
 comments.
                   40th Slide


 This is a 40th
 slide
 included only
 because it
 would make
 Mr. Monk
 happy.