Изображения в html-документе
Как интересный журнал или проспект теряет в своей привлекательности без цветных иллюстраций, так любой HTML-документ кажется сухим и невзрачным без использования графики. Значение графических изображений в аспекте создания электронных документов нельзя переоценить: реклама и коммерческие предложения компаний и юридических лиц становятся более выразительными и яркими, иллюстрации и схемы способны превратить скучный перечень услуг или расценок в интересный информативный материал, любой художественный рассказ или произведение будет восприниматься легче и естественнее при наличии картинок или фотографий.
Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif ) или JPEG (файл с расширением *.jpg или *.jpeg ) и одну строчку в HTML-тексте.
Допустим, нам нужно включить в документ изображение, записанное в файл images/Izobrazheniya_v_HTML-dokumente.gif находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:
Здесь слово IMG (Image) означает изображение, а параметр SRC (Source)-источник.
В качестве источника необходимо указать имя файла с изображением. Разумеется, если файл находится в другой, нежели страница, директории, то надо указать его местоположение. Изображение будет размещено в том месте на странице, где находится ярлык.Метка может также включать атрибут ALT=[текст] , например:
Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла images/Izobrazheniya_v_HTML-dokumente.gif . Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).
Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя .
Параметры HSPACE и VSPACE-определяет размер горизонтального и вертикального отступов от встраиваемого изображения до текста. Формат записи значений-в пикселях. По умолчанию, значения обоих типов отступа равно нулю.
Параметры тэга может включать следующие атрибуты:
| Атрибут | Функция |
| SRC= “файл” | Указание пути к встраиваемому изображению |
| BORDER= “n” | Указание рамки рисунка |
| WIDTH=n(%) | Определение ширины изображения |
| HEIGHT=n(%) | Определение высоты изображения |
| ALIGN | Указание типа выравнивания рисунка |
| HSPACE=n | Определение горизонтального отступа между рисунком и текстом |
| VSPACE=n | Определение вертикального отступа между рисунком и текстом |
| ALT | Указание альтернативного текста |
| TITLE | Создание информационной подсказки к изображению |
Пример 3.
| ПримерБазовые услуги Электронного правительства в соответствие с основными сферами жизнедеятельности граждан. |  |
Теперь о фоновой картинке. Фоном может быть как большой графический файл (учтите — в этом случае страничка будет грузиться дольше) так и его фрагмент, что более разумно. При использовании последнего он будет автоматически размножен Вашим Обозревателем, поэтому подбирайте фрагмент хорошо стыкующимся. Вставить в страницу фоновую картинку можно так:Параметру BACKGROUND присвоено значение images.gif — это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предпологается, что графический файл расположен в одной папке с Вашим документом, иначе нужно указать к нему путь.
Таблицы
Одним из наиболее мощных и гибких средств представления информационных данных в HTML по праву являются таблицы. В HTML таблицы являются не только удобным средством структурирования информации. Сегодня таблица становиться основой большинство электронных документов, структура которых может включать самые разнообразные элементы HTML.
Таблица начинается с метки
. Любая таблица состоит из ряда (тэг-контейнер
, Table Row), содержащего определенное количество ячеек (тэг-контейнер
Метка
| Атрибут | Функция |
| ALIGN | Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо). |
| WIDTH | Ширина таблицы. Ее можно задать в пикселях (например, WIDTH= “400”) или в процентах от ширины страницы (например, WIDTH= “80%” ). |
| BORDER | Устанавливает ширину внешней рамки таблицы и ячеек в пикселях (например, BORDER= “4”). Если атрибут не установлен, таблица показывается без рамки. |
| CELLSPACING | Устанавливает расстояние между рамками ячеек таблицы в пикселях (например, CELLSPACING= “2”). |
| CELLPADDING | Устанавливает расстояние между рамкой ячейки и текстом в пикселях (например, CELLPADDING= “10”). |
Таблица может иметь заголовок ( … ), хотя заголовок не является обязательным. Меткаможет включать атрибут ALIGN. Допустимые значения:(заголовок помещается над таблицей) и(заголовок помещается под таблицей).
Каждая строка таблицы начинается с метки
. Метка
| Атрибут | Функция |
| ALIGN | Устанавливает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо). |
| VALIGN | Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=CENTER (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю). |
Каждая ячейка таблицы начинается с метки
. Метка
| Атрибут | Функция |
| NOWRAP | Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку. |
| COLSPAN | Устанавливает размах ячейки по горизонтали. Например, COLSPAN= “3” означает, что ячейка простирается на три колонки. |
| ROWSPAN | Устанавливает размах ячейки по вертикали. Например, ROWSPAN= “2” означает, что ячейка занимает две строки. |
| WIDTH | Устанавливает ширину ячейки в пикселях (например, WIDTH= “200”). |
| HEIGHT | Устанавливает высоту ячейки в пикселях (например, HEIGHT= “40”). |
| BORDERCOLOR=#FFFFFF | Определяет цвет рамки #FFFFFF-белый цвет |
| BACKGROUND=image.gif | Фоновая картинка таблицы. |
Пример 4.
Пример
Перерыв — 10 мин
Методы обучения и преподавания: информационные технологии обучения.
Методы контроля формируемых на занятии компетенций:
u решение ситуационных задач (студент должен выполнить индивидуальное задание для получения определенных навыков по решению типовых задач);
u коммуникативные навыки оцениваются с помощью оценочного листа.
Самостоятельная работа студентов — 50 мин
Освоение практических навыков: Решение типовых и ситуационных задач.
Литература:
1. Ш.Д.Шарф HTML 3.2. Справочник-С.-ПБ.,1998.
2. Морис Б. HTML в действии-С.-ПБ., 1997
3. Гончаров М.В. Введение в Internet. Часть 7. Интернет для бизнесменов,
предпринимателей и банкиров.-М.,2001.
4. Под редакцией С.В.Симоновича. Информатика. Базовый курс.
Учебник для ВУЗов 2001, 640 с.
Перерыв — 10 мин
Статьи к прочтению:
- Изобразительные средства языка. полисемия, синонимы, эвфемизмы, антонимы. тропы (эпитет, сравнение, метафора, метонимия, аллегория, олицетворение).
- Изучение библиотечного фонда
как сделать отступ текста и картинки margin, padding в html документе
Похожие статьи:
-
Типы обрабатываемых изображений
По данному критерию сканеры подразделяются на черно-белые, серые и цветные. Черно-белые сканеры предназначены для ввода рисунков, текста, чертежей и…
-
Изображение формируется из примитивов вывода. Они могут быть объединены в части, к которым можно обращаться и которыми можно манипулировать как единым…