HTML basics for text formatting in TroveStar

HTML basics for text formatting in TroveStar

Though most fields in the TroveStar database are accommodating plain text, there are a few that require some formatting using the HTML syntax. This is the case for instance for the Specific Item Information field in the N scale model trains database. Besides, if you'd like to write a blog article for TroveStar, you will definitely to know a few things about HTML.
HTML stands for Hypertext Markup Language; it is one of the basic languages used on the Internet.

The bare minimum: line breaks

There is a tricky behavior that you may already have observed: your text is properly displayed in the editor, with paragraphs, separated by empty lines, but after you have saved, everything is displayed as a big block of text when you visualize the item! Don't panic, this is normal, as your text is interpreted in HTML and all the line breaks used on the editor are ignored.

You will need to explicitly indicate that you want a line break. To do so, you will need to add the following HTML tag: <br> (line break).

An example to see the difference:
a) In Editor, without <br>:
Line 1.
Line 2.
When displayed (not what you want):
Line 1. Line 2.

b) In Editor, with <br>:
Line 1.<br>Line 2.
When displayed (better):
Line 1.
Line 2.

c) In Editor, with 2 <br>:
Line 1.<br><br>
Line 2.
When displayed (with one empty line between the 2 lines):
Line 1.

Line 2.

Note that you can use <br> in most text fields, for example for Image captions or for Additional Marking.
You can write the text in one single line or multiple lines in the editor: remember only the <br> will count.

External references and links

You might want to add links to other websites that will provide more information on an item. You must add a link to Wikipedia or other reference websites if you have copied information from them (because this is the normal doing when one uses someone else's material).

You have probably noticed at the top of the editor the following statement:
For wikipedia links derived text, please include the following link at the bottom of your entry:
<a href='' target=_BLANK>From Wikipedia</a>

So as practical example:
In Editor:
This is a link to <a href='https://en.wikipedia.org/wiki/Main_Page' target=_BLANK>Wikipedia</a>.
When displayed:
This is a link to Wikipedia

With the statement always present in the editor, you just have to copy the template and paste it into your text, then add the link (after href=) and then change the text that will be displayed as an hyperlink (between the <a> and </a> tags).

Basic text formatting

If you want to enrich the presentation, here are some basic tags that you need to know:

<b> Bold: In editor: This is <b>bold</b>, as displayed: This is bold
<i> Italic: In editor: This is <i>italic</i>, as displayed: This is italic
<u> Underlined: In editor: This is <u>underlined</u>, as displayed: This is underlined

Note that the tags can be nested, for instance:
In editor: This is <b><i>bold italic</i></b>, as displayed: This is bold italic

An important note about end tags. As you have seen above, the syntax is most of the time <tag>text</tag>. The second tag with the slash is the end tag and it specifies to HTML that this is the end of the specific formatting. If you omit it, then check by yourself, you'll get very unwanted results (though not breaking anything). The only exception to the rule is the break line tag <br> that does not need an end tag.

Lists

It can be useful then you get a list of features for instance to show them as a bullet points list.

The syntax is as follows:
In Editor:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>etc...</li>
</ul>
When displayed:

• Item 1
• Item 2
• etc...

Note that if you want a numbered list, just replace <ul></ul> by <ol></ol>
With the previous example, this would give:

1. Item 1
2. Item 2
3. etc...

Inserting an image

This can be useful if you want to write a blog article, but in some cases you might want to use it in the Specific Item Information field as well.

The syntax is as follows: <img src="image URL">

As an example, display the TroveStar logo:
In editor:
<img src="https://www.trovestar.com/images/logo/logo/Medium/TroveStar-logo_color_MD.png">
When displayed:

You might want to reduce the image a bit if too large; to do so, you can add a width qualifier like below:
<img src="https://www.trovestar.com/images/logo/logo/Medium/TroveStar-logo_color_MD.png" width="100">
Which gives:
Note that the width is in pixels.

Headings

To be used only in blog articles. The tags for headings are in the form <hn> where n is the heading level, starting from 1 as highest level, down to 6. Don't forget the end tag </hn>. Heading lines will be formatted with an empty line before and after the heading, so you don't have to bother with break lines before or after a heading.

More tags

There are many other HTML tags, but with the ones described above you should have enough to perform basic formatting, while keeping a simple presentation in line with the rest of the TroveStar website.

To learn more on HTML, there are plenty of resource on the Internet; we can recommend w3schools.com that is providing good tutorials and can be used as a reference.