Columbia College Chicago Authoring Interactive Media

1
Columbia College Chicago Authoring Interactive
Media
Course 36-2601-05 Spring 2007

• Peggy Huber, Instructor

2
Week 1 Introduction to Course

• Welcome!
• Overview of Syllabus
• Overview of Class Website
• Brief History of Markup Languages
• Website Construction
• In-Class Exercise
• Assignment

3
Brief History of Markup Languages

• HTML first released
• In 1991 by Tim Berners-Lee at CERN (a nuclear
  physics research lab in Switzerland) as a way to
  share documents.
• Its a simple version of SGML (Standardized
  Generalized Markup Language)
• A complex and well-developed international text
  processing standard.
• Originally a small group of tags were used for
  authoring text documentsrigid and limited.
• Companies started creating their own tags for
  creative flexibility.

4
Brief History of Markup Languages

• World Wide Web Consortium (W3C) takes over
  maintenance of HTML
• A group that releases recommended specifications
  for HTML. Its not enforced but it is important
  to adhere to the standards.
• The web is a global form of communication.
• The best part is that its a form of
  communication that YOU can participate in.
• XML (extensible Markup Language)
• invents new mark-up languages.
• XHTML (extensible hypertext mark-up language)
• Reformulated version of HTML thats based on XML
  standards release by W3C.
• Easier to learn and use.
• Works on mobile devices.
• Understood by current browsers.

5
What do each of these do?

• The internet
• Made up of computers connected together, a
  network.
• World Wide Web
• is a file transfer system that runs over the
  Internet that can display text, graphics, sound,
  video and other media elements.
• Transferred via HTTP (HyperText Tranfser Protocol)

6
What do each of these do?

• Web server
• A computer connected to the internet that stores
  files, pictures, sounds and other file types and
  waits for requests from Web browsers.
• Web browser
• As you surf the web and click on a link it causes
  your browser to request an HTML page from a web
  server then retrieves it, and displays the page
  in your browser window.

7
What do each of these do?

• Web pages
• You create files written in HTML, place them on
  the server, then any browser can retrieve your
  web page over the internet.
• HTML
• This is the key that tells the browser how to
  display the content and structure of your page.

8
HTML Basics

• The browser reads your HTML and interprets all
  the tags that surround your text, for example
  ltpgt, lth1gt, ltheadgt
• Tags tell the browser about the structure and
  meaning of your text.
• Each tag has one or more attributes.
• Each attribute has a value.
• Tags should be used to define structure, not
  presentation

9
HTML Basics

• Magic formula of HTML
• ltelement attributevaluegt
• Matching tags, and their enclosed content, are
  called elements.
• Opening tag lt
• Content
• Closing tag /gt
• A few exceptions ltimggt lthrgt ltbrgt

10
CSS (Cascading Style Sheets)

• Control presentation
• Can be added to an HTML Web page by putting the
  CSS rules inside the ltstylegt element. The
  ltstylegt element should always be inside the
  ltheadgt element.
• You specify the style characteristics of the
  elements in your HTML using CSS.
• Validation service http//jigsaw.w3.org/css-valida
  tor/

11
HTML Basics

• lthtmlgt
• ltheadgt
• lttitlegtDisplays on window of web pagelt/titlegt
• lt/headgt
• ltbodygt
• Content of your web page will be here between the
  body tags of the document.
• lt/bodygt
• lt/htmlgt

12
XHTML Basics

• A valid XHTML Code
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.
  dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  lang"en" xmllang"en"gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetISO-8859-1" /gt
• lttitlegtYour Title Herelt/titlegt
• ltlink rel"stylesheet" type"text/css"
  hrefanyname.css" /gt
• lt/headgt
• ltbodygt
• ltpgtType page content here. to
• lta href"http//example.org/"gtexample.orglt/agt
• lt/pgt
• lt/bodygt
• lt/htmlgt

13
Assignments

• In-Class assignment
• Break-out into groups of 2 or 3 people.
• Follow directions on the website for PlanWeek1.
• Homework
• Assignment 1
• Due next week