HTML 2

Web Image formats

• Raster formats
  • png - good computer generated stuff (logos etc.)
    • png8 - supports transparency
    • png24 - 256 levels of transparency
  • jpg - good for natural images
  • gif - supports animation
• SVG (Vector format)
  • Great for logos and simple graphics
  • Like fonts, can scale without losing quality

img Element

<img src="logo.svg" alt="image description"/> 
<img src="http://site.com/image.png" alt="image description"/> 

<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" 
       alt="An awesome picture">	
  <figcaption>Fig1. MDN Logo</figcaption>
</figure>

Tables

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
    <tr>
        <td>Cell 4</td>
        <td>Cell 5</td>
        <td>Cell 6</td>
    </tr>
</table>

Tables - tbody, thead

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
    </tbody>
</table>

Styling tags - div and span

<div>
    <p>Some paragraph</p>    
    <span>Word</span>
</div>

• contain no default style of their own
• div - block element
• span - inline element

End