I have a copy of build your own website the right way" 2nd edition.
I am currently going through chapter 2 and have come across a few issues.
Firstly , the divers pausing in a circle image does not seem to appear on the webapage.
Secondly i have tried to link the 3 web pages. The home page has all the links on which is , Home, about us and contact us. When I click on about us or contact us it takes me to the right page but the links are longer there.
Could someone please assist?
the divers pausing in a circle image does not seem to appear on the webapage.
That means to ‘path’ to the file is wrong, most likely. You need to make sure the image is stored where you are telling the browser to look for it. Could you describe where the image is stored in relation to the page, and show the code you use to link to it?
The home page has all the links on which is , Home, about us and contact us. When I click on about us or contact us it takes me to the right page but the links are longer there.
That may be your problem then. By ‘saved it in pictures’, do you mean a folder called ‘pictures’? Because your link is telling the browser to look for the image in the same folder as the page itself. Let’s say that your page (index.html) is in a folder called ‘my_site’, and let’s say there’s another folder inside that folder called ‘pitcures’. Then your src link should be
That’s why I asked where your picture is located in relation to the page that is linking to it. This is a very important question. So could you describe your ‘file structure’?
EDIT: I’ve just looked at the book. Note that, on page 50, it says to place the image in the same folder as the HTML page. That implies—“don’t put it in another folder inside that folder”. If you do that, you have to change the link, as I showed above.
yes I saved in the pictures file. Its not a seperate folder i created, its where all my pictures go . i tried src=“pictures/drivers-circle.jpg” but nothing happened. The border of the picture is there wth a red cross in top left corner
The pictures folder is underneath the documents folder. I click on the bottom left windows icon to get to pictures. Its not in the same folder as the html folder. the html documents i saved in a folder called web design. I have access to this folder from desktop. the name is in lower case divers-circle.jpg
Unfortunately, that doesn’t mean much to me. ‘Underneath’ to me means something different from ‘inside’. For this to work:
src="pictures/drivers-circle.jpg"
the /pictures/ folder must be directly inside the web design folder. E.g.
[B]/web-design-folder/[/B] [I][SIZE=1](the container folder on your desktop)[/SIZE][/I]
index.html
/pictures/ [I][SIZE=1](another folder called 'pictures' inside your web-design-folder that contains the picture in question)[/SIZE][/I]
Are you sure you have spelt the filename correctly as on [p48] because in your prior posts you haven’t and didn’t type: divers-circle.jpg you actually misspelt it as: d[r]ivers-circle.jpg
The image of the “Divers” should be in the same folder as your index.html and be called: divers-circle.jpg and nothing else or it won’t show. It should NOT be within a ‘pictures’ folder or any other different one.
It should show now display once you have refreshed/reloaded the browser page if it’s spelt correctly and in the same folder as ‘index.html’, if it isn’t displaying the image (but the files are both in the same folder) you will most likely have made another typo somewhere in your index.html file.
If you are still having issues after double-checking and reloading the browser. Then copy-and-paste the full page code of your file called: index.html that you are working on and post it here so we can see if anything else went wrong.
So then we can eliminate whether it’s a typo of a misplacement of your *.jpg file as really those two scenarios are the most likely cause in most cases - in nearly all cases - where this happens.
<!Doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/Xhtml">
<head>
<title>Bubble Under-The diving club for the south-west uk</title>
<meta http-equiv="content-type"
content="text/html; 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="bubbleunder2.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-dopper scuba site</h2>
<p><img src="web-design/divers-circle.jpg" class="feature" 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
underwater navigation skills and successfully found your way to the
start point- or in this case, our home page.</p>
</div> <!-- end of body content div -->
</body>
</html>
You have several typos but the main part that matters the most is you haven’t got the path to the image correct.
I’ll give you a “major tip” here, rather than type the whole 3 lines of Doctype it would be easier to copy-and-paste one from an official source - even I don’t type those out by hand.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Since it is ‘case sensitive’ and if you compare this with your sample, it differs so change those three lines with my code here.
Then like we mentioned above the image is meant to reside in the same folder as your page in this case hence generically: <img src=“example.png” alt=“” /> you don’t need to add the folder path since it is relative to the index.html file itself.
Therefore change your:
To the following:
<img src="divers-circle.jpg" class="feature" width="200" height="162"
alt="A circle of divers practice their skills"/>
I suspect you got confused with the folders and that index.htmland divers-circle.jpg actually reside in a folder on your PC called “web-design”. Since both files are already there you do NOT need add anything else - it’s relative to itself.
It will now work assuming both those files are where they are supposed to be.
Thank you the picture is now showing.
I have another problem. when I try to go back to the homepage from the contact page or about us page, it wont display the webpage.
I suspect without seeing those two other files you have made another typo in the filename or path - exactly like with the image but this time within the anchor element.
Upon those other pages, which also should be in the same folder you will have somewhere something similar to this:
<a href="index.html">Some Text</a>
That also must be spelt correctly and match the file name, location and extension and that will link to the file: index.html and try to load it, i.e. go to that page.
That link will link back to your file called ‘index.html’ (in the same folder) make sure your index page is called index.html and NOT index.htm if it doesn’t link back then you’ve made a typo… or the file index.html has not been named that by you.
The browser will only ever try to go to wherever it is told; so if you ever spell the path or filename wrong and it will just get lost… and you’ll not get a working link that goes anywhere. In the case of the IMG (as you found out) no image displaying and a broken image link.
I assume it is now working and it was a pleasure to help, even I at one stage probably made similar errors when I first started teaching myself aeons ago.
This may have already been answered but please can someone help.
I have recently purchased “Build your own website the rightway using HTML & CSS, 2nd edition” I have couple of technical issues:
In chapter 2, the links between the 3 web pages for the Diving club website aren’t working on any of the pages. keep getting page cannot be found message.
In Chapter 3, the text colour isn’t displaying.
<p style=“colour: blue; font-weight: bold;”>Bubble Under is a group…
The text is showing in bold but not in blue. I have tried other colours such as red and yellow, they also dont work
In CSS colour is spelt using the lazy US spelling; color so change the spelling there and that should then display in blue. If you look at thes recent thread about linking between pages it might help you a little?
Though if you are still having problems copy-and-paste your HTML for the index.html file in a new post in the Just Staring Your Design forum so we can determine if it is a typo in the markup or you have actually misplaced those files or saved them with the wrong name, etc.
