In früheren Aktivitäten haben Sie Folgendes gelernt:
- Grundlagen von HTML-Tags und -Elementen
- So strukturieren Sie eine Webseite.
- Semantisches HTML und Best Practices
Mit diesem Artikel bauen Sie Ihre HTML-Kenntnisse weiter aus und behandeln weitere HTML-Elemente.
Elemente des Textinhalts
<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>
Diese Elemente unterstützen die Erstellung von Textinhalten und geben Struktur, Stil und Bedeutung an. Es gibt mehrere Textinhalte, die die folgenden Elemente enthalten können.
Das Blockquote-Element
<blockquote cite="https://www.goodreads.com/quotes">
<p>Be the change that you wish to see in the world.</p>
</blockquote>
In diesem Beispiel wird gezeigt, wie Sie das Element <blockquote> mit einem berühmten Zitat von Mahatma Gandhi verwenden. Es gibt so viele gute Zitate, die einen einprägsamen Inhalt und eine wichtige Bedeutung vermitteln. Denken Sie an einige Ihrer inspirierenden Lieblingsfiguren und deren Zitate.
Verwenden Sie das Element <blockquote>, wenn Sie Zitate verwenden und auf Informationen aus einer Quelle verweisen. Das <blockquote>-Element sorgt für eine eindeutige Einrückung und Ausrichtung in der Präsentation und verwendet sowohl ein öffnendes als auch ein schließendes Tag. Ein <blockquote> ist besonders hilfreich bei längeren Anführungszeichen, die mehrere Textzeilen abdecken.
Innerhalb eines <blockquote>-Elements können Sie verschiedene Elemente verwenden, z. B. eine Überschrift, einen Absatz oder eine Liste.
Das <details>-Element
<details>
<summary>Details</summary>
Additional Information
</details>
Häufig enthält eine Webseite einen Bereich mit häufig gestellten Fragen und zusätzlichen Informationen, die dem Nutzer zur Verfügung stehen. Es gibt FAQs-Abschnitte, die häufig für Produktinformationen, Reisepläne oder andere Frage-und-Antwort-Szenarien vorgesehen sind.
Das Element <details> ist hilfreich, wenn ein offengelegtes Widget verwendet wird, das zusätzliche Informationen enthält. Das Element verfügt über eine integrierte Ein-/Aus-Schaltfläche und Nutzer können die Ein/Aus-Schaltfläche öffnen und schließen. Wenn die Ein/Aus-Schaltfläche geöffnet ist, wird der Inhalt der zusätzlichen Informationen maximiert und kann vom Nutzer gelesen werden. Wenn die Ein/Aus-Schaltfläche geschlossen ist, werden die zusätzlichen Informationen für den Nutzer ausgeblendet. Wenn Sie das <details>-Widget selbst benennen möchten, verwenden Sie das Element <summary>.
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
alt="Google logo">
<figcaption>Google logo</figcaption>
</figure>
Dies ist das Element <figure> in Aktion. Hier sehen Sie, dass <figure> zusammen mit dem <figcaption>-Element zur Optimierung der visuellen Darstellung verwendet werden kann.
Sie sehen überall im Web Bilder und ständig andere hilfreiche visuelle Daten. Visuelle Elemente lenken die Aufmerksamkeit der Besucher auf sich und schaffen eine hervorragende User Experience. Mit dem <figure>-Element können Sie Bilder, Tabellen, Diagramme usw. beschriften. Dabei werden in Bezug auf den Hauptinhalt eigenständige Inhalte erstellt.
Das <time>-Element
<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>
Das Element <time> bietet sowohl Bedeutung als auch semantische Bedeutung und ermöglicht eine bessere Funktionalität bei Aktivitäten wie Online-Terminplanung, Veröffentlichung von Datum und Uhrzeit für einen Blogartikel oder Archive. Einige Website-Beispiele, in denen das Element <time> verwendet wird, ist das Verwenden eines Google-Kalenders, das Veröffentlichen eines Artikels aus einer Online-Bibliothek.
Das <time>-Element verweist auf die Zeit und kann die Zeit im 24-Stunden-Format oder ein bestimmtes Datum darstellen, bei dem Zeitzone und Standort angepasst werden können. Für dieses Element sind ein öffnendes und ein schließendes Tag, <time> und </time> erforderlich. Sie können das Attribut datetime hinzufügen, damit Datumsangaben in einem maschinenlesbaren Format gelesen werden können.
Dokumentmetadaten
<title>Sarah's Favorite Food Recipes</title>
Jedes Mal, wenn Sie eine Website-URL eingeben, wird ein <title>-Name angezeigt, der in der Browserleiste oder auf dem Tab auf der Webseite gelesen werden kann. Es ist der Titelname einer Webseite. Dieses Element ist wichtig und wird von einer Suchmaschine verwendet, um eine Liste mit ähnlichen Webseiten in den Suchergebnissen anzuzeigen. Die Länge des Titels kann von kurz und aussagekräftig bis hin zu länger und aussagekräftiger sein.
Szenario: Sie haben eine Webseite, über die Sie nachdenken, sich aber nicht an die genaue Website-URL erinnern. Geben Sie die Suchbegriffe in eine Suchmaschine ein. Die Suchmaschine kann dir dabei helfen, die gesuchte Webseite zu finden, und du siehst den Namen <title> in der Suche.
Eingebettete Inhaltselemente
Zusätzlich zu Textinhalten können Sie eine Vielzahl zusätzlicher Inhaltselemente verwenden.
Das <iframe>-Element
<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>
Wenn Sie Ihre Artikel online kaufen und auf Ihre Zahlungsoption wie PayPal oder Apple Pay klicken, werden diese Funktionen häufig einer Webseite mit einem <iframe> hinzugefügt. Eine weitere häufige Erfahrung ist es, online eine Karte anzuzeigen, um nach einem lokalen Unternehmen zu suchen. Diese Arten von Nutzererfahrungen auf einer Webseite können mit einem iFrame hinzugefügt werden. Im Beispiel oben sehen Sie die Wikipedia-URL in einem iFrame mit dem Titel „Wikipedia“.
Mit dem <iframe>-Element können Sie Inhalte aus einer anderen Quelle einfügen und einen Frame auf einer Webseite einbetten. Es erstellt einen rechteckigen Frame und zeigt Inhalte im Browser an. Ein Frame ermöglicht die Darstellung eines fensterförmigen Layouts innerhalb eines <iframe>-Elements. Es ist eine leistungsstarke Methode, um Ihrer Webseite Inhalte hinzuzufügen und so die Nutzererfahrung zu verbessern.
Formularelemente
<progress max="100" value="30"> 30% </progress>
Wenn du dir ein längeres Video ansiehst, eine Vorlesung gibst oder eine umfangreiche Bewerbung ausfüllst, kann eine visuelle Fortschrittsanzeige hilfreich sein, um deinen Fortschritt zu verfolgen. Für solche Szenarien ist das Element <progress> hilfreich.
Dieses Element wird als visuelle Leiste mit Hintergrundfarbe dargestellt. Die visuelle Leiste kann ihre Größe und Hintergrundfarbe variieren. Mit der Fortschrittsanzeige können Sie optional die Attribute max und value verwenden. Das Attribut max legt die Gleitkommazahl fest und das Attribut value gibt an, wie viele Fortschritte bei einer Aufgabe gemacht wurden.
Skripting
<canvas id="canvas"></canvas>
Wenn Sie Grafiken und Animationen in Echtzeit zeichnen möchten, verwenden Sie das Element <canvas>. Fügen Sie das <canvas>-Element in Ihre HTML-Webseite ein, um einen Canvas zu erstellen. Für dieses Element ist JavaScript-Code erforderlich, damit Grafiken gezeichnet und erstellt werden können.
Elemente des Tabelleninhalts
<table>
<thead>
<tr>
<th colspan="2">Grocery List</th>
</tr>
</thead>
<tbody>
<tr>
<td>Broccoli</td>
<td>Quantity: 2</td>
</tr>
</tbody>
</table>
Das <table>-Element
Mit dem Element <table> wird eine Tabelle erstellt. Dies ist der Ausgangspunkt für das Hinzufügen zusätzlicher Elemente mit Zeilen und Spalten. Tabellen werden häufig auf Webseiten angezeigt und bieten eine gute Möglichkeit, Informationen zu organisieren und anzuzeigen. Ein Anwendungsfall für die Verwendung des <table>-Elements besteht darin, dem Nutzer tabellarische Informationen anzuzeigen, z. B. die Art von Informationen, die Sie möglicherweise in einer Tabelle finden.
Das <th>-Element
Das Element <th> ist die Kopfzeile einer Zellengruppe.
Das <tr>-Element
Mit dem Element <tr> wird eine Zeile von Zellen in einer Tabelle definiert. Hier können Sie bestimmte Zellendaten hinzufügen.
Das <td>-Element
Mit dem Element <td> wird die Zelle erstellt und der erforderliche Inhalt hinzugefügt.
Fazit
In diesem Artikel haben Sie zusätzliche HTML-Elemente entdeckt und auf Ihren Programmierkenntnissen aufbaut. Sie haben mehr über Inhalte, Inline-Text, eingebettete Inhalte und Tabellenelemente erfahren. Sie haben nun Ihre Kenntnisse zu zusätzlichen HTML-Elementen vertiefen können. Mach weiter wie bisher!