Quando criamos um arquivo Quarto que gera um output em .html, esse arquivo .html é interpretado pelo navegador (ex. Chrome), utilizando também os arquivos .css e .js
HTML (HyperText Markup Language - Linguagem de Marcação de Hipertexto): é uma linguagem de marcação, é usado para estruturar páginas da internet (websites).
CSS (Cascading Style Sheets - Folha de Estilo em Cascata): é usado para estilizar os elementos escritos no HTML.
Javascript: é uma linguagem de programação, permite que as páginas sejam dinâmicas.
HTML 🧱 🏗
HTML descreve a estrutura de uma página web.
HTML consiste em uma série de elementos. Estes elementos mostram para o navegador (o browser) como apresentar o conteúdo.
Um elemento em HTML consiste em uma tag inicial, algum conteúdo que será marcado, e a tag final (que é diferente da tag inicial por possuir a barra / )
<nomedatag>Conteúdo a ser marcado vai aqui...</nomedatag>
Elementos em HTML podem ter atributos de classe (class). As classes geralmente são usadas para referenciar um estilo.
<nomedatag class="nomedaclasse">
Conteúdo a ser marcado vai aqui...
</nomedatag>
Exemplo 🧱 🏗
Código em Markdown
Este é o curso de **Relatórios e visualização de dados**,
oferecido pela [Curso-R](https://curso-r.com/).
Código HTML
<p>
Este é o curso de <b>Relatórios e visualização de dados</b>,
oferecido pela <a href='https://curso-r.com/'>Curso-R</a>.
</p>
Como aparece
Este é o curso de Relatórios e visualização de dados, oferecido pela Curso-R.
CSS 🎨
CSS é uma sigla para Cascading Style Sheets (tradução literal: folha de estilo em cascada).
CSS descreve como os elementos em HTML serão apresentados.
Você pode criar estilos no seu arquivo .qmd, ou também salvar em um arquivo externo. As folhas de estilo são salvas em arquivos com a extensão .css.
Você pode criar um arquivo CSS e reaproveitar em diversos arquivos HTML.
Criar estilos no seu arquivo .Rmd:
Colocando o estilo dentro de uma tag html <style>
Criando um Chunk de código CSS
Exemplo de elementos
Para elementos, usamos a seguinte estrutura:
nomedoelemento { propriedade: valor da propriedade;}
Exemplo:
p {font-size: 20px;}
Exemplo de classe
Para classes, usamos a estrutura dos elementos, porém adicionando um ponto antes:
.nomedaclasse { propriedade: valor da propriedade;}
Exemplo:
.textogrande {font-size: 40px;}
Exemplo 1 🎨
Código HTML
<style>
.textorosa{
color: pink;
}
</style>
<p>
Este é o curso de
<b class="textorosa">Relatórios e visualização de dados</b>,
oferecido pela <a href='https://curso-r.com/'>Curso-R</a>.
</p>
]
Como aparece
Este é o curso de Relatórios e visualização de dados, oferecido pela Curso-R.
Exemplo 2 🎨
Código em Markdown
```{css}.textoroxo{ color: #6A0DAD;}```
Este é o curso de [Relatórios e visualização de dados]{.textoroxo},
oferecido pela [Curso-R](https://curso-r.com/).
Como aparece
Este é o curso de Relatórios e visualização de dados, oferecido pela Curso-R.
