HTML_3-2

Параметры тега

21.04.2012

Гибкость и универсальность таблиц обеспечивается обилем параметров тегов

,

и

. ALIGN Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю. Когда используются аргументы left и right, текст начинает обтекать таблицу сбоку и снизу. BGCOLOR Устанавливает цвет фона таблицы. BORDER Устанавливает толщину границ в пикселах. Границы отображается вокруг таблицы и между ячейками. Слайд 39 Параметры тега 21.04.2012 CELLPADDING Определяет расстояние между границей ячейки и ее содержимым. Он добавляет пустое пространство к ячейке, увеличивая ее размеры. Без cellpadding текст в таблице «налипает» на рамку и снижает восприятие. Добавление cellpadding улучшает читабельность текста. Этот параметр не имеет особого значения, но помогает , когда требуется установить пустой промежуток между ячейками. CELLSPACING Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет и входит в общее значение. Параметр COLS указывает количество столбцов в таблице. Он помогает браузеру в подготовке к ее отображению. Без него таблица будет показана тогда, когда все ее содержимое будет загружено в браузер и проанализировано. Слайд 40 Параметры тега 21.04.2012 RULES. Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. В дополнение можно указать отображать линии между колонками (значение cols), строками (rows) или группами (groups), которые определяются наличием тегов , , , или . Толщина границы указывается с помощью параметра border. WIDTH. Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. Если это невозможно (в таблице находятся изображения), параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Как и высота, если ширина явно не указана, то она будет вычисляться на основе содержимого таблицы. Слайд 41 Параметры тега 21.04.2012 Параметры тега Каждая ячейка таблицы, задаваемая через тег , тоже имеет свои параметры. Некоторые совпадает с параметрами тега . ALIGN задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left —- выравнивание по левому краю, center — по центру и right — по правому краю ячейки. BGCOLOR Устанавливает цвет фона ячейки. Используя этот параметр совместно с атрибутом bgcolor тега можно получить разнообразные цветовые эффекты в таблице. COLSPAN Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Слайд 42 Параметры тега 21.04.2012 Здесь содержатся две строки и две колонки. верхние горизонталь-ные ячейки объединены с помощью параметра colspan. На нижнем рисунке применяется вертикальное объединение ячеек Слайд 43 Параметры тега 21.04.2012 HEIGHT Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании параметра height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. Если высота ячейки, превышающает ее содержимое, добавляется пустое пространство по вертикали. ROWSPAN Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. WIDTH Задает ширину ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину. Слайд 44 Параметры тега 21.04.2012 VALIGN Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию содержимое ячейки располагается по ее вертикали в центре. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии. Слайд 45 Параметры тега 21.04.2012 Особенности таблиц У каждого параметра таблицы есть свое значение установленное по умолчанию. Это означает, что если какой-то атрибут пропущен, то неявно он все равно присутствует, и с некоторым значением. Из-за этого вид таблицы может оказаться совсем другим, нежели предполагал разработчик. Чтобы знать, что можно ожидать от таблиц, нужно знать их явные и неявные особенности. Можно одну таблицу помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или тогда, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, как обычная таблица. Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек. Например, общая ширина определяется автоматически исходя из суммарной ширины содержимого ячеек плюс ширина границ между ячейками. Слайд 46 Параметры тега 21.04.2012 Особенности таблиц Поля вокруг содержимого, устанавливаемые через параметр cellpadding и расстояние между ячейками, которые определяются значением cellspacing. Если для таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры. Браузер автоматически добавляет переносы строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась без изменений. Иногда ширину содержимого ячейки невозможно изменить, когда работают с рисунками. Тогда ширина таблицы увеличивается, несмотря на указанные размеры. Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. Но для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу. Слайд 47 Параметры тега 21.04.2012 Выравнивание таблиц Чтобы выравнить таблицы по центру веб-страницы или по одному из ее краев используют параметр align тега . Результат будет заметен только в том случае, если ширина таблицы не занимает всю доступную область, т.е. меньше, чем 100%. На самом деле align не только устанавливает выравнивание, но и заставляет текст обтекать таблицу с других сторон аналогично поведению тега . Слайд 48 Параметры тега 21.04.2012 Выравнивание таблиц По умолчанию таблица формируется в виде сетки, при этом в каждой строке таблицы содержится одинаковое количество ячеек. Такой вариант вполне подходит для формирования простых таблиц, но совершенно не годится для тех случаев, когда предстоит сделать сложную таблицу. В подобных ситуациях применяются два основных метода: объединение ячеек и вложенные таблицы. Слайд 49 Параметры тега 21.04.2012 Объединение ячеек Для объединения двух и более ячеек в одну используется параметр colspan тега . Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В листинге приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка. Слайд 50 Параметры тега . Он устанавливает, сколько ячеек следует объединить по горизонтали. Аналогично работает и параметр rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, заменяет три ячейки, поэтому в следующей строке должно быть три тега или конструкция вида ... ... 21.04.2012 http-equiv="Content-Type" content="text/html; charset=windows-1251"> Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Слайд 51 Параметры тега 21.04.2012 http-equiv="Content-Type" content="text/html; charset=windows-1251"> Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 В первой строке примера задано три ячейки, две из них объединены с помощью параметра colpsan, а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Слайд 52 Параметры тега 21.04.2012 http-equiv="Content-Type" content="text/html; charset=windows-1251"> Браузер Internet Explorer Opera Firefox 6.0 7.0 7.0 8.0 9.0 1.0 2.0 Поддерживается Нет Да Нет Да Да Да Да Здесь показано правильное использова-ние параметров colspan и rowspan Слайд 53 Параметры тега 21.04.2012 В этой таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали. Слайд 54 Параметры тега 21.04.2012 Вложенные таблицы Объединение ячеек имеет некоторые недостатки, поэтому этот метод создания таблиц нельзя использовать повсеместно. Рассмотрим следующий листинг, где задается высота ячейки с помощью параметра height. Слайд 55 Параметры тега 21.04.2012 Содержимое таблицы Для задания выравнивания таблицы по центру веб-страницы или по одному из ее краев предназначен параметр align тега table. . . . таблицы. Слайд 56 21/04/2012 Параметры тега Вложенные таблицы Левая нижняя ячейка согласно коду HTML имеет высоту 40 пикселов, но поскольку высота содержимого правой колонки больше, чем содержимое левой колонки, то высота ячейки меняется. Получается, что параметр height в данном случае игнорируется. Некоторые браузеры могут отображать сложные таблицы с ошибками. Это может выражаться в тех таблицах, где явно устанавливается высота ячеек и их объединение по вертикали. Для упрощения верстки применяется прием с вложенными таблицами. Идея проста — в ячейку вкладывается еще одна таблица со своими параметрами. Поскольку эти таблицы в каком-то смысле независимы, то можно создавать довольно различные конструкции. Чтобы вложенная таблица занимала всю ширину ячейки, таблице надо задать ширину 100%. Слайд 57 21/04/2012 Параметры тега В данном макете с помощью таблицы создается две колонки, причем левая колонка имеет фиксированную ширину 150 пикселов. Чтобы создать подобие навигации, внутрь ячейки добавлена еще одна таблица с шириной 100%. Как видно из рисунка, если не задавать границы, то определить наличие таблиц по виду Веб-страницы довольно сложно. Поэтому таблицы активно применяются для верстки сложных макетов. Слайд 58 21/04/2012 Параметры тега Заголовок таблицы При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML существует специальный тег , который устанавливает текст и его положение относительно таблицы. Проще всего размещать текст по центру таблицы сверху или снизу от нее, в остальных случаях браузеры по разному интерпретируют параметры тега , из-за чего результат получается неодинаковый. По умолчанию заголовок помещается сверху таблицы по центру, его ширина не превышает ширины таблицы и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка у тега существует параметр align, который может принимать следующие значения. Слайд 59 21/04/2012 Параметры тега Заголовок таблицы left — выравнивает заголовок по левому краю таблицы. Текст выравнивается по левому краю таблицы. right — заголовок располагается сверху таблицы и выравнивается по правому краю таблицы. Firefox отображает заголовок справа от таблицы. center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию. top — результат аналогичен действию параметра center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами. bottom — заголовок размещается внизу таблицы по ее центру. В листинге 12.7 показано, как установить заголовок сверху таблицы. Обратите внимание, что тег находится внутри контейнера , это его стандартное местоположение. Слайд 60 21/04/2012 Параметры тега Слайд 61 21/04/2012 Слайд 62 Создание фреймов 21.04.2012 Для создания фрейма используется тег , который заменяет тег в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги , которые указывают на HTML-документ, предназначенный для загрузки в область. Пример разделения окна браузера на два фрейма Слайд 63 Создание фреймов 21.04.2012 При использовании фреймов необходимо как минимум три HTML-файла: первый определяет фреймовую структуру и делит окно браузера на две части, а оставшиеся два документа загружаются в заданные окна. Количество фреймов не обязательно равно двум, может быть и больше, но никак не меньше двух, иначе вообще теряется смысл применения фреймов. index.html — определяет структуру документа, menu.html — загружается в левый фрейм и content.html — загружается в правый фрейм. Слайд 64 Создание фреймов 21.04.2012     В первой строке кода указывают браузеру, что он имеет дело с фреймами, эта строка кода является обязательной. Контейнер содержит типовую информацию вроде кодировки страницы и заголовка документа. Слайд 65 Создание фреймов 21.04.2012 Здесь окно браузера разбивается на две колонки с помощью параметра cols, левая колонка занимает 100 пикселов, а правая — оставшееся пространство, заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц. В теге задается имя HTML-файла, загружаемого в указанную область с помощью параметра src. В левое окно будет загружен файл, названный menu.html, а в правое — content.html. Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно с помощью параметра name. Слайд 66 Файл menu.html 21.04.2012 http-equiv="Content-Type" content="text/html; charset=windows-1251"> МЕНЮ Слайд 67 Файл content.html 21.04.2012 http-equiv="Content-Type" content="text/html; charset=windows-1251"> СОДЕРЖАНИЕ Слайд 68 Файл с тремя фреймами 21.04.2012 "http://www.w3.org/TR/html4/frameset.dtd"> Слайд 69 Файл с тремя фреймами 21.04.2012 Здесь снова используется тег , но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через параметр rows, где для разнообразия применяется процентная запись. Слайд 70 Файл с тремя фреймами 21.04.2012 Из примера видно что, контейнер с параметром rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один . Чтобы не появилась вертикальная полоса прокрутки, и пользователь не мог самостоятельно изменить размер верхнего фрейма, добавлены параметры scrolling="no" и noresize. Ссылки во фреймах В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. При использовании фреймов схема загрузки документов отличается от стандартной. Основное отличие — возможность загружать документ в выбранный фрейм из другого. Для этой цели используется параметр target тега . В качестве значения используется имя фрейма, в который будет загружаться документ, указанный параметром name. Слайд 71 Ссылка на другой фрейм 21.04.2012 Файл index.html Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Слайд 72 Ссылка на другой фрейм 21.04.2012 Файл menu.html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Содержание Слайд 73 Ссылка на другой фрейм 21.04.2012 Здесь фрейму присваивается имя CONTENT. Чтобы документ загружался в указанный фрейм, используется параметр target="CONTENT". Имя фрейма должно начинаться на цифру или латинскую букву. В качестве зарезервированных имен используются следующие: _blank — загружает документ в новое окно; _self — загружает документ в текущий фрейм; _parent — загружает документ во фрейм, занимаемый родителем, если фрейма-родителя нет параметр действует также, как _top; _top — отменяет все фреймы и загружает документ в полное окно браузера. Слайд 74 Границы между фреймами 21.04.2012 Граница между фреймами отображается по умолчанию и, как правило, в виде трехмерной линии. Чтобы ее скрыть используется параметр frameborder тега со значением 0. Однако в браузере Opera граница хоть и становится в этом случае бледной, все же остается. Для этого браузера требуется добавить параметр framespacing="0". Таким образом, комбинируя разные параметры тега , получим универсальный код, который работает во всех браузерах. Если граница между фреймами нужна, в браузере она рисуется по умолчанию, без задания каких-либо параметров. Можно, также, задать цвет рамки с помощью параметра bordercolor, который может применяться в тегах и . Цвет указывается по его названию или шестнадцатеричному значению, а толщина линии управляется параметром border. Слайд 75 Убираем границу между фреймами 21.04.2012 Слайд 76 Изменение цвета границ 21.04.2012 Слайд 77 Границы между фреймами 21.04.2012 Параметры bordercolor и border тега также не являются валидными и не признаются спецификацией HTML. В данном примере линия между фреймами задается синего цвета толщиной пять пикселов. Линии различается по своему виду в разных браузерах, несмотря на одинаковые параметры Opera Internet Explorer Firefox Вид границы между фреймами в разных браузерах Слайд 78 Изменение размеров фреймов 21.04.2012 По умолчанию размеры фреймов можно изменять с помощью курсора мыши, наведя его на границу между фреймами. Для блокировки возможности изменения пользователем размера фреймов следует воспользоваться параметром noresize тега Параметр noresize не требует никаких значений и используется сам по себе. Для случая двух фреймов этот параметр можно указать лишь в одном месте. Естественно, если у одного фрейма нельзя изменять размеры, то у близлежащего к нему размеры тоже меняться не будут. Параметр noresize не требует никаких значений и используется сам по себе. Для случая двух фреймов этот параметр можно указать лишь в одном месте. Поскольку у одного фрейма нельзя изменять размеры, то у близлежащего к нему размеры тоже меняться не будут. Слайд 79 Запрет на изменение размера фреймов 21.04.2012 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Слайд 80 Полосы прокрутки 21.04.2012 Если содержимое фрейма не помещается в отведенное окно, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях полосы прокрутки нарушают дизайн Веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется параметр scrolling тега . Он может принимать два основных значения: yes — всегда вызывает появление полос прокрутки, независимо от объема информации и no — запрещает их появление. Если параметр scrolling не указан, то полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть. При выключенных полосах прокрутки, если информация не помещается в окно фрейма, просмотреть ее будет сложно. Поэтому параметр scrolling="no" следует использовать осторожно. Слайд 81 Плавающие фреймы 21.04.2012 Это - фрейм, который можно добавлять в любое место Веб-страницы. Другое его название — встроенный фрейм. Он называется так из-за своей особенности встраиваться прямо в тело Веб-страницы. Плавающий фрейм на Веб-странице. В него можно загружать HTML-документ и прокручивать его содержимое независимо от остального материала на странице. Размеры фрейма устанавливаются самостоятельно согласно дизайну сайта или собственных предпочтений. Слайд 82 Плавающие фреймы 21.04.2012 http-equiv="content-type" content="text/html; charset=windows-1251"> RGB | CMYK | HSB Слайд 83 Плавающие фреймы 21.04.2012 Здесь ширина и высота фрейма устанавливается через параметры width и height. Сам загружаемый во фрейм файл называется rgb.html. Если содержимое не помещается целиком в отведенную область, появляются полосы прокрутки. Другое удобство плавающих фреймов состоит в том, что в него можно загружать документы по ссылке. Для этого требуется задать имя фрейма через параметр name, а в теге указать это же имя в параметре target. Мы добавили несколько ссылок. Они открываются во фрейме с именем color. Слайд 84 21/04/2012 Слайд 85 21/04/2012 Скачать - Предыдущая HTML_3-1 Следующая - Файловые системы как предшественники баз данных Похожие презентации Строки в С++ Кадровый потенциал организации Как собрать команду начинающему интернет-бизнесу Как собрать команду начинающему интернет-бизнесу Lionel Messi Особые условия труда и психические качества человека Математика - презентация для начальной школы_ Я и мое имя (3 класс) - презентация для начальной школы_ Семейное воспитание как психолого-педагогическая проблема Подготовили: Студентки группы Т-104 Куликова Юлия, Сазонова Юлия Борьба с «отмыванием грязных» денег Подготовили студентки 2-го курса группы Э101 Овсянникова Надежда Орлова Любовь Дискретные системы и сигналы Обучение решению текстовых задач Учитель высшей категории: Сотникова Ирина Николаевна МБОУ – Средняя общеобразовательная школа Рынок капитала Петрова Презентация на тему "подготовка к ЕНТ" - скачать презентации по Педагогике Смесительные и детекторные диоды Найди правильное утверждение Развитие территории: тренды, идеи, практики Олжас Сулейманов Работа с дисками Использование INTERNET для повышения для повышения информационной культуры учителя учителя Михалева Татьяна Борисовна учитель матем Дидактический материал по русскому языку «Найди предложения» 1 класс Тема «Cудебный контроль за законностью осуществления исполнительной власти» Выполнил: студент 2-ого курса экономического факульт Содержание: 1. Определение термина «телеконференция». Определение термина «телеконференция» 2. АудиоконференцияАудиоконференция Исковое требование о защите прав потребителя. Пример М. Портер и его роль в развитии теории конкурентоспособности Подготовил: Безнощук Богдан, студент 4 курса, ДС-01 Royal shakespeare theatre Концепция энергетического интернета Духовная культура Локальные компьютерные сети. 8 класс