HTML Containers and Style Attributes – Part 4

Welcome to part 4 of my HTML series!  This week, we are going to build upon what we know by discussing HTML containers.  I will also elaborate on the use of the style attribute inside HTML tags, which is where I left off last week.  These two subjects go together nicely, as you’ll see how different containers apply formatting and style differently.

If you need a review, here are links to the other parts of the series — Part 1 Tags, Part 2 Attributes, Part 3 HTML & CSS.  I’ll kick off this week by explaining the different types of HTML containers.  It’s simple, there are only 2 types to worry about.

HTML Containers — Block versus inline

When building web pages, a developer will divide the page into sections using containers.  The containers will then have content placed into them, and CSS is used to format and style the container.  That’s the quick and dirty explanation anyway.

HTML uses two types of containers — block and inline.  VSchool Web Development explains this really well by saying, “Block elements are those that take up the full width available on a web page, effectively blocking out any other elements from sitting next to it on the left or right. Inline elements are those who only take up as much width as is needed to display the contents of the element, thereby allowing other elements to be in line with the inline element.”

As a Spotfire developer, simply think of the Text Area as a web page.  Thus, block elements will take up the full width of the Text Area.  Inline elements only take up as much width as needed to display your text or other elements.

Examples of block elements you will use in Spotfire:

  • Paragraphs <p>
  • Headers <h1> thru <h6>
  • Divisions <div>
  • Lists and list items <ol>, <ul>, <li>

If you have been following the series, you should already have some experience working with <p> and <h1>-<h6>.  Lists (<ol> and <ul>) will be covered next week.  If you aren’t familiar with <div>, don’t worry, examples will be shown below.

Examples of inline elements you will use in Spotfire:

  • Spans <span>
  • Images <img>

Now that you understand the difference between block and inline, it would make sense to talk about when to use block versus inline, but that would make this post drag on a bit too long, so I’ll simply direct you to this link for more information on that subject.

Now, back to Spotfire.  Here is an example of what these containers look like in Spotfire.  Notice the use of background color and how far the color extends for each type of container.

HTML Containers

 

As you can see, <span> and <img> do not take up the full width of the Text Area, but <p>, <h1>, and <div> do.  This stands out after applying background color.

Style Attributes

Now that you understand how different containers work, let’s go back to the style attribute.  The style attribute can be used to format an individual tag OR all of the contents of a container.  As a reminder, the syntax uses a property/ value pair separated by a colon.  Multiple property/value pairs can be used inside a single tag.  Simply separate them with a semicolon.  Don’t forget to wrap the property/value pairs in quotes.  Lastly, just a small warning, know that not everything you find on the internet will work in Spotfire.

HTML containers

Common properties to test

  • background-color
  • color
  • text-align
  • padding
  • margin
  • border
  • height, width
  • display
  • float
  • align

To make this a little easier, I have created a free Spotfire template with examples of everything in the list above.  Download it and review the examples provided.  This is by no means an exhaustive list of everything you can do with style attributes, but it will certainly cover many of the common tasks performed in the Text Area.  That wraps up this week’s post.  Next week, I’ll explain how to create ordered and unordered (bulleted) lists in HTML.

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

2 thoughts on “HTML Containers and Style Attributes – Part 4

Leave a Comment

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