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.
<!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
<!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
<!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>
[FONT=Verdana]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. :))
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.
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?[/FONT]
[FONT=verdana]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.
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.
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. :))
[/FONT]
