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

HTML editor overview

From: Moodle 1.9 Essential Training for Teachers

Video: HTML editor overview

One of the great things about Moodle is that it will allow you to post native documents directly into your course and distribute those files out to your students. Now we already saw this in the Getting Started chapter when we posted a Word document of our Course Syllabus and we also posted a PowerPoint presentation with slides to distribute out to the students. And there are lots of other document formats that you can post into Moodle, and as long as your students have that application on their system or have access to it, they are able to open those documents.

HTML editor overview

One of the great things about Moodle is that it will allow you to post native documents directly into your course and distribute those files out to your students. Now we already saw this in the Getting Started chapter when we posted a Word document of our Course Syllabus and we also posted a PowerPoint presentation with slides to distribute out to the students. And there are lots of other document formats that you can post into Moodle, and as long as your students have that application on their system or have access to it, they are able to open those documents.

But one of the really powerful things about Moodle is that it's entirely web-based and you are able to write web pages and compose HTML or Hypertext Markup Language directly inside of Moodle. So it allows you to unlock a lot of additional power and capability and really customize your course to make it work exactly the way that you want it to work. And to do that, you use the built-in HTML Editor in Moodle. In this chapter, we are going to step through the common tools that you are going to need to be familiar with to really unlock the full potential of the Moodle Learning Management System.

So let's have a look at the HTML Editor. If we go up to the latest News block in the upper right corner and click on Add a new topic. This is a very quick way to get into the HTML Editor. Let's go ahead and type-in a subject of Simply Demo, and then I'm going to scroll the Window down, so we can get a nice, clear view of the HTML Editor. You are more than likely going to be already familiar with the functions of many of the buttons and tools that are embedded in the HTML Editor. Because the Editor uses the icons that have become kind of a defective standard, if you will, across most word processors and HTML editors. But we are going to go ahead and go over those right now, so you are really familiar with what they do because those are few that are little different.

The first couple of options here allow you to set the Font and Font Size of your text. There is a Styles menu that allows you to set the specific styles of text, and we'll go over that in the later movie, how to go ahead and set those styles and what they look like. There is a dropdown menu that allows you to set the language of the content that's being displayed. So if you are working in a multilingual environment or you are displaying text that needs to be in another language, you can go ahead and select that text and set the language right here.

We've got some basic formatting tools such as Bold, Italics, Underline, Strikethrough, ability to add subscripts and superscripts to our text. We have a tool here that's called Cleanup Word HTML. Now what this tool does is if you are using Microsoft Word and you go up to the File menu and choose Save as Web page, Word will export the document that you are working on as an HTML website. You can then take the HTML code that Microsoft Word has written for you, copy it and paste it into the Moodle HTML Editor. Then click the button here, for Cleanup Word HTML, and the Editor will go ahead and strip out any extraneous code that's been written to control the formatting of your document.

This does raise an interesting question. If you've gone ahead, and you've invested a lot of time in your Word document or any other document to apply a bunch of formatting, and you get it exactly the way that you want it inside of Word, go ahead and just post that document to your students and distribute it out to them, rather than investing more time going in and further customizing it, once it gets into the HTML Editor. There are tools here for Undo and Redo, and then some tools to allow you to adjust the alignment of your text, whether it'd be Left Justify or Right Justify or Centered.

The two buttons here with the Paragraph Marker and the directional arrows allow you to set the direction that text will flow inside of your HTML Window. So the default action is to flow from left to right. But a lot of languages are written actually from right to left. So this allows you to control the flow of text and will allow you to set the direction in which text is flowing. Next, you have some tools to deal with lists, both ordered lists and bulleted lists. You have some tools to allow you to increase and decrease the indention of blocks of text. So if you want it sub-quote out something or set a tab stop essentially, you can do that right here.

Next you've got the ability to set your Font Color and the Background Color of different areas. You can add a horizontal rule, or horizontal line that will show up inside of your text to be able to create some separation between different areas. The Anchor tool allows you to take a document that has a lot of text or a lot of different sections in it, and select different areas, set an anchor and name that area. Then link to it from another location and have the page jump down directly to that spot. So you've probably seen this in a long document where there is a little outline at the top. You can click on a particular heading, it will jump to that section of the document, and so, you need to first set this up with the Anchor tool. We'll move to an example of this in our later movie.

The Link tool allows you to create web links, we are going to go into this because this is a real important tool to know how to use and know how HTML links are established. You can remove links. Once a link has been created, you can select it and get rid of it. There is a Prevent Autolinking, and Autolinking inside of Moodle is very cool. We are going to go into an example of this, where we'll use the Glossary to create some glossary entries and then we'll turn on a function inside of the Moodle system so that anywhere those words show up inside of any documents that you are posting inside of Moodle, that Glossary entry will be linked to it, and what this tool does is it would actually prevent a particular listing from having that pop-up entry.

The Insert an image tool, we are going to use this tool extensively as well in later movies, because you are going to be able to go in and grab some images, both that you have uploaded into your course and other images out on the web and incorporate them into your site. So that you are able to create a very rich environment for your students. The Table tool allows us to create tables of information and work with that information inside of the HTML Editor. There is a nice little tool here that allows us to insert smiley face icons, if you would like to use that.

The Insert Special Characters, this is how you can type diacritic characters and some specialized characters that may or may not be available to you right on your keyboard, so that you are able to type-in, for instance, accented characters or percent mille, or registered trademark, or things like that, this tool will allow you to insert those straight into your text. There is a Search and Replace tool that allows you to find and replace phrases and text that you have written inside of your document. There is a tool here to toggle HTML source. Now when you click on this tool, what this is going to do is it's going to turn off the what's termed a WYSIWYG editor or What You See Is What You Get, it's going to turn that off and it's going to take you directly into the underlying HTML code. Now if you already know HTML, you can go ahead and type that code straight into here and Moodle will execute it.

Now be aware that one of the things about the HTML Editor is that it's going in and it's trying to clean up your code to make your life easier. Now, if you are already an expert in HTML, this may prove to be a little frustrating to you at first because you may find that as you are writing code in here, and you turn off the HTML Code Editor, Moodle may go in and adjust some of that code, and so it can be a little frustrating if you are really into using a lot of in-depth HTML, by being able to get at the source code is right here available to you.

The last tool that's here in the Editor is one of my favorites. I use this all the time. It's the Enlarged Editor and so you just go ahead and click on that tool and it brings up a much larger screen. So instead of having to work in this small window, you get all this extra area to really design and work and focus on the content that you are building. It also gives you an additional line of tools that are all about working with and managing tables. And we'll go into a lot of these tools in a later movie when we are focused on just tables. But for now, know that that's where that is.

When you have done editing your code inside of the HTML Editor's full screen Editor, go ahead and click the minimized Editor button and it's going to return you back to the main page. Now one other thing to note is down at the bottom-left of the HTML Editor, there is a row that says Path and it's going to have a bunch of links, and as you are working in your code, this is going to show you a hierarchy of the HTML tags that are going to define where you are adding your document. So the default tag that you are working inside of, when you are posting content up here is the body tag of the HTML code. And as you continue to add more text, you will see this line fill up with the additional HTML tags, and you can go and click on any of those tags it will highlight the code that you are actually working in.

It's a quick overview of what the HTML Editor is and why you are going to work with it. For the rest of this chapter, we are going to go into some of the more specifics of these tools and how to go in and really use them to kind of manipulate some of the content that you are going to be posting in your course. So go ahead and scroll back up to the top and we are going to get out of this demo news forum that we are creating here, by simply clicking on the BIOL432 link and that's just going to just abandon that page for us.

Show transcript

This video is part of

Image for Moodle 1.9 Essential Training for Teachers
Moodle 1.9 Essential Training for Teachers

108 video lessons · 9946 viewers

Chris Mattia
Author

 
Expand all | Collapse all
  1. 8m 21s
    1. Welcome
      2m 8s
    2. Course overview
      5m 22s
    3. Using the exercise files
      51s
  2. 34m 55s
    1. Getting started
      2m 59s
    2. Installing Moodle on a Mac
      8m 45s
    3. Installing Moodle on a Windows computer
      14m 24s
    4. Creating user accounts
      3m 55s
    5. Creating a new course
      3m 0s
    6. Just enough site administration to get you going
      1m 52s
  3. 41m 16s
    1. Logging in and getting oriented with Moodle
      5m 8s
    2. Customizing your profile
      4m 7s
    3. Customizing course settings
      3m 49s
    4. Editing the header block
      1m 33s
    5. Posting a course syllabus
      3m 55s
    6. Communicating news to students
      3m 5s
    7. Managing files and folders
      3m 41s
    8. Posting lecture slides
      3m 11s
    9. Setting up the gradebook
      5m 35s
    10. Sending email to the class
      2m 54s
    11. Creating a simple assignment
      4m 18s
  4. 51m 28s
    1. HTML editor overview
      10m 11s
    2. Formatting text
      8m 42s
    3. Creating tables
      9m 36s
    4. Creating internal links
      7m 27s
    5. Creating external links
      7m 2s
    6. Inserting local pictures with HTML
      3m 55s
    7. Inserting pictures from Flickr
      4m 35s
  5. 49m 22s
    1. Preparing images
      6m 53s
    2. Batch-uploading files
      5m 58s
    3. Posting image files
      2m 33s
    4. Posting a photo gallery
      3m 45s
    5. Preparing audio files
      10m 14s
    6. Posting audio
      3m 50s
    7. Preparing video files
      7m 45s
    8. Posting video
      3m 48s
    9. Inserting video from YouTube
      4m 36s
  6. 37m 11s
    1. Creating a text label
      6m 14s
    2. Linking to a web site
      6m 2s
    3. Creating a text page
      4m 45s
    4. Creating a web page
      10m 56s
    5. Linking to a folder of documents
      4m 18s
    6. Inserting an IMS content package
      4m 56s
  7. 27m 23s
    1. Assignments overview
      2m 13s
    2. Advanced uploading of files
      10m 32s
    3. Online text
      4m 26s
    4. Uploading a single file
      5m 1s
    5. Offline activity
      5m 11s
  8. 11m 39s
    1. Creating a live chat room
      5m 13s
    2. Creating a choice
      6m 26s
  9. 15m 45s
    1. Setting up a simple database
      4m 14s
    2. Creating database fields
      2m 49s
    3. Customizing a database template
      1m 33s
    4. Entering data into a database
      1m 43s
    5. Enabling database auto-linking
      3m 23s
    6. Enhancing a database with file uploads
      2m 3s
  10. 17m 16s
    1. Creating a main glossary
      4m 45s
    2. Adding concepts to the glossary
      3m 16s
    3. Enabling glossary auto-linking
      3m 38s
    4. Enabling students to edit a glossary
      2m 5s
    5. Creating a secondary glossary
      3m 32s
  11. 9m 58s
    1. Creating a forum
      5m 21s
    2. Using a discussion forum
      4m 37s
  12. 32m 17s
    1. Creating a wiki
      7m 3s
    2. Wiki editing basics
      4m 26s
    3. Creating lists
      6m 1s
    4. Subdividing a class wiki
      3m 43s
    5. Adding attachments and images
      2m 54s
    6. Creating external links
      2m 27s
    7. Creating a table
      5m 43s
  13. 1h 9m
    1. Online assessment overview
      1m 38s
    2. Creating question pool categories
      1m 58s
    3. Creating a first question
      6m 24s
    4. Creating true/false questions
      4m 39s
    5. Creating multiple choice questions
      7m 23s
    6. Creating short answer questions
      6m 59s
    7. Creating essay questions
      6m 22s
    8. Creating match questions
      6m 38s
    9. Creating numerical questions
      4m 56s
    10. Importing question pools from Blackboard
      6m 24s
    11. Creating a quiz
      9m 9s
    12. Adding questions to a quiz
      6m 50s
  14. 39m 16s
    1. Gradebook overview
      2m 6s
    2. Completing assignments as a student
      9m 34s
    3. Grading an assignment
      4m 52s
    4. Quick grading
      2m 25s
    5. Grading assignments with uploaded files
      2m 18s
    6. Grading offline assignments
      1m 16s
    7. Grading an online quiz
      3m 30s
    8. Quiz data analysis
      3m 4s
    9. Adding assignments
      2m 3s
    10. Exporting grades
      3m 55s
    11. Importing grades
      4m 13s
  15. 20m 4s
    1. Calendars and events overview
      3m 51s
    2. Creating a new event
      3m 21s
    3. Creating a repeating event
      3m 15s
    4. Exporting a calendar to iCal
      4m 5s
    5. Exporting a calendar to Outlook
      5m 32s
  16. 44m 40s
    1. Course administration overview
      3m 3s
    2. Managing course settings
      12m 48s
    3. Managing user roles
      2m 59s
    4. Managing groups
      4m 51s
    5. Backing up your course
      4m 34s
    6. Restoring data from a backup
      3m 14s
    7. Importing content to another course
      4m 53s
    8. Resetting a course
      3m 24s
    9. Running reports
      4m 54s
  17. 4m 14s
    1. Additional resources
      2m 58s
    2. Goodbye
      1m 16s

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.

Join now Already a member? Log in

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 Teachers.

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.