Editing HTML Elements

Learning Objectives

• Edit style of Shiny App with HTML elements.
• Chapter 13 of Mastering Shiny.
• Shiny Cheatsheet.
• Optional Resources
  • Shiny Tutorial.
  • Shiny Examples.

HTML

• HTML (Hypertext Markup Language) is a coding language like markdown used to style web documents.

• When you look at a webpage, that is a browser interpreting HTML code.

• The user interface in all Shiny Apps is basically just a way to write HTML code using R.

  library(shiny)
  ui <- fluidPage(
      titlePanel("Hello"),
      textInput("text", "What Text?")
  )
  ui

  Hello

  What Text?

• Elements surounded by “<>” are called HTML “tags”. For example:

  • <strong>...</strong>: Makes text bold.

    <strong>Sesquipedalian</strong>

    Sesquipedalian

  • <u>...</u>: Makes text underlined.

    <u>Sesquipedalian</u>

    Sesquipedalian

  • <s>...</s>: Makes text strikeout.

    <s>Sesquipedalian</s>

    Sesquipedalian

  • <code>...</code>: Makes text monospaced.

    <code>Sesquipedalian</code>

    Sesquipedalian

  • <h1>...</h1>, <h2>...</h2>, <h3>...</h3>: Creates headings, subheadings, subsubheadings.

    <h3>Sesquipedalian</h3>

    Sesquipedalian

  • <p>...</p>: Makes paragraphs.

    <strong>Sesquipedalian</strong>

    Sesquipedalian

  • The following creates an itemized list:

    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    </ul>

    • Item 1
    • Item 2

  • <br></br>: Inserts a line break.

    Some text
    <br></br>
    More text

    Some text
    More text

  • <hr></hr>: Inserts a horizontal “rule” (line).

    <hr></hr>

    ---

  • <img></img>: Inserts images (see below).

  • <a>...</a>: The “anchor” tag. Creates hyperlinks (see below).

  • Tag arguments are called “attributes” and are placed after the tag name in the first <>. For example, for hyperlinks you need to give it the URL with the href attribute:

    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Click Me!</a>

    Click Me!

• Another example with images:

  <img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Ohio_State_Buckeyes_logo.svg" 
       height="100" 
       width="100">
  </img>

  

HTML in R

• When you load the shiny library, it will load a list of functions called tags.

• Each function in tags is an HTML tag. For example, to create an anchor tag use:

  tags$a("Click Me!", href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ")

  <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Click Me!</a>

  Click Me!

• Any named argument becomes an HTML attribute.

• Any unnamed argument is placed between the tags.

• You can put tags inside tags.

  tags$a(tags$h1("Click Me!"), "Now!",
         href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ")

  <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
    <h1>Click Me!</h1>
    Now!
  </a>

  Click Me!

  Now!

• Exercise: Create an itemized list using function elements from tags.

Using HTML in a Shiny App

• Just put these HTML elements inside the fluidPage() call.

  library(shiny)
  
  ui <- fluidPage(
    tags$h1("I am a title"),
    tags$a("I am a link", href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ")
  )
  
  server <- function(input, output, session) {
  
  }
  
  shinyApp(ui, server)

   

• Exercise: Use the img tag to insert the Ohio State logo into a Shiny App. The url can be found here:

  https://upload.wikimedia.org/wikipedia/commons/c/c1/Ohio_State_Buckeyes_logo.svg

• To add an image not from a webpage, add a “www” folder inside your Shiny app. Add all images into that folder. Reference to those images by name only (not by the path) in the img tag.

   

   

  library(shiny)
  
  ui <- fluidPage(
    tags$img(src = "osu.png")
  )
  
  server <- function(input, output, session) {
  
  }
  
  shinyApp(ui, server)