HTML Generator

What Is an HTML Generator?

An HTML Generator is a tool I created for people who want their HTML output to remain clean and well-structured. I personally built this tool for my blog contributors to use when creating posts.

It helps format content such as text, tables, and scripts so that everything is properly structured and presented cleanly, without breaking the layout or formatting of the post.

1. Setting Up Your Content

Before generating the final code, prepare your text in the Editor Container:

• Headings: Select a heading level (H2 is standard for main sections) and type your title in the "Heading Title" box.
• Body Text: Type your main paragraphs or list items into the large textarea.
• Bold, Italic, Quote & Code: To add them, wrap your selected text (or simply insert the tags if nothing is selected).
• Alert Boxes: If you want to highlight information, select an Alert Type (Info, Warning, etc.), type your alert message, and then click +Add to Post.
• To prevent your heading and body text from being wrapped inside a List or Alert, always click +Add to Post before selecting a new format type.

2. Inserting a Table, Link, Image, Media

To add a structured data table to your post:

1. Click the Table Icon in the toolbar.
2. A pop-up will appear. Enter the number of Rows and Columns you need.
3. Click Insert. A skeleton table code wrapped in <div class='cc-table'> will appear in your text area.
4. Edit the text: Replace the placeholder words like Header and Data with your actual information directly inside the code in the textarea.

To add a link, image, and media to your post:

1. Click the Link , Image , Media in the toolbar.
2. A pop-up will appear. Type your text or link.
3. Click Insert. A skeleton code wrapped in your link, image, and media will appear in your text area.

3. Adding to the Final Output

Once you have configured a specific element (like a heading plus a paragraph), click the +Add to Post button.

• This moves your current work into the Full Post HTML Output box at the bottom.
• The top inputs will reset, allowing you to build your post piece-by-piece (e.g., Add H2 + Paragraph, then Add a Table, then Add an Alert).

4. Moving the Code to Blogger

When your full post is visible in the green-on-black "Full Post HTML Output" box:

1. Click the Copy Icon to copy the entire code.
2. Open your Blogger Dashboard and create a new post.
3. Switch the editor from Compose View to HTML View (using the pencil/bracket icon in the top left).
4. Paste your code into the post/page editor.
5. Switch back to Compose View to preview your layout, then click Publish.

Tips for Contributors

• Code Snippets: If you are sharing code, select the language (JS, CSS, HTML) before clicking "Add to Post" to ensure syntax highlighting is prepared.
• Lists: For Bulleted or Numbered lists, simply type your items on new lines in the textarea and select the appropriate list style.
• Safety: Use the Eraser Icon if you need to wipe the entire project and start over.