Changing specific lines of code from all my HTML pages - html

Let's assume that
I have thousands of HTML files.
All of them use's the same CSS layout.
All of them are made with exactly 100 lines of code.
Now, I would like to replace lines 40-50 from all of these files with a common set of 10 lines. Is this possible ?

It's not a html related topic. You should use a programming language.
Creat a program.
Loop through each of your html files.
Replace the desired lines of code (or any other string) with your new content.
By the way if your purpose is just to manipulate a bunch of classes/IDs and content, it's doable with javascript/jQuery. but unlike first solution it will run each time one of your html files are loaded in a browser. i don't recommend this.

Related

I would like to put more than one website in a single html file

I want to have a couple html websites in a single file. Is this possible?
A website is not just an html "page".
An html file represents the document structure of one page.
Theoretically, saying that you want to represent multiple websites on one html file is like saying that you want to write different documents (your tax files, a book, a ticket for a movie, etc) based on one single template.
While theoretically you can dinamically change the structure of such a document, there is absolutely no point in doing so.
HTML describes the structure of Web pages using markup.
So why would you use a single HTML file to represent different web pages?
Sorry, but you can't. It's not possible. Why would you even do it?
The only thing that comes into my mind is to use <embed>tag, for ex. But it's probably not what you rly want
You must be more specific. The question is vague. In general you can write a code that can change dynamically the website appearance after inputs/actions from the users. For example a JavaScript code that shows/hides something (or the complete website) as long as the mouse is over an element or select/deselect an element. It all can be in a single html document (html5, css3, JavaScript/JQuery).

How can I minify an html template file without destroying the structure?

I have a handlebars template file that I'd like to minify. I found a couple questions that were related to my issue on StackOverflow, but nothing exactly like it that had an answer. My issue is that spaces that are within the templated values are getting removed when I run the code through a minifier.
Example:
I have this line of code in my template file:
<div>{{{displayName}}} - {{cost}}</div>
When I use the un-minified file to render the page, I get entries like:
ProductName - $5.50
which is what I want. After running the template through an html minifier, my template line now looks like this:
<div>{{{displayName}}}-{{cost}}</div>
and the entries on the rendered page look like:
ProductName-$5.50
Not optimal. Now, I understand that I could just run through the template and put in non-breaking spaces into all the places where I'd like spaces to be. Nice. Simple. Easy... relatively.
But.
A secondary, and larger, issue comes into play (and what's the point of going through and putting in all those non-breaking spaces into my template file to avoid this situation with the html minifier if there are more issues) when I'm selectively adding attributes or classes to a given html element.
Example:
I also have lines in my template files that look like:
<div class="paymentMethod{{#if paymentSelected}} active{{/if}}">
On the condition where my template (handlebars) variable "paymentSelected" is true the html shows as:
After minification, however the minified template file contains:
<div class="paymentMethod{{#if amazonAndPaypal}}active{{/if}}">
which makes the html on the page show as:
which, consequently, messes up all of my css and javascript because there is now one unrecognized class on the element instead of two correct classes.
Again, there is a way of getting around this. I could just place all of the class definitions into the template variables. So, my new template would be:
<div class="{{#if amazonAndPaypal}}paymentMethod active{{else}}paymentMethod{{/if}}">
This kind of goes against the idea of removing redundancy though. So I don't like it. And this is a fairly simple case, with only two possible classes.
I'm sure there are more possibilities for hassle with html minification of template files, but I think I've shown my point.
Now, all of that explanation comes to my question:
Is there a tool out there that will minify html but ignore spaces that are between opening and closing template tags? For me, those spaces are similar to the spaces between words. I don't want all the spaces between the words of a sentence removed any more than I want the spaces within my template tags to be removed.
I also went searching for a generic sed solution, but didn't find anything in that direction either.
Could you just use &ampnbsp;?
<div class="paymentMethod{{#if paymentSelected}} active{{/if}}">
Okay, so I figured out a better option, and this may be incredibly obvious to some but I'm pretty new to the whole Handlebars gig.
A better solution to minifying the html templates would be to precompile the templates and to then minify the resulting javascript. This way, I also get the savings of no compilation time on the browser side and (because I'm using Handlebars as my templating language) loading the smaller runtime script.
Granted, this solution doesn't explicitly answer the question I posed, it does solve the ultimate problem I'm trying to solve, which is to minimize the page-load time on a browser by doing everything I can to the necessary assets prior to a browser downloading them.

Why is CSS Formatted Without Whitespace?

Sometimes when I look at style sheets of big websites (even this one) the css code is completely formated (or however you call it), like this: http://cdn.sstatic.net/stackoverflow/all.css
Is this just the result of a style sheet beeing generated by a CMS ?
I call it "minified", and I think that's the general term. But the reason is to reduce loading times. All those useless spaces and comments still count as bytes, and sometimes you can have more spaces and comments than actual effective characters! (It also obfuscates the stylesheets, although that's really pointless as spaces can easily be restored with whatever formatting you need.)
It's probably generated on the fly from a more scriptable/dynamic/dry layout language, and there is simply no reason to add the whitespaces since non-one should be reading them, and it would only add to the file-size.
It can be generated by CMS or manually. Removing all the tabs and spaces reduces the size of the file, thereby loading it faster an inturn can make a site faster.

using html/css, i would like to automatically generate a bibliography at the bottom of my website akin to latex's \bibliography command

I'll ask my question first, then give some background for those who are interested:
I would like to know if there is a command in html that will automatically generate a bibliography from a .bib file? This means that throughout the text, i would add something like <cite name="Jones2010">, and then at the bottom of the html (or css) file, I would write something like <makebib file="biblist.bib", format="APA">, and a bibliography would be generated using my .bib file, and formated according to the APA style. The functionality would be quite similar to footnotes, except that each footnote is populated according to some script that extracts the information from (essentially) an xml file and outputs the content in the desired format. It is not difficult to imagine somebody creating a tool to do just that, however, my google search skills have not enabled me to find such a tool. It is easy to find tools that convert bib files to html or xml, but that is not sufficient for my needs. I do not desire to publish my entire bib file online. Rather, for each document that I generate, I want several of the entries in the bib file to be included as footnotes. Any pointers will be greatly appreciated.
Now, the reason behind the question:
I have recently begun switching from writing all my manuscripts using latex to writing them using html/css. The advantages of this approach are fast: only 1 file for versioning (instead of .dvi, .ps, .aux, .blg, etc.), it is much smaller to share, other people can edit the html file and compile it much more easily, it is more configurable to my tastes, easier to read on screen, etc. The disadvantage for me, however, is that while I've been writing in latex for years, I've only just begin using html and css for scientific document creating. The main impetus for the switch was MathJaX, which enables me to to embed latex equations in my html files, and therefore, allows me to combine the advantages of latex with the advantages of css. I imagine that nearly all my colleagues will switch away from latex to this simpler format, assuming a few remaining issues get resolved, like ease of creating bibliographies.
Many thanks.
What you're asking isn't possible, unless when you specify html/css you really mean html/css/php or html/css/python or some other combination that includes an actual programming language, rather than just a markup language.
I understand your motivation, I'd love to switch to html instead of latex! However, I suspect an html-based solution would involve so much extra processing added on top to sort out bibliographies etc that the complexity would start approaching that of LaTeX by the time you got it all worked out.
I'd be pleased to be proven wrong on this!
I've done this, in the past, using XSLT and BibTeX. In outline, the steps are
Mark up your document using some convention or other: I used <span class='citation'>Smith99</span>
Write an XSLT script to transform that file into a .aux file with \citation commands in it
Use BibTeX along with a .bst file which spits out HTML rather than LaTeX
Use another XSLT script (or the same one, in a different mode) to pull the bibliography in
It's not quite as fiddly as it sounds, but you can look at how I did it on google code. In particular, see structure.xslt and plainhtml.bst.
If there's a more direct way, I'd be quite interested to hear about it.
Both answers so far are somewhat correct, although not quite what you were asking for. Part of the problem is that the question as it's phrased doesn't necessarily makes sense.
HTML is just markup; you need something to process the markup, be it python, php, ruby, etc.
And you probably want to write in XML (or XHTML), not HTML.
XSLT may work for you (once it's in XML), but remember, an XSLT document that defines a set of rules. You would get an XSLT engine to apply your XSLT rules against your XML document.
You can create an html bibliography from a .bib file using bibtex2html. This package takes a series of command line arguments and extracts the info from the BibTeX source and outputs a file with html markup.
As far as I know you cannot get it to read and parse the html document like the LaTeX \cite command but there are several ways to indicate the references you want. I find that the easiest way is to just maintain a text file of the BibTeX keys I use in my manuscript and then call this using the --citefile option. There is also a tool called bib2bib included that will take search commands.
It is a very flexible package and there are a lot of options so it works in a lot of situations. For example you can get it to omit the <html> headers from the output file so that you can directly paste into an existing html document.
The documentation is useful but make sure you look at the pdf documentation file and the man pages.

An elegant way to record the computed style for each DOM node to a file, for a large number of files?

Is there an elegant way to get the computed style for each DOM node in a web page, for a large number of files, in order to compare style data for similar nodes across those files?
I'm working on a large number of HTML files (> 500) containing pretty broken HTML from MS FrontPage, trying to extract style data and convert it to semantic markup. I managed to do this using regex up to a certain point, but now it's become too complex. I learned that it's a bad idea to parse HTML using regex in the first place, so I'm trying to find a way to have the browser parse the HTML and give me the computed style for each node on the page.
I know I can access the DOM and get the computed style for each node using JavaScript, but I can only do this for one file at a time, and there is no easy way to compare this data across several files, or is there? If I'm not mistaken, it's not possible to dump data from JavaScript to a file. What alternatives would there be?
(BTW. I've tried to use HTMLTidy, but the HTML is so borked that it crashes.)
You could try using this: https://github.com/peol/jquery-computed-style