Published
Edited
Jan 22, 2021
4 forks
1 star
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>
<br>
<br>
<br>
<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>
<img src="https://images.theconversation.com/files/350865/original/file-20200803-24-50u91u.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=675.0&fit=crop" width="200" height="150">
</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>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
`
html`
<html>
<body>
<!-- Insert Heading here-->
<br>
<!-- Insert Name here-->
<br>
<!-- Insert Bio here-->
<br>
<!-- Insert Data Viz goals here-->
<!-- Insert Contact Me section here-->
</body>
</html>`
*remove this line*
html`
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
ul {
color: red;
}
</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>
#comment
<h1>The div element</h1>
<div class="myDiv">
<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 width="100" height="100 ">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<br><br>
<svg width="300" height="120">
<rect width="200" height="100" style="fill:blue;stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
<br><br>
<svg width="300" height="120">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</body>
</html>
`
html`<!DOCTYPE HTML>
<html>
<body>
<svg height = "100" width = "200" >
<circle cx="40" cy="40" r="25" stroke="green" stroke-width="5" fill="white" />
<circle cx="60" cy="60" r="25" stroke="green" stroke-width="5" fill="white" />
</svg>
<br><br>
<svg height = "100" width = "200" >
<!-- Using g to inherit presentation attributes -->
<g fill="white" stroke="green" stroke-width="5">
<circle cx="40" cy="40" r="25" />
<circle cx="60" cy="60" r="25" />
</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.
