In früheren Aktivitäten haben Sie Folgendes gelernt:
- Grundlegende Informationen zu HTML-Tags und -Elementen
- So strukturieren Sie eine Webseite.
- Semantic HTML and Best Practices
In diesem Artikel bauen Sie Ihre HTML-Kenntnisse auf und behandeln zusätzliche HTML-Elemente.
Elemente für Textinhalte
<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 das Erstellen von Textinhalten und verleihen ihnen Struktur, Stil und Bedeutung. Es gibt verschiedene Textinhalte, die die folgenden Elemente enthalten können.
Das Blockzitat-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 mit dem Element <blockquote>
ein berühmtes Zitat von Mahatma Gandhi präsentieren. Es gibt so viele tolle Zitate, die einprägsame Inhalte und Bedeutung liefern. 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 in der Präsentation für eine einzigartige Einrückung und Ausrichtung und verwendet sowohl ein öffnendes als auch ein schließendes Tag. Ein <blockquote>
ist besonders hilfreich, wenn längere Zitate verwendet werden, die sich über mehrere Textzeilen erstrecken.
Innerhalb eines <blockquote>
-Elements kannst du auch 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 FAQ-Bereich und zusätzliche Informationen, die dem Nutzer zur Verfügung stehen. Es gibt FAQ-Bereiche, die häufig für Produktinformationen, Reisepläne oder alle Arten von Fragen und Antworten verwendet werden.
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, über die der Nutzer die Ein/Aus-Schaltfläche öffnen und schließen kann. Wenn die Ein/Aus-Schaltfläche geöffnet ist, werden die zusätzlichen Informationen maximiert und können vom Nutzer gelesen werden. Wenn die Ein/Aus-Schaltfläche geschlossen ist, werden die zusätzlichen Informationen für den Nutzer ausgeblendet. Verwenden Sie das Element <summary>
, um dem <details>
-Widget einen Namen zu geben.
<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 Element <figcaption>
verwendet werden kann, um das visuelle Erlebnis zu verbessern.
Bilder und andere hilfreiche visuelle Daten sind im Web verfügbar. Visuelle Elemente helfen, die Aufmerksamkeit der Besucher auf sich zu ziehen und eine großartige User Experience zu schaffen. Mit dem <figure>
-Element können Sie Bilder, Tabellen, Diagramme usw. mit Labels versehen. Dabei werden in sich geschlossene Inhalte in Relation zum Hauptinhalt erstellt.
Das <time>
-Element
<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>
Das <time>
-Element bietet sowohl Bedeutung als auch semantische Bedeutung und ermöglicht so bessere Funktionen bei Aktivitäten wie der Online-Terminvereinbarung, der Veröffentlichung eines Datums und einer Uhrzeit für einen Blogartikel, Archiven usw. Einige Website-Beispiele für die Verwendung des <time>
-Elements sind die Verwendung von Google Kalender, die Live-Veröffentlichung eines Artikels auf einer Plattform oder das Lesen von historischen Onlinearchiven auf einer Bibliothekswebsite.
Das Element <time>
verweist auf die Zeit und kann die Zeit im 24-Stunden-Format oder ein bestimmtes Datum darstellen, das je nach Zeitzone und Ort angepasst werden kann. Für dieses Element sind sowohl ein öffnendes als auch 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 der Name der Website <title>
angezeigt, der in der Adressleiste oder auf dem Tab der Webseite zu sehen ist. Es ist der Titelname, den Sie für eine Webseite sehen. Dieses Element ist wichtig und wird von einer Suchmaschine verwendet, um eine Liste ähnlicher Webseiten in Suchergebnissen anzuzeigen. Die Titellänge kann von kurz und aussagekräftig, aber auch länger und aussagekräftiger sein.
Szenario: Sie möchten über eine Webseite nachdenken, können sich aber nicht an die genaue URL der Website erinnern. Geben Sie die Suchbegriffe in eine Suchmaschine ein. Mit der Suchmaschine kannst du die gesuchte Webseite ausfindig machen und du kannst sehen, wie der Name <title>
in der Suche erscheint.
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 einen Onlinekauf abschließen und auf eine Zahlungsoption wie PayPal oder Apple Pay klicken, werden diese Funktionen in der Regel einer Webseite mit einem <iframe>
hinzugefügt. Eine weitere gängige Erfahrung ist es, online eine Karte zu sehen, auf der man nach lokalen Unternehmen suchen kann. Diese Art von Nutzererfahrung auf einer Webseite kann mit einem iFrame hinzugefügt werden. Im obigen Beispiel 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 in eine Webseite einbetten. Dabei wird ein rechteckiger Frame erstellt und der Inhalt wird im Browser angezeigt. Ein Frame ermöglicht die Darstellung eines fensterförmigen Layouts innerhalb eines <iframe>
-Elements. So können Sie auf effektive Weise Inhalte zu Ihrer Webseite hinzufügen, um die Nutzererfahrung zu verbessern.
Formularelemente
<progress max="100" value="30"> 30% </progress>
Wenn du dir ein längeres Video, eine Vorlesung oder eine umfangreiche Bewerbung füllst, kann dir eine Fortschrittsanzeige dabei helfen, deinen Fortschritt im Blick zu behalten. Das Element <progress>
ist in solchen Fällen hilfreich.
Dieses Element wird als visuelle Leiste mit einer Hintergrundfarbe dargestellt. Die Größe und Hintergrundfarbe der visuellen Leiste können variieren. In der Fortschrittsanzeige können Sie optional die Attribute max
und value
verwenden. Mit dem Attribut max
wird die Gleitkommazahl festgelegt und mit dem Attribut value
wird der Fortschritt bei einer Aufgabe angegeben.
Skripting
<canvas id="canvas"></canvas>
Wenn Sie Grafiken und Animationen in Echtzeit zeichnen möchten, verwenden Sie das Element <canvas>
. Füge das <canvas>
-Element in deine 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 sind eine hilfreiche Methode zum Organisieren und Anzeigen von Informationen. Ein Anwendungsfall für die Verwendung des Elements <table>
ist die Darstellung von tabellarischen Informationen für den Nutzer, z. B. die Arten von Informationen, die Sie möglicherweise in einer Tabelle finden.
Das <th>
-Element
Das Element <th>
ist die Kopfzeile für eine Gruppe von Zellen.
Das <tr>
-Element
Das Element <tr>
definiert eine Zeile mit Zellen in einer Tabelle. Hier können Sie bestimmte Zellendaten hinzufügen.
Das <td>
-Element
Mit dem Element <td>
wird die Zelle erstellt und der erforderliche Inhalt wird hinzugefügt.
Fazit
In diesem Artikel haben Sie zusätzliche HTML-Elemente entdeckt und Ihre Programmierkenntnisse erweitert. Sie haben mehr über Inhalte, Inline-Text, eingebettete Inhalte und Tabellenelemente erfahren. Sie haben jetzt Ihr Wissen über zusätzliche HTML-Elemente erweitert. Mach weiter wie bisher!