This is the main page for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
If you missed the earlier lessons, you should start at the beginning.
Creating Multiple Pages
We’ve done about as much as we can with a single page. A Web site has multiple pages, and so should yours. So let’s build them. Or better yet, let’s redistribute some of the information you’ve already created.
You’re actually going to create three new pages. They are as follows:
- About Me
- Links and Credits
- Contact Me
The content of each of these pages is fairly evident.
About Me, which will be about.html, will be, well, about you. It will incorporate some of the material you wrote for your first page.
Links and Credits, which will be links.html, will include a list of the Internet sites you like to visit, and the sites that have helped you in your design. Again, you will add some of the links you wrote for your first page.
Contact Me, which will be contact.html, will give your e-mail address and whatever other information you choose to add: your LinkedIn, Facebook or MySpace page, your IM or Skype information, your Photobucket or Flickr images page, or whatever you have out there that you’d like to incorporate.
Ready? Let’s get started.
Open Notepad or your text editor again. (If you’ve forgotten how to open your text editor, refresh your memory.)
Name that blank page about.html. Save it in your mydesign folder, or whatever you’ve named it. (Forgotten that, too? Refresh your memory again.) Leave your new, blank page open.
Now do the same thing again, except name that page links.html. Leave it open also.
Now do the same thing again, naming this third (and last!) page contact.html.
Got enough pages open? Time to start filling them.
Reopen the first lesson in this series — you probably want to open it in a new tab or a new window — and find the basic HTML structure you used to create the “bare bones” of the first page. (It starts with the DOCTYPE and ends with the closing html tag.) Copy it.
Now copy that code into every one of the three blank pages you just created. Save the pages, and open them, one by one, in your browser (I really hope you’re using a tabbed browser!). Remember, you won’t see much difference when you save them and look at them in your browser.
Change the titles in each page:
- In your
about.htmlpage, name it About Me: My First Web Page (or whatever your original title was) - In your
links.htmlpage, name it Links and Credits: My First Web Page (or whatever your original title was) - In your
contact.htmlpage, name it Contact Me: My First Web Page (or whatever your original title was)
Now let’s move content from the home page to the new pages.
First, cut (not delete) the information about yourself from the home page — the paragraphs you wrote about yourself, the list of your three favorite musicians or rappers or whatever, and the images you included. Leave the introductory “Welcome” paragraph. Before you save the home page, paste all of that information between the body tags on the about.html page. Now save both pages and check them both in your browser.
You should have a little bit of information about yourself in your About Me page.
Second, cut (not delete) the two links you created to the W3C and december.com sites, and their accompanying heading. Again, before saving your home page, paste that information into your links.html page. Save both pages and check them over.
You should have the two links, and their heading, in your Links and Credits page.
Third and last, cut (not delete) the link you created to your e-mail account. Before saving the home page, paste the e-mail link into the contact.html page. Save both pages and check them over.
You now have four (rudimentary) pages.
But how to link them into one interconnected site? With a set of navigation links!
