![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
HTML. Создание таблиц
Цель работы: изучение дескрипторов форматирования таблиц и приобретение умения задания параметров обтекания таблицы текстом, слияния ячеек таблицы, расположения и вида внутренних границ таблицы. Таблица — весьма удобное средство выравнивания текста и графики на всей странице. Язык HTML предлагает для этого несколько специальных Графический фон таблицы. Атрибут BACKGROUND позволяет снабдить графическим фоном отдельную ячейку таблицы или всю ее целиком (см. пример в лабораторной работе №10). Ячейка с графическим фоном сразу привлекает к себе внимание - это удобный способ выделения важной информации. Если расположить графическое изображение на фоне целой таблицы, легко добиться любопытных эффектов. Убедитесь, что примененное в качестве фона графическое изображение не ухудшает возможностей восприятия информации. Следует также обратить внимание на то, чтобы изображение обладало подходящим форматом. Если размеры изображения превышают габариты ячейки или таблицы, для которых оно предназначено, Web-броузер обрежет изображение таким образом, чтобы оно уместилось в пределах соответствующего объекта. Намереваясь использовать графическое изображение в качестве фона целой таблицы, имейте в Щелкните в пределах текста дескриптора, Введите BACKGROUND="? " и замените “? ” строкой, содержащей наименование графического файла и путь доступа к нему. Примечание: сведения о приемах задания имени Web-броузер отображает таблицу с фоном, Выравнивание данных в таблице. Атрибуты ALIGN и VALIGN позволяют устанавливать признаки горизонтального и вертикального выравнивания данных в таблице. Атрибут ALIGN предназначен для задания параметра выравнивания по горизонтали. По умолчанию Web-броузер содержимое ячеек заголовков (описываемых дескрипторами < ТН>) выравнивает по центру, а ячеек Если вы ограничите расстояние между содержимым ячейки и ее кромками специальным атрибутом (CELLPADDING), он окажет влияние на результат выравнивания. Например, при присваивании атрибуту CELLPADDING значения, равного 4, и - щелкните в пределах текста дескриптора, определяющего ячейку таблицы (< TH> или < TD>), ее строку (< TR>), группу столбцов (< COLGROUP> или < COL>) либо группу строк (< THEAD>, < TBODY> или < TFOOT>), Web-броузер отображает ячейку таблицы, ее строку, группу столбцов или строк, выравнивая данные в соответствии с указанным вами правилом. Однажды определив признаки выравнивания данных для строки, группы столбцов Пример: < TD> Этот текст будет выровнен вправо.< /TD> Предопределенная константа baseline позволяет указать на то, чтобы данные выравнивались по Пример: Пример: Пример: Щелкните в пределах текста дескриптора, определяющего ячейку таблицы (< TH> или < TD>), Введите VALIGN="? " и замените "? " одним из обозначений типа выравнивания - Изменение размеров таблицы. Изменяя размеры таблицы, вы сможете точно разместить ее в ограниченном свободном пространстве Web-страницы. Атрибут WIDTH позволяет указать новое значение ширины таблицы в экранных пикселях или процентах относительно текущих габаритов окна
поддерживается далеко не всеми Web-бро-
Если задать чрезмерно малые значения ширины Ход работы: 1. Ознакомьтесь с данной инструкцией, вызовите броузер WEB щелчком «мыши» по иконке, откройте в нем «пустую» страницу. Откройте ее в виде HTML. 2. Наберите в открывшемся блокноте код примера, показанный в лабораторной работе №10 рисунок 10.2., внесите ниже приведенные изменения в дескриптор TABLE. < html> < TITLE> Моя первая таблица в HTML< /TITLE> <! --тег названия страницы--> < head> < I> < B> ПРОБА - ШАБЛОН< /B> < /I> <! --тег заголовков страницы--> < /head> < BODY> < H5> & #169; 2005-09-08 Иванов Николай< /H5> < P Align=" RIGHT" > < font size=" 3" face=" MS Sans Serif" > < strong> Таблица№1< /strong> < /font> < Table border=" 4" CELLSPACING=" 10" CELLPADDING=" 5" bordercolor=" green" BACKGROUND=" C: \WINDOWS\Сиреневый пух.bmp" > <! --в тег можно вставить графический фон всей таблицы, например, взять графику по адресу www.nepthys.com/textures и www.imagine.metanet.com--> < CAPTION> < hl> < font size=" 3" face=" MS Sans Serif" > < strong> Основные элементы DFD диаграмм< /strong> < /font> < /CAPTION> <! --Выравнивание данных в ячейках оставлено по умолчанию--> < COLGROUP> < COL SPAN=”1”> < COL SPAN=”1”> < COL SPAN=”1”> < THEAD> < TR> <! --тег строки заголовков таблицы--> < TH> Элемент< /TH> < TH> Описание< /TH> < TH> Обозначение< /TH> < /TR> < /THEAD> < TBODY> < TR> <! --тег строки данных таблицы--> < TD> Внешняя сущность< /TD> < TD> Материальный объект или физическое лицо, представляющее собой источник или приемник информации< /TD> < TD> Имя внешнего объекта< /TD> < /TR> < /TBODY> < TBODY> < TR> < TD> Функция/процесс< /TD> < TD> Действие, выполняемое моделируемой системой/процесс преобразования входных потоков данных в выходные в соответствии с определенным алгоритмом (обработки данных)< /TD> < TD> Имя функции/процесса< /TD> < /TR> < /TBODY> < TBODY> < TR> < TD> Поток данных< /TD> < TD> Объект, над которым выполняется действие, может быть информационным (логическим) или управляющим. (Управляющие потоки обозначаются пунктирной линией со стрелкой) < /TD> < TD> Имя объекта< /TD> < /TR> < /TBODY> < TBODY> < TR> < TD> Хранилище данных< /TD> < TD> Абстрактное устройство для хранения информации, которую можно в любой момент поместить в накопитель и через некоторое время извлечь, причем способы помещения и извлечения могут быть любыми< /TD> < TD> Имя объекта< /TD> < /TBODY> < TFOOT> <! --тег итоговой строки таблицы--> < TD COLSPAN=" 3" ALIGN=" CENTER" > Примерный перечень элементов для построения потоков данных< /TD> < /TFOOT> <! -- Атрибут COLSPAN=" 3" ячейки TFOOT позволил слить столбцы в строке для того, чтобы то же самое сделать по столбцу применяют атрибут ROWSPAN=" 3" --> < /TR> < /Table> < BR> < HR NOSHADE BGCOLOR=" red" SIZE=" 3" > < /body> < /html> Сохраните изменения в меню «файл → сохранить» и обновите страницу. 3. Затем в меню «обновить» откройте вновь созданный файл (ранее Вы его создали в шаблоне к лабораторной работе №10 «Калоев HTML. Лаб. 10»). 4. Внесите в него приведенные выше в примерах дескрипторы и атрибуты (см. текст выше - пункты выравнивание данных и изменение размеров) атрибуты HEIGHT, ALIGN=" char" CHAR=".", ALIGN=" center", в графическом редакторе Блокнот. 5. Документ, сохраните в меню «файл → сохранить» и вновь обновите страницу. 6. Сохраните набранный текст под тем же расширением «.html» в отдельной папке в корневом каталоге или в папке «Мои документы» под названием включающем Вашу фамилию, например: Калоев HTML. Лаб. 11). 7. Запустите полученный файл в броузере Internet Explorer и в открывшемся окне Вы увидите набранную таблицу «Моя первая таблица в HTML ». 8. Студенту предлагается проанализировать набранный код фрагмента программы, поэкспериментировать, изменяя написание приведенных дескрипторов (тэгов) в редакторе Блокнот (не забудьте сохранить изменения и обновить страницу). 9. Оформить лабораторную работу (преподавателю сдавать лабораторную работу в электронном виде, допускается распечатка страницы на принтере). Внимание: При составлении записей в колонках следует стараться, чтобы записи по структуре были как можнопохожими. Задачи для самостоятельного решения. Самостоятельно измените дескриптор < Bordercolor> этого примера. Измените толщину рамки таблицы. Измените в контейнере < TH > структуру записи таким образом, чтобы оно выглядело курсивом. Создайте собственную запись с четырьмя колонками. Вставьте приведенное четверостишье во вторую ячейку таблицы. Измените атрибут ALIGN, чтобы посмотреть изменение написания шрифта, например на Center. Контрольные вопросы. Какие тэги вы применили в выше приведенном фрагменте? Как в HTML подбирать размер ячейки? В HTML можно опустить некоторые закрывающие дескрипторы, можно ли опустить закрывающий дескриптор < /Table>? В каком порядке располагаются атрибуты дескриптора < TD>?
|