Чтобы отобразить неотформатированный текст, достаточно просто ввести его между тегами начала и конца документа <body></body>. При обработке такой страницы браузер найдет и выведет весь этот текст. Если необходимо чтобы к тексту было применено какое-либо форматирование, например, выделение полужирным или курсивом, необходимо использовать соответствующие теги форматирования. При этом форматируемый текст помещается между тегами. Рассмотрим все выше изложенное на примерах.
Форматирование текста
<html>
<body>
<p>
Если необходимо чтобы к тексту было применено какое-либо
форматирование, например, выделение <b>полужирным</b>
или <i>курсивом</i>, необходимо использовать
соответствующие теги форматирования.
При этом форматируемый текст помещается между тегами.
</p>
</body>
</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>
Еще одной парой тегов форматирования являются теги <big> и <small>. Первый выводит текст увеличенным по сравнению со стандартным, а второй уменьшенным. Вместо тега <big> рекомендуется использовать теги <strong> или теги заголовков, так как они несут и структурную нагрузку. Тег <small> является тегом по смыслу противоположным <strong> и <em>, он деакцентирует внимание на тексте. По поводу применения этого тега следует сделать одно замечание: на разных компьютерах установлено различное разрешение экрана и в браузере может быть установлен различный размер основного шрифта и сильное уменьшение текста может сделать текст не читаемым. Следующий пример демонстрирует вид текста, отформатированного с помощью этих тегов.
<html>
<body>
<p><big>Данный параграф отформатирован тегом big </big></p>
<p><small>Данный параграф отформатирован тегом small </small></p>
<p>А в данном параграфе теги не применяются</p>
</body>
</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>
В некоторых случаях, например для вывода кода программ, полезным будет использование тега <pre>, который сообщает браузеру, что находящийся внутри текст должен быть выведен как есть. При этом будут сохранены все пробелы, переносы строк и прочие символы, которые обычно при выводе браузером не отображаются.
Этот пример показывает, как можно управлять переносами строк и пробелами с помощью тега <pre>.
<html>
<body>
<pre>
Это
предварительно форматированный текст.
Он сохраняет как пробелы
так и переносы строк.
</pre>
</body>
</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>
Тег <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>
Для маркировки примера вывода программы или скрипта используется тег <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>
Для маркировки переменных используется тег <var>, который обычно отображается курсивом.
<html>
<body>
<p>Версии стандарта HTML обычно маркируются следующим образом
<var>x</var>.<var>у</var>.</p>
</body>
</html>
Тег <address> маркирует контактную информацию для всего документа или его части. Он может включать имена людей осуществляющих поддержку документа, ссылки на страницы, адреса электронной почты, телефоны и прочее. Использование данного тега для маркировки почтовых адресов организаций является не совсем корректным. Его следует использовать только для пометки адресов для связи по поводу документа. Также допустимо использование тега <address> для выделения контактной информации по поводу части документа, обычно формы.
<html>
<body>
<form method=post action="http://www.intuit.ru/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 495) 253-9312.
</address>
</form>
</body>
</html>
Этот пример показывает, как работать с сокращениями или акронимами.
<html>
<body>
<abbr title="Содружество Независимых Государств">СНГ</abbr>
<br>
<acronym title="World Wide Web">WWW</acronym>
<p>При наведении указателя мыши на акроним или сокращение
показывается атрибут title.</p>
<p>Это работает по-разному в разных браузерах.</p>
</body>
</html>
Этот пример показывает, как изменять направление вывода текста.
<html>
<body>
<p>
Если используемый браузер поддерживает двунаправленное
представление (bdo), то следующая строка будет записана
справа налево (rtl):
</p>
<bdo dir="rtl">
Здесь какой-то арабский текст
</bdo>
</body>
</html>
Этот пример показывает, как использовать длинные и короткие цитаты.
<html>
<body>
Здесь представлена длинная цитата:
<blockquote>
Это длинная цитата. Это длинная цитата. Это длинная цитата.
Это длинная цитата. Это длинная цитата.
</blockquote>
Здесь представлена короткая цитата:
<q>
Это короткая цитата
</q>
<p>
Для элемента blockquote браузер вставляет дополнительные
перенос строки, пустые строки и поля, но элемент q
не изображается каким-то специальным образом.
</p>
</body>
</html>
Этот пример показывает, как пометить текст, который удален или вставлен в документ.
<html>
<body>
<p>
дюжина означает
<del>двадцать</del>
<ins>двенадцать</ins>
pieces
</p>
<p>
Большинство браузеров будет зачеркивать удаленный текст
и подчеркивать вставленный текст.
</p>
<p>
Некоторые старые браузеры будут выводить удаленный
или вставленный текст как обычный текст.
</p>
</body>
</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 используется <, а для символа ">" используется >. Символьный элемент отображается в виде:
&имя_символа;
или
&#номер_символа;
Например, знак меньше (<) изображается в виде: < или <.
Преимущество использования имени вместо номера состоит в том, что имя легче запомнить. Недостаток состоит в том, что не все браузеры поддерживают самые новые имена объектов, в то время как поддержка номеров объектов реализована очень хорошо почти во всех браузерах. Обратите внимание, что символьные объекты зависят от регистра символов.
Следующий пример позволит поэкспериментировать с символьными объектами.
Символьные объекты. Работает только в Internet Explorer.
<html>
<body>
<p>Это символьный объект: �</p>
<p>
Попробуйте заменить номер (000) на другой номер (например, 169),
сохраните измененный текст и перезагрузите страницу в браузере,
чтобы увидеть результат.
</p>
</body>
</html>
Неразрывный пробел
Наиболее часто используемым символьным объектом является неразрывный пробел - . Обычно браузер удаляет лишние пробелы и вместо нескольких использует один, если необходимо вставить в текст пробелы, используется символьный объект . Еще одно частое применение неразрывного пробела заполнение пустых ячеек в таблице, так большинство браузеров не отображает ячейки, в которых ничего нет.
Таблица наиболее часто используемых символьных объектов
| Результат |
Описание |
Имя объекта |
Номер объекта |
| |
неразрывный пробел |
|
  |
| < |
меньше |
< |
< |
| > |
больше |
> |
> |
| & |
амперсанд |
& |
& |
| " |
двойная кавычка |
" |
" |
| ' |
апостроф |
' |
' |
| ¢ |
цент |
¢ |
¢ |
| £ |
фунт стерлингов |
£ |
£ |
| ¥ |
йена |
¥ |
¥ |
| § |
параграф |
§ |
§ |
| © |
авторское право |
© |
© |
| ® |
зарегистрированная торговая марка |
® |
® |
| × |
умножение |
× |
× |
| ÷ |
деление |
÷ |
÷ |
Полный список символьных объектов HTML представлен в Справочнике объектов HTML.
|
Посмотреть
порно видео в онлайне »