HTML

Erfahren Sie, wie Sie HTML effektiv im Widget Builder einsetzen, um Ihre Widgets zu erstellen und anzupassen.

Einführung in HTML im Widget Builder

HTML (HyperText Markup Language) ist die Standard-Auszeichnungssprache zur Erstellung von Webseiten und Webanwendungen. Im Kontext des Widget Builders wird HTML verwendet, um Ihre Widgets zu strukturieren und sicherzustellen, dass sie korrekt formatiert und gestaltet sind.

Eine gute Ressource, um mehr über HTML zu erfahren, sind die Mozilla Developer Network (MDN) Web Docs (developer.mozilla.org/docs/web/html).

Grundlegende HTML-Beispiele

Beispiel 1: Grundstruktur

Dieses Beispiel zeigt die grundlegende Struktur eines HTML-Widgets mit einem Titel und einem Absatz.

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

Beispiel 2: Bild mit Bildunterschrift

Dieses Beispiel zeigt, wie Sie ein Bild mit einer Bildunterschrift hinzufügen.

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

Beispiel 3: Liste von Elementen

Dieses Beispiel zeigt, wie Sie eine Liste von Elementen erstellen.

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

Beispiel 4: Karten-Layout

Dieses Beispiel zeigt ein einfaches Karten-Layout mit Kopfbereich, Inhalt und Fußbereich.

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

Beispiel 5: Tabellen-Layout

Dieses Beispiel zeigt, wie Sie ein einfaches Tabellen-Layout erstellen.

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

Nächste Schritte

Diese grundlegenden HTML-Beispiele zeigen, wie Sie HTML und CSS verwenden können, um Ihre Widgets im Widget Builder zu strukturieren und zu gestalten. Wenn Sie diese Grundlagen beherrschen, können Sie komplexere und individuellere Widgets erstellen, die Ihren spezifischen Anforderungen entsprechen.

Um Ihre Widgets weiter zu verbessern, sollten Sie fortgeschrittenere HTML- und CSS-Techniken erkunden, wie z. B. responsives Design, Flexbox und Grid-Layouts. Experimentieren Sie mit verschiedenen Stilen und Layouts, um visuell ansprechende und interaktive Widgets zu erstellen.