Html теги для word

Один из читателей сайта WordExpert.ru задал вопрос:

Можно ли использовать редактор Word как HTML-редактор, с возможностью просмотра получаемого кода?

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

Тем не менее, я расскажу об одном способе (для Word 2003), который может заинтересовать тех пользователей, которые сначала печатают текст в редакторе, а затем выделяют и вставляют его, например, в свои блоги. И уже в админпанели блога они форматируют текст, вставляя в нужные места соответствующие теги HTML.

Я предлагаю создать собственную панель инструментов с кнопками для часто используемых HTML-тегов, таких как <B> или <STRONG>, <BR>, <UL> и других. После того, как эти кнопки будут готовы, пользователю достаточно будет выделить нужный текст (ранее введенный), и применить к нему тот или иной тег. В результате перед началом выделенного текста и в его конце будут вставлены соответствующие HTML-теги.

Если ничего выделено, то в место нахождения курсора ввода просто будет вставлен тег. Удобство такого способа в том, что не нужно одновременно печатать текст и форматировать его — форматирование можно отложить на потом.

Итак, для начала я рекомендую вам создать пустой документ и сохранить его как шаблон, на основе которого впоследствии вы будете создавать свои тексты с HTML-кодами. После этого создадим собственную панель инструментов. Как это сделать, описано в заметке Как создать собственную панель инструментов.

• Откройте редактор Visual Basic («Alt»+«F11»), найдите в окне проектов ваш проект (с именем вашего шаблона) и добавьте к нему модуль для макросов. Добавить модуль можно так: щелкните правой кнопкой мыши на имени проекта и в раскрывшемся меню наведите указатель мыши на пункт Insert, а уже в подменю выберите команду Module. В итоге будет создан новый модуль Module1.
• Перейдите в окно кода и введите следующий код:

  Sub htmlStrong()
  'Вставка тега жирного шрифта
  Dim str1 As String
  Dim str2 As String
  Dim selText As String
  str1 = "<STRONG>" 'Открывающий тег
  str2 = "</STRONG>"   'Закрывающий тег
  selText = Selection.Text   'Выделенный текст
  If selText <> "" Then
     With Selection
        .TypeText (str1)
        .TypeText (selText)
        .TypeText (str2)
     End With
  Else
     Selection.TypeText (str1 & str2)
  End If
  End Sub

• Повторите вставку этого кода для других тегов, которые вам нужны, изменив соответственно значения переменных str1 и str2.

Теперь разместите кнопки этих макросов на созданной вами панели инструментов. Как это сделать, описано в заметке Как настроить Word под себя.

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

На создание этой заметки вдохновила статья Introduction to VBA for MS Word.

Если вы не знаете, как подключить к документу и применить этот макрос, изучите следующие заметки с сайта:

Автоматическая запись макроса

Создание макроса из готового кода

Бочка меда

СДО 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

Это делается с помощью AltChunk и AlternativeFormatImportPart. Более-менее это на статье с MSDN описано.

using System.IO;
using System.Reflection;
using System.Text;
using DocumentFormat.OpenXml.Packaging;
using DocumentFormat.OpenXml.Wordprocessing;

namespace TestC
{
    class Program
    {
        static void Main(string[] args)
        {
            using (var document = WordprocessingDocument.Open(@"C:UsersUserDocumentssample.docx", isEditable: true))
            //я вынес файл html как ресурс сборки отдельно, это не принципиально
            using (var htmlStream = Assembly.GetExecutingAssembly().GetManifestResourceStream("TestC.Sample.html"))
            {
                var mainDocumentPart = document.MainDocumentPart;
                var html = new StreamReader(htmlStream).ReadToEnd(); //текст html
                var htmlAsUtf8Bytes = Encoding.UTF8.GetBytes(html);
                using (MemoryStream htmlContentStream = new MemoryStream(htmlAsUtf8Bytes)) {
                    string partId = "id";
                    AlternativeFormatImportPart formatImportPart = mainDocumentPart.AddAlternativeFormatImportPart(
                            AlternativeFormatImportPartType.Html, partId);
                    formatImportPart.FeedData(htmlContentStream);

                    AltChunk altChunk = new AltChunk();
                    altChunk.Id = partId;

                    mainDocumentPart.Document.Body.Append(altChunk);
                }
            }
        }
    }
}

Где Sample.html (взял отсюда):

<HTML>
<HEAD>
    <TITLE>Your Title Here</TITLE>
</HEAD>
<BODY>
    <HR>
    <a href="http://somegreatsite.com">Link Name</a>
    is a link to another nifty site
    <H1>This is a Header</H1>
    <H2>This is a Medium Header</H2>
    Send me mail at <a href="mailto:support@yourcompany.com">
        support@yourcompany.com
    </a>.
    <P> This is a new paragraph!
    <P>
        <B>This is a new paragraph!</B>
        <BR> <B><I>This is a new sentence without a paragraph break, in bold italics.</I></B>
        <HR>
</BODY>
</HTML>

На выходе:

Для вашего примера:

<HTML>
<head>
    <style>
        .table {
            width: 100%;
            border: 1px solid;
            border-collapse: collapse;
        }

        .table td {
            border: 1px solid black;
        }
    </style>  
</head>
<BODY>
<table class="table">
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
</table>
<p>Some text</p>
</BODY>
</HTML>

На выходе:

UPD
Заменит все параграфы, которые состоят только из текста [Html] на наш HTML

using System;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Text;
using DocumentFormat.OpenXml.Packaging;
using DocumentFormat.OpenXml.Wordprocessing;

namespace Test
{
    class Program
    {
        static void Main(string[] args)
        {
            using (var document = WordprocessingDocument.Open(@".docx file", isEditable: true))
            //я вынес файл html как ресурс сборки отдельно, это не принципиально
            using (var htmlStream = Assembly.GetExecutingAssembly().GetManifestResourceStream("Test.Sample.html")) {
                var mainDocumentPart = document.MainDocumentPart;
                var documentBody = mainDocumentPart.Document.Body;

                var html = new StreamReader(htmlStream).ReadToEnd();
                var htmlAsUtf8Bytes = Encoding.UTF8.GetBytes(html);

                Random random = new Random();

                var paragraphsToReplace = documentBody.Descendants<Paragraph>().Where(x => x.InnerText.Equals("[Html]")).ToList();

                foreach (var paragraph in paragraphsToReplace) {

                    string partId = $"id_{random.Next()}";

                    AlternativeFormatImportPart formatImportPart = mainDocumentPart.AddAlternativeFormatImportPart(
                            AlternativeFormatImportPartType.Html, partId);
                    using (MemoryStream htmlContentStream = new MemoryStream(htmlAsUtf8Bytes)) {
                        formatImportPart.FeedData(htmlContentStream);
                    }
                    AltChunk altChunk = new AltChunk();
                    altChunk.Id = partId;

                    paragraph.InsertBeforeSelf(altChunk);
                    paragraph.Remove();
                }

            }
        }
    }
}

Доброго времени суток, уважаемые подписчики.

Этот урок мы посветим форматированию текста в html. Рассмотрим, какие теги для этого применяются.

Сразу оговорюсь, что многие из них являются достаточно специфическими, их можно «обойти», используя каскадные таблицы стилей (css).

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

Итак, начнем.

Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке: Архив 2 урока

Возьмем из высланного Вам архива файл «Лис и лошадь.doc» и откроем его с помощью программы word. Там две сказки известных авторов Братья Гримм.

Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из предыдущего урока.

Готово?

Верю, что да.

Теперь вернемся в word, скопируем весь наш текст из файла «сказка.doc» и вставим его между тегами <body> </body> нашей заготовки.

Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera).

Мы видим, что текст идет без заголовков, без абзацев, без отступов.

Вот теперь и займемся непосредственным форматированием текста в языке HTML.

Для выделения заголовков используются теги <H1>текст</H1>, <H2>текст</H2> и т.д. до <H6>текcт</H6>.

Цифры после буквы H в теге применяются от 1 до 6.

1 – самый крупный заголовок, 6 – самый маленький заголовок.

Давайте теперь найдем в нашем файле названия сказок и заключим их в теги <H1>…<H1>.

У тега <H1> есть параметр align со значением Left — по левому краю, right — по правому и center — по центру.

Давайте выровняем заголовок по центру. Для этого пропишем:

Аналогично и второй заголовок.

Сохраняем и смотрим в браузер.

Заголовки стали по центру.

Для упрощения работы можно одновременно держать открытыми код страницы в блокноте и браузере.

А после изменений в коде файл сохранять, а в браузере нажать кнопку обновить (или F5).

Самостоятельно попробуйте разные значения тега <H>текст</H>. И разные значения align. Выберите любой Вам понравившейся.

Теперь разобьем наш текст на абзацы.

Тег, который это делает — <p>текст абзаца</p>.

Для этого находим начало абзацев и ставим там тег <p>, а в конце абзаца закрываем его </p>.

Сохраняем исходный файл с кодом (ctrl+s), в браузере жмем кнопку «обновить» и смотрим, что получилось.

У тега <p> есть параметр align с такими же значениями, что и у тегов <H> — left, right, center. Его работа абсолютно такая же как и у тега <H>.

На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту.

Текст можно сделать жирным. При помощи тега <b>или <strong> (кстати, это закрывающиеся теги. Рекомендуется <strong>).

Курсив — <i> или <em>, подчеркнутый <u>, моноширинный <tt> или <kbd>.

Попробуйте заключить разные участки текста в разные теги. И не забывайте их закрывать.

Например:

Для изменения размера, цвета и шрифта отдельного участка текста используйте тег <font>, его параметры:

Давайте выделим фрагмент текста крупным красным шрифтом. Сделать это можно следующим образом:

Еще один немаловажный тег <br> применяется для принудительного перехода текста на новую строку. В использовании он прост, ставите его в том месте, начиная с которого текст должен отображаться с новой строки. В принципе по этому тегу добавить больше нечего, поэтому двигаемся дальше.

Следующую группу тегов (исходя из своего опыта) используют довольно редко, поэтому подробно рассматривать их мы не будем. Включил я их в данный урок, чтобы показать возможности языка, и вдруг вам они когда-нибудь понадобятся. Чтобы вы знали, что такие возможности существуют.

Работу этих тегов, предлагаю рассмотреть самостоятельно, как раз будет для вас полезное упражнение.

Итак, теги:

Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем:

Поэкспериментируйте с набором и значениями параметров этого тега.

Есть еще один интересный тег, но поддерживается он только браузером Internet Explorer. Честно говоря мне его на практике использовать не приходилось.

Тег <marquee> – контейнер бегающей строки с параметрами:

Например, в нашей сказке это может выглядеть так:

Как можете?

Вот, пожалуй, и все что я хотел вам рассказать о тегах форматирования текста в HTML. Предлагаю самостоятельно сделать упражнение:

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

В следующем уроке мы научимся делать ссылки, рассмотрим, какие они бывают, поработаем над вставкой картинок в нашу html страницу, и сделаем картинку ссылкой на любой web-ресурс.