Word в html разметку

Была ли эта статья полезной?

Бочка меда

СДО Collaborator умеет создавать учебные ресурсы из готового документа MS Word. Достаточно загрузить файл DOCX-формата, и система предложит преобразовать его в ресурс типа «Страница». Это существенно экономит время авторам ресурсов.
Порядок действий:

1. Создать новый ресурс типа «Файл».
2. Загрузить документ.
3. После загрузки система спросит «Преобразовать файл в Ресурс-Страницу?» — соглашайтесь.
4. Сохранить и просмотреть результат.

Результатом будет HTML-ресурс в виде одной страницы, которая быстро загружается и имеет все шансы идеально отображаться на любых устройствах — от десктопа до мобильного телефона.

Ложка дегтя

Но преобразование подразумевает, что при верстке документа DOCX вы пользовались общепринятыми правилами и форматированием, которому существует прямая альтернатива в формате HTML. Если прямого соответствия не будет, то и результат преобразования не сможет соответствовать оригиналу.
Что получится из вашего документа, вы можете легко проверить на сервисах преобразования Word в HTML. Например, этих:

• Online HTML converter
• Word to HTML Converter Online. Convert Word to clean HTML — 4html.net
• WORD to HTML | DOC to HTML

Можно проверить, как сам MS Word справляется с преобразованием своего документа в формат HTML. Попробуйте команду «Файл» — «Сохранить как…» и выберите формат «Веб-страница с фильтром (.htm)».
Если результат будет адекватен оригиналу — то ваш документ отформатирован хорошо.
Абсолютного точного (или максимально близкого к нему) преобразования документа DOCX в другой формат можно добиться только преобразованием в PDF.
Но есть способы сделать документ так, чтобы он конвертировался в HTML без критических искажений.

Лучшие практики форматирования документа MS Word

1. Стили заголовков и текста

Используйте стандартные стили заголовков: «Заголовок», «Подзаголовок», «Заголовок 1», «Заголовок 2» и т.д.
Текст набирайте стандартным стилем — «Обычный».

2. Интервалы и отступы

Если нужно для абзацев изменить отступы, поменять интервал, шрифт — изменяйте в тексте. Можно изменять стили, но это не всегда работает.

3. Выравнивание текста

Обычно с этим проблем не бывает. Все преобразуется корректно.

4. Форматирование шрифта

Все обычные способы изменения шрифта — начертание, цвет, размер — будут хорошо преобразовываться. 

5. Изменение типа шрифта

Шрифт сможет отобразиться правильно только в том случае, если на чужом компьютере будут установлены те же шрифты, что и у вас. Используйте «безопасные шрифты» (узнать больше про безопасные шрифты):

6. Списки

С простыми маркированными и нумерованными списками проблем не должно возникнуть. Иерархические списки тоже неплохо конвертируются, но будут отличия.

7. Вставка картинок

Корректно будут отображаться картинки, вставленные в текст как знак, а не как отдельный объект с возможностью обтекания. На всякий случай проверьте, что настроено в параметрах картинки «Размер и положение» — «Обтекание текстом», должно быть так:

Самый надежный способ — отдельная картинка в отдельном абзаце текста.

Никакие настройки обтекания картинки текстом не дадут хорошего результата. Картинки будут «убегать» со своих мест и игнорировать ваши настройки.

Единственный стабильный случай — это обтекание картинки текстом справа. Вставьте картинку первой в абзаце перед всем текстом и в настройках «Размер и положение» — «Обтекание текстом» выберите стиль обтекания «Квадрат» и обтекание текстом «Справа». Там же дополнительно можно настроить отступы от текста.

8. Изменение размера, оформления и параметров картинок

Вы можете изменять размеры картинок и экспериментировать с другими преобразованиями.
Как правило, простые изменения корректно переносятся в HTML. Но что-то особенное — вряд ли будет распознано правильно.

9. Таблицы

Таблицы конвертируются практически без ошибок.

Если нужно, чтобы таблица растягивалась на всю ширину страницы — установите для нее параметр «Автоподбор по ширине окна». В этом случае лучше делать таблицу как можно проще — без объединённых и разбитых ячеек, преобразование может быть неточным.

Итог

Волшебного средства, что точно преобразовывает любой DOCX в HTML, не существует. И не может быть. Слишком много специфических отличий у этих форматов.
Если вам важна скорость создания учебных ресурсов в СДО и их адаптивность к чтению с мобильных устройств — очищайте и упрощайте форматирование документов, конвертируйте в HTML. У вас будет быстрый и приемлемый результат.
Требуется точное соответствие документу? С этим лучше всего справляется преобразование в формат PDF. Но придется забыть про удобства чтения с экрана смартфона.
Есть время и вдохновение — изучайте верстку HTML документов с помощью правил Bootstrap его альтернатив Bootstrap Alternatives (Top 10 Best Frontend Frameworks).
P.S. У нас есть пример правильно подготовленного Word файла. Его можно брать как шаблон для своих документов. Пройдите на демо-портал LMS Collaborator в Каталог учебных заданий и заберите его по этой ссылке:

Просто взять и скачать.

P.S. Есть предложения, вопросы, замечания, идеи — пишите в комментарии.

Присоединяйтесь к нашему сообществу корпоративного обучения в Facebook и Linkedin, а также подписывайтесь на нашу e-learning рассылку, чтобы получить апрельскую скидку на использование LMS Collaborator по промокоду: LMS2020-04

In this guide, we will explore all the various ways for you to convert Word documents to HTML. We are experts at converting Microsoft Word documents to HTML with over 20 years of experience. We have several tools to help you convert and process your documents to clean HTML:

1. Word To HTML – our Web App is great for quick clean-ups (paste content and process), uploading Word documents, and converting them to HTML
2. Doc Converter Pro Desktop – the perfect choice for document batch converting on Windows Desktop
3. Doc Converter Pro Web App – the best choice if you need to bulk convert and process documents online
4. Doc Converter Pro API – for programmers looking to add document conversion to their Apps

Using MS Word built-in save as HTML option

If you have MS Word installed you can use the built-in save to HTML option. All you need to do is:

• Go to the file menu
• Select Save as
• In the drop-down file type box select, Web Page, Filtered
• Click Save

Easy eh? Not so fast there are two significant issues with using Word to save your HTML, the file sizes are large and the quality of the HTML is not very good.

Large file sizes when using MS Word to convert documents to HTML

If you create a simple test document like the one shown below, then save it to HTML you will see that the resulting web page has more than 100 lines of code.

If we use Upload file and convert the same file with one of our tools like WordToHTML.net you will get around 40 lines of code when full page mode is enabled, which is less than half of the size of the Word version.  If you copy and paste content from an MS Word document into Visual Editor you will get even 19 lines of code, which is less than one-fourth of the size of the Word version. You can try this experiment yourself or view our test files:

• • MS Word test file
  • test file converted with MS Word
  • test file converted with WordToHTML.net converter via Upload and convert document
  • test file converted with WordToHTML.net via paste into Visual Editor and keep formatting

This example is for a simple document, for complex files the file size difference can be even larger.

Why does it matter if my HTML code is large?

Apart from practical issues like server space web pages with lots of code that are longer to download. Google penalizes sites with slow download times, and more importantly, users are impatient. According to research nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that has not loaded within 3 seconds.  In the modern internet, speed is the most important factor.

Word generates messy non-standard HTML when converting from Word to HTML

The other big issue with using Word is it creates overly complex non-standard HTML. Now to be fair to Microsoft, we imagine that the main reason they do this is to try to keep the layout of your files as similar as possible, but it does create issues. In our example file if we look at how Word handles the list items, this is the code it generates:

<p class=MsoListParagraphCxSpFirst style=’text-indent:-18.0pt’><span
style=’font-family:Symbol’>�<span style=’font:7.0pt “Times New Roman”‘>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span>Apples</p>

A lot of code just to display the word apple on a list. You will also notice that Word does not use the standard HTML Li and ul list tags. It uses CSS to format the lists, if you strip out this CSS the list becomes normal text. In comparison, this is the code generated with WordToHTML.net when you upload a document and convert it.

<li style="margin-left:28.06pt; padding-left:7.94pt; font-family:serif;"><span style="font-family:Calibri;">Apples</span></li>

If you just paste content from the MS Word test file into Visual Editor and choose to keep formatting you will be left with this very clean code:

<li>Apples</li>

So you can see if you want the cleanest HTML possible you need to use a proper tool to convert your Word files to HTML.

What is the best way to convert Word to HTML?

Here are our recommendations based on your various needs.

I want an online tool that will quickly convert my text or single documents to clean HTML:

Our online WordToHTML.net tool lets you paste your text into the Visual Editor and your text gets converted to HTML instantly. It is super easy to use and free for basic features.

For users who need more, our WordToHTML.net Pro version is only $10 a month and gives you the ability to upload Word (DOCX/DOC), PDF, and other file types and have them converted to HTML. You also have the ability to save your files, create conversion templates, and more cleanup features. You can try the Pro version for free.

Try our WordToHTML.net converter tool.

I need a Windows application to convert lots of Word or PDF files to HTML:

We have a Windows desktop product called Doc Converter Pro. It is an easy way for you to convert your Word, PDF, and other file formats to HTML. You can convert one file or batch convert hundreds of files in one go. You can also create your own custom templates to give you full control over your conversions.

The advantage of a desktop application is it will be faster if you are converting lots of files also it is a good option if your files are private as nothing will leave your system.

Find out more or Download your free trial for Windows…

I need a web app to batch convert my Word documents to HTML:

Our web app version of Doc Converter Pro Online gives you all the great features of our desktop version, but as it is web-based, you can work from any computer and any browser. You can also share accounts with your team.

How does Doc Converter Pro Web App differ from WordToHTML.net? Doc Converter Pro is designed for batch converting lots of documents whereas WordToHTML.net is better for cleaning up pasted text or converting single documents.

Check out the free trial of our web app…

I am a programmer who needs an API solution to convert our Word files to HTML:

No problem. We have a Web API version of Doc Converter Pro Online. With a few lines of code, we take all the hard work out of converting your documents. Try our free trial here…

We are here to help…

If you need more advice, feel free to contact us anytime. We can advise you on the best strategy for your needs.