neocities/views/tutorial/html/7.erb
2015-12-14 14:55:33 -08:00

47 lines
1.6 KiB
Text

<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg7.png); background-size: 515px;margin-top:4em">
<div class="dialogue" style="left: 0;top:-20px;">
Now maybe your website needs a list. Here's how an unordered list looks:
<div style="text-align: left; font-weight: bold">
&lt;ul&gt;<br>
&nbsp;&nbsp;&lt;li&gt;websites&lt;/li&gt;
&nbsp;&nbsp;&lt;li&gt;yarn&lt;/li&gt;
&nbsp;&nbsp;&lt;li&gt;catnip&lt;/li&gt;<br>
&lt;/ul&gt;
</div>
</div>
<div class="dialogue" style="left: 350px; top: 0;">
First, add a list to your page, but replace my favorite activities with your own!
</div>
<div class="dialogue" style="left: 440px; top: 120px;">
Second, put an h2 header above the list with some kind of title, like "Interests."
</div>
</div>
<div class="welcome">
<h4>Lists</h4>
<p>You can make an ordered (numbered) list like so:</p>
<div style="text-align: left; font-weight: bold">
&lt;ol&gt;<br>
&nbsp;&nbsp;&lt;li&gt;First item&lt;/li&gt;<br>
&nbsp;&nbsp;&lt;li&gt;Second item&lt;/li&gt;<br>
&nbsp;&nbsp;&lt;li&gt;Third item&lt;/li&gt;<br>
&lt;/ol&gt;
</div>
</div>
<script>
function checkHomework() {
var html = editor.getValue()
/* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
var match = '<html.+>.+<body>.+<ul>.+<li>.+</li>.+</ul>.+</body>.+</html>'
var re = new XRegExp(match, 'gis')
if(html.match(re) === null) {
notok("That's not right! Try again.")
} else {
sessionStorage.setItem('tutorialHtml', html)
ok('Great, you did it!', '/tutorial/html/8')
}
}
</script>