You can now host Webpages and Gadgets on Google Drive and in Drive you now have the option to edit and create the files directly in Drive .
Announcement: This will not be available after August 31, 2016
You can continue to use this feature until August 31st, 2016, but after that, googledrive.com/host/ID will no longer work.
The HTML for the examples below are hosted on Google Drive and inserted using the "Include gadget (iFrame)" gadget.
Google's Help Page is HERE
You can also use DropBox for this purpose and personally I find it easier. See this page.
First Letter Big
You used to be able to do this in an HTML Box but that isn't working now.
You can put the code in an html page and host it in Google Drive or Dropbox. Note: hosting in Google Drive is going away. Most of these examples will be hosted in DropBox instead.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<p><span>T</span>he first letter in this paragraph is styled with CSS</p>
Tip Of the Day
Find the code for your music player (look at the source code in a site or search Google for HTML Music Player)
Make an HTML page using your code.
Upload it and your music to a public Google Drive folder.
Embed it into your Google Site using the include iframe gadget.
NOTE: IE will not play.WAV files, MPG and OGG fies work.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 1//EN">
<audio src="https://googledrive.com/host/0B28Gtf1n8u8DUWtCRHR4RXBjaVU/02%20-%20Blood.mp3" controls>
<p>If you are reading this, it is because your browser does not support the audio element.</p>
The default that Google Fonts gives is "http://". Change it to "https://" to prevent browsers from giving a security warning:
<link href='https://fonts.googleapis.com/css?family=Tangerine|Lobster' rel='stylesheet' type='text/css'>
How to do it
Create HTML page: If you have code you want to make into an HTML page the simplest thing to do is to preface the code with "<html><body>" and add "</body></html>" at the end.
Note: Hosting these files in Google Drive is being discontinued so I recommend using DropBox instead.
- Make a public folder in Google Drive
- Upload your HTML file to it
- Select the file.
- Click the Share button at the top of the page.
- Click Advanced in the bottom right corner of the sharing box.
- Click Change....
- Choose On - Public on the web and click Save.
- Before closing the sharing box, copy the document ID from the URL in the field below "Link to share". The document ID is a string of uppercase and lowercase letters and numbers between slashes in the URL.
- Create a URL that looks like "https://www.googledrive.com/host/[doc id] where [doc id] is replaced by the document ID you copied in the previous step.
- To insert it into a Google Site use an iframe gadget* and configure it with the above url like https://www.googledrive.com/host/0B28Gtf1n8u8DX0NiNnoxYzJZM28/
*Iframe Gadget: Insert>>More gadgets. Search for "iframe"
Instructions for Gadgets
Note: The Google Gadget Editor (GGE) is gone. See this page.