PowerPoint Presentation - DePaul Game Jam

							HTML II

ECT 270
Robin Burke
Outline

 Review
 Tables

 Table-based layout

 Homework #3




2
HTML

   Elements / tags
       <foo> content </foo>
   Attributes
       <foo size="3"> content </foo>
   Entities
       &amp;  &



3
Common problems
<img src="mypic.jpg>Here is my picture

<a href="link.htm" <img src="mypic.jpg"></a>

<a href="link.htm">Here is my link.
Here is some more of my web page...

<a href="link.htm"><h3>heading</a></h3>

<a href="link.htm" "Here is my link">

<a href='link.htm'>Here is my link</a>

4
When something is broken:

   Check spelling
       rehf vs href
   Check delimiters
     Quotes
     Angle brackets
     Start and end tags

   Check tag overlap

5
When something is broken

 Error may be earlier than affected
  portion of page
 Sometimes useful to "comment out"
  portions of the page to find the culprit




6
Elements
   Structural
       html, head, body, <!-- -->
   Headings
       h1, h2, h3, etc.
   Text divisions
       br, p
   Lists
       ul, ol, li
   Style
       font

7
Bug from last week
    <ol type=“A”>

 "Smart quotes" don't work in HTML
 Must be
    <ol type="A">




8
Anchor elements

 Used for both links and internal
  locations
 External
       <a href="URL">link text</a>
   Internal location
       <a name="place">place text</a>
   Links to internal
       <a href="#place">link to place</a>

9
Image element
    img
    Attributes
        src="URL"
        align
          • provides for text flow
          • different from paragraph alignment
        alt
          • text displayed when image is not
        height / width
          • fixes image size
          • helps browser do layout


10
Tables

    A table is a rectangular region
        organized into rows and columns
        row-based definition
    <table> element
        declares a table
    <tr> element
        declares a row
    <td> element
        declares a division (cell) within a row
11
More elements

    <caption>
        declares a caption for the table
    <th>
      declares a "header" cell
      usually bold and centered




12
Example
<table>
   <caption>This is a table</caption>
   <tr>
  <th>First Row</th>
   </tr>
   <tr>
  <td>A1</td>
   </tr>
</table>




13
Border control
    border
        attribute of table
        gives the width of the visible border
        set to 0 for "invisible" table
    frame
        controls which sides of the table are framed
        default = "box", many other options
    rules
        controls which directionality of borders
        default="all"

14
Frame




15
Rules




16
Table spacing

    cellspacing
        space between cells
    cellpadding
        space between cell text and cell
         border
    align
      (as for images)
      text flow around table


17
Other table attributes

    bgcolor
        background color for table
    width
      pixels
      or % of browser window
    height
      pixels
      or % of browser window


18
TR, TH and TD

    Share many table attributes
      bgcolor
      width, height
          • % means % of table size
        align
          • horizontal alignment
        valign
          • vertical alignment

19
Table contents

 Must be row-by-row
 Table row element
        with cells inside
 <tr><td>1</td><td>2</td></tr>
 <tr><td>3</td><td>4</td></tr>




20
Alignment




21
Spanning

 A cell can span multiple rows or
  columns
 Attributes of td and th
        colspan
         • # of columns included
        rowspan
         • # of rows included



22
      Span example

Cell spans two cols and two rows:   Cell spans three cols:
<td rowspan=“2” colspan=“2”>        <td colspan=“3”>




Cell spans …………….
<td …………….> Complete
      23
Tables for layout

 A grid is the most common layout
  graphic layout tool
 Early versions of HTML provided no
  layout facilities
        logical structure only
    Tables provided a grid-based
     mechanism
        to get layout in spite of HTML
24
Table-based layout cons

 Platform-dependent
 Difficult for alternative renderings
      audio
      mobile platform
 Contrary to HTML spirit
 There is now an "approved" way to
  layout
        style sheets

25
Table-based layout

    Organize the page into sections
        determine vertical and horizontal divisions
    Design outer table first
        work towards inner ones
    Use
        border = 0
        color to help distinguish areas
        cell padding to preserve whitespace


26
Table example




27
Examples

 many on the web
 course lecture notes

 CTI homepage

 Chicago Tribune




28
Best practices

    Draw on paper first
      show it to your co-workers
      better yet, your users

 Use comments to mark different parts
  of the page
 Not too complex / busy




29
Homework #3

    Part A
      From the book: Case 3
      Real estate listing
      Important: don’t do the text color and
       font steps!
    Part B
        Re-do course homepage with tables


30