Chapter 8 R Markdown HTML Handouts

Do you still remeber the first class when we moved online (probably in Zoom) that you enthusiasticly demonstrated a super cool animated video to your students but frustrated to see that for five minutes no one seemed to follow, and it turned out the window you shared with your students was a PDF file so that the animated show was all exclusive to yourself?

Well, the problem can be remediated if all the countable windows (PDF, animations, videos, apps, websites, etc.) that we need to manage are all in the same place, a dynamic document that houses many things that we need.

A little very basic knowledge of HTML will be sufficient.

  • All tags come in pairs (just like we always do \begin{ } and \end{ } in LaTex), e.g.,

    • <style> and </style>
    • <div> and </div>
    • <iframe> and </iframe>
  • As the name suggested, anything inside <style> and </style> are decorations. We can define an object in there (e.g., .video-container. Note there is a dot in the front of the words6) and then initiate the object by calling <div class="video-container">, put in contents, and wrap it up by calling </div>.

  • iframe stands for inline frame. We can use it as a frame to hang up (i.e., display) files, pictures, web pages, etc.

  • Any code between /* and */ are comments and thus has no effect on the output


  1. However, The definition of iframe inside the style tags does not need a dot because we directly call the iframe by its own tags.↩︎