HTML full course beginner to advanced part-4

 

Topic : Geeting a video on web page ,  Geeting A Audio on web page , Create Table, Colspan & Rowspan

Geeting a video on web page 

How to add video ?

<video src=" video address" controls></video>

How to auto play video ?

<video src=" video address" autoplay></video>

How To mute video ?

<video src=" video address" mute></video>

How to add Youtube video in web page ?

1. Find the YouTube video you want to embed and click on the "Share" button below the video player.

2. Click on the "Embed" button that appears in the sharing options.

3. Copy the iframe code that appears in the "Embed" window.

4. Open your HTML document in a text editor or an HTML editor.

5. Paste the YouTube iframe code into the HTML document where you want the video to appear.

6. Save the HTML document.

Here is an example of how the YouTube embed code should look like in HTML:

```

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

```

Replace "VIDEO_ID" in the code above with the actual video ID of the YouTube video you want to embed.

Note that you can adjust the width and height of the video player by changing the values in the "width" and "height" attributes of the iframe tag. You can also add additional attributes such as "autoplay" or "controls" to the iframe tag to control the video playback.

 Geeting A Audio on web page 

 How to add audio on web page ?

<audio src="audio adress" controls></audio>

How to Auto play Audio ?

<audio src="audio adress" Autoplay></audio>

How to Mute Audio ?

<audio src="audio adress" mute></audio>

Table in HTML

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

tr -> stands for table row.

td -> stands for table data.

th -> stands for table header.

Output

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

How To add table border ?

When you add a border to a table, you also add borders around each table cell:

To add a border, use the CSS border property on table, th, and td elements:

Example : 

table, th, td {
  border: 1px solid black;
}

HTML Table Colspan & Rowspan

Rowspan :

NAME

<table>
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
</tr>
</table>

Colspan :

APRIL

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>