Intro to HTML — Part 1

  • 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?

A year and a half ago, I set some goals for myself to learn more about the coding languages used in Spotfire, and wow has that been fun and interesting.  Ultimately, I learned that the Spotfire GUI (menus, dialogs, etc) are good, but you can really (REALLY) open up the functionality of the application with code.  I recently showed a few users how I used HTML and CSS to beautify the Spotfire text areas.  I also explained how you could integrate JavaScript and IronPython.  They got it!  They could see where they wanted to go, and they asked me to put together a short tutorial to help them get started.

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.

Next, I can’t recommend W3Schools enough for learning HTML, CSS, and JavaScript.  A lot of the content in this post is from their site.  They have great free online material that is easy to understand, and you can work through it in small blocks of time.  Now that you are ready to get started, I have one caveat.  Most of what’s out there on HTML is meant for web developers building websites.  Spotfire is similar but not the same.  Just keep that in mind. Let’s get started!!

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

HTML Practice

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!

Guest Spotfire blogger residing in Whitefish, MT.  Working for SM Energy’s Advanced Analytics and Emerging Technology team!

5 thoughts on “Intro to HTML — Part 1

Leave a Comment

Your email address will not be published. Required fields are marked *