Table of Contents | All Slides | Link List | CSCI E-12

The Internet and the World Wide Web

January 28, 2009

Harvard University
Division of Continuing Education
Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Instructor email: david_heitmeyer@harvard.edu
Course staff email: cscie12@fas.harvard.edu

This Lecture's Topics

The Course
The Internet and Web
Web Parts
Markup (XHTML and HTML)

A form for lecture feedback will be available from the course web site. Please take two minutes to fill it out after you have seen the lecture.

Goals of CSCI E-12

Vocabulary, tools, and standards
Understand the Parts
Bring it together in a final project
Strong foundation for further work

Course Description
This course provides a comprehensive overview of website development. Students explore the prevailing vocabulary, tools, and standards used in the field and learn how the various facets—including XHTML, CSS, JavaScript, Ajax, multimedia, scripting languages, HTTP, clients, servers, and databases—function together in today's web environment. The course provides a solid web development foundation, focusing on content and client-side (browser) components (XHTML, CSS, JavaScript, multimedia), with an overview of the server-side technologies. In addition, software and services that are easily incorporated into a website (for example, maps, checkout, blogs, content management) are surveyed and discussed. Students produce an interactive website on the topic of their choice for the final project and leave the course prepared for more advanced and focused web development studies.

CSCI E-12, Fundamentals of Web Site Development

The Course

Course Syllabus | Course Schedule

Markup (XHTML, HTML)
Style (CSS)
Images, Video, Multimedia
Javascript and Ajax
Forms
Incorporating External Functionality
Designing and Building a Site
Hypertext Transfer Protocol (HTTP)
Dynamic content (server-side)
Apache Web Server

Lectures and Sections

Lecture: Wednesday, 5:30-7:30 pm
Lecture Online: within 48 hours
Sections
- On-campus
- Online via Elluminate Live!

Work

Assignments
1. Markup: XHTML and HTML
2. Markup and Style: XHTML and CSS
3. Style: CSS
4. Function: Forms, Javascript and Ajax
5. Function: Incorporating External Functionality
6. Server-side: Dynamic Pages and the Apache Web Server
Community Participation
- Google Map of Student Locations
- Bookmarks on CSCIE-12 Delicious
- Blog posts and responses
Final Project

Texts

In addition to the texts, there will be online readings assigned and online references cited.

Required texts:

Freeman, Elisabeth and Eric Freeman. 2005. Head First HTML with CSS & XHTML . O'Reilly & Associates. 658 p. ISBN 0-596-10197-X

Head First HTML with CSS and XHTML Cover

Jennifer Niederst Robbins, 2006. Web Design in a Nutshell . O'Reilly & Associates. 826 p. ISBN 0596009879

Web Design in a Nutshell

Texts are available through:

The Internet

International Network

Wikipedia: Internet

The Internet in Pictures

Web zoom in
Image from Opte Project and is used under the Creative Commons 1.0 license.

The Internet in Pictures

internet map
"A model of Internet topology using k-shell decomposition"
Carmi, Shai et al. (2007) Proc. Natl. Acad. Sci. USA 104, 11150-11154

The Internet in Numbers

Nearly 571 million Internet hosts as of July 2008, ISC Internet Domain Survey
1.46 billion Internet users world-wide (22% of world population), Miniwatts Marketing Group
Half of all Americans have broadband at home, Pew Internet and American Life Project (September 2007)

Types of Traffic on the Internet

International Network

Web
- HTTP
Email
- SMTP
- POP
- IMAP
File Transfer
- FTP
- SFTP
- FTP over SSH
Login
- Telnet
- SSH
Gopher

The World Wide Web

The irony is that in all its various guises -- commerce, research, and surfing -- the Web is already so much a part of our lives that familiarity has clouded our perception of the Web itself.

Tim Berners-Lee in Weaving the Web

A Little History of the World Wide Web, W3C
How it all started, W3C 10-year Anniversary

The Web in Pictures

TouchGraph Web Development

Graph made from TouchGraph GoogleBrowser.

The Web in Numbers

web page and world populations

"The Indexed Web contains at least 25.41 billion pages (Tuesday, 27 January, 2009)."
from Maurice de Kunder's site http://www.worldwidewebsize.com/

The Web in Numbers

About 73 million active sites in January 2009.

Source: Netcraft Web Server Survey

The Web in Numbers

Home Use, October 2008	Value
Sessions/Visits per Person per Month	37
Domains Visited per Person per Month	72
Web Pages per Person per Month	1,600
Page Views per Surfing Session	42
PC Time Spent per Month	38:07:33
Time Spent During Surfing Session	1:02:36
Duration of a Web Page Viewed	0:00:50

Home Use, October 2008

Value

Sessions/Visits per Person per Month

Domains Visited per Person per Month

Web Pages per Person per Month

1,600

Page Views per Surfing Session

PC Time Spent per Month

38:07:33

Time Spent During Surfing Session

1:02:36

Duration of a Web Page Viewed

0:00:50

Source: Nielsen Online

Top 25 Sites for the United States

Source: Top Sites, United States, from Alexa: The Web Information Company

Thumbnail screenshots from Thumbshots.org

Top 25 Sites in the United States:

A Web Site over Time

The White House Site (www.whitehouse.gov)

whitehouse.gov
1996

whitehouse.gov
1997

whitehouse.gov
1998

whitehouse.gov
1999

whitehouse.gov
2001

whitehouse.gov
2002

whitehouse.gov
2007

whitehouse.gov
2009

Features of the World Wide Web

HyperText Information System
Cross-Platform
Distributed
About 73 million active sites as of January 2009.
Open Standards and Open Source
TCP/IP, HTTP, HTML, CSS
Apache HTTP Server, Mosaic, Netscape, Firefox, JavaScript, Perl, PHP, etc.
Web Browser: provides a single interface to many services
Information, Banking, Commerce
Dynamic, Interactive, Evolving
"Web 2.0"
- Collective Intelligence
- Data Mashups
- Rich User Experience

Approaching the Web

We cannot command nature except by obeying her.
Francis Bacon
Rule By Obeying Nature's Laws
Motto of Kansas State University

Nature of the Web

A variety of
- Platforms
- Connection Speeds
- Displays
- Web Browsers (HTTP Clients)
- Browser Settings
- Devices
- Users
- Languages
- Other Sites
Open Standards ( and Open Source)

Clients and Servers

client-server computing

The interaction between two programs when they communicate across a network. A program at one site sends a request to a program at another site and awaits a response. The requesting program is called a client; the program satisfying the request is called the server. (definition from The Internet Book, 2nd edition by Douglas E. Comer)

Client-Server Computing

Client-Server Architecture from Webopedia, http://www.webopedia.com/

HTTP Client and Server

HTTP browser and server

An HTTP Transaction

Client Request
Server Response
- Response Headers
- Response Body

HTTP Transaction:

GET / HTTP/1.1
Host: www.whitehouse.gov
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

HTTP/1.x 200 OK
Server: Microsoft-IIS/6.0
P3P: CP="NON DSP COR ADM DEV IVA OTPi OUR LEG"
X-AspNet-Version: 2.0.50727
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 7831
Cache-Control: private, max-age=38
Date: Wed, 28 Jan 2009 21:46:03 GMT
Connection: keep-alive
    
00004000

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title id="PageTitle">Welcome to the White House</title>
<meta name="keywords" content="President, Barack Obama, White House, ....cut...
<meta name="description" content="WhiteHouse.gov is the official web ....cut...

The HTTP client gets the content, makes additional requests for CSS, images, Javascript, etc., and then renders the page:

White House

URL: A Web Address

http://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/toc.html

URL Anatomy

Scheme
http://cscie12.dce.harvard.edu/lecture_notes/20080130/toc.html#slide10
Common schemes: http, https, ftp, mailto, file, rtsp
Host
http://cscie12.dce.harvard.edu/lecture_notes/20080130/toc.html#slide10
Port
http://cscie12.dce.harvard.edu:80/lecture_notes/20080130/toc.html#slide10
Path
http://cscie12.dce.harvard.edu/lecture_notes/20080130/toc.html#slide10
Fragment Identifier
http://cscie12.dce.harvard.edu/lecture_notes/20080130/toc.html#slide10

Names and Locations: URLs, URIs, and URNs

URI: Uniform Resource Identifier
- URN: Uniform Resource Name
- URL: Uniform Resource Locator

URI, URN, URL

For those who truly wish to find out more of the details, see Untangle URIs, URLs, and URNs by Dan Connolly

Web Parts

HTTP Client

Server

server-side

Client-side Web Parts: Markup, Style, Function

web parts

Markup (XHTML, HTML)
- Structure
- Content
Style (CSS)
- Style
- Presentation
- Appearance
Function (Javascript)
- Actions
- Manipulations

Our Solar System: Markup

planets-markup.html
markup

Our Solar System: Markup + Style

planets-style.html
markup

Our Solar System: Markup + Style + Function

planets.html
markup

XHTML: Solar System Example

View the example.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Our Solar System</title>
    <link rel="stylesheet" href="planets.css" type="text/css"/>
    <script type="text/javascript" src="js/jquery.js">
    </script>
    <script type="text/javascript" src="js/thickbox/thickbox-uncompressed.js">
    </script>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  </head>
  <body>
    <h1>Our Solar System</h1>
    <div class="gallery">
      <p>
        <a href="images/planets/sol.jpg" title="Sol" class="thickbox" rel="planets">
          <img src="images/planets/planets144/sol.jpg" alt="Sol"/>
          <br/>Sol</a>
      </p>
      <p>
        <a href="images/planets/mercury.jpg" title="Mercury" class="thickbox"
          rel="planets">
          <img src="images/planets/planets144/mercury.jpg" alt="Mercury"/>
          <br/>Mercury</a>
      </p>
      <p>
        <a href="images/planets/venus.jpg" title="Venus" class="thickbox"
          rel="planets">
          <img src="images/planets/planets144/venus.jpg" alt="Venus"/>
          <br/>Venus</a>
      </p>
      <p>
        <a href="images/planets/earth.jpg" title="Earth" class="thickbox"
          rel="planets">
          <img src="images/planets/planets144/earth.jpg" alt="Earth"/>
          <br/>Earth</a>
      </p>
      <p>
        <a href="images/planets/mars.jpg" title="Mars" class="thickbox"
          rel="planets">
          <img src="images/planets/planets144/mars.jpg" alt="Mars"/>
          <br/>Mars</a>
      </p>
      <p>
        <a href="images/planets/jupiter.jpg" title="Jupiter" class="thickbox"
          rel="planets">
          <img src="images/planets/planets144/jupiter.jpg" alt="Jupiter"/>
          <br/>Jupiter</a>
      </p>
      <p>
        <a href="images/planets/saturn.jpg" title="Saturn" class="thickbox"
          rel="planets">
          <img src="images/planets/planets144/saturn.jpg" alt="Saturn"/>
          <br/>Saturn</a>
      </p>
      <p>
        <a href="images/planets/uranus.jpg" title="Uranus" class="thickbox"
          rel="planets">
          <img src="images/planets/planets144/uranus.jpg" alt="Uranus"/>
          <br/>Uranus</a>
      </p>
      <p>
        <a href="images/planets/neptune.jpg" title="Neptune" class="thickbox"
          rel="planets">
          <img src="images/planets/planets144/neptune.jpg" alt="Neptune"/>
          <br/>Neptune</a>
      </p>
      <p>
        <a href="images/planets/pluto.jpg" title="Pluto and Charon"
          class="thickbox" rel="planets">
          <img src="images/planets/planets144/pluto.jpg" alt="Pluto and Charon"/>
          <br/>Pluto and Charon</a>
      </p>
      
    </div>
    <p class="credits">Images courtesy of:
      <br/> Sol: ESA./NASA/SOHO; Mercury: NASA/Johns Hopkins University Applied Physics
      Laboratory/Carnegie Institution of Washington; Venus: NASA/JPL; Earth: NASA,
      <a href="http://visibleearth.nasa.gov/">The Visible Earth</a>; Mars:
      NASA/JPL/MSSS; Jupiter: NASA/JPL/Space Science Institute; Saturn: NASA/JPL/Space
      Science Institute; Uranus: NASA/JPL; Neptune: NASA/JPL; Pluto: Dr. R. Albrecht,
      ESA/ESO Space Telescope European Coordinating Facility, NASA; </p>
  </body>
</html>

(X)HTML Document Structure

Document Type Declaration
html
- head
- body

A Tree

XHTML document as a tree

A "tree" structure view of XHTML produced by Amaya, the open source Web editor/browser from the W3C.

Components of XHTML Elements

Start Tag
- Element Name
- Attribute and Value Pairs
Content
End Tag

A Hypertext Link

Markup for a Hypertext link:


      <a href="http://www.harvard.edu/">Harvard</a>

element anatomy

Start Tag
<a href="http://www.harvard.edu/">Harvard</a>

Element Name
<a href="http://www.harvard.edu/">Harvard</a>

Attribute
<a href="http://www.harvard.edu/">Harvard</a>

Attribute Value
<a href="http://www.harvard.edu/">Harvard</a>

Content
<a href="http://www.harvard.edu/">Harvard</a>

End Tag
<a href="http://www.harvard.edu/">Harvard</a>

Styles

The XHTML page references an external stylesheet document.

The CSS file contains style rules for the document (planets.css)

Contents of the CSS file:

Harvard College Admissions

Harvard College Admissions:

With CSS disabled:

Examples from: CSS Zen Garden

css Zen Garden: The Beauty in CSS Design. A demonstration of what can be accomplished visually through CSS-based desgin.

Benefits of Web Standards

Question: What do the White House, GE, IBM, Library of Congress, EDS, Stanford, AGFA, Abbott, and Princeton have in common?
Answer: They adhere to Web standards

Standards for:

Markup (XHTML, HTML)
Style (CSS)
Function (ECMAScript, DOM)

Benefits:

Improved Accessibility
- People (Section 508, WAI)
- Machines
  - Search Engines
  - Devices
Stability
Forward-compatible and backward-compatible.
Separation of Structure and Style
- lighter, cleaner pages
- maintenance
- redesign
Validation

Web Standards Project
The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.

What are Web Standards and why should I use them?

Web Standards: Markup and Style

timeline of web standards

Some Markup Specifications

HTML 5 Working Draft (WHATWG)
January 2009
XHTML 1.1 Basic
July 2008
XHTML 2.0 Working Draft
July 2006
XHTML 1.1, Module-based XHTML
May 2001
XHTML 1.0, a reformulation of HTML 4.01 into XML 1.0
January 2000
HTML 4.01
December 1999
HTML 4.0
December 1997
HTML 3.2
January 1997
HTML 2.0
November 1995

SGML, XML, HTML, and XHTML

relationship between sgml, xml, html and xhtml

Defining Markup Languages

Standard Generalized Markup Language (SGML)
Extensible Markup Language (XML)

Specific Markup Languages

Hypertext Markup Language (HTML)
Extensible Hypertext Markup Language (XHTML)

Relationships

SGML
XML is a simplified subset of SGML
HTML is an application of SGML
XHTML is an application of XML

Well-formed (X)HTML and Valid (X)HTML

Well-formed

elements must be properly nested
elements must have a start and end tag
element names case-sensitive
attribute values must be enclosed in quote marks
attributes may not be repeated

Valid

Validate against the rules (elements, attributes, content models) of a specific grammar (e.g. XHTML 1.0 Transitional).

Two pieces to be concerned with:

Specifying the type of document. The "Document Type Declaration" is part of a markup document that declares what type of document it is.
The rules for the grammar. This is a "Document Type Definition" (DTD), which contains the definitions for all the elements, attributes, and content models.

Document Type Declaration and Document Type Definition (DTD)

The Document Type Declaration for an XHTML 1.0 strict document is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

A closer look at the components follows:

html
The name of the root element.
PUBLIC
An indication that the DTD is a public standard. Private standards would use "SYSTEM".
"-//W3C//DTD XHTML 1.0 Strict//EN"
The formal public identifier (FPI) for the DTD (Document Type Declaration). This identifier can be used to locate the parser to a local copy of the DTD.
- W3C
  The owner of the DTD (in this case the W3C, the World Wide Web Consortium).
- DTD
  The type of document that is referenced (in this case a Document Type Definition, DTD).
- XHTML 1.0 Strict
  The name of the document that the public identifier references.
- EN
  The language identifier (in this case, "EN" = English). Note that the language code is case-sensitive.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
The URI at which the parser can locate the referenced Document Type Declaration. If the parser has the DTD available in a local library, the URI is not necessary.

Common Document Type Declarations and DTDs

Some Document Type Declarations for HTML documents. Remember that the HTML document must conform to the rules of the Document Type Definition that is referenced in the Document Type Declaration:

XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 4.01 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
HTML 4.01 Transitional.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html401/frameset.dtd">
HTML 4.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
HTML 4.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html40/strict.dtd">
HTML 4.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/html40/frameset.dtd">
HTML 3.2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" "http://www.w3.org/TR/HTML.dtd">
HTML 2.0
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN" "http://www.w3.org/MarkUp/html-spec/html.dtd" >

XHTML: a closer look

XHTML 1.0 Strict
documentation
- 77 Elements
- 90 Attributes
XHTML 1.0 Transitional
documentation
- 89 Elements
- 120 Attributes

XHTML 1.0 Strict Elements

XHTML 1.0 Strict documentation produced from DTD

Modules

Structures
body, head, html, title
Text
abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var
- Heading
  h1, h2, h3, h4, h5, h6
- Block
  address, blockquote, div, p, pre
- Inline
  abbr, acronym, br, cite, code, dfn, em, kbd, q, samp, span, strong, var
Hypertext
a
List
dl, dt, dd, ol, ul, li
Text Extension
b, big, hr, i, small, sub, sup, tt
Edit
del, ins
Bi-direction Text
bdo
Form
form, fieldset, input, label, select, option, textarea, button, legent, optgroup
- Form
  form, fieldset
- Formctrl
  input, label, select, textarea, button
Table
table, td, th, tr, caption, col, colgrop, tbody, thead, tfoot
Image
img
Server-side Image Map


         Object
  

            object, param
         
         Metainformation
  

            meta
         
         Scripting
  

            script, noscript
         
         Style Sheet
  

            style
         
         Link
  

            link
         
         Base
  

            base


      Your Beginning Toolbox
      While a student at Harvard, there are a variety of software packages you may download and use 
      through FAS Information Technology Software Downloads.  
      Note that "keyed" software must be run from a computer 
      that is on an on-campus network.
      
         Web Hosting (Harvard - morpheus.dce.harvard.edu)
         HTTP Client (Web Browser)
         SSH Client
         FTP/SFTP Client
         Text Editor or HTML Editor 
         Validators and Checkers
      
      Web Hosting
      For this course, Harvard will be your web hosting service.  A server is dedicated
    to this course.  Details on accessing (SSH and FTP) will be provided in Assignment 1.
      
         Host:  morpheus.dce.harvard.edu
         Example username:  jharvard (John Harvard)
         URL:  http://morpheus.dce.harvard.edu/~jharvard/
         Maps to file:  /home/courses/j/h/jharvard/public_html/
      
      HTTP Clients
      
         Browser Statistics

            
         
         
Source:  Net Applications.com
      
      
      HTTP Clients
      
         
            
               Firefox
          

                  
               
            
            
               
                   Web Developer
            Extension for Firefox
               
               
                  Firebug Extension for Firefox
               
            
         
         
            
               Internet
          Explorer
          

                  
                  

               
            
         
         
            
               Chrome
          

                  
               
            
         
         
            
               Opera
          

                  
               
            
         
         
            
               Safari
          

                  
               
            
         
      
      Text or HTML Editor
      Please start with your favorite text editor!
      
         Window/Mac/Linux
      
      
         
            Amayz, an Open Source editor from W3C
         
            KompoZer, an Open Source editor
      
      
         Windows
      
      
         
            Notepad++, Editpad or Wordpad or Notepad
         
            
        Dreamweaver
         
         
            NetObjects Fusion
         
      
      
         Mac
      
      
         SimpleText
       
         
            BBEdit
            

            BareBones Software
         
         
            
        Dreamweaver
         
      
      
         Linux
      
      
         
            Emacs
            
               
                  nXML mode for Emacs
               
            
         
      
      Markup Checking and Validation Resources
      
         
            
               W3C Markup Validation
        Service
             is a free service by the W3C that helps checkthe validity of Web
        documents. 
         
            
               HTML Tidy
             is
        software that attempts to fix invalid HTML and to improve the layout and indent style
        of the markup.
        

            morpheus% tidy -help
         
      
      SSH and FTP
      
         SSH (Remote Login)
               
                  SecureCRT, Van Dyke Technologies,
        http://www.vandyke.com/products/
                  

      Available through FAS Information Technology Software Downloads
               
               
                  PuTTY, 
        http://www.chiark.greenend.org.uk/~sgtatham/putty/
               
               
                  OpenSSH, 
        http://www.openssh.org/
               
               
                  SSH Secure Shell, 
        http://www.ssh.com/
               
            
         
         FTP/SFTP (Move Files from Here to There)
               
                  Secure FX, Van Dyke Technologies,
        http://www.vandyke.com/products/
                  

      Available through FAS Information Technology Software Downloads
               
            
         
      
      
         
            
               
                  
                     
        Table of Contents
       | 
        All Slides
       | 
        Link List
       | 
        CSCI E-12