HTML & Gadgets

What is HTML?

HTML is the computer language used for writing and formatting pages on the Internet and what you see when you view a web page is your browser's interpretation of HTML.

On Google Sites you can edit your page content source by clicking Edit page and then the HTML button on the edit toolbar. However, Google Sites does not allow full HTML modification — some codes are not permitted and you have to make gadgets for them.

HTML tutorials

The following tutorials are good starting points to learn HTML:

Tutorials and Courses - W3C

HTML Tutorial

Learn HTML | MDN

HTML tutorial - The Basics

What are gadgets?

Gadgets are small web applications that can be added to web pages. Gadgets are XML files that typically wrap HTML and JavaScript.

Click Edit pageInsertMore gadgets to view and search thousands of existing gadgets in the Google Sites gadget directory.

Creating & hosting your gadget

Most users find the Google Gadgets Editor (GGE) and Google Drive more convenient than other Google-based hosting options such as Google Code and Google App Engine.

Google Gadgets Editor

An easy-to-use gadget development and hosting tool

Google Drive

Store your gadget and all its required files, share and collaborate, manage file revisions, and benefit from other features of Google Drive.

Adding your gadget

  • Go to the Google Site page where you would like to embed the gadget.
  • Click Edit pageInsertMore gadgetsAdd gadget by URL ► paste the gadget URL ► Add.
  • Customize the gadget DisplayOKSave.
  • Note: By default, gadget specifications are cached for about an hour, so if you update your gadget XML file, you may not see the change on your Site page immediately. To bypass the cache while working on your gadget, add the parameter ?nocache=1 to the page URL in the address bar of your browser:
    https://sites.google.com/site/site-name/page-title?nocache=1
    Then go to the new URL and you will see the latest version of your gadget.

My Google Sites gadgets

Here are my gadgets for Google Sites:

Title URL Description How-to Thumbnail
Google+ Share Button http://mori79.googlecode.com/svn/trunk/google-plus-share-button.xml A gadget to embed/add a Google+ share button to your pages http://sites.google.com/site/mori79/html-gadgets/how-tos/google-plus-share-button
Google+ Share Link Generator http://mori79.googlecode.com/svn/trunk/google-plus-share-link-generator.xml A gadget to create Google+ share links http://sites.google.com/site/mori79/html-gadgets/how-tos/google-plus-share-button
Comment Form http://mori79.googlecode.com/svn/trunk/comment-form.xml A comment form to get viewers comments / a contact form to keep in touch with your site visitors http://sites.google.com/site/mori79/html-gadgets/how-tos/comment-form-board
Comment Board http://mori79.googlecode.com/svn/trunk/comment-board.xml A guestbook to display your site viewers comments http://sites.google.com/site/mori79/html-gadgets/how-tos/comment-form-board
Iframe Wrapper http://mori79.googlecode.com/svn/trunk/iframe-wrapper.xml A gadget to embed/include another document/page in your web page http://sites.google.com/site/mori79/html-gadgets/how-tos/iframe-wrapper
Dynamic Content Writer http://mori79.googlecode.com/svn/trunk/dynamic-content-writer.xml A gadget to edit and view HTML in real time / a real-time HTML editor http://sites.google.com/site/mori79/html-gadgets/how-tos/dynamic-content-writer
Image Mouseover http://mori79.googlecode.com/svn/trunk/image-mouseover.xml A gadget to create an image mouseover/rollover effect http://sites.google.com/site/mori79/html-gadgets/how-tos/image-mouseover
Flash Wrapper http://mori79.googlecode.com/svn/trunk/flash-wrapper.xml A gadget to embed/include flash/SWF in your page http://sites.google.com/site/mori79/html-gadgets/media-players/flash-wrapper
PDF Wrapper http://mori79.googlecode.com/svn/trunk/pdf-wrapper.xml A gadget to embed/include a PDF in your page http://sites.google.com/site/mori79/html-gadgets/how-tos/pdf-wrapper
Google Docs Viewer http://mori79.googlecode.com/svn/trunk/google-docs-viewer.xml A gadget to embed/include the Google Docs Viewer and display PDF documents, PowerPoint presentations, Word documents and many more file types in your page http://sites.google.com/site/mori79/html-gadgets/how-tos/google-docs-viewer
DiscussPlease note that all posts are moderated.