Using has all of the issues on anchor-tags that were described in this question on base tags making it hard to use on my site.
I have a navigation menu in my site which references different parts of my site
for example
main/
|_index.html
|_section1/
|_1a.html
|_1b.html
and the navigation section on each page looks like
<div id="nav">
<ul>
<li>home</li>
<li>1a</li>
<li>1b</li>
</ul>
</div>
This works fine for all the pages on in the main folder but for pretty obvious reasons fails when I'm viewing a page in the section1 folder. I can't use <base> because I have a large number of anchors in documents (and I'm using markdown so I cant change the reference format easily).
I'm concerned that if I use absolute references on all my pages, when I upload this site to a server it will be a huge amount of work to replace the absolute reference on each page with a different one.
In addition main is a few levels down in my /home/ directory and I would prefer not to have to type a long path-name each time I refer to something if possible
I guess if I was pushed I could use sed to change all instances of the absolute path with something else but I wondered if there was an easier, obvious way of dealing with this in html that I'm missing. thanks
You can make use of htaccess, if you can't use <base> in HTML
Related
I seem to be able to find either questions about persistent menus, or using relative paths but not at the same time.
I'm actually not a front end dev, but I know how to use markdown. I wrote some documentation to code I wrote and my boss has me add it to our website. So far so good. But because our site is so small, nothing is in a directory structure (I mean, our images are in an images folder, our layouts are in a _layouts folder, but all of our pages themselves just sit in the top level directory. Now that I have 5 or 6 pages sitting there, my boss asked me to reorganize them into their own sub-directory. Lets just call that directory /myfiles/. So far so good. I refactored all of my files into that directory, and changed the references to them from "fileone.html" "filetwo.html" to "/myfiles/fileone.html" "/myfiles/filetwo.html" etc etc.
However, we have a persistent menu at the top of all of our pages (for the sake of arguing, lets just say they're "home" "docs" "about us" and now "myfiles". So what happens is, everything works fine when navigating from the home page. but when I go to anything inside "myfiles" and then try to click a menu item (for example, "docs") it tries sending me to myfiles/docs/thispage.html. That's obviously not desirable.
I understand the concept of relative and absolute paths. The home page link is always the actual url to the top level website so that always works, but every other page tries to navigate from inside of myfiles now which is wrong.
How can I fix this without changing the code of every single other menu item?
Maybe this is silly, but given my lack of confidence in my front-end skills, I generally don't want to change any code other than my own. I don't want to go around restructuring the entire site, just my files.
Is there a way to accommodate my new directory in our website given our persistent menu without having to change the paths of every other menu item to have a relative path from the root directory?
Again, I found lots of questions with the individual parts included, but not the whole thing together.
I won't give the entire code for the whole website, but the relevant part is in the "page.html" layout that applies to every "page" on the site. Particularly this line:
<a class="menu-item" style="..." href="{{site.baseurl}}/"<img src="https://coolwebsite.gov/content/uploads/2021/10/sitelogo.png" id="SiteLogo" alt=Spashimage" height="40"></a> < class="menu-item" href="aboutus.html">About us</a> <a class="menu-item" href= "docs.html">Docs</a> <a class="menu-item" href="/myfiles/thisfile.html">thisfile</a>
any help would be very appreciated
Easiest solution is probably to include a <base> element in the <head> of your document on every page. Hopefully the <head> is in some template so you only really have one place to update.
That'll allow you to specify the base path that relative URLs will work from.
Probably you would just do <base href="/" />. Then all relative links will act as if the document you're currently looking at in the browser lived in your root directory, even if it doesn't.
I'm developing a website which will live on https://www.example.com/. While developing, and later as a test site, it's at http://127.0.0.1/temp-dir-for-my-project/.
This means that I currently have a bunch of hrefs in the HTML, as well as CSS files, starting with /temp-dir-for-my-project/, which obviously break once I'm done and upload it to the live site. Over there, it should be / instead.
Sadly, the BASE element, which I thought would solve this, only applies to relative paths. For example, ./meow.html with /temp-dir-for-my-project/ as the BASE would refer to /temp-dir-for-my-project/meow.html, but /meow.html in the same situation would be... /meow.html, because it's an "absolute" path.
Before you say "just use relative paths, then!", well... If I do that, I have to keep track of in which "dir" I am. For example, for the webpage at https://www.example.com/test.html, I could do: ./other.html and it would work both on the live site and in my test site (assuming the BASE is set). But the webpage at https://www.example.com/subdir/test.html would have to link to './../other.html' or else it wouldn't link to the correct page.
This gets messy. I wish I could use "absolute" paths and still have the BASE be the... base. Is there a way, or am I forced to use ./../../blabla... for any page located in subdirs (whether those be real subdirs or just how the URL is rewritten to look)?
I have been working on a local website for awhile now, but I can't figure out how to link the html files I have created together so that viewers on other computers can click through them like a website.
I am building the site on my own computer, but have two other people who I want to send the files to. I can link the html pages together so they click through fine on my computer, but when I send them to the other people, the links don't work.
I imagine this is just a simple solution, but I can't seem to find it anywhere. Any help is much appreciated.
(1) Assuming you have all html files in a single folder, e.g. "somefolder" and you used
<a href="C:\somepath\somefolder\filename.html">
to reference other html files, then just replace it with a relative path:
<a href="filename.html">
(2) If you sent the pack of html pages as an archive, then it has to be extracted completely for links to work.
I think, your links are in the form C:\Users\Username\... etc. You should replace these absolute paths by relative paths.
See this answer: https://stackoverflow.com/a/22375071/2321643
I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.
I have a site with static HTML pages in the home directory. These HTML pages use relative paths to refer to images, css, and links i.e.
<img src="images/myimg.gif">
and
Contact Us
I also have a monolithic script whose URL is, i.e. http://mysite.com/myScript which uses "extra path info" to select functions... i.e. http://mysite.com/myScript/products shows a list of products. So in HTML generated from the script I need to refer to images, css and links like this:
<img src="../images/myimg.gif">
and
Contact Us
The problem is now I want to start moving common HTML into include files, (e.g. common header and footer), but the fact that the script and the static HTML refer to relative resources in different ways is complicating matters.
I don't want to use absolute paths because that messes up my colleague's work when she tries to work on the pages in DramWeaver, and it also makes the site less flexible.
What's the best way to solve this issue? One idea I had was to use URL rewriting in Apache to allow the URL to http://mysite.com/products to really use http://mysite.com/myScript/products but I don't have experience with URL rewriting so I don't know how easy that would be. Another idea I had was to use the META BASE attribute in HTML but I don't like the fact that I would have to hard-code that into every HTML page, and it would have to have the full URL hard-coded (e.g. http://mysite.com/) into each one. Any advice?
Can't you refer to your images with a slash at the beginning so all files linked to are from the root, no matter how deep you are in the directory structure you are? E.g:
<img src="/images/myimg.gif" />
EDIT:
You could use $_SERVER to get the path then use substr_count to count the number of slashes in the path. Add as many ../'s as you need based on that number. Would that work for you?