21.2 HTML

We are trying to produce

<body>
  <h1 id = 'pop_quiz'>Pop Quiz</h1>
  <ol>
    <li>What is the <b>derivative</b> of $f(x) = 1 + 2\cos(3\pi x + 4)$?</li>
    <ol>
      <li>$f'(x) = 6\pi\sin(3\pi x + 4)$</li>
      <li>$f'(x) = -6\pi\sin(3\pi x + 4)$</li>
      <li>$f'(x) = 24\pi\sin(3\pi x + 4)$</li>
      <li>$f'(x) = -24\pi\sin(3\pi x + 4)$</li>
    </ol>
  </ol>
  <img src = 'calculus_cat.png' width = '100' height = '100' />
</body>

using DSL

with_html(
  body(
    h1("Pop quiz!", id = "pop_quiz"),
    ol(
      li("What is the ", b("derivative"),  "of $f(x) = 1 + 2cos(3pi x + 4)$?"),
      ol(
        li("$f'(x) = 6pi*sin(3pi x + 4)$"),
        li("$f'(x) = -6pi*sin(3pi x + 4)$"),
        li("$f'(x) = 24pi*sin(3pi x + 4)$"),
        li("$f'(x) = -24pi*sin(3pi x + 4)$")
      )
    ),
    img(src = "images/translating/calculus_cat.png", width = 100, height = 100)
  )
)

In particular,

  • tags such as <b></b> have attributes
  • void tags such as <img />
  • special characters: &, <, and >
HTML verification

Pop Quiz

  1. What is the derivative of $f(x) = 1 + 2\cos(3\pi x + 4)$?
    1. $f'(x) = 6\pi\sin(3\pi x + 4)$
    2. $f'(x) = -6\pi\sin(3\pi x + 4)$
    3. $f'(x) = 24\pi\sin(3\pi x + 4)$
    4. $f'(x) = -24\pi\sin(3\pi x + 4)$