Opa: Up and Running

Chapter 5. Building the UI in HTML and CSS

In this chapter we will focus on building the user interface. The first step is to create the presentation layer in Opa.

HTML Markup

For presentation, Opa uses the modern web standards HTML5 and CSS3 [we will discuss these in more detail in Adding Style (CSS)]. You already saw a glimpse of how Opa deals with HTML in Writing and Running the Code and we will expand on that here.

Tags and Attributes

Recall from our earlier discussion that HTML can be included verbatim in Opa programs, and that it can be returned from functions as shown here:

function sample_page() {
  <header>
    <h3>HTML in Opa</h3>
  </header>
  <article>
    <div class="container">
      <p>Learning by examples.</p>
    </div>
  </article>
}

Now, there are few things to keep in mind when writing HTML snippets in Opa code:

• The name of the closing tag is optional, so <tag>...</tag> can be shortened to <tag>...</>.
• If the attribute consists of a single string with no special characters (i.e., it consists of only letters, digits, and an underscore) the quotes around it can be omitted.
• Double quotes (as in attr="...") are required; single quotes (as in attr='...') are not.

When you apply the first two rules in this list, you can rewrite the preceding snippet as follows:

function sample_page() {
  <header>
    <h3>HTML in Opa</>
  </>
  <article>
    <div class=container>
     <p>Learning by examples.</>
    </>
  </>
}

Opa also features web templates, known as markdown templates, in its standard library.

Inserts

We’ve discussed ...