Trick # 454 | Dieser Beitrag beinhaltet 507 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Kennen Sie den progress-Tag in HTML? Oder den meter-Tag? Die beiden haben es in sich, werden aber irgendwo zwischen selten und kaum genutzt. Zeit, die beiden Tags einmal genauer anzusehen. Mit ihnen lassen sich nämlich höchst einfach Fortschrittsbalken und/oder Balkendiagramme erstellen.
Wenden wir uns zunächst dem <progress>-Tag zu. Er ist gut geeignet, um einen Fortschrittsbalken darzustellen – gut passend für mehrseitige Inhalte.
Fügen Sie folgenden HTML-Code in der Text- oder HTML-Ansicht Ihres Editors an der gewünschten Stelle der Website ein:
<progress value="59" max="100">
</progress>In der Live-Ansicht wird sich dieser Code so zeigen:
Ähnlich – und doch etwas anders – verhält sich der meter-Tag. Er wird zum Beispiel mit folgendem Code aufgerufen, welchen Sie in der HTML- oder Text-Ansicht Ihres Editors einfügen können:
<meter value="2" min="0" max="10">2 von 10</meter>Das ergibt dann folgendes:
Den meter-Tag können Sie aber auch mit einer Prozentzahl versehen. Das tut folgender HTML-Code, den Sie in den Text-Editor einfügen können. Wechseln Sie dafür in die HTML- oder Text-Ansicht:
<meter value="0.78">78%</meter>Das Resultat zeigt sich dann so:
Vielleicht zwei hilfreiche HTML-Tags – bei Gelegenheit.
Die Werte können Sie natürlich auch mit dynamischen Feldern befüllen – etwa aus dem «Advanced Custom Fields»-Plugin.
Werbung
Werbung
