Your first website

Start

This guide is for Windows. Your own page grows with every chapter.

Don't worry, you can't break anything. If something doesn't work, that is normal and part of it. Look closely at what is different from the example, and try again.

A chapter takes about ten to fifteen minutes. That is an estimate and has not yet been measured with children. You do not have to do everything in one day.

Like a house

A website is like a house:

• HTML is the walls. You are building those now.
• CSS is the paint and the furniture. That comes later.
• JavaScript is the wiring, so that things can move. That comes later too.
• The address says where the house stands. It gets one when the page is online.

What you need

• An editor, a simple writing program. Windows already has Notepad: open the Start menu, type Notepad, press Enter.
• A browser, for example Edge, Chrome or Firefox.

Nothing else. It costs nothing, and you do not need to install anything.

Your topic

Think about what your page should be about. For example your pet, your hobby or your favourite game. In the examples the page is called George, my cat. Pick your own topic and replace “George” everywhere.

The chapters

0. Under the bonnet: You take a look behind the scenes of a page.
1. Hello World: Your first file that a browser can read.
2. Text and pictures: More text, a picture and a tidy folder.
3. Links: A second page and ways between them.
4. Lists and tables: Bringing order to your content.
5. Menu: A bar that connects all your pages.
6. Showing and testing: What does your page look like on other devices?
7. Online: A look at how a page gets onto the internet, with your parents.

You can swipe or scroll long lines in the example code sideways. Type everything out yourself. That is the best practice. A typo breaks nothing and shows you what matters.

Chapter 0: Under the bonnet

Before you build anything, you take a look behind the scenes. Every website is made of text that your browser reads and turns into a page. You can look at this text and even change it, but only on your own screen.

Don't worry, you can't break anything. You only change your own view, never the real page. Reloading with F5 puts everything back.

Step 1: Open a page

Open your browser and type example.org into the address bar at the top. It is a page made specially for examples. You will see a short page with a heading.

Step 2: Look under the bonnet

Press F12. A new panel full of text with angle brackets opens at the side. These are the tags, the instructions the page is built from. There you will find, for example, <h1>. That is the big heading you are about to write yourself.

Step 3: Change some text

In the new panel, double-click the text between <h1> and </h1>. Delete it, type something of your own, for example George is the boss, and press Enter. Look at the page: the heading has changed.

Step 4: Put everything back

Press F5. The page reloads, and everything is as it was. You only changed your own view. The real page never changed.

Chapter 1: Hello World

Step 1: Your folder

Make a new folder on the computer. Name it after your topic, for example george. This is where your page lives.

Step 2: Your file

Open the editor and choose File, Save as. At the bottom it says “Save as type”. Open the menu and choose “All files (*.*)”. If it says “Text documents (*.txt)”, the editor adds .txt to the name on its own.

Name the file exactly index and save it in your folder. Just index, nothing else. Later we will turn it into an HTML file.

Step 3: Your text

Type this out, line by line:

index<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>George, my cat</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first page.</p>
</body>
</html>

Type every line yourself. A missing < or > is enough to make something look different. That happens to everyone, and it is exactly how you learn.

What sits between <body> and </body> is what you see. <h1> is the big heading (heading 1), </h1> ends it. <p> is a paragraph.

The line <meta charset="UTF-8"> tells the browser how to read special characters such as ä, ö and ü. Without it they can look wrong, for example as a jumble of symbols. That is why we always keep it in.

Save the file. The same applies here: save as type “All files”, name index.

Step 4: From a note to a blueprint

So far your file is a note: there is only plain text on it, without colours, font sizes or pictures. An HTML file is the same text file, but the computer recognises it by the extension .html and opens it not with the editor but with the browser. The browser reads the tags, hides them and draws the finished page.

1. Make extensions visible. Open your folder in File Explorer. Go to View and switch on “File name extensions”. Otherwise Windows often hides extensions.
2. Check. Your file must now be called exactly index, with nothing after it. If it says index.txt, you chose “Text documents” when saving. That is no problem: in the next step you replace the whole name.
3. Rename. Right-click the file, Rename, type index.html. The computer asks whether you really want to change the extension. Answer Yes.
4. Double-click. The browser opens and shows your page. That is your very first website.

Chapter 2: Text and pictures

In this chapter your page gets more text and a picture. Don't worry, you can't break anything. If your picture does not appear, that is the best exercise in this chapter.

Step 1: Open the file for editing

A double-click now opens index.html in the browser, not in the editor. To edit it: right-click the file, Open with, Notepad.

Step 2: Subfolder and picture

Right-click in the folder, New, Folder, name it images. Copy your picture into it. Give it a simple name without spaces, for example george.jpg.

This keeps everything easy to find:

1. Write everything in lower case.
2. No spaces; use a hyphen instead (george-sofa.jpg).
3. No umlauts or special characters in file names.
4. Meaningful names, not IMG_4821.jpg.

Step 3: Add text and a picture

Type this between <body> and </body>, below your heading:

index.html<h2>About George</h2>
<p>George is a cat. She <strong>loves</strong> sleeping on the sofa.</p>
<img src="images/george.jpg" alt="George lying on the sofa">

• <h2> is a smaller heading than <h1>. They go down to <h6>. There is only one <h1> per page.
• <strong> makes a word bold.
• <img> stands for image and has no closing tag.
• src says where the picture is: images/ is the folder, george.jpg the file. This is called the path, the way to the file.
• alt describes the picture in words. It is shown or read aloud if the picture is missing or someone cannot see it.

Step 4: Save and have a look

Save (type “All files”, name index.html) and reload the page in the browser (key F5). Your picture appears.

This is what your folder looks like now

Foldergeorge/
├── index.html
└── images/
    └── george.jpg

Chapter 3: Links

So far your site has a home page. Now it gets a second page, and a click takes you from one to the other. Don't worry, you can't break anything. If a link does not work, that is the best exercise in this chapter.

Step 1: The second page

Open the editor, choose File, Save as, the type “All files” and name the file toys.html. Save it in the same folder as index.html.

Type the frame out again, as in chapter 1. That is the best practice. If you are in a hurry, you may copy it instead: in index.html select everything (Ctrl and A), copy (Ctrl and C), paste into the new file (Ctrl and V). Then change the title, heading and text. Tip: type the frame yourself at least once, then you know what is in it.

toys.html<h1>George’s toys</h1>
<p>George’s favourite toy is the red ball.</p>

Step 2: The link from the home page

Open index.html (right-click, Open with, Notepad) and type below the text:

index.html<p><a href="toys.html">George’s toys</a></p>

<a> stands for anchor. href is the destination, the path to the file, just like with pictures. The text in between is what you click on.

Step 3: The way back

The link back goes into toys.html:

toys.html<p><a href="index.html">Back to the home page</a></p>

Step 4: Click

Save both files and open index.html in the browser. Click the link. You land on your own second page and can get back again with the return link. That is your own little web.

A link to another website

With https:// and an address, a link also leads out onto the internet:

index.html<p><a href="https://example.org">An example page</a></p>

example.org is a page made specially for examples and shows nothing unexpected.

This is what your folder looks like now

Foldergeorge/
├── index.html
├── toys.html
└── images/
    └── george.jpg

Chapter 4: Lists and tables

Now your content gets some order: a bulleted list, a numbered ranking and a table. Don't worry, you can't break anything. If something looks odd, usually just a closing tag is missing, and you will find it.

Open the files for editing as before: right-click, Open with, Notepad. Save with the type “All files”.

Step 1: A bulleted list

In index.html, type below the text about George:

index.html<h2>George’s favourite spots</h2>
<ul>
  <li>the sofa</li>
  <li>the balcony</li>
  <li>the windowsill</li>
</ul>

<ul> is a list without order (unordered list). <li> is a single item (list item).

Step 2: A ranking

If the order matters, you use a numbered list. In toys.html, type below the text:

toys.html<h2>George’s top toys</h2>
<ol>
  <li>the red ball</li>
  <li>the toy mouse</li>
  <li>the cardboard box</li>
</ol>

<ol> is a numbered list (ordered list). Remember: if the order matters, use ol. If it does not, use ul.

Step 3: A table

In index.html, type a profile below the list:

index.html<h2>Profile</h2>
<table border="1">
  <tr>
    <th>Name</th>
    <td>George</td>
  </tr>
  <tr>
    <th>Species</th>
    <td>Cat</td>
  </tr>
  <tr>
    <th>Favourite spot</th>
    <td>the sofa</td>
  </tr>
</table>

• <table> is the whole table.
• <tr> is a row (table row).
• <th> is a heading in the table (table header).
• <td> is a cell with content (table data).
• border="1" draws thin lines so you can see the cells. Later we will make that nicer with CSS.

Step 4: Have a look

Save both files and reload the pages in the browser (F5). A few lines of text have become a neat table.

Chapter 5: Menu

So far you get from page to page through single links. Real websites have a menu that is the same on every page. You are building that now. Don't worry, you can't break anything. The menu is made only of links you already know.

Step 1: A third page

For the menu to connect something, you need a third page. Save a new file diary.html in the same folder (type “All files”). Type the frame again or copy it from another page. In between goes:

diary.html<h1>George’s diary</h1>
<p>Today I had a long sleep on the sofa.</p>
<p>In the afternoon I chased the red ball.</p>

Step 2: The menu

In index.html, type directly below <body>, even before the heading:

index.html<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="toys.html">Toys</a></li>
    <li><a href="diary.html">Diary</a></li>
  </ul>
</nav>

<nav> comes from navigation. It tells the browser: “This is the menu.” Inside it is a list, and every item is a link, as in chapter 3. At the moment it still looks like a bulleted list. With CSS it will become a bar later.

Step 3: On every page

A menu is only useful if it is on every page. Copy it (Ctrl and C) and paste it into toys.html and diary.html directly below <body> (Ctrl and V). Copying is completely normal here; the professionals do it too. You no longer need your old “back” links; you can delete them.

Step 4: Click

Open index.html in the browser and click through all three pages. From every page you can get anywhere. Your pages now feel like a real website.

This is what your folder looks like now

Foldergeorge/
├── index.html
├── toys.html
├── diary.html
└── images/
    └── george.jpg

Chapter 6: Showing and testing

You have built your page and want to show it. Right now a careful look pays off: what does it look like on other devices? Don't worry if it looks different there. That is normal, and you are about to learn why.

Step 1: View the page on a phone

You do not need to fetch a phone for this. Open your page in the browser and press F12, as in chapter 0. In the bar, click the symbol with a phone and a tablet (device view) and choose “phone” at the top. What do you see? The text is tiny. Why?

The answer: devices have different formats

The format is the size and shape of the screen. A phone is narrow and tall, a tablet medium-wide, a laptop or PC wide and landscape. As an example in pixels (picture dots): a phone is about 400 pixels wide, a tablet about 800, a PC over 1000. These are only examples. Real devices can differ.

Your browser does not know by itself that your page may also be narrow. So a phone assumes it needs lots of space (about 980 pixels) and shrinks everything until it fits the narrow screen. That is why the text looks tiny.

Step 2: Tell the phone what you want

The viewing window is called the viewport. We tell the phone: “Use your real width.” Type this line into the <head>, directly below the line with charset, on every page:

index.html<meta name="viewport" content="width=device-width, initial-scale=1.0">

Save (type “All files”, name index.html) and reload the page (F5). Look at the phone view again. The text is large and fits the screen.

Chapter 7: Online (a look ahead)

So far only you can see your page, on your computer. In this chapter you do not build anything. You find out how a page gets onto the internet, and you decide about it together with your parents.

Two ways, two names

• Free address: It costs nothing, but the address belongs to the provider and looks like yourname.provider.something. One example of such a service is GitHub Pages. Free offers like this can have limits and conditions.
• Your own domain: That is an address like yourname.ch that belongs to you. It usually costs something every year. How much, you should check with a provider before buying.

A free address is enough to start with. If the page needs to run reliably, something paid may be worth it later.

What does “on the internet” mean?

Once your page is online, anyone who knows the address can see it. And what has been on the internet once can stay there. That is why this rule applies to everything on your page:

• No full name.
• No address and no school.
• No photos of people, not even of you.
• Animals, objects, your own drawings and your own texts about your topic are the safe start.