Instructional Technology Services

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 how to script HTML code. OIT - Academic Technology Instructional Technology Services [Publish Date] icollege Desire2Learn 9.4.1

The HTML Editor in icollege Table of Contents Introduction...3 Objectives...3 HTML Editor Overview...4 The Basic Tab...4 The Advanced Tab...5 Basic Editing in the HTML Editor...6 To format text...6 To create content from a Word file...6 Pasting Content from Word into the HTML Editor...6 Using the Spell Checker...7 Views in the HTML Editor...8 Inserting Tables...9 Inserting Quicklinks in the HTML Editor... 10 Creating a Quicklink... 11 Items that can be Quicklinked... 12 Inserting Images in the HTML Editor... 13 Inserting Multimedia in the HTML Editor... 14 Inserting Multimedia from your Computer... 14 Inserting Multimedia from your Course Offering Files... 15 Inserting YouTube videos... 15 Inserting Links... 16 Inserting Embed Code... 16 The Equation Editor... 17

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: 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 20

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 Basic Tab The Basic Tab provides access to the most commonly used tools when editing content. Spell Check Insert Table Insert Quicklink Insert Image Insert Stuff Font Formatting Alignment & Justification List Types Views: Edit HTML Source Preview Toggle Fullscreen mode The HTML Editor Page 4 of 20

The Advanced Tab The Advanced tab provides additional options to customize your message. Additional options include, but are not limited to, changing text color, inserting bullets and tables, typing equations, etc.). Hover your mouse over the icons for a brief description of its function. Cut and Paste Options Undo / Redo Increase / Decrease Indent Horizontal Rule Text Color Subscript Font Formatting Insert / Edit Attribute Insert Custom Character Equation Editor The HTML Editor Page 5 of 20

Basic Editing in the HTML Editor To format text 1. Select the text you would like to format. 2. Click the appropriate formatting icon. To create content from a Word file 1. In Microsoft Word, select Save As. 2. From the Save as type dropdown menu, select Web Page, 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. Place your cursor where you would like to paste the content from Word. 2. Click the Paste from Word icon. 3. Paste the copied text using the Control + V pasting short cut. The HTML Editor Page 6 of 20

Using the Spell Checker 1. Enter your content. 2. Click the Check Spelling icon. 3. If necessary, change the Language using the dropdown menu. 4. Ignore or Replace identified problems in your content. The HTML Editor Page 7 of 20

Views in the HTML Editor There are four view options for editing and viewing content from the HTML Editor. Design View HTML Source View Preview Toggle Fullscreen 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 tweak the HTML code. This view provides a preview of what your content will look like once you have saved your work. This view allows you to expand the editing space so that you can design your document in a larger view. Edit HTML Source Code Preview Toggle Fullcreen Mode The HTML Editor Page 8 of 20

Inserting Tables You can use tables to display tabular content or as a way to format a page layout. Inserting a Table 1. Place your cursor at the location where you would like for the table to appear. 2. Click the Inserts a new table icon. 3. Adjust the table properties. Updating Table Properties 1. Right-click anywhere within your table. 2. Select Table Properties from the menu. 3. Adjust the properties. The HTML Editor Page 9 of 20

Updating Cell, Row, or Column Properties 1. Right-click anywhere within your table. 2. Hover over Cell, Row, Col in the menu. 3. Right-click anywhere within your table. 4. Select Table Properties from the menu. 5. Select the item s properties. 6. Adjust the properties. NOTE: Under Cell, Row, and Col there are additional options that allow you to edit and modify the table. The options are explained below. Insert row before Insert row after Delete row Insert column before Symbols and their meanings Insert column after Remove column Merge table cells Split merged table cells The HTML Editor Page 10 of 20

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 Quicklink icon in the HTML Editor. 3. Select a Quicklink Category. 4. Edit the Link Details. The requirements of this section will vary based on the Category selected at step 3. 5. Enter a Link Caption. The link caption is the text that will be clicked on in order to view the Quicklink. 6. Select one of the three options for where the Quicklink will open. a. Whole Window The Quicklink will replace the current contents of the window. b. Same Frame The Quicklink will replace the current contents of the frame. c. New Window The Quicklink will open in a new window. 7. Click Insert. 8. Save. The HTML Editor Page 11 of 20

Items that can be Quicklinked Location Calendar Events CD-Rom Files Description Use a quicklink to link directly to an event on your course calendar. Quicklink to a particular file on a CD-ROM. NOTE: 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. NOTE: You cannot link to a module since modules do not have any content. You can only link to a topic within a module. Course Files Discussion Discussion Topics Discussion Boards Dropbox Category Folder External Learning Tools Quiz Quiz Category Individual Quiz Self Assessments Self Assessment Category Survey URLs Individual Self Assessment Survey Category Individual Survey Quicklink to a course files such as a PDF, Word, or PowerPoint file. Quicklink to either a particular discussion topic or to a discussion board 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, news websites, or other internet URLs. The HTML Editor Page 12 of 20

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. 3. Select an image: a. My Computer Browse for an image from your computer. If necessary, choose an alternate destination for where the image file you are uploading will be stored. b. Course Offering Files Locate an image that has already been uploaded to your course. c. URL Paste the URL from an image that is on the web. 4. Save. The HTML Editor Page 13 of 20

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 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 to locate the file on your computer. 4. Click Choose Destination to select or create a storage location for the file in your Course File structure. 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. 7. Enter an Alternative Text. 8. (Optional) Determine how the image will display. 9. Click Insert. Click the checkbox to indicate the image is decorative, if it does not represent important content but is only decoration. This allows screen readers for students with disabilities to ignore the image. Leave the checkbox to Lock aspect ratio if you would like to have the image remain in its original dimensions even if it is resized. If desired, specify a width and/or height for the image in pixels. The HTML Editor Page 14 of 20

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. 3. Select your file from the file directory or click Upload to upload a file to the directory. NOTE: You can select a file type from the Media Type dropdown menu at the bottom of the screen and click Apply to filter your directory search so that it only displays files matching the selected type. 4. Click Next. 5. Enter a Title. 6. Enter an Alternate Text. 7. (Optional) Determine how the image will display. Click the checkbox to indicate the image is decorative, if it does not represent important content but is only decoration. This allows screen readers for students with disabilities to ignore the image. Leave the checkbox to Lock aspect ratio if you would like to have the image remain in its original dimensions even if it is resized. If desired, specify a width and/or height for the image in pixels. 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 search terms in order to locate an appropriate video. 4. Click Search. NOTE: You can preview the video by clicking on the video thumbnail. 5. Click on the video that you would like to use. 6. Click Next. 7. Click Insert. The HTML Editor Page 15 of 20

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 URL in the URL text box. 4. Click Next. 5. Enter a Title. This is the text that users will click on in order to access the URL. 6. Click Insert. Inserting Embed Code 1. 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 16 of 20

The Equation Editor The Equation Editor allows you to insert mathematical and statistical expressions within HTML. There are three math input formats that you can use. Each editor will have different tools available for creating equations. MathML LaTeX Graphical Editor Entering an equation 1. Place your cursor where you would like the equation to appear. 2. Click on the Advanced tab in the HTML Editor. 3. Click on Insert Equation. 4. Enter a Title for the equation. The title is used with accessible technology as a description of the equation. 5. Select the Math Input Format. You have three choices Graphical Editor, LaTeX, and MathML. 6. Create the equation. How you create the equation will depend on which of the three formats you use. 1. Graphical Editor Equation Provides a graphic interface menu. 2. LaTeX No menu provided. You must be familiar with LaTeX syntax. 3. MathML - No menu provided. You must be familiar with MathML syntax. 7. Click Insert. The HTML Editor Page 17 of 20

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 LaTeX is a document typesetting language that provides a text syntax for 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 one of the following link: After the official switch to Desire2Learn https://gpc.view.usg.edu/d2l/common/dialogs/equation/help/latexhelp.d2l?d2l_body_type=2 &ou=139880 Prior to the official switch to Desire2Learn https://gpc2.view.usg.edu/d2l/common/dialogs/equation/help/latexhelp.d2l?d2l_body_type= 2&ou=139880 Creating an equation with LaTeX looks like this: x = \frac{ - b \pm \sqrt {b^2-4ac} }{2a} You can display multiple LaTeX expressions on separate lines by wrapping each expression with a pair of '$$'s: $$ x = \frac{ - b \pm \sqrt {b^2-4ac} }{2a} $$ $$ a + b = c $$ Alternatively, you can create multiple lines of math 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} 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: The HTML Editor Page 18 of 20

MathML 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/ A valid MathML equation looks 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 19 of 20

The HTML Editor Page 20 of 20