HTML

Find out how to effectively use HTML within the Widget Builder to create and customize your widgets.

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. In the context of the Widget Builder, HTML is used to structure your widgets, ensuring they are properly formatted and styled.

A good resource to learn more about HTML is the Mozilla Developer Network (MDN) Web Docs (developer.mozilla.org/docs/web/html).

Basic HTML Examples

Example 1: Basic Structure

This example shows the basic structure of an HTML widget with a title and a paragraph.

<div class="widget-container">
  <h1 class="widget-title">My Custom Widget</h1>
  <p class="widget-description">
    This is a simple example of a widget using HTML.
  </p>
</div>

<style>
  .widget-container {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .widget-title {
    font-size: 24px;
    font-weight: bold;
  }
  .widget-description {
    font-size: 16px;
  }
</style>

Example 2: Image with Caption

This example demonstrates how to add an image with a caption.

<div class="widget-container">
  <img
    src="https://docs.widgetbuilder.de/img/wb-home.png"
    alt="Example Image"
    class="widget-image"
  />
  <p class="widget-caption">This is an example caption for the image.</p>
</div>

<style>
  .widget-container {
    text-align: center;
    padding: 20px;
  }
  .widget-image {
    max-width: 60%;
    height: auto;
  }
  .widget-caption {
    font-size: 14px;
    color: #666;
  }
</style>

Example 3: List of Items

This example shows how to create a list of items.

<div class="widget-container">
  <h2 class="widget-title">List of Items</h2>
  <ul class="widget-list">
    <li class="widget-list-item">Item 1</li>
    <li class="widget-list-item">Item 2</li>
    <li class="widget-list-item">Item 3</li>
  </ul>
</div>

<style>
  .widget-container {
    padding: 20px;
  }
  .widget-title {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .widget-list {
    list-style-type: disc;
    padding-left: 20px;
  }
  .widget-list-item {
    font-size: 16px;
    margin-bottom: 5px;
  }
</style>

Example 4: Card Layout

This example demonstrates a simple card layout with a header, body, and footer.

<div class="widget-card">
  <div class="widget-card-header">Card Header</div>
  <div class="widget-card-body">This is the body of the card.</div>
  <div class="widget-card-footer">Card Footer</div>
</div>

<style>
  .widget-card {
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    max-width: 300px;
    margin: 20px auto;
  }
  .widget-card-header,
  .widget-card-footer {
    background-color: #f5f5f5;
    padding: 10px;
    font-weight: bold;
    text-align: center;
  }
  .widget-card-body {
    padding: 20px;
    text-align: center;
  }
</style>

Example 5: Table Layout

This example shows how to create a simple table layout.

<div class="widget-container">
  <h2 class="widget-title">Simple Table</h2>
  <table class="widget-table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>
    </tbody>
  </table>
</div>

<style>
  .widget-container {
    padding: 20px;
  }
  .widget-title {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .widget-table {
    width: 100%;
    border-collapse: collapse;
  }
  .widget-table th,
  .widget-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
  }
  .widget-table th {
    background-color: #f5f5f5;
  }
</style>

Next Steps

These basic HTML examples demonstrate how you can use HTML and CSS to structure and style your widgets in the Widget Builder. By mastering these basics, you can create more complex and customized widgets to meet your specific needs.

To further enhance your widgets, consider exploring more advanced HTML and CSS techniques, such as responsive design, flexbox, grid layouts. Experiment with different styles and layouts to create visually appealing and interactive widgets.

Introduction to HTML in Widget Builder​

Basic HTML Examples​

Example 1: Basic Structure​

Example 2: Image with Caption​

Example 3: List of Items​

Example 4: Card Layout​

Example 5: Table Layout​

Next Steps​

Introduction to HTML in Widget Builder