compress html code - html

Just a quick question, I have seen some web page if I click view page source, the html code is compressed, if I want my html code to be compressed like that, is there a function doing the compression or I need to use come compress tool to do it before the webpage is loaded on line? Thanks a lot.

I'm not a PHP/*nix guy, but since we have been chatting about it in comments, check these..
For PHP:
http://davidwalsh.name/compress-xhtml-page-output-php-output-buffers
For Apache:
http://perl.apache.org/docs/1.0/guide/modules.html#Apache_GzipChain__compress_HTML__or_anything__in_the_OutputChain
http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
Check this discussion as well:
http://forums.macnn.com/79/developer-center/276604/compressing-html-output-with-php/

There are tools available for that purpose, basically these tools remove blank lines from the html code. Search for html optimizer or blank space remover tools on google and you'll find many easily.
If you are using j2ee, there are filter available (as jars), which you can download and edit your web.xml file to use them. They will remove the blank spaces when the page is being displayed.

If for "compressed" you mean without whitespaces, without line breaks, without tabs, etc, yes, there exist tools that could do the job for you, although it would be easy to write a personalized script.
By example, see this script. Here you have the live demo.

Related

Prevent HTML code from being stolen

I am showing a demo of PSD to HTML to my client. I want to upload the HTML document with CSS files and images in my server to show the demo to the client.
I am afraid if he will copy the HTML code.
Is there any way to decode / encode the html code so that it will not be understandable to copy?
Even if i prevent Right Click on the page he can use View > Page Source option or can save the webpage and then see the source code.
You cannot protect your JS, CSS or HTML code 100%.
But you could confuse your client by encrypting the code, removing whitespaces, etc. He could copy and paste it but will not be able to edit or extend it that easy.
This tool encrypts HTML to JS:
http://www.iwebtool.com/html_encrypter
CSS compressor (removes whitespaces and new lines):
https://csscompressor.net/
JavaScript compressor (removes whitespaces and new lines): http://javascriptcompressor.com/
As #AMR already mentioned: protect your copyright and setup a contract. My advices above are just in case, if there is no trust in your client!
There is no way of stopping it. You can do what #Mr.Bombastic said but I would just suggest writing a quick nondisclosure form and have the person sign it. You can also just put comments in your page that show its yours. In the end if they steal it and its your code it should be pretty easy to prove even without comments. Civil lawsuits aren't that much.

just wanna highlight some texts when use a browser to view local html

A lot of tutorials which can be downloaded have the file type of .chm, .pdf, .html, etc. I downloaded a Java SE tutorial of Java SE in HTML format. When I use chrome to view it and everything is good. But I just wonder how could I just directly highlight some useful information (e.g. text) when I use chrome to view it? The html files are local, I know that I could use some software to edit it, like using HTML tag <font color:> etc.
But I just want to highlight it directly in the browser like editing it in word. Is there any suggestion? Dose chrome support such kind of plugin? If you still don't understand what i mean, please refer to "clip to evernote", which is a plugin of chrome and can cut the pages and upload them to the evernote server. when I use evernote client to read them, I can directly highlight some words which is useful to me.
It's much more a SuperUser question, but ... There is a lot of plugins for highlighting web pages out there. You could try Yawas or Simple Highlighter
edit: ok, I think I understood better your problem ... Yawas, Simple Highlighter, as well as most other highlighters, don't hightlight on local pages.
I'm not sure there is such an highlighter available for Chrome, then. What I would suggest is to try opening you documentations with Amaya instead of Chrome. It's both the Browser and the Editor from the W3C; and since it has both functionalities, you probably will be able to do what you want on your local pages.
You can save it to your computer by clicking "Open a new tab containing a list of highlights and notes on just this page". Then you can save only the html contents to your computer with the name as you like. Don't try to use ALT to save the list of note because you will never see the contents what you want to save.

Avoid repeating headers & footers

I am building a website with at least 7 pages and am looking for a way to avoid having to repeat all headers & footers etc. on every single html document.
I know there are frames and iframes but some browsers don't support these and I want to do something more efficient and flexible for updates. Any ideas/suggestions?
Thanks for the information guys! I'll be sure to try them out.
One more thing is that I have a login form within my header. Will these methods affect it?
Regards
Yes, server side includes are the way to go, just a few clarifications:
1) You can do it as described by Sotiris if you choose to use PHP - which is very common choice, and btw.virtually all hosts support php.
2) Although the file will have extension .php, you can put your pure html code in it.
3) To be able to test and see this on your computer before uploading it, you have to install server on it. At this point I think it's simplest and fastest for you to go for some ready made solution - these are downloadable free:
http://www.wampserver.com/en/ (for Windows)
http://www.mamp.info/en/index.html (for Mac)
http://tuxtweaks.com/2010/04/installing-lamp-on-ubuntu-10-04-lucid-lynx/ (for Linux)
you can create a php file that will include all required code (for example footer.php). Then you can link it adding in every page in the proper place the following code (if you want to add the footer for example):
<?php include "footer.php"; ?>
If it is static HTML pages that you are builing, you probably want to think about Server Side Includes
http://en.wikipedia.org/wiki/Server_Side_Includes

Is it possible to save changes in Firebug locally?

What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.

How to make html file encrypted?

I want to know, how to make my html file code to encrypted?
So that if normal user see the code,
then they don't understand the code?
I don't remember how I did it, but I was just reading some of my own code recently and I couldn't even understand it. A normal user would not have a chance. I don't thing encryption was involved however.
You can't. If the user can't see it, the browser wouldn't be able to either!
This is called obfuscation, but it's pointless. People can still view your complete DOM tree in DOM Inspector or Firebug. As this Yahoo blog entry says, "If you don’t want people to see your programs, unplug your server." This applies equally to HTML.
Don't bother. All encryption will do for you is slow down your site. It's not worth 'hiding' it. Any moron can just open up Firebug and see everything without even having to decrypt the source code anyways.
This might be good: http://www.iwebtool.com/html_encrypter
it's free and online makes your code into unicode hope less to copy and edit!
You may try disable the mouse right click.
JS (jQuery):
$(document).bind('contextmenu',function(){return false;});
Again as shown in other posts this is actually meaningless because if someone want to view the source they can just press F12 to open the console and view all the codes.
Also, I don't think a normal user will want to see this kind of things. If they see that, they just think they're pressing the wrong button and close it.
You can use StatiCrypt to encrypt your HTML file using AES-256 encryption. You then get a simple HTML page with a password prompt, see example.
Two cautionary notes from the project's repository:
Disclaimer if you have extra sensitive banking data you should probably use something else!
...
AES-256 is state of the art but brute-force/dictionary attacks would be trivial to do at a really fast pace: use a long, unusual passphrase.
A similar tool is clientside-html-password. There might be others as well, but the bottom line is that you can make an HTML file encrypted.
I've written a tool to encrypt HTML files called PageCrypt. The tool asks for a password at the time of encryption, then spits out an encrypted HTML file. Then, when a user views the encrypted file, they need to input the set password to be able to unscramble and view it.
The tool is hosted here:
https://www.maxlaumeister.com/pagecrypt/
with source code available here:
https://github.com/MaxLaumeister/pagecrypt
Description of the project, from the project page:
PageCrypt - Password Protect HTML
This tool lets you securely password-protect an HTML file. Unlike other password-protection tools, this tool:
Has no server-side components (this tool and its password-protected pages run entirely in javascript).
Uses strong encryption, so the password-protection cannot be bypassed.
All you need to do is choose an HTML file and a password, and your page will be password-protected.
You can try DRM-X 4.0, it supports protect HTML JS CSS and Images. it also supports protect Dynamic Website.
https://www.haihaisoft.com/HTML-Encryption.aspx
https://www.haihaisoft.com/Dynamic-Website-DRM-Protection.aspx