- Would you like to learn HTML to improve Spotfire’s text areas?
- Are you unsure how to get started?
- Would you like to know a few basics before devoting more time to it?
Now, this is a big and meaty subject. To keep it simple, we started with a 1 hr tutorial on getting started with HTML, and that is what I want to share in a series of posts. I’m not sure how many posts it will work out to. I’m just going to break it down into a few reasonably sized chunks.
Context to Get Started
Now, we are going to talk HTML, but before we do that, I highly recommend checking out this blog post on Unscrambling the Text Area. It explains which languages can be used in the Text Area and when to use them. Even if you are only starting with HTML, it makes sense to have this context. HTML is a good language to start with because it is so quick and easy to learn.
If you don’t have time for that, here is a quick and dirty version.
Second, in order to work with HTML in Spotfire, HTML sanitation needs to be turned off. It is turned on by default in Spotfire, and an administrator will need to change this. If HTML sanitation is turned on, you won’t be able to accomplish much. Check out this post for more info.
Third, when editing Text Areas, most users right-click and select Edit Text Area. From this point forward, don’t use that option. You will use Edit HTML. Edit HTML has the same functionality, as well as the ability to use Ctrl F to find and replace, which isn’t an option in Edit Text Area. It will be challenging at first, but you’ll fly thru it in no time as skills develop.
HTML Elements & Tags
HTML (Hyper text markup language) is written with elements that usually consist of a start tag and an end tag, with content in between. In the example below, the content is “Hello World”, and it is framed between the tags <p> and </p>. All tags are wrapped with <>. The end tag has a /.
Here’s what you need to know about tags.
- Text case does not matter. Write in upper or lower case. I prefer lower case. Don’t we all hate reading upper case?
- HTML elements usually consist of a start tag and end tag. There are a handful of tags that don’t have end tags like <br> and <hr>, and in some cases not using the end tag doesn’t have an impact. However, good coders use end tags!
Next, a good way to learn about tags is to use the GUI in the Text Area (Edit Text Area), and then open the Text Area using Edit HTML to see the resulting code.
In the example, I used Edit Text Area to enter a header, change the font, change the color, add some blank lines, and then enter a list of items. The GUI translated that into the following tags.
- <p> — denotes a line in the Text Area. <p> and </p> start and end distinct lines or blocks really since the content will wrap.
- <font> — changes font size, style, and color.
- <strong> — creates bold the text
- <u> — creates underlined text
- <ol> — used to create an ordered (numbered) list
- <li> — used with <ol> to create a list
In the next post, I will cover tag attributes, which is what you see above with color and size in the <font> tag. However, before we go there, get comfortable and familiar with typing the start and end tags. Open up a Text Area, and experiment with using the tags shown below. Note, each tag shown has start and end tags.
- <h1> thru <h6> — Headers
- <b> – Bold text
- <strong> – Important text (looks similar to bold)
- <i> – Italic text
- <em> – Emphasized text (looks similar to italic)
- <small> – Small text
- <mark> – Highlight text
- <sub> – Subscript text
- <sup> – Superscript text
One of the first things you might notice in this type of practice is how words do (or do not) move from line to line. See the two screenshots below, and also incorporate the <p> tags into your practice. Also, just for funsies, give <br> and <hr> a try as well for line and spacing breaks.
I’m going to stop here to keep it short and sweet. In the next post, I’ll cover tag attributes. Then, the series will move on to bulleted lists. After that, I’ll touch on CSS and why we would use CSS instead of the <font> tag that the GUI defaults to!