Apply HTML Base URL To Images Only Not Href - html

I have svn setup and wamp installed on my local machine. Im going to use this to test and then commit. My issue is that the /images directory is 25gb. I didnt add this directory to SVN and i dont want to have to keep this directory up to date all the time.
Is it possible to apply html base just to images.
<base href="http://website.net">
This way i can use the images from the live server, but clicking links and stuff wont redirect me to the live site.
I have code set up to determine whether it is being run on the live machine or test so it is possible for me to add some badly written code so long as it does the job as it wont effect the live machine.

Related

Web development with PuTTY and SSH: Why is the webpage I'm trying to change the code for linking to a deleted directory and not updating?

This is my first time trying web development and creating an actual website (not just a page on Repl or independent html/css page). I have a domain name, and the website connected to it that I'm trying to edit previously had some code on it.
I'm trying to use PuTTY and SSH to transfer the html and css files I want to the remote location.
However, this is what the user point-of-view looks like right now
I'm really confused because gittwo is a directory (with the html + css files I want) that I already deleted. I'm also confused why the main website shows a link to that directory instead of just displaying the image of the website I want. Before gittwo was deleted, it was directly under the main directory where code for the website should be.
Furthermore, now that gittwo is deleted, I'm wondering why the webpage still displays a link to that directory instead of showing the new directory I created, public_html. This is how the main directory looks like on Putty Do you know why this is happening?
I'm really new to all this and I know I'm confused about more things than one here and my question probably reflects that, so please let me know what parts I could maybe clarify!

How can I access root directory in HTML? (Using / is not working)

So I'm trying to access my root directory in HTML but when I use / it is not working. So for example I'm trying to get my navigation css by doing:
<link rel="stylesheet" href="/nav.css">
The weird thing is, it works perfectly fine when I am using VS Code with the live server extension, but I just recently noticed when I run the index.html file alone none of the links starting with the / work. I know this is the issue too, because when I take away the / in the above line, it works perfectly fine again (only for the homepage page in the root directory already).
As Quentin points out, if you're loading the index.html file locally without a server, the root directory will be the root of your file system. If your requirement is for the index.html file to work locally on your professor's machine without a web server, you should use relative paths.
In order to traverse back up your file system from the current file, you can use paths that start with ../
when I run the index.html file alone none of the links starting with the / work
If you are running index.html alone then the links starting with / will be relative to the root of your file system.
The browser doesn't (and can't) know which directory represents the root of your web site project.
Use a web server. Load the data over HTTP.
Try this:
./nav.css
It (I mean, ./) loads files in the same directory of index.html, same as nav.css. With VS Code, I bet ./nav.css should work for the live preview too: using an external HTTP server (such as http-server on Node.js) helps, because it takes the current directory (where index.html is) as the root and you can easily reach /nav.css. Without a live server, the relative path could be reached as I said with ./nav.css (a typical *NIX path) or simply nav.css without slashes on Windows.
As others have indicated then the reason it's not working is because by loading the file directly you are now loading it as a local file rather than a file on website, and thus your URL base (Your /) is now referring to the root of your local file system. Which would likely be C:\ on a windows system or your actual root / on a *nix system.
To actually solve your issue I would suggest one of the following solutions:
Just always run the project over HTTP through a server.
Go through your project and change all of your paths to be relative paths. You might be able to use a find replace in your editor to do this.
Use a <base> tag to specify what the base href of your web page should be.
If you can't use a server and just have a single HTML file then it might be quickest to use fix 3. You can probably get away with using <base href="."> to make the base the current directory of your index.html file which, I suspect, will be a drop in solution to make things work as they did before.
In future best consider this and how you are going to run the file, and what your URLs are going to be relative to. It's a wrinkle that can be easily missed nowadays that the tools we use in development are so good at hiding the details of how websites are actually deployed.
I don't think <base> is a good idea.
It will change the base href in the whole page, which might cause problems when using other links or section navigation.

Images load fine locally, but not on webserver

been looking around here for a bit but still haven't found an answer.
Have an issue with a site I'm working on. Site is entirely self contained in a folder. Trying to reference one image for a parallax section on the website. Referenced like this in the main css file:
#services {
background-image: url("../images/dark.JPG");}
Main css file is located in maindir/css. Image that I'm looking for is located in maindir/images/.
It worked locally, so I tried to upload the entire folder to my testing domain. However, when I load up the site, this one specific image doesn't come up. I can confirm in FileZilla that the file uploaded without a problem, and can download and confirm that the file's intact. Other images load without a problem, but trying to replace this specific image with any other image yields the same results.
Is this something I may be doing wrong or potentially an issue with my webhost? Going through Lunarpages and have had a few random buggy incidents like this before, but I wanted to figure out if it was my own ineptitude to begin with haha. Again, nothing is stored anywhere on the computer - all local to the folder the rest of the site is in.
Like I figured in my comment, it's a capitalisation issue. On your local machine, where the file system is case insensitive, it's no problem to use "JPG" to access a file ending in "jpg". However, on the Apache server, case does matter.
http://nearsighted.ninja/images/dark.jpg loads
http://nearsighted.ninja/images/dark.JPG does not load!
Solution: write the filename in your css exactly as it is, with lowercase "jpg". (Or, rename the file.)
You are probably developing on a Windows machine, and deploying on a Linux machine. Windows file system is case insensitive, so .jpg and .JPG and .Jpg are all the same.
On Linux, where you're deploying, the file system is usually case-sensitive. Which means xxx.jpg and xxx.JPG are interpreted to be different files.
It's always better to use the same environment for both development and deployment. You can install a virtual machine for testing your work locally.

Simple HTML directory/index.html issue

I feel like a baby for having to do this but bear with me. I'm trying to set up webpage structures on my desktop in a folder. It's got an index.html and a couple folders of its own. One folder, "research", has its own index.html. I'm trying to link to this page from the higher index.html with but instead of taking me to research/index.html it takes me to a 'file-directory view' (for lack of knowing what to call it) of the directory research/
Clearly I could fix this by doing but that's annoying. Thoughts?
if you want to browse locally, you will have to include the file name. in other words:
<a href='research/index.html'>research</a>
The reason it works on remote servers is because replacement is done by the web server so if you want research/ to work then you will need a local web server such as wamp on windows or mamp on mac.

ImageLoading relative path problem in Flash

I'm trying to load images from a relative folder /media/one.jpg but it never loads, I use the same script to load from my local folder and it does.
The absolute path e.g c:/mydir/one.jpg does not work either. Earlier I used to throw things at my server and get jpegs from there. But for testing purposes I need these images locally available.
Any Idea?
Just solved it Use loadImage("media\ears.jpg"); double slash instead to single and it works :)
For security reasons flash files can access only web or only local files, with can be set in the project properties. If you want to build a web application like a webpage or just a part of a webpage, than you should choose network only, but this way you can test your work only on a webserver (that can be localhost too ). If you want to build a desktop application, witch has no relation to web, then select the "local only" option in your project properties.