icollege The HTML Editor in icollege Instructional Technology Services Abstract: This handout provides detailed information about the HTML Editor in icollege. The HTML Editor allows you to create HTML content without having to know HTML code. OIT - Academic Technology Instructional Technology Services 12/16/2013 icollege Desire2Learn 10.2
The HTML Editor in icollege Table of Contents Introduction...3 Objectives...3 HTML Editor Overview...4 The Html Editor...4 Additional Features...5 Templates...5 Inserting Templates...5 Objective 1: Using the Basic and Advanced HTML Editor Interface...6 Formatting text...6 Creating content from a Word file...6 Pasting Content from Word into the HTML Editor...6 Inserting Tables...7 Updating Table Properties...8 Inserting or Deleting Table Rows or Columns...8 Using the Spell Checker...9 Objective 2: Using Multiple Views in the HTML Editor... 10 Objective 3: Inserting Quicklinks in the HTML Editor... 11 Creating a Quicklink... 11 Items that can be Quicklinked... 11 Objective 4: Inserting Images in the HTML Editor... 12 Objective 5: Inserting Multimedia in the HTML Editor... 13 Inserting Multimedia from your Computer... 13 Inserting Multimedia from your Course Offering Files... 14 Inserting YouTube videos... 14 Inserting Flickr images... 15 Inserting Links... 15 Inserting Embed Code... 15 Objective 6: Using the Equation Editor... 16 Which editor should I use?... 16 Entering an equation... 18
Introduction The HTML Editor allows users to create HTML content without having to know and understand HTML code. It provides a WYSIWYG (What You See Is What You Get) interface so that you can create content in a more natural and familiar way. It includes a robust equation editor for creating math equations. Objectives This handout will help you to do the following: 1. Use the Basic and Advanced interface in the HTML Editor 2. Use multiple views within the HTML Editor 3. Insert Quicklinks 4. Insert images 5. Insert multimedia 6. Use the equation editor The HTML Editor Page 3 of 18
HTML Editor Overview The HTML Editor is available anywhere that you can create HTML content in icollege. You do not need to know any HTML code in order to use the HTML Editor. Instead, the HTML Editor provides a userfriendly interface for creating HTML content. The Html Editor The Basic tab provides access to the most commonly used tools when editing content. Additional options can be found by clicking arrows adjacent to certain icons. icollege D2L 10.2 now has more popular tools located on the Basic tab (Figure 1). Cut and Paste Options Insert Stuff Insert Quicklink Insert Table Equations & Symbols Insert Image Font Formatting Alignment & Justification List Types Spell Check Figure 1. Html Editor Overview Views: Edit HTML Source Preview Toggle Fullscreen The HTML Editor Page 4 of 18
Additional Features In some windows a Full Toolbar is not immediately available. Clicking the Show All Components button will reveal additional tools. NOTE: Hover your mouse over a formatting icon and a dialogue box will appear with the name of the formatting tool. Templates The HTML editor allows you to use templates when building your content. Templates can be found by clicking the Browse for a Template button (Figure 2) on the top of the editor. Figure 2. Browse for a Template button Inserting Templates Templates can be imported from other courses or from files saved on your computer (Figure 3). Figure 3. Template Upload window NOTE: Templates files must have the.html file extension. The HTML Editor Page 5 of 18
Objective 1: Using the Basic and Advanced HTML Editor Interface Formatting text 1. Select the text you would like to format. 2. Click the appropriate formatting icon. 3. Click the Advanced tab or the Show All Components icon to display more formatting options. Creating content from a Word file 1. In Microsoft Word, select Save As. 2. From the Save as type drop-down menu, select Web Page, Filtered (Figure 4). Figure 4. Saving as Webpage, Filtered 3. Upload the file to Manage Files. 4. Create a new topic using the uploaded course file. 5. If necessary, you will be able to edit this file using the HTML Editor. Pasting Content from Word into the HTML Editor 1. Copy the desired text in Word. 2. In the HTML editor, place your cursor where you would like to paste the copied content. 3. Click the Paste from Word icon (Figure 5). Figure 5. Pasting content from Word 4. Paste the copied text using the Control + V shortcut. 5. Click Update. The HTML Editor Page 6 of 18
Inserting Tables You can use tables to display tabular content or to format a page layout. To Insert a Table 1. Place your cursor at the location where you would like for the table to appear. 2. Click the Insert Table icon (Figure 10). Figure 6. The Table Tool 3. Set the desired table properties. Click the Advanced tab for additional table properties. It is recommended that you initially set the table width to 100%, and then use the re-sizing handles to adjust the table size as needed. If the field is left blank, it is difficult to see the columns and rows of the table. Below are examples of tables with the same number of columns and rows. However, 100% was entered in the Width field of one table (Figure 11), and the Width field was left blank for the other table (Figure 12). Figure 7: Table Width field set to "100%" Figure 8: Table Width field left blank 4. Click Insert. The HTML Editor Page 7 of 18
Updating Table Properties 1. Select your table or click anywhere inside the table. 2. Click the drop-down arrow next to the table tool icon. 3. Select Table Cell Properties or Table Row Properties from the menu (Figure 13). Figure 9. Updating Table Properties 4. Adjust the desired properties. 5. Click Update. Inserting or Deleting Table Rows or Columns 1. Click anywhere within your table. 2. Click the drop-down arrow next to the table tool icon. 3. Select the desired action from the menu. Figure 10. Inserting or Deleting Rows or Columns The HTML Editor Page 8 of 18
Using the Spell Checker 1. Enter your content in the HTML editor. 2. Click the Check Spelling icon (Figure 6). Figure 11. Spell Checker 3. If necessary, change the language using the Language drop-down menu (Figure 7). 4. The first misspelled word will be highlighted in yellow. Use the Ignore or Replace options to resolve the identified spelling errors in your content (Figure 7). Figure 12. Spell Check Interface 5. If there are no misspellings, or after all corrections have been made, the No Misspelled Word message will appear at the top of the Spell Checker window (Figure 8). 6. Click OK to close the Spell Checker and return to the HTML editor. Figure 13: "No Misspelled Word" message The HTML Editor Page 9 of 18
Objective 2: Using Multiple Views in the HTML Editor There are five view options for editing and viewing content from the HTML Editor. Design View HTML Source View Preview Toggle Fullscreen Resize View This is the default view. It allows you to quickly create and format your content without using HTML code. This view allows you to edit the HTML Source code directly. This is helpful if you would like to modify to the HTML code. This view provides a preview of what your content will look like once you have saved your work. This feature allows you to toggle between the Design View and Fullscreen windows for the HTML editor. This feature allows you to resize the HTML editor inside your browser window. Simply click and drag the corner to change the size of the editor. Edit HTML Source Code Resize HTML Editor Figure 14. HTML Editor Views Preview Toggle Fullscreen M d The HTML Editor Page 10 of 18
Objective 3: Inserting Quicklinks in the HTML Editor Quicklinks allow you to link to both external websites and various types of content within icollege. Creating a Quicklink 1. Place your cursor where you would like your Quicklink. 2. Click the Insert Quicklink icon in the HTML Editor (Figure 15). Figure 15. The Quicklink tool 3. Select a category from the Course Materials list. 4. Click an existing item or create a new item. 5. If creating a new item, click the Insert or Create and Insert button (button varies based on the category selected in Step 3). 6. To modify the name of the Quicklink, a. Place your cursor anywhere on the link and click the Insert Quicklink icon. b. Enter a new name in the Title field. c. Click Update. 7. To change how the Quicklink opens, Select one of the three options for where the Quicklink will open. a. Place your cursor anywhere on the link and click the Insert Quicklink icon. b. Select the desired Target option. Whole Window The Quicklink will replace the current contents of the window. Same Frame The Quicklink will replace the current contents of the frame. New Window The Quicklink will open in a new window. c. Click Update. Items that can be Quicklinked Item Description Calendar Events CD-ROM Files Use a Quicklink to link directly to an event on your course calendar. Quicklink to a particular file on a CD-ROM. The CD-ROM must remain in the computer and the computer must be connected to the internet in order for students to access the file on the CD-ROM. Checklists Content Topics Quicklink to a particular checklist Quicklink to a particular topic within the course content. You cannot link to a module since modules do not have any content. You can only link to a topic within a module. The HTML Editor Page 11 of 18
Item Course Files Discussions Discussion Topics Discussion Forums Dropbox Category Folder External Learning Tools Quiz Quiz Category Individual Quiz Self Assessments Self Assessment Category Individual Self Assessment Survey Survey Category Individual Survey URLs Description Quicklink to a course files such as a PDF, Word, or PowerPoint file. Quicklink to either a particular discussion topic or to a discussion forum containing several discussion topics. Quicklink to a particular Dropbox folder or to an entire Dropbox category. When linking to a Dropbox category, the link will display a list of all Dropbox folders within that category. Quicklink to Smarthinking online student support, a Wimba Classroom, or other Wimba Voice tool. Quicklink to a particular quiz or to an entire quiz category. When linking to a quiz category, the link will display a list of all quizzes within that category. Quicklink to a particular self assessment folder or to an entire self assessment category. When linking to a self assessment category, the link will display a list of all self assessment folders within that category. Quicklink to a particular survey folder or to an entire survey category. When linking to a survey category, the link will display a list of all survey folders within that category. Quicklink to external URLs like YouTube.com, news websites, or other URLs. Objective 4: Inserting Images in the HTML Editor 1. Place your cursor where you would like to place the image. 2. Click the Insert an image icon (Figure 16). Figure 16. Inserting an image into the HTML editor 3. Select an image: a. My Computer Browse for an image located on your computer. If necessary, use the Choose Destination button to change the location of where the image file will be stored. 4. Click Add. b. Course Offering Files Locate an image that has already been uploaded to the Manage Files area of your course. c. URL Paste the URL from an image that is located on the web. The HTML Editor Page 12 of 18
Objective 5: Inserting Multimedia in the HTML Editor The Insert Stuff button is located in the HTML Editor. It allows you to integrate multimedia from five different sources. My Computer Course Offering Files YouTube Insert Link Enter Embed Code Uploads and inserts media files from your computer Inserts media files that have already been uploaded to icollege Allows you to search for and embed YouTube videos Allows you to create a link to an external resource (CD, DVD, etc.) Allows you to enter embed code obtained from an external resource Inserting Multimedia from your Computer 1. Click the Insert Stuff icon in the HTML Editor. 2. Select My Computer in the left hand menu. 3. Click Browse (or Choose File) to locate the file on your computer. 4. Click Choose Destination to select or create a new folder for storing your file in the Manage Files area. 5. Click Upload. NOTE: It may take a few moments for the upload to complete and transition to the next screen. 6. Enter a title in the Link Text field. 7. Enter the Alternate Text. Alternate Text is a brief, generic description of the multimedia file. 8. (Optional) Determine how the image will display. Click the This is decorative checkbox if the multimedia object does not represent important content but is only used to decorate the page. This allows screen readers for students with disabilities to ignore the image. Leave the Lock aspect ratio checkbox selected if you would like to have the object retain its proportion even if it is resized. If desired, specify a Width and/or Height for the object in pixels. Check the Auto Start checkbox if you want the multimedia object to play automatically. 9. Click Insert. The HTML Editor Page 13 of 18
Inserting Multimedia from your Course Offering Files 1. Click the Insert Stuff icon in the HTML Editor. 2. Select Course Offering Files in the left hand menu. NOTE: You can filter your directory search so that it only displays a specific type of multimedia file by selecting a file type from the Media Type drop-down menu at the bottom of the screen. Click Apply to filter the search. to. 3. Select your file from the file directory or click Upload to upload a file to the directory. 4. Click Next. 5. Enter a title in the Link Text field. 6. Enter the Alternate Text. Alternate Text is a brief, generic description of the multimedia file. 7. (Optional) Determine how the object will display. Click the This is decorative checkbox if the multimedia object does not represent important content but is only used to decorate the page. This allows screen readers for students with disabilities to ignore the object. Leave the Lock aspect ratio checkbox selected if you would like to have the object retain its proportion even if it is resized. If desired, specify a Width and/or Height for the object in pixels. Check the Auto Start checkbox if you want the multimedia object to play automatically. 8. Click Insert. Inserting YouTube videos 1. Click the Insert Stuff icon in the HTML Editor. 2. Select YouTube in the left hand menu. 3. Enter the desired search terms in the Search YouTube field in order to locate an appropriate video. 4. Click Search. 5. Click the title of the video that you would like to use. NOTE: You can preview the video by clicking on the thumbnail video. 6. Click Next. 7. Click Insert. The HTML Editor Page 14 of 18
Inserting Flickr images 1. Click the Insert Stuff icon in the HTML Editor. 2. Select Flickr in the left hand menu. 3. Enter the desired search terms in the Search Flickr field in order to locate an appropriate image. 4. Click Search. 5. Click the title of the image that you would like to use. NOTE: You can preview the image by clicking on the thumbnail image. 6. Click Next. 7. (Optional) Determine how the object will display. Click the This is decorative checkbox if the image does not represent important content but is only used to decorate the page. This allows screen readers for students with disabilities to ignore the image. Leave the Lock aspect ratio checkbox selected if you would like to have the object retain its proportion even if it is resized. If desired, specify a Width and/or Height for the object in pixels. Check the Add author and license information beneath the image checkbox if you want to include the copyright information for the image. 8. Click Insert. Inserting Links 1. Click the Insert Stuff icon in the HTML Editor. 2. Select Insert Link in the left hand menu. 3. Paste or enter the complete web address in the URL field. The URL must contain http:// or https:// 4. Click Next. 5. Enter a title in the Link Text field. This is the text that users will click in order to access the URL. 6. Click Insert. Inserting Embed Code 1. Click the Insert Stuff icon in the HTML Editor. 2. Select Enter Embed Code in the left hand menu. 3. Paste or enter the embed code in the Embed Code text area. 4. Click Next. 5. Click Insert. The HTML Editor Page 15 of 18
Objective 6: Using the Equation Editor The Equation Editor allows you to insert mathematical and statistical expressions within HTML. There are three editor formats that you can use. Each format will have different tools available for creating equations. 1. Graphical 2. MathML 3. LaTeX Which editor should I use? Since icollege supports three methods of input for equations, how do you know which you should use? The answer is that your format choice will be a matter of personal preference and technical knowledge regarding the various formats. The Graphical Editor is by far the simplest to use. The other two formats will be useful if you are already familiar with those formats. Graphical Editor The Graphical Editor is probably the easiest to use of the three options. It allows you to visually create your mathematical equations. This straightforward input method allows for quick creation of equations. The way your equation looks when you are creating it is the same way your equation displays to other users. This is the default format for creating math equations in the system. LaTeX Editor LaTeX is a document typesetting language used to create mathematical formulas. In order to use this editor, you will need to be familiar with the LaTeX syntax. A list of available LaTeX commands can be found at the following link: https://gpc.view.usg.edu/d2l/common/dialogs/equation/help/latexhelp.d2l?d2l_body_type=2&ou=139 880 Creating the same equation above with the LaTeX editor will look like this: x = \frac{ - b \pm \sqrt {b^2-4ac} }{2a} You can display multiple LaTeX expressions on separate lines by placing the $$ characters at the beginning and end of the expression: $$ x = \frac{ - b \pm \sqrt {b^2-4ac} }{2a} $$ $$ a + b = c $$ Alternatively, you can create multiple lines of expressions by using an equation array in a single LaTeX expression: \begin{eqnarray} x &=& \frac{ - b \pm \sqrt {b^2-4ac} }{2a} \\ c &=& a + b \end{eqnarray} The HTML Editor Page 16 of 18
You can preview your equation within the equation editor to see how it will display. If you're having trouble previewing your equation, make sure that the LaTeX commands you are using are supported. MathML Editor MathML is an internet standard adopted by the World Wide Web Consortium (W3C) for the storage and display of mathematical equations. It uses XML to describe mathematical notation by capturing its structure and content. Comprehensive support for the MathML format can be found at the following link: http://www.w3.org/tr/mathml3/ Creating the same equation above with the MathML editor will look like this: <math xmlns="http://www.w3.org/1998/math/mathml"> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mrow> <mo>-</mo> <mi>b</mi> <mo>±</mo> <msqrt> <mrow> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>-</mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> </msqrt> </mrow> </mrow> <mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mrow> </mfrac> </math> You can preview your equation within the equation editor to see how it will display. If you're having trouble previewing your equation ("Error" text), make sure that the MathML is well-formed, and the tags you are using are supported. The HTML Editor Page 17 of 18
Entering an equation 1. Place your cursor where you would like the equation to appear. 2. Click the drop-down arrow next to the Quicklinks icon (Figure 17). Figure 17. Inserting Equations Drop-down menu 3. Select Graphical equation, MathML equation, or LaTex equation from the menu to determine the input format you will use to create your equation. Depending on the icollege tool, options may appear as icons instead of in a drop-down menu. For example, in the HTML editor for creating Quiz questions, the icons are located under the Advanced tab (Figure 18). Figure 17. Inserting Equations Icons 4. Create the equation. The method for creating the equation will depend on the chosen input format. a. Graphical Editor Equation Provides a graphic interface menu with various tabs to facilitate the creation of your equation (Figure 19). Figure 18. Graphical Editor Equation interface b. LaTeX No menu provided. You must be familiar with LaTeX syntax (Figure 20). Figure 19. LaTeX Equation window c. MathML - No menu provided. You must be familiar with MathML syntax (Figure 21). 5. Click Insert. Figure 20. MathML Equation window The HTML Editor Page 18 of 18