SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Having Difficulty with linking pages together

    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

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,231
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    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?

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by TechnoBear; Nov 28, 2012 at 11:36. Reason: Code tags added

  4. #4
    SitePoint Mentor silver trophybronze trophy
    Mikl's Avatar
    Join Date
    Dec 2011
    Location
    Edinburgh, Scotland
    Posts
    1,571
    Mentioned
    63 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,231
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    did I spell malito wrong, if so how is it written?

  8. #8
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried putting all files in one folder but that didn't work

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,231
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by jay45 View Post
    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?

  10. #10
    SitePoint Mentor silver trophybronze trophy
    Mikl's Avatar
    Join Date
    Dec 2011
    Location
    Edinburgh, Scotland
    Posts
    1,571
    Mentioned
    63 Post(s)
    Tagged
    0 Thread(s)
    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



  11. #11
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the correction

  12. #12
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YES! it's working now, thanks

  13. #13
    SitePoint Mentor silver trophybronze trophy
    Mikl's Avatar
    Join Date
    Dec 2011
    Location
    Edinburgh, Scotland
    Posts
    1,571
    Mentioned
    63 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,231
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by jay45 View Post
    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. )


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •