Основы работы с HTML

Форматирование символов

Разбить на страницы
Показывать лекцию целиком

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

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

<html>
<body>
<p>
Если необходимо чтобы к тексту было применено какое-либо 
форматирование, например, выделение <b>полужирным</b>
или <i>курсивом</i>, необходимо использовать 
соответствующие теги форматирования. 
При этом форматируемый текст помещается между тегами.
</p>
</body>
</html>

Пример выполнения данного HTML-кода

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

<html>
<body>
<p><strong>Данный параграф отформатирован тегом strong</strong></p>
<p><b>А этот тегом b, внешне они не отличаются.</b></p>
<p><em>Данный параграф отформатирован тегом em</em></p>
<p><i>А этот тегом i, внешне они не отличаются.</i></p>
</body>
</html>

Пример выполнения данного HTML-кода

Еще одной парой тегов форматирования являются теги <big> и <small>. Первый выводит текст увеличенным по сравнению со стандартным, а второй уменьшенным. Вместо тега <big> рекомендуется использовать теги <strong> или теги заголовков, так как они несут и структурную нагрузку. Тег <small> является тегом по смыслу противоположным <strong> и <em>, он деакцентирует внимание на тексте. По поводу применения этого тега следует сделать одно замечание: на разных компьютерах установлено различное разрешение экрана и в браузере может быть установлен различный размер основного шрифта и сильное уменьшение текста может сделать текст не читаемым. Следующий пример демонстрирует вид текста, отформатированного с помощью этих тегов.

<html>
<body>
<p><big>Данный параграф отформатирован тегом big </big></p>
<p><small>Данный параграф отформатирован тегом small </small></p>
<p>А в данном параграфе теги не применяются</p>
</body>
</html>

Пример выполнения данного HTML-кода

Другой парой полезных тегов являются <sup> - верхний индекс и <sub> - нижний индекс, которые могут быть полезными при написании математических и химических формул. Сравните формулы, набранные различным способом:

<html>
<body>
<p>Формула воды H2O. В данном параграфе формула набрана 
без использования тега sub</p>
<p>Формула воды H<sub>2</sub>O. 
В данном параграфе формула набрана с использованием тега sub 
Формула выглядит более привычно.</p>
<p>2^4=16.
В данном параграфе формула набрана без использования тега sup</p>
<p>2<sup>4</sup>=16. В данном параграфе формула набрана 
с использованием тега sup.
Формула выглядит более привычно.</p>
</body>
</html>

Пример выполнения данного HTML-кода

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

Этот пример показывает, как можно управлять переносами строк и пробелами с помощью тега <pre>.

<html>
<body>

<pre>
Это 
предварительно форматированный текст.
Он сохраняет     как пробелы, 
так и переносы строк.
</pre>
</body>
</html>

Пример выполнения данного HTML-кода

Сравните написание кода программы с применением тега <pre> и без его использования.

<html>
<body>

<pre>
// Данный фрагмент набран с использованием тега pre
for (int i = 1; i < 10; i++)
    {
       printf ("i=%i\n", i);
    }
</pre>

<p>
// Здесь тег pre не применялся
for (int i = 1; i < 10; i++)
    {
       printf ("i=%i\n", i);
    }
</p>

</body>
</html>

Пример выполнения данного HTML-кода

Тег <code> маркирует код компьютерной программы. Браузеры обычно отображают его моноширинным шрифтом. Этот элемент является структурным, поэтому его использование предпочтительней использования тега <tt>, который маркирует моноширинный текст. Также следует отметить, что тег <code> лучше использовать внутри тега <pre>, так как в противном случае, все множественные пробелы будут заменены одним. Тег <kbd> маркирует текст, введенный с клавиатуры. Отображается он также, как и текст внутри тега <code>

<html>
<body>
<p>Данные примеры демонстрируют то, как будет представлен текст 
при использовании разных тегов</p>
<pre><code>
// отформатировано с помощью pre и code
class helloworld {
  public static void main(string[] args) {
    system.out.println("hello world!");
  }
}
</code></pre>

<pre><tt>
// отформатировано с помощью pre и tt
class helloworld {
  public static void main(string[] args) {
    system.out.println("hello world!");
  }
}
</tt></pre>

<code>
// отформатировано с помощью code
class helloworld {
  public static void main(string[] args) {
    system.out.println("hello world!");
  }
}
</code>
<h3>Использование тега kbd</h3>
<p>Сохранить результат <kbd>Да/Нет</kbd></p>
</body>
</html>

Пример выполнения данного HTML-кода

Для маркировки примера вывода программы или скрипта используется тег <samp>.

<html>
<body>
<p>Если в HTML коде встретится ошибка, то будет выдано следующее:
</p><p><samp>c:\sp\bin\nsgmlsu.exe:test.html:4:7:e: element 
"foobar" undefined</samp></p>
</body>
</html>

Пример выполнения данного HTML-кода

Для маркировки переменных используется тег <var>, который обычно отображается курсивом.

<html>
<body>
<p>Версии стандарта HTML обычно маркируются следующим образом
<var>x</var>.<var>у</var>.</p>
</body>
</html>

Пример выполнения данного HTML-кода

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

<html>
<body>
<form method=post action="/cgi-bin/order.cgi">

  <fieldset>
    <legend accesskey=c>Информация о кредитной карте<br></legend>
    <p>
      <label accesskey=v>
        <input type="radio" name="card" value="visa"> Visa
      </label>
      <label accesskey=m>
        <input type="radio" name="card" value="mc"> Mastercard
      </label>
      <br>
      <label accesskey=n>
        Номер: <input type="text" name="number">
      </label>
      <label accesskey=e>
        Срок действия: <input type="text" name="expiry">
      </label>
    </p>
  </fieldset>

  <p>
    <input type="submit" value="Отправить заказ" accesskey=s>
  </p>

  <address>
    Если у вас имеются вопросы по поводу заказа, свяжитесь с нами 
    по адресу <a href="mailto:orders@intuit.ru">orders@intuit.ru</a>,
    Или телефону в офисе (+7 499) 253-9312.
  </address>

</form>
</body>
</html>

Пример выполнения данного HTML-кода

Этот пример показывает, как работать с сокращениями или акронимами.

<html>
<body>

<abbr title="Содружество Независимых Государств">СНГ</abbr>
<br>
<acronym title="World Wide Web">WWW</acronym>

<p>При наведении указателя мыши на акроним или сокращение 
показывается атрибут title.</p>

<p>Это работает по-разному в разных браузерах.</p>

</body>
</html>

Пример выполнения данного HTML-кода

Этот пример показывает, как изменять направление вывода текста.

<html>
<body>

<p>
Если используемый браузер поддерживает двунаправленное 
представление (bdo), то следующая строка будет записана 
справа налево (rtl):
</p>

<bdo dir="rtl">
Здесь какой-то арабский текст 
</bdo>

</body>
</html>

Пример выполнения данного HTML-кода

Этот пример показывает, как использовать длинные и короткие цитаты.

<html>
<body>

Здесь представлена длинная цитата:
<blockquote>
Это длинная цитата. Это длинная цитата. Это длинная цитата. 
Это длинная цитата. Это длинная цитата. 
</blockquote>

Здесь представлена короткая цитата:
<q>
Это короткая цитата
</q>

<p>
Для элемента blockquote браузер вставляет дополнительные 
переносы строки, пустые строки и поля, но элемент q 
не изображается каким-то специальным образом. 
</p>

</body>
</html>

Пример выполнения данного HTML-кода

Этот пример показывает, как пометить текст, который удален или вставлен в документ.

<html>
<body>
<p>
дюжина означает 
<del>двадцать</del> 
<ins>двенадцать</ins> 
частей
</p>
<p>
Большинство браузеров будет зачеркивать удаленный текст 
и подчеркивать вставленный текст.
</p>
<p>
Некоторые старые браузеры будут выводить удаленный 
или вставленный текст как обычный текст.
</p>
</body>
</html>

Пример выполнения данного HTML-кода

Исходный код HTML-документа

Полезно изучать код Web-страниц, сделанных другими. Такую возможность предоставляют все популярные браузеры. Для этого в меню View ("Вид") браузера следует выбрать Source ("Исходный код") или Page Source ("Код страницы"). Откроется окно, в котором будет показан фактический код HTML страницы.

Таблица тегов управления формой отображения
ТегОписание
<b> Задает жирный текст
<big> Относительное увеличение текста
<em> Выделяет текст (обычно курсив)
<i> Задает курсив
<small> Относительное уменьшение текста
<strong> Акцентирует текст (обычно жирный)
<sub> Определяет нижний индекс
<sup> Определяет верхний индекс
<ins> Вставленный текст
<del> Удаленный текст
<s> Не рекомендуется. Используйте вместо этого <del>
<strike> Не рекомендуется. Используйте вместо этого <del>
<u> Не рекомендуется. Используйте вместо этого стили (style)
Таблица тегов управления типом информации
ТегОписание
<code> Определяет текст кода программы
<kbd> Определяет текст клавиатуры
<samp> Определяет образец кода программы
<tt> Определяет текст телетайпа
<var> Определяет переменную
<pre> Определяет заранее отформатированный текст
<listing> Не рекомендуется. Используйте вместо этого <pre>
<plaintext> Не рекомендуется. Используйте вместо этого <pre>
<xmp> Не рекомендуется. Используйте вместо этого <pre>
Таблица тегов цитирования, сносок и определения
ТегОписание
<abbr> Определяет сокращение
<acronym> Определяет акроним
<address> Определяет элемент address (адрес)
<bdo> Определяет направление вывода текста
<blockquote> Определяет длинную цитату
<q> Определяет короткую цитату
<cite> Определяет сноску на другой материал
<dfn> Используется для определения термина

Символьные элементы

Некоторые символы, такие как символ <, имеют в HTML специальное значение. Поэтому их нельзя использовать в тексте в явном виде. Для их отображения используются символьные элементы CER (Character Entity Reference).

Для представления символа "<" в теле документа HTML используется lt;, а для символа ">" используется gt;. Символьный элемент отображается в виде:

имя_символа;

или

#номер_символа;

Например, знак меньше (<) изображается в виде: lt; или #60;.

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

Следующий пример позволит поэкспериментировать с символьными объектами.

Символьные объекты. Работает только в Internet Explorer.

<html>
<body>

<p>Это символьный объект: #000;</p>

<p>
Попробуйте заменить номер (000) на другой номер (например, 169), 
сохраните измененный текст и перезагрузите страницу  в браузере, 
чтобы увидеть результат. 
</p>

</body>
</html>

Пример выполнения данного HTML-кода

Неразрывный пробел

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

Таблица наиболее часто используемых символьных объектов
РезультатОписаниеИмя объектаНомер объекта
  неразрывный пробел nbsp; #160;
< меньше lt; #60;
> больше gt; #62;
амперсанд amp; #38;
" двойная кавычка quot; #34;
' апостроф apos; #39;
$$\pounds$$ фунт стерлингов pound; #163;
$$\yen$$ йена yen; #165;
§ параграф sect; #167;
© авторское право copy; #169;
® зарегистрированная торговая марка reg; #174;
x умножение times; #215;
$$\div$$ деление divide; #247;

Полный список символьных объектов HTML представлен в Справочнике объектов HTML.

Страницы:

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

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

<html>
<body>
<p>
Если необходимо чтобы к тексту было применено какое-либо 
форматирование, например, выделение <b>полужирным</b>
или <i>курсивом</i>, необходимо использовать 
соответствующие теги форматирования. 
При этом форматируемый текст помещается между тегами.
</p>
</body>
</html>

Пример выполнения данного HTML-кода

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

<html>
<body>
<p><strong>Данный параграф отформатирован тегом strong</strong></p>
<p><b>А этот тегом b, внешне они не отличаются.</b></p>
<p><em>Данный параграф отформатирован тегом em</em></p>
<p><i>А этот тегом i, внешне они не отличаются.</i></p>
</body>
</html>

Пример выполнения данного HTML-кода

Еще одной парой тегов форматирования являются теги <big> и <small>. Первый выводит текст увеличенным по сравнению со стандартным, а второй уменьшенным. Вместо тега <big> рекомендуется использовать теги <strong> или теги заголовков, так как они несут и структурную нагрузку. Тег <small> является тегом по смыслу противоположным <strong> и <em>, он деакцентирует внимание на тексте. По поводу применения этого тега следует сделать одно замечание: на разных компьютерах установлено различное разрешение экрана и в браузере может быть установлен различный размер основного шрифта и сильное уменьшение текста может сделать текст не читаемым. Следующий пример демонстрирует вид текста, отформатированного с помощью этих тегов.

<html>
<body>
<p><big>Данный параграф отформатирован тегом big </big></p>
<p><small>Данный параграф отформатирован тегом small </small></p>
<p>А в данном параграфе теги не применяются</p>
</body>
</html>

Пример выполнения данного HTML-кода

Другой парой полезных тегов являются <sup> - верхний индекс и <sub> - нижний индекс, которые могут быть полезными при написании математических и химических формул. Сравните формулы, набранные различным способом:

<html>
<body>
<p>Формула воды H2O. В данном параграфе формула набрана 
без использования тега sub</p>
<p>Формула воды H<sub>2</sub>O. 
В данном параграфе формула набрана с использованием тега sub 
Формула выглядит более привычно.</p>
<p>2^4=16.
В данном параграфе формула набрана без использования тега sup</p>
<p>2<sup>4</sup>=16. В данном параграфе формула набрана 
с использованием тега sup.
Формула выглядит более привычно.</p>
</body>
</html>

Пример выполнения данного HTML-кода

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

Этот пример показывает, как можно управлять переносами строк и пробелами с помощью тега <pre>.

<html>
<body>

<pre>
Это 
предварительно форматированный текст.
Он сохраняет     как пробелы, 
так и переносы строк.
</pre>
</body>
</html>

Пример выполнения данного HTML-кода

Сравните написание кода программы с применением тега <pre> и без его использования.

<html>
<body>

<pre>
// Данный фрагмент набран с использованием тега pre
for (int i = 1; i < 10; i++)
    {
       printf ("i=%i\n", i);
    }
</pre>

<p>
// Здесь тег pre не применялся
for (int i = 1; i < 10; i++)
    {
       printf ("i=%i\n", i);
    }
</p>

</body>
</html>

Пример выполнения данного HTML-кода

Тег <code> маркирует код компьютерной программы. Браузеры обычно отображают его моноширинным шрифтом. Этот элемент является структурным, поэтому его использование предпочтительней использования тега <tt>, который маркирует моноширинный текст. Также следует отметить, что тег <code> лучше использовать внутри тега <pre>, так как в противном случае, все множественные пробелы будут заменены одним. Тег <kbd> маркирует текст, введенный с клавиатуры. Отображается он также, как и текст внутри тега <code>

<html>
<body>
<p>Данные примеры демонстрируют то, как будет представлен текст 
при использовании разных тегов</p>
<pre><code>
// отформатировано с помощью pre и code
class helloworld {
  public static void main(string[] args) {
    system.out.println("hello world!");
  }
}
</code></pre>

<pre><tt>
// отформатировано с помощью pre и tt
class helloworld {
  public static void main(string[] args) {
    system.out.println("hello world!");
  }
}
</tt></pre>

<code>
// отформатировано с помощью code
class helloworld {
  public static void main(string[] args) {
    system.out.println("hello world!");
  }
}
</code>
<h3>Использование тега kbd</h3>
<p>Сохранить результат <kbd>Да/Нет</kbd></p>
</body>
</html>

Пример выполнения данного HTML-кода

Для маркировки примера вывода программы или скрипта используется тег <samp>.

<html>
<body>
<p>Если в HTML коде встретится ошибка, то будет выдано следующее:
</p><p><samp>c:\sp\bin\nsgmlsu.exe:test.html:4:7:e: element 
"foobar" undefined</samp></p>
</body>
</html>

Пример выполнения данного HTML-кода

Для маркировки переменных используется тег <var>, который обычно отображается курсивом.

<html>
<body>
<p>Версии стандарта HTML обычно маркируются следующим образом
<var>x</var>.<var>у</var>.</p>
</body>
</html>

Пример выполнения данного HTML-кода

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

<html>
<body>
<form method=post action="/cgi-bin/order.cgi">

  <fieldset>
    <legend accesskey=c>Информация о кредитной карте<br></legend>
    <p>
      <label accesskey=v>
        <input type="radio" name="card" value="visa"> Visa
      </label>
      <label accesskey=m>
        <input type="radio" name="card" value="mc"> Mastercard
      </label>
      <br>
      <label accesskey=n>
        Номер: <input type="text" name="number">
      </label>
      <label accesskey=e>
        Срок действия: <input type="text" name="expiry">
      </label>
    </p>
  </fieldset>

  <p>
    <input type="submit" value="Отправить заказ" accesskey=s>
  </p>

  <address>
    Если у вас имеются вопросы по поводу заказа, свяжитесь с нами 
    по адресу <a href="mailto:orders@intuit.ru">orders@intuit.ru</a>,
    Или телефону в офисе (+7 499) 253-9312.
  </address>

</form>
</body>
</html>

Пример выполнения данного HTML-кода

Этот пример показывает, как работать с сокращениями или акронимами.

<html>
<body>

<abbr title="Содружество Независимых Государств">СНГ</abbr>
<br>
<acronym title="World Wide Web">WWW</acronym>

<p>При наведении указателя мыши на акроним или сокращение 
показывается атрибут title.</p>

<p>Это работает по-разному в разных браузерах.</p>

</body>
</html>

Пример выполнения данного HTML-кода

Этот пример показывает, как изменять направление вывода текста.

<html>
<body>

<p>
Если используемый браузер поддерживает двунаправленное 
представление (bdo), то следующая строка будет записана 
справа налево (rtl):
</p>

<bdo dir="rtl">
Здесь какой-то арабский текст 
</bdo>

</body>
</html>

Пример выполнения данного HTML-кода

Этот пример показывает, как использовать длинные и короткие цитаты.

<html>
<body>

Здесь представлена длинная цитата:
<blockquote>
Это длинная цитата. Это длинная цитата. Это длинная цитата. 
Это длинная цитата. Это длинная цитата. 
</blockquote>

Здесь представлена короткая цитата:
<q>
Это короткая цитата
</q>

<p>
Для элемента blockquote браузер вставляет дополнительные 
переносы строки, пустые строки и поля, но элемент q 
не изображается каким-то специальным образом. 
</p>

</body>
</html>

Пример выполнения данного HTML-кода

Этот пример показывает, как пометить текст, который удален или вставлен в документ.

<html>
<body>
<p>
дюжина означает 
<del>двадцать</del> 
<ins>двенадцать</ins> 
частей
</p>
<p>
Большинство браузеров будет зачеркивать удаленный текст 
и подчеркивать вставленный текст.
</p>
<p>
Некоторые старые браузеры будут выводить удаленный 
или вставленный текст как обычный текст.
</p>
</body>
</html>

Пример выполнения данного HTML-кода

Исходный код HTML-документа

Полезно изучать код Web-страниц, сделанных другими. Такую возможность предоставляют все популярные браузеры. Для этого в меню View ("Вид") браузера следует выбрать Source ("Исходный код") или Page Source ("Код страницы"). Откроется окно, в котором будет показан фактический код HTML страницы.

Таблица тегов управления формой отображения
ТегОписание
<b> Задает жирный текст
<big> Относительное увеличение текста
<em> Выделяет текст (обычно курсив)
<i> Задает курсив
<small> Относительное уменьшение текста
<strong> Акцентирует текст (обычно жирный)
<sub> Определяет нижний индекс
<sup> Определяет верхний индекс
<ins> Вставленный текст
<del> Удаленный текст
<s> Не рекомендуется. Используйте вместо этого <del>
<strike> Не рекомендуется. Используйте вместо этого <del>
<u> Не рекомендуется. Используйте вместо этого стили (style)
Таблица тегов управления типом информации
ТегОписание
<code> Определяет текст кода программы
<kbd> Определяет текст клавиатуры
<samp> Определяет образец кода программы
<tt> Определяет текст телетайпа
<var> Определяет переменную
<pre> Определяет заранее отформатированный текст
<listing> Не рекомендуется. Используйте вместо этого <pre>
<plaintext> Не рекомендуется. Используйте вместо этого <pre>
<xmp> Не рекомендуется. Используйте вместо этого <pre>
Таблица тегов цитирования, сносок и определения
ТегОписание
<abbr> Определяет сокращение
<acronym> Определяет акроним
<address> Определяет элемент address (адрес)
<bdo> Определяет направление вывода текста
<blockquote> Определяет длинную цитату
<q> Определяет короткую цитату
<cite> Определяет сноску на другой материал
<dfn> Используется для определения термина

Символьные элементы

Некоторые символы, такие как символ <, имеют в HTML специальное значение. Поэтому их нельзя использовать в тексте в явном виде. Для их отображения используются символьные элементы CER (Character Entity Reference).

Для представления символа "<" в теле документа HTML используется lt;, а для символа ">" используется gt;. Символьный элемент отображается в виде:

имя_символа;

или

#номер_символа;

Например, знак меньше (<) изображается в виде: lt; или #60;.

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

Следующий пример позволит поэкспериментировать с символьными объектами.

Символьные объекты. Работает только в Internet Explorer.

<html>
<body>

<p>Это символьный объект: #000;</p>

<p>
Попробуйте заменить номер (000) на другой номер (например, 169), 
сохраните измененный текст и перезагрузите страницу  в браузере, 
чтобы увидеть результат. 
</p>

</body>
</html>

Пример выполнения данного HTML-кода

Неразрывный пробел

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

Таблица наиболее часто используемых символьных объектов
РезультатОписаниеИмя объектаНомер объекта
  неразрывный пробел nbsp; #160;
< меньше lt; #60;
> больше gt; #62;
амперсанд amp; #38;
" двойная кавычка quot; #34;
' апостроф apos; #39;
$$\pounds$$ фунт стерлингов pound; #163;
$$\yen$$ йена yen; #165;
§ параграф sect; #167;
© авторское право copy; #169;
® зарегистрированная торговая марка reg; #174;
x умножение times; #215;
$$\div$$ деление divide; #247;

Полный список символьных объектов HTML представлен в Справочнике объектов HTML.

Предыдущее занятие Следующее занятие
Вернуться к учебному плану
^