Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
We want to have the scientific name; we want to have an audio file that shows the pronunciation of that name, we'll show the classification of the organism and 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 click the Add a resource and Compose a web page. We are going to give the Name of Green Moray Eel Overview. For Summary, Complete overview of the Green Moray Eel, I'll go ahead and scroll down and here is our Compose a web page and our HTML Editor. And let's go ahead and open up the enlarged Editor, so we have got a 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 fill the screen that we are working with. We'll go ahead and leave the Alignment set to 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 go ahead and merge the cells for the top row and the bottom row. Because in the top row, we are going to put the scientific name with the audio pronunciation of that name. And then in the bottom we are going to put the video. The left hand side we are going to use to put the scientific classification and we'll be able 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 of them are highlighted now on screen. Then you want to come to the toolbar and you want to click on this tool that is Merge Cells, it's the second one from the right hand side. That's going to merge those cells back together. I'm going to do the same thing for the bottom row. So, I'll click-and-drag to select both of 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 Center Justify Text. So that the text is going to be centered. And we'll type in the full 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 going to 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 time we are going just simply type in Pronunciation and go ahead and select Pronunciation 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 the Browse button down at the bottom and it's going to bring up our Standard file browser. 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 of Gymnothorax funebris. So go ahead and go down to the bottom of the screen now, and click on the Browse button. And if you are following along with the Exercise Files, I'm in Chapter 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 will effectively upload that file. We then simply scroll down in our list until we find 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 Gymnothorax funebris. We can leave the Target set to None and we don't need to set any Anchors. We'll go ahead and click OK. And now we have a link that is going to take 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 text that we've already got written. So I'm going to jump over to my Text Editor where I already have the full classification. So you don't have to watch me type all of this. And if you are following along with the Exercise Files, this file 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 that directly into this blank. Now click anywhere inside of the left hand cell and go up to the top on the left hand side and click on the button for Row Properties. And this is going to set the properties for the entire table row that we are working with.
What we want to set here is the Vertical Align. We wanted to be set to Top, so that any content that is put inside of either cell in this middle row is going to align to the top of the cell. So when we paste our image in and if the image is longer than what the text is showing up here, the text is still going to float 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 ahead and 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 go ahead 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 down until 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 down you can see there he is right there, he is just hiding out It's gone ahead and filled 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 this and 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 we go, we've got our images been posted in here and we can see that our text is remaining snapped to the top of this cell on the left hand side. So now go ahead and scroll down to the bottom and here we are going to insert the video that we have previously used for the Gymnothorax funebris. So the easiest way to go ahead and add the video at the bottom is we'll use the same object code to 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 5 Exercise 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 and then we can close that window. Now this bottom table cells where we want to put that 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 scroll down 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 of 1, column span of 2. And we want to go just in front of the td tag and hit Return on our keyboard a couple of times, so that we have got space to insert the code. We'll move up and then Command+V or Ctrl+V to paste the object code directly in, to that bottom blank. Now I'll go ahead and return back to our HTML Editor. And if we scroll down to the bottom, we see that nothing is in there yet, because remember it's only going 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 return back to our Minimized Editor. We'll scroll all the way down to the bottom and click the Save and display button. Now we have our Gymnothorax funebris title at 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 the animal and if we scroll down to the bottom, we can see that we do have a video that's been posted in here. We'll go ahead and click on that. And there is our video that's playing. So the students can get a good idea as to what this organism is, what is looks like, how it actually moves, and they've got a much better 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 refining that you can do to this page and continue to add additional format to really enhance it and provide additional information to the students. But this will give 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 link that we have just created Green Moray Eel Overview has been placed, we can go ahead and move that up into up into the Lecture Material section by simply clicking on the double headed arrow and then going directly up here and we'll put 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, we have the image, we have all the QuickTime videos and since all these materials are all related to this Overview, let's go ahead and take just a second and press 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 associated with it. So now we have got some nice formatting available for our students.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 76689 Viewers
80 Video lessons · 130875 Viewers
52 Video lessons · 64773 Viewers
59 Video lessons · 50597 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.