Storing HTML Templates versus Generating HTML Templates - html

This is rather a discussion I'm trying to start to get a better insight on how other people solve this problem:
On our web application we currently have the ability to store HTML snippets and pages in the database and render them or use them for email templates. Users have the ability to create or modifiy these templates.
Because we're expanding the functionality of the application, we rely on emails to deliver messages to the users of the application. These emails rely on the templates as well to generate content. The problem is that the emails are starting to get some high scores on the SPAM filters due the content of the HTML Snippets.
As a proof of concept I wish to remove the ability to create/modify these snippets and make them HTML compliant to reduce the SPAM scoring. The discussion i'd like to start now:
Would you store these snippets in the database and call upon them when needed, or would you go with a hieracy of classes that can generate the correct HTML by accepting the required parameters?
What would you do and why?

You can generate PDF from any html you want and then send to user email.
I do this way.

Have you taken a look at PostageApp?
It has the ability to create HTML + CSS templates with automatic in-lining, which makes your design a lot easier. In addition, the preview function of the templates will let you know if you have used any invalid HTML or CSS markups, which might get flagged as spammy.
(Full Disclosure: I am the Product Manager of PostageApp.)

Related

Do I need an HTML file for every single page on my website?

Say I have a product website, like Amazon (this is not the case, but it will help me explain my point), and I have a URL for every single product (such as with Amazon)...
Do I need to copy-paste and modify an HTML file for every single individual product page, or is there a way to use a "model" on which I can base all my other pages without recopying the whole code and modifying a few things in each?
I've just started learning HTML and web development, so bare with me if I'm asking a stupid question.
It just seems odd to me that a million-page website should host a million+ individual, nearly identical, HTML files.
Thank you very much in advance.
P.S. I'm using Amazon's brand name as an example here, and am not affiliated with anything related to it. Thank you for understanding.
No, you do not need an HTML file for every single page on your website. While you could do that, it is becomes very infeasible to manage the bigger your site becomes. On most websites you would have the following components:
A front end - consists of HTML code and usually some sort of template engine with placeholders for your data
A backend - consists of your data store (usually a database).
There will also usually be some form of API and/or middleware between your front end and backend.
If you go to https://example.com/myproductid in your browser, your computer will send that request to the web server. The web server will then retrieve your data, load it into the correct template, and serve the page to you.
In traditional HTML and PHP only websites, you would have to reload the entire page each time you went to a new product. However, you can instead use a technique called Ajax to only update certain parts of a web page rather than reloading the entire page. That way you can just update the text, images, and links that are specific to the product, and the rest of the page would stay the same. (Note: Ajax originally used XML, modern implementations usually use JSON).
Ultimately, you will want to learn some JavaScript and then start looking into various web frameworks or libraries such as ReactJS.
Not you Can have only one page for all product, but you have to make it Dynamic.
Yes you need an HTML document for your each webpage, like for Home page, contact us page you need different HTML documents

How do I reuse HTML code for different pages just like every popular website in existence?

On almost every website, they have various pages, each having the same HTML code. I strongly doubt that the creators of the websites edit the HTML code of each page, especially when users can make their own pages (like redditors making their own subreddits). These two pages from wikipedia: https://en.wikipedia.org/wiki/Synthesizer https://en.wikipedia.org/wiki/Drum_machine are different pages but they have very similar html code
And I don't even need to have users create their own pages, I just need to have multiple pages that reuse html code. https://www.apple.com/mac/ https://www.apple.com/ipad/ are clearly different pages that have different html code, but I don't think the developers would copy and paste HTML code, change it, then change the code of the headers in each page to include the new page when they have a new product.
https://getbootstrap.com/docs/4.3/getting-started/introduction/ and https://getbootstrap.com/docs/4.3/examples/ are different pages that use the same html code. What do they use? Should I learn bootstrap? I've seen websites do this way before bootstrap was made, though. What's something like this called? Do they even write in HTML or do they write in something that compiles into HTML? How am I supposed to do this very simple task that every webdev knows how to do yet I am unable to find any information on it?
I've tried searching for "Reusing HTML code" but I found nothing that answers my question. All I've seen are special cases
I'm hoping with this, I'll be able to have a website that can have multiple pages that use the same basic HTML code. If I wanted a new tab, I won't have to edit the HTML code of each page.
What you described is achieved by HTML templates and server-side scripting. The server script injects data in your HTML template, thus reusing one template for any number of pages. A template may consist of multiple parts that can be combined to achieve similarly looking yet different pages. It is called dynamic HTML.
Here is a very basic tutorial on how it works: https://www.php.net/manual/en/tutorial.php
To create a modern website you need to use a dozen different technologies together. Here is an infographic to give get idea: https://codeburst.io/the-2018-web-developer-roadmap-826b1b806e8d
They are many ways to do it!
If you are using asp.net you can use master page.
For more info : Master page demo
or else you can use php "include" statement. Suppose you created one page as header.php(header.html) and other one as footer.php(footer.html), then you just have to include those pages.
eg
<?php include 'header.php';?>
<html>your web page</html>
<?php include 'header.php';?>
Well this question is so extremely general it's hard to answer without knowing what your goal is. I highly doubt there are any web developers that develop a website from scratch anymore. Most use a content management system (CMS) which uses server side scripting to serve HTML pieces to form a website. For example header, footer, content-body I don't mean the HTML tags header and footer, although they will be part of the pieces the CMS serves. The most popular content management system is Wordpress, which is built in php. The pages don't even need to be specifically designated, they can be a list of blog posts, a picture gallery ...etc . There are many different CMS packages that serve different purposes and depend on your requirements. Wordpress is in my opinion the simplest with the lowest learning curve and is quite powerful, especially with all of the templates and plugins available. Wordpress itself is free and there are many free templates to start from. However, there are paid templates and plugins that offer additional features. The only thing that you need is php support and a hosting site.
All you need to know can be found here - https://codex.wordpress.org/Getting_Started_with_WordPress
Other content management systems include Joomla, Drupal, Magento, PrestaShop, TYPO3. Each have their advantages and disadvantages, as well as varying support for plugins and templates. Some are designed to support eCommerce sites, such as PrestaShop and TYPO3 but most CMS libraries provide support for eCommerce through plugins and templates.
Bootstrap is a framework, which is a little different from a CMS, but it offers a similar functionality. It serves different pieces or containers you design to form a website or page.
I recommend starting with Wordpress and if you have more specialized needs, check out the other options. I don't recommend you start writing php code to serve pages unless you are a very experienced php coder and even in that case why would you want to if there are so many free open source tools that have already done this for you.

How to validate html email templates?

I am using telerik reporting tool to generate reports in different formats, .pdf,.html, .doc, .txt etc. Some of our client's email server doesn't sport attachment in emails so I want to embed the .html report to my email body instead of attaching it as attachment so user can see report content directly and copy report content. But when I append .html report to the email body it doesn't render in proper format as it was. Is there any online tool or plugin which convert the normal html to email template friendly html? Or how can I validate that this page is going to render fine as email body or not if not then why not? which tag should I remove or replace etc.
I have tried this online tool
but its not working, still got dirty html in email.
There are a couple questions in here, which I will do my best to answer as someone who is comfortable coding emails.
Regarding HTML Email validation, there really isn't a good option.
Since most email clients don’t follow web standards and there are no
email-specific standards in place, properly coded HTML emails will not
pass HTML validating because, if coded properly, nearly all of the
code within an HTML email is likely to be comprised of deprecated
elements.
source
You can use the W3C validator to catch unclosed tags and typos, but that's about it.
But it sounds like you're looking for a tool that converts webpage-friendly html into email-friendly html. Despite both using HTML and CSS, coding emails is quite different from coding the web. Unless the web-friendly HTML design is very basic (say, a series of paragraphs and images), chances are the webpage-friendly html would not bode well in email clients. (Sounds like you've already discovered this.)
Without knowing what these reports look like and what how they should display in email clients, I'm hesitant to give you specific suggestions. I don't know any tools that automatically make 'safe' email markup. If you're open to tweaking the email markup a little, here are a few guidelines:
Keep the design simple.
Use <table>s instead of semantic elements like <div> for layout.
Become familiar with what CSS is and is not safe to use in an email.
I have just found this nice validator (EmailLint - unfortunately hosting has lapsed). There are defined rules for e-mails and you can validate your e-mail against them.

Design process of html to be used as template for a backend

I am converting mockups to HTML + CSS. Then this will be used as a template for a PHP system by other people (actually it can be any server side language, PHP is not important)
There are, for example, 10 different type of pages. But in each page, many blocks can differ in many cases. For example a block can be displayed differently for anonymous and logged in users. But I dont want to copy the whole html file and just change that block and have another html file. I know php can be written to include parts of the page from many files. But there is no php yet in my design workflow, and I want to have full HTML design before ever passing the files to PHP guys.
Basically, what I want is a "CASCADED" html structure for design purposes. So in a "container" html file, I can include all the different parts from different HTML files.
Does anyone know a method / tool / process to design dynamic pages?
I can think of two ways of accomplishing this. First pull in each of the various components on the page with ajax calls, jquery will make this relatively easy.
Or if you don't want to use javascript then iframes. But the iframes method is extremely prone to buggyness and in some layouts just will not work. Also keep in mind that since you aren't directly injecting html into the page each page would have to keep track of its own styles.

combining two pages in HTML

I'm creating a web site for an institute, since I'm new to this field I want to know whether I can create a page for header part(which containing the logo and the name of the institute) and can I combine that page to each and every page I'm creating. If it is possible suggest me how can I combine the header part & newly created page..
Surprisingly, there is no way to do that in straight HTML. Not even in HTML5.
If you are only creating a few pages, I suggest simply copy-pasting the content to each page's HTML file. Admittedly, that approach can quickly become a burden.
Some web servers will parse the HTML of a page before it is served out, look for a specific kind of HTML comment, and then interpret that as a command to insert the contents of another file. This feature is called "server-side includes" or "SSI". Some web servers, such as Apache Tomcat, have this feature but turn it off by default due to security concerns.
If you are building dynamic pages where the HTML content being served is created on-the-fly with a programming language rather than read from pre-created disk files, then you can definitely include fragments of HTML using that programming language.
I suggest you do some additional study to build up your web authoring skills. One great source of training is the book "Head First HTML with CSS & XHTML" from O'Reilly Media, Inc.
You can do pull html code from different places and merge them with php. It's been years since I've done it, so I can't get into the particulars.