Наука + Бизнес = $$$

Карта Сайта

Суббота, 21.10.2017, 11:36
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №2: форматирование текста в HTML

Форматирование текста в HTML

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


Заголовки и их уровни

  • <h1> - парный тег, которым выделяют главный заголовок. Цифра в этом теге означает приоритет заголовка, к примеру, тегом <h2> выделяются подзаголовки второго уровня.

Всего заголовки имеют 6 уровней важности:

  • <h1> ... </h1> - главный заголовок;
  • <h2> ... </h2> - подзаголовок 2-ого уровня;
  • <h3> ... </h3> - подзаголовок 3-его уровня;
  • <h4> ... </h4> - подзаголовок 4-ого уровня;
  • <h5> ... </h5> - подзаголовок 5-ого уровня;
  • <h6> ... </h6> - подзаголовок 6-ого уровня.

Стоит заметить, теги заголовков просматривается поисковыми роботами, так что в них лучше заключить основные ключевые фразы. Данные теги имеют параметр горизонтального выравнивания - align, в котором следует указать значение выравнивания текста, который находится между тегами <h?></h?>. Параметр align имеет следующие значения:

  • left - выравнивание по левой стороне (установлен по умолчанию)
  • right - выравнивание по правой стороне
  • center - выравнивание по центру
  • justify - выравнивание по ширине

Значения параметров берутся в кавычки "". Рассмотрим вид заголовков с разными уровнями и параметрами горизонтального выравнивания на примере:

<html>
   <head>
       <title>Моя первая html страничка</title>
    </head>
    <body>

<h1 align="center">Главный заголовок</h1>
<h2 align="right">Подзаголовок 2-ого уровня</h2>
<h3>Подзаголовок 3-его уровня</h3>
<h4 align="justify">Подзаголовок 4-ого уровня</h4>
<h5 align="left">Подзаголовок 5-ого уровня</h5>
<h6 align="center">Подзаголовок 6-ого уровня</h6>

    </body>
</html>

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


Абзац и перенос на новую строку

  • <p> - парный тег, которым необходимо выделять абзацы. Тег отделяет абзац сверху и снизу одной строкой. Также имеет параметр align со всеми его значениями. Например, создадим 3 абзаца с различными параметрами:

    <html>
       <head>
           <title>Абзацы</title>
        </head>
        <body>

    <p>Данный абзац будет выравнен по левому краю страницы, также будет отделен одной строкой сверху и одной строкой снизу, от остального содержимого данной страницы.</p>

    <p align="right">Данный абзац будет выравнен по правому краю страницы, с помощью атрибута align="right", также будет отделен одной строкой сверху и одной строкой снизу, от остального содержимого данной страницы.</p>

    <p align="center">Данный абзац будет выравнен по центру страницы, с помощью атрибута align="center", также будет отделен одной строкой сверху и одной строкой снизу, от остального содержимого данной страницы.</p>

        </body>
    </html>

  • <br> - этот тег служит для принудительного переноса содержимого страница на следующую строку. После этого тега текст всегда начинается с новой строки, другими словами тег имитирует нажатие клавиши "Enter", если работать в текстовом редакторе. Этот тег не парный, так что нет необходимости его закрывать. Рассмотрим работу данного тега на примере:

    <html>
       <head>
           <title>Перенос на новую строку</title>
        </head>
        <body>

    тег <br> переноса <br> на следующую <br> строку.

        </body>
    </html>

    Стиль текста

  • <strong> или <b> - эти парные теги служат для выделения фрагментов текста жирным шрифтом.
  • <cite> или <em> - такие парные теги выделяют фрагменты текста курсивом. Работают аналогично предыдущим тегам.
  • <ins> или <u> - данные парные теги служат для подчеркивания определенных фрагментов текста.
  • Рассмотрим данные теги на примере:

    <html>
       <head>
           <title>Стиль текста</title>
        </head>
        <body>

    <strong>Жирный шрифт</strong><br>
    <cite>Курсив</cite><br>
    <ins>Подчеркнутый текст</ins>

        </body>
    </html>

  • <font> - этот парный тег сам по себе ничего не дает, однако задает следующие важные параметры для форматирования текста:
  • face - задает название шрифта(можно использовать несколько, в случае, если шрифт не поддерживается браузером, будет использован шрифт следующий по списку в теге font).
  • size - задает размер шрифта (размеры шрифта бывают со значением от 1 до 7, по умолчание стоит 3).
  • color - задает цвет шрифта (цвет шрифта по умолчанию - черный)

Цвет можно задать несколькими способами, самый простой это указать название цвета, например: <font color="red">Красный текст</font>, также можно воспользоваться Таблицей кодов цветов, в которой имеется большой выбор всевозможных цветов. У каждого цвета имеется свой оригинальный шестнадцатеричный код, который и используется, например: <font color="#CDCD00"> ваш цвет </font>.

Рассмотрим такой пример:

<html>
   <head>
       <title>Стиль текста</title>
    </head>
    <body>

<font face="Tahoma">Шрифт Tahoma</font><br>
<font face="Courier New">Шрифт Courier New</font><br><br>

<font size="1">Размер шрифта 1</font><br>
<font size="5">Размер шрифта 5</font><br><br>

<font color="red">Красный шрифт</font><br>
<font color="#CDCD00">Цвет указан с помощью кода</font><br><br>

    </body>
</html>

Комбинирование тегов форматирования текстов

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

<html>
   <head>
      <title>html страничка</title> </head>
   <body>
      <h1 align="center">Главный заголовок по центру</h1>
      <p align="center"><strong>Всем<cite> Привет. Этот текст жирный с курсивом, <ins>а сейчас еще и подчеркнутый. Да и вообще данный абзац расположен по центру.
          </ins>
          </cite>
          </strong>
      </p>
       <p>
           <font face="calibri" color="green" size="4">
Текст написан шрифтом калибри, имеет зеленый цвет, а также размер 4, его также можно сделать<strong> жирным,</strong> или <em>курсивом. Также можно</em><br>перенести его<br>на следующую строку
           </font>
       </p>
        <p align="right">
Текст выравнивается по правой стороне. Сделать красным? <font color="red" size="3">
Без проблем. Подчеркнуть? <u>Пожалуйста </u>
            </font>
        </p>
   </body>
</html>

Менее популярные теги форматирования текста

Следующие теги применяются крайне редко, однако возможно вам они пригодятся:

  • <center> - парный тег, который выводит любой объект на центр страницы.
  • <del> - парный тег, который перечеркивает выделенный им текст.
  • <q> - берет цитату или название в "кавычки"
  • <blockquote> - в этот парный тег берут важные блоки или длинные цитаты. Отображается такой текст с небольшими отступами с левой и правой стороны.
  • <tt> - этот парный тег имитирует шрифт печатной машинки

Вставка горизонтальных линий

  • <hr> - создает горизонтальную линию, с помощью которой можно отделить один раздел веб-страницы от другого. Тег отступает одну строку, создает горизонтальную линию и переходит на следующую строку. Тег <hr> имеет следующие параметры:
  • align - выравнивает линию в зависимости от заданного значения. left-по левой стороне, right-по правой, center-по центру.
  • width - задает длину линии в пикселах или % от общей ширины окна.
  • size - задает толщину линии в пикселах.
  • color - изменяет цвет линии (по умолчанию черный)
  • noshade - отменяет отбрасываемую тень линии
Для примера создадим несколько линий с различными параметрами:
<html>
   <head>
       <title>Горизонтальные линии</title>
    </head>
    <body>

Тег hr по умолчанию: <hr>
Розовая линия находится с левой стороны, толщина линии 4 пиксела и занимает 60% от ширины окна: <hr align="left" color="pink" size="4" width="60%">
Красная линия находится по центру окна, имеет толщину 1 пиксела, и имеет длину 300 пикселей: <hr align="center" color="red" size="1" width="300">

    </body>
</html>

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


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru