HTML basics for text formatting in TroveStar
Published: 2018-11-01 - By: Alain LM
Last updated on: 2020-07-18
Last updated on: 2020-07-18
HTML basics for text formatting in TroveStarThough 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 breaksThere 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>:
When displayed (not what you want):
Line 1. Line 2.
b) In Editor, with <br>:
Line 1.<br>Line 2.
When displayed (better):
c) In Editor, with 2 <br>:
When displayed (with one empty line between the 2 lines):
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 linksYou 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:
This is a link to <a href='https://en.wikipedia.org/wiki/Main_Page' target=_BLANK>Wikipedia</a>.
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 formattingIf 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.
ListsIt 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:
- Item 1
- Item 2
With the previous example, this would give:
- Item 1
- Item 2
Inserting an imageThis 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:
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">
Note that the width is in pixels.
HeadingsTo 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 tagsThere 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.