I have a question , wondering if it is possible or not !!!
Here Is a link that will prove I am not much of a noob!
collegewebsite.zip
Now the question.
I am creating a project called Coffee Cafe for my tuition assignment.
I will be using a lot of css and html with javascript (only)
I have the project folders as shown below
webfolders
now I open cafe.html
and put a link in it to go to a page say "homepage.html" in "links" folder above.
NOW CAN I DO SOMETHING THAT WHEN I CLICK ON A LINK IN HOMEPAGE.HTML (for eg. Back) I CAN GO BACK TO THE PAGE IN THE ROOT FOLDER cafe.html
There is a way to do it is to use the full path of cafe.html in homepage.html
for eg.
<a href="c:\cafe website\cafe.html"> <==this is full path in c: drive
<a href="cafe.html"> <== this only works when the files are int the same root directory,,,
But in this example they are not !
Can I get a solution for this or shall I put all the files in the root directory as a last resort ?
Thanks in advance!!
You should not set your anchor tag href value to a physical location of the file. It should be relative or absolute url.
So instead of
<a href="c:\cafe website\cafe.html">
You should use <a href="../cafe.html">Cafe</cafe>
or home
When you put ../, It goes back to one level back, that means when you use href="../cafe.html" in a page which resides under the links folder, clicking on that will go one level back (which is root) and look for cafe.html file.
If this is your file structure:
/
/links/homepage.html
/cafe.html
To link from homepage.html to cafe.html, you would use:
<a href="../cafe.html">
The .. denotes: "go back one directory".
You could even combine that, if you had a more complex directory structure. (e.g. href="../../cafe.html").
Another way to link would be as follows:
<a href="/cafe.html">
If you start your url reference with /, you're saying to start from the root.
Related
I included a navigation element in multiple pages like this:
<script> $(function(){ $("#includedNavigation").load("navigation.html"); }); </script>
But this works just for html-files in the same directory "subdir". The navigation.html cannot be reached from the index.html in the upper main directory "dir".
If I add the upper pattern to the index.html in the directory above the navigation.html is reached correctly but the relative links do not work anymore. I don't want to replace the relative links by absolute paths.
Is it possible to switch between different links in navigation.htmldepending on wherefrom it is called?
Any other ideas?
Thanks a lot!
Since this is a multiple page website that reuses the same menu on all its pages, there's no functional or logical difference between page1.html and index.html apart from index probably being the first page you see. So I would just put index.html in the same folder and call it a day. It would make sense to have it on an upper level if the index page would load all the other pages into itself. Then the menu would only need to be included on the index page.
A folder structure is a project requirement, not a technical requirement. In development, all pages are likewise divided into sub directories and such to organize the files. But with running the deployment script to copy everything into production, the deploy script concatenates everything into one file anyway and the entire folder structure disappear.
It's perfectly normal to have a clear folder structure for development organised by business needs and also have a completely different folder structure for live code organised by technical needs.
you have to give the path of navigation.html file.
$(function(){ $("#includedNavigation").load("./dir/navigation.html"); });
like this
Can you use something like this
<link rel="import" href="navigation.html">
Or
$(function(){ $("#includedNavigation").load("path/to/navigation.html"); });
I am trying to link my html files which are under the same folder called "templates". One of the file is called "home.html" which has a link to another html file called "page2.html". The following code works perfectly:
Click Me
But, this gives the url something link this: 127.0.0.1:8000/page2 instead of what I actually want. I want it to be something link this: 127.0.0.1:8000/home/page2. I am making a django web app, but I am new to linking the web pages in the desired form.
Is there a way in which I can achieve the above using html tag or using javascript or something from the django app?
Is it related to absolute or relative path? If yes, how? Kindly help...
You can't have home/html in the path because home.html is a HTML file, not a folder. If you are really keen to have your path like 127.0.0.1:8000/home/page2 , then create a folder called home, move the page2.html into that folder and call it from there. Wouldn't recommend that, though.
If your current path is for example 127.0.0.1:8000/home you can to this like that: Click me
That's becaust ./ is your current directory and ../ is upper directory
EDIT: You should check routing in Django
There's nothing complicated about this. If you want your link to go to "/home/page2", then that's what you should use in the href.
However, there is a better way of doing this in Django; you should use the {% url %} tag. Assuming you have defined your URL in urls.py with the name "page2", then do <a href="{% url "page2" %}">
I want to use Javascript to open an HTML page which is in a sub-folder, but continue to have the path relative to my top level files. I have the code below and the HTML link works before the page is changed but not afterwards, because everything is then relative to the sub-page. If I click on the link after the page has been changed, it tries to open 'myFolder/myPage.html' which of course does not exist:
.. in HTML
My Page Link
.. in javascript
var pageInFolder = 'myFolder/mySubPage.html';
window.location.href = pageInFolder;
I could change my links to have absolute paths, but is there a way to display the page in the folder, but keep the path unchanged at my top level?
You can use the HTML <base> tag. It lets you define where paths are relative to.
Something like:
<base href="http://www.example.com">
It is recommended that you put the base tag as the first tag inside the <head> so all paths in your file appear after it. With my example, even if you're in myFolder, any relative path will refer to http://www.example.com/myPage.html, not http://www.example.com/myFolder/myPage.html
Note though, this doesn't just apply to <a href="">. It applies to images, JavaScript files, CSS files, etc. Anything where you'd use a path.
Just add / at the beginning of your relative paths
var pageInFolder = '/myFolder/mySubPage.html';
I've been wondering how do other websites do their navigation links.
What most beginners like me do is put the whole link inside the tag
News
or something like this:
News
But I've seen a lot of websites lately that does this:
News
and then the browser address bar display it like this
http://www.example.com/news/
First I want to know how do you call this method? and what are the advantages of doing this. and lastly, how does it actually work?.
I want to research about it but I don't know what to type on google. I did try a lot of keywords I could think of that relates to this but nothing comes close to what I'm looking for
There's 4 basic link types:
self-link: href="". This is a short-hand form of "link to yourself". You'll see it used for in-page anchors, such as href="#top" and the link.
relative: href="news.html". Clicking on this will try to load a news.html page in the SAME directory as the page that the link is contained in, so if you're on http://example.com/foo/bar.html, you'll be trying to load http://example.com/foo/news.html.
local absolute: href="/news.html". This will try to load a news.html page from the document root of the site. If you're on http://example.com/foo/bar/html, you'll be trying to load http://example.com/news.html. The leading / is what makes this a local absolute instead of a relative path.
full absolute: href="http://example.com/news.html". A full-blown url, which can point to a completely different site if need be. It CAN be point to the exact same site you're on, but essentially it's a "go over there, no matter where over there is".
This has to do with HTML, not JavaScript. Your first snippet uses an absolute path. The second two use relative paths. For more information, read this: http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
The best practice (for me?) is the first one, you need to write all the URL for the most readable code..
The first and the 3rd link are the same if you are on the same domain name..
The 2nd is different, if you are on www.example.com/index.html you'll go to www.example.com/news.html..
But if you are on www.example.com/categoy/index.html you'll be redirected to www.example.com/categoy/news.html and not on root directory.
But I don't understand why you talk about /news/ directory ?
Relative URL's will probably get you some results.
news.html will navigate relative to your current location
/news.html will navigate relative to the root domain name
For example if your current location is http://example.com/sub/ :
href="news.html" will get you to http://example.com/sub/news.html
but
href="/news.html" will get you to http://example.com/news.html
See also http://www.w3.org/TR/WD-html40-970917/htmlweb.html#h-5.1.2
If i am having main folder, inside the main folder there are two sub-folder and in each sub-folder there is a page, example(in 1st sub-folder there is one.html and in 2nd there is two.html) and in main-folder i have index.html which has navigation menu bar, now how can i link them in menu bar without using absolute path. Help me if there is any script in javascript or jquery.
Do you mean something like this?
From main folder:
My Page
From sub-folder to another sub-folder:
My Page
In JavaScript sub-folder to another sub-folder dynamically:
HTML:
<a id="link"> My Page </a>
JavaScript:
var a = document.getElementById('link');
var subfolder = ... ; // your subfolder
var page = ... ; // your page to go to
a.href = "../"+subfolder+"/"+page;
What you want is root relative paths: http://ifyoucodeittheywill.com/2009/03/absolute-relative-and-root-relative-urls/
These always take the form of:
/Level1/Level2/file.html
Being root relative it always references the root point of the website. This is also very handy for your javascript and css resources, in that the link to them is always the same regardless of the folder depth or site architecture. E.g.
/Script/myScript.js
/Style/site.css
Will work regardless of where file calling the resources is located in the website.