HTML Elemente
Ein Element in HTML beginnt und endet mit einem HTML Tag. Zwischen den Tags wird der Inhalt eingefügt.
z. B.: Hier ist der Inhalt
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.:
Hier ist Inhalt
Überschriften
In HTML gibt es verschiedene Möglichkeiten Überschriften zuzuordnen. Typischerweise werden die Überschriften
bis verwendet.
kennzeichnet hierbei die wichtigste Überschrift
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
gekennzeichnet.
Hier steht Ihr Textblock
Absätze
Mit dem Tag
können Sie einen Absatz einfügen. Dies funktioniert wie folgt:
Hier steht Ihr
Textblock
Dies wird dann so angezeigt:
Hier steht Ihr
Textblock
Der Tag
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:
Hierbei ist 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:
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:
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.:Hier steht Ihr Text
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.:Hier steht Ihr Text
Textgröße: CSS property: font-size CSS value: prozentuale Angabe / Angabe in Pixeln
Bsp.:Hier steht Ihr Text
Bsp.:Hier steht Ihr Text
Textausrichtung: CSS property: text-align CSS values: (center, left, right, justify)
Bsp.:Hier steht Ihr Text
Links einbetten
Links werden in HTML mit dem Tag gekennzeichnet. Üblicherweise sieht eine Linkeinbettung so aus:
Hier steht Ihr Linktext
Der Linktext kann wie jeder Text mit Farben, Textarten, Textgrößen und Ausrichtungen formatiert werden.
Bsp.: Ihr Text
Buttons
Buttons wurden in HTML mit folgendem Tag erstellt:
Beispiel-Code für einen Button mit Verlinkung:
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:
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:
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.