Best Way To Format An HTML Email? [closed] - html

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am implementing a comment control that allows a person to select comments and have them sent to specified departments. The email needs to be formatted in a specific way, and I was wondering what the best way to do this would be.
Should I just hard code all of the style information into one massive method, or should I try and create a separate file and read it in, and then replace certain tags with the relevant information?

Find and use some kind of template library, if possible. This will make each email a template which will then be much easier to maintain than the hardcoded form.

Campaign monitor has some great, well-tested free templates:
http://www.campaignmonitor.com/templates/
Make sure whatever you use will display well in all clients.
A great guide:
http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

In addition to using some sort of template, as tedious as it is, inline styles are the most cross-client compatible way of styling HTML emails. Not every email client will fetch an external stylesheet and many don't do so well with an embedded style section.
That being the case, I would choose a fairly simple set of style rules for the email in order to ensure that it looks the same in different email clients and try not to rely too heavily on images as many client will require that extra click to show content.

I would use a template approach. It wouldn't he hard to create a simple regex template system, replacing something like #somevar# with the value for 'somevar'. You could also use a premade template system, like Smarty for PHP. I think that would be the cleanest approach.
Alex

I've used XLST templates in the past to format emails. Generally emails are best constructed using tables and inline CSS. Note that outlook 2007 does not support background images :(

Definitely use templates. I have done it with text templates using custom tags like so:
<p>Dear |FIRST_NAME|,
But I really cannot recommend this; it is a world of pain. The second time I did it (an html email appender for log4net) I used an xslt to transform the object (in this case a log4net message) into an html email. Much neater.
Note that certain clients (e.g. Lotus Notes) do not support XHTML, so use plain old HTML 1.0, with no css, and you should be ok.

Related

Learning (X)HTML using the DTD [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm thinking of learning (X)HTML.
I have read on the web about w3schools and discussions on the subject and intend to stay away from it (or at most use it as a reference).
I think it is best when learning programming languages to go to the original source (php.net, python.org, mysql.com, ...).
I tried to read the (X)HTML 4/5 spec but gave up soon after starting. The next best thing as far as I can tell is the DTD.
What are your opinions in this kind if learning and can you recommend alternatives?
Also is there a DTD or something like a DTD for HTML 5 yet?
HTML is more than the DTD. Learning HTML from DTD is like learning C from include files — you just don't do it.
The DTD just specifies a few simple grammar rules. You can use it to roughly validate your code but it's limited. And it definitely knows nothing about semantics.
It's a guess-work. It's like, you have:
<html>
<body>
and now the DTD only says you can choose one of: <h1>, <h2>, …, <ul>, <ol>, …, <p>, …
Well, sometimes it gives a brief description of what particular elements or attributes mean (in comments). But that's all. It doesn't explain what is the purpose of given element, what are the alternatives and which one should fit the particular task better.
Also, remember that HTML is rarely used alone these days. You at least have to know CSS as well (unless you're going to write some ugly soup — then please don't even start), and CSS is not fit for DTD.
The specs are the most important documents for you but they are not fit for learning either. The spec is the thing you start to use after you catch all the basics already, and where you check your understanding of them. But the HTML and CSS specs alone are not enough either. There's WCAG at least. And a fair bit of common sense.
I think the one tutorial you could start with is the one from Mozilla. It's not perfect either and you will need to read much more before you start writing good HTML.
There's plenty of resources out there. Many great books and websites. Don't learn from the spec, it's very dry. You can't learn from the DTD - it's just a bunch of code outlining what elements can contain what, and so on. Here's a few things to check out:
http://jessey.net/simon/xhtml_tutorial/
http://diveintohtml5.info
http://www.kirupa.com/html5/introduction_html.htm
https://developer.mozilla.org/en-US/docs/HTML/Introduction
And yes, I do(!) think that you can learn from w3schools. It's another good resource.

Does using tables instead of CSS to control layouts have any legitimate use? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
I'm updating a lot of code for a web app and tables are used everywhere to control layout.
I'm relatively new to HTML programming and am not sure what to make of the use of tables where CSS could seemingly be used. Is this just from a time now gone?
Bottomline, is the latest iteration of CSS and browser support acceptable enough to consider styling using tables antiquated?
In my opinion, the CSS is much easier to use.
It's a bit subjective, I know, but I think a consensus can be reached.
Use tables for tables. CSS for everything else.
The guy who first thought of using tables for layout wrote an article in 1997 stating, "The Web is Ruined and I Ruined It". There are countless similar articles, such as "Tables for Layout is Stupid" and the like. CSS has been around for that long and no developer worth his salt would not use it to layout his web pages. We're on the 3rd iteration of it and CSS itself is used to style tables by default in the browsers themselves.
At best, tables are a predefined, immovable grid of boxes you must fit your design into. Compare that to CSS which has limitless flexibility and reasoning for tables for layout flies out the window.
Do not use tables for layout. Use CSS. Nothing else to discuss.
This seems like a pretty subjective question, but basically the answer is that if the data lends itself to a table, put it in a table element. You can still style the tables with CSS, the HTML should describe the data whereas the CSS styles it.
If you have a table of data, don't make a "fake" table using divs/spans and make it look like a table. Put it in a table and style as appropriate.
If tables are being used for tricks like a 2-column layout, where there is no tabular data...yes that way of styling is obsolete and depreciated.
Keep in my though, I don't believe its a horrible "sin" to use tables for styling if it saves time, makes cross-browser compatibility easier, and looks fine. Remember, the only one (usually) reading your markup is the browser. If its going to take hours to rip out all the tables for the exact same end result, you might want to question if its worth the time/effort. On the other hand, when starting from scratch, you may as well learn the modern methods and create some maintainable markup.
Tables aren't going anywhere, it's in the HTML5 spec for a reason. You shouldn't use a table to style your website, but if you have some tabular data, then put it in a <table>. Just as you would put a paragraph into a <p>, a list of items into a <ul>, or a header into a <h1>.
People are so rash in their judgement of tables because they were used for evil for so long. I can use a bunch of <div> containers and a crap load of CSS to mimic an unordered-list, or just use semantic markup.
So, the lesson to be taken from this is, use tables for tabular data, and NEVER for styling. You should also never use things like valign="center" and cellpadding="0" on your table elements, this should be passed onto the responsibility of CSS to style.
P.S. look at Google's code, they're still using tables, and they're one of the main companies who are pushing HTML5.
It's easier (arguably), and has use for email clients. Legacy support is also better for IE 6 and below as well as other older browsers. Other than that, I have yet to see something tables can do that cannot be done with modern CSS. So the short answer is not any more.

Why are comments in HTML/CSS so infrequently used? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
I apologise in advance if this question is asked too often, but I've been doing light web development lately and noticed this across many different (and somewhat prominent) webpages.
I see comments (of varying quality) being used in "more traditional" programming languages, but it's very, very uncommon for me to see them utilised in HTML or CSS. (I've seen it more in JavaScript, though.) I can usually figure out what's going on since HTML isn't very complicated, but why is this so?
Thanks!
Perhaps the commented version is kept locally, and minified/gzipped versions are the ones shown to the public. This makes loading times faster than those with the additional commentary.
I think because HTML (and CSS for the most part) is simple markup and rarely contains any complex logic in it (JavaScript maybe). So the markup itself is self-explanatory and requires no additional comments to explain/clarify what it is or what it does.
The pages you look at the internet are just the end products. Bandwidth costs money and noone wants to pay for sending noticies of the inner workings of their site to visitors most ofwhom never takes a look at the page source.
The backend which generates these pages (as most of the web pages are generated) can have comments of course. There are security concerns too, you don't want to give out unnecessary information about the inner workings of your site.
There are sepcialized tools too just to remove unnecessary content from pages (and css) to create smaller files.
I would speculate because HTML is a markup language, and all the content is quite transparent - so not necessary to comment compared with a procedural language where the logic can be complex, and a hint helps you to understand it.
I would also speculate it is because a large portion of the HTML is repetitive between pages and sites, so needs no explanation as it has been seen many times before.
You would not want to end up with this would you :)
<h1>My great site</h1>
<!-- heading level one - 'My great site' -->
Comments are best used to explain tricky bits of a file, and there's not a lot that's tricky about HTML or CSS.
WIth that said, if i'm doing something that works in some specific browser, i'll add a comment about why it's done the way it is. I'll often also use a comment to add notes about bug fixes (especially if there's a ticket for the bug and double-especially if there's a hundred other people working on the CSS as well). But often for HTML, it's almost no effort to turn the HTML comment into a comment in the server-side language, hiding it from the browser completely. So the code could be commented, without you ever knowing it.
I personally don't use them because during web development, comments tend to be personalized, especially ones you would put into HTML. Instead, I put them in PHP in HTML to make them invisible to the source reader.
As for CSS comments, the only time I have those is when I have over 5000 lines of CSS code and need to separate it into sections. Even then, I prefer to make several smaller files which are self-explanatory through file location and file name, rather than use extensive commenting.
I believe HTML and CSS to be simple and descriptive enough for anyone to derive their meaning very fast without help from comments.
CSS, especially, is incredibly self-describing. E.g.
margin: 0;
There’s not a lot to add to that. In CSS, I always try to add comments when the purpose of some code isn’t immediately obvious, e.g.
overflow: hidden; /* Contains descendant floats */
And in HTML, I try to make class names and id values self-describing, like good class, method and variable names in programming languages.
The most important reason for that is as you stated, there is no such a huge need for comments in HTML and CSS.
Secondly, commenting in HTML is very difficult compared to programming languages, putting a <!-- --> mark needs time, whereas // comes from inside.
Quite simply, HTML and CSS don't need as many comments. For the most part, the CSS and HTML you write does exactly what it says. While it is certainly possible to obfuscate HTML and CSS (especially CSS), it does not happen nearly as often as it does with programming languages. In programming, you need comments because the code is not always self-explanatory and you often do strange things for non-obvious reasons.
Commenting in HTML is only needed when you are doing strange things you neeed to explain. Otherwise, it is just as ridiculous as making comments for code that has an obvious behavior, like this:
var i = 3; //Declares a variable called i and assigns its value to 3.
Example of why you might need a comment in HTML:
<td> </td> <!--IE does not display borders on cells without content-->
I would assume that it is
because HTML is not a programming language and you usually do not have to explain why/how something works..
and also because people try to minimize the size of their pages..

Should I use tables when creating tables in HTML/CSS [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have a beginner's question for web development. I am going to create a table in which I am having input fields which I will submit to the server.
What is the common practice for doing this? Should I use html-tables or should I build the tables using stylesheets for positioning and sizing cells, columns, etc.? If both are common practice, what are the pros and cons of using eithor of those?
If the content is tabular in nature, logically structured in rows and columns, then the appropriate tags - the tags that describe the structure of the content - are table tags.
You will have folks on both side and some will be nicer than others. Essentially, you use tables for tabular data and not to make a layout for your buttons, logos, etc..
On the other hand, I have some old asp Classic code where we used tables everywhere and it still works great.
If I did it today, I'd use "semantically correct" design where I could which means tables for table data (things displayed in row and column) and the css stuff for layouts.
I usually use divs for this purpose. The strict definition would be to use tables only to display semantic content.
You need to plan carefully first what you need in terms of layout, whether sections are going to be similar, whether there is a lot of sharing or not. And the amount of formatted container your foresee.
It naturally occurs to you that if you can centralise the design on some CSS commands, you will benefit from being able to change looks at once as they are all linked to a common source.
If you are going to have several pages, you will be thinking of having the CSS even on a different page and link to it from others.
Also, you need to know that divs and spans work in a different way than other HTML elements. You will not be able to obtain effects that you would have obtained with a table.
In other words, what you need to do is go to the w3 website and read everything about CSS. Expecting to get an answer in 3 lines about such a huge subject will not help you much.
Alvaro
My motto for html/css is:
"Use the right tag for the job". If its a table let it be a table :)

open source syntax highlighter tool? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm looking for an open source, cross platform (Windows & Linux at least) command line tool to take some code (C++, but multiple languages would be sweet), and spit out valid a XHTML representation of that code, with syntax highlighting included.
Ideally the XHTML should just wrap the code with <span> and <div> tags with different classes so I can supply the CSS code and change the colouration, but that's an optional extra.
Does anyone know of such an application?
I can recommend Pygments. It's easy to work with and supports a lot of languages. It does what you want, i.e., it wraps the code in <span> tags:
from pygments import highlight
from pygments.lexers import PythonLexer
from pygments.formatters import HtmlFormatter
code = 'print "Hello World"'
print highlight(code, PythonLexer(), HtmlFormatter())
gives
<div class="highlight">
<pre><span class="k">print</span> <span class="s">"Hello World"</span></pre>
</div>
and you can then use one of the supplied style sheets of make your own.
You can also call it via it's pygmentize script. The script can format the output in different ways: HTML, LaTeX, ANSI color terminal output.
Vim can save any code it highlights to "colored" HTML (it runs on several platforms). There is GNU hightlight too. And tons of others.
There is very good one, driven by XML, fast and opensource: http://sourceforge.net/projects/colorer/
I don't recall if GeSHi has a command-line program but even if it doesn't, it shouldn't be hard to whip one up. It does a great job of taking code and generating pretty, coloured HTML/XHTML, even with line numbers (or every X line numbers, even) and other helpful features.
Enscript looks like what you are asking for :
spit HTML (or PS, or RTF) from ascii files
It includes features for `pretty-printing' (language-sensitive code highlighting) in several programming languages.
Not sure how helpful this will be, but my team uses doxygen to produce documentation, which happens to provide color syntax highlighting on our code views as well as a side bonus. Never really needed it, but it does it.
If you're ok with using ruby, you want coderay.
I'll add my own one to the list, it colors C# but could be adapted for C, C++ and Java.
It produces the inline styles by default and a pre tag.
The source is there in C#, you'll need to grab mono/monodevelop and compile it as as a console app, so it's not shrink wrapped in that respect.