Beginning Web Development: Let’s Add Pages!

We have a single page already built.  We do not want to put ALL of our information on the one page, so we are going to divide the information up across a few pages and link them together.

Until you link up your pages you really only have a web page.  A website is a collection of web pages that share a theme or purpose.  Using a .css will give you the theme and your words and images will show your purpose.

Lets get started.

I am going to include some images this time so you can see what I am doing, instead of being lazy and just telling you.

The very first thing you should do is make a folder for your test site, if you have not already done so.  This will be important to keep the website flexible and easy to code.

When building additional pages it is important to start off with a page that you can use as a template.  A page that has all the key elements that you can build upon or modify as needed.

To make a template page we are going to add code our index.html page.  We are going to add the links for our new pages, even though we have not built them yet.

There are many types of links.  We are going to do a relational link for our navigation area.  The route the browser takes to the next page is relative to the current page.  This is why it is important to keep everything in the same folder.

I have chosen to make three additional pages; a page for a portfolio, an about page, and a vocabulary page. I plan on naming them portf.html, about.html, and vocab.html.  Since we know what we are going to call the pages we can create the links, even though they will not work yet.

The code to make a word a link looks like so;

<a href="pagename.html"> Visible Link Words</a>
I have added two "pipes" || to separate the words on the navigation.  The "pipe" symbol is shift + \.

The links for the navigation area in a line. Kind of hard to read…

When we string them together with the rest of the links it looks like this.  Kind of confusing when you leave them strung together.  Since “blank spaces” do not matter to HTML we can organize them however we want.


Reordering the links is easier to read. This works because HTML does not care about blank spaces.

Once we have the navigation set up correctly we are going to copy the file (use Save As and rename the file to the new name.  Don’t forget the file type should be .html!)

All of our page files plus the .css

All of our page files plus the .css

Once this is done you can go in and change the content on the pages.  I encourage you to start with the about page.  It is one of the most important pages in your website.

The about page contains information that people NEED to know about your site.  You should include mission statements, history and why your services are better/different than others.  Remember that a website can be seen by anyone with a connection to the internet.  Do not include very personal things that can leave you victim of Identity Theft or scams.

The shell for the base of our about page.  Make sure you put your information in here. Things that you want to share with the world.

The shell for the base of our about page. Make sure you put your information in here. Things that you want to share with the world.

It is perfectly fine to have a website with only two pages.  The home page (index.html) and an about page (about.html.)  The home page would display any current and pertinent information that customers would want to know and the about page would only be changed if something important changed (you moved to a new building and have a new mailing address, for example.)

There are many sites out there with two or three page websites (a contact page is also common if you have different depts or people that take care of questions/issues.)  You can have as many or as few pages as you like.

This is all for this post.  Check out the website to see how the changes look.

I will be doing another post detailing some of the changes that were made to the CSS and the styles on the vocabulary page.






Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s