HTML 2

Images

Images have two important numbers which must be observed when using images on webpages. The first, are the dimensions of the image, in pixels. The second, is the size on disk, in bytes. For example; a common digital camera might take an image with dimensions of 2000x2000, and that file might be about 1MB.

Lists

Lists come in two flavors; ordered and unordered. Within a given list, there should be list items. The structure looks like this:

 <ol>
  <li>item number 1</li>
  <li>item number 2</li>
 </ol>

 <ul>
  <li>bullet number 1</li>
  <li>bullet number 2</li>
 </ul>

There are lots of neat things that can be done with lists, using CSS. Stay tuned!

Tables

Tables are a great way to display things. Tables consist of rows and cells . Here is a basic structure:

 <table>
  <tr>
   <td>A1</td>
   <td>B1</td>
  </tr>
  <tr>
   <td>A2</td>
   <td>B2</td>
  </tr>
 </table>

Tables can get very rich with data. Here is a table with a complete header and footer, as well as some extra fanciness.

 <table border="1">
  <thead>
   <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
   </tr>
  </thead>
  <tfoot>
   <tr>
    <td colspan="4" style="text-align: center;">Page 1 of 1</td>
   </tr>
  </tfoot>
  <tbody>
   <tr>
    <td>A1</td>
    <td colspan="2" style="text-align: center;">B1</td>
    <td>D1</td>
   </tr>
   <tr>
    <td rowspan="2">A2</td>
    <td>B2</td>
    <td>C2</td>
    <td rowspan="2">D2</td>
   </tr>
   <tr>
    <td>B3</td>
    <td>C3</td>
   </tr>
   <tr>
    <td>A4</td>
    <td colspan="2" style="text-align: center;">B4</td>
    <td>D4</td>
   </tr>
  </tbody>
 </table>

Blocks

HTML Block Elements

Block level elements normally start (and end) with a new line when displayed in a browser.

• h1
• p
• ul
• table

HTML Inline Elements

Block level elements normally start (and end) with a new line when displayed in a browser.

• b
• a
• img
• td