Подписаться на обновления блога?

Да

Нет

Картинка 3D коробки

Узнать больше

895

Вся правда о заработке на блогах

Этот БЕСПЛАТНЫЙ обучающий курс для тех, кто интересуется заработком на блоге.

Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

  • Картинка 3D коробки

    Узнать больше

    895

    Вся правда о заработке на блогах

    Этот БЕСПЛАТНЫЙ обучающий курс для тех, кто интересуется заработком на блоге.

    Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

  • Узнать больше

    899

    Как заработать в интернете продавая информацию

    Этот БЕСПЛАТНЫЙ обучающий курс по заработку в интернете для тех, кто хочет работать, используя свои знания и опыт.

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

  • Узнать больше

    890

    Как заработать чайнику?

    Многие задаются вопросом, как зарабатывать в интернете? Как начать работать на себя, а не на дядю?

    В БЕСПЛАТНОМ видеокурсе "Как заработать чайнику?", вы найдете много ответов на эти вопросы, которые получите от успешного практика в этой области.

  • Узнать больше

    903

    Создать сайт за 1 час!

    Хорошо известно, что для того, чтобы успешно работать в интернете необходим свой интернет-ресурс.

    Из БЕСПЛАТНОГО видеокурса "Как создать сайт за 1 час" вы узнаете, как можно достаточно быстро сделать бесплатный сайт несложным способом с нуля.

  • Узнать больше

    904

    Как начать зарабатывать на партнерских программах

    Работа на партнерских программах является одной из самых популярных видов заработка.

    БЕСПЛАТНЙ видеокурс "Как начать зарабатывать на партнерских программах" поможет вам освоить этот интересный и эффективный способ работы в интернете.

  • Узнать больше

    905

    ИНФОБИЗНЕС по модели Евгения Попова

    Этот БЕСПЛАТНЫЙ обучающий курс предназначен для тех, кто хочет познакомиться с одним из лучших видов заработка в интернете.

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

  • Узнать больше

    922

    HTML базовый курс

    БЕСПЛАТНЫЙ обучающий курс предназначен тем, кто делает первые шаги в сайтостроении.

    В этом видеокурсе в доступной форме даются основы языка HTML, являющегося незаменимым при составлении веб-страниц.

  • Узнать больше

    924

    CSS базовый курс

    Этот БЕСПЛАТНЫЙ обучающий курс поможет разобраться в вопросах сайтостроения при создании своего сайта.

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

  • Узнать больше

    926

    Домен и хостинг

    В этом БЕСПЛАТНОМ обучающем курсе рассказывается как разместить в сети свой вновь созданный интернет-ресурс.

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

  • Узнать больше

    927

    Фотошоп для начинающих (бесплатная версия)

    Этот БЕСПЛАТНЫЙ обучающий курс будет полезен тем, хочет освоить работу с графическим редактором "Фотошоп".

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

  • Узнать больше

    929

    Видеосамоучитель GIMP

    Данный видеокурс поможет освоить работу с дизайном сайта при использовании БЕСПЛАТНОГО графического редактора GIMP.

    В нем можно узнать все основные вопросы по работе с редактором, а именно: что такое слои, как с ними работать, как работать с базовыми инструментами и как работать с фильтрами.

Бесплатные видеокурсы!

Хотите узнать как зарабатывать в интернете и как бесплатно сделать сайт для своей работы, ничего не потратив на обучение?

Здесь Вы можете познакомиться с проверенными способами работы в интернете в БЕСПЛАТНЫХ обучающих курсах по заработку и сайтостроению в разделе Бесплатные Сборника видеокурсов.

Вы здесь: Главная → Как сделать сайт → Контент → Оформляем текст статей сайта

Знак папки 2Текущее состояние создаваемого сайта

Свернуть

Знак папки 1 Все статьи cборника "Сделай сайт своими руками с нуля бесплатно"


Автор: / Дата:

Оформляем текст статей сайта

Здравствуйте уважаемый посетитель!

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

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

Содержание


  • Оформляем заголовок статьи
  • Структурируем текст по содержанию
  • Формируем оглавление (содержание) используя HTML якоря
  • Формируем подзаголовки
  • Выделяем разделы статьи
  • Исходные файлы сайта

Оформляем заголовок статьи


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

Как известно, основной заголовок должен прописываться тегом <h1>, который имеет самый значимый уровень. При этом <h1> должен присутствовать в тексе статьи только один раз. В остальных подзаголовках должны использоваться теги с менее значимые уровнями в пределах от <h2> до <h6>.

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

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

Для начала заключим заголовок в тег <h1>.

  1. <h1>Что такое противоугонная маркировка стекол и как она работает</h1>

Рис.1 Заключение заголовка в тег <h1>

И теперь рассмотрим как можно подобрать нестандартный шрифт и подключить его к HTML-страницам.

Для этого воспользуемся сервисом "Google Fonts", в котором имеется большая коллекция всевозможных шрифтов. В начале перейдем по ссылке www.google/fonts и выберем из возможных вариантов подходящий шрифт. При этом, для того, чтобы упростить поиск, можно воспользоваться имеющимся в сервисе фильтром. Ниже на скриншоте показан вариант выбора с исключением шрифтов с засечками и поддерживающих кириллицу.

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

Рис.1 фрагмент с возможными вариантами нестандартного шрифта

В случае, если заблаговременно известно наименование шрифта, то несложно будет его найти через соответствующее поле, как показано на следующем скриншоте. Где в качестве примера через поиск найден шрифт "Comfortaa", который будет использован в дальнейшем при оформлении заголовка.

Для увеличения / уменьшения размера изображения кликните по картинке
Поиск шрифта по наименованию

Рис.2 Поиск шрифта по наименованию

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

Для увеличения / уменьшения размера изображения кликните по картинке
Выбор шрифта

Рис.3 Выбор шрифта

После чего в нижней части должно появиться окно с выбранным шрифтом.

Для увеличения / уменьшения размера изображения кликните по картинке
Окно с выбранным шрифтом

Рис.4 Окно с выбранным шрифтом

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

  • метатег <link> для вставки в заголовок <head> HTML-страницы;
  • соответствующее выбранному шрифту свойство family-name для назначения стилей CSS.
Для увеличения / уменьшения размера изображения кликните по картинке
Данные для использования выбранного шрифта

Рис.5 Данные для использования выбранного шрифта

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

Для этого требуется указать в заголовке <head> файла "index.php" шаблона главной страницы ссылку на сервер Google, с которого будет скачиваться необходимый шрифт при загрузках HTML-страниц.

Ниже показано, как к уже имеющимся на данный момент метатегам заголовка <head> добавлен полученный код со ссылкой на сервер Google.

  1. <head>

  2. <meta charset="utf-8">

  3. <title><?php echo $titlepage_add;?></title>

  4. <meta name="Description" content="<?php echo $description_add;?>">

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6. <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

  7. <link rel="stylesheet" type="text/css" href="/styles/main.css">

  8. <link rel="stylesheet" type="text/css" href="/styles/flexslider.css">

  9. <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">

  10. <script src="/js/jquery-3.1.1.min.js" </script>

  11. <script src="/js/functions.js" </script>

  12. <script src="/js/jquery.easing.1.3.js" </script>

  13. <script src="/js/jquery.flexslider.js" </script>

  14. <script src="/js/flexslider_script.js" </script>

  15. </head>

Рис.6 Добавления элемента <link> в заголовок <head> HTML-страницы;

И теперь, с помощью стилей CSS, включая значение свойства family-name, полученное для выбранного шрифта, оформим заголовок исходя определенных ранее требований.

Следует отметить, что на этапе верстки при формировании области контента для уровней заголовков с <h1> до <h3> временно был сформирован лишь один набор стилей CSS, который на тот момент был вполне достаточным для размещения тестового текста. Сейчас же будем для каждого конкретного вида назначать свойства CSS в соответствии со их значимостью.

Исходя из этого, для тега <h1> заголовка статьи добавим в файл "main.css", расположенный в папке "styles" следующий CSS-код. (Для удобства поиска данного фрагмента CSS-кода в файле "main.css", размещенном в дополнительных материалах, приведенная нумерация строк использована в соответствии с общей таблицей CSS).

  1. main h1 {

  2. font-size: 1.5625em;

  3. font-style: normal;

  4. font-weight: normal;

  5. color: #006;

  6. font-family: 'Comfortaa', cursive;

  7. text-shadow: 1px 1px 0px #eee, 2px 2px 2px #222;

  8. text-align: center;

  9. margin-bottom: 1em;

  10. }

Рис.7 Оформление заголовка с помощью стилей CSS

Здесь видно, что в строке 309 для свойства family-name определено то значение, которое мы получили ране при выборе шрифта с помощью сервиса "Google Fonts".

А кроме этого, используя свойство text-shadow (поз.310) к буквам заголовка добавлены две тени, с начала светлая, затем темная. Это сделано для того, чтобы, как и предполагалось, попытаться в какой-то мере преобразить внешний вид заголовка, придав ему некоторую объемность.

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Оформленный заголовок статьи

Рис.8 Скриншот страницы с оформленным заголовком

Как видно, теперь основной заголовок статьи принял несколько отличающийся от всего текста объемный вид, и на общем фоне достаточно хорошо выделяется.

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

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

Структурируем текст по содержанию


Следует отметить, что порядок написания статей у разных авторов может существенно отличаться. Одни создают свой пост в основном лишь отталкиваясь от темы и следуя по течению своих мыслей. Другие же, наоборот, в начале решают каким будет содержание статьи с учетом ее структуры, предварительно определив основные ее части (разделы). А уж затем излагают суть, придерживаясь сформированного плана.

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

Хотя я отношусь ко второй части и обычно пишу статьи, заведомо представляя, из каких частей они должны состоять, тем не менее, для наглядности, ранее в файле "main.php" сознательно был размещен неструктурированный текст в виде обычных абзацев, как можно увидеть на рис.1. И вот такой текст требуется в первую очередь структурировать по содержанию.

Как вариант, исходя из содержания, данную статью можно разбить на следующие логические части, обозначив их такими подзаголовками:

  • Зачем нужна противоугонная маркировка
  • Почему противоугонная маркировка действительно работает
  • Дополнительные преимущества противоугонной маркировки
  • Какие существуют способы нанесения маркировки и ориентировочная ее стоимость

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

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

Формируем оглавление (содержание) используя HTML якоря


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

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

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

Механизм создания якоря по сути состоит из двух частей. В начале при помощи атрибута "id", в нужном месте необходимо поставить метку (закладку). При этом присвоенное имя закладки должно быть уникальным, составленным из русских или латинских букв.

А затем, в оглавлении с помощью тега <a> следует поставить ссылку на эту метку, используя ее имя с добавлением символа решётки #.

Вот и все, что требуется для создания в оглавлении гиперссылок на разделы статьи. Более подробно об HTML якорях можно ознакомиться в соответствующей справочной литературе, например в одном из разделов интернет-ресурса WebReference.ru.

скриншот 13

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

  • <h2 id="metka_1">Зачем нужна противоугонная маркировка</h2>
  • <a href="#metka_1">Зачем нужна противоугонная маркировка</a>

Как видно, здесь закладка с именем "metka_1" вставлена в тег <h2> первого подзаголовка. А в гиперссылке используется то же самое имя, но уже с символом решётки #.

И таким образом, кликнув по элементу оглавления, пользователь автоматически попадет на то место, где начинается выбранный раздел с размещенной закладкой.

Как это будет выглядеть в целом для оглавления, можно посмотреть на следующем фрагменте HTML-кода. (Приведенная нумерация строк использована в соответствии с общим HTML-кодом, размещенным в файле "main.php" каталога "articles", который можно найти в дополнительных материалах).

  1. <div class="catalog">

  2. <p><a href="#metka_1">Зачем нужна противоугонная маркировка</a></p>

  3. <p><a href="#metka_2">Почему противоугонная маркировка действительно работает</a></p>

  4. <p><a href="#metka_3">Дополнительные преимущества противоугонной маркировки</a></p>

  5. <p><a href="#metka_4">Какие существуют способы нанесения маркировки и ориентировочная ее стоимость</a></p>

  6. </div>

Рис.9 Формирование оглавления (содержания)

Следует обратить внимание на то, что для упорядочения гиперссылок здесь используется отдельный контейнер <div> с классом catalog, в элементах которого размещены теги <a>. И таким образом, используя стили CSS можно отформатировать пункты оглавления, задав необходимые отступы.

CSS-код, относящийся к списку оглавления, приведен в следующем фрагменте таблицы CSS.

  1. .catalog {

  2. text-indent: 0;

  3. padding-left: .8125em;

  4. }

Рис.10 CSS-код списка оглавления

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

Для увеличения / уменьшения размера изображения кликните по картинке
Содержание статьи

Рис.11 Скиншот содержания статьи

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

Формируем подзаголовки


После того, как мы разбили статью на разделы и создали оглавление, теперь можно сформировать подзаголовки разделов и разместить в них HTML закладки.

Как известно, в HTML теги заголовков имет разные уровни значимости, от <h1> до <h6>. Для <h1> ранее мы определили его в качестве основного заголовка.

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

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

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

  1. <h1>Что такое противоугонная маркировка стекол и как она работает</h1>

  2. <p>Здравствуйте уважаемый посетитель!</p>

  3. <p>Здесь Вы можете узнать о том, почему противоугонная маркировка автомобилей является надежной защитой автомобиля от угона и как ее можно сделать.</p>

  4. <h2>Содержание</h1>

  5. <hr>

  6. <div class="catalog">

  7. <p><a href="#metka_1">Зачем нужна противоугонная маркировка</a></p>

  8. <p><a href="#metka_2">Почему противоугонная маркировка действительно работает</a></p>

  9. <p><a href="#metka_3">Дополнительные преимущества противоугонной маркировки</a></p>

  10. <p><a href="#metka_4">Какие существуют способы нанесения маркировки и ориентировочная ее стоимость</a></p>

  11. </div>

  12. <h2 id="metka_1">Зачем нужна противоугонная маркировка</h1>

  13. <hr>

  14. <p>В настоящее время угон автомобилей и кража дорогостоящих комплектующих стало одним из самых распространенных преступлений в России. И трудно возразить тем, кто утверждает ...</p>

Рис.12 Формирование подзаголовков <h2>

Наверное, какого-либо дополнительного пояснения к этому фрагменту HTML-кода не требуется, так как все используемые здесь элементы ранее подробно рассматривались на этапе верстки сайта.

Можно лишь указать на закладку HTML якоря, которая размещена в теге <h2> с именем "#metka_1" в подзаголовке первого раздела статьи (поз.13).

А также обратить внимание на то, что здесь к заголовкам второго уровня <h2> добавлена линия <hr> (поз.6,14). Что позволяет несколько лучше показать начало разделов статей.

Таким образом необходимую разметку подзаголовков мы выполнили, осталось их лишь оформить с помощью стилей CSS.

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

Например, если мы планируем использовать в качестве подзаголовков все возможные теги от <h2> до <h6>, то это один вариант. При котором требуется учитывать взаимосвязь внешнего вида (размер, выделение и т.д.) для такого значительного количества элементов.

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

В нашем случае в качестве подзаголовков разделов статей будем предполагать использовать лишь заголовки 2-го и 3-его уровней - теги <h2> и <h3>. Это означает, что при формировании контента не будут предусматриваться заголовки ниже 3-его уровня. Возможно, что этого вполне будет достаточно для структуризации всех будущих статей сайта.

Поэтому для оформления внешнего вида подзаголовков назначим стили CSS только для <h2> и <h3>. Если же окажется, что этого будет недостаточно, в дальнейшем, в случае использования более сложной структуры контента, добавим и другие варианты.

Учитывая, что ранее для заголовков основного содержания уже были определены свойства CSS, то это несколько упрощает задачу. Так как для оформления подзаголовков с тегом <h2> будет достаточно оставить существующие свойства CSS, а новые отдельные свойства добавить лишь для <h3>.

Вариант CSS-кода, определяющего оформление подзаголовков <h2> и <h3> представлен в следующей таблице.

  1. main h2 {

  2. font-size: 1.1875em;

  3. font-style: italic;

  4. color: #bd072e;

  5. font-weight: bold;

  6. }

  7. main hr {>

  8. height: .0625em;

  9. background: #bd072e;

  10. margin: .3125em 0 .625em 0;

  11. box-shadow: 0 0 .0625em 0 #bd072e;

  12. }

  13. main h3 {

  14. font-size: 1.0625em;

  15. font-style: italic;

  16. color: #a76403;

  17. font-weight: bold;

  18. text-decoration: underline;

  19. margin-bottom: .5em;

  20. }

Рис.13 CSS-код подзаголовков <h2> и <h3>

Здесь более темным фоном обозначены строки с ранее назначенными свойствами CSS на стадии верстки. В данном случае они относятся к подзаголовкам <h2> и к дополняющим их линиям <hr>. Поэтому, при необходимости можно более подробно посмотреть их назначение в соответствующей статье, где довольно подробно рассмотрены эти вопросы.

Что касается подзаголовков с уровнем <h3>, то как видно в них в отличие от <h2> лишь несколько уменьшен размер шрифта (поз.327) и изменен цвет (поз.329).

Кроме того, в качестве подчеркивающей линии здесь используется свойство text-decoration со значением underline (поз.331). Это обусловлено тем, что тег <h3> менее значим. И в этом случае, наверное, не стоит использовать дополнительную отдельную линию, как это сделано в заголовке второго уровня в теге <h2>.

Для увеличения / уменьшения размера изображения кликните по картинке
Фрагмент текста с подзаголовками

Рис.14 Фрагмент текста с подзаголовками

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

Выделяем разделы статьи


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

Если посмотреть сейчас на текст, изображенный на рис.9, то можно увидеть, что все его части, такие как вводная часть, оглавление, другие разделы, следуют друг за другом достаточно слитно без какого-либо видимого разделения. Что, естественно, не очень хорошо для его восприятия.

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

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

Таким образом, с учетом соответствующих дополнений HTML-код рассматриваемого выше фрагмента примет следующий вид.

  1. <h1 id="metka_0">Что такое противоугонная маркировка стекол и как она работает</h1>

  2. <div class="chapter">

  3. <p>Здравствуйте уважаемый посетитель!</p>

  4. <p>Здесь Вы можете узнать о том, почему противоугонная маркировка автомобилей является надежной защитой автомобиля от угона и как ее можно сделать.</p>

  5. </div>

  6. <div class="chapter">

  7. <h2>Содержание</h1>

  8. <hr>

  9. <div class="catalog">

  10. <p><a href="#metka_1">Зачем нужна противоугонная маркировка</a></p>

  11. <p><a href="#metka_2">Почему противоугонная маркировка действительно работает</a></p>

  12. <p><a href="#metka_3">Дополнительные преимущества противоугонной маркировки</a></p>

  13. <p><a href="#metka_4">Какие существуют способы нанесения маркировки и ориентировочная ее стоимость</a></p>

  14. </div>

  15. </div>

  16. <div class="chapter">

  17. <h2 id="metka_1">Зачем нужна противоугонная маркировка</h1>

  18. <hr>

  19. <p>В настоящее время угон автомобилей и кража дорогостоящих комплектующих стало одним из самых распространенных преступлений в России. И трудно возразить тем, кто утверждает ...</p>

  20. <p>...</p>

  21. <p>При этом, чтобы снизить вероятность не только угона, но и кражи дорогостоящих быстросъемных комплектующих, противоугонная маркировка может наноситься и на другие элементы, например, фары и зеркала.</p>

  22. </div>

  23. <div class="start"><a href="#metka_0">В начало</a></div>

Рис.15 Выделение логически законченных частей текста

Как видно, теперь каждая часть текста заключена в отдельный контейнер <div>, что позволяет используя стили CSS лучшее отделить их друг от друга.

Кроме того, в конце каждого раздела включены гиперссылки (поз.24) на закладку с именем "#metka_0", которая помещена в заголовок <h1> (поз.2). И при каждом переходе по этим ссылкам можно снова возвращаться к началу текста статьи.

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

  1. .chapter {

  2. margin-bottom: 1.5em;

  3. }

  4. .start {

  5. text-align: right;

  6. padding: 0.25em 0 1em 0;

  7. }

Рис.16 CSS-код выделения разделов статьи

Как видно, для контейнера <div> с классом .chapter расстояния между выделяемыми частями здесь заданы с помощью внешнего отступа снизу в размере 1.5em (поз.344).

Что же касается гиперссылки на начало статьи, помещенной в элемент с классом .start, то она свойством text-align выровнена в право (поз.347) с заданными отступами (поз.348).

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

Для увеличения / уменьшения размера изображения кликните по картинке
Скриншот оформленного текста

Рис.17 Скриншот оформленного текста

Таким образом мы выполнили одни из основных преобразований текста и сформировали такие важные элементы, как разделы, оглавление, заголовки, гиперссылки.

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

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать бесплатно в дополнительных материалах:

С уважением, Николай Гришин

Читать дальше


Подписка


Здесь вы можете подписаться на получение уведомлений о выходе новых статей блога.

Необходимо отметить, что данные об e-mail надежно защищены (работа сайта обеспечивается только через защищенные соединения по протоколу SSL) и не предназначены для использования третьими лицами.

Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments

Социальные сети


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

Другие статьи из рубрики "Как сделать сайт"


Показать больше


  • Google+ Опубликованные статьи можно также смотреть в подборках Google+