Unable to link HTML file when moved into a directory/folder

[glennmello]

hello,

I have hit a wall, in that i cannot create a link when I move my html file into a new directory. I am on video 11...on "building a website". I have moved my CSS file into a new folder which sits on my desktop called cssTutorial. Once i move my css.html file into the new folder, my other pages continue to see the old link ie when the css.html file was on the same layer. I have checked my coding and everything appears to be working. I have moved ahead in the videos, however this topic i can see is very important and is revisited, so felt i need to fully understand this area. Any help would be greatly appreciated.

[Andrea]

You're talking about your css.html file. If a file ends with '.html', then it is an html NOT a css file - css files end with '.css'

 

When you move the file, you need to adjust the link to it to reflect the new path. If the link from your html document to your css document, while they were in the same folder, looked like this:

 

<link rel="stylesheet" type="text/css" href="stylesheet.css"media="all">

 

and you have now moved stylesheet.css into 'anotherfolder', it now has to point to it. If I assume that your 'anotherfolder' is inside the folder of your html document, then the new link will be:

 

<link rel="stylesheet" type="text/css" href="anohterfolder/stylesheet.css"media="all">

 

 

[glennmello]

Hi Andrea,

Thank you for your help. I actually moved ahead in the videos to the CSS topis and tried to link a .css file to my html and this would also not work. It seems i have missed an important step somewhere. In video 11 it works on creating links within the .html files and keeping the link even if moved to a new directory. I think i have been typing the exact coding which Stephan has been using in the video, however i keep on getting an error when jumping back from the CSS.html file to the other files (ie Index,ProductList, and TableTutorial).. I just noticed that when in my index.html file, and click on the css.html a new css.html shortcut key appears. this seems unusual as the css.html file should be in the new directory folder cssTutorial.

[Andrea]

Start out keeping it simple and keep it in the same folder as your html file. since I don't know what is specifically being discussed in your videos, it's kind of hard to be specific. Why don't you post the exact line of coding you're using?

 

And again - a file called 'CSS.html' is NOT a css file, it's an html file. And also, be careful, file names are case sensitive. So if your file is called FILE.html but your link goes to file.html, it won't work.

[glennmello]

Hi Andrea,

Please excuse my terminology... when i was referring to css i was implying the css.html file we were asked to build. I see that in the later videos there is discussion about merging css with html. At this stage i am focusing on the html files and moving html files into new directorys without losing the link.

 

Can you see any erros in my text below.

 

This is the index.html file

 

 

<img src="" boarder="0" alt="Back to Home">

 

<div id="navigation">

<ul>

<li> <a>Home</a></li>

<li> <a href="productList.html">Products</a></li>

<li> <a href="cssTutorial/CSS.html">CSS</a></li>

<li> <a href="tablesTutorial.html">TablesTutorial</a></li>

</ul>

</div>

 

 

 

This is the css.html file which now is in the directory cssTutorial folder.

 

 

<div id="navigation">

<ul>

<li> <a href="../index.html">Home</a></li>

<li> <a href="../productList.html">Products</a></li>

<li>CSS</li>

<li> <a href="../tablesTutorial.html">Tables

 

Tutorial</a></li>

</ul>

 

</div>

[glennmello]

Hi Andrea,

I have amended the code to note the css.html, now in small case.

 

<li> <a href="cssTutorial/css.html">CSS</a></li>

 

This change has no effect... still getting error when jumping between links.

[Andrea]

Either you're still confused about the file types, or I'm totally missing what you're talking about.

 

A regular html file - for example index.html (or css.html) - will have this kind of code:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>A good name for your page</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="stylesheet.css"media="all">

</head>

<body">
<div id="wrapper">

<div id="header"><h1>Page Header Info</h1></div>


<div id="navigation"><ul>
<li id="home"><a href="#">HOME</a></li>
<li id="work"><a href="projects.html">Projects</a></li>
<li id="specials" ><a href="specials.html">SPECIAL deals</a></li>
<li id="testimonials"><a href="testimonials.html">Testimonials</a></li>
<li id="contact" ><a href="contact.html">CONTACT US</a></li>
</ul>
</div>


<div id="content">
<p>some content</p>
</div>

</body>
</html>

Just an example

 

And a css file - for example stylesheet.css - would look like this:

/* CSS Document */
* {
margin: 0;
padding: 0;
}

body {
background: #d5d5e6 url('../pics/paint.png');
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #19194c;
}
#wrapper {
width: 990px;
margin: 0 auto;
background: #333399;
}

#header {
color: #d5d5e6;
font-family:Rockwell, Geneva, Arial, Helvetica, sans-serif;
height: 200px;
}

[glennmello]

Hi Andrea,

THank you very much for your help and patience. in the course there are 4 html pages we created with the names

 

index

css

table tutorial

product list

 

Initially all 4 pages were seen on the desktop. Links were created so that it was possible to link between all 4 pages. The problem started when i putt the css into a new folder called cssTutorial see on the desktop. My links no longer worked even when i made the necessary changes in the html coding in all pages.

 

Apologies for the confusion... right now the css (name) is just a name of one of the files we were asked to call. I havent really reached the .css section of the course as of yet as i have hit a rode block with the links within the html section of the course.

 

I see that in your coding of the html in the list area, an added code id= is used before the <a href= . Is my link not working because i am not using the id= coding?

[glennmello]

Hi Andrea,

I have to dash but will revisit the forum on this topic in 5 hours.

 

Thank you for your help so far.

[falkencreative]

Just thought I would chime in.. Let's assume this is your file structure:

 

index.html

folder_name/test.html

 

Assuming you are viewing index.html, you should be able to link to the test.html file using href="folder_name/test.html". If you are viewing test.html, in order to link back to index.html, you would need to link to the file using href="../index.html". The "../" moves out of the "folder_name" folder so index.html can be accessed. It looks like you are doing this part correctly.

 

Also, just in case... Beginners often run into issues with file extensions. In some cases, you will name a file "test.html" but the operating system hides the real file extension and the file is actually called "test.html.txt" so your links don't work. For more info on this, you can check this topic: http://www.killersites.com/community/index.php?/topic/3010-cant-open-my-website

[Andrea]

I see that in your coding of the html in the list area, an added code id= is used before the <a href= . Is my link not working because i am not using the id= coding?

Don't use the code I posted as a reference, I was merely trying to give you an example of the different looks of html vs css.

 

Also, while I haven't watched the video, you say 4 HTML files were created - one by the name 'css' - that's what's puzzling me. Granted, the file name itself is irrelevant, aside from the first page you want shown when someone goes to www.yoururl.com - but it's usually pretty helpful to give meaningful names. So for example:

 

index.html

products.html

contact.html

portfolio.html

 

css stands for Cascading Style Sheet and there's really no logical reason to name a page css.html (unless, it's about stylesheets) - Mainly, I want to make sure you're not confusing html and css pages and their usage. Can you post the ENTIRE code you have on your html page and your css page? That, plus what Ben said about the folder structure.

[glennmello]

Hi Ben,

Thank you very much for the help. I moved on to the topic dealing with html and css integration. My css code was not working, but as you pointed out in your email the file extension was not correct. Once corrected everything seems to be working on that point. What still is an issue is when i move a file into another folder all the links fail. I appear to have the correct html coding, however, the erros keep on popping up when clicking on the links.

[glennmello]

Hi Guys,

I figured it out... stumbled across an old dialogue where Ben had been assisting another person. The reason why i kept on losing my links when moving the html file into a new folder was that, i would not re-open the notepad where the new file was located to enter the ../ coding. Instead i would enter the ../ coding in notepad where the original location of the html file was located... in my case on the desktop. Not sure if this makes any sense but it worked. i learnt also that using the right button and selecting "open with" and choosing notepad is the way to edit the info. I made the mistake at the very beginning of creating a new text doc in notepad for each of my folders and then resaving as an html.

 

Lots of fun this is!!... Definatley like a puzzle.....

 

Thanks again for all the help.....

[falkencreative]

Not sure if this makes any sense but it worked.

I'm not sure if I 100% understand you, but I'm glad you got it figured out. Hopefully things will work smoother for you now that you have this figured out.