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.
The following tutorials are good starting points to learn HTML:
Tutorials and Courses - W3C
Learn HTML | MDN
HTML tutorial - The Basics
What are gadgets?
Click Edit page ► Insert ► More gadgets to view and search thousands of existing gadgets in the Google Sites gadget directory.
Creating & hosting your gadget
Most users find Google Drive more convenient than other Google-based hosting options such as Google App Engine.
Store your gadget and all its required files, share and collaborate, manage file revisions, and benefit from other features of Google Drive.
- Download the gadget template.
- Open it with a plain text editor, e.g. Notepad.
- Leave the gadget template code as is except for lines 3 and 6:
- Replace the gadget title on line 3 with the one that you want, e.g. My Gadget.
- Replace the gadget content on line 6 with your code.
- Click the File menu ► Save As... ► enter a new File name, e.g. my-gadget.xml ► click Save.
- Note: Alternatively you can create, open and edit XML files in Google Drive with apps like XML Editey.
- As per the instructions:
- Upload your gadget to a public folder in Drive.
- Copy the gadget hosting URL. Sample:
- Note: Before making a gadget you might want to use Dynamic Content Writer to test and customize your code and monitor changes in real time.
Adding your gadget
- Go to the Google Site page where you would like to embed the gadget.
- Click Edit page ► Insert ► More gadgets ► Add gadget by URL ► paste the gadget URL ► Add.
- Customize the gadget Display ► OK ► Save.
- 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:
- 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:
Google+ Share Button
Google+ Share Link Generator
Dynamic Content Writer
Google Docs Viewer
A gadget to embed/add a Google+ share button to your pages
A gadget to create Google+ share links
A comment form to get viewers comments / a contact form to keep in touch with your site visitors
A guestbook to display your site viewers comments
A gadget to embed/include another document/page in your web page
A gadget to edit and view HTML in real time / a real-time HTML editor
A gadget to create an image mouseover/rollover effect
A gadget to embed/include flash/SWF in your page
A gadget to embed/include a PDF in your page
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
DiscussPlease note that all posts are moderated.