How To Add HTML to Google Sites ! (Full Tutorial)

Summary of the Tutorial (How to Add HTML to Google Sites)

The video explains how to insert custom HTML code snippets into Google Sites without building the entire site from scratch in HTML. It mainly focuses on using Google Sites’ “Embed” feature to paste HTML (including example code generated elsewhere, such as ChatGPT).

Steps / Key Actions Covered

• Start from a Google Sites page (optionally after choosing a template), and then add custom content using HTML.
• Use Google Sites’ Embed code feature:
  1. Copy the HTML snippet you want to add.
  2. Paste it into the Embed code field.
  3. Insert/save the snippet to place it on the page.

Example Uses Demonstrated

• Generate HTML using ChatGPT, then paste it into Google Sites via Embed:
  • A sample section inserted successfully.
  • An example of requesting and inserting an HTML table.
• Insert a UI element such as a menu into a blank page using an HTML snippet.

Limitations / Important Technical Notes

• CSS is a problem with this approach:
  • The creator notes that styling usually requires separate HTML + CSS files.
  • Google Sites embed doesn’t make it easy to include CSS “inline” through the embed box.
  • As a result, embedded HTML may look unpolished or unstyled unless CSS is handled separately.
• Limited styling is still possible using basic HTML features (e.g., changing text color with HTML tags), but not the same as full CSS control.
• Menu links may not work automatically:
  • The tutorial explains that menu buttons may fail or not behave as expected until the corresponding pages/routes exist in Google Sites.
  • Links won’t function until the required destination pages (e.g., about/services) are created and correctly routed.

What Google Sites Offers Besides Raw HTML

The video highlights that Google Sites can handle many layout and feature needs without writing HTML, including:

• Forms
• Built-in widgets/sections
• Google integrations (e.g., Sheets, Slides, Docs, Maps, Calendar, YouTube embeds)
• UI elements such as social links, spacer/dividers, buttons, images, icons/content blocks
• Collapsible groups and other built-in components

Main Speakers / Sources

• Speaker: Unnamed “yo hello everyone” tutorial host (primary presenter)
• External source used: ChatGPT (used to generate sample HTML snippets during the demo)