ETC5523: Communicating with Data

Tutorial 7

Author

Michael Lydeamore

Published

1 July 2001

🎯 Objectives

  • interpret and apply HTML/CSS to customise the look of web documents
  • modify the look of HTML documents produced by R Markdown

  1. You should do 2A as much as possible before the tutorial.

  2. Download tutorial-07-supp.qmd.

  3. Install R-package

remotes::install_github("joachim-gassen/tidycovid19")

🛠️ Exercise 1

HTML/CSS basics

Go through the:

and the exercises therein. Note: you do not need to click on the “Next >” button as that progresses to the next tutorial. We’ve selected the 10 most important tutorials from the HTML and CSS sections. If time permits, feel free to go through other tutorials.

🛠️ Exercise 2

Test your knowledge in HTML/CSS

This quiz is not assessed, it is only for your own learning.

  1. What does HTML stand for?
  2. Who governs the standards for CSS?
  3. Which is the correct HTML element for the largest heading?
  4. Which of the following is the correct HTML for adding a background color?
  5. What is the correct HTML for creating a hyperlink?
  6. Inline elements are normally displayed without starting a new line.
  7. How can you make a bulleted list?
  8. What is the correct HTML for making a checkbox?
  9. What is the correct HTML for making a drop-down list?
  10. Which of the following is the correct HTML for inserting an image?
  11. An <iframe> is used to display a web page within a web page
  12. HTML comments start with <!-- and end with -->
  13. Which HTML element defines navigation links?
  14. Which HTML element is used to specify a header for a document or section?
  15. What does CSS stand for?
  16. What is the correct HTML for referring to an external style sheet?
  17. Which HTML tag is used to define an internal stylesheet?
  18. Which HTML attribute is used to define inline styles?
  19. Which one of the following is correct CSS syntax?
  20. How do you insert a comment in a CSS file?
  21. Which property is used to change the background color?
  22. How do you add a background color for all <h1> elements?
  23. Which CSS property is used to change the text color of an element?
  24. Which CSS property controls the text size?
  25. What is the correct CSS syntax for making all the

    elements bold?

  26. How do you select an element with id ‘demo’?
  27. How do you select elements with class name ‘test’?
  28. How do you select all p elements inside a div element?
  29. Which of the following would be used to create an ID called header which has a width of 750px, a height of 30px and the color of the text is black?

🛠️ Exercise 3

Modify the look of your qmd HTML documents

  1. Open tutorial-07-supp.qmd and render. Inspect the HTML output.
  2. Modify the qmd file that when you knit, the HTML output looks like below: