Video Tag
The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.
<!-- <video src="video Address"></video> -->
// <!--
// src -> path of video from local system or from the other web site
// width -> we can set width of the video
// height -> we can set height of the video
// controls -> without using this attribute video will shown as image,
// after using it gives us controls of play,pause,volume up down,timelapse
// autoplay -> will autopaly video ,dont use otherwise user experience is not good
// -->
<video width="250" height="200" controls>
<source src="path.mp4" type="video/mp4">
<source src="path.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
The <video> tag contains one or more <source> tags with different video sources.
-> Without Control
-> With Control
Audio Tag
The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
<audio controls src="./Magical journey through space mp3.mp3"></audio>
// <!-- using <audio></audio> tag we can use audio in webpage -->
<!--
src -> path of video from local system or from the other web site
controls -> without using this attribute audio will be not shown on the page,
after using it gives us controls of play,pause,volume up down,timelapse
autoplay -> will autopaly audio ,dont use otherwise user experience is not good
-->
Abbr Tag & Title Arrtribute
This attribute contains single value text which is used as the tooltip text for an element.
This title is associated with all HTML elements.
<p><abbr title="Hypertext markup Language">HTML</abbr></p>
<!-- we can give this effect using <abbr></abbr> tag -->
<p title="Cascading Style Sheet">CSS</p>
<!-- title attribute can be written in any tag -->
Tables in HTML
A table is a structured set of data made up of rows and columns.
A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data.
Tr and Td:
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
th stands for table header.
Colspan:
To make a cell span over multiple columns, use the colspan attribute.
Rowspan:
To make a cell span over multiple rows, use the rowspan attribute.
Here is a full example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table | Proj_1</title>
</head>
<body>
<!-- simple time table project -->
<table border cellpadding="16px">
<thead>
<tr>
<th colspan="8">Time Table of School</th>
</tr>
<tr>
<th>Day/Time</th>
<th>7:20 - 8:10</th>
<th>8:10 - 8:50</th>
<th>8:50 - 9:30</th>
<th>9:30 - 9:50</th>
<th>9:50 - 10:30</th>
<th>10:30 - 11:40</th>
<th>11:40 -12:30</th>
</tr>
</thead>
<tbody>
<tr>
<th>Monday</th>
<td>English</td>
<td>Science</td>
<td>Math</td>
<td rowspan="5" align="center">Recess</td>
<td>Social</td>
<td>Gujarati</td>
<td>Hindi</td>
</tr>
<tr>
<th>Tuesday</th>
<td>English</td>
<td>Science</td>
<td>Math</td>
<td>Social</td>
<td>Gujarati</td>
<td>Hindi</td>
<!-- <td></td> -->
</tr>
<tr>
<th>Wednesday</th>
<td>English</td>
<td>Science</td>
<td>Math</td>
<td>Social</td>
<td>Gujarati</td>
<td>Hindi</td>
<!-- <td></td> -->
</tr>
<tr>
<th>Thursday</th>
<td>English</td>
<td>Science</td>
<td>Math</td>
<td>Social</td>
<td>Gujarati</td>
<td>Hindi</td>
<!-- <td></td> -->
</tr>
<tr>
<th>Friday</th>
<td>English</td>
<td>Science</td>
<td>Math</td>
<td>Social</td>
<td>Gujarati</td>
<td>Hindi</td>
<!-- <td></td> -->
</tr>
<tr>
<th>Saturday</th>
<td>English</td>
<td>Science</td>
<td>Math</td>
<td colspan="4" align="center">No Lecture</td>
<!-- <td>Gujarati</td>
<td>Hindi</td> -->
<!-- <td></td> -->
</tr>
</tbody>
</table>
</body>
</html>
Output:
DAY_7 24_Jan(Tuesday)_2023