Описание некоторых особенностей работы с кодом веб-страниц, используя NVDA.
Оглавление
- В общем и целом
- Подготовка кода в Word
- Подготовка текста в Блокноте
- Создание оглавления
- Работаем в редакторе WordPress
- Другие кнопки редактора
В общем и целом
Разумно сначала почитать в интернете или в других источниках о том, что такое язык разметки Html, какие бывают теги и тому подобное. А сейчас я опишу, что из этого мне пригодилось для того, чтобы быстро подготавливать страницы для публикации. А их, заметьте, на этом сайте уже более 500!
Подготовив всё заранее, трачу на публикацию одной страницы в среднем около трёх минут, включая очистку ненужных тегов. Или ещё меньше, если весь код предварительно набиваю руками. А можно и не весь, часть можно вставить с помощью редактора самого движка.
Подготовка кода в Word
В статье об изготовлении этого сайта указал на страницу, где можно очистить подготовленный в программе Word документ. Сохранив размеченный документ в формате веб-страницы с фильтром, а затем открыв этот файл Блокнотом мы получаем практически готовый текст для вставки в редактор WordPress. Если бы мы работали в визуальном редакторе, то можно было бы вставить текст просто из документа Word в формате docx, но для чтеца экрана этот режим недоступен.
Есть ещё вариант публикации документов прямо из программы Word, но учитывая источник происхождения программы не хочу давать ей доступ к сайту.
Поехали дальше.
Подготовка текста в Блокноте
Можно использовать Блокнот, а можно любой другой простой текстовый редактор. Я пока набираю документ в Word, проверяю и исправляю ошибки, а потом сохраняю в формате «Обычный текст». Теперь можно и в Блокноте с ним проработать.
В Блокноте каждый абзац занимает обычно одну строку. Если это просто текст, то в его начале и в конце вставляем тег p. Соответственно, в угловых скобках и с косой чертой для закрывающего тега.
Заголовки выделять этим тегом нет необходимости, они выделяются тегом h с цифрой, указывающей уровень заголовка. Разумно использовать заголовки уровня 2 и ниже, так как тег заголовка первого уровня обозначает главный заголовок на открытой странице.
Чтобы не путаться, размечаю заголовки, вставляю якоря и ссылки в оглавление, а уже в самом конце добавляю теги разметки абзацев.
Создание оглавления
Якорь, или закладка, как кому нравится. Может быть вставлен по-разному, но мне проще вставлять его одним выражением:
<a name="link"></a>
Это выражение вставляю сразу после открывающего тега нужного заголовка. Но начинаю не с этого, а с создания оглавления в начале страницы. Само оглавление можно вставить ещё в Word, тогда текст заголовков будет точно соответствовать тексту ссылок в оглавлении, останется только вручную вставить необходимые теги ссылок и якорей.
Итак, есть текст оглавления:
***
Оглавление
Первый
Второй
***
Чтобы каждая строка оглавления стала ссылкой, а также определялась как отдельный элемент списка, нужно добавить в начале каждой строки выражение
<li><a href="#link">
А в конце каждой строки списка ссылок оглавления вот такое выражение:
</a></li>
над первой строкой списка ссылок оглавления и в конце последней строки, или под ней нужно вставить тег, который будет определять, какого вида будет ваш список, маркированный или нумерованный. Это тег ul или тег ol.
И ещё. Раз ссылок у нас в оглавлении будет несколько, то якоря нужно пронумеровать. На разных страницах можно применять якоря с одинаковым названием, но лучше всё же на каждой странице давать своё имя якорям, заменяя выражение link на какое-то другое.
Вот, вкратце, и всё о подготовке текста для публикации. Вы скажете, что я какие-то теги забыл? Нет проблем, их вставим с помощью редактора WordPress. А пока мы можем проверить работоспособность нашего кода прямо тут, на компьютере. Скопируйте ниже приведённый код, вставьте в текстовый документ, поменяйте расширение файла с txt на htm и откройте его в браузере (строки со звёздочками копировать не нужно):
***
<p>Оглавление</p>
<ul>
<li><a href="#link1"> Первый </a></li>
<li><a href="#link2"> Второй </a></li>
</ul>
<h2><a name="link1"></a> Первый </h2>
<p>Содержание под первым заголовком.</p>
<h2><a name="link2"></a> Второй </h2>
<p>Содержание под вторым заголовком.</p>
***
Если что-то не работает, проверяйте код каждого тега. Например, если забудете поставить косую черту для закрывающего тега заголовка, то текст до следующего подобного тега весь будет заголовком предыдущего уровня. А неправильное имя якоря не даст перейти по ссылке.
Работаем в редакторе WordPress
Подготовленный в Блокноте и проверенный на работоспособность ссылок текст кода переносим на сайт.
Если весь текст уже готов, то перед оглавлением набираем короткий анонс, который будет виден при показе всех записей, оставляем курсор в конце строки или на новой строке под будущим анонсом, это без разницы. Затем жмём Escape чтобы выйти из редактора и жмём на кнопку «Вставить тег Далее. Вставиться тег:
<!—more—>
Другие кнопки редактора
Прежде чем воспользоваться одной из кнопок, выделите кусок текста, к которому хотите применить нужный код.
Кнопки «Жирный», «Курсив», «Цитата«, «Удаленный (перечёркнутый) текст» И «Вставленный текст» Оформляют текст визуальными эффектами.
Кнопки «Маркированный список» и «Нумерованный список» вставляют соответствующие теги. Можете ими воспользоваться, если поленились это сделать вручную. Но сначала примените к каждой строке вашего списка Кнопка «Элемент списка», иначе получится каша, а не список.
Кнопка «Код» позволяет публиковать любой кусок кода.
Кнопка «Вставить ссылку» позволяет быстро вставить ссылку в текст. Заранее её скопируйте, выделите нужное слово или выражение, затем жмите эту кнопку и вставляйте ссылку. Потом выберите как её открывать и сохраните. В тексте появятся нужные теги.
Всё на этом, остальное сами изучайте!