<div class="comic" style="height: 530px; background-image: url(/img/tutorial/ch1pg8.png); background-size: 489px; margin-top:1em">
  <div class="dialogue" style="top: 25px; left: 0; width: 380px">
    Now add a link to one of your list items. If nested properly, it should look similar to this:
    <br>
    <div class="txt-Left">
      <pre style="text-align:left;"><code class="html">&lt;li&gt;
  &lt;a href="http://yarn.com"&gt;Yarn&lt;/a&gt;
&lt;/li&gt;</code></pre>
    </div>
  </div>
</div>

<div class="welcome">
  <h4>Tags so far</h4>
  <p>Headings: <pre><code class="html"><%= erb "<h1>Title of the page!</h1>\n<h2>Less important title</h2>", layout: false %></pre></code></p>

  <p>Paragraphs: <pre><code class="html"><%= erb "<p>Hello! This is a paragraph.</p>", layout: false %></code></pre></p>

  <p>Links: <pre><code class="html"><%= erb "<a href=\"http://wikipedia.org\">Click here!</a>", layout: false %></code></pre></p>

  <p>Images: <pre><code class="html"><%= erb "<img src=\"myimage.jpg\">", layout: false %></code></pre></p>

  <p>Lists</p>
  <pre><code class="html"><%= erb "<ul>\n  <li>First item</li>\n  <li>Second item</li>\n  <li>Third item</li>\n</ul>", layout: false %></code></pre>
</div>

<script>
  function checkHomework() {
    var html = editor.getValue()

    var a = preview().find('li a')
    if(a.length == 0) {
      notok("I don't see a link in your &lt;li&gt;&lt;/li&gt;, try adding one.")
      return
    }

    if(a.attr('href') === undefined || a.attr('href') == '') {
      notok('You need to add an <strong>href</strong> to your <strong>a</strong> tag, like: <strong>href="http://neocities.org"</strong>')
      return
    }
    if(a.text() == '' || !a.text().match(/[^\s]+/)) {
      notok('You need to add a name for your link, which is the text between the &lt;a&gt; tag, and the closing tag &lt;/a&gt;')
      return
    }

    sessionStorage.setItem('tutorialHtml', html)
    ok('Great, you did it!', '/tutorial/html/9?csrf_token=<%= Rack::Utils.escape csrf_token %>')
  }
</script>
