Lesson 4: HTML Links, Tables, and Multimedia
Understanding Links
In this lesson, we'll explore HTML links, tables, and multimedia elements. These components are essential for creating interactive and visually appealing webpages.
HTML Links
HTML links, created with the `<a>` element, allow users to navigate between webpages or different sections within the same webpage.
Common Attributes for Links
Let's explore some common attributes used with HTML links:
1. `href` Attribute:
- The `href` attribute specifies the URL of the linked resource.
- It can be a URL to another webpage, an email address, or an anchor within the same webpage.
2. `target` Attribute:
- The `target` attribute specifies where to open the linked document.
- Values include `_self` (opens in the same window/tab), `_blank` (opens in a new window/tab), `_parent`, and `_top`.
HTML Tables
HTML tables, created with the `<table>` element, allow you to display data in rows and columns.
Common Elements in Tables
Let's explore some common elements used within HTML tables:
1. `<table>` Element:
- The `<table>` element defines a table.
- It contains one or more `<tr>` (table row) elements.
2. `<tr>` Element:
- The `<tr>` element defines a row within a table.
- It contains one or more `<td>` (table data/cell) elements.
3. `<td>` Element:
- The `<td>` element defines a single cell within a table row.
- It contains the data to be displayed in that cell.
Multimedia Elements
HTML supports embedding multimedia elements like images, audio, and video.
Common Multimedia Elements
Let's explore some common multimedia elements in HTML:
1. `<img>` Element:
- The `<img>` element embeds images into webpages.
- It requires the `src` attribute, which specifies the path to the image file.
2. `<audio>` Element:
- The `<audio>` element embeds audio content into webpages.
- It supports various audio formats, such as MP3, WAV, and Ogg Vorbis.
3. `<video>` Element:
- The `<video>` element embeds video content into webpages.
- It supports various video formats, such as MP4, WebM, and Ogg Theora.
Example: Using Links, Tables, and Multimedia Elements
Let's apply what we've learned in a practical example:
```html <!DOCTYPE html> <html> <head> <title>HTML Links, Tables, and Multimedia</title> </head> <body> <h1>HTML Links, Tables, and Multimedia</h1> <h2>Links</h2> <a href="https://www.example.com">Visit Example Website</a> <h2>Tables</h2> <table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> <h2>Multimedia</h2> <img src="image.jpg" alt="Description of image"> <audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <video controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video element. </video> </body> </html> ```
Explanation
In this example, we've used HTML links to create a hyperlink to an external webpage. We've also created a simple table with two rows and two columns. Additionally, we've embedded an image, audio, and video elements into the webpage for multimedia content.
Exercise
Practice creating HTML links, tables, and embedding multimedia elements into your webpages. Experiment with different attributes and elements to understand their functionalities better.