Document Title

40:null 41:["$","title",null,{"children":"Introduction to Web (HTML, CSS, JS) | Tanmaya Sangwan | Observable"}] 47:[] 45:{"id":"a6bd8467e740e010","slug":null,"title":"Introduction to Web (HTML, CSS, JS)","thumbnail":"c010a28a69b092ca071903b2f88046ea8980c38b0b631e4e085d5d7ffe6300ba","access_level":"public","create_time":"$D2023-02-02T16:32:48.231Z","update_time":"$D2023-02-02T23:48:50.229Z","view_time":null,"first_public_time":"$D2023-02-02T16:32:48.231Z","has_unpublished_edits":null,"fork":{"id":"a57df2c004ac4501","slug":"introduction-to-web-html-css-js","title":"Introduction to Web (HTML, CSS, JS)","owner":{"id":"ad37929384f8c890","login":"jlrulff","name":"João Rulff"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c962fe1dd3f341b2","login":"tanusang","name":"Tanmaya Sangwan","avatar_url":"https://avatars-next.observableusercontent.com/e66d76d7b91e985c03db6b19bd0ff0b49cbf5a6fe9555ed648a2ecd8869b29b6","tier":"starter_2024","bio":"","following":false},"version":436,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bd127391a553d841","login":"tanusang","name":"Tanmaya Sangwan","avatar_url":"https://avatars-next.observableusercontent.com/e66d76d7b91e985c03db6b19bd0ff0b49cbf5a6fe9555ed648a2ecd8869b29b6","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"bd127391a553d841","login":"tanusang","name":"Tanmaya Sangwan","avatar_url":"https://avatars-next.observableusercontent.com/e66d76d7b91e985c03db6b19bd0ff0b49cbf5a6fe9555ed648a2ecd8869b29b6","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 Web (HTML, CSS, JS)","cells":[{"id":201,"value":"# Introduction to Web (HTML, CSS, JS)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"A web page is usually composed of three main components:\n\n- HTML Tags to define the page structure\n- CSS stylesheets to define the appearance of the elements\n- Javascript code to define the behavior of elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"The elements of a web page are organized in the form of a tree known as Document Object Model, **DOM**. Let's check a simple HTML page:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"```HTML\n\n\n\n \n Document Title\n\n\n ...\n\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"The tree will look like the following:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"{\n const dom = d3.hierarchy({\n name: \"html\",\n children: [\n {\n name: \"head\",\n children: [\n {name: \"meta\"},\n {name: \"title\"}\n ]\n },\n {\n name: \"body\",\n children: [\n {\n name: \"svg\",\n children: [\n {name: \"circle\"},\n {name: \"...\"},\n {name: \"circle\"}\n ]\n }\n ]\n }\n ]\n });\n \n return graph(dom, {label: d => d.data.name})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"## CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"Let's look at this piece of HTML code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"

John

New York

Mary

Rio de Janeiro

Peter

Serial Number: 0123345

Child 1

Child 2

Child 3

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":340,"value":"{\n const divreference = document.querySelector('#testid')\n return divreference;\n // return divreference.children[1].innerText; \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"{\n const p = document.createElement('p');\n p.textContent = 'INFOVIS123';\n\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":71,"value":"## Changing Styles dynamically","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"Let's create a new div","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"{\n const div = document.createElement(\"div\");\n \n div.id = 'abc';\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"Now, let's change the style of the div","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"{\n const div = document.querySelector('#abc');\n \n div.style.height = '100px';\n div.style.width = '100px';\n div.style.backgroundColor = \"red\";\n //div.style.borderRadius = '100%';\n\n return 'div updated :)' \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"## Drawing with SVG (Scalable Vector Graphics)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"Although we can create visualizations using only standard HTML tags, it would be very costly from an implementation point of view.\n\nScalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"{\n const width = 400;\n const height = 200;\n\n // element parameters\n const radius = 20;\n \n const svg = DOM.svg(width, height);\n\n for (let id = 0; id < 20; id ++) {\n \n const circle = DOM.element(\"svg:circle\");\n\n circle.setAttribute('cx', Math.random() * (width - 2 * radius) + radius);\n circle.setAttribute('cy', Math.random() * (height - 2 * radius) + radius);\n circle.setAttribute('r', radius * ( 0.5 * Math.random() + 0.5) );\n \n circle.setAttribute('fill', 'blue');\n circle.setAttribute('stroke', '#555'); \n\n svg.appendChild(circle);\n }\n\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"import {graph} from \"@mlage/d3-hierarchy\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 46:"$45:body"