zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-25 09:42:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

Tutorial text improvements

Browse source
This commit is contained in:
Victoria Wang 2015-09-28 17:24:09 -07:00
parent ae94473a3c
commit 6fcc43297b
5 changed files with 18 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
views/tutorial/html/2.erb
View file

@ -1,25 +1,24 @@
<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg2.png);"> <div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg2.png);">
<div class="dialogue" style="left: 50px; top: 50px;"> <div class="dialogue" style="left: 25px; top: 25px; width: 250px">
All you need to build your first site is a computer language called HTML. <p>All you need to build your first site is a computer language called HTML.</p><p>HTML is made of tags - there's usually an opening tag and a closing tag, with content in between them.</p>
</div> </div>
<div class="dialogue" style="left: 370px; top: 0px;"> <div class="dialogue" style="left: 370px; top: 0px;">
And here's some HTML, right in this box! Let's make a change. Replace Hello World with Victoria's Website, and click save! And here's some HTML, right in this box! Let's make a change. Replace Hello World with Victoria's Website, and click save!
</div> </div>
<div class="dialogue" style="left: 390px; top: 230px;"> <div class="dialogue" style="left: 370px; top: 230px;">
You'll see the results here. <p>You'll see the results here.</p>
Make sure to check the green boxes below for important bonus info! <p>Make sure to check the green boxes below for important bonus info!</p>
</div> </div>
<div class="dialogue"> <div class="dialogue">
</div> </div>
</div> </div>
<div class="welcome"> <div class="welcome">
<h4>Opening and Closing Tags</h4> <h4>Welcome to HTML!</h4>
<p>HTML is just a bunch of tags. There's usually an opening tag and a closing tag, with content between them like this:</p> <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>
<pre>tag Content visible on your site /tag</pre> <p>Don't worry if anything seems confusing - you'll get the hang of it once you try coding! If you ever get stuck, click the <strong>Help</strong> link below.</p>
<p>Don't worry if this seems confusing - you'll get the hang of it after a few more examples! If you ever get stuck, click the <strong>Help</strong> link below.</p>
</div> </div>
<script> <script>

8
views/tutorial/html/3.erb
View file

@ -4,10 +4,10 @@
Check out your site at <a href="">victoria.neocities.org</a>. Check out your site at <a href="">victoria.neocities.org</a>.
You did it! You did it!
</div> </div>
<div class="dialogue" style="left: 300px; top: 10px;"> <div class="dialogue" style="left: 300px; top: 20px; width: 250px">
But... hm... it needs a little something more. Let's make your name a header by putting header tags around it. But... hm... it needs a little something more. Let's make your name a heading by putting a Heading Level 1 tag around it.
</div> </div>
<div class="dialogue" style="left: 330px; top: 130px;"> <div class="dialogue" style="left: 330px; top: 140px; width: 250px">
Change the text to this: [h1]Victoria's Website[/h1] Change the text to this: [h1]Victoria's Website[/h1]
and click save. and click save.
</div> </div>
@ -15,7 +15,7 @@
<div class="welcome"> <div class="welcome">
<h4>Heading Tags</h4> <h4>Heading Tags</h4>
<p>Here are all the header tags, for all your needs—from the most important to the least!</p> <p>Here are all the heading tags, for all your needs—from the most important to the least!</p>
<pre> <pre>
<h1></h1> <h1></h1>

2
views/tutorial/html/4.erb
View file

@ -1,6 +1,6 @@
<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg4.png);"> <div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg4.png);">
<div class="dialogue"> <div class="dialogue">
Now let's add a line of text below—perhaps "Welcome to my website" or your favorite quote. Now let's add a paragraph of text below the heading. Perhaps "Welcome to my website" or your favorite quote.
</div> </div>
<div class="dialogue" style="left: 300px; top: 0px"> <div class="dialogue" style="left: 300px; top: 0px">
To make a paragraph, surround your text with the [p] tag. So it should look something like To make a paragraph, surround your text with the [p] tag. So it should look something like

4
views/tutorial/html/5.erb
View file

@ -1,8 +1,8 @@
<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg5.png);"> <div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg5.png); margin-top: 3em">
<div class="dialogue"> <div class="dialogue">
You're writing HTML! You're doing it! Everything you need to know is just another tag! You're writing HTML! You're doing it! Everything you need to know is just another tag!
</div> </div>
<div class="dialogue" style="top: 0; width: 350px"> <div class="dialogue" style="top: -20px; width: 320px">
<p>For example, links look like this:</p> <p>For example, links look like this:</p>
<p>[a href="http://neocities.org"]Check out Neocities![/a]</p> <p>[a href="http://neocities.org"]Check out Neocities![/a]</p>

4
views/tutorial/html/7.erb
View file

@ -10,8 +10,8 @@
<div class="dialogue"> <div class="dialogue">
First, add a list to your page, but replace my favorite activities with your own! First, add a list to your page, but replace my favorite activities with your own!
</div> </div>
<div class="dialogue" style="left: 340px; top: 140px;"> <div class="dialogue" style="left: 380px; top: 140px;">
Second, put an h2 header above the list with some kind of title like "Interests." Second, put an h2 header above the list with some kind of title, like "Interests."
</div> </div>
</div> </div>