Having Difficulty with linking pages together

**jay45** · Nov 28, 2012 08:36

Hi,

I am a newbie to web development and web design I am reading a book called "Build Your Own Website The Right Way" which is from sitepoint, I have tried writing in the html which is written in the book in order for the pages to link and navigate between each other. I am not sure whether it is the book that has the wrong html or whether I am missing something.

I would appreciate it if someone called help me this as I cannot go further in reading this book unless I resolve this problem.

Thanks

Jay45

**TechnoBear** · Nov 28, 2012 10:48

Hi Jay45, and welcome to the forums.

Can you post the HTML code you're using for your links, so that we can see where the problem lies?

**jay45** · Nov 28, 2012 11:29

Homepage

Code HTML4Strict:

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Bubble Under The Diving Club For The South-West UK</title>
  <meta charset="utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
<div id="header">
<div id="sitebranding">
<h1> BubbleUnder.Com</h1>
</div>
<div id="tagline">
<p> Diving club for the south-west UK, let's make a splash</p>
</div>
</div> <!-- end of header div -->
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div> <!-- end of navigation div -->
<div id="bodycontent">
<h2> Welcome to our super-dupa scuba site</h2>
<p><img src="http://www.obsessionsportcharters.com/images/scuba-diving_pic.jpg" width="500" height="375"
alt="A circle of divers practice their skills"/></p>
<p> Glad you could drop in and share some air with us</p>
</div> <!-- end of bodycontent div -->
</body>
</html>

About us

Code HTML4Strict:

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>About BubbleUnder.com: who we are and what this site is for</title>
  <meta charset="utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
<div id="header">
<div id="sitebranding">
<h1> BubbleUnder.Com</h1>
</div>
<div id="tagline">
<p> Diving club for the south-west UK, let's make a splash</p>
</div>
</div> <!-- end of header div -->
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div> <!-- end of navigation div -->
<div id="bodycontent">
<h2>About Us</h2>
<p><span style="color: blue; font-weight: bold;">Bubble Under</span> is a group of diving enthusiasts based in the southwest
UK who meet up for diving trips in the summer months
when the weather is good and the bacon rolls are flowing. We
arrange weekends away as small groups to cut the costs of accommodation
and travel, and to ensure that everyone gets a trustworthy
dive buddy.</p>
<p>Although we’re based in the south-west, we don’t stay on our
own turf: past diving weekends have included trips up to Scapa
Flow in Scotland and to Malta’s numerous wreck sites.
When we’re not diving, we often meet up in a local pub to talk
about our recent adventures (any excuse, eh?).</p>
<p>Or as our man Bob Dobalina would put it:</p>
<blockquote>
<p>"Happiness is a dip in the ocean followed by a pint or two of
Old Speckled Hen. You can quote me on that!"</p>
</blockquote>
</div> <!-- end of bodycontent div -->
</body>
</html>

Contact us

Code HTML4Strict:

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Contact Us at Bubble Under</title>
  <meta charset="utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
<div id="header">
<div id="sitebranding">
<h1> BubbleUnder.Com</h1>
</div>
<div id="tagline">
<p> Diving club for the south-west UK, let's make a splash</p>
</div>
</div> <!-- end of header div -->
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div> <!-- end of navigation div -->
<div id="bodycontent">
<h2>Contact Us</h2>
<p>To find out more, contact Club Secretary Bob Dobalina on 01793
641207 or email <a href="malito:bob@bubbleunder.com">bob@bubbleunder.com</a>.</P>
</div> <!-- end of bodycontent div -->
</body>
</html>

**Mikl** · Nov 28, 2012 11:38

Hi Jay45,

A couple of points:

1. Are the pages all in the same directory?

2. Do the filenames for all the pages have the extension .html (as oppposed to .htm, for example).

3. Are all the filenames entirely lower case?

If the answer to any of the above is No, that would explain the problem. In that case, report back, and we can tell you how to fix it.

It would also help to know exactly what happens when you click the links. Do you see an error message, or what?

Mike

**TechnoBear** · Nov 28, 2012 11:40

Hmm... I don't see any problem with your links. Are you sure you have the documents saved as index.html, about.html and contact.html (all lower case, etc.)? And are they all in the same folder/directory?

(You do have a wee typo in here: <a href="malito:bob@bubbleunder.com">, but that's nothing to do with your link problem.

)

Edit:

I see Mike can type faster than I can.

**jay45** · Nov 28, 2012 12:22

Hi Mike,

1. The pages are not in one file
2. the filenames all have the extension .html
3. all the filenames are entirely lowercase

The home link works but not the others, for example when I click on about us or contact us the message I see is No webpage was found for the web address: file:///C:/Users/Investment/Documents/web/about.html
Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found.

**jay45** · Nov 28, 2012 12:25

did I spell malito wrong, if so how is it written?

**jay45** · Nov 28, 2012 12:52

I tried putting all files in one folder but that didn't work

**TechnoBear** · Nov 28, 2012 13:21

Originally Posted by jay45

did I spell malito wrong, if so how is it written?

Yes - it's mailto (like mail to

)

For your links to work, all three pages must be in the same folder, for example C:/Users/Investment/Documents/web/. If they're all in the folder "web" then there shouldn't be a problem.

Are you sure your pages are called about.html and contact.html, not about us.html and contact us.html?

**Mikl** · Nov 28, 2012 13:31

Jay45, I wonder if you're confused about files and folders. I asked if all the pages were in the same directory (directory and folder are the same thing). You replied that they are not in the same file. Later, you said you tried putting them in the same folder but that didn't work, which suggests they were not in the same folder before.

Just to be clear, each page must be contained in its own file. The files names must be exactly the following:

index.html
about.html
contact.html

And they must all be in the same folder.

Also, make sure there are no spaces before or after the names.

Then check that all the file names are in lower case. When I say "file names" in this context, I mean the actual names of the files, as seen in Windows Explorer or its equivalent. I know that the filenames are in lower case in your program code. The important point is the case in the code must match that of the actual files.

Mike

**jay45** · Nov 28, 2012 15:10

thanks for the correction

**jay45** · Nov 28, 2012 15:11

YES! it's working now, thanks

**Mikl** · Nov 29, 2012 02:26

Glad to hear it's working.

Can you tell us what it was that was wrong, and what you did to fix it? I'm asking partly out of curiosity, and partly for the benefit of anyone else who might have a similar problem.

Mike

**jay45** · Nov 29, 2012 10:02

what I did wrong was instead of simply saving the files as index.html, about.html and contact.html; I saved the files as index.html, about us.html and contact us.html. I never knew that spacing was not allowed.

**TechnoBear** · Nov 29, 2012 10:32

Originally Posted by jay45

what I did wrong was instead of simply saving the files as index.html, about.html and contact.html; I saved the files as index.html, about us.html and contact us.html. I never knew that spacing was not allowed.

Yes, two points to learn here. 1st, make sure that the filename you call in your link exactly matches the actual name of the file. And secondly, as you've said, you shouldn't use spaces in file names - substitute hyphens or underscores, if needed. e.g. about-us.html or about_us.html, not about us.html

Thanks for coming back and telling us.

(And feel free to come back with any more questions that may arise. We all had to start somewhere, so we know how confusing it can seem.

)

User Tag List

Thread: Having Difficulty with linking pages together

Thread Tools

Display

Having Difficulty with linking pages together

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions