Public
Edited
Oct 31, 2024
2 forks
Insert cell
Insert cell
<!--
The "<!--" above begins an HTML comment.
Comments, like all tags, can span multiple lines.
Text & HTML inside a comment will not be displayed.
To end a comment, type the three characters on the following line:
-->
<!--
section one of HTML's many container tags, by default it has no display properties
it is used to group related content. Here I am applying a style attribute
so it is more clear what is part of our rendered HTML in this document.
(We'll discuss that element later.)
-->
<section style="border: 1px dashed red;">
<p>The &lt;p&gt; tag makes a paragraph, which ends when we see the &lt;/p&gt; tag.</p>
<p>Each p tag will, by default, start a new paragraph, visually distinct from the rest.</p>
<p>
There are some tags that allow markup within text, such as <strong>strong</strong> or <em>emphasis</em>, which (by default) will make the text within bold or italic. These tags are intended to have semantic meaning, text that is emphasized might be italicized on my screen
</p>
</section>
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<div style="border: 1px dashed green; margin-bottom: 2px;">
<p style="border: 1px dotted red;">Div 1; Paragraph 1</p>
<p style="border: 1px dotted red;">Div 1; Paragraph 2</p>
</div>
<div style="border: 1px dashed blue;">
<p style="border: 1px dotted red;">Div 2; Paragraph 1</p>
<p style="border: 1px dotted red;">Div 2; Paragraph 2</p>
</div>
Insert cell
Insert cell
<div style="display: grid;">
<div style="border: 1px dashed green; margin-bottom: 2px; grid-column: 1; ">
<p style="border: 1px dotted red;">Div 1; Paragraph 1</p>
<p style="border: 1px dotted red;">Div 1; Paragraph 2</p>
</div>
<div style="border: 1px dashed blue; grid-column: 2;">
<p style="border: 1px dotted red;">Div 2; Paragraph 1</p>
<p style="border: 1px dotted red;">Div 2; Paragraph 2</p>
</div>
</div>
Insert cell
Insert cell
<div>
This is a single div, within it there are multiple inline elements:
<em>em</em>,
<strong>strong</strong>,
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">a (for links)</a>,
and a <span style="font-color: green; border: 3px dotted orange;">span, with some styling added for demonstration</span>.
</div>
Insert cell
Insert cell
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">this is the text of the link</a>
<!-- the href is a link, while the content of the <a> tag is what displays on the page -->
Insert cell
Insert cell
<section style="border: 1px dashed red;">
<div>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#svg">SVG</a>
<a href="#js">JavaScript</a>
</div>
<div>
<h2>Web Languages: CSS</h2>
<div>James</div>
<div>This is a post that explains CSS.</div>
<div>
<a href="https://www.lipsum.com">Lorem Ipsum</a> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</section>
Insert cell
Insert cell
Insert cell
<style>
/*
CSS uses C-style comments.
They start with /* and span multiple lines
*/

/* ID selectors start with # */
#doc {
/*
display: grid; is a relatively new piece of CSS that made writing CSS a lot better
It allows our sidebar & main body to be split into a grid without needing to do
calculations of margins/padding.
*/
display: grid;
/* this argument will be inherited, any element beneath this one that does not
override font-family will use this choice. This is the "cascade".
*/
font-family: sans-serif;
border: 1px dashed red;
}
#sidebar {
/* colors are typically specified in hexadecimal triples #RRGGBB
each digit ranges from 00 to ff (0-255) */
background-color: #aaffaa;
grid-column: 1;
/* This specifies a buffer of 1 "m-width", being a wide letter.
CSS values typically need units.

They can be set in pixels, percentages, or a number of units
like "em" that are based on the current font.

Units Reference: https://www.w3.org/Style/Examples/007/units.en.html
*/
/*padding-right: 1em;*/
min-width: 100px;
}
/* this syntax selects all <a> elements that are inside a #sidebar */
#sidebar a {
/* We saw links are typically inline items,
this converts these particular links to block items
so they will stack for our menu. */
display: block;
min-width: 100px;
}
/* this applies a conditional state, when the link is hovered it will change appearance */
#sidebar a:hover {
background-color: blue;
color: white;
}
#post { grid-column: 2; padding-left: 1em;}
/* Leading dots indicate class selectors.
These are intended to apply to multiple elements on the page.
*/
.post-author { color: blue; float: right; }
.post-summary { color: gray; font-style: italic; }
.post-body { width: 80%; }
.post-body a { color: green; text-decoration: underline dashed; }

</style>
<div id="doc">
<div id="sidebar">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#svg">SVG</a>
<a href="#js">JavaScript</a>
</div>
<div id="post">
<h2 id="post-title">Web Languages: CSS</h2>
<div class="post-author">James</div>
<div class="post-summary">This is a post that explains CSS.</div>
<div class="post-body">
<a href="https://www.lipsum.com">Lorem Ipsum</a> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
Insert cell
Insert cell
<!-- class lists are separated by spaces -->
<div class="gradient red">
this is the content in gradient red
</div>
<div class="big red">
this is the content in big red
</div>
<div class="gradient big">
this is the content in gradient big
</div>
<style>
/* each of these classes can be applied independently */
.big { font-size: 150%; }
.red { color: red; }
/* there are lots of complex value options, allowing anything you've seen on the web */
.gradient { background: radial-gradient(circle, hsl(150 100% 80%) 0%, hsl(150 50% 50%) 100%); }
</style>
Insert cell
Insert cell
Insert cell
Insert cell
Text Input: <input type="text" placeholder="this text shows up until typing begins">

<br>

Range Input
<input
type="range"
min="0"
max="100"
step="1"
value="50" />

<br>

Select (dropdown):
<select>
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>

<br>

Multiselect:
<select multiple>
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>

<br>



More: https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types
Insert cell
Insert cell
Insert cell

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