close
Welcome! Wikis are websites that everyone can build together. It's easy!

Including HTML Pages

Overview

Use community forums, forms, polls, scripted applications, and other webpage gizmos (widgets) in your wetpaint wiki. This is accomplished by using the HTML, <IFRAME> code along with a widget to insert an exterior webpage directly into your wiki. It offers what you might think of as a picture-in-picture type affect on your wiki page.
To set this up in your wiki you will need some knowledge of HTML coding basics, and understanding of the IFRAME attributes. If you are unfamiliar with those you can get additional information from such as the WDG information page about IFRAME or by running a search for "HTML codes", or "IFRAME attributes" from any popular search engine site.

This should look like: <iframe Your HTML Code></iframe>

Example

Here Is a Iframe Template You can use instantly. Just subsitute theURL of thepage you want to use and you're done:
<iframe name="I1" src="http://www.yourwebsitehere.com" width="889" height="359" scrolling="yes">

Tips

Like most HTML codes, the IFRAME has a few quirks that you'll need to keep in mind when using it:
  • The IFRAME code isn't recognized by all browsers. It is important to include alternative content for those that don't read it.
  • Links found on a page inside an IFRAME, will continue to open inside the IFRAME, unless the coding in the exterior page is set to target a new window.
  • IFRAMES are not scalable. So be sure to set the width and height attributes.

Steps to take to include an exterior web page in your wiki:


1. Open the Easy Edit window for the wiki page where you wish to include the exterior page.
2. Click on the Widget option.
3. Choose the "Other Widget" app from the list.
4. Type your IFRAME code with the appropriate attributes in the code window.
5. Save your widget and the page changes to see the IFRAME in action.

Three examples:

  1. Insert a Forum:
    http://artshares.wetpaint.com/page/CHW+Monthly+ATC+Swap
    (The CHW community forum is shown in this iframe. The forums platform renders at a larger screen size than my IFRAME, so scrolling will be required to see entire pages in the IFRAME.
  2. Insert a Blog or other website:
    http://artshares.wetpaint.com/page/PaintChip+Blog
    (The IFRAME has my wordpress blog inside it. This one will extend past many monitors because I used a 800px width for the IFRAME.)
  3. Insert Scripted graphics or widgets:
    http://artshares.wetpaint.com/page/.+PaintChip
    (on the bottom of the page, the flickr badge and links to the right are in an iframe. This IFRAME disguised because I used the same background color as the wiki page and no scroll bars.    )

I hope these examples will show you how the IFRAME code has many useful purposes as well as the importance of understanding the quirkiness of this code.

Attributes for the IFRAME code tag:

SRC: URL of the document to go in the frame
HEIGHT: height of the inline frame
WIDTH: width of the inline frame
NAME: name of this inline frame
LONGDESC: URL of a long description of the contents of the frame
FRAMEBORDER: if the frame should have a border around it
MARGINWIDTH: internal left/right margin for the frame
MARGINHEIGHT: internal top/bottom margin for the frame
SCROLLING: if the frame should have scroll bars
ALIGN: alignment of the frame object to text around it
VSPACE: space above and below the frame
HSPACE: space to the left and right of the frame

Example IFRAME embed



Code used
<iframe frameborder="0" height="335" src="http://show.zoho.com/embed?USER=sharonbetts&DOC=NECC.odp" width="450"></iframe>





Latest page update: made by jeremy_wetpaint , May 27 2008, 1:22 PM EDT (about this update About This Update jeremy_wetpaint Edited by jeremy_wetpaint


view changes
- complete history)
Keyword tags: help how-to html tutorial widgets
More Info: links to this page

Threads

Anonymous  (Get credit for your thread)
(Showing the last 5 of 9 - view all)
Started By Thread Subject Replies Last Post
Anonymous add 1 May 29 2008, 1:59 PM EDT by sacapp
Thread started: May 29 2008, 7:05 AM EDT  Watch
can i do some changes to my wetpaint site in html
Do you find this valuable?    
Keyword tags: help how-to html tutorial widgets
Show Last Reply
Anonymous html editing 0 May 29 2008, 6:38 AM EDT by Anonymous
Thread started: May 29 2008, 6:38 AM EDT  Watch
Can I use HTML to create or edit my Wetpaint site? A. HTML code cannot be added or edited on Wetpaint sites. In order to make it easy for anyone
Do you find this valuable?    
Keyword tags: None
Anonymous I'm Trying to Insert an Ad 1 May 28 2008, 3:59 PM EDT by DigitalX
Thread started: May 28 2008, 3:58 PM EDT  Watch
I'm trying to insert an advertisement into my site and can't figure out how to do it! I have two:
<a href='http://www.adgridwork.com/?r=27089' style='color: #7FBE00; font-size: 14px' target='_blank'>Online Advertising</a>
<script type='text/javascript'>
var sid = '27089';
var title_color = '000000';
var description_color = '646360';
var link_color = '7FBE00';
var background_color = 'FFFFFF';
var border_color = '646360';
</script><script type='text/javascript' src='http://www.mediagridwork.com/mx.js'></script>

and this:

<a href='http://www.adgridwork.com/?r=27091' style='color: #7FBE00; font-size: 14px' target='_blank'>Free Advertising</a>
<script type='text/javascript'>
var sid = '27091';
var title_color = '000000';
var description_color = '646360';
var link_color = '7FBE00';
var background_color = 'FFFFFF';
var border_color = '646360';
</script><script type='text/javascript' src='http://www.mediagridwork.com/mx.js'></script>

If someone could give me some help to do this it would be appreciated!

Thanks!
1  out of 1 found this valuable. Do you?    
Keyword tags: help how-to html tutorial widgets
Show Last Reply
Mr_KP Rollover images 0 Jan 5 2008, 11:21 AM EST by Mr_KP
Mr_KP
Thread started: Jan 5 2008, 11:21 AM EST  Watch
I want to add rollovers on my site, but when it gives me the HTML code for the MouseOver and MouseOut, it says that I also have to host the files myself. I don't understand what it's telling me to do. Any help?
Thanks for your time.
Do you find this valuable?    
Keyword tags: help how-to html tutorial widgets
EarthyToes embedding facebook badge in wetpaint with oother widget 2 Dec 23 2007, 5:39 AM EST by Anonymous
Thread started: Dec 22 2007, 11:33 AM EST  Watch
my website addy is permies.wetpaint.com/ and my badge is <a href=http://www.facebook.com/people/Jeannie_Timony/556921888>Facebook me!</a> .
Thanks for any help you can give me.
EarthyToes :D
1  out of 1 found this valuable. Do you?    
Keyword tags: help how-to html tutorial widgets
Show Last Reply
(Showing the last 5 of 9 - view all)

Related Content

(what's this?Related ContentThanks to keyword tags, links to related pages and threads are added to the bottom of your pages. Up to 15 links are shown, determined by matching tags and by how recently the content was updated; keeping the most current at the top. Share your feedback on Wetpaint Central.)
Threadchat room ThreadHELP PLEASE!! O_O ThreadUser cancelled so he could change his username. Cannot rejoin.
ThreadTransclusion? Indexing? ThreadMY WIKI Threadnintendo 64 gameshark pro help
Threadgo toooo ThreadIs it posible to change the look-and-feel for discussion threads? ThreadAdding Sounds/Videos
Threadhelp PageWidgets PageAsk & Answer