Is there any way to bundle HTML/CSS/IMAGES? - html

I am pretty new to web design, so this may be a very elementary question. I have a folder where I have multiple HTML files for a simple web page, I also have CSS style sheets and JPGs for the web backgrounds. I want to send the sample website to my friends via email, but there are about 10 files in a folder. Is there any way to bundle them to make it simpler for a non-programmer to open and view the website?

In short: No.
You should really just send them a zip folder containing the different HTML files, CSS files, and images. That way they can just decompress the zip, open up the default document (i'm guessing index.html) and view the website locally on their machine. If you'd like further explanation please let me know.

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.

Pre-Linking Pages in HTML Before Uploading

I am currently creating a website with over 700 pages and I would like to be able to link them together before I upload the files to my host server if possible. Is there a good way to link pages together pre-upload without for sure knowing what the final URLs are going to be?
I am working in and plan to upload/manage my website files through Dreamweaver.
I have seen the prompt in Dreamweaver to update links before. If I link the file paths now, will it update to the URLs when the site is uploaded?
you need to use root-relative links. do some searching on that. as long as you don't change your file structure you will be good where your site is run.
instead of using absolute links such as http://www.website.com/folder1/page1
you would use /folder1/page1
as long as your root was where you started the paths from you can start with "/" as above.
there are some instances where you would do a relative link from a certain folder to another one ../folder1/page1 this is not something i would recommend here.
good luck and comment on this if you have more questions.

HTML File that watches folder and displays images

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.

How single page HTML site without any CMS

I want to make a single page HTML site. I have made the template, but I wanted to know how to make it go live on my hosting.
I have tried many things but none of them work, I don't want to use any CMS, just a plain and simple HTML site. I have both a domain and hosting.
If as "template" you mean HTML file than you should name your file as index.html and upload it via FTP to the work directory of your hosting server.

Save a webpage completely

I have a small problem that concerns an outsourced website development company who will not (for perfectly normal and valid reason) allow us access to the server to alter stylesheets. I've been tasked to redesign a website layout. Problem is, I cannot access the website nor a dev environment to alter the stylesheets to bring forth these ideas. Only route to this would be to create a local custom.css to send via email to the person who uploads them. However, I cannot in good faith just throw them a CSS file to be applied on a live site without fully cross-browser checking it and I cannot do this locally on IE, Safari or Opera.
One solution was to save the website locally as HTML (file, save as...) but the problem is the background CMS is complete crap, meaning it has like 200 completely unnescessary CSS files and it is organized as:
main.css has 7 #import rules with relative paths.
Inside this is another stylesheet with 16 #import rules with relative paths.
Inside this... You get the picture.
This would mean I would have to shift through these 200 import rules and files to download them manually via the address bar. So my question is:
How can I save this website as HTML to my computer to apply a custom user stylesheet file to it so I can cross-browser test it properly? Is there some website that can go through a site and compress all the CSS to one file or smth?
You can download a whole website with dependencies using programs like HTTrack
http://www.httrack.com/
It allows you to download a World Wide Web site from the Internet to a local directory, building recursively all directories, getting HTML, images, and other files from the server to your computer. HTTrack arranges the original site's relative link-structure. Simply open a page of the "mirrored" website in your browser, and you can browse the site from link to link, as if you were viewing it online. HTTrack can also update an existing mirrored site, and resume interrupted downloads. HTTrack is fully configurable, and has an integrated help system.
WinHTTrack is the Windows 2000/XP/Vista/Seven release of HTTrack, and WebHTTrack the Linux/Unix/BSD release.
It doesn't consolidate all the CSS files into one, but it is better to retain the files as-is if you want to minimize changes