most common HTML tags

text_fragment = `<p> it is wise to always embed your text
in a text tag like &amp;lt;p&amp;gt;,
that stands for paragraph, and that of course gets justified
when the text is too wide to fit within the available space.</p>

<p>Sometimes the separation between paragraphs is too much,
<br> and in this case you can insert a simple linebreak
instead using the &amp;lt;br&amp;gt; tag
</p>
`
tools.sample_from_strings({html: text_fragment})

ul_fragment = `<div><p> a typical bullet list with a &amp;lt;ul&amp;gt; tag</p>
<br> <code>ul</code> stands for "unordered list"
<br> <code>li</code> stands for "list item"
<ul>
<li> the first bullet </li>
<li> the second bullet </li>
</ul>
</div>
`;
tools.sample_from_strings({html: ul_fragment})

ol_fragment = `<div><p> the same with a &amp;lt;ol&amp;gt; tag instead</p>
<br> <code>ol</code> stands for "ordered list"
<ol>
<li> the first bullet </li>
<li> the second bullet </li>
</ol>
</div>
`;
tools.sample_from_strings({html: ol_fragment})

styling_fragment = `<p>
there are tags for direct styling but <b>please note that their usage is discouraged</b> as generally you will style your own classes instead
</p>

<p>
tags for <b>bold</b> or <i>italics</i>
or <u>underline</u> or <s>strike-through</s>
<br>
that of course <u><b><i>can be combined</i></b></u>
</p>`
tools.sample_from_strings({html: styling_fragment})

code_fragment = `<p>for inserting code that should be kept as-is

<code><pre>
import numpy as np
import matplotlib.pyplot as plt

X = np.linspace(-2*np.pi, 2*np.pi)
Y = np.sin(X)
plt.plot(X, Y)
</pre></code>
</p>`
tools.sample_from_strings({html: code_fragment})

hyperlink_fragment = `<a href="https://www.google.com/" target="_">the hyperlink</a>`;
tools.sample_from_strings({html: hyperlink_fragment})

redirect_fragment = `
<p>let us simulate a page with some content (the gray area below)<br>
we have put <b>a named anchor right below this area</b></p>

<p> it is easy to craft 
<a href="#the-anchor-name">a local URL: click me</a>
and the hyperlink below will bring you right down to the anchor</p>

<div style="height:500px; border-radius:10px; background-color: #ddd;"></div>

<p>
<a name="the-anchor-name">
<b>here is the named anchor</b>
</a>
and then some more text
</p>
`
tools.sample_from_strings({html: redirect_fragment})

group_html = `<p> a paragraph may  
<span style="background-color: #ddd;">
      contain a fragment
</span>
that we want to keep together,
typically for styling purposes,
but that is inline (no linebreak),
and for that use a &lt;span&gt; tag.</p>

<div style="background-color: #ddd;">
  <p> when you need to create a group that
      contain several paragraphs</p>
  <p> then a "div" tag is more suitable</p>
</div>`
tools.sample_from_strings({html: group_html})

group2_html = `<div>
the &amp;lt;div&amp;gt; tag is an essential unit brick for creating a page layout
</div>
<div style="position: absolute;
            bottom: 20px; right: 20px;
            background-color: aquamarine;">
  <div style="margin: 20px">if you inspect a real page, you will see </div>
  <div style="padding: 10px">that <b>div</b> elements are
     typically all over the place</div>
</div>`;
tools.sample_from_strings({html: group2_html})

table_html = `Use a &amp;lt;table&amp;gt; tag <b>only for data</b>
and not for layouts, there are other,
and much better tools, for creating fancy layouts
<table>
  <thead>
    <tr> <th> Name </th> <th> Rank </th> </tr>
  </thead>
  <tbody>
    <tr> <td> Alice </td> <td> 1st </td> </tr>
    <tr> <td> Bob </td> <td> 2nd </td> </tr>
  </tbody>
</table>`

table_css = `
th {
    border: 3px solid red;
    padding: 20px;
}

td {
    border: 1px solid blue;
    padding: 5px 20px;
}
`

tools.sample_from_strings({html: table_html, css: table_css})

headers_fragment = `<h1> toplevel title </h1>
<h2> first sublevel title </h2>
<h3> and so on </h3>
<h3> other subsublevel </h3>
<h2> second sublevel title </h2>`

tools.sample_from_strings({html: headers_fragment}, {height: '18em'})