2c:null 2d:["$","title",null,{"children":"Introdução ao HTML | Radamés Ajna | Observable"}] 32:[] 30:{"id":"e3f4caa087d43b05","slug":"introducao-ao-html","title":"Introdução ao HTML","thumbnail":"6d2d04c939664ff36724ebb7493c3c74650c852db0062bf783e9cf4605b35e1c","access_level":"public","create_time":"$D2020-08-12T19:34:00.418Z","update_time":"$D2021-03-15T18:30:35.976Z","view_time":null,"first_public_time":"$D2020-08-30T07:05:43.868Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":"starter_2024","bio":"Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations."},"version":737,"publish_version":737,"role":null,"authored":false,"authors":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null,"bio":"Data visualization enthusiast. Creative technologist. Open for collaborations."}],"members":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null,"role":"editor"}],"comments":[{"id":"fe65313b7c31c506","reply_to_id":null,"content":"Usei","create_time":"$D2021-03-15T14:08:00.609Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}},{"id":"e23e465ce59269fc","reply_to_id":"fe65313b7c31c506","content":"oi Claudio obrigado pelas correções! 🙏","create_time":"$D2021-03-15T17:41:25.846Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"4f031a62e4e2db2a","slug":"documentacao-em-portugues","title":"Documentação em Português","owner":{"id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna"}},"type":"notebook","body":{"titling":"auto","title":"Introdução ao HTML","cells":[{"id":0,"value":"md`# Introdução ao HTML\n\nNo tutorial [introdução ao código](/@robstelling/introducao-ao-codigo), nós olhamos para células que retornam estruturas de dados como números, strings, arrays e objetos. Mas e se quisermos uma retornar uma visualização interativa? Ou apenas algum texto?\n\nSe uma célula retorna um elemento DOM, esse elemento DOM então é exibido.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"html`

Por exemplo, eu usei um elemento parágrafo!

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`Ou usando a API W3C diretamente (você não precisa fazer assim, é muito verboso):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"{\n const p = document.createElement(\"p\");\n p.appendChild(document.createTextNode(\"Eu também sou um elemento \"));\n p.appendChild(document.createElement(\"i\")).appendChild(\n document.createTextNode(\"parágrafo\")\n );\n p.appendChild(document.createTextNode(\"!\"));\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`Muito melhor, você pode escrever em Markdown:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`Eu, tabém sou um elemento *parágrafo*.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`\n\nMarkdown suporta uma variedade de estilos e elementos estruturais, como listas e tabelas. Veja mais no [guia Markdown do GitHub](https://help.github.com/articles/basic-writing-and-formatting-syntax/). \n\n\nUma vez que todas as células no Observable são JavaScript — uma célula “Markdown” é somente uma célula JavaScript com a funcionalidade Markdown [tagged template literal](http://exploringjs.com/es6/ch_template-literals.html#_tagged-template-literals) — Células Markdown e HTML pode ser dinâmicas: você pode colocar expressões \\`\\${…}\\` dentro de template literals. Por exemplo, o número favorito abaixo é gerado aleatoriamente.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"md`Meu número favorito é ${(Math.random() * 100) | 0}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`Expressões embutidas também podem ser elementos DOM. Isso permite que você incorpore conteúdo dinâmico dentro do Markdown, como pequenos gráficos em SVG ou notação matemática em LaTeX.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`Eu gosto de Markdown para prosa, mas ${tex`\\KaTeX`} para matemática.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"md`Um sparkline ${sparkline([0, 8, 3, 2, 6, 5, 1])} é um gráfico em linha com prosa.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"function sparkline(values, width = 64, height = 17) {\n const x = d3.scaleLinear().domain([0, values.length - 1]).range([0.5, width - 0.5]);\n const y = d3.scaleLinear().domain(d3.extent(values)).range([height - 0.5, 0.5]);\n const context = DOM.context2d(width, height);\n const line = d3.line().x((d, i) => x(i)).y(y).context(context);\n context.beginPath(), line(values), context.stroke();\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"md`E claro, Markdown também pode ser reativo! \\`now\\` é uma variável reativa built-in da [biblioteca padrão](/@observablehq/standard-library) do Observable cujo valor é a hora atual. Desta maneira, embutindo uma referência para \\`now\\` faz com a célula Markdown seja recalculada continuamente:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`A hora atual é ${new Date(now).toLocaleTimeString()}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`\n\nVocê pode manipular o DOM gerado a partir do Markdown com JavaScript, por exemplo, misturar conteúdo dinâmico e estático. O texto abaixo percorre o esquema de arco-íris do D3.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"{\n const p = md`Arco-íris menos zangados são os *melhores* arco-íris.`;\n p.style.color = d3.interpolateRainbow(now / 1000);\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`\nOutro tipo comum de conteúdo dinâmico é o Canvas. O método da biblioteca padrão DOM.context2d retorna um CanvasRenderingContext2D da largura e altura especificadas nos parâmetros (e automáticamente re-escala para monitores de alta resolução). Desenhe usando o contexto e retorne o canvas para exibir no notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"{\n const context = DOM.context2d(128, 128);\n for (let radius = 8; radius < 128; radius += 8) {\n context.beginPath();\n context.arc(0, 0, radius, 0, 2 * Math.PI);\n context.stroke();\n }\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"md`Ou como SVG:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md`\nMuitas vezes você utilizará um helper de uma biblioteca como [D3](https://d3js.org) para gerar o conteúdo dinâmico. Vamos abordar bibliotecas third-party em detalhes mais tarde na introdução, mas aqui vai um exemplo rápido gerando círculos coloridos concêntricos em SVG.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"{\n // Cria um quadrado

Eu sou um parágrafo .