Отправляет email-рассылки с помощью сервиса Sendsay

Журнал Начинающего ВебМастера

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Работа и отдых в Интернете" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Сентябрь 2010   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Lord Expert

Статистика

263 подписчиков
-1 за неделю
←   Все выпуски   →

Журнал Начинающего Программиста



 
 
 
ОСНОВЫ РАБОТЫ С HTML
 
Лекция 2. Форматирование символов
 
Этот урок посвящен работе с текстом. Рассматриваются способы и теги форматирования
текстовой информации. Рассказывается о способах вывода на экран специальных символов.
 
Чтобы отобразить неотформатированный текст, достаточно просто ввести его между тегами
начала и конца документа <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="/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:name@domen.ru">name@domen.ru</a>,
    Или телефону в офисе (+7 nnn) nnn-nnnn.
  </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> 
частей
</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 используется &lt;, а для символа ">"
используется &gt;. Символьный элемент отображается в виде:
&имя_символа;
 
или
&#номер_символа;
 
Например, знак меньше (<) изображается в виде: &lt; или &#60;.
Преимущество использования имени вместо номера состоит в том, что имя легче запомнить.
Недостаток состоит в том, что не все браузеры поддерживают самые новые имена объектов, в то
время как поддержка номеров объектов реализована очень хорошо почти во всех браузерах.
Обратите внимание, что символьные объекты зависят от регистра символов.
Следующий пример позволит поэкспериментировать с символьными объектами.
Символьные объекты. Работает только в Internet Explorer.
<html>
<body>
 
<p>Это символьный объект:&#000;</p>
<p>
Попробуйте заменить номер (000) на другой номер (например, 169), 
сохраните измененный текст и перезагрузите страницу  в браузере, 
чтобы увидеть результат. 
</p>
 
</body>
</html>
 
Неразрывный пробел

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

Результат Описание Имя объекта Номер объекта

неразрывный пробел &nbsp; &#160;
< больше &lt;  &#60;
> меньше &gt;
&#62;
& амперсанд &amp; &#38;
" двойная кавычка &quot; &#34;
'  апостроф  &apos; &#39;
¢ цент &cent; &#162;
£ фунт стерлингов
&pound;
&#163;
¥ йена &yen; &#165;
§ параграф
&sect; &#167;
© авторское право &copy; &#169;
®
 зарегистрированная торговая марка   &reg;
&#174;
х
 умножение  &times; &#215;
÷ деление &divide;  &#247;


 
Далее: Готовится Лекция3

 2010 LORD-EXPERT     ∙ Forum   ∙ Site


В избранное