Embedding and HTML Code

Perhaps these are terms you have heard before and thought it was something only taught at MIT.  Well understanding it is much simpler than it sounds.

When embedding gadgets, documents, video, widgets or other digital content into a site or blog, the site or blog that hosts the digital content uses what is called HTML code.  Basically, it is a language in the form of text that websites use to display all of the content that is visible on the their site.

Let me, however, set your mind at ease.  You do not have to know anything about HTML code in order to use it to embed anything.  The only skill you will need is how to copy and paste.

When you find digital content that is sharable (like a Vimeo video, or Visual.ly infographics) you will usually find this symbol:  < / > or < >.

Some sites, like YouTube, will simply indicate "Embed" under the Share tab.

From there you will find a series of text and symbols; this is your HTML code.  Once you find this code simply copy the whole amount of text.  If you miss any portion of this code, it will not work.

Let's go to your site or blog that you would like to embed this into.  Your site or blog, in most occasions, will indicate options for embedding your copied HTML code.  I am going to demonstrate this with a Moodle course in this video below.

I hope this has been helpful.  If you have any questions concerning this, please contact me.

Adding HTML to My Moodle Course

There are a few different ways to embed HTML in to your Moodle course.  The process is pretty much the same every time.

When you create an activity, web page, label, etc there will be a full text editor as indicated below.

 

Once you see this editor, you can be safe to say, "I can add HTML".  In order to paste the code in the text box and have it be read properly, you must select Toggle HTML Source; this button - "<>".  When the text box changes, simply paste (Command+V) into the text box.  If you have never played around with HTML code, be careful not to mess with any other text associated with the text box.  When you have finished pasting, click the <> button to return to your regular text mode.  You may or may not instantly see your results; if not, it's ok.  Just click Save and Display at the bottom of the configuration page and you will see your results.

How Do I Embed HTML Code?

For the most part embedding HTML code is easy and you don't have to know a lot or anything about HTML.  Most sites or domains that offer gadgets, video, etc that have embedding HTML already done for you.  What is HTML?

Here's how it works:

We will use You Tube as an example because most everyone knows You Tube and how to navigate through it (unfortunately, You Tube is not a reliable source for student use on Moodle because it is blocked for students.  However, for the sake of learning how to embed code, we will use this source).  Below every You Tube video you will notice a small menu allowing you to add the video to your favorites, share, download, like, dislike; you can also "Embed".  Simply click the "Embed" button and copy the code below (Command+C).  As show below.

Though each online application will have its own way or terminology for accepting HTML, if it accepts HTML code, it will have the option to add the code.  When you are ready to add the HTML code, simply paste it in the appropriate spot (Command+V).  If you have never played with HTML, you will need to be careful with how you paste the code.  In most cases, however, it is as simple as pasting it at the top of the HTML text box.  There are several gadgets available online from various places.  Just look carefully for anything that allows you to get code, embed, etc.  Check out life.com.  You can embed any of their photos or albums right into your site; great for a discussion on current events or history.

For Moodle, if you want to add HTML, there are a few different ways.  See Adding HTML to My Moodle Course.