2015-10-16
1606
Принудительный перевод строки, или "жесткий перенос" используется, чтобы нарушить стандартный порядок отображения текста. Дело в том, что браузер, отображая текст в рабочем окне, автоматически разбивает его на строки, игнорируя разбивку строк, выполненную в текстовом редакторе при подготовке документа. Тег <br> образует пустой элемент и не имеет пары – закрывающего тега. В связи с этим XHTML требует использовать форму записи <br />. Тег <br>, естественно, применяется внутри контейнера <p> … </p>, определяющего абзац. Ярким примером применения тега <br> является отображение стихотворных строф, например, как в примере 5.
Пример 5. Принудительное завершение строки
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Медный всадник</title>
</head>
<body>
<p>Люблю тебя, Петра творенье,<br />
Люблю твой строгий, стройный вид,<br />
Невы державное теченье,<br />
Береговой ее гранит … <br />
</p>
</body>
</html>
Отображение страницы, описанной в примере 5, демонстрируется на рисунке 3.
Рисунок 3. Результат применения "жесткого переноса" в абзацах
Альтернативным для тега <br> является тег <nobr> (No Break), который дает браузеру команду отображать весь текст в одной строке, не обрывая её. Браузер в этом случае добавляет в нижней части окна горизонтальный скроллинг (если это необходимо).
Списки
Принято различать маркированные и нумерованные списки. В альтернативу им на веб-страницах возможно формирование неупорядоченных (Unordered List <ul>) и упорядоченных (Ordered List <ol>) списков и списков определений (Definition List <dl>). Элементы как маркированных так и нумерованных списков задаются тегами <li> (List Item). Пример кода, использующий маркированные и нумерованные списки приведен в примере 6. Отображение страницы, описанной в примере 6, демонстрируется на рисунке 4.
Пример 6. Применение маркированных и нумерованных списков
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Списки</title>
</head>
<body>
<p>Хороший сайт отличают как минимум следующие черты:</p>
<ul>
<li>высокое качество информационного наполнения и грамотность его подачи;</li>
<li>оригинальность и эстетическая привлекательность внешнего облика страниц;</li>
<li>доступность содержания сайта для максимально широкого круга пользователей вне зависимости от применяемых ими типов устройств и версий браузеров, а также от ограничений по состоянию здоровья;</li>
<li>эргономичность элементов пользовательского интерфейса сайта, обеспечивающая высокую эффективность, но в то же время легкость и непринужденность взаимодействия посетителя с веб-ресурсом;</li>
<li>надежность и безопасность используемых технологических решений, четкая согласованность работы всех компонентов;</li>
<li>безупречная проработка всех деталей и нюансов.</li>
</ul>
<p>Технологическая цепочка создания сайта состоит из следующих шагов:</p>
<ol>
<li>постановка задачи, включающая в себя:
<ul>
<li>анализ существующих конкурирующих и/или родственных проектов;</li>
<li>выработку концепции;</li>
</ul>
</li>
<li>подготовка первоначального информационного наполнения;</li>
<li>разработка макетов страниц;</li>
<li>подготовка шаблонов страниц;</li>
<li>проектирование и реализация сервисов;</li>
<li>сборка всех компонентов воедино;</li>
<li>тестирование;</li>
<li>ввод в эксплуатацию;</li>
<li>пожизненное сопровождение — информационное наполнение и техническая поддержка.</li>
</ol>
</body>
</html>
Рисунок 4. Пример создания маркированных и нумерованных списков
По умолчанию в контейнере <ul> … </ul> используются маркеры в виде кружков, а в контейнере <ol> … </ol> применена порядковая нумерация, что в первом случае эквивалентно тегу <ul type = disk>, а во втором – <ol type = 1>. Именно атрибут type определяет вид маркеров и номеров:
· <ul type = circle> – тег создает маркеры в виде окружностей;
· <ul type = square> – тег создает сплошные квадратные маркеры;
· <ol type = A> – тег создает список с нумерацией в формате A., B., …;
· <ol type = a> – тег создает список с нумерацией в формате a., b., …;
· <ol type = I> – тег создает список с нумерацией в формате I., II., ….
Список определений используется для создания списка терминов и определений. Схема использования тега следующая.
<dl> <dt> термин </dt> <dd> определение </dd> </dl>
Определяемый термин записывается на одной строке, а его определение на следующей с небольшим отступом вправо. Тег <dl> позволяет создавать абзац со сдвигом левой границы абзаца без его нумерации и маркеров. Пример кода, использующий списки определение приведен в примере 7. Отображение страницы, описанной в примере 7, демонстрируется на рисунке 5.
Пример 7 Применение списков определений.
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head> <title>Список определений</title> </head>
<body>
<p><h3>Структура стеков протокола TCP/IP</h3></p>
<dl> <dt> I. Прикладной уровень (application layer) </dt>
<dd> Определяет прикладные протоколы TCP/IP и интерфейс программ со службами транспортного уровня, необходимый для использования сети
</dd>
<dl> <dt> Уровни модели ISO OSI </dt> <dd> 7, 6, 5. </dd>
<dl> <dt> Протоколы </dt> <dd> HTTP, FTP, SMTP, Telnet … | TFTP, SNMP … </dd>
</dl>
</dl>
</dl>
<dl> <dt> II. Транспортный уровень (transport layer) </dt>
<dd> Обеспечивает управление сеансами связи между компьютерами. Определяет уровень служб и состояние подключения, используемые при транспортировке данных
</dd>
<dl> <dt> Уровни модели ISO OSI </dt> <dd> 4. </dd>
<dl> <dt> Протоколы </dt> <dd> TCP | UDP </dd> </dl>
</dl>
</dl>
<dl> <dt> III. Межсетевой уровень (internet layer) </dt>
<dd> Упаковывает данные в IP-датаграммы, содержащие информацию об адресах источника и приемника. Выполняет маршрутизацию IP-датаграмм.
</dd>
<dl> <dt> Уровни модели ISO OSI </dt> <dd> 3. </dd>
<dl> <dt> Протоколы </dt> <dd> IP, ARP, RARP, ICMP, IGMP, RIP, OSPF … </dd>
</dl>
</dl>
</dl>
<dl> <dt> IV. Уровень сетевого интерфейса (network interface layer) </dt>
<dd> Определяет средства и принципы физической передачи данных по сети, включая преобразование битов данных в электрические или другие сигналы аппаратными устройствами, непосредственно подключенным к среде передачи, такой, как коаксиальный кабель, оптоволокно или витая пара.
</dd>
<dl> <dt> Уровни модели ISO OSI </dt> <dd> 2, 1. </dd>
<dl> <dt> Протоколы </dt> <dd> Ethernet, Tokin Ring, FDDI, X.25, SLIP, PPP … </dd>
</dl>
</dl>
</dl>
</body>
</html>
Рисунок 5. Применение вложенных списков определений
Не всё так грустно, как думается. Тег <pre> применяется для отображения текста в формате текстового редактора, с помощью которого была изготовлена веб-страница, теми же символами и с тем же разбиением на строки.
