Yihui said he wasn’t going to use slides, but do some live-coding. I decided to take some notes here and commit them to the day 0 repo so they would be available.
Usually, I would make an html file using SublimeText2, but Yihui showed a way to use an R function to create and open a new HTML document!
file.edit("test.html")
You can serve the file using the servr
package.
servr::httw()
If you navigate to test.html
in your Viewer, you can add code to the file, save, and see it immediately reflected in the served version.
We started with a text file, which didn’t have any tags. But now we’re going to start making it more like a real HTML file.
We’re adding HTML tags into index.html
. RStudio actually does tag matching! So cool.
Almost every time you start a tag, like <html>
, you need to close it with a slash version, </html>
. This is not true for <src>
, though.
Greg Wilson has a quote, “…and that ninety percent of magic consists of knowing one extra thing.”
One magic thing is to right-click on any web page and select “View Source.”
You can also right-click on an element and select “Inspect” to see how any element on a page has been generated.
You can style globally, using css. This doesn’t need to be in a separate file, it can just be between <style>
tags in the <head>
of your document. For example, we added the styling for p
, which works globally.
Another way to style things is with classes. If you have something set for a tag and something for a class, you get both.
But, you can also override styles with other styles. For example, the id rule will override the rule on p. css has a heirarchical structure. You can define rules based on the order of elements on the page. div > p
means a paragraph that is a direct child of div. With a space, it can be any descendent in the tree. div p
could mean a paragraph that is a child, grandchild, etc. of the div
Yihui inspected an element in his browser (image of Amanda), and edited the css in the Styles panel.