25:["$","title",null,{"children":"Lab 1 - HTML, CSS, and SVG | Ian Wu | Observable"}] 4c:[{"id":"b75497b53dcee11e4b8cc36ffd8965565f5a35fdcf5e52beb0283a47e1907aa0be9b3984213ede693055d9c07f50a1fb44758382b37a7fe7d751c988aad5433c","href":"https://static.observableusercontent.com/files/b75497b53dcee11e4b8cc36ffd8965565f5a35fdcf5e52beb0283a47e1907aa0be9b3984213ede693055d9c07f50a1fb44758382b37a7fe7d751c988aad5433c","name":"0D03E4EE-F1BA-4799-AD21-C4D11B084275.png","type":"image/png","lastModified":1642480750165.693,"size":157545},{"id":"225f6c1b4dbbe59fb10e1f775131644773adcdc8a334efe1bf80bb48b60168bb36c12f402796d98efe25dfe5df631bc1b4a2e273a95dbe64d47bafb2f72d69f3","href":"https://static.observableusercontent.com/files/225f6c1b4dbbe59fb10e1f775131644773adcdc8a334efe1bf80bb48b60168bb36c12f402796d98efe25dfe5df631bc1b4a2e273a95dbe64d47bafb2f72d69f3","name":"779746D1-C5BB-45A3-99DA-363FEDCBC2DF.jpeg","type":"image/jpeg","lastModified":1642481170124.73,"size":575484}] 48:{"id":"5419caa9d4daf4dd","slug":"i247-lab-1","title":"Lab 1 - HTML, CSS, and SVG","thumbnail":"a6f3aa7429178f2f9423e866557d241595cfb9b63ba0dd86e9202472c6d6f4e7","access_level":"public","create_time":"$D2022-01-17T02:55:44.859Z","update_time":"$D2022-01-28T02:13:28.346Z","view_time":null,"first_public_time":"$D2022-01-17T18:29:47.909Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"db9421837da01a1e","login":"iwle","name":"Ian Wu","avatar_url":"https://avatars-next.observableusercontent.com/fd9c8875e8a3f2927e2dff64f3bb32213229d696eca2c735a3db4a6f249189db","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":831,"publish_version":831,"role":null,"authored":false,"authors":[{"type":"individual","id":"9ef3e7a065a6030c","login":"iwle","name":"Ian Wu","avatar_url":"https://avatars-next.observableusercontent.com/fd9c8875e8a3f2927e2dff64f3bb32213229d696eca2c735a3db4a6f249189db","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"9ef3e7a065a6030c","login":"iwle","name":"Ian Wu","avatar_url":"https://avatars-next.observableusercontent.com/fd9c8875e8a3f2927e2dff64f3bb32213229d696eca2c735a3db4a6f249189db","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":12,"collection":{"id":"076667b90691d2ee","slug":"info247-labs","title":"INFO 247 Labs","owner":{"id":"db9421837da01a1e","login":"iwle","name":"Ian Wu"}},"type":"notebook","body":{"titling":"auto","title":"Lab 1 - HTML, CSS, and SVG","cells":[{"id":0,"value":"# Lab 1 - HTML, CSS, and SVG\n\nWelcome to INFO247 Lab 1! In this lab, we will review HTML/CSS, and also get to know more about the Document Object Model (DOM).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"> **What are Observable notebooks?** Observable is used for our labs. Using these notebooks, we can type our code and render the results quickly. Learn how to use Observable notebooks. They are very useful to learn `d3.js`, which is useful in this course.\n>\n> You can also type in Markdown to annotate your notebooks, which is very useful for documentation purposes.\n>\n\nIf you are unfamiliar with Observable, go [here](https://observablehq.com/@observablehq/five-minute-introduction) for a quick tutorial!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":505,"value":"> **How do you use notebooks?** You can use the notebook by \"forking\" it. This creates a copy for your own account and any changes that are made to the copy are saved to your account.\n>\n> ![779746D1-C5BB-45A3-99DA-363FEDCBC2DF.jpeg](${await FileAttachment(\"779746D1-C5BB-45A3-99DA-363FEDCBC2DF.jpeg\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"## Part 1. HTML/CSS and SVG\n\n### HTML\n\nHTML stands for **H**yper**T**ext **M**arkup **L**anguage. HTML defines the structure of a document.\n\n#### HTML Syntax\n\nHTML separates a web page into different elements. The elements are defined by HTML tags. Here is an example.\n\n```html\n\n \n

Hi, I am a HTML element!

\n \n\n```\n\nEach tag has a start tag and a stop tag. For example, `

`. However, we can also use a shorthand for certain tags that do not require content, such as line breaks: `
`.\n\nIt is also conventional to indent the nested tags. This helps us to visualise the structure of the web page easily.\n\nThere are many HTML tags that you can use. They can be found [here](https://www.w3schools.com/tags/ref_byfunc.asp). For more commonly used ones, you can check [this](https://www.geeksforgeeks.org/most-commonly-used-tags-in-html/) out.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"### Practice\n\nIn this exercise, we will try creating some HTML.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"##### Headings, Paragraphs, and Lists\n\nThere are six levels of headings, in descending size from `

` to `

`.\n\nThere are two types of lists: unordered (`ul`) and ordered (`ol`). The ordered list is numbered.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"\n \n

I am a Header Level 5

And this is my paragraph.

And an unordered list...

To-Do List for Today

Think
Work
Sleep

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"##### Buttons\n\nButtons are defined using a button tag. Buttons are used for interaction.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"#### Exercise\n\nThere are many different types of HTML tags. We have merely scratched the surface of what HTML can do. Now it’s your turn!\n\n> Try creating a movie review using HTML. Include:\n> - A movie poster\n> - A short blurb or description of the movie\n> - A list of interesting things that happened in the movie\n> - A hyperlink to the Wikipedia or IMDB entry","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"### CSS\n\nCSS stands for **C**ascading **S**tyle **S**heets. It is used to describe the presentation of a web page. Using CSS, we can define our own style of a web page. That is, we can change the colours, fonts, size, etc. of the HTML elements from the standard ones that the web browser provides.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"Try removing the comment brackets (`<-—` and `—->`), and see how the style of the web page changes!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":262,"value":"#### `

`\n\nBut what if we don’t want to change the *whole* web page?\n\nThe `

` tag is a \"division\", or a section, of a HTML document. It is used as a container of HTML elements that are styled with CSS code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"\n \n \n \n \n

Original header

\n\n

This is a heading in a div element

This is some text in a div element.

\n\n

This is some text outside the div element.

\n\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":307,"value":"#### Practice\n\nNow you try! From the HTML page of the movie above, make the following changes:\n\n1. Change the colour of the main heading to blue and change the alignment to left (I know, it looks awful, but let's give it a shot).\n2. Create a border around the image.\n3. Change the colour of the hyperlink.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":743,"value":"### Why is CSS Cascading?\n\nA web page can have more than one style sheet. What if two or more rules select the same element?\n\n* The rule that is used is chosen by “cascading down” from the more general declaration to the specific rule.\n* The most specific declaration is chosen.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":748,"value":"Let's see this in action:\n\n> Go to [http://info247-lab.herokuapp.com](http://info247-lab.herokuapp.com) and follow along!\n\nOpen your web inspector in your browser:\n\n* Chrome: https://developer.chrome.com/docs/devtools/open/\n* Edge: https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium\n* Firefox: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"### SVG\n\nSVG stands for **S**calable **V**ector **G**raphics. More information about SVG can be found [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction) from the Mozilla Firefox Foundation.\n\nWe use SVG to draw graphics. SVG has a syntax like HTML.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"Let's start off by drawing a simple blue circle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":350,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":378,"value":"Note that because there is no “content” in the tags, we can actually write the following:\n\n> ```html\n\n```\n\nand it would be the same.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"Let's draw other shapes. Let’s try a rectangle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":397,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":408,"value":"Notice what we have done here. In the `style` portion we have used CSS properties to alter the SVG.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":417,"value":"#### Grouping SVG Elements\n\nSVG elements can be grouped using the `` tag. The same properties can then be applied to the properties of all elements in the group easily.\n\nThis technique is often used for convenience.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":426,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":458,"value":"As you can see, the orange `fill` property is applied to the elements in the group.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"## Part 2. The Document Object Model\n\n*Note:* we are just familiarising ourselves with the concept of a DOM in this lab. We will not go in-depth into the technical details until we have covered JavaScript.\n\nThe Document Object Model (DOM) brings everything together. According to [Mozilla Firefox](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction),\n\n> The DOM is a *data representation* of all the objects that comprise the structure and content of a web page.\n\nThe DOM represents a web page as a hierarchical tree, as seen in this image:\n\n![0D03E4EE-F1BA-4799-AD21-C4D11B084275.png](${await FileAttachment(\"0D03E4EE-F1BA-4799-AD21-C4D11B084275.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":485,"value":"\n \n Hello, World!\n \n \n

Hello, World! I am a paragraph, it is good to meet you (I think?)!

I am a list! I am unordered!
Oh no! What?
Ok, whatever.

\n \n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":526,"value":"## Part 3. JavaScript\n\nJavaScript is the *de facto* language of the web. It is often used with HTML and CSS, to add interactivity to a web page. Almost all web pages use JavaScript to control the behaviour of web pages programmatically.\n\n* **No JavaScript** = static web page (no interaction)\n* **With JavaScript** = dynamic web page (interaction)\n\n#### How Does JavaScript Work?\n\nEvery web page has a JavaScript engine that interprets the JavaScript code and runs it when required. The JavaScript modifies the DOM and this results in changes in the web page.\n\n> **JavaScript is *not* Java**. It is nothing like Java. The person who created JavaScript, Brendan Eich, decided to call it Java because Java was popular at the time and he wanted to make use of its popularity.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":529,"value":"#### Practice\n\nSo for this lab we will just introduce the basics of JavaScript. JavaScript is a full-fledged programming language.\n\n> **Important!** JavaScript is NOT Observable, and Observable is NOT JavaScript. The syntax is deliberately similar and usually you will not have difficulty learning both at the same time. Here is a list of [differences](https://observablehq.com/@observablehq/observables-not-javascript) between the two.\n\n> **Extra**. By a full-fledged programming language, we mean that JavaScript is *Turing-complete*. So it is as expressive in terms of programming as any other programming language, like Python, C/C++ or Java.\n\nIf you are interested in learning more about JavaScript + Observable, go [here](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":599,"value":"\"Hello, world!\" // Mandatory greeting in all languages, a string datatype","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"1 + 1 // Trying math","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"Math.sqrt(2) // More math!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"true && false // Boolean logic","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"// We can also create functions\n\nfunction add (a, b) {\n return a + b\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"add(1,2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"##### Annoying JavaScript\n\nJavaScript can be annoying at times. Here is a famous example.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":654,"value":"1 == \"1\" // The string is converted to a numeral","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"1 === \"1\" // But... what?","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"1 + \"1\" // And this..","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"// See example","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"## Part 4. Bringing It All Together: Modifying the DOM\n\nHow does JavaScript interact with the DOM?\n\n### Using JavaScript to Select\n\n> ```javascript\n> document.getElementById(“id”)\n> ```\n\nBut selecting it is not enough! What if we want to change it?\n\nLet’s go back to [http://info247-lab.herokuapp.com](http://info247-lab.herokuapp.com) and do some interesting stuff.\n\n> ```javascript\n> const header = document.getElementById(\"header\")\n> header.innerHTML = \"Goodbye, Cruel World 😢\"\n> ```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":757,"value":"### Using D3.js Instead\n\nD3.js is arguably the *de facto* data visualisation library on the web. It was developed by Mike Bostock at the Stanford Visualisation Group in 2011.\n\nIt is written in JavaScript and provides a declarative way to manipulate the DOM.\n\n> **Caution!** D3 is not a charting library. It allows us to do charting, but it does not come pre-packaged with charts. We have to make those ourselves.\n\nWe select elements using CSS selectors.\n\n#### CSS Selectors\n\n* `element`: `p` selects all `p` tags\n* `#id`: `#name` selects the element with id `name`\n\nThere are many selectors. Check all of them out [here](https://www.w3schools.com/cssref/css_selectors.asp).\n\n#### Modifying the DOM with D3.js\n\nWe can do the same thing using D3.js, but in a simpler manner.\n\n> ```javascript\n> const header = d3.select(\"#header\")\n> header.text(\"Goodbye, Cruel World 😢\")\n> ```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null