====== Formatting text with HTML ====== Insert HTML code anywhere in the questionnaire to format the text at that point. HTML (HyperText Markup Language) is the standard format for information on the Internet. Don't worry - you do not need to learn HTML in full to add text or an image to the questionnaire. However, understanding at least the basics is very helpful for applying simple formatting. **Tip:** If you initially find writing HTML code a little difficult, an online HTML editor such as [[https://html-online.com/editor/|HTML-Online.com]] can be helpful. HTML code contains, on the one hand, the actual content - for example, what you are reading here right now - and, on the other hand, abbreviations that describe how the information should appear. Formatting is achieved using so-called tags. In HTML, tags are always written inside angle brackets. In the following example, the tags are highlighted:

Hello world

How are you, world?

 Translated into ordinary language, the example simply means: * Write "Hello world" as a first-level (1) heading ("header"). * Below it, write the paragraph ("paragraph") "How are you, world?" The result would look like this:\\ {{scr.texts.example1.png}} In general, every HTML tag is closed. The

tag therefore marks the beginning of the paragraph, while the closing tag

marks its end. The only relevant exceptions here are the
and tags. These mark a line break ("break") and an image ("image"), respectively. **Tip:** The
tag is very helpful if the labels (verbal anchors) in a scale do not wrap optimally.

Here should be a
line break

 **Result of the HTML code above**\\ {{scr.texts.example2.png}} As the following example shows, tags can also include additional attributes. For example, the tag must specify which image it should display (src, "source") and which text (alt, "alternative") it should display if the image cannot be shown. Logo **Result of the example HTML above**\\ {{scr.texts.example3.png}} ===== The most important HTML tags ===== In addition to texts that you output using html(), you can also format question titles, explanations, and scale labels using HTML tags. Here is an overview of some important tags: ^ Tag ^ Meaning ^ Example ^ Result ^ | **

** | Paragraph | ''

Paragraph 1

Paragraph 2

'' | {{scr.texts.example.p.png}} | | **
** | Line break | ''this line will break
here'' | {{scr.texts.example.br.png}} | | **** | Emphasis (usually bold) | ''Text, nowemphasised'' | Text, now **emphasised** | | **** | Bold | ''Text, partially bold.'' | Text, partially **bold**. | | **** | Italic | ''Click on not at all.'' | Click on //not at all//. | | **** | Underlined | ''Do not click here!'' | Do __not__ click here! | | **** | Make text smaller | ''This is a sentence
\\ And this could be its explanation'' | {{scr.texts.example.small.png}} | | **

** | First-level heading | ''

A. Main part

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

** | Second-level heading | ''

A.1. Definition

'' | {{scr.texts.example.h2.png}} | | **** | Link to a website | ''%%SoSciSurvey%%'' | [[https://www.soscisurvey.de|SoSciSurvey]] | | **** | Text section to be formatted using CSS | ''%%This is red Text%%'' | {{scr.texts.example.span.png}} | | **
** | Text block to be formatted using CSS | ''%%
Text in a red box
%%'' | {{scr.texts.example.div.png}} | Tags are primarily used to mark up the content and structure of texts (e.g. headings and content) rather than for visual design. Like the
tag, the tag is an empty container that only becomes a design element through so-called CSS styles (Cascading Style Sheets). If required, [[http://de.selfhtml.org/|SelfHTML]] provides detailed information about these options. If you need coloured text, you only have to replace the colour code (in the example #FF0000, meaning: 255=FF red, 0 green, 0 blue) with the code of the desired colour. The colour calculator can help you with this. You can find it when editing a layout (under **Questionnaire Layout**). Even "standard" tags such as

or

do not have a fixed appearance. In SoSci Survey, the font or font size, for example, is defined centrally in the questionnaire using CSS. Depending on the layout, a heading may therefore appear larger in one case and smaller in another. **Example of emphasised text**

Demonstration of HTML-Tags

This paragraph contains a highlighted word.

This paragraph contains words in several colors: alight, medium and a darker green

This is a large word,

and a large, bold, red text.

Using div's, you can define the margins to the outside of the div (e.g. on the top of the div) and borders

Using padding, you can define the margins on the inside of the div (e.g. between the border and the text. Here: all around

 **Demonstration of the HTML code example above**\\ {{scr.texts.example4.png}} **Tip:** If a text in the questionnaire is formatted in bold by default, but you want it not to be bold in a particular instance, use ''%%Text%%''. If you never want the respective element to be bold, you should adjust the layout accordingly. ===== HTML entities ===== As described above, tags are marked using angle brackets. Sometimes, however, angle brackets are needed as part of the content itself. For this purpose, there are so-called HTML entities: < (less than, <) und > (greater than, >): ^ Example ^ Result ^ |

CE

| CE | |

C<D and C>E

| CE | Other HTML entities include & for the ampersand symbol (&) and " for the quotation mark ("). Other useful entities such as • (•) are listed in [[http://de.selfhtml.org/html/referenz/zeichen.htm#benannte_pfeile| SelfHTML]]. ===== Inserting links ===== With the HTML code ''%%Label%%'', you can insert a link (hyperlink) into a text. A link usually points... * to a website or * to a document (for example, a PDF) that is to be downloaded or opened. The link can either be * a complete Internet address (URL), normally beginning with ''https://'' * or the filename of a file that you have uploaded to the survey project. Only the label is displayed in the text, so ''%%SoSci Survey%%'', for example, becomes [[https://www.soscisurvey.de|SoSci Survey]]. Within the '''' tag, you can insert the attribute ''%%target="_blank"%%'', so that the link opens in a new browser tab. This is useful whenever you want respondents to be able to continue the interview. {{:de:create:fig.texts.hyperlink-html.png?nolink&800|Erstellen eines Links mittels Wiki-Notation}} An alternative to Wiki links are [[texts-wiki#inserting_links|Wiki Links]]. ==== Example: privacy policy ==== You have uploaded a file ''privacy-policy.pdf'' under **Image and Media Files** in your survey project and would like to link to this PDF in the welcome text. **Important:** The text must use the "HTML code" display mode. If you use the "simple text" display mode, please refer to [[texts-wiki#inserting_links|Wiki Links]]. Insert the link into the HTML text as follows. Details can be found in our privacy policy. **Important:** The filename must be written exactly as the file is named after uploading. Capitalisation must also be correct (including in the file extension ''.pdf'').