КАТЕГОРИИ:
Архитектура-(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)
Статические элементы языка HTML
- Общие сведения
- Служебные теги страницы
- Элемент HTML
- Элемент Body.
- Элемент МЕТА
- Размещение текста на странице
- Элемент абзаца (Р)
- Элемент перехода к новой строке (BR)
- Элементы, определяющие заголовки (HI, Н2,..., Н6)
- Элемент курсива (I)
- Элемент полужирного шрифта (В)
- Элементы большого (BIG) и малого (SMALL) шрифтов
- Создание списков
- Элемент неупорядоченного списка(UL)
- Элемент упорядоченного списка (OL)
- Ссылки
- Гиперссылки
- Понятие об абсолютных и относительных URI-адресах
- Навигация по странице
- Ссылки на адреса электронной почты
- Ссылки на файлы, отличные от Web-документов
- Таблицы
- Элемент TABLE
- Элемент CAPTION
- Элемент TR
- Элемент TD
- Элемент TH
- Фреймы
- Элемент FRAMESET
- Элемент FRAME
- Элемент NOFRAMES
- Указание целевого окна ссылок
- Размещение мультимедиа-источников на странице
- Размещение статических изображений
- Несколько замечаний к подготовке и размещению графики
- Специальные символы, используемые в языке HTML
- Использование таблиц стилей
- Что же такое таблицы стилей и для чего они нужны?
- Стилевые параметры элементов Web-страниц
- Свойства шрифта
- Свойства текста
- Свойства цвета и фона
- Свойства стилевых блоков
- Несколько замечаний по поводу практической реализации стилей и наследования
- Элементы DlVn SPAN — контейнеры стиля
- Наследование свойств
- Практическая реализация стилей
Общие сведения
Приступая к изучению любого языка программирования, нужно помнить, что лучший способ быстрого освоения новых знаний — это непосредственное их использование с самого начала. Процессы приобретения знаний и навыков должны быть неразрывно связаны друг с другом. Поэтому мы предлагаем вам параллельно с прочтением материала создавать ваши собственные Web-страницы в соответствии со своими потребностями.
Язык HTML снискал популярность в мире, благодаря своей простоте и исключительной полезности. Поэтому, помня об этих сильных сторонах языка, мы будем излагать материал, сообразуясь исключительно с этими особенностями, опуская многие тонкие моменты, которые, скорее всего, вам не потребуются, и в любом случае они всегда доступны в спецификации языка по адресу http://www.w3.org/TR.
Итак, как вы уже, наверное, знаете, HTML является стандартом представления документов, подобно тому, как в свое время формат RTF для текстовых файлов использовался для обмена информацией между различными текстовыми редакторами.
Однако RTF не позволял вручную редактировать документ. Для этого служили редакторы, которые, исходя из своих возможностей, преобразовывали форматирование, введенное пользователем для своего документа, в некое представление данных в файле. Отличительной особенностью HTML является доступность исходного кода страницы для просмотра и редактирования.
Например, набирая в текстовом редакторе Блокнот (Notepad) следующие строки (листинг 6.1) и сохраняя их в файле с расширением htm, мы получаем возможность отобразить строчку "Как легко оказалось забраться в браузер!" на любом компьютере, где есть программа просмотра Web-страниц.
Листинг 6.1. Web-страничка "изнутри"
<HTML>
<TITLE> Моя страничка </TITLE>
<BODY>
<Р> Как легко оказалось забраться в браузер! </Р>
</BODY>
</HTML>
Обратите внимание, что все браузеры, независимо от своей марки, будут отображать это строчку единообразно (рис. 6.1).
<="" img="">
Рис. 6.1. Отображение приведенного кода страницы в браузере
Итак, для представления текста в браузере необходимо создать файл, в который будет записан этот текст, как, например обычный текстовый документ, хранящийся в ТХТ-файле, и определенный набор слов, функциональная роль которых стандартизирована. Например, в листинге 6.1 тег <р> означает, что строчка "Как легко оказалось забраться в браузер!", будет отображаться с нового абзаца, со всеми вытекающими отсюда последствиями, которые будут определять размер отступов, положение на странице и т. д.
Приведенный выше элемент р является зарезервированным словом HTML и вместе с символами < и > образуют тег — ключевое понятие разметки страниц. Теги бывают двух типов — открывающие и закрывающие. Закрывающие отличаются от первых, символом косой черты перед названием элемента. Например, тег </р> указывает браузеру, что данный параграф закончен и для следующего текста, если он будет, нужно применять соответственно другое форматирование.
Существуют элементы, которые не требуют закрывающих тегов, однако все элементы, которые требуют их, должны быть закрыты.
Применяя теги, можно указывать свойства отображения текста путем установки атрибутов. К атрибутам относятся цвет шрифта, его размер, выравнивание и т. д. Например, заменив тег
<BODY>
приведенного выше листинга на тег
<BODY text=gray>
мы получим в браузере следующую страничку (рис. 6.2):
Рис. 6.2. Страничка, полученная в результате изменения атрибута font элемента Body
Как видим, цвет текста стал серым. Действие атрибута ограничено участками страницы, где не указан иной цвет для шрифта. Например, в листинге 6.2 цвет шрифта после его указания в теге <BODY> как серый, в тексте документа определяется еще раз, уже как черный.
Листинг 6.2. Демонстрация области действия атрибутов
<HTML>
<TITLE> Моя страничка </TITLE>
<BODY text=gray>
<Р> Как легко оказалось забраться в браузер! — Серый шрифт </Р>
<P><FONT соlоr=blасК>Черный шрифт</Font></Р>
<Р>Опять серый</Р>
</BODY>
</HTML>
Листингу 6.2 соответствует отображение страницы, приведенное на рис. 6.3.
Как видим, применение тега <FONT> с указанием атрибута color, принимающего значение black (черный), изменяет цвет шрифта. После закрывающего тега </FONT> цвет восстанавливает значение gray (серый).
Рис. 6.3. Отображение страницы в соответствии с листингом 6.2
В языке HTML определены такие элементы, как рисунок, таблица, маркированный список и т. д., которые позволяют добиваться достаточно сложной разметки страниц.
Нужно отметить, что HTML-код не чувствителен к регистру, однако элементы принято писать заглавными, а атрибуты — прописными символами, что повышает удобство прочтения кода документов.
Итак, приступим к изучению элементов языка.
Служебные теги страницы
Тело каждой страницы должно содержать служебную информацию, которая, с одной стороны, позволяет браузеру получать дополнительные сведения, как, например, версия языка HTML, использованного при создании страницы, а с другой — переносить вместе с документом сопроводительные сведения об авторстве, содержимом документа и т. д.
Элемент HTML
С этого элемента должна начинаться страница. По окончании кода страницы должен следовать закрывающий тег </HTML>, который указывает браузеру, что загрузка страницы завершена.
Элемент Body
Данный тег указывает браузеру, что начинается основная часть страницы (тело документа). В ранних версиях языка HTML, атрибутами данного элемента указывался цвет заднего плана страницы, цвет и размер шрифта, который будет использоваться в документе и т. д. Однако в последних реализациях этого языка все атрибуты данного тега объявлены нежелательными, а значит, в ближайшее время могут устареть. В дальнейшем, мы будем избегать рассмотрения нежелательных атрибутов.
Стоит отметить, что вместо многих нежелательных атрибутов введены механизмы использования каскадных таблиц стилей, благодаря чему функциональность языка только выигрывает.
Элемент МЕТА
Содержит в своих атрибутах сопроводительную к HTML-документу информацию. Применяется совместно со стандартным и определяемым программистами содержимым атрибутов. Никак не влияет на разметку страниц, и, как правило, используется поисковыми системами и программами, работающими с Web-страницами. Конечный тег данного элемента запрещен.
Одним из наиболее существенных атрибутов является http-equiv, с помощью которого браузеру передается информация о типе содержимого документа и кодировке, как показано в листинге 6.3.
Листинг 6.3. Пример использования тега <МЕТА>
<МЕТА http-equiv="Content-Type" content="text/html; charset=windows-1251">
Элемент МЕТА можно использовать, например, для передачи информации об авторе, программисте и т. д.
Кроме того, здесь помещается информация о документе для индексирования страниц. Пример указания сопроводительной к документу информации приведен в листинге 6.4.
Листинг 6.4. Указание информации о документе
<МЕТА name="Keywords" content="HTML, Web, Web-страница, книга, программирование, уроки">
<МЕТА name="Description" content="Здесь представлено руководство по языку HTML">
<МЕТА name="Author" content="Sergey Podolsky and Other">
<META name="Copyright" content="BHV, All Right Reserved">
Указывая сопроводительную информацию, вы, во-первых, обеспечите верное индексирование страницы поисковыми системами, а во-вторых, подскажите браузеру, в какой кодировке нужно отображать вашу страничку. Не поленитесь, и обязательно представьте в разделах Description и Keywords самую развернутую информацию.
Размещение текста на странице
Для качественного, красивого и функционально выгодного форматирования текста, в языке HTML присутствуют элементы, позволяющие реализовать достаточно развитые схемы разметки, как, например, таблицы, нумерованные и маркированные списки, заголовки. Кроме того, существует возможность для определения собственных стилей, применение которых по всему сайту создает эффект дизайнерской целостности и собственного стиля, а также экономит время дизайнера при создании сайта, т. к. определив один раз некий стиль, он может использовать его повсеместно.
Начнем с простейших элементов.
Элемент абзаца (Р)
Как следует из названия, этот элемент указывает браузеру на начало нового абзаца. В соответствии со встроенными в него возможностями, появление данного тега приводит к отступам от предыдущего абзаца. Конечный тег необязателен. Наиболее существенным атрибутом является align, указывающий на выравнивание текста и принимающий значения left (левое), right (правое), center (центральное) и justify (по ширине).
Элемент перехода к новой строке (BR)
Данный элемент завершает текущую строку и переходит к новой. В отличие от элемента "Абзац", BR не делает отступов от предыдущей строки и начинает следующую непосредственно под предыдущей. Конечный тег отсутствует.
Элементы, определяющие заголовки (Н1, Н2,..., Н6)
Вы уже, наверное, догадались, что в языке HTML присутствуют шесть типов заголовков. Это позволяет создавать иерархическое представление информации. Заголовок HI считается наиболее важным, чем заголовок не. Для всех шести типов элементов конечные теги обязательны. Пример использования заголовков приведен в листинге 6.5.
Листинг 6.5. Применение заголовков, абзацев, разрывов строк
<HTML>
<ТIТLЕ>Пример использования некоторых элементов<ТIТLЕ>
<BODY>
<Н1> Пример использования некоторых элементов </Н1>
Это просто строка. Обратите внимание, что эта, как и любая другая строка, автоматически переносится браузером, в зависимости от размеров его окна (разрешения экрана).
<Р> Это уже новый абзац. <ВR>Начнем новую строчку.
</BODY>
</HTML>
Необходимо отметить, что при написании Web-страниц не нужно заботиться о длине строк. Если одна строка не помещается внутри браузера целиком, то текст переносится на следующую строку, и т. д. Кроме того, с точки зрения отображения результата, не имеет значения, как дизайнер располагает строки HTML-кода. Это можно сделать даже в одну строку. Однако, с точки зрения удобства прочтения кода, следует каждый тег располагать с новой строки. Отображение листинга приведено на рис. 6.4. Обратите внимание на наличие вертикального отступа перед первой строчкой нового абзаца и отсутствие такового при использовании разрыва строк.
Рис. 6.4. Пример форматирования с использованием тегов <Н1>, <Р>, <BR>
Элемент курсива (I)
Конечный тег обязателен. Текст, заключенный внутри пары тегов, отображается в браузере курсивом.
Элемент полужирного шрифта (В)
Аналогично элементу "Курсив", конечный тег необходим. Как следует из названия, этот элемент позволяет получить выделение полужирным шрифтом.
Элементы большого (BIG) и малого (SMALL) шрифтов
В обоих случаях конечные теги обязательны. Эти элементы указывают браузеру необходимость отображения текста, заключенного между открывающим и закрывающим тегами, в увеличенном (уменьшенном) виде. Возможно последовательное применение тегов для еще большего увеличения или уменьшения шрифта.
В листинге 6.6 участка кода страницы буквы слова "Привет" последовательно увеличиваются.
Листинг 6.6. Пример последовательного применения тегов <BIG> и <SMALL>
<BODY>
<Р>
<SMALL>
<SMALL>
<SMALL>П</SMALL>p</SMALL>и</SMALL>в<BIG>e<BIG>т
</BIG>
</BIG>
</P>
</BODY>
Поскольку в этом примере мы использовали форматирование на различные буквы одного слова, то расположение тегов "каждый с новой строки" невозможно, т. к. это привело бы к возникновению пробелов между символами, что недопустимо. Это, пожалуй, единственный случай, когда нельзя пользоваться данным правилом.
Создание списков
Для упорядочивания отображаемой информации в языке HTML предусмотрена возможность отображения строк и абзацев в виде упорядоченных и неупорядоченных списков. Списки могут быть вложенными, вне зависимости от их типа.
Элемент неупорядоченного списка (UL)
Определяет начало маркированного списка. Конечный тег обязателен.
Используется совместно с элементом списка LI. Появление этого элемента указывает браузеру, что начинается следующий элемент списка. Конечный тег </LI> необязателен, но может использоваться для более "прозрачного" и понятного представления исходного кода страницы. Наиболее интересен атрибут type. Он определяет маркер, которым будут отображаться элементы списка. Имеется три типа маркера: disk (•), circle (О), square (П).
Пример Web-страницы, содержащей маркированный список, а также ее отображение в браузере представлено в листиге 6.7 и на рис. 6.5 соответственно.
Листинг 6.7. Пример использования маркированного списка
<BODY>
<Р>Достоинства использования списков:
<UL>
<LI>Информативность.
<LI>Простота.
<LI>Единообразие представления информации.
<UL>
</BODY>
<="" img="">
Рис. 6.5. Отображение страницы, фрагмент кода которой представлен в листинге 6.7
Элемент упорядоченного списка (OL)
В отличие от предыдущего элемента, тег <OL> открывает список, в котором элементы нумеруются. Этот элемент должен иметь закрывающий тег. Атрибут type устанавливает тип нумерации.
Для атрибута type определены значения, приведенные в табл. 6.1.
Таблица 6.1. Соответствие атрибутов type типам нумерации
| Атрибут Туре | Стиль нумерации | |
| Арабские цифры | 1,2,3,... | |
| а | Буквы нижнего регистра | а, b, с,... |
| А | Буквы верхнего регистра | А, В, С,... |
| i | Римские цифры в нижнем регистре | i, ii, iii,... |
| I | Римские цифры в верхнем регистре | |, ||,,... |
Если атрибут type не указывать, то список по умолчанию будет нумероваться арабскими цифрами. Пример использования стиля нумерации приведен в листинге 6.8.
Листинг 6.8. Пример упорядоченного списка
<BODY>
<Р>
Терпимость:
</Р> <OL type="I">
<LI>Позволяет остановить насилие.
<LI>Позволяет приобретать друзей.
<LI>Путь к миру.
<LI>Проявляется прежде всего дома.
</OL>
<Р> 16 ноября, согласно календарю UNESCO — международный день терпимости.
</Р>
</BODY>
Рис. 6.6. Отображение страницы, фрагмент кода которой приведен в листинге 6.8
Здесь представлены тезисы UNESCO о терпимости. Увидеть результат отображения Web-страницы в браузере можно на рис. 6.6.
Ссылки
Ссылки представляют собой связи между документами, посредством которых пользователь может легко загрузить в браузер новую страницу. Кроме того, они позволяют посылать электронную почту без явного ввода адреса и осуществлять навигацию по FTP-ресурсам. Справедливости ради, следует отметить, что представление FTP-сервера в виде Web-страницы генерируется непосредственно в браузере, однако в обычном HTML-файле можно смело делать ссылки на него.
Гиперссылки
Указывают браузеру на адрес документа, который должен быть загружен в браузер, после активизации ссылки нажатием кнопкой мыши или клавиши ввода с клавиатуры.
Для указания ссылок в языке HTML используется элемент A (anchor — якорь). Важнейшим атрибутом данного элемента является href, указывающий адрес ресурса, на который производится ссылка. Закрывающий тег обязателен. Простейший пример использования ссылки приведен в листинге 6.9.
Листинг 6.9. Пример использования элемента A
<BODY>
<Р>
Здесь находится <А href="http://www.bhv.ги">сайт Издательства BHV </А>
</Р>
</BOBY>
Приведенный в листинге 6.9 HTML-код отобразится, как показано на рис. 6.7.
Понятие об абсолютных и относительных URI-адресах
В приведенном в листинге 6.9 примере, в качестве адреса использовалась запись в виде http://www.MMH_cepBepa.ru. Данная запись определяет абсолютное положение необходимого источника, потому и называется абсолютным адресом.
Если ссылка указывает на документ в пределах одного сайта, то можно воспользоваться другим способом, привести относительную ссылку.
Рис. 6.7. Стандартное отображение ссылок
Например, если документ находится в одном каталоге со страницей, с которой производится ссылка, то можно в качестве адреса использовать просто имя нужного документа. В случае, когда файл находится в подчиненном, по отношению к исходной странице каталоге, то дополнительно указывается имя этого подкаталога. Пример использования различных видов ссылок показан в листинге 6.10.
Листинг 6.10. Пример использования абсолютных и относительных ссылок
<А href="http://www.m«w_cepBepa.com/contents/archive/
news/01012001.htm"> Здесь находятся новости первого дня нынешнего года" </А><А href="archive/news/01012001.htm" Та же самая ссылка, но адрес указан относительно текущего положения страницы </А><А href=".../downloads/downloads.htm" здесь загрузится страница,абсолютный адрес которой будетhttp://www.HMH_cepBepa.com/downloads/downloads.htm
Приведенный выше код будет верным только в том случае, когда страница, в которой он находится, будет размещена в папке contents, относительно корневой папки сервера — каталога, на диске компьютера, на котором размещен сайт.
Благодаря использованию относительных ссылок, Web-мастеру или программисту, создающему сайт, не нужно каждый раз указывать полный URL документа. Кроме того, можно писать код страниц, особенно не заботясь об их конечном положении, т. е. безотносительно к названию в виде URL. При публикации (перемещении) информации нужно лишь сохранить структуру каталогов. Для явного определения абсолютного адреса необходимо использовать элемент BASE, который указывает абсолютный адрес текущего документа. Как правило, указывать его не требуется, однако в случае нарушений навигации, вызванных какими-то ни было причинами, указание абсолютного адреса позволит избежать потенциальных проблем. Данный элемент используется следующим образом (листинг 6.11).
Листинг 6.11. Пример использования тега <BASE>
<HTML>
...
<BASE href="http:\\myserver.com\dir\page.htm">
...
<HTML>
Как видно из примера, в параметре href нужно указывать полный адрес к странице, учитывая подкаталоги сервера, начиная с уровня, следующего за каталогом, в котором находится начальная страница (при условии, что информация на сайте размещена иерархически).
Навигация по странице
Иногда бывает очень полезным определять ссылки на некоторые разделы страниц. Например, когда документ очень велик или состоит из нескольких информационных блоков, то, разместив ссылку на определенный раздел, вы существенно облегчите пользователю чтение страницы. Кроме того, данная функция незаменима при создании содержания, предметного указателя и т. д.
Такая возможность обеспечивается именованием определенных частей Web-документа уникальными идентификаторами, с последующим указанием на них в ссылках. Пример использования ссылок на области Web-страницы, а также пометки этих областей приведены в листинге 6.12.
Листинг 6.12. Пример использования навигации по странице
<P><A href=#chapterl> Глава 1</A><BR>
<А href=fchapter2>Глава 2</A><BR>
<А href=#сhapterЗ>Глава 3</A><BR>
</Р>
<Н1 id="chapterl">Глава 1 <H1>
<Н1 id="chapter2">Глава 2 <Н1>
<Н1 id="chapter3">Глава 3 <Н1>
В данном примере, используя элемент "Заголовок", мы указали его идентификатор. Аналогичным образом, мы можем присваивать идентификаторы многим другим элементам языка HTML.
Кроме использования внутри документа, данный вид ссылок может быть применен во внешних ссылках. Например, если мы хотим сослаться на третью главу приведенного выше примера, то ссылка будет выглядеть следующим образом (листинг 6.13).
Листинг 6.13. Пример использования внешней ссылки на часть страницы
<А href="maypage.htm#chapter3"> Глава 3 <А>
Когда пользователь активизирует такую ссылку, то в его браузере загрузится указанная страница, причем положение просмотра будет совпадать с положением, отмеченным идентификатором.
Ссылки на адреса электронной почты
Если вы хотите облегчить пользователю отправку сообщения по электронной почте на указанный адрес, то поместите на странице ссылку в виде
<а href="mailto:[email protected]"> Контакт со мной <А>
При ее активизации у пользователя запустится почтовый клиент, используемый по умолчанию, и на экране появится шаблон нового письма с уже указанным адресом получателя (в данном случае это будет [email protected]).
Аналогичным образом создаются ссылки на FTP-ресурсы, только вместо протокола HTTP указывается FTP.
Нужно отметить, что параметры отображения ссылок (цвет, шрифт, подчеркивание и т. д.) удобнее всего указывать с помощью таблиц стилей, которые мы изучим позже.
Ссылки на файлы, отличные от Web-документов
Очень часто необходимо предоставлять пользователю возможность загружать с сайта различные архивы, приложения, офисные документы и т. д. Для реализации этого, указываются ссылки аналогично HTML-страницам, однако возможности для их отображения устанавливаются программным обеспечением пользователя. В любом случае, при активизации такой ссылки браузер выводит сообщение о названии загружаемого файла. Если в операционной системе данному типу файлов сопоставлено некоторое приложение, то пользователь может непосредственно открыть файл (разумеется, предварительно он будет загружен в кэш браузера). В противном случае, он может лишь сохранить его на диске компьютера.
Приложения, которые могут работать в качестве OLE-серверов, загружаются в окно браузера, и им передается на обработку открытый файл (как, например, Microsoft Word 97).
Таблицы
В настоящее время трудно представить более-менее содержательный документ или отчет без табличного отображения данных. Тем более, когда речь заходит о базах данных.
Кроме структурированного представления данных, таблицы в HTML играют еще одну важную роль абсолютного позиционирования текста и графики. Позже, на примере, мы обсудим этот аспект, а пока сосредоточимся на основных тегах и атрибутах, форматирующих таблицы.
Элемент TABLE
Указывает начало таблицы. Конечный тег обязателен. Определены следующие атрибуты: wigth, cellpadding, cellspacing, border. Первый атрибут указывает область, занимаемую таблицей в окне браузера. Его значение может быть задано как процентами от доступной области, например wigth=50% означает, что каким бы ни было окно браузера, таблица будет занимать лишь половину этой области, так и количеством пикселов экрана, например wigth=900px значит, что ширина таблицы должна составлять 900 пикселов. Если окно браузера занимает меньшую ширину, то автоматически появится полоса прокрутки.
Обратите внимание, что минимальное значение ширины определяется самой длинной комбинацией слов. Это значит, что если значение wigth установлено, например, в 5 пикселов, а длина некоторого слова в одной из ячеек больше, то размеры таблицы будут автоматически увеличены. Код, приведенный в листинге 6.14 демонстрирует установку некоторых параметров отображения таблицы.
Листинг 6.14. Пример установки параметров таблицы
<TABLE wigth=5 px>
<TR> <TD> Экстраполяция
</TABLE>
Какое бы малое значение ширины таблицы в данном примере мы не установили, она будет определяться исходя из длины слова "Экстраполяция".
Следующий атрибут cellpadding указывает отступ содержимого ячеек таблицы от их границ.
Cellspacing устанавливает размер отступа между ячейками и полями вокруг таблицы. В приведенном в листинге 6.15 примере этот атрибут равен 10 пикселам. Как в предыдущем случае, это значение может быть задано как в пикселах, так и в процентах.
Листинг 6.15. Пример использования атрибутов cellpadding и cellspacing
<TABLE border="l" width="100%" cellspacing="10" cellpadding="3">
<TR>
<TD width="50%">Пepвaя ячейка</ТD>
<TD width="50%">Bторая ячейка. Обратите внимание на образовавшиеся отступы.</TD>
</TR>
</TABLE>
В соответствии с приведенным кодом в браузере мы получим страницу, приведенную на рис. 6.8.
Рис. 6.8. Атрибуты cellspacing и cellpadding устанавливают различные виды отступов
Атрибут border определяет ширину поля в пикселах вокруг таблицы.
Элемент CAPTION
Указывает заголовок для таблицы. Конечный тег обязателен.
Элемент ТR
Начинает новую строку таблицы. Конечный тег необязателен. Доступны атрибуты align и vaiign. Первый устанавливает выравнивание содержимого ячейки по горизонтали (left — выравнивание влево, right — вправо, center — по центру, justify — по ширине), второй — по вертикали (top — сдвиг содержимого вверх, middle — посередине, buttom — вниз, baseline — по единой базовой линии).
Пример, приведенный в листинге 6.16, демонстрирует влияние атрибутов на размещение текста в таблице.
Листинг 6.16. Пример таблицы
<TABLE wigth=50 px>
<CAPTION> Таблица1 </CAPTION>
<TR align=left valigh=top><TD> Строка 1.
<TR align=left valigh=middle><TD> Строка 2.
<TR align=left valigh=bottom><TD> Строка 3.
</TABLE>
Приведенный код будет отображен в браузере таким образом, как показано на рис. 6.9.
<="" img="">
Рис. 6.9. Отображение таблицы, определенной в листинге 6.16, на экране
Элемент TD
Начинает новую ячейку в данной строке. Конечный тег необязателен.
Элемент ТН
То же самое, что и предыдущий элемент, но текст в ячейке выделен как заголовок. Использование двух описанных элементов приведено в листинге 6.17.
Листинг 6.17. Пример использования элементов TD и TH
<TABLE>
<TR> <ТН> Первая ячейка первой строки <TD> Вторая...
<TR> <TD> Первая ячейка второй строки
</TABLE>
Код, приведенный в листинге 6.17, отобразится на экране следующим образом (рис. 6.10).
Рис. 6.10. Использование элементов TD и ТН
Если необходимо объединить ячейки По горизонтали или по вертикали, то в элементе то используется атрибут coispan или rowspan соответственно (листинг 6.18).
Листинг 6.18. Пример использования атрибутов colspan и rowspan
<TABLE border="l" width="100%">
<TR>
<TD width="66%" со1зрап="2">Эта ячейка занимает место двух</ТD>
<TD width="34%"> </TD>
</TR>
<TR>
<TD width="33%"> </TD>
<TD width="33%"> </TD>
<TD width="34%" rowspan="2">3Ta ячейка занимает место двух
тоже</ТD>
</TR>
<TR>
<TD width="33%">Snbsp;</TD>
<TD width="33%"> </TD>
</TR>
</TABLE>
Код, приведенный в листинге 6.18, на экране отобразится следующим образом (рис. 6.11).
<="" img="">
Рис. 6.11. Пример объединения ячеек
Фреймы
Очень часто бывает необходимым в одном окне браузера отображать несколько страниц. Как правило, это совмещение различных панелей навигации по сайту и непосредственного содержимого страницы. Например, в приведенном на рис. 6.12 окне браузера отображаются сразу три Web-документа: слева и сверху присутствуют рубрикаторы, а в остальном пространстве — основная страничка.
Рис. 6.12. Пример фрейм содержащей страницы
Такое совмещение позволяет создавать одну или две странички для быстрого перехода по сайту, что повышает его функциональность и освобождает программиста от дублирования кода. Кроме того, при переходе по ссылкам данного ресурса не требуется перезагрузки рубрикаторов, что повышает скорость отображения информации.
Данное окно браузера разбивается на три фрейма (участка), в каждый из которых загружается соответствующий документ.
Рассмотрим код исходной страницы (листинг 6.19).
Листинг 6.19. Фрейм-содержащая страница
<HTML>
<HEAD>
<ТIТLЕ>Страница, которая определяет расположение фреймов</ТIТLЕ>
</HEAD>
<FRAMESET rows="64,*">
<FRAME name="banner" scrolling="no" noresize src="frl.htm">
<FRAMESET cols="150,*">
<FRAME name="contents" src="fr2.htm">
<FRAME name="main" src="fr3.htm">
</FRAMESET>
</FRAMESET>
</HTML>
Как видим, от обычной страницы этот пример отличается тем, что вместо непосредственно содержимого сайта указываются относительные размеры областей окна браузера со ссылками на страницы, загружаемые в обозначенные области. Рассмотрим используемые теги более подробно.
Элемент FRAMESET
Определяет начало разбиения окна на фреймы. Имеет два атрибута: rows и cols. Использование первого атрибута указывает, что окно браузера должно быть разбито на две или несколько областей горизонтальной границей, применение второго — вертикальной. Размеры получаемых полей устанавливаются одним из следующих способов:
1. Указываются абсолютные значения ширины (высоты) фреймов. Например, команда <FRAMESET cols="100, 300, 400"> задает поле под левую страницу шириной в 100 пикселов, среднюю — 300, левую — 400. Выделение областей под фреймы при использовании атрибута rows происходит аналогично, но уже горизонтальными разделителями. Если ширина окна браузера окажется отличной от 800 пикселов, то занимаемое страницами место при использовании указанной команды будет разделено пропорционально указанным размерам.
2. Вместо абсолютных значений задаются относительные. Размер окна браузера принимается за 100%, а занимаемые страницами участки делятся пропорционально указанным процентным соотношениям. Например, команда <FRAMESET cols="12%,38%,50%"> определяет разбиение страницы на участки, аналогичные предыдущему примеру.
3. Комбинируются абсолютные и относительные значения размеров областей. Например, <FRAMESET cols="100, 3*, 4*">. При этом, левый фрейм всегда имеет фиксированную ширину в 100 пикселов, а остальное пространство распределяется в соотношении 3/7 для среднего и 4/7 для правого фрейма. Нетрудно догадаться, что при ширине окна браузера в 800 пикселов, его разбиение будет соответствовать двум предыдущим примерам.
Нужно отметить, что элементы FRAMESET могут быть вложенными, что позволяет создавать сложную разметку страницы. Кроме того, если атрибуты rows и cols применяются одновременно, то фрейм-содержащая страница разбивается в виде таблицы с числом ячеек, равным произведению этих двух атрибутов.
Разумеется, что после разбиения основной страницы на фреймы необходимо определить сами документы, загружаемые в них. Это делается с использованием элемента FRAME.
Элемент FRAME
Служит для указания страницы, загружаемой во фрейм, а также параметров ее отображения. Имеет следующие основные атрибуты: name, src, noresize, scrolling, marginwidth, marginheight. Рассмотрим ИХ подробнее.
- Name — это атрибут, содержащий название фрейма. Используется главным образом для управления переходами по ссылкам. Более подробно роль этого элемента будет рассмотрена чуть позже.
- Src — указывает адрес страницы, загружаемой во фрейм. Разумеется, это должна быть абсолютная или относительная ссылка. Использование ссылок на элементы, определяемые страницам, недопустимо.
- Noresize — это параметр, принимающий два значения: 0 и 1. В первом случае, пользователь не может изменять размеры отведенного под фрейм окна. В противном случае — может.
- Scrolling — может принимать три значения: yes, no и auto. Если значение этого параметра равно yes, то во фрейме постоянно присутствует полоса прокрутки, по — она отсутствует, a auto — появляется в случае необходимости.
- Marginwidth — определяет ширину отступов содержимого фрейма слева и справа от границ окна, предоставленного ему в результате разбиения окна браузера на фреймы.
- Marginheight — определяет значение верхнего и нижнего полей внутри фрейма, аналогично предыдущему.
|
|
Дата добавления: 2014-12-29; Просмотров: 552; Нарушение авторских прав?; Мы поможем в написании вашей работы!