Ok, I know nothing about building websites and feel a bit dumb asking this question… I have the book 'Build Your Own Website The Right Way by Ian Lloyd, its been fantastic so far but now I am stuck! I am on page 79 and can’t seem to form a link between my 3 pages, there is no change to my fonts, color etc. I have done the cache (shift F5 and still nothing). I have changed the name from BubbleUnder to my own name…
Below is my notepad - help!!! Been doing so well until now boooo want to give up!!! Just want my stylesheet to style!!!
<!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>NiCoL 'B' - Handmade in Koh Samui Womens Clothing - Handmade in Koh Samui Womens Fashion - Nikky Noodles Accessories</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>nicol-b.com</h1>
</div>
<div id="tagline">
<p> Handmade Womens Clothing and Accessories</p>
</div>
</div> <!-- end of header div -->
<div id="navigation div">
<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 online store</h2>
<p><img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practise their skills" /></p>
<p>Glad you could pop in and check out what myself (Nikky) and Colin have been designing for you. Enjoy my darlings, enjoy!</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
Ok yes I have saved the file as style1.css sorry about that! But you ask if I have saved the page where?? My style1css is saved in my notepad and my index page the same, am I just the most stupid person on here!!!
Nah, don’t worry, terminology only has any meaning if know what it refers to.
Basically, on your computer you have folders and files. An example of a file is, say, my-file.doc (in this case, a Microsoft Word file). A web page is typically a file on your computer called something like index.html. The code you posted will be inside a file like this, which ends in .html. Your style1.css is another file, a CSS file, due to the .css at the end.
These files are stored somewhere on your computer. It doesn’t matter what program you used to create them. If you used Notepad, for example, you still click Save As at the end and save your files as something.html or style1.css.
So what I’m saying is that you save both of these files into the same folder on your computer. You can call that folder anything you like, such as My First Site.
Double click on that folder to open it. Then double click on the something.html file and it will open the web page in your browser.
Oh ok, right I have saved these files in my notepad: index.html and style1.css.html is that right? Also on page 79 it says /* CSS for Bubble Under site */ should I be typing my http in between the / /. I just can’t move any further, there is no change to my font etc which leaves me being stuck on page 73. I have managed to do the span part but thats it.
Well, “in my notepad” means nothing to me. Do you know what I mean by folders?
Also on page 79 it says /* CSS for Bubble Under site */ should I be typing my http in between the / /.
Where did http come into it? Anyhow, no. In a CSS file, anything between /* */ is just comments you leave for yourself. They are not read by the browser. You don’t use those in a .html file.
I just can’t move any further, there is no change to my font etc which leaves me being stuck on page 73. I have managed to do the span part but thats it.
Perhaps describe in more detail what you are working with. On your computer, you should have a file that ends with .html and which contains the code you posted in your first post.
You should also have another file called style1.css. Any CSS that the book has recommended should be in that file. If both of these files are in the same folder, all should work well. Perhaps post what’s in your CSS file, so we can see if there are any errors in there.
Sorry, don’t know if this info of any use to but my style1.css in notepad reads the same in my explorer. Am I right to assume that is because I cannot do the link. There is still no change to the font or color which should be bold and blue! Have checked my typing details and can’t see anything. I have been trying some 4 hours now to resolve this but to no avail!!! help me help me help me!!!
You may have posted over me, so make sure to read the above.
You may need to go back a few steps in the book, as you’ve missed out on some basic concepts, it seems. Do read my comments above carefully. You shouldn ot be opening your style1.css file in a browser (I assume that’s what you mean by your ‘explorer’). You should just double click on your .html file and it will appear as a web site in your browser.
p {
font-weight: bold;
[COLOR="Red"]c[/COLOR]olor: blue;
}
But that code should still work. SO … the next thing to check is that you’ve actually saved style1.css into the same folder as the .html page. I need you to confirm this, as I’m sounding like a broken record.
OK, I’ve attached an example of what I mean. Download the attached link. Double click it, and it will ‘unzip’. Inside, you’ll find a folder called /nicol-b/. Double click on that. Then double click on the index.html file. You’ll find that you did set it up right. Your code works fine for me.
Thank you Ralph, does this mean once I have downloaded your zipfile I am good to go or do I go back a few steps and start again - I know I know but I did say I was a computer thicko!!!
That depends on what happens when you download the files. If what you see makes sense, then keep going, but if you don’t understand the files, then skim back over what you’ve already covered, just as revision.
Oh Ralph maybe I should stick to being a Fashion Designer, this is causing me many a blond moment - not blond by the way just me trying to laugh at my dire attempt at building my site!! I will recap and see what I missed!! OR hopefully you will have some magic code to unveil this strange computer language! yaaaay!
You shouldn’t be getting what you have in post #15 at all. It makes me wonder if you have opened the wrong file or haven’t given it the correct extension or encoding?
Don’t worry about being a Fashion Designer; background isn’t an obstacle neither is age. One of my friends, she went to university to do Fashion Design and is good with computers and some people aren’t as familiar with them but we have to all start somewhere.
Plus the volunteer SPF Community Mentors here are absolutely great at trying to help people with this type of stuff.
I’ll have a look at what’s been going on, and try and figure-out what the book should be asking you to do at the moment. Let’s see if we can get you moving forward together…
Your style sheet is called: style1.css and should have been separately created in notepad and have the *.css extension and be called style1.css
It should only contain the following text at the moment. Make sure your extension for the CSS file is *.css and NOT *.txt
File: style1.css
/*
CSS for NiCoL 'B' site
*/
p {
font-weight: bold;
color: blue;
}
It seems you know how to save XHTML files with *.html extension so that’s half of the battle. Since you do similar with the CSS file but save with *.css extension instead.
At the moment your index.html and style1.css files should be within the same folder probably called Web so that your XHTML page can link to the *.css file.
File: index.html
<!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>
<meta http-equiv="Content-Type" content=
"text/html; charset=UTF-8" />
<title>
NiCoL 'B' - Handmade in Koh Samui Womens Clothing -
Handmade in Koh Samui Womens Fashion - Nikky Noodles
Accessories
</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>
nicol-b.com
</h1>
</div>
<div id="tagline">
<p>
Handmade Womens Clothing and Accessories
</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 online store
</h2>
<p>
<img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills" />
</p>
<p>
Glad you could pop in and check out what myself (Nikky)
and Colin have been designing for you. Enjoy my darlings,
enjoy!
</p>
</div><!-- end of bodycontent div -->
</body>
</html>
You’ve made a few markup typos above but nothing major. So I have rewritten your index.html file so now it will work with your new shiny external CSS file.
ahhh Ralph I will look at my file but whoops I saved my css as a *txt, I correct it and see how I go, thank you so much for being patient and I am think now I will be good to go - love you Ralph - I know it will now!!! yayayay!
If what you see makes sense, then keep going, but if you don’t understand the files, then skim back over what you’ve already covered, just as revision.