Making a relative path HTML Shortcut - html

I have pretty much no experience with HTML, but I am using Doxygen to create code documentation. I have all the Doxygen generated HTML files in a sub-directory within my C project.
This documentation is for a library I have built and I would like the user to be able to view the HTML documentation without having to search through the Doxygen sub-directory for index.html. I tried to make a Windows shortcut to index.html, but that only works on my working computer. Whenever I try on another computer, Windows requests the username and password of my working computer. Then I tried copying the index.html file to the top-level of my library; however, in doing so, it seems like many links were broken and the file did not open properly.
Please note that I am not looking to host this documentation on a server, the documentation will be distributed with the source code, since this library is (currently) for internal, educational university use and I am not sure if I am allowed to make it open-source.
In other words, this is the type of file structure I'm looking for:
Project Folder
-Doxygen Documentation Folder
-index.html
-Source Code Folder
-Shortcut to index.html

There's a thread here that should help.
Essentially the suggestion is to have a top-level index.html that links or redirects the reader to the one in the doxygen folder. I note you're new to HTML but it's quite simple.
There's an example of a minimal index.html you could use towards the bottom of that thread which I'll replicate here in case that thread ever disappears. It was contributed by Clemens Feige.
<head>
<meta http-equiv="refresh" content="1; URL=doxygen/index.html">
</head>
<body>
<p>You will be redirected automatically, otherwise please click here.</p>
</body>
You'll need to tweak the paths according to your set-up.

I ended up using this software But I think I like Cheeseminer's solution better

Related

Combined file HTML + CSS for opening in browser

I was wondering if there is a file format around where I can put (one or multiple) .css and (one or multiple) .html files, for example as a .zip (or similar) file AND your favourite browser can recognize it and opens it as a sort of static local "web page".
My use case would be to create html reports of some program execution, style it with a standardized css file and upload it on a cloud service, such that anyone with access can view it direcly in the browser.
I know a litte about html and css, but not enough to answer this question myself.
And "combine html and css" is not searchable on the web, so I'm asking you.
I'm not looking for a solution which bakes everything into one file.
I'm also not looking for an unzipped version of this (a folder), since that is not uploadable to most cloud storages I am aiming for.
Thank you.
AFAIK, there is no file format for that, but what you can do is create a folder in your htdocs or public folder and add all your .css and .html files in there. Then access it in localhost/yourfolder or if you are using a host http://yourdomain.com/yourfolder. For your HTML files to display the style correctly, they should be linked with the .css files or with the style inside each .html file between <style></style> tags in the <head> section.
You will see something like this, where you and others can preview and navigate through all HTML and CSS files.
Note: I've never done this on a host only on localhost, if you are using a host you will probably need to create permisions to access this folder, in that case contact your host so they can explain.

../ For Parent Directory Not Working HTML

All,
I did a bit of research but haven't found an exact thread or resolution to this issue.
I am using express in this webapp, Chrome Version 60.0.3112.113, and Win 10 Version 1703.
I am currently developing a site where I want to use a hamburger svg for mobile navigation. This is how the html sits for the "topbar"
<div id="topbar">
<img src="../images/hamburger.svg" alt="ham">
</div>
And here is the file structure:
https://puu.sh/xxDih/c842297b54.png
According to the structure, I should only need to do ../images/hamburger.svg, but when I do that, it comes up with a 404 error in the waterfall. I have run into this issue multiple times doing any sort of HTML sourcing into parent directories, but in JS files it works fine.
I'm not exactly sure what the issue is.
For the express server,every uri are processed by the express contains resource url and request url.
Request url(api) is refered to your express api config
resource(image, js, css, html...) is relative to your static server's root directory which was defined by using express.static(root_path).
That's what I want to say.
I noticed that images folder, node_modules folder, and pages folder are all in the same directory, and css is under the pages folder.
"../images/hamburger.svg" is the correct relative path from the pages folder, but being (big red flag) the node_modules is at "../node_modules/" I'm thinking that the server is serving from /pages/ folder, the servers root directory. meaning anything above the /pages/ folder will not be shared.
Clearly you do not want to share out ../../../windows/system32/ or the user documents etc. To prevent sharing those the highest directory you can access from the html page through a browser is the server folder being used. I'm thinking /pages/home.html is localhost/home.html and localhost/css/ is your css directory.
Programs running on the server can access files above the served directory, but the browser can not. "/node_modules/" should be outside of the servers root directory.
I realized this is an issue with express itself.
If (in this case) you have your index.html as express.static('./pages'), then it can't see anything above pages and considers pages as the working directory.
Me, coming from React (which stupidly was the first thing I learned even before basic JS), wants to put all the pages in one folder, which I think would make sense.
The workaround I did, which may not be optimal, was by putting index.html as a sibling to pages, css, and images in the src folder. Then in index.html, it has a meta tag as follows: <meta http-equiv="refresh" content="0; url=./pages/home.html" /> to redirect to the home.html page.
Again, this may not be optimal, but for a kinda OCD guy like myself this makes sense.
Update:
What we ended up doing is to have index.html be a static page, and then load the individual pages in an iframe. This website is mainly for information and has no database (yet), so there won't be much to process. Here's the new file structure that works.
http://puu.sh/xy5Dw/4dbc72ec06.png
src is now our working directory (express.static('./src')) and everything is detailed within there.
Once we do include a database, it will at most be 10 values in the server and will be using very basic requests, nothing crasy.

why can my browser still open an html file not served through a static file server?

Just wondering how/why this works, when I'm making a simple html file and linking in some css, then dragging my html file into the browser, no static web server is needed for me to view the file.
Why is that so..
I'm looking at my browser's network tab, and no request is made for the css file, and my browser still displays it perfectly..
Is there a way to do without a static file server on the web for html, css, js files, like when dragging and dropping a file into a browser?
Just going back and requestionning basics here..
Thanks in advance!
Because the link to your CSS file is relative, and your CSS file is accessible locally. Browsers can be used to access local files, not just files on the Internet.
When working with links, you may see just the name of the file referenced, as such:
Link
This is known as a relative link. file.html is relative to wherever the document is that is linking to it. In this case, the two files would be in the same folder.
There's a second type of link, known as an absolute URL, where the full path is specified.
Consider a typical absolute website link:
Link
With a local file, this would essentially be:
Link
The file protocol can be used to access local files.
Considering both the homepage (presumably index.html) and file.html would live in the same folder on both a web server and your local machine, Link would work for either scenario. In fact, with a relative link, the location of the second file is automatically determined based on the location of the first file. In my example, index.html would live at file://[YOUR WEBSITE]/index.html, so your browser is smart enough to known to look in file://[YOUR WEBSITE]/ when searching for any relative URLs.
Note that the same scenario applies to any other file! <link> and <script> tags will look for files in the exact same way -- that includes your stylesheet :)
Hope this helps!
Sounds like you are new to HTML and web development.
It all has to do with relative versus absolute file paths.
Check out these articles and have fun coding! Always remember that Google is your friend, improve your search-foo and you will not have to ask questions like this.
God speed.
http://www.geeksengine.com/article/absolute-relative-path.html
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
How to properly reference local resources in HTML?

Joomla HTML validation

I am trying to validate the home page of my Joomla. The issue is that I have the site on my local host so I can not simply copy the URL into http://validator.w3.org/ to validate.
My next thought was to open the index page in my browser and then run firebug to access the source code, and then copy and paste the code into the validator.
This seemed to work okay however when the code returns errors, I now don't know where to access the html to correct them.
Thoughts?
If you have not much knowledge about the way Joomla works, you will have to learn about the file locations.
Normaly, most changes should be done on the index.php file located in your template folder (root/templates/name_of_your_template/index.php)
If the changes you need to make aren't located in this file, you can have a look at the modules, component or plugin files that output these error and that becomes more serious.
If there is a template override for the module/component/plugin you need to modify, the files should be located in root/templates/name_of_your_template/html/name_of_the_module_component_or_plugin
If there is no template overide for the module/component/plugin that outputs the error, you will have to learn about template overrides.
Depending on your browser, there are many extensions that will validate non-accessible (i.e. localhost) pages
In Google Chrome - https://chrome.google.com/webstore/detail/html-validator/cgndfbhngibokieehnjhbjkkhbfmhojo?hl=en
Once it's installed, click on the icon and validate local page.

Changing the location of the index.html file in Doxygen output

I'm using Doxygen to create html output.
I'd like to customize the output so that the index.html file could be more noticeable, since at the moment it is buried half way down a huge list of files in the html output folder.
For example, if it were moved up one directory to be outside of the 'bits and pieces' html files then it would be much more accessible for others who will be looking for it. However, I can't just ass a line of script to copy it to that location, since all of the links it has would break.
If I could configure Doxygen to have the index file go to a different location, or if you can think of another solution to my problem, I'd be grateful for your response.
Thanks
I would leave the documentation in its place and instead use the meta refresh option of the HTML language. Place a file, for instance called, "Documentation.html" in any folder you want with the following content
<meta http-equiv="REFRESH" content="0;URL=RELATIVE/PATH/TO/index.html">
As I mention in comments to the OP the easiest solution is probably to create a symbolic link or shortcut to the index.html file generated by doxygen, rather than trying to get doxygen to change the layout of it's output files. This symlink/shortcut can then be placed in the root directory of your project (or elsewhere), pointing to ./html/index/html, and named anything you like to make it obvious to your users what it is.