01-Baby Steps

Ottavia M. Epifania

YAML

The overall appearance and behavior of the document is specified in the YAML:

HTML default YAML

---
title: "Untitled"
format: html
editor: visual
---

PDF default YAML

---
title: "Untitled"
format: pdf
editor: visual
---

Source vs. Visual

• Editor
• Visual

YAML: Table of Contents (toc)

---
title: "My quarto file"
author: "Jane Doe"
date: today
format: 
  html:
    self-contained: true
    toc: true
    toc-title: My contents
    toc-location: left
editor: source
lang: it
---

self-contained: true is of the uttermost importance!!!

(Further details on the YAML later on)

Markdown formatting

Headings

# First level

## Second level

### Third level

#### Fourth level

##### Fifth level

##### Sixth level

Text Formatting

Markdown syntax: Font

*italics*, **bold**, **bold italics** 

Output

italics, bold, bold italics

Markdown syntax: Scripts

textsuperscirpt^2^, textunderscript~2~

Output

textsuperscirpt², textunderscript₂

Markdown syntax: In line code

`this is myinline code`

Output

this is myinline code

Links and images

<https://github.com/>

https://github.com/

My link is [here](https://github.com/)

My link is here

![This is an image](img/picture.jpg)

This is an image

Lists

* unordered list
  + sub-item 1
  + sub-item 2
    - sub-sub-item 1

1. ordered list
2. item 2
   i) sub-item 1
      A.  sub-sub-item 1

- [ ] First things first 1
- [ ] Second things second 2

• unordered list
  • sub-item 1
  • sub-item 2
    • sub-sub-item 1

1. ordered list
2. item 2
   1. sub-item 1
      1. sub-sub-item 1

• First things first 1
• Second things second 2

Math

In-line math:

This is an in-line equation $y = \beta_0 + \beta_1 X + \varepsilon$

This is an in-line equation \(y = \beta_0 + \beta_1 X + \varepsilon\)

Math math:

This is an  equation $$z = \dfrac{\bar{x} -\mu}{\sigma}$$

This is an equation \[z = \dfrac{\bar{x} -\mu}{\sigma}\]

Publish your HTML document (with GitHub)

GitHub pages

Navigate to your GitHub repository online:

It worked!

(take some time, be patient)

README.md

This file handles the generation of the website

It works with basic markdown syntax

• README.md
• Site appearance

Links

They create the index to the pages we want to display in our website

Warning

The links must link to the directory of the html file in the subfolder of the project!

Let’s say we want to create a link to my_file.html that is inside the files subfolder:

[My presentation](files/my_file.html)

Don’t forget to save the changes in the README.md file

commit + push

Don’t forget to push!

Check

Your turn!

Inside your R project for this school:

• Create a new HMTL quarto document that must contain:

  • 3 sections (level I heading), each with a subsection (level II heading)
  • Place a picture with a caption in one of the subsection
  • Place an unordered list

• Render the document in HTML

• Create the link to your newly created document in the README.md

• Commit & push the .qmd and .html of your newly created document

• Commit & push the .md and .htmlof the README file

Layout

By default, the HTML document is set to take all the space in the page

format: 
  html:
    page-layout: full

Custom layout with grid

The page layout is based on a 12-unit (or 12-column) grid system, which can be used to divide the space accordingly:

::: {.grid}

::: {.g-col-4}

First column, 4/12 of the toal width

:::

::: {.g-col-8}

Second column, 8/12 of the total width 

:::

:::

(Best for HTML pages)

Columns

• Code
• Output

:::: {.columns}


::: {.column width="50%"}

This is my first column!

:::

::: {.column width="50%"}

And this is the second column
:::

::::

This is my first column!

And this is the second column

(Best for HMTL presentation)

tabset: code

::: {.panel-tabset}

## Aim

Here I present the aim of the study 

## Methods

Here I present the methods used to pursue the aim

## Results

And here I present the results

:::

tabset: output

• Aim
• Methods
• Results

Here I present the aim of the study

Here I present the methods used to pursue the aim

And here I present the results

Document layout

• A document
• Code

format: 
  html: 
   toc: true
   toc-location: left
   grid:
    sidebar-width: 300px
    body-width: 900px
    margin-width: 300px
    gutter-width: 1.5rem

Margins

You can place anything in the margins of the documents!

:::{.column-margin}
I want this piscture displayed in the margin 


![](img/peacock.png)
:::

Your turn

From the previous document:

• In one of the sections, create a grid dividing the space in 3 intervals of different width
• Place a picture in each of the three intervals
• In a subsection:
• Create a panel tabset with 3 tabs (like Introduction, Methods, Results)
• Add a picture in the margin of the document