29:null 2a:["$","title",null,{"children":"Intro to Observable, HTML, and SVG | Eric Field | Observable"}] 2f:[{"id":"5c6fcae42cf285bc58bbde1b8ad648f96885cf88fc56620bd1869548d5a7906fb7b08aefef0cac249a90cffc2470fbf21bcca5876b9d6be67eb84b453a623227","href":"https://static.observableusercontent.com/files/5c6fcae42cf285bc58bbde1b8ad648f96885cf88fc56620bd1869548d5a7906fb7b08aefef0cac249a90cffc2470fbf21bcca5876b9d6be67eb84b453a623227","name":"observable_new_cell.png","type":"image/png","lastModified":1644184583383.609,"size":34758},{"id":"a097566bbc0eda9830da77a4eb3a8cab0e877c5b96a1c96d2d7f40652816d11b3bb566ee06142da5bc6e4f9299a2fd7e8182fb98b9052c9006d5332257413265","href":"https://static.observableusercontent.com/files/a097566bbc0eda9830da77a4eb3a8cab0e877c5b96a1c96d2d7f40652816d11b3bb566ee06142da5bc6e4f9299a2fd7e8182fb98b9052c9006d5332257413265","name":"observable_cell_type.png","type":"image/png","lastModified":1644186201070.179,"size":27092}] 2d:{"id":"44a65df1578152cc","slug":"intro-to-observable-html-and-svg","title":"Intro to Observable, HTML, and SVG","thumbnail":"4bc6c9428a6862cc90a02e6371ac30e1d755782aab08aca0d751b0c2be711687","access_level":"public","create_time":"$D2022-02-06T21:34:36.280Z","update_time":"$D2022-02-07T03:43:07.993Z","view_time":null,"first_public_time":"$D2022-02-06T23:51:06.863Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":"starter_2024"},"version":265,"publish_version":265,"role":null,"authored":false,"authors":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null}],"members":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"e7848674a4ae9ee4","slug":"the-basics","title":"the Basics","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"type":"notebook","body":{"title":"Intro to Observable, HTML, and SVG","cells":[{"id":0,"value":"# Intro to Observable, HTML, and SVG\nA quick primer walkthrough of some basics to get us started.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"You might start with a basic **Introduction to Observable Notebooks found [here](https://observablehq.com/@observablehq/a-taste-of-observable?collection=@observablehq/getting-started)**, along with a whole suite of tutorials found in the **Learn** menu above to the top-left. A more expansive treatment of HTML can be found at the [W3Schools HTML tutorial](https://www.w3schools.com/html/default.asp).\n\nOtherwise we're going to walk through in this notebook how to create and control some core pieces of the HTML and SVG drawing space.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"### Let's start with just how to just put in some Observable code blocks:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"OK. So hover your mouse over this text, or any other. You'll see a little + show up, along with a gray tab on the side, and an arrow >. Click on the +. \n${await FileAttachment(\"observable_new_cell.png\").image()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"That makes a new cell. \nNotice that a new cell can have a few different types, with the selections on the right: \nJavascript, Markdown, HTML, TeX, and SQL. \n\nThe text cells that you're reading now are **Markdown**, for simple text explanation. Graphics and page objects can be created with **HTML**, and procedures, variables, data, and dynamics including d3 will be done in **Javascript**.\n\n**For our first cell, and our intro here, choose <> HTML**. \n\nInside that HTML block, we're going to start with a ```

``` paragraph element, containing some text.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"

Hello World!

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"That creates a paragraph on the page, with the text inside. This is the basic HTML code syntax, which is based on a standard called [XML](https://www.w3.org/XML/), or eXtensible Markup Language, that can be used to structure any data. HTML is a subset of XML used for writing Hypertext documents, and so is the HyperText Markup Language.\n\nNotice that with most things in XML and HTML (though there are exceptions), the `````` opens and then closes with a slash-tag ``````, and the content is in between.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"Notice also that in Observable (the notebook editing tool that you're reading this in) **the result of the cell appears ABOVE the code that generates it**. (see the code cell below this text display). That's different from Jupyter Notebooks, for those familiar with that, and will take a little getting used to. \n\nIf the cell is **Pinned** (see blue pin icon when you float the mouse over the cell), then the code is visible along with the result. If the cell is unpinned (gray pin icon, not selected to pin), then the code hides and you only see the results. This is simply a convention in this Observable interface. You can Pin and Unpin as you need. ","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"\nThe cell's type: Javascript, Markdown, HTML, etc., is also available to change in the dropdown of the icon inside the gray tab. Go click on the one right above this to see. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"$${await FileAttachment(\"observable_cell_type.png\").image()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"## OK, so now that we have some basic Observable control, let's look at HTML objects a little more.\nThere are [a lot of different tags that can be used](https://www.w3schools.com/html/default.asp), and each one has a slightly different meaning. The whole idea behind these tags is to create **objects** of a certain type, and then to be able to provide some **properties** to control them. Many of the tags are just semantic object types themselves. For instance, look at the difference between a ```

``` paragraph, ```

``` Heading 1, ```

``` Heading 2, and a ```
``` div, which is just a generic container for things. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"
Hello World!
\n
Hello World!
\n
Hello World!
\n
Hello World!
","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"HTML was originally focused on text and hyperlinks to bridge across content, but can also include images and other objects.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"
\n this is just some text in a div
\n but it can also include a link to the UVA Architecture website
\n and it can also include an image
\n or a different image \n
","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"### The rest is just controlling the objects.\n\nNotice that both of the images above have some properties that describe and control the object. The `````` tag has a property for the image source (src=\"location.png\") and for a width= and/or height= to control it's size.\n\nThe `````` (anchor) tag has the same, for an href=, the hypertext reference url to go to when clicked.\n\nThis kind of property of the object is called an attribute, and we'll see much more of that later in the semester.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"We can also add some graphic style to these objects, through either a style=\"\" attribute, or through a collection of styles in it's own ```","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"Where both inline (style=\"property:value\") and a sheet of styles ```\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"