Internet_tehnologii_kurs_lek
.pdf
Пример 1.9. Использование элемента meta для определения ключевых слов и комбинаций ключевых слов
<meta паше="keywords" content="Молли, molly.com, html, xhtml, ess, проект, веб-проект, разработка, веб-разработка, perl, цвет, веб-цвет, журнал регистрации, журнал регистрации интернета, книги, компьютерная литература, статьи, учебные пособия, изучать, автор, инструктор, инструкция, инструктировать, обучение, образование, консультироваться, консультация, консультант, страница известных людей, список известных людей, стандарты, веб-стандарты, технический журнал веб-стандартов, веб-обзор, webreview.com, ух ты, мировая организация веб-мастеров, конференция, конференции, пользовательский интерфейс, простота использования, доступность, интернационализация, веб-культура" />
Обратите внимание, что хотя я много раз использовала слово web, оно употреблялось в сочетании с другими ключевыми словами. Большинство поисковых систем заблокируют поиск по сайту, если одиночное ключевое слово используется несколько раз. Это способ получения более высоких рангов, но не более того. Используйте ключевые слова, которые имеют смысл, или, если хотите употребить одно слово несколько раз, используйте его в реальных словосочетаниях.
Описания - это обычно 25 слов или меньше, описывающих назначение документа, как показано в примере:
<meta name="description" content="H Молли Е. Хольцшлаг, и этот веб-сайт часть моих трудов в Интернет-разработках и мои собственные мысли." />
Пример 1.11. Использование элемента meta для определения авторства страницы
<meta name="Author" content=" Молли Е. Хольцшлаг" />
Элемент meta также можно использовать для автоматического обновления документов в окне браузера и для запрещения индексирования определенных страниц поисковыми системами.
Элемент body
Элемент body - это тот элемент, где будет размещено содержимое и произведена разметка страницы с использованием языка XHTML для структурирования содержимого соответствующим образом. Элемент body размещается в элементе html, непосредственно за элементом head.
Пример 1.12. Размещение элемента body <html>
<head>
<title>Здесь размещается подходящий текст заголовка</Ь1ь1е>
</head>
<body>
</body>
</html>
Комментарии языка HTML
Комментарии позволяют временно скрыть содержимое или разметку, оформить содержимое элементов особым образом для обратной совместимости, обозначить части внутри документов и создать пояснения для других людей, которые, возможно, будут работать над страницей.
Синтаксис комментария языка HTML выглядит следующим образом:
<!-- -->
Все, что необходимо скрыть, обозначить или представить в виде руководства, размещается между открывающей и закрывающей частью комментария.
Можно отмечать разделы документа, как показано в примере 1.14.
Пример 1.14. Разметка логической структуры документа с использованием комментариев
<body>
<!-- начало основного содержимого --> <!-- начало содержимого нижнего колонтитула --> </body>
Добавление текста и ссылок Основная идея изобретателя Интернета, Тима Бернерса-Ли, заключалась в создании мультиплатформенных средств, позволяющих его
коллегам-ученым совместно использовать информацию, публиковать данные и помещать в рефераты ссылки непосредственно на реферируемый текст.
Правильное использование заголовков
Заголовки в языках HTML и XHTML представляют собой теги, которые используются для определения заголовков на странице. Существуют теги для шести уровней заголовков, начиная с <hl>...</hl> и заканчивая <h6>...</h6>. Заголовок, оформленный с использованием тега <hl>...</hl>, считается самым важным, приравниваемым по значимости к заголовку страницы; заголовок, оформленный с использованием тега <h2>...</h2>, исполняет роль подзаголовка, и так далее. Заголовки пятого и шестого уровней используются редко, хотя иногда они бывают полезны в очень сложных документах.
Обычно в одном разделе используется больше одного подзаголовока - это позволяет сделать содержимое более понятным для читателей. Как видно на рисунке 2.1, каждый уровень заголовка выделяется визуально при помощи размера шрифта. Самый большой размер шрифта соответствует тегу <hl>, для остальных тегов размер постепенно уменьшается.
Рис. 2.1. Представление заголовков в Web-браузере
Заголовки - это структурные единицы, а не визуальные Способ отображения заголовков реализуется по усмотрению разработчиков браузера. Также для определения стилей заголовков может использоваться язык CSS.
Добавление абзацев Управление абзацами выполняется при помощи элемента абзаца, который обозначается открывающим и закрывающим тегами <р>...</р>.
31
Между тегами элемента абзаца размещается текстовое содержимое, как показано в примере 2.2. Пример 2.2. Разметка абзацев с использованием открывающего и закрывающего тегов
<р>Мыслимо ли? На самом деле? Они едва не погибли. У них был бессмысленный взгляд, устремленный в море. Они смотрели с неослабевающим вниманием, как загипнотизированные.</р> <р>Это был Франк Меррил, тот, кто в конце концов прервал тишину, Меррил казался мраморным и его голос звучал неестественно, монотонно, с нотками металла.</р>
На рисунке 2.2 приведен пример отображения абзацев в браузере. Обратите внимание, что все необходимые разрывы строк вставляются в тех местах страницы, где размещены теги абзаца.
Рис. 2.2. Форматирование абзацев в Web-браузере
Встречаются случаи, когда у абзацев нет закрывающего тега. Это разрешается в языке HTML, но даже если вместо языка XHTML вы используете язык HTML, хорошим тоном программирования все же является использование закрывающих тегов абзаца. Тем не менее, отображение абзацев не зависит от выбранного подхода.
Длина строк текста абзаца соответствует размерам окна браузера и подбирается таким образом, чтобы заполнить все свободное пространство окна браузера до конца абзаца. В том месте страницы, где размещен конец абзаца, перед последующим содержимым вставляется разрыв строки и пустая строка.
Использование тега разрыва строки Тег разрыва строки применяется для разрыва строк абзаца. Он крайне полезен, когда для оформления текста, например стихотворения,
необходимо использовать заданные разрывы строк, как показано в примере 2.3. Пример 2.3. Использование разрывов строк
<р> Мой дядя самых честных правил <br /> Когда не в шутку занемог,<br />
Он уважать себя заставил<br /> И лучше выдумать не мог</р>
Рис. 2.3. Абзац с заданными разрывами строк
Упорядоченные списки Упорядоченный список - это список, элементы которого обязаны располагаться в определенном порядке. Примерами такого списка могут
служить рецепт или указания, как добраться до дома какого-нибудь человека. Упорядоченные списки также называют нумерованными списками.
Для создания упорядоченного списка необходимо два элемента. Первым элементом является элемент <ol> . . . </ol> (ordered list - упорядоченный список), а вторым - элемент <li> . . . </li> (list item - элемент списка).
Пример 2.4. Создание упорядоченного списка
<ol>
<li> Возьмите I-10 к выезду с трассы</li>
<li> После выезда поверните налево на трассу Булевар</li>
<li> Проедьте по трассе несколько миль, пока не попадете на Парк авеню.</li> </ol>
Элемент упорядоченного списка предупреждает браузер, что за последовательную нумерацию всех элементов списка отвечает сам браузер, как показано на рисунке 2.4.
Рис. 2.4. Так интерпретируется упорядоченный список браузером
Браузер автоматически генерирует порядковый номер для каждого элемента списка. Изменив с помощью языка CSS поведение браузера, для отображения диапазона чисел можно использовать различные стили, например римские цифры.
Неупорядоченные списки Неупорядоченный список - это список, в котором порядок размещения элементов не существенен. Эти списки больше известны как
маркированные списки. Маркированные списки можно использовать для отображения такой информации, как перечень продукции, список доступных возможностей или тезисов.
Структура неупорядоченного списка почти такая же, как у упорядоченного списка, используется элемент <ul>...</ul> (unordered list - неупорядоченный список) и элемент <li> . . . </li> (list item - элемент списка), как показано в примере 2.5. Этот тег информирует браузер, что элементы списка должны отображаться с маркерами, а не с порядковыми номерами.
32
Пример 2.5. Неупорядоченный список <р>Разделы сайта включают:</р>
<ul> <li>Книги</li> <li>CD и DVD</li>
<li>Электроника</li> <li>Фотографическое оборудование»:/li> <li>Программное обеспечение</li> </ul>
Рис. 2.5. Неупорядоченный список
В языке CSS существуют свойства для изменения стиля маркеров, например для использования квадратных маркеров вместо круглых. Вложенные списки Иногда, весьма полезно использовать вложенные списки, объединяющие неупорядоченные и упорядоченные списки. Вложенный список -
это список, размещенный внутри другого списка. Чтобы корректно создать вложенный список в языке XHTML, необходимо обязательно разместить вложенный список между открывающим и закрывающим тегом элемента списка, как показано в примере 2.6.
Пример 2.6. Упорядоченный список вложен внутрь другого упорядоченного списка
<ol>
<li>Взбивайте яйца, муку, масло и сахар до консистенции густой сметаны</li> <li>Вылейте в форму для выпечки пирога</li>
<li>Медленно добавьте и помешивайте перечисленные ингредиенты в следующем порядке:
<ol>
<li>Шоколадную массу, </li> <li>Измельченную корицу, </li> <li>1 ложку мускатного ореха</li> </ol>
</li>
<li>Поставьте печься в духовку на 40 минут</li> </ol>
На рисунке 2.6 продемонстрированы результаты.
Рис. 2.6. Вложенность упорядоченных списков
Для реализации вложенности можно использовать различные комбинации типов списков, например: упорядоченные списки внутри упорядоченных списков; упорядоченные списки внутри нумерованных списков; нумерованные списки внутри нумерованных списков; нумерованные списки внутри упорядоченных списков.
Маркеры любого вложенного неупорядоченного списка обычно не закрашены. Это обычное стандартное поведение браузера. При помощи языка CSS можно изменять стили порядковых номеров и маркеров для вложенных списков.
Вложенные списки - это превосходный способ быстрого и простого представления информации читателям, однако существует проблема чрезмерной вложенности списков. Если глубина вложенности списка составляет более трех уровней, а его структура сама по себе не является сложной, возможно, стоит пересмотреть подход, использованный для организации информации.
Списки определений
Список определений - это очень полезная, но, к сожалению, редко используемая конструкция языка HTML.
Списки определений состоят из трех элементов: элемента списка определений, <dl>...</dl>; элемента определения термина, <dt>...</dt>, и элемента определения описания, <dd>. . . </dd>.
Список определений может включать несколько терминов, как показано в примере 2.8. Пример 2.8. Список содержит несколько терминов
<dl>
<dt> Furkid (n)</dt>
<dd> Любимец, обласканный лишь за то, что он ребенок.</dd>
33
<dt> Nearshoring (v)</dt>
<dd> Реструктуризация рабочих сил компании путем перемещения работ в близко расположенные страны.</dd> <dt> Neurodiversity (n)</dt>
<dd> Набор не отклоняющихся от нормы невралгических манерповедения и способностей, представленных человеческой расой.</dd> </dl>
Браузер отображает термин обычным образом, а само определение отображается с отступом, как показано на рисунке 2.8.
Рис. 2.8. Отображение списка определений в браузере
Ссылки
Ссылки используются для связывания различных HTML-документов или частей одного документа. Существует два типа связывания: абсолютное и относительное.
При абсолютном связывании используется точный адрес файла, на который будет указывать ссылка. Этот тип связывания подразумевает указание домена, всех подкаталогов и имени файла (http://www.molly.com/books/springboard.html).
Относительное связывание подразумевает создание ссылок на файлы, находящиеся на одном и том же сервере, - другими словами, файлы, находящиеся поблизости. Можно связать один документ с другим документом, если оба хранятся в одном каталоге, просто используя имя файла: springboard.html.
Или, если документ находится в подкаталоге, указывается подкаталог: books/springboard.html.
Можно переместиться из каталога в другой каталог, находящийся уровнем выше: ../books/springboard.html. Берегитесь: ссылки в сетевых журналах и системах управления содержимым
Хотя большинство людей пропагандирует повсеместное использование относительных ссылок при работе с документами, которые находятся на одном сервере, такой вид связывания не всегда является наилучшим выбором.
Сервисы сетевых журналов и систем управления содержимым (Content Management Systems, CMS) создают архивы. Это значит, что относительные ссылки в архивном файле, хранящемся в другом месте, чем исходный файл, могут стать недействительными.
Обычные ссылки создаются с использованием якорного элемента <а> </а>. Атрибут гипертекстовой ссылки (href) используется для указания адреса ссылки, а текст, размещенный между открывающим и закрывающим тегами, становится связанным, как показано в примере 2.10.
Пример 2.10. Связывание с использованием абсолютного адреса
<а href="http://www.molly.com/books/aw.пып1">Читайте о HTML и CSS</a>
Важным моментом является доступность ссылок. Чтобы сделать ссылки более доступными для людей с ограниченными возможностями, можно использовать атрибуты, представляющие дополнительные подсказки для таких людей. Очень полезно использовать атрибут title. при наведении курсора на такую ссылку пользователю будет показана дополнительная подсказка. В примере 2.11 применяется данный атрибут с более подробным описанием ссылки.
Пример 2.11. Добавление атрибута title и его значения
<а href="http://www.molly.com/books/springboard.html" title="Читайте о планируемой книге от Эддисон-Весли называющейся HTMLи CSS">Читайте о HTML и CSS</a>
Еще одним важным атрибутом, отвечающим за доступность ссылок, является атрибут tabindex, который позволяет задавать порядок выбора ссылок при нажатии на клавишу Tab.
Поэтому, если вы хотите, чтобы ссылка была второй по значимости ссылкой на странице, следует указать значение атрибута ссылки tabindex: <а href="springboard.html" tabindex="2"> ... </a>.
Ссылки электронной почты Ссылка электронной почты - это обыкновенная ссылка, которая вместо выполнения перехода на другую страницу открывает окно
приложения для работы с электронной почтой, благодаря чему можно отправлять электронные письма человеку, электронный адрес которого указан в ссылке.
Значение атрибута href ссылки электронной почты начинается с префикса mailto:, за которым указывается адрес электронной почты получателя.
<а href="maito:molly@ya.ru">электронный адрес Молли</а>
Если вы хотите сделать ссылку более дружественной, можно добавить предметную строку, разместив за адресом электронной почты вопросительный знак (?), атрибут subject и его значение. Значение этого атрибута будет автоматически добавлено в качестве тему письма. <а href="maito:molly@ya.ru" subject="Обратная связь">электронный адрес Молли</а>
Для ссылок электронной почты можно реализовать и специальные возможности, воспользовавшись атрибутом title и его значением, а также атрибутом tabindex, если порядок следования ссылок на странице чрезвычайно важен для посетителей сайта.
Внутристраничное связывание Внутристраничное связывание позволяет создавать в документе ссылки, которые автоматически переносят посетителя в другое место
этого же документа. Такое связывание осуществляется путем создания ссылки на местоположение с использованием знака решетки (#), за которым указывается соответствующее имя, после чего определяется местоположение с использованием якорного элемента и атрибута name, значение которого соответствует имени, указанному в ссылке.
При необходимости, в документе можно использовать любое количество подобных ссылок. Этот метод особенно полезен для навигации по очень большим документам, как показано в примере 2.15.
Пример 2.15. Настройка внутристраничных ссылок <р><a href ="#news">Перейдите к новостям</а></р> <h1>Добро пожаловать</h1>
<р>Этот параграф приглашает вас.</р>
<h2>Ha тему</h2>
34
<р>Этот параграф расскажет о нас.</р>
<h2><a name="news">Hовости</a></h2>
<р>Эта секция ваша связь с переходом.</р> Используя метод внутристраничного связывания, можно выполнять связывание одного документа с определенным местоположением
другого документа. Этот метод полезно использовать для создания ссылки на текст, который может находиться на другой странице. В этом случае просто используется абсолютный адрес URL, за которым следует знак решетки и имя местоположения в первом документе, как показано в примере 2.16.
Пример 2.16. Использование ссылок для перехода на определенное местоположение в другом документе
<р><а href="http: //www.molly.com/headers.html#h2">Перейдите по этой ссылке для чтения о заголовках второго уровня</ах/р> Раздел определяется в том документе, на который создается ссылка:
<hl><a name="h2">Bce о заголовках второго уровня</а><h1>
Первый документ содержит ссылку на определенное местоположение другого документа.
Вязыке XHTML 1.1 атрибут name был полностью заменен атрибутом id. Поэтому, если вы используете язык XHTML 1.1, во всех якорных элементах необходимо заменить атрибут name на атрибут id.
Некоторые браузеры не понимают такую замену, поэтому, чтобы избежать проблем, для подобных страниц используйте документы, написанные на языках XHTML 1.0 или HTML.
Добавление изображений, мультимедиаисценариев Изображения, мультимедиа и сценарии позволяют сделать сайт «динамичным и насыщенным». Такой сайт будет динамичным, поскольку
многие из перечисленных возможностей позволяют посетителям активно взаимодействовать с сайтом. Сайт будет содержательным благодаря его насыщенности визуальными образами, дополняющими содержимое.
Для Web-графики применяется два основных формата: GIF и JPEG. Формат файла GIF лучше всего подходит для изображений с небольшим количеством цветов, простыми фигурами и областями, заполненными сплошным цветом; формат файла JPEG лучше всего подходит для изображений с большим количеством цветов и цветовых градиентов, например фотографий. Третьим форматом для Webграфики является формат PNG, однако отсутствие поддержки этого формата в некоторых браузерах, делает его использование менее привлекательным.
Понятие мультимедиа в Интернете можно отнести к ряду вещей, включая анимационные GIF-файлы, Flash-анимацию, аудио, видео, а также Java-апплеты. В этой главе понятие скрипты относится к эффектам, созданным с использованием языка JavaScript или DHTML. Эти эффекты можно вставлять в документы для придания страницам неповторимых особенностей.
Элемент img
При работе с изображениями мы будем использовать элемент img. Этот элемент является пустым - иначе говоря, элемент не содержит никакого текстового содержимого. Поэтому для него не нужно использовать закрывающий тег. На языке XHTML это выглядит следующим образом:
<img />
Если вставить этот элемент в таком виде в тело документа, ничего не произойдет. Поэтому, помимо самого элемента img, необходимо еще указать путь к изображению. Для этого используется атрибут src, название которого является сокращением от слова «source» (источник).
Взначении атрибута src указывается месторасположение и имя с расширением существующего файла с Web-графикой. В примере демонстрируется тег img с указанным источником изображения.
<img src="images/4>oTo.jpg" />
Обратите внимание, что для хранения Web-графики был использован подкаталог images. Изображения удобно размещать в подкаталоге того каталога, в котором хранятся документы, использующие их, или, если сайт невелик, в одном подкаталоге корневого каталога.
Вокне браузера появится изображение, как показано на рисунке 3.1.
Рис. 3.1. В окне браузера отображается изображение
Если в документе нет другого содержимого, изображение автоматически размещается в левом верхнем углу. Конечно, чтобы сделать это изображение более полезным, мы выполним ряд вещей:
окажем содействие браузерам для лучшего отображения изображения; предоставим полезную информацию для тех, кто, возможно, не сможет увидеть изображение; свяжем изображение.
Использование атрибутов width и height
Эти атрибуты не являются обязательными, но помогают браузерам отображать изображения более эффективно, поэтому эти атрибуты стоит использовать всегда.
<img src="фото.jpg" width="250" height="188" />
Следует всегда указывать правильную ширину и высоту. Если значения width и height будут больше размеров реального изображения, браузер растянет изображение, чтобы подогнать его размеры под указанные значения. Если указать меньшие значения, браузер выполнит сжатие изображение до указанных значений, уменьшив его.
Предоставление альтернативного текста
Некоторые пользователи отключают загрузку изображений в браузере. В таких случаях посетителям полезно предоставлять какие-нибудь сведения о том, что из себя представляет изображение.
Для этих целей используется альтернативный текст, который является значением атрибута alt, как показано в примере 3.2. Пример 3.2. Добавление текстового описания при помощи атрибута alt
<img src="фото.jpg" width="250" height="188" а1t="фотография красивого замка на фоне гор" />
Альтернативный текст отображается на сайте в двух случаях. В первом случае, он отображается в месте расположения изображения до его
35
полной загрузки, а также когда функция отображения изображений отключена, как показано на рисунке 3.4.
Во втором случае, альтернативный текст отображается в тот момент, когда указатель мыши проходит над изображением. Это полезно для всех, поскольку альтернативный текст предоставляет контекстно-зависимую информацию о назначении изображения, как показано на рисунке 3.5.
Рис. 3.4. Альтернативный, текст в браузере с выключенной функцией отображения изображений
Рис. 3.5. Альтернативный текст в виде всплывающей подсказки, появляющейся при перемещении указателя мыши над изображением
Связывание изображения
Можно связывать изображение с другим HTML-документом или полной версией изображения. Связывание изображения выполняется точно так же, как и связывание текста. Код изображения помещается в якорный элемент и указывается адрес связываемого документа, как если бы на месте изображения находился текст, что показано в примере 3.3.
Пример 3.3. Связывание изображения
<а href=" detail.html">
<img src="images/фото.jpg" width="250" height="188" alt="фотография красивого замка на фоне гор" /> </а>
Теперь изображение связано, и если посетитель щелкнет на нем, он будет перемещен на страницу detail.html. К ссылке можно добавить атрибут title, чтобы предоставить посетителям дополнительную информацию о ссылке. По умолчанию, вокруг изображения отображается граница, подчеркивающая тот факт, что изображение является связанным, а указатель мыши, когда находится над изображением, принимает вид руки, как показано на рисунке 3.6.
Рис. 3.6. Связанное изображение
Если изображение-ссылка была активирована, граница вокруг изображения примет стандартный цвет посещенной ссылки. Для того, чтобы избавиться от границы ссылки можно использовать атрибут border.
<а href="подробно.html">
<img src="images/фото.jpg" width="250" height="188" alt= "фотография красивого замка на фоне скал" border="0" />
</а>
Граница вокруг изображения, которое все еще остается связанным, больше не отображается, как показано на рисунке 3.7.
Рис. 3.7. Вокруг изображения, которое все еще остается связанным,, больше нет видимой границы
Вставка файлов при помощи элемента object
Одним из способов представления аудио, видео и других файлов является использование тега <a>, где в качестве параметра связывания указывается адрес размещения файла. Другим способом представления таких файлов является их вставка непосредственно на страницу.
36
Это означает, что вместе со страницей автоматически загружается программный модуль.
Все внешние файлы считаются объектами. К ним относятся как изображения, так и файлы мультимедиа. В современных спецификациях языков HTML и XHTML корректным способом включения всех файлов мультимедиа на страницу является использование элемента object для непосредственной вставки файла:
<object data="media/video-sample.avi" type="video/avi" />
В результате на странице появится приложение-плейер, после чего можно воспроизводить видео, как показано на рисунке 3.10.
Рис. 3.10. Вставленный на страницу плейер загружен в браузере Internet Explorer
Вслучае с файлами в формате Flash, для размещения файла среди содержимого страницы используется элемент object, как показано в примере 3.7.
Пример 3.7. Вставка файла Flash-ролика (SWF) на страницу с использованием элемента <object> <object classid="clsid:d27cdb6e-ae6d-llcf-96b8-444553540000" width="100" height="100" codebase="http://active.macromedia.com/flash6/cabs/swflash.cab#version=6,0,0,0">
<param name="movie" value="media/intro.swf" /> <param name="play" value="true" />
<param name="loop" value="true" /> <param name="quality" value="hight" /> </object>
Вбольшинстве браузеров, соответствующих стандартам и у которых включена функция воспроизведения Flash-анимации, сразу после загрузки страницы должно начаться воспроизведение файла.
Обратите внимание, что вместе с объектами указывается дополнительная информация. К ней относится значение атрибута codebase и элемента parameter, используемого для определения не только местоположения файла, но и других аспектов его воспроизведения. Все эти параметры генерируются программой Macromedia Flash при создании Flash-файпа. За дополнительной информацией по технологии Flash
обратитесь к документу по адресу http://www.macromedia.com/software/flash/.
Элемент object можно также использовать для аудио и Java-апплетов. Необходимо просто указать правильное значение для атрибута codebase и желаемые параметры, и все будет готово.
Однако существует огромный камень преткновения по использованию элемента object, то есть поддержка этого элемента в различных браузерах и платформах несовместима.
Простыми словами, вот к чему все это сводится: если файл мультимедиа должен быть максимально совместимым в различных браузерах, необходимо воспользоваться специальным элементом - элементом embed. Этот элемент никогда не существовал в формальных спецификациях, однако почти все браузеры его поддерживают; и хотя страницы, в которых используется элемент embed, при выполнении проверки корректности вызывают ошибки, они все равно будут работать.
Абсолютно логичным подходом считается одновременное использование элементов object и embed. Итак, если применить этот подход к только что использованному Flash-файлу, окончательная разметка будет выглядеть так, как показано в примере 3.8.
Пример 3.8. Вставка файла Flash-ролика (SWF)
на страницу с использованием элементов <object> и <embed>
<object classid="clsid:d27cdb6e-ae6d-llcf-96b8-444553540000" width="100" height="100" codebase="http://active.macromedia, com/flash6/cabs/swflash.cab#version=6,0,0,0"> <param name="movie" value="media/intro.swf" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="quality" value="high" /> < embed src="media/intro.swf" width="100" height="100" play="true" loop=true" quality="high"</embed> </object>
Теперь Flash-ролик будет воспроизводиться на странице практически во всех браузерах. Создание таблиц
Использование таблиц чрезвычайно эффективно для представления данных на Web-сайте.
До появления языка CSS таблицы использовались для отображения содержимого, фактически, таблицы стали инструментом для создания макетов страниц, так называемый прием табличной верстки.
На сегодняшний день таблицы остаются основным способом формирования макетов Web-документов. Однако у такого подхода существует ряд недостатков. Макеты, созданные на основе таблиц, медленно загружаются и зачастую являются сильно детализированными, что затрудняет эффективную работу с ними. Таблицы, используемые для макета, не соответствуют предположениям поисковых систем о структуре страниц, что является весьма важным моментом при формировании рейтингов, поэтому применение таких таблиц может привести к невозможности улучшения рейтинга. И, наконец, вероятно, самое важное - табличные макеты создают множество препятствий для доступности.
Подход, известный под названием переходный дизайн (transitional design), объединяет использование без труда разработанных таблиц и языка CSS для создания макетов, совместимых со старыми браузерами. Если необходимо поддерживать не только современные браузеры, то этот подход - отличный выбор. Однако в идеале следует совершенно отказаться от использования таблиц, кроме тех случаев, для которых они предназначались изначально.
Элемент table
Создание таблиц начинается с элемента table. Этот элемент предупреждает браузер, что последующие данные относятся к таблице, которая сейчас будет отображена. Элемент table считается непустым, поскольку в нем находится текстовое содержимое. Поэтому он записывается с использованием открывающего и закрывающего тега, как показано ниже:
<table> </table>
Если загрузить этот код в браузер, вы ничего не увидите - для этого необходимо добавить другие элементы. Однако у элемента table
37
существует несколько атрибутов, с которыми следует познакомиться. Ширина таблицы
Если необходимо задать ширину таблицы, это можно сделать с помощью атрибута открывающего тега table. Значения ширины могут выражаться двумя способами: в пикселях и в процентах. Значение, выраженное в пикселях, считается фиксированным, значением, поскольку ширина таблицы всегда будет соответствовать этому значению, как показано в примере 4.1.
Пример 4.1. Таблица с шириной, выраженной в пикселях, или фиксированной шириной
<table width="250"> </table>
Значение, выраженное в процентах, считается плавающим значением (известное так же, как динамическое, ИЛИ текучее), поскольку таблица будет занимать пространство, выраженное в процентах относительно свободного пространства окна браузера, как показано в примере 4.2.
Вданном случае таблица будет занимать 90% доступной ширины окна браузера, как показано на рисунке 4.2. Пример 4.2. Таблица с шириной, выраженной в процентах, или плавающей шириной
<table width="90%"> </table>
Ширина таблиц будет варьироваться из-за различных разрешений компьютерных мониторов, а также из-за изменения людьми размеров окна браузера на рабочем столе. Размеры плавающей таблицы будут изменяться всякий раз при изменении размеров окна браузера, чтобы заполнять доступное пространство.
Границы таблицы и интервалы
Язык HTML позволяет включить отображение границ таблицы, как показано ниже:
<table width="250" border="l">
Врезультате выполнения этой строки кода вокруг таблицы, а также вокруг всех ее строк и ячеек, будет отображена граница шириной в 1 пиксель.
Для добавления интервала между ячейками используется атрибут cellspacing. Для добавления интервала между содержимым ячейки и самой ячейкой используется атрибут cellpadding:
<table width="90%" border="l" cellspacing="5" cellpadding="5">
Добавление строки таблицы
Еще одна важная составляющая HTML-таблицы - это строка таблицы, представляемая элементом tr, как показано в примере 4.3. Пример 4.3. Таблица со строкой
<table width="90%" border="l" cellspacing="5" cellpadding="5"> <tr>
Данные
</tr>
</table>
Вкаждой таблице должна быть хотя бы одна строка. Строки - это вид таблицы по горизонтали. И хотя сама по себе приведенная разметка в браузере отображаться не будет, я добавила необходимые компоненты, чтобы можно было четко увидеть строку, как показано на рисунке 4.3.
Рис. 4.3. Таблица с одной строкой ~ интервалы между контуром строки и контуром таблицы установлены при помощи атрибутов eel 1 spacing и eel Ipadding
Таблица может содержать любое необходимое количество строк.
Рис. 4.4. Таблица, состоящая из трех строк
В следующем примере были добавлены две дополнительные строки, чтобы привести пример таблицы, состоящей из трех строк. Также была использована разметка, необходимая для отображения трех строк таблицы, как показано на рисунке 4.4.
Добавление ячеек таблицы Ячейки формируют вертикальные столбцы таблицы, используя теги табличных данных:
<td> </td>
Элемент табличных данных, вместе с элементами table и tr являются тремя неотъемлемыми составляющими любой таблицы, как показано в примере 4.4.
Пример 4.4. Таблица с одной строкой и тремя столбцами
<table width="90%" border="l" cellspacing="5" cellpadding="5"> <tr> <td>flaHHbie</td>
<td>flaHHbie</td>
<td>flaHHbie</td>
</tr>
</table>
38
Рис. 4.5. Анатомия простой таблицы: три ячейки, одна строка, ширина равна 90%, интервал равен 5
Эта таблица отображается в Web-браузере без дополнительной разметки, как показано на рисунке 4.5, поскольку в ней присутствуют все необходимые составляющие.
Конечно, таблица может содержать любое число ячеек, соответствующее необходимому количеству столбцов. Более того, можно улучшать внешний вид ячеек таблицы при помощи заголовков, что позволяет отличать заголовки столбцов от данных.
Добавление заголовков таблицы Заголовок таблицы обозначает заголовок столбца или строки таблицы.
<th> </th>
Чтобы заголовки описывали столбцы, находящиеся под ними, разместите все заголовки в одной строке, а затем добавьте столбцы, которые будут находиться под заголовками в последующих строках, как показано в примере 4.5.
Пример 4.5. Заголовки для ячеек таблицы
<table width="90%" border="l" cellspacing="5" cellpadding="5"> <tr> <th>Местоположение</th>
<th>Погода</th> <th>Часовой пояс</th> </tr>
<tr>
<td>Тиксон, Аризона</td> <td>Жаркая</td> <td>День долгий</td> </tr>
</table>
По умолчанию браузер отображает заголовки шрифтом с полужирным начертанием. На рисунке 4.6 видно, что текст заголовка отцентрирован. При помощи языка CSS можно, конечно, изменить начертание шрифта, цвет и другие стили заголовка.
Рис. 4.6. Добавление заголовков в таблицу Заголовки также можно использовать и для описания заголовков строк, как показано в примере 4.6. Заголовок будет размещаться в строке,
как показано на рисунке 4.7. |
|
Пример 4.6. Заголовки для ячеек таблицы |
___^_ |
<table width="90%" border="l" cellspacing="5" cellpadding="5"> <tr>
< №>Местоположение< / th> <td> Тиксон, Аризона </td> </tr>
<tr>
<th> Погода </th> <td> Жаркая </td> </tr>
<tr>
<th> Часовой пояс </th> <td> День долгий </td> </tr> </table>
39
Рис. 4.7. Использование заголовков строк в таблице
Для многих таблиц данных требуется одновременное использование как заголовков столбцов, так и заголовков строк, поэтому при необходимости данный метод можно комбинировать, как показано на рисунке 4.8.
Рис. 4.8. Заголовки строк и столбцов в таблице
Добавление заглавия
Заглавие таблицы можно задать при помощи элемента caption. <caption>...</caption>
Содержимое заглавия размещается между открывающим и закрывающим тегом элемента caption. Этот элемент располагается непосредственно за открывающим тегом table, и большинство браузеров отображает его содержимое над таблицей по центру, как показано в примере 4.7.
Пример 4.7. Добавление заглавия таблицы
<table width="90%" border="l" cellspacing="5" cellpadding="5"> <сарЬ1оп>Сравнение погоды и часового пояса</сарЫоп> <tr>
<th>MecTonc^o»;eHMe</th>
<th>TMKCOH, ApM30Ha</th> <th>Hac Berac, HeBafla</th> </tr>
<tr>
<th>Ilorofla</th>
<td>>KapKafl</td> <td>Жapкaя</td> </tr>
<tr>
<th>4acoBoft noHc</th> <td>fleHb дoлгий</td>
<td>CTaHflapTHOe горное BpeMfl</td> </tr>
</table>
На рисунке 4.9 показаны результаты выполнения кода.
Рис. 4.9. Добавление заглавия
Описание таблицы
Кратко описать содержимое таблицы можно при помощи атрибута summary элемента table: <table summary="текстовое описание">
Если вы думаете: «Эй, держу пари, что это как-то связано с доступностью», то вы попали в самую точку. Фактически, описание помогает людям с ограниченными возможностями, которым требуется больше контекстной информации о таблице.
40