Lab 1 - HTML, CSS, SVG / as9934

as9934

Workspace

Published

Edited

Jan 20, 2021

Fork of Lab 1 - HTML, CSS, SVG

html`

<html>

<body>

<h2>My First Heading</h2>

<p>My first paragraph.</p>

</body>

</html>`

html`

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>

html`

<html>

<body>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

html`

<html>

<body>

<h2>HTML Links</h2>

<p>HTML links are defined with the "a" tag:</p>

<a href="https://www.observablehq.com">Click Here</a>

</body>

</html>

html`

<html>

<body>

<h2>HTML Images</h2>

<p>HTML images are defined with the "img" tag:</p>

</body>

</html>

html`

<html>

<body>

<h2>HTML Buttons</h2>

<p>HTML buttons are defined with the button tag:</p>

<button>Hi! I'm a button</button>

</body>

</html>

html`

<html>

<body>

<h1><u> About Ari</u></h1>

<br>

<p>Arijit (Ari) Douglas Sen is a freelance contributor for NBC News, currently studying multimedia journalism and data science at the University of California at Berkeley’s Graduate School Journalism. He is a recent graduate of the University of North Carolina at Chapel Hill’s Hussman School of Journalism and Media and has written for Our Chatham, Lead Stories the Asheville Citizen-Times and the NBC News’ investigative unit.</p>

<p>As an intern at NBC, Sen co-authored a series of investigative stories about a senior State Department official who embellished her resume, which was followed by nearly every national news outlet, generated millions of web page views and ultimately led her to resign. He also pitched and reported a single byline story about UNC spying on student activists with surveillance technology and co-authored an investigative piece as part of NBC’s impeachment coverage.</p>

<p>In August, Sen rejoined NBC as a freelance contributor, and co-authored a piece on the massive scope of QAnon groups and pages on Facebook.</p>

<p>Sen got his start in journalism as a freshman in West Henderson High School’s nationally-renowned scholastic journalism program. In his time at West, Sen served on both the yearbook and newsmagazine staff and rose to the rank of web editor-in-chief. While web editor-in-chief, the website he redesigned, wingspanonline.net, received widespread acclaim, winning three Tar Heel awards for best scholastic news website in the state and a Pacemaker finalist award, designating it as one of the best scholastic news websites in the country. Sen also received several personal awards including the Rachel-Rivers Coffey North Carolina High School Journalist of the Year award in 2016.</p>

<p>After graduating as one of the top students in his class, Sen chose to attend UNC-Chapel Hill to further his study of journalism. In his first semester, he wrote for The Daily Tar Heel’s State and National Desk covering the 2016 election.</p>

<p>In the summer of 2017, Sen interned at the Asheville Citizen-Times, one of North Carolina’s largest newspapers. While at the Citizen-Times, Sen was given a full reporting role and was tasked with reporting new stories each and every day. In the ten weeks he spent at the Citizen-Times, Ari reported almost 60 stories, including coverage of local politics, crime and a series of stories about a high-profile manhunt and murder. In the same period, his stories were featured on the front page 16 times and garnered tens of thousands of web page views.</p>

<p>More recently Sen has reported on local government for Our Chatham, an audience-driven email newsletter for a part of rural North Carolina, and served as a staff-writer for Lead Stories, Facebook’s top fact-checker.</p>

<p>In addition to writing, Sen is also a competent visual storyteller. His photographs and videos have been appeared online in the New York Times, Asheville Citizen-Times and the Raleigh News and Observer and have been recognized by Hussman’s 37th Frame competition. In May, as part of the Horizon Interactive Award-winning 2019 Carolina Photojournalism Workshop, he shot and edited a short documentary on an opioid recovery organization in five days. That same summer, he produced another short documentary about sugar dating on UNC’s campus for a start-up news organization, Tar Heel News Beat.</p>

<p>Sen hopes to pursue a career in journalism at a major national news outlet as a multi-platform investigative reporter, using on the intersection of politics, technology, national security and privacy. When not reporting stories, he enjoys watching Tar Heel basketball and listening to podcasts or audiobooks on slow runs.</p>

<h2><u>My goals for this class are:</u></h2>

<ul>

<li>Learn D3</li>

<li> Use D3 to create an interactive scrollytelly visualization for my Oakland Suspensions story</li>

</ul>

<h2><u>Contact Me</u></h2>

<p><strong>Phone:</strong> 828-318-5400</p>

<p><strong>Email:</strong> <a href="mailto:ari_sen@berkeley.edu">ari_sen@berkeley.edu</a></p>

</div>

</body>

</html>`

html`

<html>

<head>

<style>

body {

background-color: white;

}

h1 {

color: blue;

text-align: center;

}

p {

font-family: garamond;

font-size: 12px;

color: black;

}

div.contact_me p{

color: blue;

}

ul {

color: red;

font-size: 14px;

font-family: garamond;;

}

h2 {

color: black;

}

img {

align: left;

width: 300px;

}

</style>

</head>

<body>

<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>

</body>

</html>

html`

<html>

<head>

<style>

.myDiv {

border: 5px outset red;

background-color: lightblue;

text-align: center;

}

</style>

</head>

<body>

<h1>The div element</h1>

<h2>This is a heading in a div element</h2>

<p>This is some text in a div element.</p>

</div>

<p>This is some text outside the div element.</p>

</body>

</html>

html`

<html>

<body>

</svg>

</svg>

</svg>

</body>

</html>

html`<!DOCTYPE HTML>

<html>

<body>

</svg>

</g>

</svg>

</g>

</svg>

</body>

</html>

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more