2e:null 2f:["$","title",null,{"children":"Lab 1 - HTML, CSS, SVG | Deanna Gelosi | Observable"}] 34:[] 32:{"id":"9542f23fb2e974dd","slug":"lab-1-html-css-svg","title":"Lab 1 - HTML, CSS, SVG","thumbnail":"3df8466ddf47aa1011bc461ff2e83a4ad0ebcd43d01eda77b1a7a598249e0a2a","access_level":"public","create_time":"$D2021-01-20T20:19:17.582Z","update_time":"$D2021-01-21T04:34:54.184Z","view_time":null,"first_public_time":"$D2021-01-21T04:35:14.705Z","fork":{"id":"256256345da5ebd4","slug":"lab-1-html-css-svg","title":"Lab 1 - HTML, CSS, SVG","owner":{"id":"6cf6a6f13b29e1ce","login":"chunggrace","name":"Min Hyung Chung"}},"stars":0,"starred":false,"owner":{"type":"team","id":"cdba5f1501e53793","login":"deannagelosi","name":"Deanna Gelosi","avatar_url":"https://avatars-next.observableusercontent.com/ef6b346df0ddbbe289b118c33504d00ae27b2f1292eaf0e5925b2e2efa6c5a0a","tier":"starter_2024"},"version":258,"publish_version":258,"role":null,"authored":false,"authors":[{"type":"individual","id":"7380c087fc055292","login":"deannagelosi","name":"Deanna Gelosi","avatar_url":"https://avatars-next.observableusercontent.com/ef6b346df0ddbbe289b118c33504d00ae27b2f1292eaf0e5925b2e2efa6c5a0a","tier":null}],"members":[{"type":"individual","id":"7380c087fc055292","login":"deannagelosi","name":"Deanna Gelosi","avatar_url":"https://avatars-next.observableusercontent.com/ef6b346df0ddbbe289b118c33504d00ae27b2f1292eaf0e5925b2e2efa6c5a0a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Lab 1 - HTML, CSS, SVG","cells":[{"id":0,"value":"md`# Lab 1 - HTML, CSS, SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md` Hi everyone ! Welcome to Lab 1. In this lab we will be brushing up our HTML and CSS skills. We are also going to practice some basic exercises with SVGs.\n\n### Observable\nWe will be using Observable notebooks for this lab as well as future labs. Observable notebooks are an easy way to type snippets on HTML code and render the results. It is very useful for learning d3 and vega-lite. Both are very useful in this class. \n\nPlease checkout the following link for a quick introduction to Observable. https://observablehq.com/@observablehq/five-minute-introduction#color\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"html`\n\n\n

\nSection 1: HTML\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md `HTML refers to Hypertext Markup Language. \n\n### HTML Syntax\n\nHTML works by separating content into different sections of the document demarked by HTML tags. Each section starts with a start tag and ends with a stop tag \n\nTo learn more about the commonly used HTML tags you can refer to the following tutorial. https://www.1keydata.com/html-tutorial/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md `\n### Example of HTML documents\n\nHTML works by separating content into different sections of the document demarked by HTML tags. Each section starts with a start tag and ends with a stop tag \n\nTo learn more about the commonly used HTML tags you can refer to the following tutorial. https://www.1keydata.com/html-tutorial/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html`\n\n\n\n

My First Heading

My first paragraph.

\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"html`\n\n\n\n

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"html`\n\n\n\n

This is a paragraph.

\n

\n

This is another paragraph.

\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"html`\n\n\n\n

HTML Links

HTML links are defined with the \"a\" tag:

\n\nClick Here\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"html`\n\n\n\n

HTML Images

HTML images are defined with the \"img\" tag:

\n\n

\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"html`\n\n\n\n

HTML Buttons

HTML buttons are defined with the button tag:

\n\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"html`\n\n\n\n

An Unordered HTML List

\n\n

Coffee
Tea
Milk

\n\n

An Ordered HTML List

\n\n

Coffee
Tea
Milk

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"html`\n\n\n\n

An Unordered HTML List

\n\n

Coffee
Tea
Milk

\n\n

An Ordered HTML List

\n\n

Coffee
Tea
Milk

\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"html`\n\n\n

\nExercise 1. Basic HTML Webpage\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`\n1. Create a basic HTML Webpage which says \"About Me\".\n\n2. Include a subheading that says \"By: Your Name\"\n\n3. Include a paragraph \"My Bio\". In this section, write a short paragraph about yourself. * Hint: Use the \\`

\\` tag\n\n4. Include a section with a subheading \"My Data Viz Goals\". In this section, create an un-ordered list of your some of the things you hope to learn/achieve in this class. * Hint: Use the \\`

\\` tag

\n About Me\n

\n By: Deanna Gelosi\n

\n My Bio\n

I am a first year Masters student in EECS working in HCI and New Media. I'm also a Museum Educator at the Exploratorium in San Francisco where I design and develop new experiences with art, science, and technology.

\n My Data Viz Goals\n

Explore data science tools and techniques
Learn more about design behind visualizations
If possible make a physical project to communicate data

\n Contact Me\n

Email me at gelosi@berkeley.edu or find me on social media @deannagelosi.

\nSection 2: CSS\n

My First CSS Example

This is a paragraph.

\\` tag\nThe \\`

\\`tag defines a division or a section in an HTML document. The < div > tag is used as a container for HTML elements - which is then styled with CSS\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"html`\n\n\n\n\n\n\n

The div element

\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\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"html`\n\n\n

\nExercise 2. CSS Style Implementation\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`\n1. Change the color of the main heading to blue and change the alignment to center. \n2. Change the color of all elements in the unordered list to be red. \n3. Change the color of paragraph under \"Contact Me\" section to be blue. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"html`\n\n\n

\nSection 3: SVG\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`SVG stands for scalable vector graphics. Refer to the following tutorial to brush up on your svg basics. https://www.w3schools.com/graphics/svg_intro.asp \nWe will go through together the following exercises. \n\n1. Create a yellow circle with a radius = 50 units. Specify the height and the width of the svg to be 100 units. The border of the circle should be green.\n\n2. Create a blue rectangle with a height = 100 units and width = 200 units. Specify the height/width of the svg as 110/300 respectively.\n\n3. create a red line with slope = 1 and origin at 0,0. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"html`\n\n\n\n \n\n

\n\n \n

\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`### Grouping SVG Elements together. \n\nThe \\`\\` tag is used to group together various svg elements. It is very easy to apply the same propertiers to all elements of the group. \n\nTry to replicate the following image using the \\`\\` tag and without the \\`\\` tag. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"html`\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"html`\n\n\n\n\n\n

\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"html`\n\n\n

\nExercise 3. (Optional) Create Your Logo\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"md`Create your original logo or recreate versions of other logos using SVG.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"html`\n\n\n\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`# References\nhttps://www.1keydata.com/html-tutorial/\nhttps://observablehq.com/@nithyaramgopal/lab-1/2\nhttps://www.w3schools.com/html \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"