Поделиться
18. Применение гипертекстовой разметки для создания HTML-документа.doc
Тема: Применение гипертекстовой разметки для создания HTML-документа
Цель: закрепить на практике знания по использованию различных тэгов HTML.
Время выполнения: 2 часа.
Теоретический материал:
Текст является основным способом представления информации на веб-странице. HTML позволяет менять вид текста, используя для этого различные шрифты, цвета и другие способы его форматирования.
Для установки выравнивания текста обычно используется тег абзаца <p> с атрибутом align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным атрибутом align, как показано в таблице 1.
|
Таблица 1. Выравнивание текста с помощью параметра align |
|
|
Код HTML |
Описание |
|
<p>Текст</p> |
Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы. |
|
<p align="center">Текст</p> |
Выравнивание по центру. |
|
<p align="left">Текст</p> |
Выравнивание по левому краю. |
|
<p align="right">Текст</p> |
Выравнивание по правому краю. |
|
<p align="justify">Текст</p> |
Выравнивание по ширине. |
|
<nobr>Текст</nobr> |
Отключает автоматический перенос строк, даже если текст шире окна браузера. |
|
Текст<wbr> |
Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег <nobr>. |
|
<div align="center">Текст</div> |
Выравнивание по центру. |
|
<div align="left">Текст</div> |
Выравнивание по левому краю. |
|
<div align="right">Текст</div> |
Выравнивание по правому краю. |
|
<div align="justify">Текст</div> |
Выравнивание по ширине. |
Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align="left" можно опустить.
Отличие между абзацем (тег <p>) и тегом <div> в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега <div>.
Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде <h1>. В примере 1 показано, как в подобном случае устанавливать выравнивание.
Пример 1. Выравнивание текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выравнивание текста</title>
</head>
<body>
<h1 align="center">Как поймать льва?</h1>
<p align="right"><strong>Метод перебора</strong></p>
<p>Делим пустыню на ряд элементарных участков, размер которых совпадает
с габаритными размерами льва, но при этом меньше размера клетки. Далее простым
перебором определяем участок, в котором находится лев, что автоматически приводит
к его поимке.</p>
<p align="right"><strong>Метод дихотомии</strong></p>
<p>Делим пустыню на две половины. В одной части - лев, в другой его нет.
Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем
до тех пор, пока лев не окажется пойман.</p>
</body>
</html>
Результат примера показан на рисунке 1.
Рисунок 1 - Выравнивание текста по правому и левому краю
В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.
Для изменения размера текста существует несколько возможностей — это использование заголовков <h1>, ..., <h6>, тегов <big> и <small>. В таблице 2 перечислены основные варианты с описанием и примером.
|
Таблица 2. Теги для изменения размера текста |
||
|
Код HTML |
Описание |
Пример |
|
<big>Текст</big> |
Увеличивает размер шрифта |
Текст |
|
<small>Текст</small> |
Уменьшает размер шрифта |
Текст |
|
<h1>Текст</h1> |
Пишет текст в виде большого заголовка |
Текст |
|
<h6>Текст</h6> |
Пишет текст в виде маленького заголовка |
Текст |
Кроме того, размер текста можно задавать с помощью CSS, устанавливая его в пунктах, пикселах или других единицах. Существует еще один вариант - создать текст в графической программе и добавить его на веб-страницу в виде изображения.
Теги <big> и <small> можно повторять несколько раз подряд, тем самым увеличивая или уменьшая текст до нужных размеров (пример 2).
Пример 2. Использование тега <big>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Текст</title>
</head>
<body>
<p>Используя теги для увеличения текста, можно добиться
<big><big>больших</big></big> результатов.</p>
</body>
</html>
Результат данного примера показан на рисунке 2.
Рисунок 2 - Вид текста, оформленного с помощью тега <big>
Среди перечисленных в таблице тегов преимущественно применяются теги <h1>, <h2> и <h3>. Они предназначены для создания заголовков к разделам и показывают их относительную важность. Так, по умолчанию текст внутри тега <h1> отображается в жирном начертании и размером 24 пунктов. Содержимое тега <h2> уже имеет размер 18 пунктов, а <h3> - 14 пунктов.
Форматирование текста - средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В таблице 3 перечислены основные теги, которые применяются для изменения оформления текста.
|
Таблица 3. Теги для форматирования текста |
||
|
Код HTML |
Описание |
Пример |
|
<b>Текст</b> |
Жирное начертание текста |
Текст |
|
<i>Текст</i> |
Курсивное начертание текста |
Текст |
|
<sup>Текст</sup> |
Верхний индекс |
e=mc2 |
|
<sub>Текст</sub> |
Нижний индекс |
H2O |
|
<pre>Текст</pre> |
Текст пишется как есть, включая все пробелы |
Текст |
|
<em>Текст</em> |
Курсивный текст |
Текст |
|
<strong>Текст</strong> |
Жирное начертание текста |
Текст |
Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов <b> и <i> (пример 3). Их порядок в данном случае не важен.
Пример 3. Жирный курсивный текст
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Текст</title>
</head>
<body>
<p>Он словно вырезан из <b>камня</b>, стоек и неподвижен в отличие от его противников.
<i>Дух и жизненная сила</i> в нём достигла <b><i>совершенства</i></b>.
Но вот беда — никто не смеет принять его вызов.</p>
</body>
</html>
Результат данного примера показан на рисунке 3.
Рисунок 3 - Вид курсивного жирного начертания текста
Использование тегов <sup> и <sub> сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 4).
Пример 4. Создание нижнего индекса
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Текст</title>
</head>
<body>
<p><b>Формула изумруда:</b>
<i>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></i></p>
</body>
</html>
Результат данного примера показан на рисунке 4.
Рисунок 4 - Нижний индекс в тексте
Теги <strong> и <em> выполняют те же функции, что теги <b> и <i>, но написание последних короче, привычней и удобней.
Следует отметить, что теги <b> и <strong>, также как <i> и <em> являются не совсем эквивалентными и заменяемыми. Первый тег <b> - является тегом физической разметки и устанавливает жирный текст, а тег <strong> - тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
Задания:
Рисунок 5 – Пример оформления текста
Используя спецсимволы, оформите текст, как показано на рисунке. Обратите внимание на кавычки и тире в тексте.
Рисунок 6 – Пример оформления текста
Оформите в виде веб-страницы следующий текст.
Юность, верность, красота,
Прелесть сердца, чистота
Здесь лежат, сомкнув уста.
Феникс умер, и она
Отошла, ему верна,
В царство вечности и сна.
Не бесплоден был, о нет,
Брак, бездетный столько лет, -
То невинности обет.
Создайте веб-страницу на произвольную тему, используя теги <del> и <ins>.
Используя вложение тегов, сделайте список, приведенный на рисунке 7. Обратите особое внимание на то, чтобы код был валидным.
Рисунок 7 – Пример вложенных списков
С помощью тегов <ol> и <li> постройте списки, показанные на рисунке 8. При этом у вас должен быть валидный XHTML и CSS. Списки должны корректно отображаться в браузерах IE8, Firefox 3, Safari 4, Opera 10, Chrome 5 и в их старших версиях.
Рисунок 8 – Пример нумерованных списков
Создайте список на свободную тему. Ссылки не обязательно должны работать (т.е. вести на какие-то существующие файлы), главное сохранить указанный вид и валидность кода.
Контрольные вопросы:
1. Какие теги применяются к тексту? Каково их назначение?
2. Назовите основные теги и атрибуты для выравнивания текста.
3. Какие теги и атрибуты позволяют сдвигать текст относительно базовой линии?
4. Назовите теги для создания различных списков.
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
