2d:null 2e:["$","title",null,{"children":"INTRO TO HTML, SVG & CSS | Sandraviz | Observable"}] 33:T56b,34:[] 31:{"id":"608ae312676df7ca","slug":"html-css-intro","title":"INTRO TO HTML, SVG & CSS","thumbnail":"d7c901324d8fe21235eb9c7621a5d9bb6416f799bfc9d09d7e6de524e240088e","access_level":"public","create_time":"$D2021-10-25T10:23:08.450Z","update_time":"$D2025-05-07T16:26:43.606Z","view_time":null,"first_public_time":"$D2021-10-27T10:00:09.982Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"6661932e6ac85aef","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/e6a2480f89a40dcfbe75f19d5081ae2296848971c4b934ed0499fd3b7f1973eb","tier":"starter_2024"},"version":683,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null}],"members":[{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":18,"collection":{"id":"4a9b7c2c1bc77c4a","slug":"ue-visualizacion-dinamica-con-d3-js","title":"Visualización dinamica 2023","owner":{"id":"6661932e6ac85aef","login":"sandraviz","name":"Sandraviz"}},"type":"notebook","body":{"title":"INTRO TO HTML, SVG & CSS","cells":[{"id":0,"value":"# INTRO TO HTML, SVG & CSS\n\nThis notebook helps you to start or come back to some simple HTML, SVG and CSS code. \n\nYou can fork the notebook by clicking the ${html`...`} icon and selecting \\`fork\\` button in the top right hand corner of this page. Once you are in your own notebook get creative, trying out different html and css functions, no limits 😬\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"## HTML\nHTML stands for [HyperText Markup Language](https://developer.mozilla.org/en-US/docs/Web/HTML), which creates a structure to hold the content of your webpage using so called elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"### Simple text\n\nBelow you can find some simple HTML examples, which highlights the logic of the syntax. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"

When a 🌳 falls in the forest
there are other 🌳🌳🌳🌳 listening.

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"### Links \n\nIn data visualisations we often need titles or references to other webpages. The [The Anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address, as you can see in the example below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"

HTML SECTION

\n\n

by SANDRA

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"### Images","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":417,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"## SVG\nSVG stands for [Scalable Vector Graphics](https://developer.mozilla.org/en-US/docs/Web/SVG#getting_started_with_svg) and are an XML-based markup language for describing two-dimensional based vector graphics. When doing data visualisation, we use mainly the SVG TAGs listed below to draw the visual elements into our webpage. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"tag | example | attributes | positioning attributes\n--- | --- | ---\n<rect> | ${tableSVG('')} | width, height | x, y\n<circle> | ${tableSVG('')} | r | cx, cy\n<path> | ${tableSVG('')} | d |\n<text> | ${tableSVG('hi there!')} | | x, y, text-anchor, dy \n<g> | ${tableSVG('group element')} | | transform ","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"### RECTS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"### POLYLINE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":523,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"## CSS\nCSS stands for [Cascading Style Sheets](https://developer.mozilla.org/en-US/docs/Glossary/CSS) and is a styling language used for describing the look and formatting of the elements in an HTML page, which are the basis for our visualisations done using d3.js. As shown in the example below we can simply select a SVG tag and then style it with CSS, in this case modifing the transparency of the circles. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":424,"value":"### Inline style\n\nIf we only want to style on specific element we can just use the inline style option within an html tag like in the examples below where we use different headline format and then use style to color them in black. The way of using CSS will always overwrite any other external saved way of using CSS like in the cell below in this notebook. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":423,"value":"

Lisbon is my favourite city

But I also like Barcelona and Madrid

My hometown Köln also belongs to me

Next weekend I discover a new portugues city

In a month I will visit Amsterdam

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":439,"value":"### Separated style tag","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":443,"value":"

When a tree falls in the forest

there are other trees listening.

\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"### Fonts\n\nCSS allows you to specify font files, available on the web, to be downloaded along with your website as it's accessed. This means that any browser supporting this CSS feature can display the fonts you've specifically chosen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"

CSS TEXT

\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"--- \n### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"SVG table from [Shirley's Notebook](https://observablehq.com/@sxywu/1-draw-a-flower-petal-on-the-screen?collection=@sxywu/introduction-to-d3-js)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"tableSVG = (str) => {\n return html`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"