site about things to do in your town
NINJA TIP
All of the pages you will make in this book are online. You can follow along as the Nanonauts build their website, and copy the code to save time. For more information, go to http://nano.tips/examples
<ABOUT US>
EDITING YOUR FIRST WEB PAGE
So, let’s get going! This is the code for a simple web page:
1. Type this code into a simple plain-text editor such as Notepad (Windows), GEdit (Ubuntu) or in a code editor such as Brackets, Notepad++ or Atom. If you’re not sure how to do this go to http://nano.tips/ texteditors
<!DOCTYPE html> <html> <head> <title>About Us</title> </head> <body> <h1>About Us</h1> <p>We 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
