3e:null 3f:["$","title",null,{"children":"Introduction to HTML | Mubanga Nsofu | Observable"}] 45:[] 43:{"id":"8d123c39ec73dd78","slug":null,"title":"Introduction to HTML","thumbnail":"e25f525a6f2662e8e9c0a5eaedf1ec8bd0ce0f2dc3d54685672cf36fb1eab73b","access_level":"public","create_time":"$D2022-12-06T21:14:46.215Z","update_time":"$D2022-12-06T21:14:46.215Z","view_time":null,"first_public_time":"$D2022-12-06T21:14:46.215Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f466891b319ebe82","login":"mubangansofujr","name":"Mubanga Nsofu","avatar_url":"https://avatars-next.observableusercontent.com/4b005c4c9d6b341d61dc750c7789ff06fd47dd3bc7d44c0243fea63e28208c53","tier":"starter_2024","bio":"","following":false},"version":618,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"40936f732a34be3d","login":"mubangansofujr","name":"Mubanga Nsofu","avatar_url":"https://avatars-next.observableusercontent.com/4b005c4c9d6b341d61dc750c7789ff06fd47dd3bc7d44c0243fea63e28208c53","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"40936f732a34be3d","login":"mubangansofujr","name":"Mubanga Nsofu","avatar_url":"https://avatars-next.observableusercontent.com/4b005c4c9d6b341d61dc750c7789ff06fd47dd3bc7d44c0243fea63e28208c53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to HTML","cells":[{"id":0,"value":"md`# Introduction to HTML\n\nIn the [Introduction to Code](/@observablehq/introduction-to-code), we looked at cells that return data structures such as numbers, strings, arrays and objects. But what if we want text that includes some dynamic or reactive elements? For example, a sentence that displays a different random number each time it is clicked, or that shows the current time?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"Tasks such as this involve the Document Object Model, or DOM for short. The DOM represents the structure of a Web page in memory, and provides an interface to that Web page so that the Web page elements can be manipulated by a scripting language such as JavaScript (and thus by Observable).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"md `\n|||Note on the DOM |\n| --- |--- | --- |\n|||A full explanation of the Document Object Model is beyond the scope of this document. To learn more about the DOM and the DOM API, see the MDN pages [Introduction to the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) and [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model).|\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"For example, the following cell uses the W3C DOM API directly to create a *paragraph* element:","pinned":false,"hidden":false,"mode":"md","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(\"I am a \"));\n p.appendChild(document.createElement(\"i\")).appendChild(document.createTextNode(\"paragraph\"));\n p.appendChild(document.createTextNode(\" element, created using the W3C DOM API.\"));\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":613,"value":"You can see from this example that the W3C DOM API is quite verbose. Observable offers several alternatives to the DOM API when it comes to paragraph elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"**Creating elements using the HTML [tagged template literal](http://exploringjs.com/es6/ch_template-literals.html#_tagged-template-literals)**. This returns a DOM element, which is displayed as is:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"html`

I am a paragraph element, created using Observable's HTML tagged template literal!

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`**Creating elements with Markdown in a JavaScript cell**:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`I, too, am a *paragraph* element, created using Markdown in a JavaScript cell.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"**Creating elements using the Markdown [cell mode](https://observablehq.com/@observablehq/cell-modes)**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"I am a *paragraph* element created using the Markdown cell mode (note the different icon in the left margin of the shaded cell).","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`(Markdown supports a variety of styles and structural elements, such as lists and tables. See the [Markdown quick reference](https://observablehq.com/@observablehq/markdown-quick-reference) for more.) \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"## Writing Dynamic Expressions in Markdown and HTML\nCreating Markdown and HTML cells as shown earlier allows you to make the cells **dynamic**: you can embed expressions \\`\\${…}\\` that are not fixed but are evaluated when the cells are evaluated. For example, the following example shows a sentence that uses an embedded expression to call `Math.random()` to generate a random number each time the cell's Play button is clicked.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"My favorite number is ${Math.random() * 100 | 0}.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"A similar example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"Lee ate ${Math.random() * 100 | 0} doughnut(s) and now regrets it.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"md`And of course, the cells can be **reactive**, too! The \\`now\\` built-in from the Observable [standard library](/@observablehq/standard-library) is a reactive variable whose value is the current time. So, embedding a reference to \\`now\\` causes the Markdown to re-evaluate continuously:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`The current time is ${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":599,"value":"## Embedding Charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`Embedded expressions can also be DOM nodes, which means you can embed dynamic content, such as little charts in SVG or mathematical notation in LaTeX, within Markdown.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`I like Markdown for prose, but ${tex`\\KaTeX`} for math.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"md`A sparkline ${sparkline([0, 8, 3, 2, 6, 5, 1])} is a chart inline with prose.`","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":338,"value":"md`You can manipulate DOM generated from Markdown with JavaScript, to mix dynamic and static content. The text below cycles through D3’s rainbow scheme.`","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`Less-angry rainbows are the *best* rainbows.`;\n p.style.color = d3.interpolateRainbow(now / 3000);\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":591,"value":"## Creating Dynamic Content with Canvas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`Another common type of dynamic content is Canvas. The standard library method \\`DOM.context2d\\` returns a \\`CanvasRenderingContext2D\\` of the specified width and height (and automatic scaling for high-resolution displays). Draw to the context, and then return the canvas to display it.`","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`Or, use the HTML tagged template literal and an SVG element:`","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":588,"value":"## Using Helper Libraries to Create Dynamic Content","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md`Often you’ll use a helper library such as [D3](https://d3js.org) to generate dynamic content. Third-party libraries are covered in more detail in [Standard Library](https://observablehq.com/@observablehq/stdlib?collection=@observablehq/libraries) and [Recommended Libraries](https://observablehq.com/@observablehq/recommended-libraries?collection=@observablehq/libraries), but here’s a quick example generating colorful concentric circles in 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 // Create a square

I am a highlighted paragraph.