Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the really amazing things about HTML is its ability to grab resources from any where on the Internet and incorporate them into another page of HTML. So in this example we're going to go into the Coral Zooxanthellae Symbiosis document that we were working on earlier. To do this simply click on the hand icon with the pencil and we're going to go ahead and scroll down in the window until we get to the composer web page section and then scroll down until we find the first block of text where it says Coral Zooxanthellae Symbiosis.
What we want to do is we want to insert an image right here so that students can see what a hermatypic coral looks like. We currently do not have any images uploaded to our site that will work for this but there is an image that I know of that's out on the Internet. It's actually on Flickr and we're going to incorporate that image then directly here in line without having to import it into our site. We can dynamically link to that file right out where it is. So the first thing we need to do is find that image. So I'm going to go ahead and open up a new tab in my browser by doing Command+T or Ctrl+T and let's just simply go to Flickr, www.flickr.com. Now for the search I've created a special tag called moodle_esst_teachers and this is going to jump you to a preselected group of images that I've already uploaded into Flickr.
So click the Search field and you can see that Flickr found 32 images that match the moodle_esst_teachers. So if we scroll down in this list of images, there is this great image of Diploria labyrinthiformis, which is nice hermatypic coral. We want to go ahead an insert his image directly in line with out text. So to do this, simply Right-Click or Ctrl-click on the image and there is a link here that says View Image. Go ahead and select View Image and what it's going to do is it's going to open up just that image that we found inside of our browser window and the URL that's up here at the top is the URL pointing directly to this particular image.
So go ahead and select that URL. That is going to be the piece of data that we really need in order to make this work. Now press Command+C or Ctrl+C on your keyboard to copy that URL and let's go ahead and go back over to our Moodle course. Now we've got our cursor clicked right in front of the word hermatypic for hermatypic corals and we're going to go up and click the icon to insert an image again just as we did in the last movie. This time instead of uploading an image, we want to just go ahead and paste by hitting Command+V or Ctrl+V, the URL that we've gone ahead and copied from the Flickr address.
Now we'll come down here into the Alternate text and we'll just type in Coral Image and we do want to--this time set this Alignment and the Alignment that we want, it would be nice to have the Alignment of this image so that it shows up on the right-hand side and the text will just go ahead and wrap around it. So we'll go ahead and set that to Right. We do not want any Border associated with this image. The spacing for this images, let's go ahead and make it so the text doesn't show off right up next to the edge of the image. So we'll put an off-set of about 10 pixels, both horizontally and vertically. We'll go ahead and click OK and that is going to add in the code as you can see to make the image appear dynamically right here. As I hover my mouse over top, you can see the pop up that is saying that this is the coral image. So go ahead and scroll all the way down to the bottom now, click the Save and return to course.
Now we can click on the link for the article Coral Zooxanthellae Symbiosis and when the article shows up, we now have an image that's being placed inline directly with the text and this image is really located out on Flickr. So go ahead and scroll back up to the top and let's return back to our course. Now you know how to insert an image that's located out on the Internet and cause text to wrap around that image and control the alignment of that image as well.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 80646 Viewers
80 Video lessons · 132869 Viewers
52 Video lessons · 66366 Viewers
59 Video lessons · 52142 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.