2e:null 2f:["$","title",null,{"children":"Week 1a - Introduction to HTML and Javascript | Carlos Sandoval Olascoaga | Observable"}] 34:T47c,md` ## Attributes, Classes, and IDs Tags are specified and defined using attributes, classes, and IDs. These attributes, classes, and IDs allow you to identify specific elements, modify individual elements and groups of elements, and set the characteristics of the elements. - *Attributes* specify properties of elements. Elements can have multiple attributes. For example, a link (\`\`, remember?) will can include an \`href = ""\` that specifies the link destination alongside the attribute \`target = "_blank"\` which instructs the web browser to open the link in a new tab. - *Class* is a special attribute that identifies a group of elements that operate similarly or work in the same fashion. These are specified using the \`class = "classname"\`. The advantage of this is that you can efficiently specify the same style or behavior for many elements. - *ID* is an attribute that identifies unique features. In other words: if you specify \`id = "specialthing"\`, there should be no other elements with the id specialthing. Each ID should be unique. This allows you to specify operations and styles that are unique to that feature. `35:[] 32:{"id":"0b349128f2d09523","slug":"4-182-week-1a-introduction-to-html-and-javascript","title":"Week 1a - Introduction to HTML and Javascript","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-02-02T23:28:31.754Z","update_time":"$D2023-02-13T22:41:29.041Z","view_time":null,"first_public_time":"$D2023-02-02T23:28:31.754Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"7be24cbfb3203dab","login":"cesandoval","name":"Carlos Sandoval Olascoaga","avatar_url":"https://avatars-next.observableusercontent.com/932dec7ee5c2e52477e2a80482b05fdab063507b7c3029a5f6bc1ff0e03bbc36","tier":"starter_2024"},"version":2672,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7750258d506a87a9","login":"cesandoval","name":"Carlos Sandoval Olascoaga","avatar_url":"https://avatars-next.observableusercontent.com/932dec7ee5c2e52477e2a80482b05fdab063507b7c3029a5f6bc1ff0e03bbc36","tier":null}],"members":[{"type":"individual","id":"7750258d506a87a9","login":"cesandoval","name":"Carlos Sandoval Olascoaga","avatar_url":"https://avatars-next.observableusercontent.com/932dec7ee5c2e52477e2a80482b05fdab063507b7c3029a5f6bc1ff0e03bbc36","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"baee5411dbf92868","slug":"4-182-drawing-together","title":"4.182 Drawing Together","owner":{"id":"7be24cbfb3203dab","login":"cesandoval","name":"Carlos Sandoval Olascoaga"}},"type":"notebook","body":{"title":"Week 1a - Introduction to HTML and Javascript","cells":[{"id":554,"value":"md`# Week 1a - Introduction to HTML and Javascript`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"md`## HTML: The Core Concepts\n\nHTML stands for [HyperText Markup Language](https://en.wikipedia.org/wiki/HTML), which creates a structure to hold the content of your webpage; it does this using what it calls elements.\n\nAll HTML documents start with the following line of code:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":722,"value":"md`\nThis tag is a way of giving your browser an explicit heads up that it should expect to be interpreting and displaying HTML.\n\nHTML is a markup framework language and is the lingua franca of the internet. You can think of a markup language as a way of imposing structure onto content, which allow you to style and interact with your design in a predicable way. While, in recent years, it's become more and more common to develop websites in Python (using a framework like Django) or Ruby (using a framework like Rails), these and other frameworks ultimately send documents to your web browser as HTML.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"md` \nContent in HTML is always organized into **elements**, which can then be filled with content, made interactive, and styled.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"Content goes here!","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":732,"value":"md`\nSome elements are contained in one tag, such as images. These elements are called **void elements**.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":738,"value":"md`\n**Comments** look like the following. They are used to write human-readable notes in your code, but are ignored by the browser.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2670,"value":"My name is **Carlos**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":744,"value":"md`A **basic page**, all together, will generally look something like this.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"\n \n \n Hello World HTML Document\n \n \n \n

Hello World

I am a p

\n ...\n

\n \n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":702,"value":"md`\n## The Document Object Model (DOM)\n\nElements in a HTML document are organized as a Document Object Model (or DOM). The [Document Object Model](https://www.w3.org/DOM/) represents the hierarchy of elements in our page. More than that, though: it is also serves as an interface that allows programs and scripts to dynamically access and update the content, style, and structure of the page.\n\n $\"DOM\"$ \n\nYou can diagram the HTML *DOM Tree*, and it consists of our HTML elements.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"md`\n### High-level structure\n\nThe \\`\\`, \\`\\`, and \\`\\` elements are large containers that are present in every HTML file. They provide the highest-level structure for our document, separating metadata, stylesheets, and linked scripts from the body of our page.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"\n\n\n\n\n\n ...\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2570,"value":"\n\n\nThis is my first HTML document\n\n\n

This is my first paragraph

\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":768,"value":"md`\n### Links and Images\n\nLinks and images are referenced using the \\`\\` and \\`\\` elements, respectively. For links, the link url goes in the href attribute and the link text goes in between the tags.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"Observable Tutorials","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2575,"value":"html`This is a link to google`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"md`\nAn image tag is used to link an image to your document. The location of the image is specified using the src attribute. Note that the \\`\\` tag is a void element - where most HTML tags require an opening and a closing tag, a single \\`\\` tag is sufficient to delineate a complete image element.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"

/>","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":788,"value":"md`\n### Paragraphs and Spans\n\nWe can create paragraphs, conventionally containing longer blocks of body text, using the \\`

\\` element. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"\n

This is one paragraph.

This is a second.

\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":803,"value":"md`\n### Lists\n\n[Lists](https://www.w3schools.com/html/html_lists.asp) are useful for itemized information. List tags can be specified inline with one another, but they are more human-readable when they are on separate lines. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"\n\n

Ham.
Cheese.
Bread.

\n\n\n

Cheesecake.
Family.
Friends.

\n\n\n

Coffee: Hot delicious drink.

\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":814,"value":"md`\n### DIV Tags and Spans\n\nOne of the most common tags (and one of the more difficult to grasp, initially) is the \\`

\\` tag. This tag is used to separate out a division or section of an HTML page. One page can contain many such elements, and they can nest endlessly. We can also create groups of inline elements (multiple elements that should appear on the same line) using the \\`\\` tag.\n\nNeither divs nor spans have any inherent form, meaning that they are used to group content into containers (or divisions) that are styled and placed using CSS (Cascading Style Sheets). CSS is a styling language used for describing the style of an HTML page. We will introduce it in the next step.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"\n

Span allows you to classify and style similar elements throughout a page, like location names, ingredients, or key terms, inline.

\n\n

\nDiv allows you to classify and separate blocks or sections of webpages.\n

\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":828,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"md`\n## Styling HTML Elements\n\nStyling of HTML elements is usually done through Cascading Style Sheets (CSS). CSS is a styling language used for describing the look and formatting of the elements in an HTML page. It uses the DOM as the way it interfaces with the elemebts, and styles 'cascade' from higher elements in the DOM tree to elements further down.\n\nHowever, in this first section of the course we will be styling the HTML elements in-line instead!\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2382,"value":"md`\n\n### Styling By Element\n\nIf we want to change the style of all of a certain kind of element (like changing the color of links), we can do so by declaring style changes using the tag.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"

Centered Header

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2587,"value":"html ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`## Writing HTML and Markdown in Observable\n\nIn the [introduction to Observable notebook](https://beta.observablehq.com/@cesandoval/introduction-to-observable), we looked at cells that return data structures such as numbers, strings, arrays and objects. But what if we want an interactive visualization? Or for that matter, just some text?\n\nIf a cell returns a DOM element, that DOM element is displayed as-is!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"

I am a paragraph element!

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2355,"value":"md`A cell referencing another cell in HTML is re-evaluated automatically when the referenced value changes. \n\nCells can generate DOM (HTML, SVG, Canvas, WebGL, *etc.*). You can use the standard DOM API like *document*.createElement, or use the built-in *html* tagged template literal:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2358,"value":"\n My favorite language is HTML.\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2369,"value":"color = \"red\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2364,"value":"md`DOM can be made reactive simply by referring to other cells. The next cell refers to *color*. (Try editing the definition of *color* above.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2366,"value":"My favorite color is ${color}.","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"md`\n### Writing Markdown\nEven better, you can write Markdown:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"I, too, am a *paragraph* element.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2598,"value":"md`this is my md cell is ${5*5}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`Markdown supports a variety of styles and structural elements, such as lists and tables. See [GitHub’s guide to Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/) for more. \n\nSince all cells in Observable are JavaScript—a “Markdown cell” is just a JavaScript cell of a Markdown [tagged template literal](http://exploringjs.com/es6/ch_template-literals.html#_tagged-template-literals)—Markdown and HTML cells can be dynamic: you can embed expressions \\`\\${…}\\` in template literals. For example, the favorite number below is randomly generated.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"My favorite number is *${Math.random() * 100 | 0}*.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2604,"value":"md` #### this is a header`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`Embedded expressions can also be DOM nodes. This lets you 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","output":"$undefined","database":"$undefined"},{"id":492,"value":"I like Markdown for prose, but ${tex`\\LaTeX`} for math.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":504,"value":"A sparkline ${sparkline([0, 8, 3, 2, 6, 5, 1])} is a chart inline with prose.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":477,"value":"md`And of course, Markdown can be reactive, too! The \\`now\\` built-in from the Observable [standard library](https://beta.observablehq.com/@mbostock/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","output":"$undefined","database":"$undefined"},{"id":323,"value":"The current time is ${new Date(now).toLocaleTimeString()}.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"md`You can manipulate DOM generated from Markdown with JavaScript, say 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","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 / 2000);\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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 in the notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":457,"value":"md`Or, as SVG:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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. We’ll cover third-party libraries in more detail later in the introduction, but here’s a quick example generating colorful concentric circles in SVG.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"{\n // Create a square ^*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"ganja = require('https://cdn.rawgit.com/enkimute/ganja.js/master/ganja.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"md`**Multiple inputs**\n\nSpecifying multiple inputs - multiple module names, or URLs, or module names with a path, will load all of the named things and combine their exports into one object. This is especially useful for modules like D3’s constituent modules.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"// Only load the DSV and Selection parts of D3, and combine their exports into one object\nd3CsvAndFetch = require(\"d3-dsv\", \"d3-selection\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"md`In some cases, too, \\`require\\` won’t find a module or won’t be able to load it - and it’ll return a promise rejection.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"notValid = require('not-a-real-npm-module')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"md`If you’re running into issues requiring a module, try using the [module require debugger](https://beta.observablehq.com/@tmcw/module-require-debugger), or [asking in the forum](https://talk.observablehq.com/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"md`\n### require’s behavior\n\nBy default, the \\`require\\` function uses modules published on [NPM](https://www.npmjs.com/), a service that hosts over 600,000 different modules^* created by thousands of individual developers. Because notebooks run in a web environment, we use another service, [unpkg.com](https://unpkg.com/), that takes NPM's modules and makes them accessible to browsers.\n\nFor example, if we call require with the argument \\`d3\\`, it expands that argument into \\`http://unpkg.com/d3\\`, which then redirects to the source code of the D3 visualization library:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"d3test = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"md`### import(): a way to require ES6 modules\n\nIn addition to \\`require\\`, which uses the widely-supported [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md) standard, we also support \\`import()\\`, a new way of requiring modules that aims to eventually obviate the need for custom functions like \\`require\\`.\n\n\\`import()\\` is a native browser feature that’s just now gaining adoption — it only works in the newest versions of Chrome, Safari, Firefox, and Edge. It also requires modules to be published in the [ES6 module specification](http://exploringjs.com/es6/ch_modules.html), which is still gaining adoption.\n\nLike \\`require\\`, there is a shortcut so that you can refer to modules by name with \\`import()\\` and it’ll load them from unpkg.com, if they’re available - or you can specify a full URL and it’ll pull from any other source.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"scale = import('d3-scale')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"

Hello World

Centered Header

This is a big header