WEB DEVELOPMENT

FRONT-END

HTML 101 (II)

TABLE

<table>

</table>
<table>

    <tr>

    </tr>

</table>
<table>

    <tr>

        <td>

        </td>

    </tr>

</table>

CAPTION

<table>

    <caption> Some caption </caption>

</table>

HEADER

<table>

    <thead>

        <tr>

            <th>Some header</th>

        </tr>

    </thead>

</table>

BODY

<table>

    <tbody>

        <tr>

            <td> Some cell data </td>

        </tr>

    </tbody>

</table>

FOOTER

<table>

    <tfoot>

        <tr>

            <td> Some footer data </td>

        </tr>

    </tfoot>

</table>

MERGING ROWS AND COLUMNS

<table>
  <thead>
    <tr>
      <td colspan="2"> This is two columns long </td>
      <td> This is one column long </td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan="2"> This is two rows big but one column long</td>
      <td> The other column we had in the colspan </td>
      <td> Last column left <td>
    </tr>
    <tr>
      <td> 2nd column in this row </td>
      <td> last column </td>
    </tr>
  </tbody>
</table>

LISTS

unordered

ordered

description

UNORDERED LISTS

<ul>

    <li> First item </li>

    <li> Second item </li>

    <li> Third item </li>

</ul>

ORDERED LISTS

<ol start="4" reversed>

    <li> First item </li>

    <li> Second item </li>

    <li> Third item </li>

</ol>

DESCRIPTION LISTS

<dl>

    <dt> First description term </dt>

    <dd> And this is the definition for the 
           first description term </dd>

<dl>

MEDIA

images

audio

video

frames

IMAGES

<img src="path/to/image.png" 
     alt="Meaningful name for image" />

AUDIO

<audio controls>
  <source src="jazz.ogg" type="audio/ogg">
  <source src="jazz.mp3" type="audio/mpeg">
  <source src="jazz.wav" type="audio/wav">
  Please <a href="jazz.mp3" download>download</a> the audio file.
</audio>

VIDEO

<video controls poster="path/to/poster.png">
  <source src="earth.ogv" type="video/ogg">
  <source src="earth.mp4" type="video/mp4">
  Please <a href="earth.mp4" download>download</a> the video.
</video>

iFrame

<iframe src="https://www.google.com/maps/embed?..."></iframe>

Q&A

THANK YOU!

WEBDEV-FE-L5 - HTML 101 (II)

By Alex Albu

WEBDEV-FE-L5 - HTML 101 (II)

  • 420