<div class="comic" style="height: 540px; background-image: url(/img/tutorial/ch1pg5.png); margin-top: 3em; background-size: 476px;">
  <div class="dialogue" style="left:20px">
    You're writing HTML! You're doing it! Everything you need to know is just another tag!
  </div>
  <div class="dialogue" style="top: -30px; width: 320px">
    <p>For example, a link to another site looks like this:</p>

    <p><pre><code class="html">&lt;a href="http://neocities.org"&gt;
Check out Neocities!&lt;/a&gt;</code></pre></p>

    <p>Add a link to your favorite site to<br> the end of the paragraph, right<br> before the &lt;/p&gt; closing tag!</p>
  </div>
</div>

<div class="welcome">
  <h4>Link tags</h4>
  <pre><code class="html"><%= erb '<a href="http://my-favorite-site.com">Click me!</a>', layout: false %></code></pre>
  <p>The 'a' in a link tag stands for 'anchor'.</p>
  <p>The 'href' is short for 'hypertext reference' - it's a way to reference another hypertext document, like your favorite website!</p>
  <br>

  <h4>Nesting</h4>
  <p>Tags always need to be nested properly, like Russian dolls. Note that both '<strong>a</strong>' tags are inside the '<strong>p</strong>' tags:</p>
  <pre><code class="html"><%= erb '<p>Welcome! <a href="http://neocities.org">Link!</a></p>', layout: false %></code></pre>

  <p>This code is incorrectly nested:</p>
  <pre><code class="html"><%= erb '<p>Welcome! <a href="http://neocities.org">Link!</p></a>', layout: false %></code></pre>
</div>

<script>
  function checkHomework() {
    var html = editor.getValue()
    var p = preview().find('p')

    if(p.length == 0) {
      notok("Couldn't find a paragraph! Did you accidentally delete it? Add it back or click the reset button to start over.")
      return
    }

    var a = p.find('a')

    if(a.length == 0) {
      notok("Couldn't find an &lt;a&gt; link in your paragraph, try to add it inside the paragraph.")
      return
    }

    if(a.attr('href') === undefined) {
      notok("Your a tag is missing an href attribute. Try writing it like this: &lt;a href=\"//neocities.org\"&gt; and don't forget the closing &lt;a&gt; tag!")
      return
    }

    if(a.attr('href') == '' || a.attr('href').match(/\s+/)) {
      notok('You need to add a url to the <strong>href</strong>, like this: href="http://neocities.org"')
      return
    }

    if(a.text() == '') {
      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, nice link!', '/tutorial/html/6')
  }
</script>
