Video: Creating a web page

We have already seen several examples of creating HTML web pages. But let's step through one more example and pull all of this together. So if we scroll down to the second week of the semester, let's go ahead and click the Show only week two. So that just the second week of the semester is showing here. And what we want to do is we want to build one page that has all the information about the Green Moray Eel that we have been working with through some of the other examples.

Moodle is an online tool that allows educators to interact with students outside the classroom and manage a course from anywhere. In Moodle Essential Training for Teachers, Chris Mattia shows how this program works for teachers on three levels: disseminating information, creating a forum where ideas are exchanged, and assessing the progress of students. Chris shows how to build course materials with Moodle's HTML editor, post assignments, and save time by using Moodle's grade book to evaluate tests automatically and organize scores. Exercise files accompany the course.

Topics include:

Installing and configuring Moodle

Preparing media files for distribution inside a Moodle course

Posting instructions on the course home page

Setting up course-specific glossaries and databases

Building assignments students can complete online

Using Moodle's built-in email and discussion boards

Creating a wiki inside Moodle for students to build and contribute content

Creating a web page

We have already seen several examples of creating HTML web pages. But let'sstep through one more example and pull all of this together. So if we scrolldown to the second week of the semester, let's go ahead and click the Show onlyweek two. So that just the second week of the semester is showing here.And what we want to do is we want to build one page that has all theinformation about the Green Moray Eel that we have been working with throughsome of the other examples.

We want to have the scientific name; we want to have an audio file that showsthe pronunciation of that name, we'll show the classification of the organismand image of the organism and the video.So let's do all this at one time. So let's go ahead and scroll down and clickthe Add a resource and Compose a web page. We are going to give the Name ofGreen Moray Eel Overview. For Summary, Complete overview of the Green MorayEel, I'll go ahead and scroll down and here is our Compose a web page and ourHTML Editor. And let's go ahead and open up the enlarged Editor, so we have gota little bit more room to work with here.

We will start by creating a table that we can use to handle our layout. And we are going to make a table that has three rows in it and two columns. We are going to leave the Width set to 100%, so that this table will completely fillthe screen that we are working with. We'll go ahead and leave the Alignment setto Not Set and Border thickness set to 1, Cellspacing and Cellpadding both set to 1 as well.Go ahead and click OK. And our table appears here for us. Now we want to goahead and merge the cells for the top row and the bottom row. Because in thetop row, we are going to put the scientific name with the audio pronunciationof that name. And then in the bottom we are going to put the video. The lefthand side we are going to use to put the scientific classification and we'll beable to load an image into the right hand side.

So to do this click-and-drag in order to select the entire top row. So both ofthem are highlighted now on screen. Then you want to come to the toolbar andyou want to click on this tool that is Merge Cells, it's the second one fromthe right hand side. That's going to merge those cells back together. I'm goingto do the same thing for the bottom row. So, I'll click-and-drag to select bothof the cells in the bottom row. And then click the Merge Cells tool.Now in the top we are going to come back up here and click on the CenterJustify Text. So that the text is going to be centered. And we'll type in thefull scientific name of the Green Moray Eel, which is Gymnothorax funebris.

And since it is a scientific name, we'll go ahead and select that and we are goingto Italicize it. And we'll also make it stand out a bit more and we'll call it a Heading 1.Now, underneath of Gymnothorax funebris, we want to again center and this timewe are going just simply type in Pronunciation and go ahead and selectPronunciation and we are going to insert a web link to this.

Now we are going to link directly to an audio file. So we want to click theBrowse button down at the bottom and it's going to bring up our Standard filebrowser. So go ahead and click on the Audio folder and let's go into the mp3 folder. And we have not uploaded a file yet that is the audio pronunciation ofGymnothorax funebris.So go ahead and go down to the bottom of the screen now, and click on theBrowse button. And if you are following along with the Exercise Files, I'm inChapter 5. And there should be an audio file that is Gymnothorax_funebris.mp3.

Go ahead and click Open then click the button for Upload and that willeffectively upload that file. We then simply scroll down in our list until wefind the Gymnothorax_funebris.mp3 file.Go ahead and click on that. And it's going to put in the full URL to where that is. We'll go ahead and type a title, Audio Pronunciation of Gymnothoraxfunebris. We can leave the Target set to None and we don't need to set anyAnchors. We'll go ahead and click OK. And now we have a link that is going totake us directly to the pronunciation of that file.

Next we'll come over here to the left- hand side, we want to paste in, some textthat we've already got written. So I'm going to jump over to my Text Editorwhere I already have the full classification. So you don't have to watch metype all of this. And if you are following along with the Exercise Files, thisfile is called GreenMorayClassification.txt and it's in the Chapter 5, Exercise Files.So go ahead and select that text and go ahead and Copy it with Command+C or Ctrl+C. We can go ahead and close that window. And we'll just simply paste thatdirectly into this blank. Now click anywhere inside of the left hand cell andgo up to the top on the left hand side and click on the button for RowProperties. And this is going to set the properties for the entire table rowthat we are working with.

What we want to set here is the Vertical Align. We wanted to be set to Top, sothat any content that is put inside of either cell in this middle row is goingto align to the top of the cell. So when we paste our image in and if the imageis longer than what the text is showing up here, the text is still going tofloat up near the top. So we just want to check and make sure that is set correctly.Then we come on down here into the bottom and click OK. And then let's go aheadand insert our code for our image, on the right hand side and let's link to our image.

And the Insert Image button is up here in our HTML Editor. We'll goahead and click on that. It again brings up our Standard file browser. And we do have an image already that we have uploaded in the previous exercise.So, go ahead and click on the Images folder down in the bottom and scroll downuntil you find the image for Gymnothorax _funebris.jpg and go ahead and click on that. And it's going Preview that image for us over here, and if we scroll downyou can see there he is right there, he is just hiding out It's gone ahead andfilled in the Image URL in the top. We'll go ahead and add some Alt Text. So,Image of Gymnothorax funebris. We can leave the Alignment set at it is.

And we don't want any Border. We don't need to worry about any cell spacing on thisand it's filling out the Size for us.So we are all set to insert our image. We'll click the OK button and there wego, we've got our images been posted in here and we can see that our text isremaining snapped to the top of this cell on the left hand side. So now goahead and scroll down to the bottom and here we are going to insert the videothat we have previously used for the Gymnothorax funebris. So the easiest wayto go ahead and add the video at the bottom is we'll use the same object codeto link to the YouTube video that we linked to earlier.

If you missed that movie, if we go ahead and jump back over to our Text Editor,I have added a file called youTubeObjectCode.txt and it's in the Chapter 5Exercise Files. So we don't have to go back and get that code completely. I'll go ahead and just select that code and copy it with Command+C or Ctrl+C andthen we can close that window. Now this bottom table cells where we want to putthat code, but we have to jump into the Plain Text Editor.So we'll come up here and click in the Toggle HTML Source. And we'll scrolldown until we find the last table cell and it's right on here at the bottom.

And it's showing us all the information about it and showing us a row span of1, column span of 2. And we want to go just in front of the td tag and hitReturn on our keyboard a couple of times, so that we have got space to insertthe code. We'll move up and then Command+V or Ctrl+V to paste the object codedirectly in, to that bottom blank.Now I'll go ahead and return back to our HTML Editor. And if we scroll down tothe bottom, we see that nothing is in there yet, because remember it's onlygoing to show us this once we have previewed the document for the first time.

We have got everything in here the way we wanted. We'll go ahead and returnback to our Minimized Editor. We'll scroll all the way down to the bottom andclick the Save and display button. Now we have our Gymnothorax funebris titleat the top, we have got our Pronunciation here.We can go ahead and click on that.(Male voice: Gymnothorax funebris.)Our left hand side has the full phylogenetic listing for this animal. We have got an image of theanimal and if we scroll down to the bottom, we can see that we do have a videothat's been posted in here. We'll go ahead and click on that. And there is ourvideo that's playing. So the students can get a good idea as to what thisorganism is, what is looks like, how it actually moves, and they've got a muchbetter point of reference now at this point for this organism.

So we can go ahead and scroll back up. There is obviously a lot of refiningthat you can do to this page and continue to add additional format to reallyenhance it and provide additional information to the students. But this willgive you a good idea as to what's possible to do with the HTML Editor inside of Moodle.So let's go ahead and return back to our course by clicking the BIOL432. And the last thing we want to do is go ahead and scroll down and where the linkthat we have just created Green Moray Eel Overview has been placed, we can goahead and move that up into up into the Lecture Material section by simplyclicking on the double headed arrow and then going directly up here and we'llput the overview directly underneath of the Alternate Pronunciation for Acropora palmata.

We scroll back down, now we can see that we have the Green Moray Overview, wehave the image, we have all the QuickTime videos and since all these materialsare all related to this Overview, let's go ahead and take just a second andpress the right hand arrow and that's going to tab these objects in one row so that we can see that the Overview has all of these other documents associatedwith it. So now we have got some nice formatting available for our students.

There are currently no FAQs about Moodle 1.9 Essential Training for Teachers.

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.

Already a member ?

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

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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:

new course releases

newsletter

general communications

special notices

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:

new course releases

newsletter

general communications

special notices

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