I've just started learning HTML and I'm I've begun to make my own website (for fun) and was wondering how I load a certain video depending on the '/'.
localhost/video1
localhost/video2
rather than having, possibly, hundreds of .html files for each video, is there a way to simply get the video/file depending on the contents as the code is the same, the video is only different.
There are several options:
You could use Javascript to get anchor hashes for your page. The urls are then looking like localhost/#video1
How can you check for a #hash in a URL using JavaScript?
Use instead of plain HTML files, for example php. With mod_rewrite you can rewrite localhost/video1.php into localhost/video1 Removing the .php extension with mod_rewrite
A third option is to use a router library like http://smalljs.org/client-side-routing/page/ or http://projects.jga.me/routie/
Related
I wanted to use file extensions within the question body to make it clear as possible but the system kept throwing code errors at me when I hadn't used anything like code.
I have numerous pages that comprise a section of my website. Let's, for example, call the main page:
http://www.articles.mysite.com/
With in that, let's say some of the html files are:
"10things"
"extras"
"t7n"
"i2""
Essentially, the file names tie into what they contain, but they don't all follow the same name pattern for whatever reason (some are just numbers, some are numbers and some are numbers and letters together, for instance).
What I want to do now is upgrade these files so I can use serverside includes (SSI's) as I do on other pages of my website. However, I'm running into a couple of issues.
The URLs aren't clean (they have file extensions) and the same is true of links I've posted to social media, for instance. I'd like the resultant URL the user sees to not show these file extensions, partly for SEO and partly just to make it look less cluttered.
When I've tried upgrading the files by just changing their names, the links on my end appeared to work, but when using one of the social media links, I kept getting 404 errors so I started from scratch and kept trying to resolve the issues on my own. Unfortunately this hasn't worked and I'm now back to square one, with the links currently working with standard files.
To reiterate, I'd like the following to occur:
User clicks a link, whether directly on my site or on a social media site that takes me to a page on my own website.
Even if the link is one of the old ones, the user is silently redirected to the new version of the page, with a clean URL that does not include any extension for better readability and SEO purposes.
All this should ideally be able to happen without me needing to change the index files that store the links, only renaming the html file extensions.
The only two pieces of information that might be of help if I can figure out how to combine them are as follows:
This introduction to redirects, which references mapping file types as part of redirect matching with the same path and filename:
Could this be modified, changing the extensions used, to map the requests to the new renamed files from the old extension?
This previous question from Stack Exchange about rewriting and redirecting at the same time which talks about cleaning up extensions:
Could this be combined with the redirection in the previous question to make a clean and easy method of redirecting the user, cleaning up the extension and making it look as if nothing's changed with a file name being all that's required other than the above code?
You can use this code to redirect your .html page to .shtml page without changing any line of code.
#redirect .html link to .shtml link
RewriteEngine On
RewriteRule ^(.*)\.html$ $1.shtml [L]
How do I convert an HTML file with content folder to a self-contained HTML file which can be viewed from anywhere with its images etc.
How can it be done so that it's also editable and stays self-contained, post-edit?
I basically need to make HTML file based documentation which can be viewed from anywhere. Unfortunately it HAS to be HTML, otherwise I would have made PDFs
You can use pandoc, it has an option to create self-contained html files https://pandoc.org/MANUAL.html#option--self-contained.
If you start with html, this is the command.
pandoc in.html --self-contained -o out.html
This tool can do a lot more things, for example, you can also generate html from markdown files or generate pdfs instead.
The most direct way is to convert all asset urls to data: urls. (There are online coverters available that will take a provided asset and produce a data: url from it.)
A possibly simpler way is to convert image and font urls to data: urls while instead inlining scripts and css.
Edit: Possibly of interest: inliner, a Node utility for doing this kind of thing. "Turns your web page to a single HTML file with everything inlined". Also performs a number of minifying optimizations.
I don't know exactly what you're envisioning, but HTML was never meant to be fully self-contained. There may be some loopholes that allow it in the end, but to my knowledge there are no premade tools that do this 'conversion'.
It would require the following things:
Converting all linked style sheets and scripts to inline style sheets and scripts. This means that whenever there's a <script src="http://url.to/foo.js"></script> you'll have to download foo.js and include it as such: <script type="text/javascript"> [this is the content of foo.js] </script>. Something similar applies to CSS and other linked source files.
Downloading all linked media (images mostly, I presume) and converting them to blobs (a service that provides you with a base64 blob you can use within a HTML file is https://www.base64-image.de/). This means replacing <img src="http://url.to/image.jpg" /> with <img src="data:image/png;base64,[converted image data goes here] />.
So there's gonna be some manual labour involved there, but it probably can be done (almost) fully.
Possibly there's a way to accomplish what you're wanting to do another way though, what exactly is your reason for wanting this?
Here's another option: write your documentation in markup, then use a tool such as "Marked 2" (http://marked2app.com) to convert to self-contained html. Works slick. Plus you can go back and edit the markup any time you need to update your documentation, then simply re-export your html file.
When we launch a website, we usually see webpage name (menu.php or admin.aspx) but I would like to hide that name and show only virtual path or just website name. I don't want it for the first page because I did that with default.aspx but I want to implement it for the whole website.
Showing www.abcd.com/faq/ instead of www.abcd.com/faq/faq.html
Note: My code is not MVC code and server is Apache.
Use .htaccess to rewrite the URL. Millions of tutorials are out there for that ;)
What you are asking is achieved using (for xampp, wamp, lamp or any other apache powered webserver setup) htaccess rewriterules. The rules take the URL and break it into parts that can be modified or used as variables to feed other pages - whilst still keeping the URL you typed. Neat huh!
Showing www.abcd.com/faq/ instead of www.abcd.com/faq/faq.html
call the file placed into the folder faq simply index.html (not faq.html) and then www.abcd.com/faq/
will display the page without the filename. (Make sure, you have defined index.html as a valid Directory index.)
There are more options with using mod_rewrite etc - but since you seem to use a prety static directory based navigation layout, that would be the easiest way.
I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.
In my app there's a uiwebview that loads a URL.
I am using the following line to save the HTML of the page loaded locally to be able to view it offline:
NSString* html=[webView stringByEvaluatingJavaScriptFromString:#"document.getElementsByTagName('html')[0].innerHTML"]
The problem is that only the HTML of the document gets saved. I want to save also the images and the CSS along with the HTML so that the user see the page as if they are online.
Just like "save web page complete" or something like that, that we're used to in the browsers.
There is no easy way. Regex the HTML using RegexKitLite (http://regexkit.sourceforge.net/RegexKitLite/index.html) and snag all the urls to .jpg,.gif,.png, and .css and .js and whatever all else you need.
alternately, call:
NSString* imgUrls=[webView stringByEvaluatingJavaScriptFromString:#"document.getElementsByTagName('img')"]
or something like that, I'm no javascript whizz... and then deal with whatever all that returns ;)
Sorry. It's a pain in the rearheinie.
edit:
Save all the img's on the iphone, also save the html file. When you want to reload the page, load the html from a file into a string, and then use
- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL
to load the HTML string. baseURL is used to specify the directory or site the webview will imagine the html string you hand it is located. All URLS will be relative to that.
Note, of course that this will not work very well for absolute URLs, only for relative ones. So this, in your html file, will monkey things up:
<img src="http://google.com/f/r/i/g/img.gif">
while this would be ok:
<img src="f/r/i/g/img.gif">
Again, this whole solution is mucky.
You might look into a pre-existing open source recursive html spider. I think wget does what you want, but I doubt it can be compiled for iPhone without a -lot- of hassle.
I didn't have time to check, but ASIWebPageRequest seams very promising. It states it can "Store a complete web page in a single string, or with each external resource in a separate file referenced from the page"
ASIWebPageRequest1
I will be using it on one of my projects, and then update thread.
Gonso