I just purchased the book “build your own website the right way using html & css 2nd edition”
I am stuck with trying to get my html to display fig.2.16.
I am in the process of trying to insert an image but it will not show up on firefox or safari. Instead of a picture there is a place where the image is suppose to go with a question mark in the middle. I need help. thanks
here is my html write up: (I put in bold the image portion I need help on. It seems simple enough by the example but nothing. I am really new at this so sorry if this is a stupid question.)
<!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"/>
</head>
<body>
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK--let's make a splash!"
<h2>Welcome to our super-dooper Scuba site</h2>
[B]<p><img src="divers-circle.jpg" width="200" height="162" alt="A circle of divers practice their skills"/></p>[/B]
<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>
<h3>About Us</h3>
<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 trust-worthy 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.</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>
<h3>Contact Us</h3>
<p>To find out more, contact us.</a></p>
</body>
</html>
Just think of it like this: the HTML file looks for images in the same directory it’s in. If the image is in another directory, you have to tell the HTML file:
The likelihood is that the image is not where the browser thinks it is. The way you have written the HTML, the browser is looking for the image in the same directory that the HTML file is in. Check that it’s in the same location (and that it actually exists!).
Otherwise check the spelling, e.g. that it’s a hyphen and not an underscore (_).
Next time you post, please use the syntax highlighting like this:
[html]
<Your HTML here>
[/html]
So it looks like this:
<!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"/>
</head>
<body>
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK--let's make a splash!"
<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>
<h3>About Us</h3>
<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 trust-worthy 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.</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>
<h3>Contact Us</h3>
<p>To find out more, contact us</a></p>
</body>
</html>
thanks guys i’m gonna definitely post my html the way it should next time. It makes sense what you guys are saying…being a newbie sucks sometimes. appreciate it. I will let you guys know if it works
it worked! I just had to copy the image and paste it in my sites folder…the only thing weird is, in my site folder i have a subfolder “images”. I first moved the image there but it didn’t work. I then just pasted it directly into my sites folder then it worked. I don’t understand that but i’m just glad it worked! thanks!!
I see you are talking about page 49 and it asks you to place it in the “web site’s folder” like was mentioned above, which is the same folder as the page itself.
You also should really change the following code:
To the following official version:
<!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">
It might not make a lot of difference to how it displays in your browser for testing but my example is the correct way to write a Doctype declaration.
The doctype declaration must be exact (both in spelling and in case).
Since a lot of people regularly ask questions about this book SitePoint very generously gave me special access to this book for reference. So that I could help “newbies” faster when they quoted specific tasks or pages instead of having to “guess” what the task asked them to do.
You’ll find out it does matter later on in the book around p331 [Validating Your Web Pages] - I don’t know why Ian didn’t mention it earlier on in the book.
Personally, if I were you, I’d just copy and paste those three lines of:
<!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">
It will save you loads of time and even I don’t usually bother typing all that in by hand…
The rest of the page markup you should code by hand as much as possible for practice purposes, to build-up your skills and speed; if you want to get as good as me or something?
If you keep practising the code eventually it will be a little like riding a bike and you’ll instinctively know where the most of the errors are occurring, etc.
However, that is not the objective of the book clairs it teaches the use XHTML 1.0 Strict grammar and thus must use the appropriate doctype not some made-up value. HTML5 is not a standard an is not being used in this book!
Else it will not validate, which is covered later on in the book. Plus it would throw various browsers into the wrong ‘rendering mode’ for the examples within the book if you don’t use the full DOCTYPE.
Unfortunately, Robert is correct. If you’re going to use an HTML 5 doctype, you need to code in it. Mixing HTML 5 and XHTML 1.0 Strict will lead to problems.
Around these parts we recommend HTML 4.01 Strict, even though Ian Lloyd, who is held in great reverence, wrote his book for XHTML 1.0 Strict (before the general wisdom advised against using it any longer). HTML 5 will be the definitive “norm,” but that time isn’t here yet. (Robert, being an “XHTML Coder,” will disagree with me about the burgeoning obsolescence of XHTML!)
[ot]Max, it got sorted via PM why serving it without a namespace during ‘application/xhtml+xml’ (correct usage) would cause further rendering problems with that HTML5 nonsense on a minimal document.
Plus why we had to explicitly talk about ‘XHTML 1.0 Strict’ because of the book content itself asked for validation, etc.
Actually Ian didn’t really explain what XHTML was and wrongly referred to it as HTML throughout most of the book - obviously for simplicity about a Strict docytpe.[/ot]
HTML5 will be mainly redundant by the time it actually gets to final Recommendation but that’s life.
