Как правильно добавлять текст на страницу сайта

Вам может также понадобиться узнать: как добавить страницу на сайт (см.справочное руководство CMS Intelcube)/

Наполнение сайта информацией

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

Не многие из вас знают, что именно от внутреннего наполнения сайта и правильности размещения информации зависит будущее веб-ресурса, его продвижение в сети Интернет.

Страницы сайта: какими они должны быть

Что можно размещать на страницах сайта
Прежде чем приступить к наполнению сайта информацией, давайте поговорим о том, что, вообще, можно размещать на его страницах:

Тексты
Первое и самое очевидное – на странице сайта можно размещать тексты. От текстов на сайте зависит большая часть успеха, как в плане привлечения аудитории, так и в плане продвижения сайта. Поэтому к текстам необходимо относиться со всей тщательностью.

Изображения
На страницах сайта можно размещать изображения в различных графических форматах, среди которых выделяются – JPG, GIF, PNG. Использовать другие графические расширения не рекомендуется. Перед размещением изображений на странице сайта, их необходимо подготовить (подогнать до оптимально размера и веса в Кб).

Таблицы
Таблицы – один из частых элементов размещаемых на странице сайта. Таблицы необходимы в большинстве случаев для демонстрации определенных технических показателей, прайс-листов, сводной информации по объектам. Работа с таблицами в Интернет – одна из сложных задач для простых пользователей. Красиво и аккуратно разместить таблицу в Интернет возможно только с использованием специальных стилей CSS. Именно поэтому, мы подготавливаем заранее специальные стили для таблиц и даем рекомендации, как их использовать.

Flash
Flash-ролики не теряют своей популярности. Если вы являетесь обладателем анимационной презентации или красочного ролика в формате SWF, то вы сможете вставить его на страницу своего сайта.

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

Видео можно размещать на странице сайта в нескольких форматах:   FLV, WMV, MOV, RM. Для воспроизведения видео на странице для каждого формата требуется свой видео-плейер. Например, для формата WMV необходимо, чтобы у пользователя операционная система установленная на компьютере была Windows (такое видео может воспроизводиться только через Windows Media Video плейер). Остальные видео форматы – мультисистемные. Подгрузка видео-плейера осуществляется вставкой специального кода, который обращается к сайту производителя.

(Пояснение относительно WMV: WMV-плейер входит в windows но теоретически тоже может обращаться к сайту microsoft например за кодеками или новой версией плейера).
Самым распространенным форматом видео на сегодняшний день является FLV (flash-видео). Он весьма удобен для размещения видео-роликов на страницах сайта.
С ожидаемым выходом новой версии языка HTML – HTML5, решится ряд проблем связанных со вставкой видео. Вместо сложного кода можно будет вставить определенный тег <video>, который обеспечит подгрузку необходимого плейера и позволит воспроизводить видео на странице сайта.

Как выглядит идеальная веб-страница

Как это не странно, но можно выделить довольно немного требований к идеальной веб-странице.

Идеальная веб-страница должна содержать:

1. Аккуратно оформленный текст. Чистый HTML код размещенного текста (без наличия лишних тегов – «мусора»)
2. Наличие правильно оформленных заголовков в тексте
3. Наличие правильно оформленных title (заголовок страницы в браузере), keywords (ключевые слова), description (описание)
4. Наличие человекопонятного URL страницы

Как правильно размещать текст

Итак, давайте приступим к вопросу размещения текста на страницах сайта. С чего следует начать?
Первое, с чего следует начать размещение текстов – это их подготовка. Все тексты, которые вы планируете размещать на своем сайте должны быть продуманы и написаны. Чаще всего это делается с помощью текстового редактора Word.

Чем хорош Word?  - Только тем, что он помогает контролировать орфографические ошибки. Более, для сайта, Word не полезен ни чем. Более того, он может быть даже губительным для веб-страницы.

ПРАКТИКА:
Рассмотрим на примере, как следует добавлять текст на страницу сайта так, чтобы он корректно и аккуратно отображался на сайте, не содержал лишних тегов («мусора») и был удобен для чтения.

Для работы с сайтом лучше всего использовать браузер в котором можно открывать страницы в разных вкладках. Я рекомендую установить Firefox и работать в этом замечательном браузере. Сейчас работа происходит именно в нем.

Откроем сайт в первой вкладке. Это позволит нам отслеживать отображение нашей работы на сайте. В другой вкладке откроем систему управления сайтом CMS Intelcube. Введем логип и пароль и зайдем в основной раздел «СТРАНИЦЫ САЙТА».

Для удобства, перед началом работ лучше всего создать структуру сайта: добавить все страницы, которые запланированы. В нашем примере пункты меню все добавлены, мы также можем убедиться в том, что все добавленные нами пункты меню отображаются на сайте в его основном меню.

Каждый пункт меню – это страница сайта. Чем мы будем сейчас заниматься – мы будем добавлять текст на страницу сайта, это цель нашего сегодняшнего урока.
Текст страницы является ее частью. Страница сайта создается на основе шаблона и представляет собой файл в формате HTML.
Текст добавленный на страницу является ее частью, а значит и он преобразуется в язык гипертекстовой разметки HTML. Это специальный язык Интернет, который понимают браузеры и считывая код показывают нам страницу сайта. Сам код HTML – это некая разбивка страницы на блоки, оформленные специальными элементами, которые называются ТЭГАМИ.

Давайте посмотрим все это на примере работы с одной из страниц нашего сайта.

Для работы с текстом страницы необходимо кликнуть на пиктограмму с буквой «Т» находящуюся справа от названия страницы. При клике мы перейдем в зону работы текстового редактора, внешне напоминающего , возможно, известного вам редактора WORD.

Панель редактора содержит различные кнопки, позволяющие работать как с текстом, так и с изображениями, таблицами, добавлять флеш-элемнты и многое другое.

Для работы с текстом нам понадобиться второй ряд кнопок, содержащий функции работы с текстом. Их несколько, но для правильной работы нам понадобяться только следующие:

• Преобразование тектса в полужирный
• Преобразование текста в наклонный
• Создание нумерованных и ненумерованных списков

Это те кнопки которые нужны нам для работы!

Дело в том, что , как говорилось ранее, страницы сайта имеют определенный стиль оформления заданный дизайном. Все стили для оформления текста, заголовков и прочих элементов прописываются в отдельном файле – стилевой таблице CSS.

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

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

Итак, мы запомнили первое правило: для форматирования текста использовать только следующие функции:

1. Выделение текста полужирным
2. Выделение курсивом
3. Создание списков

Давайте теперь приступим к добавлению текста.
Текст, как мы уже с вами говорили – это часть веб-страницы. Он также представлен специальным языком гипертекстовой разметки – HTML. Как это увидеть? Посмотрите внимательно на редактор. Он может работать в двух режимах: Визуальный режим и режим отображения текста в формате HTML.

То есть все, что мы делаем в визуальном редакторе с текстом и прочими элементами на самом деле оформляется кодом языка гипертекстовой разметки HTML. Если переключиться в режим работы HTML, то можно увидеть, что текст оформлен специальными элементами – ТЭГАМИ. Так, например, абзац оформляется при помощи тега <p> - начало и конец абзаца.

Для чего нам надо это понимать?
Первое, для чего нам может понадобиться режим HTML – это для вставки текста и WORD. Да, именно для этого! Почему?

Давайте посмотрим на то, как вы бы вставляли текст скопированный из WORD не зная всего того,  что мы с вами сейчас обсуждаем. Вы бы скопировали необходимый вам текст, вставили бы его в режиме визуального редактора и не знали бы то, что вместе с текстом скопировали из WORD массу лишних элементов – того «мусора» о котором мы уже с вами говорили. Если заглянуть на страницу в режиме HTML, то можно увидеть, что текст зажат в тиски объемного кода, который просто захламляет собою всю страницу.

Более того, перейдя на сайт, вы обнаружите, что текст выбивается за рамки стиля оформления страницы и совсем не вписывается в концепцию дизайна. Это случилось потому, что вместе с текстом скопированным из WORD , вы вставили все стили оформления данного текста: тип шрифта, его размер, цвет и тип написания.

*Примечание: последние версии визуального редактора позволяют автоматически очищать текст скопированный из Word от лишних тегов. Однако, настоятельно рекомендую все таки воспользоваться режимом HTML и вставлять скопированный текс через него.

Как от этого избавиться?
Для того, чтобы не копировать то количество лишних невидимых символов из WORD, следует перейти в режим работы редактора – HTML и произвести вставку текста находясь в данном режиме.

После этого перейти в режим визуального редактора и аккуратно разбить текст на логические блоки: абзацы, оформить заголовки. Давайте это сделаем.

Проверим отображение текста в режиме HTML, убедимся, что лишние элементы отсутствуют. Сохраним нашу страницу и посмотрим ее отображение на сайте.

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

Теперь необходимо произвести дополнительное оформление текста заголовками. Понятные броские заголовки крайне важны как для печатных изданий так и для сайта. Для веб страницы есть правило использования заголовков. На языке HTML заголовки оформляются тегами <h1> <h2> <h3> <h4> <h5> <h6>

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

Подзаголовков <h2>  и  т.д. в тексте, в отличие от главного заголовка, может быть сколько угодно. Советую по возможности разбивать ваш текст на логические блоки оформленные подзаголовками. Они хорошо читаются, привлекают внимание и облегчают чтение и восприятие информации со страницы сайта.

Проверяем оформление заголовков в режиме HTML. Сохраняем страницу и смотрим ее отображение на сайте.

Еще:
Мы говорили о том, что можем использовать выделение на сайте текста жирным или наклонным. Внимательно посмотрим на текст, и выделим значимые фразы. Важно не переусердствовать и выделять только то, что действительно важно.

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

Не рекомендую выделять текст подчеркиванием. Подчеркивание – это атрибут ссылки и подчеркнутый текст может ввести посетителя вашего сайта в заблуждение.
 

Что еще важно сделать для страницы сайта?

1. Важно прописать заголовки
2. Важно задать альтернативный адрес страницы

Заголовок страницы отображается в шапке браузера, а также является важной частью при отображения сайта в результатах поиска в Яндексе, Гугле и др.поисковых системах.

Задать заголовк страницы можно в ее настройках. Вкладка SEO располагает несколькими графами:
TITLE – заголовок страницы
KEYWORDS – ключевые слова
DESCRIPTION – краткий анонс страницы

Два из этих трех параметров вам сейчас особо понадобятся, это TITLE и DESCRIPTION. Пропишем TITLE. На самом деле написание краткого, емкого и привлекательного заголовка – это целое искусство. Именно он будет соблазнять вашего посетителя, когда сайт появиться в результатах поиска. Отнеситесь к заголовку со всей серьезностью. Заголовок должен быть не более 60 символов и содержать ключевое слово, которому посвящена данная страница сайта.
Также следует прописать DESCRIPTION – краткий анонс страницы. В анонсе также необходимо повторить ключевое слово и дать поянтное краткое описание чему посвящена данная страница. Это описание появится в поисковой системе ГУГЛ при результатах поиска по системе.

Зададим человекопонятный URL странице. Самое интересное, что современные поисковые системы стали учитывать слова, которые встречаются в названиях страниц и стоит также стараться добавить ключевых слов в написание. Если название страницы состоит из двух слов, то их следует соединять дефисом. Никогда не используйте пробел для разделения слов!

Подведем итоги

Ну вот, на этом мы завершим оформление страницы. Мы сделали все, чтобы наша страница отвечала минимальным требованиям:

1. Текст акукратно и корректно добавлен без наличия лишних тегов.
2. Текст правильно оформлен заголовками.
3. Указан заголовок веб-страницы и он корректно отображается в браузере.
4. Прописан DESCRIPTION
5. Для страницы указан человекопонятный URL.

Желаю успехов!
Ольга Мелех,
студия веб-дизайна "Интелвебс"