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

Creating a web page

From: Moodle 1.9 Essential Training for Teachers

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.

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.

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.

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 · 9910 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.