I am a newbie webdeveloper. Though, I understand what html5 boiler-plate brings to the table, I would like to know how can I extend/customize it to use it in all my html files?
As of now, it provides an index.html.
So, what is the convention/method to create a new html file?
Should I create a separate html folder?
How do I inherit the properties of the index.html file?(Copy-paste?) Can't there be something like Django where I can inherit the baseurl?
Though, I have some understanding of dealing with javascript and css, anything else I should take care of while dealing with html5 boiler plate and cross browser compatibility?
In the beginning there is no real rhyme or reason to where you store your html files, because usually its just that plus some css file, or whatever.
However, when you get into real development, as in with a framework for front end + back end code, you will find that there is a need to separate things out as server side and public for the benefit of file access control and naming conventions.
When that is the case, you end up with an "Assets" folder, or "public" or something like that. Boilerplate tends to follow that convention.
In order to make boilerplate be automatically extended to all of your html files, you must develop your view files to be modular.
Main template file
|
----header (contains all the references / includes to boilerplate)
----content
----footer
Also, please note that at that point, your html will no longer be stored as .html file type; you must use a language that is capable of combining files as chunks. PHP does this nicely, and as you know, django can handle that as well. Ruby on rails, etc. you're gonna need to decide what language you want to work in for that. OTHERWISE, the old method of combining html chunks is server side includes (aka SSI or .shtml)
The issue of a base url is solved by having your server side language of choice work with the directives of your web server. For apache, you use mod_rewrite, and then you can pass an arg in the url that targets some classes / models / views, etc. MVC frameworks actually have already solved that problem for you, if you dont mind using one.
"You can override what folders and files you want to operate on in project.properties. All the default configuration is in default.properties." http://html5boilerplate.com/docs/Build-script/
default.properties is in /build/config
You need to add the pages to the line that starts with "file.pages", like this:
file.pages = new-page.html"
The core of HTML5 Boilerplate
HTML — A guide to the default HTML.
CSS — A guide to the default CSS.
JavaScript — A guide to the default JavaScript.
.htaccess — All about the Apache web server config (also see our alternative server configs).
crossdomain.xml — An introduction to making use of crossdomain requests.
Everything else.
Related
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/
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.
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.
I'm front-end developer and in work I use Twig with Symfony2 on Apache server. But now I have to make mockups in HTML, CSS on my interaction computer-human course on university. I need some application to able to including other html file in html file, extending html file with other html file - something similar like in Twig include and extend features. Does something like that exist?
I'd rather don't use html frame.
You could use server side includes - but this requires a server (hence the name !!)
Then you could, for example add a header to each page:
<!--#include virtual="header.html" -->
Apache, nginx, lighttpd and IIS are the four major web servers that support this language.
Your other option would be to use JavaScript and AJAX to pull in other content post load.
Using ASP.NET MVC3 with Razor & C#.
Say I have an application that is set up to run as a normal website through IIS, but now I want to run this application as a sub-application under another website. For example, the sub-application will be stored in a folder called "SubApp" off the root of the website (e.g. www.example.com/SubApp/).
If I reference a URL such as "~/Images/picture.gif" within SubApp's razor mark-up/code-behind, it will resolve to the root of SubApp: www.example.com/SubApp/Images/picture.gif
However, if I reference "/Images/picture.gif" through regular HTML (in SubApp), it will resolve to the root of SubApp's parent website: www.example.com/Images/picture.gif
Is there an easy, reliable way to resolve these HTML URLs to the sub-application's root without rewriting them to use Razor? What's the best way to handle URLs under these circumstances?
If you're dealing with pure HTML pages that will be requested directly by a browser, you should use relative URLs. For example, if you have:
/SubApp
/Images
foo.gif
page.html
You should use:
<img src="foo.gif" />
Inside page.html. You can use "../" to go up directories, etc.
Unfortunately, if you're dealing with a more complicated server-side routing scenario, you're going to need to use some kind of server-side code to handle that.