Verschiedene HTML Elemente in DataLion [Artikel in Bearbeitung]

HTML Elemente

Ein Element in HTML beginnt und endet mit einem HTML Tag. Zwischen den Tags wird der Inhalt eingefügt.

z. B.: <tagname>Hier ist der Inhalt</tagname>

Das Element bezeichnet dabei den gesamten Abschnitt von dem Anfang des Tags bis zu dessen Ende. Innerhalb von Elementen können sich wiederum untergeordnete Elemente befinden.

z. B.:
<übergeordnetesElement>

<untergeordnetesElement>Hier ist Inhalt</untergeordnetesElement>

</übergeordnetesElement>

Überschriften

In HTML gibt es verschiedene Möglichkeiten Überschriften zuzuordnen. Typischerweise werden die Überschriften <h1> bis <h6> verwendet.

<h1> kennzeichnet hierbei die wichtigste Überschrift

<h6> kennzeichnet die unwichtigste Überschrift

Jede HTML Überschrift hat eine voreingestellte Größe, Sie können diese jedoch mit dem „style“ Attribut von CSS, siehe Beispiel weiter unten und dem CSS-Element „font-size“ anpassen.

Flexible Überschriften: funktioniert mit |*GFV*| im Titel.

Textblöcke

Textblöcke werden in HTML mit dem Tag <p> gekennzeichnet.

<p>Hier steht Ihr Textblock</p>

Absätze

Mit dem Tag <br> können Sie einen Absatz einfügen. Dies funktioniert wie folgt:

<p>Hier steht Ihr <br> Textblock </p>

Dies wird dann so angezeigt:

Hier steht Ihr 
Textblock

Der Tag <br> ist eine Ausnahme, da er nicht geschlossen werden muss.

Hintergründe

Es gibt verschiedene Möglichkeiten einen Hintergrund festzulegen.

Um eine Hintergrundfarbe festzulegen nutzen Sie das CSS property background-color und das Element value wird mit einem RGB Code oder Hex-Code festgelegt.

Bsp: <body style="background-color: #efefef;">

Hierbei ist <body> ein HTML Element, welches die gesamte Seite ansteuert und style das Codewort, welches den Weg für eine CSS Formatierung öffnet. Die CSS Formatierung findet dann zwischen den Anführungszeichen statt.

Um ein Hintergrundbild einzustellen nutzen Sie das CSS property background-image und das Element value wird dann mit der URL des Bildes festgelegt.

Bsp: <body style="background-image: url(‘https://datalion.net/bild.jpg’) ">

Textformatierungen

Texte lassen sich auch in HTML verschieden darstellen und formatieren. Dabei ähnelt der Aufbau der Formatierung dem der Hintergründe.

Der Grundaufbau ist wieder der folgende:

<tagname style="property:value; ">

Property und Value sind CSS-Elemente, welche unter dem Punkt CSS erläutert werden.

Farben: Mit dem CSS property color können Sie die Textfarbe festlegen.

Bsp.: <h1 style="color: #ee2f12; ">Hier steht Ihr Text</h1>

Ergebnis:

Hier steht Ihr Text

Schriftarten: Die zu den Schriftarten weisende CSS Property lautet font-family. Anstelle von value fügen Sie dann den Schriftnamen ein.

Bsp.: <h1 style="font-family:verdana; ">Hier steht Ihr Text</h1>

Textgröße: CSS property: font-size CSS value: prozentuale Angabe / Angabe in Pixeln

Bsp.: <h1 style="font-size:300%;">Hier steht Ihr Text</h1>

Bsp.: <h1 style="font-size:12px; ">Hier steht Ihr Text</h1>

Textausrichtung: CSS property: text-align CSS values: (center, left, right, justify)

Bsp.: <h1 style="text-align:center; ">Hier steht Ihr Text</h1>

Links einbetten

Links werden in HTML mit dem <a> Tag gekennzeichnet. Üblicherweise sieht eine Linkeinbettung so aus:

<a href="https://www.ihre-url.com">Hier steht Ihr Linktext</a>

Der Linktext kann wie jeder Text mit Farben, Textarten, Textgrößen und Ausrichtungen formatiert werden.

Bsp.: <a href="https://www.ihre-url.de" style="color: #ee2f12); font-weight:bold">Ihr Text</a>

Buttons

Buttons wurden in HTML mit folgendem Tag erstellt:

<button type="button">Ihr Text auf dem Knopf</button>

Beispiel-Code für einen Button mit Verlinkung:

<button type="button"><a href="URL">Ihr Text</a></button>

Formatierung der Custom Buttons

Diese Knöpfe können mit CSS formatiert werden. Dazu verwenden Sie das style-Attribut im HTML-Element für die Inline Formatierung eines spezifischen Buttons oder Sie nutzen den .button Selektor für eine generelle Formatierung der Buttons. Die Properties für den .button Selektor sind unter den wichtigen Properties aufgelistet.

Beispiel-Code für das style-Attribut in HTML-Element:

<button type="button"><a href="URL" style="color: white; font-weight:bold;">Ihr Text</a></button>

Beispiel für das CSS von button. Diese Anpassungen können Sie in den Projekteinstellungen im TAB Inhalt beim Unterpunkt „Benutzerdefinierte CSS Styles“ umsetzen.

button {

  background-color: #4CAF50;

  border: none;

  color: #ffffff;

  padding: 15px 32px;

  text-align: center;

  text-decoration: none;

  font-size: 16px;

}

Platzhalter für Dropdown-Filter im href-Argument der Custom Buttons

Zur URL im href-Argument des Custom Buttons können Platzhalter für Dropdownfilterwerte hinzugefügt werden. Somit können aktive Dropdown-Filter-Werte auch über die Navigation mit Custom Buttons auf ein anderes Dashboard übernommen werden.

  • %%gfv%% Platzhalter für Standard-Dropdown-Filter
  • %%bm_1%% Platzhalter für den Benchmark-Dropdown-Filter Nummer 1
  • %%bms_1%% Platzhalter für den Subbenchmark-Dropdown-Filter Nummer 1

Beispieldefinition des Buttons:

<button type="button"><a href="URL %%gfv%% %%bms_1%% %%bm_3%%">Buttontext</a></button>

Bitte beachten Sie: Benchmarkfilter (bm) und Benchmarksubfilter (bms) sind nach der Reihenfolge in der Dropdown-Definition eines Dashboards indiziert, beginnend bei 0 (z.B. bm_0, bm_1, bm_2, usw.). Alle Objekte {} in der Dropdown-Definition (auch die nicht-Benchmarkfilter-Objekte) sind Teil der Reihenfolge der Dropdowndefinition. 

Wenn Sie aktive bm- und bms-Filter über die Platzhalter-URL im Custom Button auf Ziel-Dashboards übernehmen möchten, müssen die Filter auf dem Ziel-Dashboard in der gleichen Reihenfolge definiert sein wie auf dem ursprünglichen Dashboard.