КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Что такое HTTP 3 страница
|
|
|
|
Глава 4. Создаем первую веб-страничку
Рис. 4.1. Текст, заголовки и практически все, что вы видите в окне браузера, размещается между тегами <body> и </body>
ПРИМЕЧАНИЕ
Что такое «хорошо оформленный код»? Как вы увидите в этой и последующих главах, важной составной частью процесса создания XHTML-совместимых документов является использование хорошо оформленного кода. Этот термин означает, что ваши веб-документы соответствуют некоторым основным правилам и удовлетворяют стандарту XHTML. Если вы раньше имели дело с HTML, вы, вероятно, заметили, что в XHTML используется более строгий под ход. Например, это касается регистра букв. Если раньше язык разметки веб-страниц был регисгронезависимым, то теперь это не так. Все теги должны быть написаны строчными буквами. Все, даже пустые, теги должны иметь закрывающую косую черту. Раньше элементы типа paragraph, состоящие из одного тега, могли спокойно существовать и без этого. Теперь нужно обязательно дописывать косую черту (/) перед закрывающей угловой скобкой (>). Есть и другие нововведения, вы узнаете о них позднее. Например, старая специфи кация HTML допускала наличие пустых атрибутов, например NOSHADE. Стандарт XHTMl требует, чтобы у атрибута всегда было значение: noshade="noshade".
Ввод текста абзаца
Большая часть текста, который вы вводите между тегами <body>, и </body> заклю чается в контейнерные элементы <р> и </р>. Они используются для разделения текста на абзацы.
Может быть, вы думаете, что этот элемент является архитектурным излишеством. Это не так. Это в текстовых редакторах вы нажимаете Enter и тем самым начинаете новый абзац. В HTML-документах такой трюк не проходит. Веб-браузеры по умолчанию игнорируют разделители между буквами, превышающие один пробел, поэтому и признак возврата каретки (соответствующий нажатию Enter) тоже будет проигнорирован. Чтобы разбить текст на абзацы, все-таки придется использовать следующий формат:
<р>Вот текст для абзаца Меня совершенно не интересует, сколько его сколько я ставлю пробелов между буквами и в какой момент мне вдруг захочется нажать Enter. He интересует Абсолютно Потому что новый абзац начнется только тогда, когда я поставлю закрывающий тег а затем - открывающий. Так-то</р> <р>Да а это уже следующий абзац</р>.
Элемент <р> сообщает браузеру о том, что весь текст, заключенный между открывающим и закрывающим тегами, представляет собой единый абзац. Когда вы ставите открывающий тег, браузер вставляет пустую строку, обозначая тем самым начало нового абзаца.
ПРИМЕЧАНИЕ
В ранних реализациях HTML <p> можно было использовать как пустой элемент. В начале абзаца можно было просто написать тег <р>, и этого было достаточно. Теперь такой код не будет являться хорошо оформленным. Он не работает с DTD для XHTML Strict, одним из требований которого является наличие закрывающего тега для любого элемента.Чтобы ни в чем не сомневаться, используйте как открывающий, так и закрывающий теги абзаца.
Рис. 4.2. Обратите внимание: нажатие клавиши Enter при вводе текста не влияет на отображение страницы в окне браузера
В приведенном примере также имеются лишние расстояния между буквами. Помните, что пробелы и служебные символы перевода каретки почти никогда не влияют на то, как HTML-документ выглядит в браузере. Внутри контейнера, задающего абзац, во всяком случае, любые лишние пропуски между буквами будут игнорироваться:
Сравните:
<p>Thanks for shopping at FakeCorp</p> и <p> Thanks for shopping at FakeCorp </p>
Эти два варианта будут выглядеть в окне браузера совершенно идентично. Это показано на рис. 4.2.
Элемент <br/>
Вы уже умеете создавать цельные абзацы. Но что делать, если вы захотите внутри абзаца обозначить конец строки? Это может понадобиться, например, при вводе адреса в веб-документе:
<р>
Donald Johnson 12345 Main Street Yourtown NY 10001 </p>
Казалось бы, все правильно. Да, но такая разметка будет видна только в вашем текстовом редакторе. При открытии документа в браузере текст будет выглядеть так, как показано на рис 43, вверху.
Рис. 4.З. Ни нажатие Enter, ни применение контейнеров <р> не приведет к нужному результату
Вы уже, наверное, догадываетесь, в чем заключается проблема: браузеры будут игно рировать лишние пробелы и переводы каретки. Даже если вы каждую строку будете выделять в свой абзац, это будет выглядеть неправильно. Смотри рис. 4.3.
Решением этой задачки является использование пустого элемента <bг />, который представляет собой признак окончания строки. И вот при правильном форматировании текст адреса будет выглядеть следующим образом в HTML:
<p> Donald Johnson<br /> 12345 Main Street<br /> Yourtown NY 10001<br /> <p/>
Теперь вы увидите в браузере то, что нужно (рис. 4.4).
Рис. 4.4. Вот как выглядит текст, когда в конце каждой строки имеется элемент <br />
ПРИМЕЧАНИЕ
Хотя некоторые версии браузера Netscape способны распознать сразу несколько тегов <br /> и создать дополнительные разрывы строк, стандарт HTML не рекомендует использовать более одного <br /> в строке. Одним из приемлемых путей добавления дополнительных пробелов в HTML-документах, является применение контейнера <рre>, речь о котором пойдет в главе 5, «Форматирование текста». Наиболее подходящим решением проблемы можно считать использование таблиц стилей. См. главу 10.
Сохранение, тестирование и проверка
Работа над созданием страницы подразумевает три важных шага: во-первых, нужно ее правильно сохранить; во-вторых, убедиться в том, что в браузере вы видите то, что задумывалось; в-третьих, нужно проверить код на совместимость его со стандартами HTML.
Сохранение страницы
Если вы работали с HTML-шаблоном, то, вероятно, вы уже сохранили свою страницу под каким-нибудь осмысленным именем. По крайней мере, я рекомендовал вам так сделать сразу после загрузки файла template.html. Если же вы этого не сделали, то есть шанс, что был случайно изменен сам шаблон. Ну что ж, это небольшая проблема. Сохраните файл, выбрав из меню File пункт Save As.
При сохранении файла помните, что он должен быть расположен по тому же самому «относительному» пути, по которому он будет прописан на веб-сервере. Возможно, пока вам еще не понятно, что я имею в виду, но, в общем-то, это тесно связано с нашим разговором о каталогах и структуре сайта (глава 3). Если уж вы сохраняете файл productshtml в соответствующей папке на своем жестком диске, то он должен быть привязан к такому же каталогу на сервере. В противном случае перейдите к главе 6, там написано об этом подробнее.
Тестирование страницы
Чтобы проверить, как на самом деле выглядит ваша страница, имеет смысл воспользо ваться веб-браузером. Почти любой из них может загружать веб-страницы с жесткого диска точно так же, как из Интернета. Поищите в меню браузера команды типа File, Open File. Диалоговое окно последней позволит открыть нужный файл (рис. 4.5).
Рис. 4.5. Выберите файл и щелкните на команде Open, чтобы загрузить HTML-документ с жесткого диска и вывести его в окне браузера
Для тестирования документа в браузере:
|
|
|
|
|
|
|
|
|
|
|
|
|
Глава 5. Форматирование текста
Рис. 5.1. Уровни заголовков, которые вы можете использовать
На рисунке 5.1 изображен результат аналогичной англоязычной странички.
В идеале, пропускать уровни нельзя. То есть <h3> не может следовать после <hl>, если между ними нет <h2>. На практике иногда применяют заголовки разных уровней просто для того, чтобы задавать размеры шрифтов. Это неправильно, потому что разные браузеры по-разному будут отображать эти размеры. Гораздо лучше для изменения размера шрифта использовать таблицы стилей (глава 10). Нельзя в одной и той же строке использовать и заголовок, и обычный текст, даже если вы закрываете тег заголовка. Элемент заголовка работает так же, как <р>, то есть он вставляет новую строку после своего «выключающего» тега. Например,
<h1>Boт это заголовок</h1> А это - обычный текст
будет выглядеть в браузере примерно так же, как
<h1>Вот еще заголовок</h1> <p>А вот еще текст абзаца</р>
В обоих случаях браузер поместит текст заголовка в одной строке, а обычный текст- в другой. Обратите при этом внимание на то, что первый пример не является «хорошо оформленным кодом». Вторая его часть должна быть заключена в теги <р>.
Горизонтальные линии
Хотите использовать различные разделители? Элемент <hr /> — это то, что вам нужно. Он помещает между абзацами горизонтальную линию, которую можно растянуть на всю ширину окна браузера. Если читатель изменяет размер окна, то размер линии соответственно масштабируется. <hr /> является пустым элементом, поэтому закрывающий тег не требуется. («Нг» расшифровывается как «horizontal rule», то есть просто «горизонтальная линия»).
Этот элемент вставляет разрыв абзаца до и после линии. <hr /> можно поместить в любом место на странице.
<hr /> <h2>Иван Топорыжкин</h2 <р>Иван Топорыжкин пошел на охоту. С ним пудель пошел, перепрыгнув
забор.</р>
У элемента <hr /> могут быть определенные атрибуты, изменяющие вид и размер линии, однако их можно применять, только если DTD относится к XHTML Transitional. Они не удовлетворяют требованиям XHTML Strict. Если вы хотите придерживаться строгих стандартов, используйте команды таблиц стилей вместо этих атрибутов. Мы обсудим это в главе 10. Они дают возможность управлять шириной, длиной и расположением горизонтальной линии в окне браузера. В таблице 5.1 показаны возможные атрибуты и назначение <hr />.
Таблица 5.1. Атрибуты <hr />
Примечание Термин "пиксел" означает "элемент изображения" на экране, а в сетевых терминах можно сказать, что это одна точка. По умолчанию ширина элемента <hr/> равна 1 пикселу. Любые из этих атрибуов могут быть введены путем их добавления перед закрывающей угловой скобкой. Например: <hr size="4" width=50%" align="center " noshade= "noshade" /> Стилизация текста Может показаться, что логические элементы избыточны. На самом деле это не так, более того, именно им и оказывают предпочтение. Почему? Потому что не все браузеры могут отображать физические стили, например выделение жирным шрифтом. Если, например, браузер, встроенный в сотовый телефон, не умеет этого, то он просто проигнорирует ваше <b>.Если же вы используете логические элементы, то телефон постарается выделить это место в тексте как-нибудь по-своему. Например, <strong> в обычных графических браузерах делает текст полужирным. Текстовые браузеры, не имеющие возможности изменить толщину букв, прибегают к выделению с помощью подчеркивания или изменения яркости. Но элементы типа <b> теми же самыми программами будут, скорее всего, проигнорированы. Не следует забывать, на какую аудиторию вы ориентируетесь Если вы точно уверены, что все пользователи, посетившие ваш сайт, имеют графические браузеры, может быть, логические стили вам и не понадобятся. Элементы физических стилей Если вы уже имеете опыт работы с текстовыми процессорами, вы, наверное, обратили внимание на то, что текст может быть выделен полужирным начертанием, курсивом или подчеркиванием. Эти элементы являются абсолютными, а значит, любой графический веб-браузер обязан отображать их одинаково. Некоторые браузеры не могут отображать элементы логических стилей так, как вы задумывали, но отображение физических стилей происходят так, как нужно. Полужирный текст никогда не перестанет быть полужирным. Курсив навсегда останется курсивом, то же самое касается подчеркивания. Браузеры, не предназначенные для выделения текста с помощью этих физических стилей, будут их игнорировать. В таблице 5.2 собраны некоторые описания физических стилей. Таблица 5.2. Физические стили
Элемент физического стиля вставляется в веб-документ просто. Идея состоит в том, что вы выбираете часть текста, которую хотите тем или иным образом выделить, и заключаете ее в теги соответствующего стиля. В браузере вы можете убедиться, что выделение применено именно к заключенному в теги отрывку.
Рассмотрим пример, в котором используется физический стиль. <р><tt>Новости сайта:</tt> На рисунке 5.2 показано, как выглядят в браузере примененные здесь стили.
Рис. 5.2. Обычно браузеры не отличаются разнообразием способов отображения физических стилей ПРИМЕЧАНИЕ Важно размещать теги маркировки в непосредственной близости от выделяемого текста. Это гарантирует, что пробелы будут нужной ширины. Например, сравните: Четверг и <b>пятница</b> и Четверг и <b>пятница</b>. Некоторые (не все) браузеры могут отреагировать на второй пример таким образом: «Четверг и пятница». Элементы логических стилей В главе 4 мы говорили, что элемент, задающий абзац, не только вставляет пропуск между двумя отрывками текста, он на самом деле определяет отрывок, заключен ный в <р> и </р> как элемент под названием «абзац». Это действительно важный момент, на который стоит обратить внимание, потому что это означает, что <р> за дает логический элемент HTML! Он не задает ничего конкретного, не определяет размер шрифта или отступы. Точное определение всех параметров абзаца отдает ся на откуп браузеру. Логические стили в HTML используют ту же идею. Логическим является стиль, конкретные параметры которого задаются браузером. Хотя, скорее всего, разные браузеры будут привычным образом воспринимать элемент абзаца, можно встретить варианты, когда весь текст написан зеленым цветом, а отступ сделан не слева, асправа (если так решил сделать производитель браузера или пользователь). Примерно то же самое можно сказать не только об абзаце, но и о логических стилях. Браузер делает текст жирнее, выделяет его курсивом, раскрашивает в зеленый цвет или произносит громче (голосовые браузеры) в зависимости от возможностей конкретной программы. Любой элемент логического стиля имеет открывающий и закрывающий тег, формирующий контейнер для выделяемого текста. В таблице 5.3 описаны логические стили. Таблица 5.3. Логические стили
Что касается графических браузеров, то обычно <епт> соответствует курсиву, а <strong> — жирному шрифту. Но это не всегда так. Иногда <еm> может означать подчеркивание, a <strong> — выделение яркостью. В голосовых браузерах текст, помеченный <еm>, произносится громче, чем обычный, a <strong> - еще громче. Основная идея заключается просто в том, что <еm> делает текст выделенным, а <strong> - усиленно выделенным. Другие стили, представленные в табл. 5.3, обычно используются для некоторых специфических целей, чаще всего связанных с набором технической или научной литературы. Опять же, браузеры, предназначенные для подобных целей, очень грамотно обрабатывают соответствующие теги. Что касается обычных браузеров, то они скорее всего выделят текст курсивом, выведут его моноширинным шрифтом или вообще оставят без изменений. СОВЕТ Internet Explorer под Macintosh позволяет использовать персональные таблицы стилей, с помощью которых можно настроить вид страниц. Выберите в диалоговом окне Preferences пункт Web Content и активизируйте команду Use My Stylesheet (для этого потребуется указать размещение документа, содержащего таблицу стилей, как описано в главе 10). Netscape и IE под Windows позволяют выбрать настройки цветов и шрифтов. Opera (http:/ /www.opera.com), существующая в ряде вариантов под различные операционные системы, позволяет настраивать вид элементов. В листинге 5.1 приводится пример, аналогичный тому, что был представлен на рис 5.2, но в нем используются элементы логических стилей, а не физических. Результат можно увидеть на рис 5.3.
Рис. 5.3. Обычным браузером логические стили воспринимаются так же, как физические Листинг 5.1. Логические стили <р><еm>Все пользователи</еm> должны помнить о том, Элемент <q> используется в том случае, когда нужно вставить в текст знаки цитирования, которые в разных языках различаются. Большинство браузеров при этом просто выводят на экран знаки цитировали. В будущем, возможно, браузеры смогут выводить, например, какие-нибудь фигур ные кавычки. В некоторых случаях этот элемент можно использовать для измене ния стиля самого отрывка, - это касается прежде всего голосовых браузеров, которые, встретив этот тег, могут изменить интонацию. Например: <p><q lаng="ru">Я не понимаю, что ты имеешь в видy</q> Атрибут lang не является обязательным и содержит двухбуквенное обозначение национального языка, например "fr" (французский), "es" (испанский). Последние два логических элемента, <abbr> и <acronym>, немного отличаются от других. Обычно они используются для ввода дополнительной информации о сокращениях. Браузер может каким-то образом интерпретировать ее, а может и проигнорировать, но в любом случае хуже от этого не будет. У обоих элементов могут быть атрибуты lang и title. Последний содержит расшифровку данного сокращения или акронима. Вот несколько примеров: <abbr lang="ru" titlе="Российская Федерация">РФ</аbbг><br /> <acronym lang="fr" title="Association Canadienne pour В идеале, если браузер распознает акронимы и аббревиатуры, он по требованию может расшифровывать их. Например, Internet Explorer выводит расшифровки в маленьком окошке, которое появляется при наведении курсора на соответствующий элемент, как показано на рис 5.4.
Рис. 5.4. В Internet Explorer для Windows текст, содержащийся в атрибуте title, выводится при наведении мыши на слово, заключенное в контейнере <abbr> или <acronym> СОВЕТ Таким же образом можно создавать всплывающие окошки не только для аббревиатур или акронимов, но и для любых других элементов, к которым вы хотите добавить какие-либо пояснения, появляющиеся при наведении курсора мыши. Элементы стилей абзацев В главе 4 обсуждался элемент <р>, который используется практически все время при вводе текста на веб-страницах. Тем не менее это не единственный элемент, определяющий абзац. Существуют и другие контейнеры, содержащие и определяющие стили фрагментов текста. Элемент <рге> Элемент под названием «преформатированный текст» представлен тегами <рге> и </рге>. Его отличие от элемента «абзац» состоит в том, что он распознает все вводимые пробелы и переводы строк. То есть вы получаете в окне браузера при мерно то же и с тем же оформлением, что отображается в окне текстового редактора. При этом не требуются дополнительные усилия для добавления пробелов, не нужны <br /> для перевода строки. Следующий пример проиллюстрирован на рис 5.5. <рrе> Я обнял эти плечи и взглянул На то что оказалось за спиною И увидал, что выдвинутый"стул
Рис. 5.5. Теги <рrе> и </рrе> заставляют браузер обращать внимание на пробелы и переводы строк в исходном коде Преформатированный текст идеально подходит для оформления листингов npo грамм, потому что обычно в этом случае вы стремитесь передать не только синтаксис, но и правильное форматирование. Элемент <рге> позволяет также довольно просто создавать таблицы, используя пробелы в качестве разделителей. Тем не менее, поскольку эти таблицы печатаются моноширинным шрифтом, скорее всего вы согласитесь потратить время, но оформить таблицу специальными средствами HTML; они обсуждаются в главе 8. ПРИМЕЧАНИЕ На самом деле можно изменить шрифт текста внутри контейнера <рrе> с помощью таблиц стилей. Это сделает его более привлекательным, особенно в применении к таким специфическим текстам, как стихи (см. предыдущий пример). Это не поможет создавать более толковые таблицы с помощью <рrе>, потому что в этом случае вообще требуется моноширинный шрифт; это поможет выстроить колонки более или менее ровно. Использование <рrе> для создания таблиц Одной из возможностей <рге> является создание примитивных таблиц. Чтобы создать таблицу, важно прежде всего разобраться с расположением текста в ней. Иначе говоря, вы просто вводите текст внутри контейнера <рге>, представляя себе таблицу. Выравнивайте колонки с помощью пробелов, и результат будет действительно напоминать таблицу. Например: <рге> Год Событие 1976 Написан первый рассказ </рге>
<рге>
Поскольку теги из третьей строки не будут видны при просмотре в браузере, форматирование таблицы будет корректным, хотя в исходном коде это не заметно. СОВЕТ При создании таблиц с помощью <рге> я, на самом деле, советую избегать применения каких-либо стилей, как физических, так и логических. Очень мала вероятность того, что колонки будут расположены ровно, если в одной из строк текст оформлен жирным шрифтом, а в других не применяется никакого оформления. Разные браузеры по-разному воспринимают стили, и подобрать универсальное выделение практически невозможно, поэтому лучше вообще обойтись без него. Как создать простейшую таблицу? 1. Откройте файл шаблона и введите нечто подобное расположенному между тегами <body> Возможно, придется повозиться немного с интервалами между колонками, чтобы в браузере таблица приняла ровный вид. <h1>Средний часовой доход в регионах</h1> <рге> 2. Сохраните HTML-документ, затем примените команду Open File в браузере, чтобы просмотреть то, что вы создали . ПРИМЕЧАНИЕ Даже в составе контейнера <рге> символы табуляции браузером не распознаются. Если Bы пользуетесь текстовым редактором или процессором, старайтесь не использовать клавишу Tab для выравнивания колонок. Для этого существует клавиша Пробел. Некоторые HTML редакторы учитывают этот момент и заменяют табуляцию серией пробелов. Элемент <blockquote> Исторически сложилось так, что контейнерный элемент <blockquote> использует ся благодаря своим физическим, а не логическим атрибутам. Вообще-то, он предназначен для идентификации отступов абзацев, чтобы абзацы визуально выделялись из текста. Хотя это и легитимное применение даже с точки зрения XHTML, оно не должно быть основной причиной для использования <blockquote>. В следующем примере показано, как этот элемент справляется с задачей визуального выделения абзаца. <h1>Новости сайта!</h1> См. раздел <tt>Где перекусить</tt>. Не забудьте посетить
На рисунке 5.6 показано, как этот текст выглядит в браузере.
Рис. 5.6. Элемент <blockquote> в действии И все же, хотя это не является нарушением стандартов, я бы не стал использовал <blockquote> для организации отступов и доверил бы это таблицам стилей. Согласно W3C элемент <blockquote> должен использоваться для ввода цитируемого текста. Например: <р>Из историй Геттисбурга:</р>
Здесь показано более грамотное применение элемента <blockquote>. Результирующая страница показана на рис 5.7. Еще раз повторюсь: нет ничего страшного в том, чтобы использовать этот элемент для определения отступов абзаца, однако в этом случае следует иметь в виду, что все браузеры интерпретируют понятие абзаца по-разному.
Рис. 5.7. Элемент <blockquote> используется по прямому назначению Следует запомнить, что <blockquote> в браузере отображается обычным шрифтом абзаца, оформляется тем же стилем. Он не воспринимает лишние пробелы и переводы строк, в этом он похож на <р>. У этого элемента может быть аргумент cite, позволяющий включать в цитату URL, с которого она взята. Например: <blockquote cite="http://eserverorg/history/gettysburg-addresstxt"> Элемент <address> Контейнерный элемент <address> используется для создания текста, напоминающего по организации абзац, в котором содержится информация об авторе страницы. В большинстве браузеров текст, содержащийся в этом элементе, отображается курсивом. Однако, как и в случае других логических стилей, браузеры вольны отображать этот элемент так, как им заблагорассудится. Вот пример использования элемента <address>: <address>Cтpaница создана и поддерживается Традиционно этот элемент размещается в конце веб-документа и сообщает следующую информацию:
Большинство этих данных не являются жизненно важными для вашей страницы, но являются прекрасным дополнением информации, представленной на странице. Пример более полного использования элемента <address>: <address>Этa страница была последний раз обновлена Адрес: 12345 Ростовская обл., село Простоквашино<br /> Обратите внимание: по-прежнему для обозначения перевода строки используете тег <bг />. На рисунке 5.8 показано, как браузер отображает приведенный выше код.
Рис. 5.8. Обычно текст, заключенный в контейнер <address>, отображается курсивом. Обозначение исправлений: <ins> и <del> <ins> и <del> — это элементы, представляющие особый интерес для создателей официальных проектов, посвященных бизнесу или образованию. Вообще-то, они должны использоваться исключительно в процессе работы над страницей. Используйте элемент <del>, чтобы обозначить фрагмент текста, который, скорее всего, будет удален, a <ins> - чтобы обозначить фрагмент, вставляемый на место удаляемого. Они могут использоваться и независимо, если вы просто хотите вставить или удалить текст. Это полезно, когда над страницей работают несколько человек и вы хотите отслеживать изменения. Подобная функция имеется в текстовом процессоре Microsoft Word, - если вы ей когда-нибудь пользовались, вы легко обнаружите сходство. У обоих элементов могут быть необязательные атрибуты cite, datetime или title. Они используются для того, чтобы пояснить свои действия. При этом с помощью datetime можно указать время, когда соответствующий элемент был вставлен. Тут тоже есть свои тонкости. Вот пример: 2001-12-05109:00:00-05:00 Это означает: 9:00 am EST, 12/05/2001. Что касается -05:00, то это часовой пояс. Атрибут cite позволяет задавать ссылку на URL, на котором содержится объяснение данного добавления или удаления. А атрибут title позволяет делать то же самое с помощью тегов. Рассмотрим пример: <р>Это важная информация для <ins datetime= Пример проиллюстрирован на рис. 5.9. ПРИМЕЧАНИЕ <ins> и <del> можно применить и к целому абзацу или другому блоку текста.
Рис. 5.9. Элементы <ins> и <del> помогают в процессе работы над документом Списки Элементы списков, как и абзацы и преформатированный текст, являются контейнерами XHTML, которые могут включать в себя другие элементы разметки текста. В списке всегда должно быть два элемента, один из которых задает тип списка, а другой отвечает за один конкретный пункт. Этими пунктами могут быть слова, предложения, абзацы и другие элементы XHTML, например изображения. В большинстве списков используется следующий формат: <тип списка> Каждый элемент <li> - это пункт списка, который всегда пишется с новой строки. С чего начинается эта строка, зависит от того, упорядочен список или нет, маркированный он или нумерованный. Упорядоченные и неупорядоченные списки Проще всего понять, что это такое, если говорить в терминах «нумерованный список» и «маркированный список» (соответственно). Нумерованный/упорядочен ный список задается элементом <оl>, а маркированный/неупорядоченный — элементом <ul>. Но пункты любого из них обозначаются с помощью <li>. При этом если список упорядоченный (<оl>), то в начало каждой строки вставляется ее порядковый номер в списке; если он неупорядоченный (<ul>), то вставляется знача маркировки. Вот как выглядит упорядоченный список: <ol> А вот пример неупорядоченного списка: <ul> В браузере это выглядит так, как показано на рис. 5.10. Кроме маркировки XHTML можно включать в списки другие списки, и они будут <ol>
Рис. 5.10. Нумерованные и маркированные списки Ничего сложного здесь нет. Нужно просто завершать вложенный список раньше, чем основной. На самом деле, необходимо вначале закрыть пункт основного списка, в котором содержится вложенный список, а затем продолжать основной. Атрибуты упорядоченного списка У вас есть возможность изменять поведение и вид списков с помощью определенных атрибутов. Тем не менее надо отметить, что эти атрибуты никак не согласуют ся стребованиями новых стандартов XHTML. Поэтому если вы хотите их использовать, то DTD должен быть для Transitional XHTML. И все же лучше использовать таблицы стилей (глава 10). Большинство графических браузеров поддерживают дополнительные атрибуты упорядоченных списков, включая start, value и type. Собственно, атрибут type есть и у маркированных списков. С его помощью можно изменить вид значка маркировки. В таблице 5.4 приведен список атрибутов нумерованных списков. Таблица 5.4. Атрибуты элементов нумерованных списков
С помощью атрибута start можно изменять начальное значение нумерованного списка. Например, чтобы вести счет с 10, напишите: <ol start="10">. Атрибут value используется для изменения значения конкретного элемента списка Например, можно изменить нумерацию прямо внутри списка: <ol> Атрибуты маркированного списка Этот пример тоже подходит только для переходного варианта стандарта ХНТМL. Если вы хотите применять DTD для XHTML Strict, не забудьте, что для изменения внешнего вида любых элементов следует применять таблицы стилей. Тем не менее существуют атрибуты маркированного списка, изменяющие его вид (вид маркеров):
Имейте в виду, что далеко не все браузеры воспринимают эти различия и не все делают это корректно. Вместо всех этих маркеров вам могут оставить один какой нибудь квадратик. Списки определений Последним типом списков является список определений. Он включает в себя два уровня элементов: термины и их определения. Синтаксически такой список coсто ит из следующих элементов: главного контейнера списка <dl> (definition list), тер мина <dt> (definition term) и определения <dd> (definition) <dt>, по идее, должен помещаться на одной строке, хотя в случае необходимости браузер переносите на следующую строку <dd> - это целый текстовый абзац. Большинство графиче ских браузеров размещают определение под термином с небольшим отступом. Например: <dl> Думаю, вы обратили внимание на то, что обычная стилевая разметка XHTML при менима внутри списков определений. Боле
Дата добавления: 2014-12-29; Просмотров: 437; Нарушение авторских прав?; Мы поможем в написании вашей работы! |
Генерация страницы за: 0.285 сек.