Create an HTML Invoice: Difference between revisions

no edit summary
No edit summary
No edit summary
Line 1: Line 1:
'''The Goal'''<br>
'''The Goal'''<br>
Ever need to create a printable invoice with all of those little blocks and lines?  It can be a challenge, and even more so in HTML.  There is an easier way than trying to draw it though, place your data on top of an image.  Essentially it works like this.
Ever need to create an HTML printable invoice for your customer with all of those little blocks and lines? And then try to electronically fill the required data in the little spaces?  It can be a challenge in Windows, and even more so in HTML.  There is an easier way than trying to do it as described above - instead, place your data on top of an image.  Essentially it works like this.
    
    
'''The Form'''<br>
'''The Form'''<br>
Create an exact size image.  For testing you can take a screen shot of one if available, or create one using Quark or one of the other similar products that are designed for this purpose.  Doing it this way provides a much nicer image.  Use a PNG file format, it’s more robust than JPG.
Create an exact size image.  For testing you can take a screen shot of your invoice or create a copy of your invoice using Quark or one of the other similar products that are designed for this purpose.  Doing it this way provides a much nicer image.  Use a PNG file format, it’s more robust than JPG.


A “span” tag is used to group HTML and can also be used to “hook” information onto that HTML.  Here we will use it to enforce accurate positioning of the data elements on top of the image.  An example will help.
A “span” tag is used to group HTML and can also be used to “hook” information onto that HTML.  Here we will use it to enforce accurate positioning of the data elements on top of the image.  An example will help.
40

edits