mirror of
https://github.com/neocities/neocities.git
synced 2025-04-25 09:42:36 +02:00
62 lines
2.4 KiB
Text
62 lines
2.4 KiB
Text
<div class="comic" style="height: 608px; width:320px; background-image: url(/img/tutorial/ch1pg2.png); background-size: 320px; float: left;">
|
|
<div class="dialogue" style="left: 25px; top: 40px; width: 250px">
|
|
<p>All you need to build your first site is a computer language called <strong>HTML</strong>.</p><p>HTML is made of tags - there's usually an opening tag and a closing tag, with content between them.</p>
|
|
</div>
|
|
</div>
|
|
<div class="comic" style="width: 289px;
|
|
height: 588px;
|
|
background-image: url(/img/tutorial/ch1pg2_2.png);
|
|
background-size: 289px;
|
|
position: absolute;
|
|
right: -46px;
|
|
top: 10px;
|
|
z-index: 1000;">
|
|
<div class="dialogue" style="left: -40px; top: 50px; width: 250px">
|
|
And here's some HTML, right in this box! Let's make a change. Replace <strong>Hello World</strong> with a name for your site like <strong><span id="studentName"></span>'s Website</strong>, and click save!
|
|
</div>
|
|
<div class="dialogue" style="left: -10px; top: 350px;">
|
|
<p>You'll see the results here.</p>
|
|
<p>Make sure to check the green boxes below for important bonus info!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="welcome" style="clear: both">
|
|
<h4>Welcome to HTML!</h4>
|
|
<p>HTML stands for <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage.
|
|
Hypertext refers to text that has links, and markup refers to the tags.</p>
|
|
|
|
<p>Don't worry if anything seems confusing - you'll get the hang of it soon! <!-- If you ever get stuck, click the Help link below. --></p>
|
|
</div>
|
|
|
|
<script>
|
|
var storedName = sessionStorage.getItem('name')
|
|
var answer = storedName+ "'s Website"
|
|
$('#studentName').text(storedName)
|
|
|
|
function checkHomework() {
|
|
var html = editor.getValue()
|
|
|
|
if(!html.tutorialMatches('<html>.+</html>')) {
|
|
notok("You're missing the HTML element tag! Your web site must begin with <html> and end with </html>.")
|
|
return
|
|
}
|
|
|
|
if(html.tutorialMatches('Hello World!')) {
|
|
notok("Hint: Try changing \"Hello World\" to something else.")
|
|
return
|
|
}
|
|
|
|
if(!html.tutorialMatches('<html>.+<body>.+</body>.+</html>')) {
|
|
notok('Missing the <body> and/or the </body> tag.')
|
|
return
|
|
}
|
|
|
|
if(html.match(/<body>[\s\n]+<\/body>/) !== null) {
|
|
notok('Need to add text between the <body> and the </body> tags.')
|
|
return
|
|
}
|
|
|
|
sessionStorage.setItem('tutorialHtml', html)
|
|
ok('Great, you did it!', '/tutorial/html/3')
|
|
}
|
|
</script>
|