mirror of
https://github.com/neocities/neocities.git
synced 2025-04-28 03:02:35 +02:00
68 lines
2.3 KiB
Text
68 lines
2.3 KiB
Text
<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: -20px; width: 320px">
|
|
<p>For example, a link to another site looks like this:</p>
|
|
|
|
<p><strong><a href="//neocities.org">Check out Neocities!</a></strong></p>
|
|
|
|
<p>Add a link to your favorite site to<br> the end of the paragraph, right<br> before the </p> closing tag!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="welcome">
|
|
<h4>Nesting</h4>
|
|
<p>Tags always need to be nested properly, like Russian dolls. So this is okay:
|
|
<pre>
|
|
<p>Welcome! <a href="//neocities.org">Link!</a></p>
|
|
</pre>
|
|
|
|
But this is not correct:
|
|
|
|
<pre>
|
|
<p>Welcome! <a href="//neocities.org">Link!</p></a>
|
|
</pre>
|
|
</p>
|
|
</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>.+<h1>.+</h1>.+<p>.+<a.+href=".+">.+</a>[^.+]?</p>.+</body>.+</html>'
|
|
var re = new XRegExp(match, 'gis')
|
|
|
|
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 <a> 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: <a href=\"//neocities.org\"> and don't forget the closing <a> 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="//neocities.org"')
|
|
return
|
|
}
|
|
|
|
if(a.text() == '' || a.text().match(/\s+/)) {
|
|
notok('You need to add a name for your link, which is the text between the <a> tag, and the closing tag </a>')
|
|
return
|
|
}
|
|
|
|
sessionStorage.setItem('tutorialHtml', html)
|
|
ok('Great, nice link!', '/tutorial/html/6')
|
|
}
|
|
</script>
|