Links, Images and Tables

Details: Category: 1. Introduction to Web Development; By Leon Bellamy; Parent Category: Computer Science

Let's go over how to work with links (<a>), images (<img>), and tables (<table>) in HTML.

Links (`<a>` Tag)

The <a> tag (anchor tag) is used to create hyperlinks.

Basic syntax:

html

<a href="URL">Link Text</a>

Example:

html

<a href="https://www.example.com">Visit Example</a>

Attributes:

href: The URL to which the link points.
target: Specifies where to open the linked document. For example, _blank opens the link in a new tab.
title: Specifies extra information about the link (displayed as a tooltip).

Example with attributes:

html

<a href="https://www.example.com" target="_blank" title="Go to Example">Visit Example</a>

Images (`<img>` Tag)

The <img> tag is used to embed images in a webpage.

Basic syntax:

html

<img src="URL" alt="Description">

Example:

html

<img src="https://www.example.com/image.jpg" alt="Example Image">

Attributes:

src: The path to the image file.
alt: Alternative text for the image (important for accessibility).
width and height: Specifies the size of the image.

Example with attributes:

html

<img src="https://www.example.com/image.jpg" alt="Example Image" width="500" height="300">

Tables (`<table>` Tag)

The <table> tag is used to create a table.

Basic structure:

html

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

Tags used in tables:

<table>: Defines the table.
<tr>: Defines a row in the table.
<th>: Defines a header cell in the table.
<td>: Defines a standard cell in the table.

Example with attributes:

html

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

Here, the border="1" attribute adds a border to the table for better visibility.

Combining Links, Images, and Tables

You can also combine these elements. For example, you can add links and images inside a table:

Example:

html

<table border="1">
  <tr>
    <th>Website</th>
    <th>Logo</th>
  </tr>
  <tr>
    <td><a href="https://www.example.com">Example</a></td>
    <td><img src="https://www.example.com/logo.jpg" alt="Example Logo" width="50" height="50"></td>
  </tr>
</table>

This example creates a table with two columns: one for the website link and one for the logo image.

Leon Bellamy