Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Департамент образования города Москвы
Государственное бюджетное образовательное учреждение среднего профессионального
образования
Политехнический колледж № 39
Методические указания
к практической работе № 31
«Использование списков в HTML- документе. Вставка графики»
Дисциплина «Информатика и ИКТ»
Специальность - 151901 Технология машиностроения;
190631 Техническое обслуживание и ремонт автомобильного транспорта;
210414 Техническое обслуживание и ремонт радиоэлектронной техники (по отраслям);
230113 Компьютерные системы и сети;
240125 Технология производства и переработки пластических масс и эластомеров;
240138 Аналитический контроль качества химических соединений.
Москва
2012 год
Тема: Использование списков в HTML- документе. Вставка графики.
Общие сведения
В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный) (Unordered Lists <UL>), нумерованный список (упорядоченный) (Ordered Lists <OL>) и список определений (<DL>).
Записывается данный список при помощи тега <UL>:
<UL>
<LI>Первый элемент списка</LI>
<LI>Второй элемент списка</LI>
<LI>Последний элемент списка</LI>
</UL>
Теги <UL> и </UL> являются своеобразным обрамлением списка. Он позволяет отделить один список от другого. Тег <LI> (List Item) обозначает каждый из пунктов списка. Конечный тег </LI> не является обязательным.
Для тега <UL> предусмотрен атрибут type, определяющий вид маркера, который браузер помещает перед каждым элементом списка. Этот атрибут может отсутствовать или принимать одно из трех значений:
|
Начальный тег |
Вид метки на экране |
|
|
<UL> |
Обычный диск (зависит от браузера) |
|
|
<UL type=circle> |
○ |
Окружность |
|
<UL type=disc> |
● |
Диск |
|
<UL type=square> |
▫ |
Квадрат |
Нумерованный список
Нумерованный список задается при помощи тега <OL>:
<OL>
<LI>Первый элемент списка</LI>
<LI>Второй элемент списка</LI>
<LI>Последний элемент списка</LI>
</OL>
Конечный тег </LI> не является обязательным.
Вид номера определяется значением атрибута type в теге <OL>:
Естественную нумерацию элементов списка (с единицы) можно изменить при помощи атрибута start=n. Число n задает начальное значение нумерации. Если для нумерации используются буквы или римские цифры, то стартовое значение равно n-му элементу в системе нумерации (например, 4 означает D или IV).
Пример:
Для элемента <LI> может быть использован атрибут value, который определяет номер для текущего пункта списка:
value=номер
Соответственно, следующий пункт списка будет иметь очередной номер и т.д. При помощи атрибута value, если использовать его для первого в списке элемента <LI>, можно добиться такого же эффекта, что и при помощи атрибута start, или нарушить последовательность номеров, если переопределить другие элементы списка.
Вложенные списки
Еще один способ создания сложных списков – использование принципа вложения. Каждый элемент, определяющий пункт списка, может содержать еще один список. Вложенный список располагается с небольшим отступом вправо относительно списка верхнего уровня. Каждый из списков может быть создан и отлажен отдельно, а затем все составляющие могут быть объединены в один большой список.
Пример:
В примере нумерованные списки размещены внутри пунктов ненумерованного списка.
Вставка изображений.
На Web-страницы можно помещать изображения, хранящиеся в графических файлах сжатых форматов — GIF, JPG и PNG.
Задание фона странице.
Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например:
<IMG SRC=file.gif>
Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:
<IMG SCR=./pic/file.gif>
Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет-адрес этого файла. Например:
<IMG SRC=http://www.server.ru/file.gif>
Выравнивание изображения.
Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа). Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:
<IMG SRC="file.gif" ALIGN="right">
Отступы.
<IMG SRC=file.gif ALIGN=left hspace=10 vspace=10>
Атрибуты width=n и height=m , атрибут border=n
Атрибуты width (ширина) и height (высота) задают в пикселях прямоугольник, в который выводится картинка.
Атрибут border позволяет задать рамку вокруг иллюстрации толщиной в n пикселов. При отсутствии атрибута или при значении n=0 рамка не рисуется.
<IMG SRC=file.gif ALIGN=left weight=100 height=150 border-5>
Порядок выполнения работы.
Рис. 1.
Рис. 2.
Вид страницы приведен на рисунке 3.
Рис. 3.
Рис.4
Задания для самостоятельной работы.
Задание 1. Создайте web-страницу следующего вида.
Маркированный список.
Устройства ввода информации
Устройства вывода информации
Носители информации
Нумерованный список
Виды информации по форме представления
Задание 2. Создайте вложенный список.
Вложенный список
Задание 3. Графика. Задание фонового рисунка. Вставка иллюстраций из папки pic.
<body background="pic/fon3.jpg" bgcolor="A6CAF0" leftmargin=100 topmargin=60>
Примечание: фоновый рисунок и другие иллюстрации можете найти в ИНТЕРНЕТ.
<HTML>
<HEAD>
<TITLE>Вставка иллюстраций</TITLE>
</HEAD>
<body background="pic/fon3.jpg" bgcolor="A6CAF0" leftmargin=100 topmargin=60>
</BODY>
</HTML>
<IMG src=./pic/nadp.jpg align=right alt="Надпись о компьютере">
<IMG src=./pic/comp.jpg align=left alt="За компьютером" width=600 height=460>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>vv
<IMG src=./pic/vneust.jpg align=right alt="Внешние устройства">
Контрольные вопросы:
Литература