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