Introduction to Web Site Development

1
Introduction to Web Site Development
Lecture 2 More HTML

• Steven Emory
• Department of Computer Science
• California State University, Los Angeles

2
Quick Recap 0

• HTML is case insensitive
• ltHTMLgtlt/HTMLgt is OK
• ltHtmlgtlt/htMLgt is OK

3
Quick Recap 1

• An HTML page is a tree of HTML elements
• The beginning and end of each element in an HTML
  page must be marked by start and end tags
• Some elements may be declared minus their end
  tags
• For example, void elements with no content such
  as BR
• Use ltBRgt instead of ltBRgtlt/BRgt
• Some elements may be declared with self-closing
  tags
• For example, void elements with no content such
  as BR
• Use ltBR /gt instead of ltBRgt or ltBRgtlt/BRgt

4
Quick Recap 2

• An HTML page always begins with a DOCTYPE header
  (it is not an HTML element or tag)
• lt!DOCTYPE HTMLgt
• Required for legacy reasons (XHTML)
• Next up we place the HTML element
• Must contain a HEAD element, followed by a BODY
  element
• The HEAD element contains metadata, such as the
  TITLE element

5
Quick Recap 3

• The BODY element contains flow content
• Flow content is any element that can be used
  within the BODY element (stuff you want to show
  up in your webpage)
• Paragraphs, images, tables, code, etc.
• Here are the flow content elements we covered in
  class last week
• P, BR, H1, H2, H3, H4, H5, H6
• B, I, STRONG, EM, SMALL, SUB, SUP

6
Quick Recap (The P Element)

• Description
• Used to mark paragraphs. The P element should
  always be a part of flow content.
• Comments
• Start Tag Required
• End Tag Optional
• Self-Closing Tag Works, but not technically
  legal
• Example
• ltPgtThe is paragraph text. Type more herelt/Pgt

7
Quick Recap (The BR Element)

• Description
• Marks a line break within phrasing content (text,
  video and audio).
• Comments
• Start Tag Required
• End Tag Forbidden
• Self-Closing Tag Works, but technically illegal
• Example
• ltPgtSteven EmoryltBRgt10298 Atlantic
  Ave.ltBRgtBeverly Hills, CA 90210lt/Pgt

8
Quick Recap (The H1 - H6 Elements)

• Description
• Marks a new heading (H1 largest, H6 smallest).
• Comments
• Start Tag Required
• End Tag Required
• Self-Closing Tag Forbidden
• Example
• ltH1gtChapter 1lt/H1gtltH2gtSection 1.1lt/H2gt
  ltH2gtSection 1.2lt/H2gtltH3gtSection 1.2.1lt/H3gt

9
Quick Recap (The B and I Elements)

• Description
• Marks bold and italic phrasing content.
• Comments
• Start Tag Required
• End Tag Required
• Self-Closing Tag Forbidden
• Example
• ltPgtSometime ltBgtlonglt/Bgt ago, in a landltIgtfar,
  farlt/Igt awaylt/Pgt

10
Quick Recap (The STRONG and EM Elements)

• Description
• Marks strong and emphatic phrasing content.
• Comments
• Start Tag Required
• End Tag Required
• Self-Closing Tag Forbidden
• Example
• ltPgtSometime ltSTRONGgtlonglt/BTRONGgt ago,in a land
  ltEMgtfar, farlt/EMgt awaylt/Pgt

11
Quick Recap (The STRONG and EM Elements)

• The STRONG and EM elements by default behave
  similarly to B and I respectively, but there is a
  difference
• We can make STRONG and EM behave differently
  using CSS
• Try the code on the next slide!
• We havent covered CSS, but we can make them
  behave differently!

12
Quick Recap (The STRONG and EM Elements)

• STRONG versus B example
• lt!doctype htmlgtlthtmlgtltheadgtlttitlegtLablt/titlegt
  ltstyle type"text/css"gt strongcolorFF0000fo
  nt-sizexx-large lt/stylegtlt/headgtltbodygtltpgtThis
  is ltstronggtstronglt/stronggt text.lt/pgtltpgtThis is
  ltbgtboldlt/bgt text.lt/pgtlt/bodygtlt/htmlgt

13
Quick Recap (The SMALL Element)

• Description
• Marks phrasing content that will be rendered
  small.
• Comments
• Start Tag Required
• End Tag Required
• Self-Closing Tag Forbidden
• Example
• ltSMALLgtYour results may vary. You will more than
  likely not experience the same results.lt/SMALLgt

14
Quick Recap (The SUB and SUP Elements)

• Description
• Marks subscript and superscript phrasing content.
• Comments
• Start Tag Required
• End Tag Required
• Self-Closing Tag Forbidden
• Example
• bltSUBgt0lt/SUBgt2ltSUPgt0lt/SUPgt bltSUBgt1lt/SUBgt2ltSUPgt1lt
  /SUPgt bltSUBgtn1lt/SUBgt2ltSUPgtn1lt/SUPgt

15
Comments

• It is really easy to add a comment in HTML
• Syntax
• lt!- comment text --gt
• Comment text may not contain two double dashes
• Comment text should not contain lt or gt either
• Example
• lt!- This is a comment. --gt

16
Global Attributes

• HTML elements may specify attributes within the
  start tag
• Global attributes are attributes common to all
  HTML elements
• For now, we are only going to worry about two
  global attributes
• TITLE
• DIR

17
The TITLE Attribute

• Description
• Displays a tooltip when you hover the mouse over
  an HTML element
• Values
• Text content
• Example
• ltP TITLE"This is a tooltip."gtWhen you place the
  mouse over this text, you will get a tooltip!lt/Pgt

18
The DIR Attribute

• Description
• Controls the direction of the content.
• Values
• RTL (right-to-left)
• LTR (left-to-right)
• Example
• ltP DIR"RTL"gtHey look, this is really weird!lt/Pgt

19
More HTML Elements

• The HR Element (Horizontal Rule)
• The PRE Element (Preformatted Text)
• The ABBR Element (Abbreviation)
• The BDO Element (Bidirectional Override)
• The OL and UL Elements (Lists)
• The LI Element (List Item)
• The DL Element (Definition List)
• The DT Element (Definition Term)
• The DD Element (Definition Description)

20
The HR Element

• Description
• Used to render a horizontal rule (line)
• Comments
• Start Tag Required
• End Tag Forbidden
• Self-Closing Tag Works, but technically illegal
• Example
• ltHRgt

21
The PRE Element

• Description
• Used to render preformatted text
• Comments
• Start Tag Required
• End Tag Required
• Self-Closing Tag Forbidden
• Example
• ltPREgtPreformatted text!lt/PREgt

22
The ABBR Element

• Description
• Used to mark an abbreviation or acronym
• Comments
• Start Tag Required
• End Tag Required
• Self-Closing Tag Forbidden
• Example
• ltABBR title"Australia"gtAUSlt/ABBRgt

23
The BDO Element

• Description
• Controls the direction of text
• You should override the DIR attribute
• Comments
• Start Tag Required
• End Tag Required
• Self-Closing Tag Forbidden
• Example
• ltBDO DIR"RTL"gtHey look, this is really
  weird!lt/BDOgt

24
The OL Element

• Description
• Defines an ordered list
• Optional START attribute may be overridden
• Comments
• Start Tag Required
• End Tag Required
• Self-Closing Tag Forbidden
• Example
• ltOL start"3"gtltLIgt1ltLIgt2lt/OLgt

25
The UL Element

• Description
• Defines an unordered list
• Comments
• Start Tag Required
• End Tag Required
• Self-Closing Tag Forbidden
• Example
• ltUL start"3"gtltLIgt1ltLIgt2lt/ULgt

26
The LI Element

• Description
• Defines an ordered or unordered list item
• You may override the VALUE attribute
• Comments
• Start Tag Required
• End Tag Optional
• Self-Closing Tag Works, but technically illegal
• Example
• ltUL start"3"gtltLIgt1ltLIgt2lt/ULgt

27
The LI Element

• Description
• Defines an ordered or unordered list item
• You may set the VALUE attribute to skip numbers
  in an ordered list (see example on next slide)
• Comments
• Start Tag Required
• End Tag Optional
• Self-Closing Tag Works, but technically illegal

28
The LI Element (Example)

• Example
• ltOL START"3"gt ltLIgt1 ltLI VALUE"12"gt2
  ltLIgt3lt/OLgt
• Note that START and VALUE are not global
  attributes. They are attributes specific to OL
  and LI, respectively.

29
The DL Element

• Description
• Defines a definition list
• Useful for things like a list of dictionary
  entries that have many definitions
• Must contain zero or more DT elements (terms)
• Comments
• Start Tag Required
• End Tag Required
• Self-Closing Tag Forbidden

30
The DT Element

• Description
• Defines a definition term within a definition
  list
• Useful to describe something (a term) that has
  multiple meanings (definitions)
• Must contain one or more DD elements
  (definitions)
• Comments
• Start Tag Required
• End Tag Optional
• Self-Closing Tag Works, but technically illegal

31
The DD Element

• Description
• Defines a definition description for a definition
  term
• Comments
• Start Tag Required
• End Tag Optional
• Self-Closing Tag Works, but technically illegal

32
DL Element Example

• Example
• ltDLgt ltDTgtStevenlt/DTgt ltDDgtOld graduate
  studentlt/DDgt ltDDgtFunny-looking guylt/DDgt
  ltDDgtYour CS120 instructorlt/DDgt lt DTgtJoelt/DTgt
  ltDDgtSteven's crazy newphewlt/DDgt ltDDgtSilly
  kidlt/DDgt ltDDgtCrazy about fishinglt/DDgtlt/DLgt