This lesson is intended for S1-6. Primary school lessons are available here: Lesson 1
By the end of this session you will:
- Create a Neocities account
- Learn good password habits
- Learn how the web works
- Create and publish your own webpage
Step 1: Create a Neocities account
Go to neocities.org and sign up for a new free account
- Create a username. Do not use your real name.
- The tags section is for you to include some topics you will have in your website. This can help search engines like Google suggest your site to people who might be interested in it. Add some tags, separated by a comma. For example; "Minecraft, StarWars, Fortnite, MyLittlePony"
- Create a strong password you can remember. See the section below for help creating a password.
- Enter an email address, in the format "pmhslearner+FirstnameLastname@gmail.com"For example: pmhslearner+DouglasPollock@gmail.com.
- The + is important here. Your email address will not work without it
- Please do not use this email address for anything other than coding club activities
- Click the Captcha box to tell Neocities that you are not a robot
Step 2: 🔐 Creating a strong password
🧠 Password rules for Coding Club
In Neocities, your password must have:
- At least 8 characters
- A capital letter
- A number
- A symbol (! ? #)
However even this isn't enough to keep your password safe. "Bubble1!" is a password which meets these requirements, but a modern computer could crack it in about 8 hours.
To make a really secure password you should follow these rules instead:
- Use long passwords or passphrases made from several random words
- Don't use personal information like user ID, names of family, children or pets
- Use multiple capital letters, numbers, and symbols
- Don't only replace letters, such as 'e' with '3' or 'a' with '@'
- Don't share passwords between sites
Using these tips, can you create a secure and unique password for your Neocities account? You must remember your password - write it down somewhere safe if you need to.
Why does it have to be so complex?
Passwords aren't cracked by humans guessing them any more. Hackers use computers to guess passwords which are MUCH faster, and they know the rules we use to create seemingly strong passwords, such as character substitution and adding a number after a dictionary word.
We saw earlier that "Bubble1!" would take a desktop computer about 8 hours to crack. Consider the password 'Leap3janitor@Microwave+trust!'. This would take a modern desktop computer about 4,000,000,000,000,000,000,000,000,000,000,000,000 years to crack! That's 36 zeros; waaaaay longer than the universe has existed.
Step 3: How the web works
What are servers?
Servers are large, powerful computers on which websites and files are stored. Other computers can send requests to the server to see these websites and files.
What happens when you access a website?
When you use your browser (Chrome, Safari, Edge, etc) to access a website, such as Facebook, Google or Youtube, your browser sends a message to the server asking for the computer file you've requested. The server will then send you that file over the internet, which your browser displays on your screen.
What's happening on this page?
That's exactly what's happening when you're looking at this page right now.
You went to the URL "haggishunter.neocities.org/pmhs/lesson1" and your browser sent a message to Neocities server asking for the computer file called "lesson1.html". The server sent it to your computer, and your browser displayed it on your screen as a webpage.
What is HTML?
lesson1.html is just a text file. It's written in a computer language called HTML. Your browser reads it and turns it into what you see on screen. Servers can send lots of different file types including audio, pictures and video.
💡 Every website you use is built from files just like these. Professional web developers build much larger and more complex systems, but the basic idea is exactly the same.
Step 4: 🏷 What Are Tags?
When you have logged in to Neocities, you will have a template webpage with some text, which looks a bit like this:
<!DOCTYPE html>
<html>
<head>
<title>The web site of haggishunter</title>
</head>
<body>
<h1>Welcome to my Website!</h1>
<p>This is a paragraph! Here's how you make a link: <a href="https://neocities.org">Neocities</a>.</p>
<p>Here's how you can make <strong>bold</strong> and <em>italic</em> text.</p>
<p>Here's how you can add an image:</p>
<img src="/neocities.png" alt="Site hosted by Neocities">
<p>Here's how to make a list:</p>
<ul>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ul>
<p>To learn more HTML/CSS, check out these <a href="https://neocities.org/tutorials">tutorials</a>!</p>
<p>Test</p>
</body>
</html>
HTML is made up of things called tags.
Most tags come in pairs. They look like this:
Think of tags like boxes, or containers. Whatever is inside the tags is affected by them.
The first tag opens the box.
The second tag closes it.
For example:
<p>This is a paragraph.</p>
<h1> makes a big heading.
<p> makes a paragraph.
You don't have to put just text inside the box. In real life, you can put smaller boxes inside big boxes. You can do the same with HTML. Remember the <body> tags you saw on your home page? That can contain lots and lots of different types of tags, some of which we will see in week 2 and 3.
- Check that every tag is closed properly
- Look carefully for spelling mistakes
- If something breaks, undo your last change and try again
- Use Inspect Element to investigate problems
Challenge
Change:
- The page title shown in the browser tab
- The title (heading) shown on the page itself
- The paragraph - add some information about yourself
Anyone all across the world can now access your new webpage! Just go to [your username].neocities.org from any browser. Why not share your webpage with your friends or family?
Visit a website and press CTRL+U. Can you:
- find headings?
- find links? (look for <a> tags)
- find images? (<img>)
Challenge
If you're finished early, research how to create a second webpage. Can you link them together so you can navigate from one to the other?