HTML Tables, Frames. Hyperlinks, Images, Forms and Controls.

1. HTML Tables

HTML tables are used to display data in rows and columns. They are ideal for presenting structured data like schedules, pricing, or statistics.

Structure and Elements:

• <table>: The container for the table.

• <tr>: Defines a table row.

• <th>: Defines a table header cell (bold and centered by default).

• <td>: Defines a standard table data cell.

Example:

<table border="1">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>$1.00</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$1.50</td>
  </tr>
</table>

Key Points:

• Use the border attribute to add borders (though styling with CSS is preferred in modern web development).

• Tables should not be used for page layout; use CSS for layout purposes.

  
  

2. HTML Frames (Deprecated)

Frames were used to divide the browser window into multiple sections, each loading a separate HTML document. However, frames are deprecated in HTML5 due to usability and SEO issues.

Legacy Example:

<frameset cols="50%,50%">
  <frame src="left.html">
  <frame src="right.html">
</frameset>

Modern Alternative:

Use <iframe> to embed external content into a page.

Example of <iframe>:

<iframe src="https://www.example.com" width="600" height="400" title="Embedded Example"></iframe>

Key Points:

• Frames are not supported in HTML5.

• <iframe> is the modern alternative for embedding external content.

  
  

3. HTML Hyperlinks

Hyperlinks (or links) are used to navigate between web pages or resources. They are created using the <a> tag.

Basic Anchor Tag:

• <a>: Defines a hyperlink.

• Attributes:

  • href: Specifies the URL of the linked resource.

  • target="_blank": Opens the link in a new tab or window.

  • title: Provides additional information as a tooltip.

Example:

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

Other Uses:

• Mailto Link:

  <a href="mailto:example@example.com">Send Email</a>

  
  

• Link to a File:

  <a href="file.pdf" download>Download PDF</a>

  
  

4. HTML Images

Images are added to web pages using the <img> tag. They enhance visual appeal and provide context.

Key Attributes:

• src: Specifies the path or URL of the image.

• alt: Provides alternative text for accessibility and SEO.

• width and height: Define the dimensions of the image.

Example:

<img src="image.jpg" alt="A beautiful scenery" width="500" height="300">

Clickable Image:

Wrap the <img> tag inside an <a> tag to make the image clickable.

<a href="https://www.example.com">
  <img src="button.jpg" alt="Click Here" width="100" height="50">
</a>

5. HTML Forms and Controls

Forms are used to collect user input, which can be submitted to a server for processing.

Core Elements:

• <form>: The container for form elements.

  • action: Specifies where the form data is sent.

  • method: Defines the HTTP method (GET or POST).

• <input>: A versatile element for various input types (text, email, password, etc.).

• <textarea>: For multi-line text input.

• <select> and <option>: For dropdown menus.

• <button>: Used to submit the form.

Example Form:

<form action="submit_form.php" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <br><br>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br><br>
  
  <label>Gender:</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label>
  <br><br>
  
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="usa">USA</option>
    <option value="canada">Canada</option>
  </select>
  <br><br>
  
  <input type="submit" value="Submit">
</form>

Key Points:

• Use the required attribute to make fields mandatory.

• Use <label> to improve accessibility by associating text with input elements.

  
  

Conclusion

• Tables: Use for structured data, not layout.

• Frames: Deprecated; use <iframe> instead.

• Hyperlinks: Enable navigation between pages or resources.

• Images: Enhance visual appeal and context.

• Forms: Collect user input for processing.

By mastering these HTML elements, you can create functional, visually appealing, and user-friendly web pages!