href is too long and want to make it short in either ways as constant or place them in a text file and read in href

Hello Experts,
I have a few folders that have .DOC, MP4 and PDF files and want to know how to place those long paths as constant in html? or all of those in a text file then read from it in "href".

Example: "file:///C:/Documents/Video/Family/2015/"

Thank you,

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <title></title>
  <meta charset = "UTF-8" />
</head>
  <body>
    <h1>Directory Listing</h1>
    <p>
      <a href = "file:///C:/Documents/Video/Family/2015/Video2015.MP4"</a>
      <a href = "file:///C:/Documents/Video/Family/2014/PNG2014/Wallpaper.PNG"</a>
      <a href = "file:///C:/Documents/Video/Family/2013/Letter.DOC"</a>
    </p>
  </body>
</html>
Lonelygirl_2012Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ryan ChongCommented:
it depends on where's the location of your HTML file.

if it's in folder C:/Documents/Video/Family/2015/, the hyperlink can be set as a relative path such as

<a href = "Video2015.MP4">Your Video</a>

or if it's in another folder, you may use absolute path as stated in your original HTML.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Lonelygirl_2012Author Commented:
Hello Ryan,

The folder is very long, but given as an example as this
"C:/Documents/Video/Family/2015/"
And having over hundreds of files with MP4, PDF, DOC, TXT...

Thank you,
0
hieloCommented:
<!DOCTYPE HTML>
<html lang = "en">
<head>
<base href="file:///C:/Documents/Video/Family/" />
  <title></title>
  <meta charset = "UTF-8" />
</head>
  <body>
    <h1>Directory Listing</h1>
    <ul>
      <li><a href="2015/Video2015.MP4">File 1</a></li>
      <li><a href="2014/PNG2014/Wallpaper.PNG">File 2</a></li>
      <li><a href="2013/Letter.DOC">File 3</a></li>
    </ul>
  </body>
</html>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Ryan ChongCommented:
instead of HTML, can you use server side scripting languages, like ASP.NET, ASP, etc? By using server side scripting language, we can do a looping to read your folder directory and listed the files accordingly. It will make your page display the folder content dynamically. Javascript is not good enough since it's a client side scripting language.
0
Julian HansenCommented:
The <base href> solution should work but you need to bear in mind that all your paths would then need to be relative to that base ref OR you have to use absolute paths.

In other words

<head>
<base href="file:///C:/Documents/Video/Family/" />
<link href="css/styles.css" />

Means your styles.css file nees to be in the following folder
file:///C:/Documents/Video/Family/css/styles.css

If it isn't you would need to change the style location to an absolute path
<link href="http://server/css/styles.css" />

The same goes for all other external elements on the page (script, images etc).
0
Lonelygirl_2012Author Commented:
Hello Experts,

It works, but "<base href="file:///C:/Documents/Video/Friend/" />" never work, seems to me is that we can not defined 2 "<base href" in one html file?

Thank you,

<!DOCTYPE HTML>
<html lang = "en">
<head>
<base href="file:///C:/Documents/Video/Family/" />
<base href="file:///C:/Documents/Video/Friend/" />
  <title></title>
  <meta charset = "UTF-8" />
</head>
  <body>
    <h1>Directory Listing</h1>
    <ul>
      <li><a href="2015/Video2015.MP4">File 1</a></li>
      <li><a href="2014/PNG2014/Wallpaper.PNG">File 2</a></li>
      <li><a href="2013/Letter.DOC">File 3</a></li>
      <li><a href="2010/Vacation.MP4">File 4 {This </a></li>
    </ul>
  </body>
</html>
0
Julian HansenCommented:
You can only have one <base href>

It basically says make this URL the base url for the page against which all relative URL's are appended.

Specifying two <base href> is never going to work.

Some things to consider

Why are you specifying your URL's as file:// and HTTP - is this because the page is being loaded as a file rather than as a request to a web server?

If this is the case then you can simply use the paths relative to the location of your html file.

So, if your .html is index.html and is in some folder on your machine.
Then if you setup your folder structure like this

index.html
   <2015>
       Video2015.MP4
   <2014>
      <PNG2014>
         Wallpaper.PNG
... etc

Open in new window

Then you don't need to specify a <base href> and your relative url's as you have them above will work.

If you are accessing the page through a web server the obvious question is why are you accessing your MP4's etc as files (file://)?
0
Lonelygirl_2012Author Commented:
Hello Experts,

Just want to create a simple index.html file for my mom, since she has so many MP4, PDF & DOC in many folders in her laptop and hard for here to search all, so she can just look at the index.html file and click & see whatever she wants..

Thank you,
0
Julian HansenCommented:
Then you can do as I suggested. Put the index.html file in the top most folder with the media folders located beneath it (based on your sample data in C:/Documents/Video/Family)

Then use relative paths to the media files no need for the <base href>
0
Ryan ChongCommented:
>>Just want to create a simple index.html file for my mom, since she has so many MP4, PDF & DOC in many folders in her laptop and hard for here to search all, so she can just look at the index.html file and click & see whatever she wants..

just another side question, how will maintain this index.html file? Do you wish to list down all the files in the selected folders, or only selected documents will be listed out?
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
you would be better off putting the "simple html file" in it's own website setup through IIS and setting up a virtual directory, then in your html, just reference the virtual directory name:

<a href="/virtualDirName/file.md4">...

if using IIS isn't appealing, you could always go the javascript route, create a simple javascript function to make the call to open the file:

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <title></title>
  <meta charset = "UTF-8" />
  <script type="text/javascript">
      function openFile( fileName ) {
          var basePath = '/some/long/folder/name/';
          window.location = basePath + fileName;
      }
   </script>
</head>
  <body>
    <h1>Directory Listing</h1>
    <ul>
      <li><a href="javascript:void(0);" onclick="openFile( '2015/Video2015.MP4');">File 1</a></li>
      <li><a href="javascript:void(0);" onclick="openFile( '2014/PNG2014/Wallpaper.PNG');">File 2</a></li>
      <li><a href="javascript:void(0);" onclick="openFile( '2013/Letter.DOC');">File 3</a></li>
      <li><a href="javascript:void(0);" onclick="openFile( '2010/Vacation.MP4');">File 4 {This </a></li>
    </ul>
  </body>
</html>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.