This is my first (start of many to come) question.
I am currently following Ian LLoyd’s book " Build your own website the right way using HTML and CSS" 3rd Edition and have a problem i.e. the pages I created do not link.
The code I am using for the 3 pages is as follows: Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bubble Under - The diving club for the south-west
UK</title>
<meta charset="utf-8"/>
</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-dooper Scuba site</h2>
<p><img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills"/></p>
<p>Glad you could drop in and share some air with us!
You've passed your underwater navigation skills and
successfully found your way to the start point - or in
this case, our home page.</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
About.html
<!DOCTYPE HTML>
<HTML lang="EN">
<head>
<title>"About BubbleUnder.co: who we are and what this site is for."
</title>
<meta charset="utf-8"/>
<head/>
<body>
<div id="header">
<div id= "site Branding">
<h1> BubbleUnder.com</h1>
</div> <!-- end of tag Branding div-->
<div id="tagline">
<p> Diving club for the south-west UK - let's make a splash</p>
</div> <!-- end of tagline-->
</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= body content>
<h2>About Us</h2>
<p>Bubble Under is a group of diving enthusiasts based in the
south-west 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 away have included trips up to
Scapa Flow in Scotland and to Malta's numerous wreck
sites.</p>
<p>When we're not diving, we often meet up in a local pub
to talk about our recent adventures (any excuse, eh?).</p>
</div><!-- end of body content -->
</body>
</html>
and finally contact.html
<!DOCTYPE HTML>
<HTML lang="EN">
<head>
<title>Bubble Under-The diving club for southwest UK
</title>
<meta charset="utf-8"/>
<head/>
<body>
<div id="header">
<div id= "site Branding">
<h1> BubbleUnder.com</h1>
</div> <!-- end of tag Branding div-->
<div id="tagline">
<p> Diving club for the south-west UK - let's make a splash</p>
</div> <!-- end of tagline-->
</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= body content>
<h2>Contact Us</h2>
<p>To find out more, contact Club Secretary Bob Dobalina on
01793 641207 or <a
href="mailto:bob@bubbleunder.com">email
bob@bubbleunder.com</a>.</p>
</div><!-- end of body content -->
</body>
</html>
When I try to link from Index to the other pages I get the message "Internet explorer cannot display the message.
OK. I’ve copied your code into three separate files in the same directory and it’s working fine here. However, while I was copying, I noticed that you’ve referred to the first two files as Index.html and About.html, while in your code they’re index.html and about.html, without the capitalisation. If you’re using Linux hosting, then that would account for the error. Linux is case-sensitive, so to Linux, Index.html and index.html are two different files. Check that your actual file names are identical to the names used in your code.
I would assume the reason for this happening is because the files have the wrong name as the links or are located in different folder directories, the rest of the code looks great so good job!
AirFor
I would assume the reason for this happening is because the files have the wrong name as the links or are located in different folder directories, the rest of the code looks great so good job!
AirFor,
All the files are in the same directories
Technobear
I am using Windows7 so the syntax has no effect
Thank you all for the replies, however I have solved the problem but I have no idea why.
I replaced this (after renaming the files)
<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 -->
with
<div id="navigation">
<a href="index1.html">Home</a><br>
<a href="about1.html">About Us</a><br>
<a href="contact1.html">Contact Us</a><br>
</div> <!-- end of navigation div -->
Basically I dispensed with the ‘list’ function and used the ‘br’ function
None at all. It worked fine here when I copied the code from your first post, and I can see no reason why it wouldn’t work for you. If you’re just testing locally on Windows then yes, you’re right, it’s not case-sensitive and that wouldn’t be the issue.
Removing the <li>s and using <br> instead is really not best practice. I can understand that you need the code to work on your local machine, but you don’t want to get into the habit of writing poor-quality code just to get around a local problem. Much better to try and discover the source of your local issue.
Edit:
I’ve just tested the same files on Windows 7, and there’s no problem here. As I said before, there’s no reason why there should be; using a list for navigation links has long been standard practice.
The previous mail was what I found out - another reason for my failure was although I saved all the files in the same directory I saved them as (file) .html. When I changed to the br function it was saved as (file) without the .html function - it worked
I deleted the .html from the originals and Hey Presto - it worked
If I recall correctly, more recent versions of Windows (e.g Win.7) hide the file extension - the .html or whatever - by default. You can go into the settings and change that, which is something I would always do. If your system is set to hide the extension, then when you save the file as index.html, your system will add an extension, and your file will end up as index.html.html. So when you try to visit that page, using a link to index.html, Windows can’t locate the file, because that’s not the actual filename. Does that make sense?
However, while I was copying, I noticed that you’ve referred to the first two files as Index.html and About.html, while in your code they’re index.html and about.html, without the capitalisation. If you’re using Linux hosting, then that would account for the error. Linux is case-sensitive, so to Linux, Index.html and index.html are two different files. Check that your actual file names are identical to the names used in your code.