CoderDojo: My First Website. Clyde Hatter
are the Nanonauts.</p> <p>Our names are Holly, Dervla, Daniel and Sam.</p> </body> </html>
NINJA TIP
Don’t try to edit your pages in a word processor such as Microsoft Word or LibreOffice.
2. Next, make a folder on your computer called nanonauts and save the code as a file called about-us.html.
about-us.html is the file name of the web page. The .html bit is called the file extension. This tells the various programs of your computer that about-us.html is a web page.
Sometimes file extensions get hidden in Windows so that you only see about-us rather than about-us.html. This can be confusing so make sure that they are visible – if you’re not sure how to do this, go to http://nano.tips/findfiles
nanonauts
about-us.html
NINJA TIP
3. The code tells a web browser, such as Chrome or Firefox, what is in the webpage. This type of code is known as HTML, which stands for Hypertext Markup Language.
Let’s open the file in our web browser. This time, instead of looking at the code, you’ll see the web page as it is meant to be seen! You can usually do this just by clicking or double-clicking the file – if you’re having trouble, go to http://nano.tips/openfiles
CHANGE IT!
4. Now you have the same file open in your web browser and the code editor. Arrange the windows so that you can see the code editor and the web browser at the same time.
Change the text in the code editor so that it shows the names of you and your friends. Change the name of the band if you like as well. So instead of saying ‘Our names are Holly, Dervla, Daniel and Sam.’ it might say ‘Our names are ‘Anna, Ali, Zeke and Zoe’. To change the text, click in the code editor and type in the new text. Don’t change the tags – the things between the angle brackets such as <h1> and <p> – just change the text between them.
NINJA TIP
When you’re developing a website you’ll need to open the web pages in two different applications:
a plain-text editor or a code editor to write the code for the page
a web browser to see the results
This can be a little confusing at first, but you’ll soon get used to it!
About Us
We are the Nanonauts.
Our names are Holly, Dervla, Daniel and Sam.
<ADD A STYLESHEET>
We’re now going to change how the page looks. To do this we’re going to create a stylesheet. A stylesheet tells you how the web page should look. Should the background be white or blue or green? Should the text be large or small? Should the links change colour when you roll the mouse over them?
The stylesheet is the place where you keep all this information. The stylesheet is kept separate from the .html file so that you can change the web page’s colour scheme without having to change the HTML code of the page itself.
1. The stylesheet we’ll be creating will be in a new file called my-first-stylesheet.css. Notice that the file extension of the stylesheet is .css not .html. (Stylesheets in this book will be orange, so that you can tell the difference at a glance.) To keep things neat we’ll save our stylesheet in its own folder. We’ll name this folder css and create it inside the nanonauts folder.
body { font-family: sans-serif; }
2. Type in the code from the orange box and save it as my-first-stylesheet.css in the css folder.
3. To link the stylesheet to the web page, you need to add an extra line into your HTML – it’s highlighted in the code below.
4. What this line does is link the web page to the stylesheet called my-first-stylesheet.css.
This stylesheet is kept in the css folder (that’s what the line of code css/my-first-stylesheet.css refers to!) In other words the stylesheet you’ve just created.
To see the difference the stylesheet makes to the web page, you must reload the page. To reload the page, click on the Reload symbol in the toolbar.
<!DOCTYPE html> <html> <head> <title>About Us</title> <link type="text/css" rel="stylesheet" href="css/my-first-stylesheet.css"/> </head> <body> <h1>About Us</h1> <p>We are the Nanonauts.</p> <p>Our names are Holly, Dervla, Daniel and Sam.</p> </body> </html>
nanonauts
about-us.html
css
my-first-stylesheet.css
5. After it’s reloaded, the page looks a little different. That’s because the words are now displaying in a sans-serif font – that’s what font-family: sans-serif; does in the stylesheet.
A sans-serif font looks like this
A serif font looks like this
About Us
We are the Nanonauts.
Our names are Holy, Dervla, Daniel and Sam.
About Us
We are the Nanonauts.
Our names are Holly, Dervla, Daniel and Sam.
CONGRATULATIONS!
YOU’VE MADE A WEB PAGE AND A STYLESHEET – AND THEY’RE WORKING TOGETHER!
THINGS TO DO NEXT
Enter some more paragraphs of text. Paragraphs go between the <p> and </p> tags. Like this:
<p>I am learning how to make a website for my Dojo Nano.</p>
<p> is a start tag. </p> is an end tag. Can you spot the difference?
You can see now that a web page is just text typed into a text file. How the text appears on the web page is controlled by the tags. What happens if you use h1 or h2 tags instead of p tags? What happens if you put some words inside strong?
Like this:
<p>My name is <strong>Sam</strong></p>
WORDS TO REMEMBER
Code editor – a program that allows you to edit the HTML code for your web page. You don’t have to use a special code editor – Notepad will do just fine – but code editors make it easier by colour-coding the HTML markup and providing other helpful features.
Edit – when you make changes to a web page, you edit it.
File – whenever you save anything onto your computer or up to the web, it’s stored as a file. Files can contain any kind of information – they can be web pages, photos, songs, PDF documents, you name it. But programmers refer to all of these things as files.
File name – files always have a file name. So the About Us web page has a file name: about-us.html. File names usually end with a full-stop followed by three or four letters (such as .jpg, .pdf, .html). This is known as a file extension and it tells the computer what kind of file it is. For example, a file ending .jpg is an image file.
Folder – when you save a file, it goes into a folder. A folder is a particular