![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
HTML. Создание таблиц. Цель работы:изучение дескрипторов <table>, <th>, <td>иприобретение умения задания таблицы
Цель работы: изучение дескрипторов < TABLE>, < TH>, < TD> иприобретение умения задания таблицы, ее размера, шрифта записей в ячейках таблицы, расположения и вида таблицы. Таблица — весьма удобное средство представления данных, обладающих четко выраженной внутренней структурой, — например, финансовых отчетов или списков товаров. Язык HTML предлагает несколько специальных Создание таблицы. Дескрипторы < TABLE> и < /ТАВLЕ> ограничивают текст описания будущей таблицы, тэг < TR> используется для определения ее строк, а < ТН> и < TD> позволяют создавать ячейки таблицы. Существует два типа ячеек, из которых может быть построена таблица. Дескриптор < TH> отвечает за создание ячеек с заголовками, а тэг < TD> дает < HTML> < Table> < TR> < TD> Чтобы использовать таблицу в качестве средства компоновки данных для отображения в нескольких колонках, создайте таблицу с одной строкой и поместите в каждую ее ячейку данные, отвечающие определенной колонке. < /TD> <! --это одна ячейка--> < TD> Ячейка должна содержать информацию одном колонки. Например, можно заполнить три колонки текстом либо в одну поместить изображение, а в две другие — сопроводительный текст. < /TD> < TD> Броузер воспроизведет отформатированную таким образом информацию в нескольких колонках. Ширина каждого столбца построенной таблицы определяется текущей шириной окна броузера. < /TD> < /TR> < /TABLE> < /HTML> Окно броузера с этим кодом представлено на рис. 9.1. Рис. 9-1. Окно броузера с тремя колонками текста 1. Введите данные, которые должны отображаться в первой строке таблицы. Используйте символы табуляции для визуального выделения данных 2. Введите данные, которые надлежит поместить во вторую строку таблицы. Повторите - Ход работы: 1. Ознакомьтесь с данной инструкцией, вызовите броузер WEB щелчком «мыши» по иконке, откройте в нем «пустую» страницу. Откройте ее в виде HTML. 2. Наберите в открывшемся блокноте пример показанный на рисунке 9.1, сохраните изменения в меню “файл → сохранить” и обновите страницу. 3. Затем в меню “файл→ открыть” откройте файл созданный в лабораторной работе № 8 (в созданном ранее шаблоне лабораторной работы № 8«Калоев HTML. Лаб. 8». 4. Внесите в него ниже приведенные изменения (см. текст ниже), в графическом редакторе Блокнот. 5. Документ, сохраните в меню «файл → сохранить» и вновь обновите страницу. В итоге, код документа HTML выглядит следующим образом: < 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=" 10" bordercolor=" red" > < CAPTION> < hl> < font size=" 3" face=" MS Sans Serif" > < strong> Основные элементы DFD диаграмм< /strong> < /font> < /CAPTION> < TR> < TH> Элемент< /TH> < TH> Описание< /TH> < TH> Обозначение< /TH> < /TR> < TR> < TD> Внешняя сущность< /TD> < TD> Материальный объект или физическое лицо, представляющее собой источник или приемник информации< /TD> < TD> Имя внешнего объекта< /TD> < /TR> < TR> < TD> Функция/процесс< /TD> < TD> Действие, выполняемое моделируемой системой/процесс преобразования входных потоков данных в выходные в соответствии с определенным алгоритмом (обработки данных)< /TD> < TD> Имя функции/процесса< /TD> < /TR> < TR> < TD> Поток данных< /TD> < TD> Объект, над которым выполняется действие, может быть информационным (логическим) или управляющим. (Управляющие потоки обозначаются пунктирной линией со стрелкой)< /TD> < TD> Имя объекта< /TD> < /TR> < TR> < TD> Хранилище данных< /TD> < TD> Абстрактное устройство для хранения информации, которую можно в любой момент поместить в накопитель и через некоторое время извлечь, причем способы помещения и извлечения могут быть любыми< /TD> < TD> Имя объекта< /TD> < /TR> < /Table> < /P> < PRE> Мораль всей мысли такова таблица всякая нужна. Кому нужна молва, кому награда Экономисту ж таблица - небес награда, В ней видит отраженье жизни он, доход, доставшийся нам на кон, И утекший сквозь пальцы вялые руки - в расход Просочился в миг твой двухнедельный труд! < /PRE> < /body> < /html> Вид страницы с кодом представлен на Рис. 9.2.
10. Сохраните набранный текст под тем же расширением «.html» в отдельной папке в корневом каталоге или в папке «Мои документы» под названием включающем Вашу фамилию, например: Калоев HTML). 11. Запустите полученный файл в броузере Internet Explorer и в открывшемся окне Вы увидите набранную таблицу «Моя первая таблица в HTML ». 12. Студенту предлагается проанализировать набранный код фрагмента программы, поэкспериментировать, изменяя написание приведенных дескрипторов (тэгов) в редакторе Блокнот (не забудьте сохранить изменения и обновить страницу). 13. Оформить лабораторную работу (преподавателю сдавать лабораторную работу в электронном виде, допускается распечатка страницы на принтере). Внимание: При составлении записей в колонках следует стараться, чтобы записи по структуре были как можнопохожими. Задачи для самостоятельного решения. Предлагается самостоятельно изменить дескриптор < Bordercolor> этого примера. Измените толщину рамки таблицы. Измените в контейнере < TH > структуру записи таким образом, чтобы оно выглядело курсивом. Создайте собственную запись с четырьмя колонками. Вставьте приведенное четверостишье во вторую ячейку таблицы. Измените атрибут ALIGN, чтобы посмотреть изменение написания шрифта, например на Сenter. Контрольные вопросы. 5. Какие тэги вы применили в выше приведенном фрагменте? 6. Как в HTML подбирать размер ячейки? 7. В HTML можно опустить некоторые закрывающие дескрипторы, можно ли опустить закрывающий дескриптор < /Table>? 8. В каком порядке располагаются атрибуты дескриптора < TD>?
|