Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using the HTML editor

From: Moodle 1.9 Essential Training for Students

Video: Using the HTML editor

Let's have a look at the HTML Editor that's build into Moodle and learn how to really leverage this tool. To do this let's create another blog entry. Go up to the upper right-hand corner of your screen and click on the link for your name in the Your are logged in as space. Then we'll click the tab for Blog and we'll go ahead and add a new entry, by clicking on the link for Add a new entry. We will give this blog entry a title of Learning to use the HTML Editor.

Using the HTML editor

Let's have a look at the HTML Editor that's build into Moodle and learn how to really leverage this tool. To do this let's create another blog entry. Go up to the upper right-hand corner of your screen and click on the link for your name in the Your are logged in as space. Then we'll click the tab for Blog and we'll go ahead and add a new entry, by clicking on the link for Add a new entry. We will give this blog entry a title of Learning to use the HTML Editor.

We'll then go down to the main blog body entry. First we'll add a line of text where we can add some formatting. So we'll add a line that simply says, Here is a top level heading. Hit Enter or Return a few times, then select that block of text that we just wrote, and click the dropdown menu and select Heading 1. Now the text is showing up in a large Heading 1 style. I can click down near the bottom, then I can add additional text and format it using the tools at the top such as Bold, Italics, Underline Strikethrough, Subscript, Superscript and so forth. You are probably quite familiar with many of these tools as the icon that are appearing here are the same ones that are used throughout most text editing programs.

The second line of icons allows you to control the justification of your text, the direction or flow of text from left to right or right to left. You would only use these if you are trying to write text in another language that is not typically written or read from left to right. The section allows you to create either ordered or bulleted list. You can increase or decrease the indent of the text with the next couple of tools and change the color of text or if the background color of a particular area with the standard color pickers. If you want to add a horizontal line or horizontal rule, you can simply do that by clicking this button here and then a horizontal line will show up allowing you to separate content inside of your text.

The next set of tools allows us to create links. Let's say we have some content of our on Flickr that we want to link. To do this, begin by simply opening up a new tab on your browser. If you are using Firefox, you can use Command+T or Ctrl+T to open a new tab. Then simply go to Flickr, www.flickr.com. We'll then do a search for some content that we want to add in. I know I have already tagged some content with moodle_esst. I'll type that into the Search field and then click the Search button.

Now I get a listing of a bunch of images that I have posted all were related to Moodle Essential training series. To link directly to all of these images, I'll just go ahead and select the whole URL at the top of the page and copy with Command+C or Ctrl+C. Then I'll come back over to the tab that has my blog entry in it and I'll type in, Here is a link to some content on Flickr related to this training. I'll then go ahead and select content on Flickr and then click the icon for Insert a web link. I can then type in the full URL or simply paste it with Command+V or Ctrl+V. I can give the page a title Images for Moodle Training and then set a Target.

Now the Target allows us to tell our web browser what we want to happen when a user clicks on this link. If we leave the Target set to None then the resulting web page will just reload inside of the main window that we are already working in. But if we want to have the user stay on the page that we were currently at, but have the link open up in the new window, we can simply select New Window from the dropdown menu for Target. The page that we were going to does not have any anchors and the anchors are not going to be very common for you to use unless you have created the content and created anchors, which would allow you to link down to a particular point inside of a page.

So we'll go ahead and leave Anchors left alone and then click the OK button. Now we have our link that's been created for us. But if we were to click on this link right now, we are not going to see anything happened. In order to test it, we need to go ahead and scroll all the way to the bottom of our page and then click the Save Changes button. This will update the content on our page and we are able to then click on the link that showing up inside of our blog entry. And a new tab is created for us with the search parameters that we set up taking us directly to the images on this page. But what if we want to display one of these images inside of our blog entry.

To do that we'll have to use a little trick here. On this Flickr page we have this image of a Mithrax what I want to do is right-click or Ctrl+Click on this image and say View Image. This is going to open up just this image inside of our browser window and we are going to get the complete URL to this image up here in the top of our window. Let's go ahead and select that URL and copy it with Command+C or Ctrl+C then go back over to the tab that has your Moodle blog in it and then click on the Edit button on the lower right-hand corner of this blog post. This will take us back into our HTML Editor. We'll go ahead and click at the end of the line where we've got this text and hit Enter or Return a couple of time and now we'll click the button here for inserting an image.

The Insert an image window pops open and it asks us for the URL to the image. I'll go ahead and hit Command+V or Ctrl+ V on my keyboard to paste in the URL of the specific image that we want to show on Flickr. Next, we'll simply add in some alternate text. Here we'll put image of a Mithrax. We can choose to add some controls for the Alignment, Thickness of a border around the image or any Spacing that we want to have set. I'll go ahead and leave all of these at the default and then click the OK button.

Now the image that's located up on Flickr is being pushed directly inside of this blog entry. I can scroll all the way to the bottom of the page, click the Save changes button, and now I can see that this image is properly attached to this blog entry. There are lots of additional tricks that you can use with the HTML editor to add additional interest and content to any page that you are using inside of Moodle that uses the HTML editor. Now note that not everything that you can normally do inside of HTML is going to work inside of the Moodle HTML editor.

This is because not all HTML code is allowed to be used by students on all servers. So you may run into some roadblocks on a particular Moodle installation that you are working on. If you do you may need to contact the IT department at your institution to find out what's specific code is allowed and not allowed inside of any Moodle page that you are working on. Let's go ahead and return back on to our main course by first clicking on the link back to our institution and then clicking on the link to our course. In this case, Introduction to Coral Reef Ecology.

Show transcript

This video is part of

Image for Moodle 1.9 Essential Training for Students
Moodle 1.9 Essential Training for Students

24 video lessons · 4090 viewers

Chris Mattia
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Moodle 1.9 Essential Training for Students.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.