- So you've decided what pages you'd like to have in your website, now let's make them! To create a new web page, you create a new file with a name that ends in .html. At the top of the code panel, click on the + symbol next to the tabs. This will create a new file. Give it a name. Remember, it must end in .html (including the dot!) so that the browser knows it's a web page.
- If you want to change the name of a file, click on the cog icon to the right of the filename, and click the pencil. Type in the new name and press Enter. You can also delete a file by clicking the bin icon instead of the pencil.
- If you want to change the name of a file, click on the cog icon to the right of the filename, and click the pencil. Type in the new name and press Enter. You can also delete a file by clicking the bin icon instead of the pencil.
- You might be wondering why you can't change the name of the index.html file. "index.html" is a special name used for the homepage of a website. That's the first page you land on when you visit a website. When you go to a website's homepage, the browser looks for the file called "index.html" and displays it on your screen.
- Go the the file blank_page.html in the code panel (by clicking on the tab with that name). Select all of the text in the file by doing the following: Click anywhere inside the code panel, then press and hold the Ctrl key (or if you are using a Mac, the cmd key) and while holding it, press the A key at the same time. Notice how all the text becomes highlighted.
- Now, with the text selected, press and hold the Ctrl (or cmd) key again and then while holding it press the C key. This copies everything that was selected.
- Go to your new file and click inside the code panel (which is blank at the moment). Press and hold the Ctrl (or cmd) key and then while holding it, press the V key. This pastes everything that was copied into your new page.
- You can use these keyboard shortcuts in most programs to copy and paste stuff, including text and files!
- Change the text in between the
<title> </title>tags so your new page has a descriptive title. - In between the
<main> </main>tags in the new file, use the tags you have learned to add stuff to the page, such as paragraphs, headings, images and lists! - Repeat the steps above for each new page that you want to add.
- Remember, when there are too many tabs to be able to see them all, you can use the < and > icons in the top left corner of the tabs to scroll between them.
10. On the next card you're going to learn how to make links so that you have a way to get to the new pages.