Lecture 1: HTML

1
6.470Lecture 1 HTML and the DOM
2008/01/07 Jones, Clayton, Prannay and David
Jan. 7, 2008
6.470
1
2
Outline

• Overview
• HTML
• Part I Basic Introduction
• Part II Programming with HTML
• References

Jan. 7, 2008
6.470
2
3
Overview

• The Internet -gt the World Wide Web (WWW)?
• Standards
• World Wide Web Consortium (W3C)
• Open Mobile Alliance (OMA)?
• The Web Architecture Client-Server

Jan. 7, 2008
6.470
3
4
Overview (cont.)?
Web Server 1. Apache HTTP Server 2. Microsoft
IIS
Web Browser 1. Internet Explorer 2. Firefox 3.
Opera 4. Mozilla
HTTP Request
Database 1. Microsoft SQL 2. MySQL 3.
PostgreSQL 4. dBase 5. mSQL 6. Infomix 7. ODBC 8.
Oracle
HTTP Response
Script Languages 1. PHP 2. ASP
CGI program 1. C/C 2. Fortran 3. PERL 4. TCL
5. Any Unix shell 6. AppleScript 7. Python
Content 1. HTML/XML/XHTML Document 2. Cascading
Style Sheet (CSS)? 3. JavaScript/VBScript 4.
Flash/Video/Audio 5. Java Applet 6. AJAX with
JQuery
Figure 1 World Wide Web (WWW) Architecture
6.470
4
Jan. 7, 2008
5
Overview (cont.)?
Web Server 1. Apache HTTP Server 2. Microsoft
IIS
Web Browser 1. Internet Explorer 2. Firefox 3.
Opera 4. Mozilla
HTTP Request
Database 1. Microsoft SQL 2. MySQL 3.
PostgreSQL 4. dBase 5. mSQL 6. Infomix 7. ODBC 8.
Oracle
HTTP Response
Script Languages 1. PHP 2. ASP
CGI program 1. C/C 2. Fortran 3. PERL 4. TCL
5. Any Unix shell 6. AppleScript 7. Python
Content 1. HTML/XML/XHTML Document 2. Cascading
Style Sheet (CSS)? 3. JavaScript/VBScript/ASP 4.
Flash/Video/Audio 5. Java Applet 6. AJAX with
JQuery
Figure 2 World Wide Web (WWW) Architecture The
content we will cover are marked with red.
6.470
5
Jan. 7, 2008
6
Overview (cont.)?

• Current Usages
• Normal Web Browser (PC environment)?
• Browse web pages (Portals, News/Sport/Technology
  web sites)?
• As a platform (StartForce, YouOS) to run
  application
• As a platform to control devices (wireless
  router, wireless camera, etc.)?
• Mobile Browser
• Feature Phone
• PDA / Smart Phone
• iPhone / Android platform
• Web Browser in the IA appliance (Refrigerator,
  PSP, XBOX, etc.)?

Demo
Jan. 7, 2008
6.470
6
7
Overview (cont.)?
Figure 3 WebOS - StartForce
Jan. 7, 2008
6.470
7
8
Overview (cont.)?
Fig. 4 Mobile Web - Android Opera Mini
(http//www.operamini.com/demo/)?
Jan. 7, 2008
6.470
8
9
Overview (cont.)?
Figure 5 W3C technology stack 1
Jan. 7, 2008
6.470
9
10
Overview (cont.)?
Web Applications SVG Scalable Vector
Graphics CDF Compound Document Format SMIL
Synchronized Multimedia Integration
Language WICD Web Interaction Compound
Document Mobile MWI BP Mobile Web Initiative
Best Practices Voice SRGS Speech Recognition
Grammar Specification SSML Speech Synthesis
Markup Language CCXML Call Control XML EMMA
Extensible MultiModal Annotation markup
language Web Services SOAP Simple Object Access
Protocol MTOM Message Transmission Optimization
Mechanism WSDL Web Service Description
Language WS-CDL Web Services Choreography
Description Language WS-A Web Services
Addressing
Semantic Web OWL Web Ontology Language SKOS
Simple Knowledge Organization System SW BP
Semantic Web Best Practices RIF Rule Interchange
Format Privacy, Security P3P Platform for
Privacy Preferences Project APPEL A P3P
Preference Exchange Language XML Sig
XML-Signature XML Enc XML Encryption XKMS XML
Key Management Specification Others SPARQL
SPARQL Query Language RDF Resource Description
Framework URI Uniform Resource Identifier IRI
Internationalized Resource Identifier
Web
Jan. 7, 2008
6.470
10
11
Part I
Basic Introduction
Jan. 7, 2008
6.470
11
12
HTML

• SGML, HTML, XML, XHTML
• SGML Standard Generalized Markup Language
  (1986)?
• HTML HyperText Markup Language (1989)?
• XML Extensible Markup Language (1996)?
• XHTML Extensible HyperText Markup Language
  (2000)?

SGML
XML

WML
CML
SMIL
Fig. 6 Relationship between Markup Languages
Jan. 7, 2008
6.470
12
13
HTML (cont.)?

• HTML HyperText Markup Language
• First draft was defined by Tim Berners-Lee, 1989.
• HTML was applied to Web in 1990.
• HTML specifications release procedure
• 1993.01 HTML 1.0 (IETF working draft)?
• 1995.11 HTML 2.0 (IETF RFC 1866)?
• 1997.01 HTML 3.2 (W3C Recommendation)?
• 1997.12 HTML 4.0 (W3C Recommendation)?
• 1999.12 HTML 4.01 (W3C Recommendation)
• 2000.05.15 ISO/IEC 154452000 (ISO/IEC
  international standard)?
• HTML's grammar structure is the HTML DTD
• DTD Document Type Definition
• That DTD was created using SGML syntax.

Jan. 7, 2008
6.470
13
14
HTML (cont.)?

• There are 3 kinds of DTDs appointed to HTML
• Strict DTD
• File name strict.dtd
• Elements defined in this dtd was simple.
• It doesn't define some elements (font, frameset)
  and attributes (color, bgcolor)?
• Transitional DTD
• File name loose.dtd
• Its definition includes all elements definition
  of Strict DTD, font element and color related
  attributes.
• Frameset DTD
• File name frameset.dtd
• Its definition includes all elements definition
  of Traditional DTD, frame related elements.

Jan. 7, 2008
6.470
14
15
HTML (cont.)?
Jan. 7, 2008
6.470
15
16
HTML (cont.)?
lthtmlgt ltheadgt lttitlegtRanked Baby Names
Databaselt/titlegt lt/headgt ltbodygt Dataset UID
7 Name Ethan Gender m Year 2006 Rank
4 lt/bodygt lt/htmlgt
Sample 1
Jan. 7, 2008
6.470
16
17
HTML (cont.)?
lthtmlgt ltheadgt lttitlegtRanked Baby Names
Databaselt/titlegt lt/headgt ltbodygt lth3gtDataset
UID 7lt/h3gt ltpgt Name Ethan Gender
m Year 2006 Rank 4 lt/pgt lt/bodygt lt/ht
mlgt
Sample 2
Jan. 7, 2008
6.470
17
18
HTML (cont.)?
lthtmlgt ltheadgt ltmeta http-equiv"content-type
content"text/html charsetiso-8859-1"
/gt lttitlegtRanked Baby Names Databaselt/titlegt lt/he
adgt ltbody bgcolor"EBECED"gt lth3 id"uid"
align"left"gtDataset UID 7lt/h3gt ltpgt
Name Ethan ltbr/gt Gender m ltbr/gt
Year 2006 ltbr/gt Rank 4 ltbr/gt lt/pgt lt/bodygt
lt/htmlgt
Sample 3
Jan. 7, 2008
6.470
18
19
HTML (cont.)?
lt!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01
Transitional//EN
http//www.w3.org/TR/html4/loose.dtdgt lthtmlgt lth
eadgt lttitlegt Baby Names lt/titlegt
lt/headgt ltbodygt Dataset UID 7 Name
Ethan Gender m Year 2006 Rank
4 lt/bodygt lt/htmlgt
Document Type Declaration
Document Head
Document Body
Figure 7 HTML document structure
Jan. 7, 2008
6.470
19
20
ltbodygt lth3gtTable 1 The dataset of Ranked Baby
Nameslt/h3gt lttable border"2px"gt lttr
height"17" align"center" bgcolor"FFFF99"gt
lttdgtltstronggtuidlt/stronggtlt/tdgt
lttdgtltstronggtnamelt/stronggtlt/tdgt
lttdgtltstronggtgenderlt/stronggtlt/tdgt
lttdgtltstronggtyearlt/stronggtlt/tdgt
lttdgtltstronggtranklt/stronggtlt/tdgt
lttdgtltstronggtpercentlt/stronggtlt/tdgt lt/trgt lttr
height"17" align"center"gt lttdgt1.lt/tdgt
lttdgtJacoblt/tdgt lttdgtmlt/tdgt lttdgt2006lt/tdgt
lttdgt1lt/tdgt lttdgt1.13lt/tdgt lt/trgt lttr
height"17" align"center"gt lttdgt2.lt/tdgt
lttdgtEmilylt/tdgt lttdgtflt/tdgt lttdgt2006lt/tdgt
lttdgt1lt/tdgt lttdgt1.03lt/tdgt
lt/trgt lt/tablegt lt/bodygt
HTML (cont.)?
Sample 4
Jan. 7, 2008
6.470
20
21
HTML Tags
Jan. 7, 2008
6.470
21
22
HTML Tags (cont.)?
Jan. 7, 2008
6.470
22
23
HTML Tags (cont.)?
Jan. 7, 2008
6.470
23
24
HTML Tags (cont.)?
Jan. 7, 2008
6.470
24
25
HTML Tags (cont.)?
Jan. 7, 2008
6.470
25
26
HTML Tags Examples
ltheadgt ltmeta http-equiv"content-type"
content"text/html charsetiso-8859-1" /gt ltmeta
http-equiv"description" content"The
description of a webpage cab be put here"
/gt lt/headgt
ltmetagt tags are used to define extra information
about a webpage
Jan. 7, 2008
6.470
26
27
HTML Tags Examples
lttable width"443" height"250" border"2px"gt
lttr align"center" height"21" bgcolor"FFFF99"gt
lttd width"31"gtltstronggtuidlt/stronggtlt/tdgt
lttd width"91"gtltstronggtnamelt/stronggtlt/tdgt lttd
width"68"gtltstronggtgenderlt/stronggtlt/tdgt lttd
width"68"gtltstronggtyearlt/stronggtlt/tdgt lttd
width"50"gtltstronggtranklt/stronggtlt/tdgt lttd
width"119"gtltstronggtpercentlt/stronggtlt/tdgt
lt/trgt lttr height"17" align"center"gt lttd
width"31"gt1.lt/tdgt lttd width"87"gtJacoblt/tdgt
lttd width"64"gtmlt/tdgt lttd
width"64"gt2006lt/tdgt lttd width"64"gt1lt/tdgt
lttd width"131"gt1.13lt/tdgt lt/trgt
lttablegt tags are used to display tabular data
Jan. 7, 2008
6.470
27
28
Summary

• Advantages
• Easy to write and use
• Finite control tags
• No strict document structure - lthtmlgt ltHTMLgt
  ltHtMlgt
• Many available software to write the HTML
  document
• Notepad, FrontPage, Dreamweaver
• Disadvantages
• Lack of flexibility
• Not possible to define DTD for HTML
• HTML only focuses on data presentation
• HTML is restricted to the Web browser
• Increase the cost to design Web pages
• Block software development

Jan. 7, 2008
6.470
28
29
Part II
Programming with HTML
Jan. 7, 2008
6.470
29
30
Programming with HTML

• Working with a Declarative language
• Modern HTML
• The DOM
• Tools
• Writing HTML
• HTML Tips and Gotchas

Jan. 7, 2008
6.470
30
31
HTML is Declarative Specification

• With declarative programming you define what you
  want
• With procedural programming, what you're probably
  used to, you declare how to build it

drawLine(0,0,0,5)? drawLine(0,5,5,5)? drawLine(5,5
,5,0)? drawLine(5,0,0,0)? center2.5 r 3 r2 r
r for (x -r x lt r x) y
sqrt(r2-xx)0.5 drawP(centerx,center y)
drawP(centerx,center - y)
ltbox width5 height5gt ltcircle
radius3/gt lt/boxgt
Jan. 7, 2008
6.470
31
32
Declarative Programming has Advantages

• HTML is compact and easier to read than a
  programmatic approach
• Browser does a lot of the work for you
• HTML can be easily generated by authoring tools

Jan. 7, 2008
6.470
32
33
And Disadvantages

• Difficult to get exactly what you want
• Challenging to understand exactly how elements
  are composed in complex cases
• Challenging to debug when it doesn't show up the
  way you think it should
• Time consuming to make large changes to structure

Jan. 7, 2008
6.470
33
34
The DOM (Document Object Model)?

• HTML essentially declares a hierarchical set of
  elements that are used to build a web page
• A different way to conceptualize this definition
  is through the DOM

Jan. 7, 2008
6.470
34
35
The DOM

• The DOM represents the same page defined by HTML
  as a set of objects (nodes)?
• These DOM elements form a tree structure, with
  some elements containing others as children
• These nodes allow a web page to be represented in
  a format that can be manipulated programatically
  and dynamically

Jan. 7, 2008
6.470
35
36
Tools

• DOM Inspector
• A tool that allows you to inspect and manipulate
  the DOM of a page
• Extremely helpful to visualize how your HTML is
  structured, and to play small changes to this
  structure

Jan. 7, 2008
6.470
36
37
Tools

• Firebug
• One of the most popular and powerful web
  authoring tools
• Allows you to Inspect the DOM of your pages,
  analyze CSS inheritance and tweak CSS properties,
  debug Javascript, (the list goes on)?
• We'll be using these tools again and again
  throughout the course of our lectures

Jan. 7, 2008
6.470
37
38
The DOM - Practice

• Explore some web page using DOM Inspector/Firebug

Jan. 7, 2008
6.470
38
39
In the Early Web, HTML Was Everything
A Snippet of Amazon.com code from 1999
ltfont faceverdana,arial,helvetica
size"-2"gtSearch of the Day ltnobrgtlta
href"/exec/obidos/search-handle-url/indexblended
field-keywordssaffron/"gtsaffronlt/agtlt/nobrgtltfontgt
lt/TDgt lt/TRgt lt/TABLEgt

• This HTML Serves 4 Purposes
• Content
• Document Structure
• Text and Visual Style
• Layout (Whitespace, Visual Structure)?

Jan. 7, 2008
6.470
39
40
Modern HTML is About Structure
A Snippet of Modern Amazon.com code
ltdiv class"unified_widget blurb"gtlth2gtExercise
Your Mind with Binary Time from The Onelt/h2gtltdiv
class"row"gtltdiv class"asinItem"gtltdiv
class"prodImage"gtlta href"/gp/product/..."gt

• This HTML Serves 2 Purposes
• Content
• Document Structure
• Text and Visual Style
• Layout (Whitespace, Visual Structure)?
• Layout and Visual Style are handled by Cascading
  Style Sheets, which we will discuss later

Jan. 7, 2008
6.470
40
41
Making this Distinction is Powerful

• HTML serves as the structure for the content
  elements
• CSS adds visual styling for types of elements
• This separation allows more flexible control of
  the visual composition of a page, and permits the
  reuse of common patterns of styling
• It also makes the HTML more clean and readable

Jan. 7, 2008
6.470
41
42
Writing HTML

• Writing HTML should be a process of classifying
  the content of your webpage into hierarchical
  containers
• Don't worry as much about how things look,
  instead try to focus on creating a
  straightforward DOM
• Use the tools we've talked about to make small
  changes if you don't want to have to
  edit-and-reload a bunch of times

Jan. 7, 2008
6.470
42
43
HTML ltheadgt

• The ltheadgt tag is the container for HTML that
  isn't directly drawn onto the page
  (scripts/css/meta data), or links to other files
  containing those elements
• Today we'll only be discussing meta data
• Scripts and CSS will be covered in the following
  lectures

Jan. 7, 2008
6.470
43
44
HTML ltheadgt - ltmetagt

• ltmetagt is used for a number of different tasks
• Keywords and descriptions for search engines
• ltmeta namekeywords contentPizza,delivery,fast
  gt
• ltmeta namedescription contentdescription of
  pagegt
• High level functions like redirecting the browser
• ltmeta http-equiv"REFRESH" content"0urlhttp//.
  .."gt
• It is good practice to include keywords and
  descriptions for your site in your HTML

Jan. 7, 2008
6.470
44
45
HTML ltheadgt

• Cover the Flickr homepage mockup

Figure 8 Flickr homepage mockup - using pure HTML
Jan. 7, 2008
6.470
45
46
HTML ltbodygt

• Remember that HTML is structure and content, not
  style
• Structure is generally broken down into the
  elements of ltdivgt's
• ltdiv classclassnamegtlt/divgt
• Create containers for your content
• Identify classes for these containers so that
  styles can be applied

Jan. 7, 2008
6.470
46
47
HTML ltbodygt

• Cover the flickr webpage mock-up, overview
• Start with real www.flickr.com webpage
• Then draw a class hierarchy that will be needed
  to classify the content on the page (use the
  classes written in the mock-up page)?
• Then just make the structure of the page by
  writing only all the containers
• Then fill in then containers with html from the
  mock-up to complete the webpage.. then present
  the final page.

Jan. 7, 2008
6.470
47
48
HTML ltbodygt

• Start with a manageable piece of the page

Figure 9 Flickr homepage mockup Only Title and
Picture of the Day
Jan. 7, 2008
6.470
48
49
ltbodygt ltdiv id"logo"gtltimg src"http//l.yimg
.com/www.flickr.com/images/logo_home.png"
class"trans_png" alt"Flickr" height"64"
width"162"gt lt/divgt ltdiv id"featured-image"gt
lta href"/photos/nuomi/77156587/"
class"image_link"gt ltimg src"http//l.yimg.com
/www.flickr.com/images/home_photo_nuomi.jpg"
alt"" style"bordernone" height"333"
width"500"gt lt/agt lt/divgt lt/bodygt
50
ltbodygt lttable class"page-container"
cellspacing"5px" cellpadding"2px"
width"940px"gt lttbodygt lttrgt lttd
align"center"gt ltdiv class"wrap" id"top"gt
ltdiv class"wrap-inner"gt
lttable border"0" cellpadding"0"
cellspacing"0"gt lttbodygt lttrgt lttdgt
ltdiv id"logo"gtltimg
src"http//l.yimg.com/www.flickr.com/images/
logo_home.png" class"trans_png"
alt"Flickr" height"64"
width"162"gt lt/divgtlt/tdgt lt/trgt lttr
background"http//l.yimg.com/www.flickr.com/image
s/ home_bg_top.png"gt lttdgt ltdiv
id"featured-image"gt lta
href"/photos/nuomi/77156587/" class"image_link"gt
ltimg src"http//l.yimg.com/www.flickr.com/
images/ home_photo_nuomi.jpg"
alt"" style"bordernone" height"333"
width"500"gt lt/agt lt/divgt lt/tdgt lt/
trgt lt/tbodygt lt/tablegt
lt/divgt lt/divgt lt/tdgt lt/trgt lt/tbodygt lt/tablegt lt/b
odygt
51
HTML ltbodygt

• Finished Result
• http//web.mit.edu/6.470/www/examples/lecture1/fli
  ckr.html

Jan. 7, 2008
6.470
51
52
HTML Tips and Gotchas

• Gotcha Debugging
• With procedural coding it's possible to debug for
  a while when you have no idea what's going on and
  figure out the problem, although not particularly
  good practice
• With HTML this is much much less likely to work.
  It's vastly superior to step back, think about
  what you want, and think about how to get there

Jan. 7, 2008
6.470
52
53
HTML Tips and Gotchas

• Tip Approaching Web Design
• Determine what you want your website to look like
  first, and then break down the different elements
  (sidebar/main content/header/insert/etc)?
• Identify which elements should be children of
  which other elements
• Just like other forms of programming exploit
  common types

Jan. 7, 2008
6.470
53
54
HTML Tips and Gotchas

• Tip Writing HTML
• Don't skimp on coding standards just because HTML
  is markup
• Well formatted, well commented HTML is extremely
  useful

Jan. 7, 2008
6.470
54
55
HTML Tips and Gotchas

• Gotcha Best Practices
• A common technique in web design is to create the
  structure of a web page using tables, breaking
  the site down to a grid, and assigning element to
  each cell using a pre-formatting tool
• This is powerful for getting exactly what you
  want out of your page, but is often less useful
  than composing your page with CSS as it is
  limiting
• Avoid using tables for non-tabular data when
  possible

Jan. 7, 2008
6.470
55
56
Summary

• HTML is about thinking before you type
• Start with what you want, then figure out how to
  get there
• Move from big (Your ideal web page) to small (The
  individual elements in your sidebar)?
• Don't focus as much on style just yet
• HTML and visual layout are linked, but you can do
  great things by decoupling them as much as
  possible

Jan. 7, 2008
6.470
56
57
HTML Tools

• Normal Editor
• Notepad
• UltraEdit
• Vi
• What You See Is What You Get (WYSIWYG) Editor
• FrontPage
• Dreamweaver
• DOM Analysis Tools
• DOM Inspector
• Firebug

Comparison of HTML Editors 3
Jan. 7, 2008
6.470
57
58
References

• 1 W3C technology stack http//www.w3.org/Cons
  ortium/technology
• 2 W3 Schools http//www.w3schools.com/default
  .asp
• 3 Comparison of HTML Editors
  http//en.wikipedia.org/wiki/Comparison_of_HTML_ed
  itors

Jan. 7, 2008
6.470
58