Чтобы отобразить не отформатированный текст достаточно просто ввести его между тегами начала и конца документа <body></body>. При обработке такой страницы браузер найдет и выведет весь этот текст. Если необходимо чтобы к тексту было применено какое-либо форматирование, например, выделение полужирным или курсивом, необходимо использовать соответствующие теги форматирования. При этом форматируемый текст помещается между тегами. Рассмотрим все выше изложенное на примерах.
2. Лекция: Форматирование символов
Сообщений 1 страница 10 из 22
Поделиться12009-03-13 13:21:08
- Администратор
- Зарегистрирован: 2009-03-11
- Приглашений: 0
- Сообщений: 347
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
8 часов 2 минуты - Последний визит:
2009-04-16 13:45:24
Поделиться22009-03-13 13:22:03
- Администратор
- Зарегистрирован: 2009-03-11
- Приглашений: 0
- Сообщений: 347
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
8 часов 2 минуты - Последний визит:
2009-04-16 13:45:24
Форматирование текста
<html>
<body>
<p>
Если необходимо чтобы к тексту было применено какое-либо форматирование,
например, выделение <b>полужирным</b> или <i>курсивом</i>,
необходимо использовать соответствующие теги форматирования.
При этом форматируемый текст помещается между тегами.
</p>
</body>
</html>
Поделиться32009-03-13 13:22:47
- Администратор
- Зарегистрирован: 2009-03-11
- Приглашений: 0
- Сообщений: 347
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
8 часов 2 минуты - Последний визит:
2009-04-16 13:45:24
Так же для выделения текста используются теги <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>
Поделиться42009-03-13 13:23:39
- Администратор
- Зарегистрирован: 2009-03-11
- Приглашений: 0
- Сообщений: 347
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
8 часов 2 минуты - Последний визит:
2009-04-16 13:45:24
Еще одной парой тегов форматирования являются теги <big> и <small>. Первый выводит текст увеличенным по сравнению со стандартным, а второй уменьшенным. Вместо тега <big> рекомендуется использовать теги <strong> или теги заголовков, так как они несут и структурную нагрузку. Тег <small> является тегом по смыслу противоположным <strong> и <em>, он деакцентирует внимание на тексте. По поводу применения этого тега следует сделать одно замечание: на разных компьютерах установлено различное разрешение экрана и в браузере может быть установлен различный размер основного шрифта и сильное уменьшение текста может сделать текст не читаемым. Следующий пример демонстрирует вид текста отформатированного с помощью этих тегов.
<html>
<body>
<p><big>Данный параграф отформатирован тегом big </big></p>
<p><small>Данный параграф отформатирован тегом small </small></p>
<p>А в данном параграфе теги не применяются</p>
</body>
</html>
Поделиться52009-03-13 13:24:31
- Администратор
- Зарегистрирован: 2009-03-11
- Приглашений: 0
- Сообщений: 347
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
8 часов 2 минуты - Последний визит:
2009-04-16 13:45:24
Другой парой полезных тегов являются <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>
Поделиться62009-03-13 13:26:08
- Администратор
- Зарегистрирован: 2009-03-11
- Приглашений: 0
- Сообщений: 347
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
8 часов 2 минуты - Последний визит:
2009-04-16 13:45:24
В некоторых случаях, например для вывода кода программ, полезным будет использование тега <pre>, который сообщает браузеру, что находящийся внутри текст должен быть выведен как есть. При этом будут сохранены все пробелы переносы строк и прочие символы, которые обычно при выводе браузером не отображаются.
Этот пример показывает, как можно управлять переносами строк и пробелами с помощью тега <pre>.
<html>
<body>
<pre>
Это
предварительно форматированный текст.
Он сохраняет как пробелы
так и переносы строк.
</pre>
</body>
</html>
Поделиться72009-03-13 13:27:19
- Администратор
- Зарегистрирован: 2009-03-11
- Приглашений: 0
- Сообщений: 347
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
8 часов 2 минуты - Последний визит:
2009-04-16 13:45:24
Сравните написание кода программы с применением тега <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>
Поделиться82009-03-13 13:28:31
- Администратор
- Зарегистрирован: 2009-03-11
- Приглашений: 0
- Сообщений: 347
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
8 часов 2 минуты - Последний визит:
2009-04-16 13:45:24
Тег <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>
Поделиться92009-03-13 13:29:23
- Администратор
- Зарегистрирован: 2009-03-11
- Приглашений: 0
- Сообщений: 347
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
8 часов 2 минуты - Последний визит:
2009-04-16 13:45:24
Для маркировки примера вывода программы или скрипта используется тег <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>
Поделиться102009-03-13 13:30:10
- Администратор
- Зарегистрирован: 2009-03-11
- Приглашений: 0
- Сообщений: 347
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
8 часов 2 минуты - Последний визит:
2009-04-16 13:45:24
Для маркировки переменных используется тег <var>, который обычно отображается курсивом.
<html>
<body>
<p>Версии стандарта HTML обычно маркируются следующим образом <var>x</var>.<var>у</var>.</p>
</body>
</html>