I AM READING THE SITE POINT BOOK. EVERYTHING WAS GOING WELL UNTIL I TRIED TO LINK THREE PAGES TOGETHER.I TYPED IN THE ANCHORS AND WHEN I VIEW THE PAGES IN MY BROWSER the pages are not linked. THEY LOOK CORRECT. I CHECKED THE CODE AND AND REFRESHED THE FILE, ITS CORRECT BUT WHEN I CLICK ON THE LINKS I DON’T GO FROM ONE PAGE TO ANOTHER. THEN I MOVED ON TO THE CSS STYLING. WHEN I TRY TO LINK A CSS FILE TO THE THREE PAGES THERE IS NO CHANGE. I REFRESH PAGES AND CHECKED THE CODE A HUNDRED TIMES BUT THEY ARE NOT LINKED AND THE PAGES DO NOT REFLECT THE CHANGES ON THE CSS FILE I CREATED. I AM USING HTML KIT TO WRITE THE CODE AND WONDER IF I AM SAVING THE FILES INCORRECTLY OR SOMETHING LIKE THAT. IM TRYING TO FIGURE OUT WHAT IM DOING WRONG. MAYBE I SHOULD USE A MORE SIMPLE PROGRAM TO WRITE THE CODE. PLEASE HELP
Posting a link if the site is live will go a long way to figuring out what is working and what is not.
If you can’t post a link, post the HTML and CSS for one of the pages. Then one of the experts will be able to help.
I assume this question is regarding Ian Lloyd’s book am I correct? If so, we’ll get this post moved to the correct place soon. It sounds like you have the wrong file extensions or names.
Though like was said it would help if you posted a sample of the code you have written so we can see where you went wrong.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About Bubble Under.com:whowe are; what this site is for.</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="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 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>
<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>
/*CSS for bubble under site*/
body {
font-family: Verdana, Helvetica, Aerial, sans-serif;
background-color: #e2edff;
line-height: 125%
paddingt: 15px;}
h1 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
li {
font-size: small;
}
h2 {
color: blue;
font-size: medium;
font-weight: small;
}
P { font-size: small;
color: navy;
}
by the way. i am reading Ian Lloyds book
You have about two small errors with the code I suspect you are around page 90 at the moment? Even though you had errors it still would have linked to the files: index.html, about.html and contact.html
You missed a > off your first P element.
<p Bubble Under is a group of diving enthusiasts …
Should be:
[COLOR=Magenta]<p>[/COLOR]Bubble Under is a group of diving enthusiasts ...
You had some spelling errors in your CSS, which would have stopped it working correctly so I’ve fixed those:
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
The h2 font-weight should have been the word: ‘normal’ rather than ‘small’ so change that to the following:
font-weight: normal;
Now, regarding your main problem, which seems to be hyperlinks to files? HTML-Kit is perfectly fine.
However, I suspect either you aren’t saving the files with *.html as their file extension for the XHTML files.
Else you are not saving them in the correct place so double check all the XHTML and CSS files are in the same directory that is important and check the spelling of the files match: index.html, about.html and contact.html
Make sure your file extensions for the XHTML are *.html and NOT *.htm
Obviously save your files first before loading in the browser. Because the book asked for *.html and HTML-Kit usually saves webpages with *.htm (default).
So if it has saved them as *.htm just rename the extension to *.html and it will work. The CSS file obviously should have *.css as the file extension.
What Operating System version and browsers are you using?
i am using firefox. also html kit has the option to preview while you are typing code.
when you say to save the files in the same directory, do you mean in the same folder? because they are.
when i save something in html kit, it gives a couple options for HTML files (*.html; .htm)
or HTML document (.html; .htm) also HTML files (.htm; *.html)
when i open the files they are firefox documents. i dont really understand that. as you can see i am a total novice but really want to learn this. thank you for helping
Thanks for taking the caps lock off.
Yes, I mean save them in the ‘same folder’ the preview in HTML-Kit shouldn’t really be used.
You should use save first and use Firefox to view the file you get far better results and the links might then work.
Your XHTML files should have the *.html extension. Therefore in HTML-Kit:
File > Save As: index.html (file type you can leave blank) or choose the one that says HTML Files (*.html; *htm) then it will add *.html rather than *htm make sure it says *.html first and NOT *.htm.
There is something wrong with your extensions or filenames (if they are in the same folder) which will be called “Web” most likely?
Alternatively open the files in Notepad and follow page 31-32 for saving the markup. A good tip is to make sure in that you don’t have your file extensions hidden for known file types so that you don’t accidentally save as *.txt
Firefox will have become your default browser if it says they are ‘Firefox Documents’ in Windows Explorer or My Computer, etc. You probally didn’t realise you set it as ‘default browser’.
You can open the files in Firefox directly and double check the extension says *.html on the end of the browser location/address bar or ‘awesome bar’ which it seems to call itself nowadays.
This type of question is a frequent one at the forums and usually it’s just small typos that occur when saving file names that affects things or small slip-ups with which folder files have be placed into.
Hopefully we’ll get to the bottom of it soon. So try saving the files again and make sure you use the browser to view the saved files and that they have *.html at the end.
i copied all the files and saved them in notepad instead of html kit, and everything works. a million thanks for your time and guidance. now i can move on instead of wallowing around. this is great fun when it works. again thank you so much and it is nice to know that there is help out there.
No worries, somehow you’d saved the files with the wrong extension by the sounds of things. I suspect you selected *.htm within HTML-Kit rather than *.html obviously with a hyperlink the extension much match exactly.
For example if you had a file linking to: ‘about.html’; it must have; ‘about.html’ (for the hyperlink). Though if you had a file called: ‘about.htm’ it must have the exact filename; ‘about.htm’ (within the hyperlink).
I suspect similar happened with your CSS you didn’t have; *.css at the end for whatever strange reason. But I am glad it worked.