====== Texte formatieren mit HTML ====== Fügen Sie an einer beliebigen Stelle im Fragebogen HTML-Code ein, um den Text an dieser Stelle zu formatieren. HTML (HyperText Markup Language) ist das Standard-Format für Informationen im Internet. Keine Angst - um Text oder ein Bild in den Fragebogen einzubauen, müssen Sie HTML nicht vollständig erlernen. Aber zumindest die Grundzüge sind sehr hilfreich, um einfache Formatierungen vorzunehmen. **Tipp:** Wenn Sie sich mit dem Schreiben von HTML-Code zunächst ein wenig schwer tun, kann ein Online-HTML-Editor wie z.B. [[https://html-online.com/editor/|HTML-Online.com]] hilfreich sein. HTML-Code beinhaltet einerseits die eigentlichen Inhalte - zum Beispiel das was Sie hier gerade lesen - zum anderen Kürzel, die beschreiben, wie die Informationen aussehen sollen. Die Formatierung wird mit so genannten Tags ("Täg" gesprochen) erreicht. Tags werden in HTML immer in spitzen Klammern notiert. Im folgenden Beispiel sind die Tags hervorgehoben:

Hallo Welt

Wie geht es dir, Welt?

 In gewöhnliche Sprache übersetzt, steht im Beispiel nichts anderes als: * Schreibe "Hallo Welt" und zwar als Überschrift ("header") ersten Grades (1). * Schreibe darunter den Absatz ("paragraph") "Wie geht es dir, Welt?" Das Ergebnis würde so aussehen:\\ {{scr.texts.example1.png}} Im Allgemeinen wird jedes HTML-Tag abgeschlossen. Das Tag

markiert also den Anfang des Absatzes, das schließende Tag

markiert dessen Ende. Die einzige hier relevanten Ausnahmen sind die Tags
und . Diese markiert einen Zeilenumbruch ("break") bzw. ein Bild ("image"). **Tipp:** Das
-Tag ist sehr hilfreich, wenn die Beschriftungen (verbale Verankerungen) in einer Skala nicht optimal umbrechen.

Trifft gar
nicht zu

 **Ergebnis des obigen HTML-Code**\\ {{scr.texts.example2.png}} Wie man im folgenden Beispiel sieht, können Tags auch weitere Attribute beinhalten. Dem -Tag muss man z.B. sagen, welches Bild es zeigen soll (src, "source") und welchen Text (alt, "alternative") es anzeigen soll, wenn das Bild nicht angezeigt werden kann. Logo **Ergebnis des obigen Beispiel-HTML**\\ {{scr.texts.example3.png}} ===== Die wichtigsten HTML-Tags ===== Neben Texten, die Sie mit html() ausgeben, können Sie auch Frage-Titel, Erklärungen und Beschriftungen von Skalen mit HTML-Tags formatieren. Hier eine Aufstellung einiger wichtiger Tags: ^ Tag ^ Bedeutung ^ Beispiel ^ Ergebnis ^ | **

** | Absatz | ''

Absatz 1

Absatz 2

'' | {{scr.texts.example.p.png}} | | **
** | Umbruch ("break") | ''stimme ich
voll zu'' | {{scr.texts.example.br.png}} | | **** | hervorgehoben (normalerweise fett) | ''Text, nun hervorgehoben'' | Text, nun **hervorgehoben** | | **** | fett ("bold") | ''Text, teilweise fett.'' | Text, teilweise **fett**. | | **** | kursiv ("italic") | ''Klicken Sie auf gar nicht.'' | Klicken Sie auf //gar nicht//. | | **** | unterstrichen ("underlined") | ''Klicken Sie nicht hier!'' | Klicken Sie __nicht__ hier! | | **** | Text kleiner setzen | ''Dies ist ein Wort
\\ Und dies die Erläuterung dazu'' | {{scr.texts.example.small.png}} | | **

** | Überschrift ersten Grades | ''

A. Hauptteil

'' | {{scr.texts.example.h1.png}} | | **

** | Überschrift zweiten Grades | ''

A.1. Definition

'' | {{scr.texts.example.h2.png}} | | **** | Link zu einer Website | ''%%SoSciSurvey%%'' | [[https://www.soscisurvey.de|SoSciSurvey]] | | **** | Textabschnitt, der mit CSS zu formatieren ist | ''%%Dies ist roter Text%%'' | {{scr.texts.example.span.png}} | | **
** | Textblock, der mit CSS zu formatieren ist | ''%%
Text im roten Kasten
%%'' | {{scr.texts.example.div.png}} | Tags dienen eher der inhaltlichen Auszeichnung von Texten (z.B. in Überschriften und Inhalt) und weniger der Gestaltung. Das -Tag ist wie auch das
-Tag ein leerer Container, der erst durch so genannte CSS-Styles (Cascading Style Sheets) zum Gestaltungselement werden kann. Bei Bedarf informiert [[http://de.selfhtml.org/|SelfHTML]] ausführlich über solche Möglichkeiten. Falls Sie farbigen Text benötigen, müssen Sie den den Farb-Code (im Beispiel #FF0000, bedeutet: 255=FF rot, 0 grün, 0 blau) lediglich durch den Code der gewünschten Farbe ersetzen. Dabei kann Ihnen der Farb-Rechner helfen, den Sie finden, wenn Sie ein Layout (unter **Fragebogen-Layouts**) bearbeiten. Auch "normale" Tags wie

oder

haben kein festes Erscheinungsbild. Die Schriftart oder -größe wird in SoSci Survey z.B. zentral durch ein CSS im Fragebogen festgelegt. Je nach Layout kann eine Überschrift also einmal größer einmal kleiner ausfallen. **Beispiel für hervorgehobenen Text**

Demonstration von HTML-Tags

In diesem Absatz wird ein Wort hervorgehoben.

Hier je eines hell- mittel- und dunkelgrün geschrieben

Hier ist ein großes Wort,

und ein großer, fetter, roter Text

Mit DIVs lassen sich auch Abstände (z.B. oben) und Rahmen bauen.

Mit padding kann man dann Innenabstände (z.B. überall) definieren.

 **Demonstration des obigen HTML-Code-Beispiels**\\ {{scr.texts.example4.png}} **Tipp:** Wenn ein Text im Fragebogen standardmäßig fett formatiert wird - Sie den Text aber einmalig nicht fett wünschen, so hilft ''%%Text%%''. Falls Sie das entsprechende Element nie fett haben möchten, so sollten Sie das Layout entsprechend ändern. ===== HTML-Entitäten ===== Wie oben beschrieben, werden Tags durch spitze Klammern markiert. Manchmal benötigt man aber spitze Klammern als Inhalt: Dafür gibt es die sog. HTML-Entitäten < (less than, kleiner gleich, <) und > (greater than, größer als, >): ^ Beispiel ^ Ergebnis ^ |

CE

| CE | |

C<D und C>E

| CE | Weitere HTML-Entitäten sind & (ampersand) für das kaufmännische Und (&) sowie " (quotation mark) für das Anführungszeichen ("). Weitere praktische Entitäten wie • (•) sind in [[http://de.selfhtml.org/html/referenz/zeichen.htm#benannte_pfeile| SelfHTML]] gelistet. ===== Links einfügen ===== Mit dem HTML-Code ''%%Beschriftung%%'' fügen Sie einen Link (Hyperlink, Verknüpfung) in einem Text ein. Ein Link verweist meist... * zu einer Internetseite oder * auf ein Dokument (zum Beispiel ein PDF), das heruntergeladen oder geöffnet werden soll. Der Link kann entweder * eine vollstände Internet-Adresse (URL) sein, beginnend normalerweise mit ''https://'' * oder der Dateiname einer Datei, die Sie in dem Befragungsprojekt hochgeladen haben. Im Text wird nur die Beschriftung angezeigt, also um Beispiel [[#links_einfuegen|Beschriftung]]. Sie können innerhalb des ''''-Tags das Attribut ''%%target="_blank"%%'' einfügen, damit der Link in einem neuen Browser-Tab geöffnet wird. Dies ist immer dann sinnvoll, wenn Sie möchten, dass die Befragten das Interview fortführen können. {{:de:create:fig.texts.hyperlink-html.png?nolink&800|Erstellen eines Links mittels Wiki-Notation}} Eine Alternative zu Wiki-Links sind [[texts-wiki#links_einfuegen|Wiki-Links]]. ==== Beispiel: Datenschutzerklärung ==== Sie haben eine Datei ''Datenschutzerklaerung.pdf'' unter **Bilder und Mediendateien** in Ihrem Befragungsprojekt hochgeladen und möchten dieses PDF in dem Begrüßungstext verlinken. **Wichtig:** Der Text muss die Darstellung "HTML-Code" verwenden. Falls Sie die Darstellung "Einfacher Text" verwenden, sehen Sie sich bitte [[texts-wiki#links_einfuegen|Wiki-Links]] an. Fügen Sie in dem HTML-Text den Link wir folgt ein. Details finden Sie in unserer Datenschutzerklärung. **Wichtig:** Der Dateiname muss exakt so geschrieben sein, wie die Datei nach dem Hochladen heißt. Auch die Groß- und Kleinschreibung (auch bei der Dateinamenerweiterung ''.pdf'') muss korrekt sein.