Document Title

2e:null 2f:["$","title",null,{"children":"Introduction to Web (HTML, CSS, JS) | João Rulff | Observable"}] 34:[] 32:{"id":"a57df2c004ac4501","slug":"introduction-to-web-html-css-js","title":"Introduction to Web (HTML, CSS, JS)","thumbnail":"2cad5da8f6a99869b45de5ddf326309fdb42be6191f86c796d6b936da9a4bb25","access_level":"public","create_time":"$D2022-01-24T20:20:41.460Z","update_time":"$D2026-04-16T19:16:14.351Z","view_time":null,"first_public_time":"$D2022-01-27T19:10:40.046Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"ad37929384f8c890","login":"jlrulff","name":"João Rulff","avatar_url":"https://avatars-next.observableusercontent.com/61e7386e80ca9c8fb33f146e596f13dd102aa53e27e69ad57c759d63f733195a","tier":"starter_2024"},"version":440,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"156ac92bacf96157","login":"jlrulff","name":"João Rulff","avatar_url":"https://avatars-next.observableusercontent.com/61e7386e80ca9c8fb33f146e596f13dd102aa53e27e69ad57c759d63f733195a","tier":null}],"members":[{"type":"individual","id":"156ac92bacf96157","login":"jlrulff","name":"João Rulff","avatar_url":"https://avatars-next.observableusercontent.com/61e7386e80ca9c8fb33f146e596f13dd102aa53e27e69ad57c759d63f733195a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":19,"collection":null,"type":"notebook","body":{"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","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","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","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","output":"","database":"$undefined"},{"id":38,"value":"The tree will look like the following:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":231,"value":"## CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","output":"","database":"$undefined"},{"id":235,"value":"

John

New York

Mary

Rio de Janeiro

Peter

Serial Number: 0123345

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"How can we style this paragraph?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"## Manipulating the DOM","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"With JavaScript we can manipulate the **DOM** by changing the content of HTML tags or adding new tags to our document. Throughout the years many different libraries were developed to make this task easier. JQuery, D3, React, Angular.... ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"

Child 5

Child 2

Child 3

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":63,"value":"{\n const p = document.createElement('p');\n p.textContent = 'INFOVIS';\n\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"## Changing Styles dynamically","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"Let's create a new div","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","output":"","database":"$undefined"},{"id":100,"value":"{\n const div = document.querySelector('#abc');\n \n div.style.height = '200px';\n div.style.width = '200px';\n div.style.backgroundColor = \"blue\";\n // div.style.borderRadius = '100%';\n\n // return 'div updated :)' \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"## Drawing with SVG (Scalable Vector Graphics)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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 circle.setAttribute('r', 10 );\n \n circle.setAttribute('fill', 'red');\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","output":"$undefined","database":"$undefined"},{"id":25,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"import {graph} from \"@mlage/d3-hierarchy\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"