mirror of
https://github.com/neocities/neocities.git
synced 2025-04-24 17:22:35 +02:00
Initial HTML for Ch1 tutorial
This commit is contained in:
Victoria Wang
parent
f753b66ffd
commit
11ab120f77
11 changed files with 212 additions and 17 deletions
BIN
public/img/tutorial/ch1pg1.png
Normal file
BIN
public/img/tutorial/ch1pg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
|
|
@ -1,27 +1,18 @@
|
|||
<div class="comic" style="height: 500px">
|
||||
<div class="comic" style="height: 967px; background-image: url(/img/tutorial/ch1pg1.png);">
|
||||
<div class="dialogue">
|
||||
All you need to build your first site is a computer language called HTML.
|
||||
Oh, a new student!
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
And here's some HTML, right in this box! Let's make a change. Replace Hello World with Victoria's Website, and click save!
|
||||
Ahem, please come in!
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
You'll see the results of your site here.
|
||||
I'm Penelope, and I'll be your teacher.
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
Make sure to check the green boxes below for important bonus info!
|
||||
What's your name?
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="welcome">
|
||||
<h4>Opening and Closing Tags</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>
|
||||
|
||||
<pre>tag Content visible on your site /tag</pre>
|
||||
|
||||
<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>
|
||||
|
||||
<script>
|
||||
function checkHomework(editor) {
|
||||
alert('this checks homework, but its true for now')
|
||||
|
|
|
|||
14
views/tutorial/html/10.erb
Normal file
14
views/tutorial/html/10.erb
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<div class="comic" style="height: 500px">
|
||||
<div class="dialogue">
|
||||
And that's it for Chapter One! Here's a new badge for your first ever version of victoria.neocities.org!
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
But you're not done yet! There's much in store for you: Adding colors, fonts, backgrounds, and more, all in chapter 2!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function checkHomework(editor) {
|
||||
alert('check homework here')
|
||||
}
|
||||
</script>
|
||||
34
views/tutorial/html/3.erb
Normal file
34
views/tutorial/html/3.erb
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<div class="comic" style="height: 500px">
|
||||
<div class="dialogue">
|
||||
Great!
|
||||
Check out your site at <a href="">victoria.neocities.org</a>.
|
||||
You did it!
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
But... hm... it needs a little something more. Let's make your name a header by putting header tags around it.
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
Change the text to this: <h1>Victoria's Website</h1>
|
||||
and click save.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="welcome">
|
||||
<h4>Heading Tags</h4>
|
||||
<p>Here are all the header tags, for all your needs—from the most important to the least!</p>
|
||||
|
||||
<pre>
|
||||
<h1></h1>
|
||||
<h2></h2>
|
||||
<h3></h3>
|
||||
<h4></h4>
|
||||
<h5></h5>
|
||||
<h6></h6>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function checkHomework(editor) {
|
||||
alert('check homework here')
|
||||
}
|
||||
</script>
|
||||
15
views/tutorial/html/4.erb
Normal file
15
views/tutorial/html/4.erb
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<div class="comic" style="height: 500px">
|
||||
<div class="dialogue">
|
||||
Now let's add a line of text below—perhaps "Welcome to my website" or your favorite quote.
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
To make a paragraph, surround your text with the <p> tag. So it should look something like
|
||||
<p>Hello!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function checkHomework(editor) {
|
||||
alert('check homework here')
|
||||
}
|
||||
</script>
|
||||
31
views/tutorial/html/5.erb
Normal file
31
views/tutorial/html/5.erb
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<div class="comic" style="height: 500px">
|
||||
<div class="dialogue">
|
||||
You're writing HTML! You're doing it! Everything you need to know is just another tag!
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
For example, links look like this:
|
||||
|
||||
<a href="http://neocities.org">Check out Neocities!</a>
|
||||
|
||||
Add a link to your favorite site to the end of the paragraph, right before the </p> closing tag!
|
||||
</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>Link!</a></p>
|
||||
|
||||
But this isn't!
|
||||
|
||||
<p>Welcome! <a>Link!</p></a>
|
||||
</pre>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function checkHomework(editor) {
|
||||
alert('check homework here')
|
||||
}
|
||||
</script>
|
||||
27
views/tutorial/html/6.erb
Normal file
27
views/tutorial/html/6.erb
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<div class="comic" style="height: 500px">
|
||||
<div class="dialogue">
|
||||
Great job! You can see what you've done so far at <a href="">victoria.neocities.org</a>. Now let's try an image.
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
Your Neocities web directory already includes a portrait of me called cat.png.
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
Add it to your page like so:
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
That's it! No closing tag needed for images.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="welcome">
|
||||
<h4>Links and Images</h4>
|
||||
<p>If the page or image you're referring to is already in your Neocities web directory, you can call it by its filename: for example, index.html or cat.png.</p>
|
||||
|
||||
<p>Otherwise, use the full URL: http://neocities.org/img/heartcat.png</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function checkHomework(editor) {
|
||||
alert('check homework here')
|
||||
}
|
||||
</script>
|
||||
33
views/tutorial/html/7.erb
Normal file
33
views/tutorial/html/7.erb
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<div class="comic" style="height: 500px">
|
||||
<div class="dialogue">
|
||||
Now maybe your website needs a list. Here's how an unordered list looks:
|
||||
|
||||
<ul>
|
||||
<li>websites</li>
|
||||
<li>yarn</li>
|
||||
<li>catnip</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
First, add a list to your page, but replace my favorite activities with your own!
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
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>
|
||||
<ol>
|
||||
<li>First item</li>
|
||||
<li>Second item</li>
|
||||
<li>Third item</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function checkHomework(editor) {
|
||||
alert('check homework here')
|
||||
}
|
||||
</script>
|
||||
27
views/tutorial/html/8.erb
Normal file
27
views/tutorial/html/8.erb
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<div class="comic" style="height: 500px">
|
||||
<div class="dialogue">
|
||||
Now add a link to one of your list items. If nested properly, it should look something like this:
|
||||
|
||||
<li><a href="http://yarn.com">Yarn</a></li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="welcome">
|
||||
<h4>Tags so far</h4>
|
||||
<p>Headings: <h1>Title of the page!</h1>
|
||||
<h2>Less important title</h2></p>
|
||||
|
||||
<p>Paragraphs: <p>Hello!</p></p>
|
||||
|
||||
<p>Links: <a href="http://wikipedia.org">Click here!</a></p>
|
||||
|
||||
<p>Images: <img src="hello.png"></p>
|
||||
|
||||
<p>Lists</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function checkHomework(editor) {
|
||||
alert('check homework here')
|
||||
}
|
||||
</script>
|
||||
17
views/tutorial/html/9.erb
Normal file
17
views/tutorial/html/9.erb
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<div class="comic" style="height: 500px">
|
||||
<div class="dialogue">
|
||||
Good work! Everything you've written has been saved to index.html, which is the homepage people see when they visit your site.
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
You can find and edit index.html by visiting your Neocities dashboard.
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
A cheat sheet of all the tags you've learned can be found in the tutorial section.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function checkHomework(editor) {
|
||||
alert('check homework here')
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,11 @@
|
|||
<h1>WELCOME TO NEOCITIES WHATS UP MANH!?</h1>
|
||||
<section class="section">
|
||||
<h2>Welcome to Neocities!</h2>
|
||||
|
||||
<a href="/tutorial/html">START TUTORIAL</a>
|
||||
<h3><a href="/tutorial/html/">Start the Tutorial!</a></h3>
|
||||
<p>Learn how to build websites from scratch
|
||||
with interactive lessons from Neocities' head cat, Penelope.
|
||||
The first chapter on basic HTML is out now, and more chapters
|
||||
are in the works!</p>
|
||||
|
||||
<a href="/dashboard">Nah dude I'm 31337 just take me to the editor.</a>
|
||||
<h3><a href="/dashboard/">Go to the dashboard</a></h3>
|
||||
</section>
|
||||
Loading…
Add table
Reference in a new issue