31: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. `32:T4e0,md` ## CSS: The Core Concepts **Cascading Style Sheets** Cascading Style Sheets (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. We are going to be using CSS3, which is the third iteration of the CSS styling language. CSS is a very useful styling system, and allows you to style items on your page according to a number of methods based on the element it falls within (ie div, body, p, etc), the id of the element (ie #main, #myimg, etc), or the class of the element (ie .title1, .note, etc). **Why Cascading?** The language 'cascades' in the effect that if you style an element, any nested elements will get the same styling unless you specify otherwise. For example, if you set the font for your body element, a p (paragraph) will also be set to the same font, unless you specify specifically in the CSS that you want that p to have another font. This is a useful method in that is minimizes the code you need to write and forces you to be careful with your page organization. **Basic Syntax** Basic CSS syntax looks like the following. ` 33:[] 2f:{"title":"Week 1a - Introduction to HTML, CSS, and Javascript","cells":[{"id":554,"value":"md`# Week 1a - Introduction to HTML, CSS, and Javascript`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":715,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"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 sent documents to your web browser as HTML.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":724,"value":"html`Content goes here!`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":733,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":739,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":744,"value":"md`A **basic page**, all together, will generally look something like this.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"html`\n\n\\`\n \n \n \n Hello World\n \n \n \n

Hello World

\n ...\n

\n \n \n\\`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":702,"value":"md`\n## The Document Object Model (DOM)\n\nTo help us organize the elements, we use something called the 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"},{"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"},{"id":761,"value":"html`\n\n \n \n \n \n \n ...\n \n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":773,"value":"html`DUSP Viz Tutorials`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":780,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":793,"value":"html`\n

This is one paragraph.

This is a second.

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":804,"value":"html`\n\n

Ham.
Cheese.
Bread.

\n\n\n

Cheesecake.
Family.
Friends.

\n\n\n

Coffee: Hot delicious drink.

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"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 doesn't 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"},{"id":823,"value":"html`\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":"ojs"},{"id":828,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"`[selector] {\n [property]: [value];\n }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"md`CSS commands can be embedded within \\`\\` tags in the head of an HTML file, or can be separated into a .css file and referenced in the HTML file (which is often a cleaner way to handle a set of complex styles. \n\nCSS cannot be natively written into Observable, but can be uploaded to Gist and linked to observable using the following format:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2225,"value":"html`\n

This text is formatted by the CSS stylesheet

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":887,"value":"md`\nCells share the same iframe in Observable, so you can use CSS to change styles globally. Use caution when applying global styles: if a style affects a cell’s height, the runtime may not notice unless the affected cell is re-evaluated. For example, if you edit text to have a font-size of 128px, it immediately gets bigger but the following cells aren’t repositioned. Likewise, avoid [floats](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Floats) or remember to clear then! (You can explicitly tell the runtime to recompute cell heights by dispatching a *load* event, but it shouldn’t be necessary in most cases.)\n\nSelectors are page elements, and can be tags, ids, classes, etc.\n\n**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"},{"id":854,"value":"html``\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":859,"value":"html`

Centered Header

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":874,"value":"md`\n**Styling by Class**\n\nWe style by class using the \\`.classname\\` syntax as follows:\n\nThis will style any elements (paragraphs or otherwise) that include class = \".my_paragraphs\" as an attribute.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":901,"value":"html`

This text will be highlighted.

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":904,"value":"md`\nYou can also style elements of a certain class uniquely by combining the last two concepts.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":929,"value":"md`\n**Styling by ID**\n\nWe style by ID using the #idname syntax. Because IDs are unique, these will style the one element with the corresponding ID (in this case, id = \"foo\" and id = \"bar\").\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"html`\n

Content in the foo section.

\n\n

Content in the bar section.

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":975,"value":"md`\n**Chaining**\n\nTo find selectors that are nested within other selectors, you can use the concept of chaining. Chaining is how we identify multiple ids, classes, and selectors. Below, you will find and example of chaining an elements and a class.\n\n[You can find more examples of chaining here.](https://css-tricks.com/multiple-class-id-selectors/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"html`\n

This paragraph will be left aligned. Some words will be highlighted in red because they are class 'r'.

This paragraph will be red because of the style for class 'r' and right aligned because of the specific style for p-elements of class 'r'.

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":940,"value":"md`\n**Inheritance and Order of Operations**\n\nCSS follows the DOM model, with styles applied to elements higher in the DOM applied to those that are descendents. If selectors are defined in multiple locations in your CSS, which one gets precedence?\n\nThere are two general rules of thumb.\n\n- CSS defined last in your document will supersede CSS set on a selector earlier in your document.\n- The more specific selector will override the less specific selector. For example, a style set on the body selector will be overridden by a style set on an element within the body, such as one by ID.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"md`\n**Properties and Values**\n\nThere are hundreds of properties you can set using CSS. Some of these include font, color, location on page, opacity, size, etc. An extensive list can be found in CSS reference documents. Two prominent references are by W3Schools and Mozilla, check them out for further reading.\n\n- [MDN CSS General Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)\n- [MDN CSS Common Properties Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference)\n- [W3 Schools Intro to CSS Tutorial](https://www.w3schools.com/css/css_intro.asp)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"md`\n## Helpful CSS Tips\n\n**Defining Color**\n\nWe've seen above how to change font and background color. Colors can specified using hexadecimal values, RGB values, or a set of preset supported color names. I find it helpful to use a utility like [Adobe Color](color.adobe.com) or [Color Hex](https://www.color-hex.com/) to locate a color I like.\n\nThese are three ways of making my font red:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"`#foo {\n color: #ff0000;\n /* color: rgb(255, 0, 0); */\n /* color: red; */\n }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"md`\n**Pseudo-Classes and Changing Link Color**\n\nIn CSS, elements have what are called [Pseudo-Classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). Pseudo-classes are keywords added to selectors that specifies a special state of the element to be selected. We signify a pseudo-class using :. For example, one pseudo-class is hover, and it signifies what happens you hover over an element. This can be used to change the color a link turns when you hover over it.\n\nTry un-commenting the block below and compare the difference in what happens when you hover over links. Remember, you can do easily toggle comments by highlighting text and using [Cmd + /] on Mac or [Ctrl + /] on Windows.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"// html`\n// \n// `","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`## Writing HTML, CSS, 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"},{"id":22,"value":"html`

I am a paragraph element!

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`Even better, you can write Markdown:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`I, too, am a *paragraph* element.`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":460,"value":"md`My favorite number is ${Math.random() * 100 | 0}.`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":492,"value":"md`I like Markdown for prose, but ${tex`\\LaTeX`} for math.`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":323,"value":"md`The current time is ${new Date(now).toLocaleTimeString()}.`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":457,"value":"md`Or, as SVG:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":348,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"{\n // Create a square ^*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"ganja = require('https://cdn.rawgit.com/enkimute/ganja.js/master/ganja.js')","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":620,"value":"notValid = require('not-a-real-npm-module')","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":627,"value":"d3test = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":636,"value":"scale = import('d3-scale')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}