Occasionally you may want to give users the ability to download a file or
some type of resource from your site.
In certain cases, for security reasons for example, you may need to occasionally have
scripting help you out with this but most of the time you can do it by just
using simple link syntax combined with the new HTML5 download attribute.
To experiment with this syntax we're going to use the resource.htm file found
in 05_03 directory.
Now if I look at the directory structure over here on the left-hand side, I can see
that in this folder there's also another directory named _ASSETS, and inside of
that, there is a syntax file, there's two versions of it, a PDF file and a ZIP file.
So from our HTML essential training resource site I've taken
the syntax page and sort of created a downloadable resource of just that page.
I saved it as a PDF and I've saved it as a ZIP file, and maybe we want to give users
the ability to download that and print it out or read it at a later time.
In the body of our page we have our download our HTML syntax reference.
So I'm just going to surround the text HTML syntax reference with our link.
All right, so, the first thing I'm going to do is come in and do a href.
And inside that I'm going to _assets and I'm going to link to the sintax.zip.
So, we'll start with the ZIP file _assets/syntax.zip.
We'll give that a title attribute and
the title attribute is just going to be HTML syntax reference.
And then I've got to remember my closing anchor tag, right there.
So I'm going to save this, and I'm going to preview this in my browser.
Now, what happens when you're in a browser, and somebody clicks on a link.
So this is just a document relative link pointing to that reference.
If it points to a file type that the browser does not support or
understand, this is what happens.
You can see that the browser automatically downloaded the resource because it
said hey this is a ZIP file.
I know what they are but
I can't open them within the browser so I'm going to download them for you.
Now if we had tried to do an EXE file or some type of
a DMG file like an installer then the browser has other security protocols that
it's going to go through to make sure that the user meant to download that.
But for the most part that's all you really need to do to download
an external resource.
However, in certain cases you might actually want them to
download something that the browser can open.
For example, the syntax.zip file, if I change that to PDF.
So, let's save that, go back in the browser, and now if I click on this.
You'll notice that it opened it up directly within the browser because this
version of Chrome has a PDF reader built into it.
Maybe the browser you're using does, maybe it doesn't.
But based on the preferences of this browser,
I wasn't prompted to download this, it just went ahead and opened that up.
What if you wanted it to force a download, or
to make sure that the resource downloaded?
Well I can go back into my link.
And what I'm going to do is I'm going to go ahead and
give this a download attribute.
Now there are a couple of different ways that we can write this download attribute.
It can be seen as what's known as a Boolean attribute.
Boolean basically means it's either true or false.
Just the presence of the download attribute means that we want this to
download and we don't have to give it a value.
So by adding the attribute download, we're telling the browser that,
hey, this is a resource that we want the user to download, not open.
So if I save this and preview it in the browser, now when I click,
you can see that instead of opening the PDF file, it downloaded the PDF file,
which was awesome.
Now, you can further modify the syntax if you'd like.
A lot of times you're going to have resources that were created on the fly.
For example, I might have JavaScript that scans the current page that I'm in, and
then packages that up as a PDF file.
In doing that I might have sort of weird naming convention that
names it something like 417-58.
Well, you may want to force a name on the link that's being downloaded.
So to do that I can type in download equals then I can give it a name.
So in this case I'm going to type in
HTML_syntax, and that's going to be in quotation marks.
So essentially what's going to happen is,
when this syntax is encountered, whatever the name of the file is,
in this case syntax.htm, is going to be replaced with this.
Now, that doesn't really do much for us the way it's currently set up, but if this
were created by a machine for example, and had a very long string to it or you know,
very hard to read, then it would be nice to replace it with something like this.
So if I save this, go back out to the browser and now when I click,
notice that it downloaded the file HTML_syntax.pdf, not syntax.pdf.
So the syntax that you're seeing here should work with most external resources.
Occasionally you might have more complex file types, or
some type of security that requires additional scripting.
Now, be careful about the types of files that you're going to link to as well.
Users are going to be understandably sensitive about
downloading things like EXE files, so be sure to
take that into consideration when linking out to downloadable external resources.