Advanced HTML (Hypertext Markup Language) refers to the utilization of more complex and sophisticated techniques to create dynamic, interactive, and visually appealing web content. While basic HTML provides the foundation for structuring web documents, advanced HTML techniques involve using additional elements, attributes, and methods to enhance the user experience and provide more intricate designs and functionalities. In HTML, “table,” “form,” and “frame” are elements that serve different purposes in structuring and presenting web content. Here’s a brief overview of each:

Table in HTML

In HTML, tables are used to display tabular data, and they consist of rows and columns. The main elements used to create tables are <table>, <tr>, <th> and <td>. Let’s go through them in detail:

<table> element: This is the container element for creating a table. Example:

   <table>
       <!-- table rows and cells will go here -->
   </table>

<tr> element: This stands for “table row” and is used to define a row within the table. Example:

   <table>
       <tr>
           <!-- table cells (header or data) will go here -->
       </tr>
   </table>

<th> element: This stands for “table header” and is used to define header cells for columns or rows. Header cells are typically bold and centered by default. Example:

   <table>
       <tr>
           <th>Header 1</th>
           <th>Header 2</th>
       </tr>
       <!-- more rows and cells will go here -->
   </table>

<td> element: This stands for “table data” and is used to define regular cells that hold the actual data. Example:

   <table>
       <tr>
           <td>Data 1</td>
           <td>Data 2</td>
       </tr>
       <!-- more rows and cells will go here -->
   </table>

Additionally, tables can have various attributes to control their appearance and behavior. Some commonly used attributes include:

border: Specifies the border width of the table.
width: Sets the width of the table.
cellspacing: Defines spacing between cells.
cellpadding: Defines spacing between cell content and cell borders.
align: Aligns the table (left, center, right).
bgcolor: Sets the background color of the table.

Example:

<table border="1" width="50%" cellspacing="10" cellpadding="5" align="center" bgcolor="#f0f0f0">
   <!-- table content goes here -->
</table>

Form in HTML

Forms are created using the <form> element, and they can contain various form controls or elements with attributes that define their behavior and appearance. Here’s an overview of the <form> element and some common attributes used within it:

<form action="process.php" method="POST">
  <!-- Form controls go here -->
</form>

In the above example:

action: This attribute specifies the URL where the form data will be sent for processing. It could be a server-side script like PHP, Python, etc., that will handle the submitted data.
method: This attribute defines the HTTP method to be used when submitting the form data. The two most common methods are “GET” and “POST”. “GET” appends form data to the URL, while “POST” sends it in the request body for better security and handling of larger data.

Now, let’s look at some common form controls and their attributes:

Text Input:

   <label for="username">Username:</label>
   <input type="text" id="username" name="username" placeholder="Enter your username" />

type: Specifies the type of input control.
id: Unique identifier for the input.
name: Name of the input field, used to identify the data when the form is submitted.
placeholder: Provides a hint to the user about what to enter.

2. Radio Buttons:

   <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>

type=”radio”: Creates a radio button input.
value: Value sent to the server when the radio button is selected.

3. Checkboxes:

   <input type="checkbox" id="subscribe" name="subscribe" value="yes" />
   <label for="subscribe">Subscribe to newsletter</label>

type=”checkbox”: Creates a checkbox input.
value: Value sent to the server when the checkbox is checked.

4. Select Dropdown:

   <label for="country">Select a country:</label>
   <select id="country" name="country">
     <option value="us">United States</option>
     <option value="ca">Canada</option>
     <option value="uk">United Kingdom</option>
   </select>

<select>: Creates a dropdown select element.
<option>: Defines the available options within the dropdown.

Frames in HTML

Frames were used in older versions of HTML to divide a web page into multiple independent sections, each containing a separate HTML document. However, frames have been deprecated in HTML5 due to various usability and accessibility issues. Instead, developers are encouraged to use modern techniques such as CSS for layout and creating responsive designs. If you encounter “frame” in a modern context, it might refer to the <iframe> element, which is used to embed external content (such as a video or a map) within a web page.

The <frame> element:
The <frame> element was part of the HTML 4.01 specification and was used within a <frameset> to define individual frames. A <frameset> contained one or more <frame> elements, each specifying a source (URL) to load content from.

Attributes of the <frame> element:

src: Specifies the URL of the content to be displayed within the frame.
name: Defines a unique name for the frame. This name can be used as a target for links or forms to open content within the specific frame.
longdesc: Provides a longer description of the content within the frame, primarily for accessibility purposes.
noresize: Indicates whether the user can resize the frame. If present, the frame cannot be resized by the user.
scrolling: Specifies whether scrollbars should appear within the frame if the content exceeds the frame’s dimensions. Possible values are “auto”, “yes”, “no”.
frameborder: Sets whether a border should appear around the frame. If set to “0”, no border is displayed; if set to “1”, a border is displayed.
marginwidth: Specifies the amount of space (in pixels) to be used as a margin inside the frame.
marginheight: Specifies the amount of space (in pixels) to be used as a margin inside the frame.
noresize: Prevents the user from resizing the frame by dragging its edges.
sandbox: Specifies a security policy for the content within the frame. This attribute is not exclusive to <frame> but is also used in other contexts like <iframe>. It can restrict the capabilities of the framed content.

Example usage of the <frame> element within a <frameset>:

<!DOCTYPE html>
<html>
<head>
  <title>Frame Example</title>
</head>
<frameset cols="25%,75%">
  <frame src="left.html" name="leftFrame">
  <frame src="right.html" name="rightFrame">
</frameset>
</html>

In modern web development, it’s recommended to use other layout techniques and avoid frames due to their limitations and potential accessibility issues. The <iframe> element is still used for embedding content from other sources, but frames as a layout tool have become obsolete.

more related content on Internet Technology and Management(ITM)

Learn Loner

HTML Essentials

Table in HTML

Form in HTML

Frames in HTML