Copying and Pasting from Word to the Web

Copying and Pasting from Word to the Web

[toc] <h2>Advice: do not copy and paste directly from Word</h2> It is not suggested to do a direct copy and paste from a Word document (.docx) file to a Web Content builder (like My Studies, Edublogs, etc). There are various tools and ways to get around this issue, and this guide will cover My Studies as an example, but the theory and practice are the same for Edublogs, and other web-content creation tools. <a href="https://blogs.brighton.ac.uk/teachingcontingency/wiki/frequently-asked-questions-faqs/copying-and-pasting-from-word-to-the-web/#best">I don't need the why, just tell me how!</a> <h2>Why?</h2> Microsoft Word has a lot of built-in formatting 'code' contained within it, that confuses Website builders because it so closely resembles html (Hypertext Markup Language) which is the code the entire world-wide-web is built upon. <h2>Extraneous and embarrassing code</h2> If one copies (Ctrl-C on windows or CMD-C on Mac) text directly from a Word document: <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/01-Bit-of-Word-doc-text-1.png"><img class="aligncenter size-large wp-image-2264" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/01-Bit-of-Word-doc-text-1-1024x549.png" alt="Screencapture of a word document with only text, but some headings, sub-headings and bulletpoints are in the example" width="550" height="295" /></a> My studies (and other editors) may ask you if you wish to keep formatting or remove it. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/03-Do-NOT-keep-formatting.png"><img class="aligncenter wp-image-2266" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/03-Do-NOT-keep-formatting.png" alt="Keep Formatting button being highlighted" width="521" height="330" /></a> If you choose Keep Formatting rather than removing it, the text will actually contain a large amount of 'code' that is invisible to you, but not to the internet. Here's what this looks like in the content editor window... Not bad right? <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/04-Kept-formatting-looks-normal.png"><img class="aligncenter size-large wp-image-2267" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/04-Kept-formatting-looks-normal-1024x466.png" alt="Kept formatting, the text 'looks' normal in this window however..." width="550" height="250" /></a> Lets click on the "Source Code" button in the editor menu and see what it looks like. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/05-Click-on-the-code-button.png"><img class="aligncenter size-full wp-image-2268" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/05-Click-on-the-code-button.png" alt="Screencapture of the code button in My studies" width="177" height="162" /></a> Here's the source code: <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/06-Rubbish-formatting.png"><img class="aligncenter wp-image-2269" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/06-Rubbish-formatting-1024x495.png" alt="Screencapture of ridiculous amount of code in a picture" width="416" height="201" /></a> What an absolute mess! This will really play-havoc with the announcement when it gets sent to students through their mobile phones, or tablets.. And for that matter things like Chrome Books, etc will ALSO have a problem 'reading' this code. If you choose "Remove Formatting" when first pasting, or use the remove-formatting button in the menu <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/07-Remove-Formatting-Button.png"><img class="aligncenter size-full wp-image-2270" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/07-Remove-Formatting-Button.png" alt="Screencapture of the remove-formatting button in My Studies" width="204" height="176" /></a> The source code 'looks' a bit better, but there's still extraneous code in the sample. This can STILL cause problems. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/09-But-still-repetitive-formatting.png"><img class="aligncenter size-full wp-image-2271" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/09-But-still-repetitive-formatting.png" alt="Screencapture of the source code with formatting supposedly removed, but still lots of weirdness in there." width="259" height="435" /></a> <h2 id="best">Best Practice for Copying and Pasting into My Studies</h2> This will take a bit longer, but will ensure the students looking at the entry have a better experience. Copy the Word text into your computer's clipboard with Ctrl-C on Windows or Cmd-C on a Mac, or right-click and choose Copy from the drop-down menu. Go to the Content Editor window and click on the Source Code Button. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/10-Best-Practice-copy-and-code.png"><img class="aligncenter size-full wp-image-2272" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/10-Best-Practice-copy-and-code.png" alt="Screencapture of the Source Code button in My Studies" width="490" height="382" /></a> Paste (right-click paste or Ctrl-V on Windows, Cmd-V on Mac) in the blank window, and click Save <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/12-Paste-and-save.png"><img class="aligncenter size-large wp-image-2273" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/12-Paste-and-save-1024x547.png" alt="Screencapture of the pasted text and a save button highlighted" width="550" height="294" /></a> Now you will, admittedly need to FORMAT the text manually. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/13-Reformat-the-text.png"><img class="aligncenter size-large wp-image-2274" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/13-Reformat-the-text-1024x226.png" alt="Screencapture of completely non-formatted text in the content editor, which one will now need to format" width="550" height="121" /></a> Re-arrange the text by headline - sub-heading and paragraph (body) text first. Then Select the headline and make it a heading <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/13a-Heading.png"><img class="aligncenter size-full wp-image-2275" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/13a-Heading.png" alt="Heading example" width="408" height="264" /></a> Select the sub-title and choose sub-heading 1 <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/13b-Sub-heading.png"><img class="aligncenter size-full wp-image-2276" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/13b-Sub-heading.png" alt="sub-heading choice example screenshot" width="379" height="275" /></a> And for the bulleted list... Select the text in the editor, and click on the Bulleted-list button. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/13c-bulletted-list.png"><img class="aligncenter wp-image-2277" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/13c-bulletted-list.png" alt="Example of bulleted-list in the text highlighted with the button" width="531" height="264" /></a> Even not knowing about html code, a viewer can see (from the source code) that there's a lot less confusing stuff happening in the window. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/13d-Less-code-better.png"><img class="aligncenter size-full wp-image-2278" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/13d-Less-code-better.png" alt="Screencapture of less confusing source-code in the editor" width="632" height="425" /></a> One can now run the 'Accessibility Checker' on the text in the editor. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/14-Accessibility-Checker.png"><img class="aligncenter size-full wp-image-2279" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/14-Accessibility-Checker.png" alt="Screencapture of the Accessibility Checker in My Studies" width="280" height="259" /></a> Good Accessibility! <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/15-Good-Accessibility.png"><img class="aligncenter size-full wp-image-2280" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/15-Good-Accessibility.png" alt="Screencapture of the 'good' accessibility popup window " width="500" height="217" /></a> Now you can submit, and know that your students will all have an equally successful time reading the text online and on their devices. <a href="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/16-Submit.png"><img class="aligncenter size-full wp-image-2281" src="https://blogs.brighton.ac.uk/teachingcontingency/files/2021/04/16-Submit.png" alt="Screencapture of the My Studies submit button" width="394" height="169" /></a> &nbsp; &nbsp;