top of page

Use Perplexity to Generate Simple HTML

Writer's picture: Mark MillerMark Miller

I've been reading about people generating complex code reviews using AI, so when I was asked to create a simple HTML email template, I figured I'd see what all the hollering is about when it comes to code creation. Could Perplexity save me coding time by creating usable code for this purpose?


Spoiler alert: Yes, it can. Yes, it really does work. Here's the process I went through.


The Initial Problem

I need to create an HTML email for a project's donation request to its members. Gmail does not have the ability to create HTML emails within its interface. After doing a little research, it turns out you have to:

  • Create the HTML file in another program

  • Open the HTML file in a browser

  • Copy the displayed output from the browser

  • Paste that into a new email in gmail


Kind of convoluted to write it all out, but pretty simple in practice.


I'm no novice when it comes to HTML, but I didn't want to spend time doing something that AI could (potentially) do in a couple seconds. This isn't rocket science, just a little HTML.


First Prompt

"I need you to create HTML template with css embedded to format an email in gmail. The template should have a single column, 75% width of the available space. The column should be three single rows, with an image in the top row, text content in the second row, and a footer in the third row. The background color of the entire page should be medium gray. Do you have any questions for me?"


First Response

"I understand you need an HTML email template with embedded CSS for use in Gmail. Here's the template based on your specifications:"


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Template</title>
    <style>
        body {
            background-color: #808080;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 75%;
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
        }
        .image-row {
            width: 100%;
        }
        .image-row img {
            width: 100%;
            height: auto;
            display: block;
        }
        .content-row {
            padding: 20px;
        }
        .footer-row {
            background-color: #f0f0f0;
            padding: 10px 20px;
            text-align: center;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <table class="container" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td class="image-row">
                <img src="https://example.com/your-image.jpg" alt="Header Image">
            </td>
        </tr>
        <tr>
            <td class="content-row">
                <h1>Your Email Content</h1>
                <p>This is where your main email content goes. You can add paragraphs, links, and other text content here.</p>
            </td>
        </tr>
        <tr>
            <td class="footer-row">
                &copy; 2024 Your Company. All rights reserved.
            </td>
        </tr>
    </table>
</body>
</html>

Evaluation of Code Created and Second Iteration

That's pretty nice for the initial output. It's interesting to see the style tag being used to setup classes for such a small document, so I requested it use in-line CSS for the out put.


As a reminder, the major AI platforms keep a contextual "conversation" record so you can reference previous parts of the conversation without having to restate everything.


"Recreate the output with in-line CSS"


Second Iteration Response

"Certainly! Here's the revised HTML template with inline CSS, which should improve compatibility across various email clients:"


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Template</title>
</head>
<body style="background-color: #808080; margin: 0; padding: 0; font-family: Arial, sans-serif;">
    <table cellpadding="0" cellspacing="0" border="0" style="width: 75%; max-width: 600px; margin: 0 auto; background-color: #ffffff;">
        <tr>
            <td style="width: 100%;">
                <img src="https://example.com/your-image.jpg" alt="Header Image" style="width: 100%; height: auto; display: block;">
            </td>
        </tr>
        <tr>
            <td style="padding: 20px;">
                <h1 style="color: #333333;">Your Email Content</h1>
                <p style="color: #666666; line-height: 1.5;">This is where your main email content goes. You can add paragraphs, links, and other text content here.</p>
            </td>
        </tr>
        <tr>
            <td style="background-color: #f0f0f0; padding: 10px 20px; text-align: center; font-size: 12px; color: #888888;">
                &copy; 2024 Your Company. All rights reserved.
            </td>
        </tr>
    </table>
</body>
</html>

First Try Using the Code

The second iteration is a lot cleaner for such a small file. I copied from Perplexity, opened a text editor, pasted the content, and saved as Test v01.html, and then opened the newly created webpage in a browser. Here's what the output looks like in the browser window.



Nothing fancy, but exactly what's needed for the email template. I did a "Select All" on the webpage and then pasted that into a new gmail compose window.




I replaced the "header image" alt tag with a picture and added a "donate button", linked directly to the contribution page for the final version, along with a footer for the company information. I also wanted was a grey background surrounding the content area. I added a clarifying prompt: "Rewrite the script putting it in a wrapper table." and received the following output:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Template</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif;">
    <!-- Wrapper table for background color -->
    <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#808080" style="background-color: #808080;">
        <tr>
            <td align="center" style="padding: 20px 0;">
                <!-- Main content table -->
                <table cellpadding="0" cellspacing="0" border="0" width="75%" style="max-width: 600px; background-color: #ffffff;">
                    <tr>
                        <td style="width: 100%;">
                            <img src="https://drive.google.com/uc?export=view&id=16PlJ0WcUKU0WAoAyNjuttHfXW56nADhc" alt="Header Image" style="width: 100%; height: auto; display: block;">
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 20px;">
                            <h1 style="color: #333333;">Your Email Content</h1>
                            <p style="color: #666666; line-height: 1.5;">This is where your main email content goes. You can add paragraphs, links, and other text content here.</p>
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color: #f0f0f0; padding: 10px 20px; text-align: center; font-size: 12px; color: #888888;">
                            &copy; 2024 Your Company. All rights reserved.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

With some minor tweaks to the images and layout, I was able to save this as a template for future emails. Discovering the "Save as a template..." capability in gmail was one of the highlights of this project.


The final email came out looking exactly as needed for the donation request.



Final Thoughts

While not exactly rocket science code, the use of Perplexity.ai to create the foundational template for this project was well worth the effort. My suggestion to you is to start with some very simple and continue to iterate through the prompts, refining the output is small steps until you get something that's usable, and then hand tweak the code to get it to production state.



The Artificial (Un)Intelligence Conference


If you like what you see here, please join us for the first Artificial (Un)Intelligence Conference on May 8, 2025. 24 hours, over 100 sessions. It's free. No vendor pitches. No sales sessions. No marketing spam.


We're providing community provided solutions for practitioners who want to experiment with different ideas on how to use AI. If you have a project you're working that will be of interest to the community, we want to hear from you.


Let us know if you'd like to join us and we'll ping you as sessions become available.








38 views0 comments

Comments


bottom of page