Основы разметки текста и гипертекста в HTML (Лабораторная работа № 7-8)

Страницы работы

Фрагмент текста работы

форматирует текст полужирным, то его использование предпочтительней. Тег <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> маркирует контактную информацию для всего документа

Похожие материалы

Информация о работе

Предмет:
Информатика
Тип:
Методические указания и пособия
Размер файла:
127 Kb
Скачали:
0