Can you have a HTML file "index.html" sitting in a folder that looks at an images folder and will render whatever is in that folder with certain styling?
The catch is the images folder can be added to so can it watch all new files added and render them.
Any suggestions would be great.
HTML Documents when served to the client, are rendered in the browser, which, even with JavaScript, will not know the layout of the filesystem on the server for your images folder.
The only really logical way to do this is use a server side language to processess the request (eg: PHP) to list all the files and write the HTML needed dynamically.
The alternative would be to have some sort of endpoint that would list the image names, and use javascript to dynamically add them to the document on page load, at the end of the day it's personal preference, but without either enabling directory listings for your webserver or using a server sided language of somesort somewhere, what you're asking isn't really possible.
Related
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.
I just came up with an idea. Instead of using an .htaccess file to remove .html from the URL, why not just use a simple folder structure and in each folder add an index.html?
For instance:
example.com/index.html → Home
example.com/about/index.html → About
Now simply use a hyperlink on the homepage to the about folder, since typically index.html files are opened automatically.
The upside of this kind of navigation, is that it would be easily possible to create sub pages with no crazy database / .htaccess setup.
Now my question is: is there any reason not to create a webpage like that and is it legitimate to use multiple index.html files?
I appreciate all the help.
With the index.html route, there would be three URL's that can access the same page. For example for an about page:
www.yourwebsite.com/about
www.yourwebsite.com/about/
www.yourwebsite.com/about/index.html
Using the .htaccess file would likely give you more benefit from an SEO perspective. You can tell the search engine which one to use, by using 301 redirects. See more about how Google does this here:
https://webmasters.googleblog.com/2010/04/to-slash-or-not-to-slash.html
Of course you could set up your website using folders and index.html's, and still
use the .htaccess file to take care of the SEO. But, depending on your sites size and structure, this might be more work.
The only downsides would be having to create a folder in addition to a file whenever you want to create a new page, and having to take more time to navigate into a folder in order to edit a page.
As long as you are using Apache, or a similar server software, multiple index files will function normally and be served from each folder.
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.
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?
I'd like to load all the MedaiWiki static resources from a Content Delivery Network (CDN) for obvious reasons (using MW 1.17.0).
I think I need to set $wgStylePath=http://cdn.example.com/ Then put everything currently in my /skins/ directory into http://cdn.example.com/
(this appears to be suggested in this Stack Overflow question/answer: How can you change images src attributes in mediawiki to access a CDN? but it's not very clear
My concern is the .php files that are currently in the /skins/ directory...
My only thought is that I need to put all the sub-directories from /skins/ into the CDN, but not the .php files that are directly in /skins/
Maybe I'm going about this the wrong way... is there a better way to achieve what I'm trying to do? (I'd like all the theme related .js, .css and image files to load from the external CDN)
Thanks,
-Dan
There are two completely different paths here: the filesystem path through which the webserver accesses skin-related PHP files ($wgStyleDirectory) and the URL which will be placed in the HTML code and used by the browser to access css/js files ($wgStylePath). If you want to use a CDN, you set the latter to the CDN url and leave the former in peace.